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

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

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

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

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.
  • 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)

    Jey CeeJ Online
    Jey CeeJ Online
    Jey Cee
    Developer
    schrieb am zuletzt editiert von
    #3

    @pat3195 das sieht Wirklich super aus.
    Ich würde es aber sehr begrüßen wenn ich mich nicht bei Adobe registrieren muss um da dran zu kommen.

    Du kannst Bilder und Anhänge hier im Forum hoch laden.

    Persönlicher Support
    Spenden -> paypal.me/J3YC33

    P 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)

      D Offline
      D Offline
      dos1973
      schrieb am zuletzt editiert von
      #4

      @pat3195
      Ich schliesse mich an, sieht Klasse aus. Ein Download ohne Registrierung wäre wünschenswert.

      1 Antwort Letzte Antwort
      0
      • Jey CeeJ Jey Cee

        @pat3195 das sieht Wirklich super aus.
        Ich würde es aber sehr begrüßen wenn ich mich nicht bei Adobe registrieren muss um da dran zu kommen.

        Du kannst Bilder und Anhänge hier im Forum hoch laden.

        P Offline
        P Offline
        pat3195
        schrieb am zuletzt editiert von pat3195
        #5

        @Jey-Cee @dos1973 Habe den Link zum Downloaden in meinem ersten Beitrag ergänzt. Wusste nicht, dass man sich zum downloaden Registrieren muss.

        D 1 Antwort Letzte Antwort
        0
        • P pat3195

          @Jey-Cee @dos1973 Habe den Link zum Downloaden in meinem ersten Beitrag ergänzt. Wusste nicht, dass man sich zum downloaden Registrieren muss.

          D Offline
          D Offline
          dos1973
          schrieb am zuletzt editiert von
          #6

          @pat3195
          Danke Dir, sag mal auf den Bildern ist das nur eine Design Studie/ Grafik oder hast das bereits im VIS dargestellt.

          Falls ja, wäre ich über einen export dankbar. find es sieht Klasse aus und als Anfang...

          P 1 Antwort Letzte Antwort
          0
          • D dos1973

            @pat3195
            Danke Dir, sag mal auf den Bildern ist das nur eine Design Studie/ Grafik oder hast das bereits im VIS dargestellt.

            Falls ja, wäre ich über einen export dankbar. find es sieht Klasse aus und als Anfang...

            P Offline
            P Offline
            pat3195
            schrieb am zuletzt editiert von
            #7

            @dos1973 Die Bilder sind sind leider nicht mit VIS entstanden. Das sind nur Demobilder um zu zeigen was man damit darstellen könnte. :wink:
            Hab mir aus den Elementen schon eine kleine Benutzeroberfläche gebastelt.
            Kann gerne mal ein Demoprojekt bauen und den Export davon mit hochladen.

            Bin auch aktuell noch dabei die Standard Widgets mit CSS in das Design umzubauen, um das ganze dann noch interaktiver zu machen. Aber das ist gar nicht mal so einfach :grin:

            D 1 Antwort Letzte Antwort
            0
            • P pat3195

              @dos1973 Die Bilder sind sind leider nicht mit VIS entstanden. Das sind nur Demobilder um zu zeigen was man damit darstellen könnte. :wink:
              Hab mir aus den Elementen schon eine kleine Benutzeroberfläche gebastelt.
              Kann gerne mal ein Demoprojekt bauen und den Export davon mit hochladen.

              Bin auch aktuell noch dabei die Standard Widgets mit CSS in das Design umzubauen, um das ganze dann noch interaktiver zu machen. Aber das ist gar nicht mal so einfach :grin:

              D Offline
              D Offline
              dos1973
              schrieb am zuletzt editiert von dos1973
              #8

              @pat3195
              Zeig doch mal was du hast ;)

              Daran krankt es bei mir am meisten, dass ich nichts mit Grafiken / Photoshop kann. Etwas freistellen, eine Farbe anpassen etc. artet dann in zig Youtube videos aus und sieht dann doch nicht aus wie gewollt, oder ein weitere Icon anlegen...

              Auch das Farb Zusammenspiel, deines ist echt gut.
              Mein VIS ist ähnlich deinem aufgebaut, ich finde den Ansatz daher echt gut. Ich stell nachher mal ein Bild rein

              Bist du aus FFM?

              1 Antwort Letzte Antwort
              0
              • P Offline
                P Offline
                pat3195
                schrieb am zuletzt editiert von pat3195
                #9

                @dos1973 So sieht meine VIS aktuell aus. Hab noch nicht so viele Geräte, aber das wird sich nach und nach ändern. :laughing:
                Hier sieht man auch schon den ersten Test vom umgebauten Slider Widget.

                Screenshot VIS.png

                ? D 2 Antworten Letzte Antwort
                1
                • P pat3195

                  @dos1973 So sieht meine VIS aktuell aus. Hab noch nicht so viele Geräte, aber das wird sich nach und nach ändern. :laughing:
                  Hier sieht man auch schon den ersten Test vom umgebauten Slider Widget.

                  Screenshot VIS.png

                  ? Offline
                  ? Offline
                  Ein ehemaliger Benutzer
                  schrieb am zuletzt editiert von
                  #10

                  @pat3195 toll gemacht! Ich hab über 400 Devices, aber keine gescheite VIS, habe mir was auf die schnelle mit Habpanel und Material zusammengeklickt, da die Programmierung der ganzen Devices fast ein Jahr gedauert hat... :-)
                  Man kann halt nicht alles haben, wenn man das nur so nebenbei macht...

                  So langsam hab ich von der Hardware alles zusammen, und es funktioniert auch, jetzt kann ich anfangen, mich mit VIS oder sowas zu beschäftigen... bin aber auch gar kein Grafiker.. :sunglasses:

                  1 Antwort Letzte Antwort
                  0
                  • P pat3195

                    @dos1973 So sieht meine VIS aktuell aus. Hab noch nicht so viele Geräte, aber das wird sich nach und nach ändern. :laughing:
                    Hier sieht man auch schon den ersten Test vom umgebauten Slider Widget.

                    Screenshot VIS.png

                    D Online
                    D Online
                    darkiop
                    Most Active
                    schrieb am zuletzt editiert von
                    #11

                    @pat3195 Das sieht sehr gut aus!! Würdest du mal deinen Export hier reinstellen?

                    Proxmox-ioBroker-Redis-HA Doku: https://forum.iobroker.net/topic/47478/dokumentation-einer-proxmox-iobroker-redis-ha-umgebung

                    P 1 Antwort Letzte Antwort
                    0
                    • G Offline
                      G Offline
                      gravidi
                      schrieb am zuletzt editiert von
                      #12

                      @pat3195

                      Sieht sehr gut aus. Vielen Dank!

                      Welche VIS Elemente hast du dafür genommen?

                      1 Antwort Letzte Antwort
                      0
                      • D darkiop

                        @pat3195 Das sieht sehr gut aus!! Würdest du mal deinen Export hier reinstellen?

                        P Offline
                        P Offline
                        pat3195
                        schrieb am zuletzt editiert von
                        #13

                        @darkiop @dos1973 Unter dem Downloadlink ist findet ihr jetzt auch ein Demoprojekt. :wink:

                        @gravidi Habe eigentlich nur zwei Widgets verwendet. Das Image8 Widget für die schaltbaren Flächen und normale Slider für die Steuerung des Dimmers. Ansonsten sind es einfach nur Textfelder, in die Daten geschrieben werden. :laughing:

                        1 Antwort Letzte Antwort
                        0
                        • P Offline
                          P Offline
                          pat3195
                          schrieb am zuletzt editiert von pat3195
                          #14

                          Update:
                          Es gibt nun verschiedene neue Icons darunter auch ein Set der gängigsten Sprachassistenten. :blush:

                          icons.png

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


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          468

                                          Online

                                          32.4k

                                          Benutzer

                                          81.4k

                                          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