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

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

  • 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.
  • 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.
    wrote on last edited by
    #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 Reply Last reply
    0
    • CrunkFXC Offline
      CrunkFXC Offline
      CrunkFX
      Forum Testing
      wrote on last edited by 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 Replies Last reply
      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.
        wrote on last edited by
        #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 Replies Last reply
        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
          wrote on last edited by
          #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 Reply Last reply
          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
            wrote on last edited by
            #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 Replies Last reply
            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 Online
              da_WoodyD Online
              da_Woody
              wrote on last edited by 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 Reply Last reply
              0
              • CrunkFXC CrunkFX

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

                MartinK.M Offline
                MartinK.M Offline
                MartinK.
                wrote on last edited by
                #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 Reply Last reply
                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 Online
                  da_WoodyD Online
                  da_Woody
                  wrote on last edited by
                  #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 Replies Last reply
                  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.
                    wrote on last edited by
                    #22

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

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

                    1 Reply Last reply
                    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
                      wrote on last edited by 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 Reply Last reply
                      0
                      • CrunkFXC CrunkFX

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

                        da_WoodyD Online
                        da_WoodyD Online
                        da_Woody
                        wrote on last edited by 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 Reply Last reply
                        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
                          wrote on last edited by
                          #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 Reply Last reply
                          0
                          • CrunkFXC CrunkFX

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

                            da_WoodyD Online
                            da_WoodyD Online
                            da_Woody
                            wrote on last edited by
                            #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 Reply Last reply
                            1
                            • CrunkFXC CrunkFX

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

                              MartinK.M Offline
                              MartinK.M Offline
                              MartinK.
                              wrote on last edited by
                              #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 Reply Last reply
                              0
                              • MartinK.M Offline
                                MartinK.M Offline
                                MartinK.
                                wrote on last edited by 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 Reply Last reply
                                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
                                  wrote on last edited by
                                  #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 Reply Last reply
                                  1
                                  • da_WoodyD da_Woody

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

                                    CrunkFXC Offline
                                    CrunkFXC Offline
                                    CrunkFX
                                    Forum Testing
                                    wrote on last edited by 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 Replies Last reply
                                    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.
                                      wrote on last edited by
                                      #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 Reply Last reply
                                      0
                                      • MartinK.M MartinK.

                                        @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 ;-)

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

                                        @martink OK das macht natürlich Sinn. Ich konnte das nämlich nicht nachstellen. Ich lade sofort noch die Screenshots hoch. Das ist auf dauer besser damit zu Arbeiten als mit den Base64 Codierten Bildern.

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

                                        MartinK.M 1 Reply Last reply
                                        0
                                        • CrunkFXC CrunkFX

                                          @martink OK das macht natürlich Sinn. Ich konnte das nämlich nicht nachstellen. Ich lade sofort noch die Screenshots hoch. Das ist auf dauer besser damit zu Arbeiten als mit den Base64 Codierten Bildern.

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

                                          @crunkfx said in VIS eigenes Widget erstellen:

                                          @martink OK das macht natürlich Sinn. Ich konnte das nämlich nicht nachstellen. Ich lade sofort noch die Screenshots hoch. Das ist auf dauer besser damit zu Arbeiten als mit den Base64 Codierten Bildern.

                                          Muss ich dann die "Gruppenwidgets" die ich bereits nutze nochmal mit den Screenshots anpassen ? Ich habe beim editieren der Gruppe auch mal das "Schalter Foto" welchen bei On + Off genutzt wird geschaut, aber da wird ja angezeigt, das dass Foto nicht hinterlegt ist ... :thinking_face: wie kann denn was angezeigt werden - was nicht hinterlegt ist?? Bzw. woher hat er denn das "Schalter Foto" ???
                                          0dd0616c-cab0-410e-ae48-e32e6527a5a0-image.png

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

                                          CrunkFXC 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

                                          452

                                          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