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. ioBroker User Interface Kit für VIS (download)

NEWS

  • Monatsrückblick Januar/Februar 2026 ist online!
    BluefoxB
    Bluefox
    17
    1
    408

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

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

ioBroker User Interface Kit für VIS (download)

Scheduled Pinned Locked Moved Visualisierung
vistemplateown project
30 Posts 17 Posters 6.7k Views 44 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.
  • T Offline
    T Offline
    Thorsten91
    wrote on last edited by
    #15

    Sieht wirklich klasse aus! Habe mir daraus mein Vis zusammengebaut. Falls du noch Inspirationen für weitere Objekte brauchst: Eine Musikanlage und eine Lichterkette hätte ich noch hier...
    Das CSS hat mir sehr geholfen für die Slider.

    1 Reply Last reply
    1
    • T Offline
      T Offline
      thobastian
      wrote on last edited by
      #16

      Das sind wirklich klasse Bilder ! Hut ab! Als Iobroker-Vis-Anfänger weiß ich allerdings nicht, wie ich das importieren soll. Inklusive der Bilder etc....
      Ich möchte gerne etwas für ein IPhone bauen.

      HW: Homematic CCU2, Amazon Echo, diverse NodeMCU's mit Sensoren,

      SW: IOBroker: immer neueste Version mit ESPEasy auf den NodeMCU's

      P 1 Reply Last reply
      0
      • Georg BachmannG Offline
        Georg BachmannG Offline
        Georg Bachmann
        wrote on last edited by Georg Bachmann
        #17

        Super schön!!! Gefällt mir sehr gut! Danke @pat3195
        Würde mich sehr freuen wenn du immer mal wieder Updates da lässt. Ich denk da sprech ich für einige hier :)

        P.s.: bin auch ein Anfänger und habs jetzt mal bei mir importiert. Aber noch check ich nicht so recht, wie ich zb. beim Planzenwidget meine eigene Xiaomi Mi Flower Care, oder einfach einen meiner Dimmer dranhängen kann...

        Hat da jemand ein gutes Tutorial für mich wie man mit so einem Template arbeitet?

        P 1 Reply Last reply
        0
        • N Offline
          N Offline
          NukNuk
          wrote on last edited by
          #18

          Die Idee ist echt super. Was mich allerdings erstmal stört ist, dass du alles als Grafik umsetzt und dann dementsprechend einbindest. Sprich du bindest eine Hintergrundgrafik ein und legst das Icon drüber. Es ist halt wesentlich einfacher solch Dinge mit CSS zu lösen und bedarf eigentlich nur minimale Programmierkenntnisse. In dem Fall wären das nur paar kurze Befehle in CSS, die genau das bewirken, was du erzielen möchtest.

          Du sparst dir dann auch viel Rechenpower ein.

          P 1 Reply Last reply
          0
          • T thobastian

            Das sind wirklich klasse Bilder ! Hut ab! Als Iobroker-Vis-Anfänger weiß ich allerdings nicht, wie ich das importieren soll. Inklusive der Bilder etc....
            Ich möchte gerne etwas für ein IPhone bauen.

            P Offline
            P Offline
            pat3195
            wrote on last edited by
            #19

            @thobastian Vielleicht kommt die Antwort jetzt etwas zu spät, aber schau mal im VIS oben in der Leiste unter „Setup -> Projekt-Export/import -> Import“ Dort kannst du das Demoprojekt importieren. :grin:

            1 Reply Last reply
            0
            • Georg BachmannG Georg Bachmann

              Super schön!!! Gefällt mir sehr gut! Danke @pat3195
              Würde mich sehr freuen wenn du immer mal wieder Updates da lässt. Ich denk da sprech ich für einige hier :)

              P.s.: bin auch ein Anfänger und habs jetzt mal bei mir importiert. Aber noch check ich nicht so recht, wie ich zb. beim Planzenwidget meine eigene Xiaomi Mi Flower Care, oder einfach einen meiner Dimmer dranhängen kann...

              Hat da jemand ein gutes Tutorial für mich wie man mit so einem Template arbeitet?

              P Offline
              P Offline
              pat3195
              wrote on last edited by
              #20

              @Georg-Bachmann Danke für das Feedback. Schön zu hören. Das nächste Update kommt demnächst. :slightly_smiling_face:

              Zur Flower Care Anzeige: Du kannst ganz einfach das Textfeld, in das ein Wert geschrieben werden soll anklicken und oben rechts in den Eigenschaften eines Textfeldes bei „Object ID“ aus der Liste den gewünschten Datenpunkt deiner Pflanze auswählen.
              Leider muss man die Werte des Flower Care Sensors manuell in vier Textfelder verlinken.

              Hoffe das hat deine Frage beantwortet. :smiley:

              1 Reply Last reply
              0
              • N NukNuk

                Die Idee ist echt super. Was mich allerdings erstmal stört ist, dass du alles als Grafik umsetzt und dann dementsprechend einbindest. Sprich du bindest eine Hintergrundgrafik ein und legst das Icon drüber. Es ist halt wesentlich einfacher solch Dinge mit CSS zu lösen und bedarf eigentlich nur minimale Programmierkenntnisse. In dem Fall wären das nur paar kurze Befehle in CSS, die genau das bewirken, was du erzielen möchtest.

                Du sparst dir dann auch viel Rechenpower ein.

                P Offline
                P Offline
                pat3195
                wrote on last edited by
                #21

                @NukNuk Danke für die Tipps! Ich benutze den ioBroker jetzt ca. einen Monat. Als ich mir das Design gebaut habe, war das für mich die einfachste/schnellste Lösung und wusste auch nicht, wie man das anders umsetzten kann, da ich mich in der Thematik noch nicht so auskenne. Vielleicht werde ich es in Zukunft anders lösen, aber für Einsteiger wie mich und vermutlich auch andere ohne große CSS Kenntnisse ist das eine gute Möglichkeit schnell eine kleine VIS zusammen zu basteln. :slightly_smiling_face:

                1 Reply Last reply
                0
                • AlexAtHomeA Offline
                  AlexAtHomeA Offline
                  AlexAtHome
                  wrote on last edited by AlexAtHome
                  #22

                  Das sieht ja mal richtig klasse aus !! Da ich meine VIS auch endlich mal von "schnell mit Hausmitteln gebaut" zu "kann man so lassen" umbauen will, werde ich ganz sicher auf Dein Material zurückgreifen! Vielen Dank dafür!

                  1 Reply Last reply
                  0
                  • P pat3195

                    Hallo zusammen,

                    ich habe vor ein paar Tagen das erste Mal von ioBroker gehört und finde es echt super, dass Leute das System in ihrer Freizeit entwickelt haben und auch in Zukunft weiterentwickeln werden. Ich bin leider kein Programmierer, sondern Designer und kann daher nicht aktiv zur Weiterentwicklung von ioBroker beitragen. Was ich allerdings kann ist ein Design für VIS zu gestalten. :wink:

                    Deshalb habe ich ein ioBroker User Interface Kit zum Downloaden erstellt. Es ist ein Set aus verschiedenen Hintergründen und Icons und wird nach und nach von mir weiterentwickelt. Daher wird man vermutlich erst mal nur kleinere statt komplexe Visualisierungen erstellen können.
                    Würde gerne noch eigene Widgets machen die zum Design passen, aber leider hab ich davon absolut keine Ahnung :sweat_smile:

                    Für die Schrift benötigt Ihr den vis-google-fonts.0 Adapter. Dort findet ihr dann die Schrift "Comfortaa".

                    Hier könnt ihr euch das Kit ansehen: ioBroker UI Kit

                    Und hier könnt ihr es downloaden: Download

                    Ich hoffe der ein oder andere kann damit was anfangen. :blush:
                    .
                    .
                    .
                    .
                    Update 23.6.
                    -Custom CSS für Slider Widget horizontal/vertikal
                    -Demoprojekt zum Importieren mit hochgeladen

                    Update 28.6.
                    -Neue Icons darunter auch ein Set der gängigsten Sprachassistenten

                    Update 07.8.
                    -Neue Icons für Netatmo Darstellung
                    -Neue Hintergründe (Tür auf/zu, Steckdose, Lautsprecher, Computer)

                    s.bormannS Offline
                    s.bormannS Offline
                    s.bormann
                    Most Active
                    wrote on last edited by s.bormann
                    #23

                    @pat3195 Hi, sehr schönes Design-Kit!

                    @eMd hat mich darauf aufmerksam gemacht.

                    Das würde glaube ich auch ganz gut mit iQontrol zusammen passen:

                    https://forum.iobroker.net/topic/22039/neuer-adapter-visualisierung-iqontrol

                    https://github.com/sbormann/iobroker.iqontrol

                    Mit der neuen Version kann man Hintergründe und Icons selbst anpassen und mann kommt ziemlich schnell zu einem Ergebnis.

                    Ihr könnt ja mal schauen.

                    LG!

                    crunchipC 1 Reply Last reply
                    0
                    • s.bormannS s.bormann

                      @pat3195 Hi, sehr schönes Design-Kit!

                      @eMd hat mich darauf aufmerksam gemacht.

                      Das würde glaube ich auch ganz gut mit iQontrol zusammen passen:

                      https://forum.iobroker.net/topic/22039/neuer-adapter-visualisierung-iqontrol

                      https://github.com/sbormann/iobroker.iqontrol

                      Mit der neuen Version kann man Hintergründe und Icons selbst anpassen und mann kommt ziemlich schnell zu einem Ergebnis.

                      Ihr könnt ja mal schauen.

                      LG!

                      crunchipC Away
                      crunchipC Away
                      crunchip
                      Forum Testing Most Active
                      wrote on last edited by
                      #24

                      @s-bormann hat da noch niemand drauf geklickt oder ist das nur bei mir so.
                      github link
                      bcfb1ac7-30eb-4c7d-869b-86a5d1fc5b34-image.png

                      umgestiegen von Proxmox auf Unraid

                      HomoranH 1 Reply Last reply
                      0
                      • crunchipC crunchip

                        @s-bormann hat da noch niemand drauf geklickt oder ist das nur bei mir so.
                        github link
                        bcfb1ac7-30eb-4c7d-869b-86a5d1fc5b34-image.png

                        HomoranH Do not disturb
                        HomoranH Do not disturb
                        Homoran
                        Global Moderator Administrators
                        wrote on last edited by
                        #25

                        @crunchip

                        da fehlt nur ein .iqontrol

                        https://github.com/sbormann/ioBroker -> https://github.com/sbormann/ioBroker.iqontrol

                        kein Support per PN! - Fragen im Forum stellen -
                        Benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                        Das Forum freut sich über eine Spende. Benutzt dazu den Spendenbutton im Header. Danke!
                        der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

                        crunchipC s.bormannS 2 Replies Last reply
                        0
                        • HomoranH Homoran

                          @crunchip

                          da fehlt nur ein .iqontrol

                          https://github.com/sbormann/ioBroker -> https://github.com/sbormann/ioBroker.iqontrol

                          crunchipC Away
                          crunchipC Away
                          crunchip
                          Forum Testing Most Active
                          wrote on last edited by
                          #26

                          @Homoran jetzt wo du´s geschrieben hast...hab ich auch die ganze Zeile gelesen:woman-facepalming:

                          umgestiegen von Proxmox auf Unraid

                          1 Reply Last reply
                          0
                          • HomoranH Homoran

                            @crunchip

                            da fehlt nur ein .iqontrol

                            https://github.com/sbormann/ioBroker -> https://github.com/sbormann/ioBroker.iqontrol

                            s.bormannS Offline
                            s.bormannS Offline
                            s.bormann
                            Most Active
                            wrote on last edited by
                            #27

                            @Homoran sorry, hab den link korrigiert

                            1 Reply Last reply
                            0
                            • SpegeliS Offline
                              SpegeliS Offline
                              Spegeli
                              wrote on last edited by
                              #28

                              @pat3195 sehr sehr schönes VIS Kit.

                              Sind da zufällig noch weitere Icons geplant? Hätte da ein paar Icons die ich für die Umsetzung meiner VIS noch benötigen würde. PC, Heizung usw.

                              1 Reply Last reply
                              1
                              • P pat3195

                                Hallo zusammen,

                                ich habe vor ein paar Tagen das erste Mal von ioBroker gehört und finde es echt super, dass Leute das System in ihrer Freizeit entwickelt haben und auch in Zukunft weiterentwickeln werden. Ich bin leider kein Programmierer, sondern Designer und kann daher nicht aktiv zur Weiterentwicklung von ioBroker beitragen. Was ich allerdings kann ist ein Design für VIS zu gestalten. :wink:

                                Deshalb habe ich ein ioBroker User Interface Kit zum Downloaden erstellt. Es ist ein Set aus verschiedenen Hintergründen und Icons und wird nach und nach von mir weiterentwickelt. Daher wird man vermutlich erst mal nur kleinere statt komplexe Visualisierungen erstellen können.
                                Würde gerne noch eigene Widgets machen die zum Design passen, aber leider hab ich davon absolut keine Ahnung :sweat_smile:

                                Für die Schrift benötigt Ihr den vis-google-fonts.0 Adapter. Dort findet ihr dann die Schrift "Comfortaa".

                                Hier könnt ihr euch das Kit ansehen: ioBroker UI Kit

                                Und hier könnt ihr es downloaden: Download

                                Ich hoffe der ein oder andere kann damit was anfangen. :blush:
                                .
                                .
                                .
                                .
                                Update 23.6.
                                -Custom CSS für Slider Widget horizontal/vertikal
                                -Demoprojekt zum Importieren mit hochgeladen

                                Update 28.6.
                                -Neue Icons darunter auch ein Set der gängigsten Sprachassistenten

                                Update 07.8.
                                -Neue Icons für Netatmo Darstellung
                                -Neue Hintergründe (Tür auf/zu, Steckdose, Lautsprecher, Computer)

                                E Offline
                                E Offline
                                eMd
                                wrote on last edited by
                                #29

                                @pat3195
                                Kann ich iwo selber die Icons finden oder sind die alle selbst gemacht?
                                Hatte da bald noch ne Menge Wünsche 😉

                                Als erstes wären das:

                                Person abwesend/anwesend
                                Steckdose an/aus
                                Symbol Temperatursensor/Bewegungsmelder/Rauchmelder
                                Tür offen/zu

                                MfG
                                eMd

                                Master: Intel NUC 16GB/500GB
                                Slave: Raspberry Pi 3 + Homematicmodul
                                Shelly, Google Home, Zigbee Aqara, Sonoff

                                Meine VIS: https://youtu.be/JMYr2KYlpME

                                1 Reply Last reply
                                0
                                • P Offline
                                  P Offline
                                  pat3195
                                  wrote on last edited by
                                  #30

                                  Update

                                  Es gibt nun Icons, um verschiedene Werte von Netatmo darzustellen. Außerdem konnte ich schon einige gewünschte Icons/Hintergründe umsetzen. @Spegeli @eMd Ihr könnt mir gerne euere Wünsche für die nächsten Updates auch per Direktnachricht schicken. :blush:

                                  Update.jpg

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


                                  Support us

                                  ioBroker
                                  Community Adapters
                                  Donate

                                  521

                                  Online

                                  32.7k

                                  Users

                                  82.5k

                                  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