Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. VIS eigenes Widget erstellen

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    3.5k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    1.1k

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.5k

VIS eigenes Widget erstellen

Scheduled Pinned Locked Moved Visualisierung
vis
88 Posts 7 Posters 16.6k Views 12 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • MartinK.M MartinK.

    @crunkfx said in VIS eigenes Widget erstellen:

    @martink Das ist als Text Codiert. Es gibt die Möglichkeit Bilder komplett als Text zu Codieren und somit zu gewährleisten, dass der Endnutzer das Bild hat. In dem Link beginnend mit "data:image/jpeg" ist das Bild quasi Bit für Bit enthalten. Diesen Link kannst du z.B. hier: https://base64.guru/converter/decode/image zu einem Bild zurück wandeln.

    Cooole Sache! :sleuth_or_spy: Also ich habe in den letzten 24 Std. viel dazugelernt! :-) ... und warum ist es besser das PNG zu nutzen ? Ist das performanter für die VIS ?

    CrunkFXC Offline
    CrunkFXC Offline
    CrunkFX
    Forum Testing
    wrote on last edited by
    #38

    @martink Erstens muss er ständig Decodieren, zweitens ist die PNG Datei auf dem System Technisch nur 1 mal vorhanden und wird nur kopiert.

    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

    da_WoodyD 1 Reply Last reply
    0
    • da_WoodyD da_Woody

      @crunkfx said in VIS eigenes Widget erstellen:

      Da Woody Spezial

      boah, ey! doch nicht prinz, eher prinzessin! ausziehen.gif
      wenn du so weitermacht, wird da noch ein vis-abkömmling draus! respekt.gif

      CrunkFXC Offline
      CrunkFXC Offline
      CrunkFX
      Forum Testing
      wrote on last edited by
      #39

      @da_woody Wo kommen eigentlich die GIF´s immer her ? :blush:

      Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

      da_WoodyD 1 Reply Last reply
      0
      • CrunkFXC CrunkFX

        @martink Erstens muss er ständig Decodieren, zweitens ist die PNG Datei auf dem System Technisch nur 1 mal vorhanden und wird nur kopiert.

        da_WoodyD Offline
        da_WoodyD Offline
        da_Woody
        wrote on last edited by
        #40

        @crunkfx so kann mans auch sagen klugscheiss.gif

        gruß vom Woody
        HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

        1 Reply Last reply
        0
        • CrunkFXC CrunkFX

          @da_woody Wo kommen eigentlich die GIF´s immer her ? :blush:

          da_WoodyD Offline
          da_WoodyD Offline
          da_Woody
          wrote on last edited by
          #41

          @crunkfx kristallkugel.gif
          die sind aus meinem board und liegen da nur auf meiner SSD rum im backup

          gruß vom Woody
          HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

          1 Reply Last reply
          1
          • CrunkFXC CrunkFX

            @da_woody @MartinK

            Ich habe nun noch ein paar weitere Controls gebastelt. Solltet ihr noch wünsche haben, sagt bescheid.
            Hier könnt ihr das testen: https://iobroker.astoria-systems.de/vis/index.html?ShellyButons#Buttons

            Switch
            88efd492-02d7-46fc-ba83-5fce32e46c97-image.png
            Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch

            Switch mit Power
            c4c860cd-b135-445d-a0cb-9468ea31c09e-image.png
            Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch-Power

            Temperatur und Feuchtigkeit mit Batterie
            ce01d00a-4e7d-49c9-9c96-693c6d405493-image.png
            Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Hum-Temp-Bat

            Temperatur und Feuchtigkeit
            999b8913-92c6-46ef-835c-83b1240b20af-image.png
            Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Hum-Temp

            Energy
            604d323a-f82c-4364-91d0-b7d8cc52e531-image.png
            Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Power

            Da Woody Spezial
            ce61f3a9-ec41-4887-911a-05bf54191cf1-image.png
            Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/DaWoody

            EDIT

            Falls möglich benutzt bitte die Hintergründe als PNG. Bei vielen Elementen kann es mit Base64 zu Problemen kommen. Die Assets findet ihr hier: https://github.com/CrunkFX/IOBrokerCustomFiles/tree/master/Images

            MartinK.M Offline
            MartinK.M Offline
            MartinK.
            wrote on last edited by
            #42

            Falls möglich benutzt bitte die Hintergründe als PNG. Bei vielen Elementen kann es mit Base64 zu Problemen kommen. Die Assets findet ihr hier: https://github.com/CrunkFX/IOBrokerCustomFiles/tree/master/Images

            Ich habe noch eine Frage zu den PNG's ... Der on + off Button ist doch immer der gleiche ? oder worin besteht der unterschied in den Button PNG'S ? :grinning:

            ...konnte ich helfen ? Dann würde ich mich über ein Voting freuen ! (rechts unten)...

            CrunkFXC 1 Reply Last reply
            0
            • MartinK.M MartinK.

              Falls möglich benutzt bitte die Hintergründe als PNG. Bei vielen Elementen kann es mit Base64 zu Problemen kommen. Die Assets findet ihr hier: https://github.com/CrunkFX/IOBrokerCustomFiles/tree/master/Images

              Ich habe noch eine Frage zu den PNG's ... Der on + off Button ist doch immer der gleiche ? oder worin besteht der unterschied in den Button PNG'S ? :grinning:

              CrunkFXC Offline
              CrunkFXC Offline
              CrunkFX
              Forum Testing
              wrote on last edited by
              #43

              Ich habe noch eine Frage

              So viele du willst :wink:

              Der einzige Unterschied besteht in dem Blauen Teil

              Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

              MartinK.M da_WoodyD 2 Replies Last reply
              0
              • CrunkFXC CrunkFX

                Ich habe noch eine Frage

                So viele du willst :wink:

                Der einzige Unterschied besteht in dem Blauen Teil

                MartinK.M Offline
                MartinK.M Offline
                MartinK.
                wrote on last edited by
                #44

                @crunkfx said in VIS eigenes Widget erstellen:

                Ich habe noch eine Frage

                So viele du willst :wink:

                Der einzige Unterschied besteht in dem Blauen Teil

                ;-) .... Also diese 6 PNG's sind doch alle identisch oder? ist doch immer On / Off oder habe ich was übersehen ?

                33629663-ee95-46e5-bdcd-35a01bd6e782-image.png

                ...konnte ich helfen ? Dann würde ich mich über ein Voting freuen ! (rechts unten)...

                CrunkFXC da_WoodyD 2 Replies Last reply
                0
                • CrunkFXC CrunkFX

                  Ich habe noch eine Frage

                  So viele du willst :wink:

                  Der einzige Unterschied besteht in dem Blauen Teil

                  da_WoodyD Offline
                  da_WoodyD Offline
                  da_Woody
                  wrote on last edited by
                  #45

                  @crunkfx said in VIS eigenes Widget erstellen:

                  Der einzige Unterschied besteht in dem Blauen Teil

                  dann fehlt aber noch einer. floet.gif
                  wenn der SW kontakt verwendet wird!
                  cc45e6bc-90c8-4315-b69f-6d70cfb4eee2-grafik.png 25491fcd-d74f-4418-a1fd-3cfa5bebb38c-grafik.png
                  undweg.gif

                  gruß vom Woody
                  HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

                  1 Reply Last reply
                  0
                  • MartinK.M MartinK.

                    @crunkfx said in VIS eigenes Widget erstellen:

                    Ich habe noch eine Frage

                    So viele du willst :wink:

                    Der einzige Unterschied besteht in dem Blauen Teil

                    ;-) .... Also diese 6 PNG's sind doch alle identisch oder? ist doch immer On / Off oder habe ich was übersehen ?

                    33629663-ee95-46e5-bdcd-35a01bd6e782-image.png

                    CrunkFXC Offline
                    CrunkFXC Offline
                    CrunkFX
                    Forum Testing
                    wrote on last edited by
                    #46

                    @martink 292f1edb-e7d0-4cd9-9ae3-89db9151df0a-image.png
                    318ecd01-b933-4c95-9903-aad5ab0de000-image.png
                    Darin liegt der Unterschied in den Dateien

                    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                    MartinK.M 1 Reply Last reply
                    0
                    • MartinK.M MartinK.

                      @crunkfx said in VIS eigenes Widget erstellen:

                      Ich habe noch eine Frage

                      So viele du willst :wink:

                      Der einzige Unterschied besteht in dem Blauen Teil

                      ;-) .... Also diese 6 PNG's sind doch alle identisch oder? ist doch immer On / Off oder habe ich was übersehen ?

                      33629663-ee95-46e5-bdcd-35a01bd6e782-image.png

                      da_WoodyD Offline
                      da_WoodyD Offline
                      da_Woody
                      wrote on last edited by
                      #47

                      @martink nope, schau sie dir an!

                      gruß vom Woody
                      HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

                      MartinK.M 1 Reply Last reply
                      0
                      • da_WoodyD da_Woody

                        @martink nope, schau sie dir an!

                        MartinK.M Offline
                        MartinK.M Offline
                        MartinK.
                        wrote on last edited by
                        #48

                        @da_woody Sorry.... meine Augen sind von den hier geleisteten ganzen technischen Raffinessen schon total blind.... :sunglasses:

                        ...konnte ich helfen ? Dann würde ich mich über ein Voting freuen ! (rechts unten)...

                        da_WoodyD 1 Reply Last reply
                        0
                        • CrunkFXC CrunkFX

                          @da_woody @MartinK

                          Ich habe nun noch ein paar weitere Controls gebastelt. Solltet ihr noch wünsche haben, sagt bescheid.
                          Hier könnt ihr das testen: https://iobroker.astoria-systems.de/vis/index.html?ShellyButons#Buttons

                          Switch
                          88efd492-02d7-46fc-ba83-5fce32e46c97-image.png
                          Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch

                          Switch mit Power
                          c4c860cd-b135-445d-a0cb-9468ea31c09e-image.png
                          Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch-Power

                          Temperatur und Feuchtigkeit mit Batterie
                          ce01d00a-4e7d-49c9-9c96-693c6d405493-image.png
                          Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Hum-Temp-Bat

                          Temperatur und Feuchtigkeit
                          999b8913-92c6-46ef-835c-83b1240b20af-image.png
                          Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Hum-Temp

                          Energy
                          604d323a-f82c-4364-91d0-b7d8cc52e531-image.png
                          Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Power

                          Da Woody Spezial
                          ce61f3a9-ec41-4887-911a-05bf54191cf1-image.png
                          Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/DaWoody

                          EDIT

                          Falls möglich benutzt bitte die Hintergründe als PNG. Bei vielen Elementen kann es mit Base64 zu Problemen kommen. Die Assets findet ihr hier: https://github.com/CrunkFX/IOBrokerCustomFiles/tree/master/Images

                          sigi234S Online
                          sigi234S Online
                          sigi234
                          Forum Testing Most Active
                          wrote on last edited by
                          #49

                          @crunkfx said in VIS eigenes Widget erstellen:

                          Solltet ihr noch wünsche haben, sagt bescheid.

                          Tolle Arbeit!:+1:

                          Für Heizung wäre noch was Super.

                          Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                          Immer Daten sichern!

                          da_WoodyD 1 Reply Last reply
                          0
                          • MartinK.M MartinK.

                            @da_woody Sorry.... meine Augen sind von den hier geleisteten ganzen technischen Raffinessen schon total blind.... :sunglasses:

                            da_WoodyD Offline
                            da_WoodyD Offline
                            da_Woody
                            wrote on last edited by
                            #50

                            @martink biglol.gif glaub ich dir aufs wort!
                            was manche mädelz da raushauen ist oft wirklich faszinierend...droelf.gif

                            gruß vom Woody
                            HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

                            1 Reply Last reply
                            0
                            • sigi234S sigi234

                              @crunkfx said in VIS eigenes Widget erstellen:

                              Solltet ihr noch wünsche haben, sagt bescheid.

                              Tolle Arbeit!:+1:

                              Für Heizung wäre noch was Super.

                              da_WoodyD Offline
                              da_WoodyD Offline
                              da_Woody
                              wrote on last edited by
                              #51

                              @sigi234 said in VIS eigenes Widget erstellen:

                              Für Heizung wäre noch was Super.

                              für mich reicht da mein dawoody_spezial. ok automatisch steuern kann ich damit nicht, aber als anzeige langts.

                              gruß vom Woody
                              HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

                              sigi234S 1 Reply Last reply
                              0
                              • da_WoodyD da_Woody

                                @sigi234 said in VIS eigenes Widget erstellen:

                                Für Heizung wäre noch was Super.

                                für mich reicht da mein dawoody_spezial. ok automatisch steuern kann ich damit nicht, aber als anzeige langts.

                                sigi234S Online
                                sigi234S Online
                                sigi234
                                Forum Testing Most Active
                                wrote on last edited by
                                #52

                                @da_woody said in VIS eigenes Widget erstellen:

                                @sigi234 said in VIS eigenes Widget erstellen:

                                Für Heizung wäre noch was Super.

                                für mich reicht da mein dawoody_spezial. ok automatisch steuern kann ich damit nicht, aber als anzeige langts.

                                Jupp, ist ja alles änderbar.:grinning:

                                Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                Immer Daten sichern!

                                CrunkFXC 1 Reply Last reply
                                0
                                • CrunkFXC CrunkFX

                                  @martink 292f1edb-e7d0-4cd9-9ae3-89db9151df0a-image.png
                                  318ecd01-b933-4c95-9903-aad5ab0de000-image.png
                                  Darin liegt der Unterschied in den Dateien

                                  MartinK.M Offline
                                  MartinK.M Offline
                                  MartinK.
                                  wrote on last edited by
                                  #53

                                  ...Wäre es auch irgendwie möglich, wenn man lange Gerätenamen implementieren möchte, das man zwei Textzeilen Untereinander schreiben kann, damit man die Schrift nicht so klein machen muss - damit es schön in das schwarze Feld passt , also quasi so wie im Original ?? :grimacing:

                                  91c57089-0424-42d8-9ff0-0aca08f2644b-image.png

                                  ...konnte ich helfen ? Dann würde ich mich über ein Voting freuen ! (rechts unten)...

                                  CrunkFXC 1 Reply Last reply
                                  0
                                  • sigi234S sigi234

                                    @da_woody said in VIS eigenes Widget erstellen:

                                    @sigi234 said in VIS eigenes Widget erstellen:

                                    Für Heizung wäre noch was Super.

                                    für mich reicht da mein dawoody_spezial. ok automatisch steuern kann ich damit nicht, aber als anzeige langts.

                                    Jupp, ist ja alles änderbar.:grinning:

                                    CrunkFXC Offline
                                    CrunkFXC Offline
                                    CrunkFX
                                    Forum Testing
                                    wrote on last edited by CrunkFX
                                    #54

                                    Ich hab alle nochmal Final überarbeitet und ein paar neu hinzugefügt.
                                    Test-Link: https://iobroker.astoria-systems.de/vis/index.html?ShellyButons#Buttons

                                    @da_Woody

                                    Switch mit Input
                                    ac11f831-51a3-4a69-8c0a-fcb90511e58f-image.png
                                    Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch -w Input

                                    Power-Switch mit Input
                                    8ab2de98-351b-4764-a877-831a6e01ae70-image.png
                                    Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch-Power -w Input

                                    DaWoody Spezial mit Input
                                    f1873e39-0ce2-4c1c-8592-26a98a835041-image.png
                                    Code:https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/DaWoody -w Input

                                    Thermostat
                                    @sigi234 Das ist das Standard Heizthermostat von Shelly. Vielleicht hast du ja noch Ideen um das weiter auszuschmücken.
                                    6566917a-3a63-4895-a062-9fee07319ea4-image.png
                                    Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Thermostat

                                    Alle Links aus dem ersten Thread bleiben aktuell.

                                    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                                    da_WoodyD 1 Reply Last reply
                                    1
                                    • MartinK.M MartinK.

                                      ...Wäre es auch irgendwie möglich, wenn man lange Gerätenamen implementieren möchte, das man zwei Textzeilen Untereinander schreiben kann, damit man die Schrift nicht so klein machen muss - damit es schön in das schwarze Feld passt , also quasi so wie im Original ?? :grimacing:

                                      91c57089-0424-42d8-9ff0-0aca08f2644b-image.png

                                      CrunkFXC Offline
                                      CrunkFXC Offline
                                      CrunkFX
                                      Forum Testing
                                      wrote on last edited by
                                      #55

                                      @martink bf939a39-e718-4366-bee5-e492cce0043e-image.png Ja, dazu einfach im Editor das Textfeld größer ziehen. Dann wird eine Zeile tiefer geschrieben.

                                      Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.

                                      MartinK.M 1 Reply Last reply
                                      0
                                      • CrunkFXC CrunkFX

                                        Ich hab alle nochmal Final überarbeitet und ein paar neu hinzugefügt.
                                        Test-Link: https://iobroker.astoria-systems.de/vis/index.html?ShellyButons#Buttons

                                        @da_Woody

                                        Switch mit Input
                                        ac11f831-51a3-4a69-8c0a-fcb90511e58f-image.png
                                        Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch -w Input

                                        Power-Switch mit Input
                                        8ab2de98-351b-4764-a877-831a6e01ae70-image.png
                                        Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Switch-Power -w Input

                                        DaWoody Spezial mit Input
                                        f1873e39-0ce2-4c1c-8592-26a98a835041-image.png
                                        Code:https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/DaWoody -w Input

                                        Thermostat
                                        @sigi234 Das ist das Standard Heizthermostat von Shelly. Vielleicht hast du ja noch Ideen um das weiter auszuschmücken.
                                        6566917a-3a63-4895-a062-9fee07319ea4-image.png
                                        Code: https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/Thermostat

                                        Alle Links aus dem ersten Thread bleiben aktuell.

                                        da_WoodyD Offline
                                        da_WoodyD Offline
                                        da_Woody
                                        wrote on last edited by
                                        #56

                                        @crunkfx gott.gif

                                        gruß vom Woody
                                        HAPPINESS is not a DESTINATION, it's a WAY of LIFE!

                                        1 Reply Last reply
                                        0
                                        • CrunkFXC CrunkFX

                                          @martink bf939a39-e718-4366-bee5-e492cce0043e-image.png Ja, dazu einfach im Editor das Textfeld größer ziehen. Dann wird eine Zeile tiefer geschrieben.

                                          MartinK.M Offline
                                          MartinK.M Offline
                                          MartinK.
                                          wrote on last edited by
                                          #57

                                          @crunkfx ^

                                          @crunkfx said in VIS eigenes Widget erstellen:

                                          @martink bf939a39-e718-4366-bee5-e492cce0043e-image.png Ja, dazu einfach im Editor das Textfeld größer ziehen. Dann wird eine Zeile tiefer geschrieben.

                                          Aaaaah! Alles klar ! ;-)

                                          ...konnte ich helfen ? Dann würde ich mich über ein Voting freuen ! (rechts unten)...

                                          1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          555

                                          Online

                                          32.7k

                                          Users

                                          82.4k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe