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.3k

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 Hi, sollen dort auch wie beim Shelly die Werte für Leistung und Name angezeigt werden?

    MFG
    CrunkFX

    MartinK.M Offline
    MartinK.M Offline
    MartinK.
    schrieb am zuletzt editiert von MartinK.
    #12

    @crunkfx Das hast Du schnell erkannt um welche Buttons es sich handelt :grinning: Oh, das wäre natürlich der OBERHAMMER! Aber das könnte ich auch einfach mit einem Zahlenfeld verknüpfen.... :-) ...

    Wenn ich wüsste wie ich das anstellen muss, dann würde ich ja so nach und nach alle Shelly Buttons und Sensoren selber nach basteln :grin:

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

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

      @crunkfx Das hast Du schnell erkannt um welche Buttons es sich handelt :grinning: Oh, das wäre natürlich der OBERHAMMER! Aber das könnte ich auch einfach mit einem Zahlenfeld verknüpfen.... :-) ...

      Wenn ich wüsste wie ich das anstellen muss, dann würde ich ja so nach und nach alle Shelly Buttons und Sensoren selber nach basteln :grin:

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

      @martink Naja, nachbasteln ist leider nicht ganz so leicht bei den Elementen. Shelly macht die in einem Grafikprogramm und nutzt Funktionen wie z.B. rauschen. Das bekommst du in CSS leider nicht so hin. Da bleibt nur die Screenshot Variante. Ich mach mal kurz was fertig

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

      MartinK.M 1 Antwort Letzte Antwort
      0
      • CrunkFXC CrunkFX

        @martink Naja, nachbasteln ist leider nicht ganz so leicht bei den Elementen. Shelly macht die in einem Grafikprogramm und nutzt Funktionen wie z.B. rauschen. Das bekommst du in CSS leider nicht so hin. Da bleibt nur die Screenshot Variante. Ich mach mal kurz was fertig

        MartinK.M Offline
        MartinK.M Offline
        MartinK.
        schrieb am zuletzt editiert von
        #14

        @crunkfx Uhhh , da bin ich ja mal gespannt! :flushed:

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

        1 Antwort Letzte Antwort
        0
        • CrunkFXC Offline
          CrunkFXC Offline
          CrunkFX
          Forum Testing
          schrieb am zuletzt editiert von CrunkFX
          #15

          @martink c0f58e0c-5878-4274-85f7-6f1dc0847d2b-image.png

          Ich hab mal ne kleine Gruppenvorlage gebaut. Schau mal ob du da was mit anfangen kannst.

          (So geht importieren
          vvvvvvv


          d7355842-4c02-42bb-8c23-6a903c9ef54b-image.png
          )

          Den Inhalt hiervon bitte einmal importieren:
          https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/ShellyButtonwPower

          Einstellungen:
          690b196e-2582-4daa-b53e-86abaf210880-image.png

          Test Link: https://iobroker.astoria-systems.de/vis/index.html#35311

          Probier das mal aus.

          MFG
          CrunkFX

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

          MartinK.M da_WoodyD 2 Antworten Letzte Antwort
          1
          • CrunkFXC CrunkFX

            @martink c0f58e0c-5878-4274-85f7-6f1dc0847d2b-image.png

            Ich hab mal ne kleine Gruppenvorlage gebaut. Schau mal ob du da was mit anfangen kannst.

            (So geht importieren
            vvvvvvv


            d7355842-4c02-42bb-8c23-6a903c9ef54b-image.png
            )

            Den Inhalt hiervon bitte einmal importieren:
            https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/ShellyButtonwPower

            Einstellungen:
            690b196e-2582-4daa-b53e-86abaf210880-image.png

            Test Link: https://iobroker.astoria-systems.de/vis/index.html#35311

            Probier das mal aus.

            MFG
            CrunkFX

            MartinK.M Offline
            MartinK.M Offline
            MartinK.
            schrieb am zuletzt editiert von
            #16

            @crunkfx Woow!!! :flushed: :clap: :clap: :+1: Das ist ja Mega! Vielen Dank!
            Das hätte ich niemals so schnell geschafft ! Aber verrate mir doch mal womit man so etwas herstellt ?

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

            CrunkFXC 2 Antworten Letzte Antwort
            0
            • MartinK.M MartinK.

              @crunkfx Woow!!! :flushed: :clap: :clap: :+1: Das ist ja Mega! Vielen Dank!
              Das hätte ich niemals so schnell geschafft ! Aber verrate mir doch mal womit man so etwas herstellt ?

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

              @martink Mit Paint 3D den Screenshot leergemacht und dann als Base64 Codiert als Group in IOBroker erstellt.

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

              1 Antwort Letzte Antwort
              0
              • MartinK.M MartinK.

                @crunkfx Woow!!! :flushed: :clap: :clap: :+1: Das ist ja Mega! Vielen Dank!
                Das hätte ich niemals so schnell geschafft ! Aber verrate mir doch mal womit man so etwas herstellt ?

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

                @martink Übrigens, die Gruppe kannst du per Doppelklick bearbeiten und deine Ideen umsetzen.

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

                MartinK.M 2 Antworten Letzte Antwort
                1
                • CrunkFXC CrunkFX

                  @martink c0f58e0c-5878-4274-85f7-6f1dc0847d2b-image.png

                  Ich hab mal ne kleine Gruppenvorlage gebaut. Schau mal ob du da was mit anfangen kannst.

                  (So geht importieren
                  vvvvvvv


                  d7355842-4c02-42bb-8c23-6a903c9ef54b-image.png
                  )

                  Den Inhalt hiervon bitte einmal importieren:
                  https://raw.githubusercontent.com/CrunkFX/IOBrokerCustomFiles/master/ShellyButtonwPower

                  Einstellungen:
                  690b196e-2582-4daa-b53e-86abaf210880-image.png

                  Test Link: https://iobroker.astoria-systems.de/vis/index.html#35311

                  Probier das mal aus.

                  MFG
                  CrunkFX

                  da_WoodyD Offline
                  da_WoodyD Offline
                  da_Woody
                  schrieb am zuletzt editiert von da_Woody
                  #19

                  @crunkfx wow, geiles ding! und funzt auch noch! die steigerung wäre jetzt noch die werte vom shellyHT... :D
                  78e5cc37-ab7b-432d-a39f-9f9dc97d2c27-grafik.png

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

                  1 Antwort Letzte Antwort
                  0
                  • CrunkFXC CrunkFX

                    @martink Übrigens, die Gruppe kannst du per Doppelklick bearbeiten und deine Ideen umsetzen.

                    MartinK.M Offline
                    MartinK.M Offline
                    MartinK.
                    schrieb am zuletzt editiert von
                    #20

                    @crunkfx said in VIS eigenes Widget erstellen:

                    @martink Übrigens, die Gruppe kannst du per Doppelklick bearbeiten und deine Ideen umsetzen.

                    Oh, also das habe ich jetzt nicht so genau verstanden mit der Gruppe? Was ist den die Gruppe genau?? 🤔

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

                    da_WoodyD 1 Antwort Letzte Antwort
                    0
                    • MartinK.M MartinK.

                      @crunkfx said in VIS eigenes Widget erstellen:

                      @martink Übrigens, die Gruppe kannst du per Doppelklick bearbeiten und deine Ideen umsetzen.

                      Oh, also das habe ich jetzt nicht so genau verstanden mit der Gruppe? Was ist den die Gruppe genau?? 🤔

                      da_WoodyD Offline
                      da_WoodyD Offline
                      da_Woody
                      schrieb am zuletzt editiert von
                      #21

                      @martink du klickst im editor den balken doppelt an, dann kommt ein fenster, in dem kannst du die grösse u.s.w. ändern.

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

                      MartinK.M CrunkFXC 2 Antworten Letzte Antwort
                      0
                      • da_WoodyD da_Woody

                        @martink du klickst im editor den balken doppelt an, dann kommt ein fenster, in dem kannst du die grösse u.s.w. ändern.

                        MartinK.M Offline
                        MartinK.M Offline
                        MartinK.
                        schrieb am zuletzt editiert von
                        #22

                        @da_woody Aaaah, alles klar! Super!! :blush: :clap:

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

                        1 Antwort Letzte Antwort
                        0
                        • da_WoodyD da_Woody

                          @martink du klickst im editor den balken doppelt an, dann kommt ein fenster, in dem kannst du die grösse u.s.w. ändern.

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

                          @da_woody Hi, wie hättest du das denn gerne? So: 300e0fa1-7cfa-44d2-a353-edd813214ffc-image.png

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

                          da_WoodyD 1 Antwort Letzte Antwort
                          0
                          • CrunkFXC CrunkFX

                            @da_woody Hi, wie hättest du das denn gerne? So: 300e0fa1-7cfa-44d2-a353-edd813214ffc-image.png

                            da_WoodyD Offline
                            da_WoodyD Offline
                            da_Woody
                            schrieb am zuletzt editiert von da_Woody
                            #24

                            @crunkfx meinte eher eine kombi. obwohl das alleine wäre auch brauchber!
                            switch--.png.png
                            wären schon 3 möglichkeiten zum auswählen.
                            mann base64, da war mal was... schon ewig her...senf.gif
                            is nur schnell mit gimp zusammengetackert...

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

                            CrunkFXC 1 Antwort Letzte Antwort
                            0
                            • da_WoodyD da_Woody

                              @crunkfx meinte eher eine kombi. obwohl das alleine wäre auch brauchber!
                              switch--.png.png
                              wären schon 3 möglichkeiten zum auswählen.
                              mann base64, da war mal was... schon ewig her...senf.gif
                              is nur schnell mit gimp zusammengetackert...

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

                              @da_woody Ich schau mal was sich da machen lässt :call_me_hand:

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

                              da_WoodyD 1 Antwort Letzte Antwort
                              0
                              • CrunkFXC CrunkFX

                                @da_woody Ich schau mal was sich da machen lässt :call_me_hand:

                                da_WoodyD Offline
                                da_WoodyD Offline
                                da_Woody
                                schrieb am zuletzt editiert von
                                #26

                                @crunkfx bist ein schatz, gehörst vergraben... undweg.gif

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

                                CrunkFXC 1 Antwort Letzte Antwort
                                1
                                • CrunkFXC CrunkFX

                                  @martink Übrigens, die Gruppe kannst du per Doppelklick bearbeiten und deine Ideen umsetzen.

                                  MartinK.M Offline
                                  MartinK.M Offline
                                  MartinK.
                                  schrieb am zuletzt editiert von
                                  #27

                                  @crunkfx said in VIS eigenes Widget erstellen:

                                  @martink Übrigens, die Gruppe kannst du per Doppelklick bearbeiten und deine Ideen umsetzen.

                                  Ich habe noch eine kleine Frage, was bedeutet denn dieser "Klickschutz" in der Gruppe? Also wenn ich die Gruppe per doppelklick editiere, dann muss ich den "Klickschutz" ja erst einmal zur Seite schieben um an die einzelnen Gruppenbausteine zu kommen. Hat dieser "Klickschutz" auch noch eine weitere Funktion ? oder ist es nur ein Schutz bevor man anfängt zu editieren ? :-)

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

                                  CrunkFXC 1 Antwort Letzte Antwort
                                  0
                                  • MartinK.M Offline
                                    MartinK.M Offline
                                    MartinK.
                                    schrieb am zuletzt editiert von MartinK.
                                    #28

                                    ... Was ich jetzt noch nicht ganz verstehe... Ich habe 6 Gruppen von dem Schalter in einer VIS Ansicht eingebunden... Alles Funktioniert super!

                                    Wenn ich jetzt die 7. Gruppe hinzufügen möchte, lässt sich das Objekt zum schalten usw. alles wie bei den andern 6 auch einstellen, aber in der VIS Runtime lässt es sich nicht schalten ??? Sind die einzelnen VIS-Views irgendwie mit einer Gruppenanzahl beschränkt oder so ??

                                    Ich wüsste nicht wo ich noch was anklicken könnte ??
                                    7dadb16c-ec3d-43d0-adf7-fc52fcf0c184-image.png

                                    Habe auch schon mit anderen Geräten und anderen Views versucht..
                                    überall das gleiche... Auch mit anderer Gruppe , die ich dupliziert hatte
                                    ändert sich nichts ??? Was mache ich denn falsch ?? :confused: :confused:

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

                                    1 Antwort Letzte Antwort
                                    0
                                    • MartinK.M MartinK.

                                      @crunkfx said in VIS eigenes Widget erstellen:

                                      @martink Übrigens, die Gruppe kannst du per Doppelklick bearbeiten und deine Ideen umsetzen.

                                      Ich habe noch eine kleine Frage, was bedeutet denn dieser "Klickschutz" in der Gruppe? Also wenn ich die Gruppe per doppelklick editiere, dann muss ich den "Klickschutz" ja erst einmal zur Seite schieben um an die einzelnen Gruppenbausteine zu kommen. Hat dieser "Klickschutz" auch noch eine weitere Funktion ? oder ist es nur ein Schutz bevor man anfängt zu editieren ? :-)

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

                                      @martink Der Klickschutz ist dazu da das nur auf dem Schaltsymbol der Zustand geschaltet werden kann. Der kommt mit den neuen Schaltern eine eben nach hinten, damit entfällt das wegschieben

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

                                      1 Antwort Letzte Antwort
                                      1
                                      • da_WoodyD da_Woody

                                        @crunkfx bist ein schatz, gehörst vergraben... undweg.gif

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

                                        @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

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

                                        MartinK.M da_WoodyD sigi234S 5 Antworten Letzte Antwort
                                        2
                                        • 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
                                          #31

                                          @crunkfx Meeega! Vielen vielen Dank für die Arbeit !!! :+1: :+1: :blush: :clap: :clap:

                                          Jetzt weiß ich auch warum ich die letzten Objekte nicht mehr schalten konnte, ich habe den Klickschutz komplett über die ganze Gruppe gezogen :man-facepalming: Das ist wohl beim anpassen passiert ;-)

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

                                          CrunkFXC 1 Antwort Letzte Antwort
                                          0
                                          Antworten
                                          • In einem neuen Thema antworten
                                          Anmelden zum Antworten
                                          • Älteste zuerst
                                          • Neuste zuerst
                                          • Meiste Stimmen


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          513

                                          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