Skip to content
  • Home
  • Aktuell
  • Tags
  • 0 Ungelesen 0
  • Kategorien
  • Unreplied
  • Beliebt
  • 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

  • Standard: (Kein Skin)
  • Kein Skin
Einklappen
ioBroker Logo

Community Forum

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

NEWS

  • UPDATE 31.10.: Amazon Alexa - ioBroker Skill läuft aus ?
    apollon77A
    apollon77
    48
    3
    8.8k

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    13
    1
    2.2k

  • Neues Video "KI im Smart Home" - ioBroker plus n8n
    BluefoxB
    Bluefox
    16
    1
    3.2k

VIS eigenes Widget erstellen

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vis
88 Beiträge 7 Kommentatoren 15.3k Aufrufe 12 Watching
  • Älteste zuerst
  • Neuste zuerst
  • Meiste Stimmen
Antworten
  • In einem neuen Thema antworten
Anmelden zum Antworten
Dieses Thema wurde gelöscht. Nur Nutzer mit entsprechenden Rechten können es sehen.
  • 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
    schrieb am zuletzt editiert von
    #40

    @crunkfx so kann mans auch sagen klugscheiss.gif

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

    1 Antwort Letzte Antwort
    0
    • CrunkFXC CrunkFX

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

      da_WoodyD Offline
      da_WoodyD Offline
      da_Woody
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      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.
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        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
          schrieb am zuletzt editiert von
          #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 Antworten Letzte Antwort
          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.
            schrieb am zuletzt editiert von
            #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 Antworten Letzte Antwort
            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
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              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
                schrieb am zuletzt editiert von
                #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 Antwort Letzte Antwort
                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
                  schrieb am zuletzt editiert von
                  #47

                  @martink nope, schau sie dir an!

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

                  MartinK.M 1 Antwort Letzte Antwort
                  0
                  • da_WoodyD da_Woody

                    @martink nope, schau sie dir an!

                    MartinK.M Offline
                    MartinK.M Offline
                    MartinK.
                    schrieb am zuletzt editiert von
                    #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 Antwort Letzte Antwort
                    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
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      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
                        schrieb am zuletzt editiert von
                        #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 Antwort Letzte Antwort
                        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
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antwort Letzte Antwort
                            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.
                              schrieb am zuletzt editiert von
                              #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 Antwort Letzte Antwort
                              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
                                schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                                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
                                  schrieb am zuletzt editiert von
                                  #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 Antwort Letzte Antwort
                                  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
                                    schrieb am zuletzt editiert von
                                    #56

                                    @crunkfx gott.gif

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

                                    1 Antwort Letzte Antwort
                                    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.
                                      schrieb am zuletzt editiert von
                                      #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 Antwort Letzte Antwort
                                      0
                                      • MartinK.M Offline
                                        MartinK.M Offline
                                        MartinK.
                                        schrieb am zuletzt editiert von MartinK.
                                        #58

                                        @CrunkFX Das ist wirklich eine sehr gute Arbeit! Vielen Dank nochmals :+1: :+1: ... Wenn du nochmals ganz viel Zeit hast, dann könnte man ja auch noch die Jalousie Buttons mit aufnehmen... Und dann haben wir ja auch alles :hugging_face: ... aber das ist sicherlich nicht so einfach, in dem Shutter Button sind ja drei Bewegungszustände vorhanden... :thinking_face:

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

                                        CrunkFXC 1 Antwort Letzte Antwort
                                        1
                                        • MartinK.M MartinK.

                                          @CrunkFX Das ist wirklich eine sehr gute Arbeit! Vielen Dank nochmals :+1: :+1: ... Wenn du nochmals ganz viel Zeit hast, dann könnte man ja auch noch die Jalousie Buttons mit aufnehmen... Und dann haben wir ja auch alles :hugging_face: ... aber das ist sicherlich nicht so einfach, in dem Shutter Button sind ja drei Bewegungszustände vorhanden... :thinking_face:

                                          CrunkFXC Offline
                                          CrunkFXC Offline
                                          CrunkFX
                                          Forum Testing
                                          schrieb am zuletzt editiert von
                                          #59

                                          @martink Ja das lässt sich aber machen. Ich werde das beizeiten hinzufügen. Dimmer hab ich auch noch auf der Liste stehen.

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

                                          MartinK.M 1 Antwort Letzte Antwort
                                          1
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          733

                                          Online

                                          32.4k

                                          Benutzer

                                          81.5k

                                          Themen

                                          1.3m

                                          Beiträge
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Anmelden

                                          • Du hast noch kein Konto? Registrieren

                                          • Anmelden oder registrieren, um zu suchen
                                          • Erster Beitrag
                                            Letzter Beitrag
                                          0
                                          • Home
                                          • Aktuell
                                          • Tags
                                          • Ungelesen 0
                                          • Kategorien
                                          • Unreplied
                                          • Beliebt
                                          • GitHub
                                          • Docu
                                          • Hilfe