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

NEWS

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

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

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

ioBroker User Interface Kit für VIS (download)

Geplant Angeheftet Gesperrt Verschoben Visualisierung
vistemplateown project
30 Beiträge 17 Kommentatoren 6.3k Aufrufe 44 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.
  • Georg BachmannG Offline
    Georg BachmannG Offline
    Georg Bachmann
    schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
    0
    • N Offline
      N Offline
      NukNuk
      schrieb am zuletzt editiert von
      #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 Antwort Letzte Antwort
      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
        schrieb am zuletzt editiert von
        #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 Antwort Letzte Antwort
        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
          schrieb am zuletzt editiert von
          #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 Antwort Letzte Antwort
          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
            schrieb am zuletzt editiert von
            #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 Antwort Letzte Antwort
            0
            • AlexAtHomeA Online
              AlexAtHomeA Online
              AlexAtHome
              schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
              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
                schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                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 Abwesend
                  crunchipC Abwesend
                  crunchip
                  Forum Testing Most Active
                  schrieb am zuletzt editiert von
                  #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 Antwort Letzte Antwort
                  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 Nicht stören
                    HomoranH Nicht stören
                    Homoran
                    Global Moderator Administrators
                    schrieb am zuletzt editiert von
                    #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 - es gibt fast nichts, was nicht auch für andere interessant ist.

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

                    der Installationsfixer: curl -fsL https://iobroker.net/fix.sh | bash -

                    crunchipC s.bormannS 2 Antworten Letzte Antwort
                    0
                    • HomoranH Homoran

                      @crunchip

                      da fehlt nur ein .iqontrol

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

                      crunchipC Abwesend
                      crunchipC Abwesend
                      crunchip
                      Forum Testing Most Active
                      schrieb am zuletzt editiert von
                      #26

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

                      umgestiegen von Proxmox auf Unraid

                      1 Antwort Letzte Antwort
                      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
                        schrieb am zuletzt editiert von
                        #27

                        @Homoran sorry, hab den link korrigiert

                        1 Antwort Letzte Antwort
                        0
                        • SpegeliS Offline
                          SpegeliS Offline
                          Spegeli
                          schrieb am zuletzt editiert von
                          #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 Antwort Letzte Antwort
                          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
                            schrieb am zuletzt editiert von
                            #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 Antwort Letzte Antwort
                            0
                            • P Offline
                              P Offline
                              pat3195
                              schrieb am zuletzt editiert von
                              #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 Antwort Letzte Antwort
                              3
                              Antworten
                              • In einem neuen Thema antworten
                              Anmelden zum Antworten
                              • Älteste zuerst
                              • Neuste zuerst
                              • Meiste Stimmen


                              Support us

                              ioBroker
                              Community Adapters
                              Donate

                              816

                              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