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. [Material Design CSS / MDCSS V2] Vis-Views zur Inspiration

NEWS

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    22
    1
    1.2k

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

  • Monatsrückblick – September 2025
    BluefoxB
    Bluefox
    14
    1
    2.5k

[Material Design CSS / MDCSS V2] Vis-Views zur Inspiration

Scheduled Pinned Locked Moved Visualisierung
vis
191 Posts 22 Posters 30.0k Views 43 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.
  • Dominik F.D Dominik F.

    @der-eine
    2020-03-19-Handy.zip

    D Offline
    D Offline
    der-eine
    wrote on last edited by
    #10

    @Dominik-F danke :+1:

    Dominik F.D 1 Reply Last reply
    0
    • D der-eine

      @Dominik-F danke :+1:

      Dominik F.D Offline
      Dominik F.D Offline
      Dominik F.
      wrote on last edited by Dominik F.
      #11

      @der-eine

      Irgendwie klappts nicht mit dem QR Code. Hab es mit

      npm install qr-image
      

      installiert, dann in der Javascript Instanz eingetragen und iobroker neu gestartet. Es wird jedoch nichts generiert, eine Fehlermeldung bekomme ich jedoch auch nicht

      D 1 Reply Last reply
      0
      • Dominik F.D Dominik F.

        @der-eine

        Irgendwie klappts nicht mit dem QR Code. Hab es mit

        npm install qr-image
        

        installiert, dann in der Javascript Instanz eingetragen und iobroker neu gestartet. Es wird jedoch nichts generiert, eine Fehlermeldung bekomme ich jedoch auch nicht

        D Offline
        D Offline
        der-eine
        wrote on last edited by der-eine
        #12

        @Dominik-F hab Dir mal den Originalbeitrag rausgesucht:

        https://forum.iobroker.net/topic/4574/fritzbox-wlan-passwort-ändern/8

        Weiß nicht ob es das gleiche ist aber ich habe das qr-Image einfach in der Instanz eingetragen. Sieht man im Beitrag auch.

        Edit: Der QR Code wird erst ab einer bestimmten Uhrzeit erstellt stell mal im Script den Cronjob auf jede Minute(cronstr) * * * * *

        Dominik F.D 1 Reply Last reply
        0
        • D der-eine

          @Dominik-F hab Dir mal den Originalbeitrag rausgesucht:

          https://forum.iobroker.net/topic/4574/fritzbox-wlan-passwort-ändern/8

          Weiß nicht ob es das gleiche ist aber ich habe das qr-Image einfach in der Instanz eingetragen. Sieht man im Beitrag auch.

          Edit: Der QR Code wird erst ab einer bestimmten Uhrzeit erstellt stell mal im Script den Cronjob auf jede Minute(cronstr) * * * * *

          Dominik F.D Offline
          Dominik F.D Offline
          Dominik F.
          wrote on last edited by
          #13

          @der-eine

          ah genau das wars, dank dir

          1 Reply Last reply
          0
          • K Offline
            K Offline
            Kuddel
            wrote on last edited by
            #14

            @Dominik-F und @der-eine

            Eure VIS kann auf dem Handy, Tabelt und PC angezeigt werden und wird immer je nach größe des Displays dargestellt oder ?

            D 1 Reply Last reply
            0
            • K Kuddel

              @Dominik-F und @der-eine

              Eure VIS kann auf dem Handy, Tabelt und PC angezeigt werden und wird immer je nach größe des Displays dargestellt oder ?

              D Offline
              D Offline
              der-eine
              wrote on last edited by
              #15

              @Kuddel sollte sie wenn sie richtig aufgebaut wurde. Hab ich nur am Anfang mal getestet. Gib gerne eine Rückmeldung wenn irgendwas nicht wie gewünscht funktioniert.

              K 1 Reply Last reply
              0
              • D der-eine

                @Kuddel sollte sie wenn sie richtig aufgebaut wurde. Hab ich nur am Anfang mal getestet. Gib gerne eine Rückmeldung wenn irgendwas nicht wie gewünscht funktioniert.

                K Offline
                K Offline
                Kuddel
                wrote on last edited by
                #16

                @der-eine da muss ich mich erstmal reinfuchsen.

                das sind aktuell noch bömische dörfer für mich.

                ich hab gerade erst ein neues Menü eingabaut:

                https://forum.iobroker.net/topic/30497/vorstellung-meine-dritte-vis

                Da ist das mit Cards etc und automatischer Darstellung alles noch Neuland

                D 1 Reply Last reply
                0
                • K Kuddel

                  @der-eine da muss ich mich erstmal reinfuchsen.

                  das sind aktuell noch bömische dörfer für mich.

                  ich hab gerade erst ein neues Menü eingabaut:

                  https://forum.iobroker.net/topic/30497/vorstellung-meine-dritte-vis

                  Da ist das mit Cards etc und automatischer Darstellung alles noch Neuland

                  D Offline
                  D Offline
                  der-eine
                  wrote on last edited by
                  #17

                  @Kuddel schau Dir den Projekt Beitrag und Github Seite mal an die im ersten Post verlinkt sind da steht alles was Du wissen musst. Die Anleitung auf Github wird von Uhula noch an V2.x angepasst.

                  K 1 Reply Last reply
                  0
                  • D der-eine

                    @Kuddel schau Dir den Projekt Beitrag und Github Seite mal an die im ersten Post verlinkt sind da steht alles was Du wissen musst. Die Anleitung auf Github wird von Uhula noch an V2.x angepasst.

                    K Offline
                    K Offline
                    Kuddel
                    wrote on last edited by
                    #18

                    @der-eine alles klar. danke.

                    dann werde ich denke ich mal meine VIS umbauen.

                    erspart mir eine neue VIS fürs Handy zu basteln

                    D 1 Reply Last reply
                    0
                    • K Kuddel

                      @der-eine alles klar. danke.

                      dann werde ich denke ich mal meine VIS umbauen.

                      erspart mir eine neue VIS fürs Handy zu basteln

                      D Offline
                      D Offline
                      der-eine
                      wrote on last edited by
                      #19

                      @Kuddel Bitte. Das war auch der Grund wieso ich auf MD CSS gewechselt bin. Wenn Du fertig bist mit umstellen gerne hier vorstellen!

                      K 1 Reply Last reply
                      0
                      • D der-eine

                        @Kuddel Bitte. Das war auch der Grund wieso ich auf MD CSS gewechselt bin. Wenn Du fertig bist mit umstellen gerne hier vorstellen!

                        K Offline
                        K Offline
                        Kuddel
                        wrote on last edited by
                        #20

                        @der-eine ... wenn ich fertig bin :-) ....

                        jo mach ich, aber das kann noch bisschen dauern

                        Dominik F.D 1 Reply Last reply
                        0
                        • K Kuddel

                          @der-eine ... wenn ich fertig bin :-) ....

                          jo mach ich, aber das kann noch bisschen dauern

                          Dominik F.D Offline
                          Dominik F.D Offline
                          Dominik F.
                          wrote on last edited by
                          #21

                          @Kuddel

                          Meine Vis ist noch nicht komplett responsive. Die einzelnen Cards sind schon so eingestellt, dass sich die Elemente automatisch nach der Breite anordnen. Die Größe der Cards ist bisher nur auf ein Smartphone optimiert da ich selber noch kein Tablet habe. Es sind aber nur kleine Einstellungen nötig um die Vis auch für ein Tablet zu optimieren, mir fehlt da bisher nur die Möglichkeit zum Testen

                          1 Reply Last reply
                          0
                          • D Offline
                            D Offline
                            der-eine
                            wrote on last edited by
                            #22

                            @Dominik-F welche Icons nutzt Du für die Iobroker-Instanz-View?

                            Dominik F.D 1 Reply Last reply
                            0
                            • D der-eine

                              @Dominik-F welche Icons nutzt Du für die Iobroker-Instanz-View?

                              Dominik F.D Offline
                              Dominik F.D Offline
                              Dominik F.
                              wrote on last edited by
                              #23

                              @der-eine

                              Icons Material und Icons8

                              D 1 Reply Last reply
                              0
                              • Dominik F.D Dominik F.

                                @der-eine

                                Icons Material und Icons8

                                D Offline
                                D Offline
                                der-eine
                                wrote on last edited by
                                #24

                                @Dominik-F Danke

                                1 Reply Last reply
                                0
                                • T Offline
                                  T Offline
                                  Tirador
                                  wrote on last edited by Tirador
                                  #25

                                  Danke für eure Inspirationen. Da sind schöne Designs bei, die ich bestimmt mal übernehmen werde. Ich poste dann auch mal meine VIS. Ich versuche grundlegend auch die Cards responsive zu halten. Als Icons nur das Material Icons Webfont, so dass alle Farben schnell dynamisch umkonfiguriert werden können.
                                  Eine Zeitlang hatte ich auch ein Dark Design, aber momentan gefällt mir das weisse besser.

                                  Ich bin leider auch noch nicht fertig, d.h. alles Work in Process.

                                  Beispiel: Dark Theme

                                  2020-03-20 19_20_29-vis.png

                                  Beispiele: White Theme

                                  2020-03-20 18_59_53-vis.png

                                  2020-03-20 19_00_03-vis.png

                                  2020-03-20 19_00_22-vis.png

                                  2020-03-20 19_00_32-vis.png

                                  2020-03-20 19_00_40-vis.png

                                  2020-03-20 19_00_46-vis.png

                                  2020-03-20 19_00_53-vis.png

                                  D bilberryB 2 Replies Last reply
                                  0
                                  • T Tirador

                                    Danke für eure Inspirationen. Da sind schöne Designs bei, die ich bestimmt mal übernehmen werde. Ich poste dann auch mal meine VIS. Ich versuche grundlegend auch die Cards responsive zu halten. Als Icons nur das Material Icons Webfont, so dass alle Farben schnell dynamisch umkonfiguriert werden können.
                                    Eine Zeitlang hatte ich auch ein Dark Design, aber momentan gefällt mir das weisse besser.

                                    Ich bin leider auch noch nicht fertig, d.h. alles Work in Process.

                                    Beispiel: Dark Theme

                                    2020-03-20 19_20_29-vis.png

                                    Beispiele: White Theme

                                    2020-03-20 18_59_53-vis.png

                                    2020-03-20 19_00_03-vis.png

                                    2020-03-20 19_00_22-vis.png

                                    2020-03-20 19_00_32-vis.png

                                    2020-03-20 19_00_40-vis.png

                                    2020-03-20 19_00_46-vis.png

                                    2020-03-20 19_00_53-vis.png

                                    D Offline
                                    D Offline
                                    der-eine
                                    wrote on last edited by der-eine
                                    #26

                                    @Tirador sehr schön. Gibt auch bei Dir ein paar interessante Views, danke fürs teilen! :+1:

                                    1 Reply Last reply
                                    0
                                    • T Offline
                                      T Offline
                                      Tirador
                                      wrote on last edited by
                                      #27

                                      @der-eine @Dominik-F

                                      Ich habe eure Projekte importiert und einige Sachen übernommen.
                                      Unter anderem die Wetter Card, das Konfigurationsmenü für die Lampen, die Corona Card.
                                      Vielen Dank dafür! :)

                                      Was mir aufgefallen ist: Ihr habt euch zum Teil richtig Arbeit gemacht durch die ganzen Verschachtelungen von Menü / Bottom Menü. Ich versuche die Anzahl der Seiten eher zu begrenzen, um zusätzliche Arbeit zu sparen und auch die Bedienung intuitiver / leichter zu gestalten. D.h. zum Teil packe ich einfach mehr Cards auf eine Page und versuche sinnvolle Funktionsblöcke für Seiten zu finden.
                                      Beispiel:
                                      Ich habe bei mir aktuell nur vier Räume:

                                      • Küche, Wohnzimmer, Schlafzimmer, Bad

                                      In den Räumen ordne ich alle Cards zu die Funktionen zu den Räumen haben (d.h. Lichter, Multimedia oder Sensoren).

                                      Seiten für Funktionen sind wie folgt (hinter dem Doppelpunkt sind die eigentlichen Cards aufgelistet).

                                      • Lichter: Lichter aus jedem Raum
                                      • Multimedia: Steuerung Sound/Video über alle Räume
                                      • Sicherheit: Anwesende Personen, Geöffnete Fenster /Türen, Wassersensoren
                                      • Sauger: Status, Commands (aktuell in Arbeit bei mir)
                                      • Telefon: Ein/Ausgehende Anrufe, verpasste Anrufe, aktueller Anrufer
                                      • Wetter: Cards Regenradar, Wettervorhersage, Temperatursensoren aus allen Räumen

                                      Ich habe eine page / Seite für jeden essenziellen Raum und für Funktionsbereiche jeweils eine.

                                      Namensgebungen im Design

                                      Meine Namensbezeichnungen waren teilweise nicht synchron mit euren.
                                      Ich habe jetzt versucht einheitlich die Bezeichnungen anzugleichen.
                                      Die Nomenklatur für Views ist nun wie folgt bei mir:

                                      • Cards haben die folgende Namenskonvention "card<Bereich>_<funktion>"
                                        Beispiele: cardLiving_lights, cardKitchen_sonos, cardPhone_incoming, cardPhone_ringing etc.

                                      • Contents haben immer die folgende Namenskonvention "contPage<Bereich>"
                                        Beispiele: contPage_living, contPage_kitchen, contPage_phone

                                      • Seiten mit Menü und Content haben die folgende Namenskonvention "page<Bereich>"
                                        Beispiele. pageStart, pageLiving, pageKitchen, pagePhone

                                      Ebenso habe ich in allen Cards bei mir auch das Auf/Zuklappen integriert.

                                      Ich habe den aktuellen Stand meiner Vis nochmal neu exportiert:

                                      2020-03-21-MD_Simple.zip

                                      Ich hoffe wir halten diesen Thread am Leben und teilen fleissig weiterhin unsere neuen Cards. Ich finde es sehr inspirierend und man kommt immer noch auf neue Ideen.

                                      Dominik F.D 1 Reply Last reply
                                      0
                                      • D der-eine

                                        Hallo zusammen,

                                        dieser Post ist für alle VIS-Views gedacht, die auf der Basis von Uhulas Material Design Styles aufgebaut wurden.
                                        Bitte auch nur Views vorstellen, die die unterstützten Widgets, Skripte und Codes verwenden.
                                        Diese Beiträge sollen zur Vorstellung, Inspiration und Ideengebung dienen.
                                        Danke an Uhula, dass er uns diesen Style zur Verfügung stellt!
                                        Link zum [Projekt] MDCSS V2:
                                        https://forum.iobroker.net/topic/30363/projekt-mdcss-v2-material-design-css-version-2
                                        Github Link mit Anleitung, Vorlagen, Wiki...:
                                        https://github.com/Uhula/ioBroker-Material-Design-Style
                                        Viel Spaß damit :)

                                        Hier mal die ersten Eindrücke meiner VIS:

                                        Bildschirmfoto 2020-05-08 um 11.08.36.png Bildschirmfoto 2020-05-08 um 11.10.01.png Bildschirmfoto 2020-05-08 um 11.05.10.png Bildschirmfoto 2020-05-08 um 11.05.43.png Bildschirmfoto 2020-05-08 um 11.05.53.png Bildschirmfoto 2020-05-08 um 11.06.00.png Bildschirmfoto 2020-05-08 um 11.06.10.png Bildschirmfoto 2020-05-08 um 11.06.27.png Bildschirmfoto 2020-05-08 um 11.06.36.png Bildschirmfoto 2020-05-08 um 11.07.07.png Bildschirmfoto 2020-05-08 um 11.07.54.png Bildschirmfoto 2020-05-08 um 11.07.28.png Bildschirmfoto 2020-05-08 um 11.07.54.png Bildschirmfoto 2020-05-08 um 11.08.10.png Bildschirmfoto 2020-05-08 um 11.08.20.png Bildschirmfoto 2020-05-08 um 11.08.52.png Bildschirmfoto 2020-05-08 um 11.09.18.png Bildschirmfoto 2020-05-08 um 11.09.38.png Bildschirmfoto 2020-05-08 um 11.09.45.png

                                        VIS vom 07.07.2020
                                        Änderungen:

                                        • Neue Config eingefügt
                                        • lnav von MD-Demo eingefügt (Datum, Uhrzeit, jetzt öffnet und schliesst sie auch wie gewollt)
                                        • mdui-order auf jeder card angepasst
                                        • title-color zu den Texten hinzugefügt
                                        • tnav und andere Schriftzüge für Tablets angepasst
                                        • diverse kleinere Veränderungen

                                        http://gofile.me/6HXaS/GrdK2OZTy
                                        PW: ioBroker

                                        Edit: 28.03.2020

                                        Bei Problemen und nicht funktionieren Views bitte als erstes prüfen ob:

                                          1. Unter Eigenschaften CSS im Projekt das Material Design CSS vorhanden ist.
                                            https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/source/project.css
                                          1. Für die Icons der Pfad zum Namen des VIS-Projekts stimmt hier VIS-iPhone

                                        Bildschirmfoto 2020-03-28 um 14.08.16.png

                                          1. Eigenschaften Skripte das Material Design CSS Skript hinterlegt ist
                                            https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/source/script.js

                                        Bildschirmfoto 2020-03-28 um 14.11.51.png

                                          1. Eigenschaften CSS Global entweder nichts oder das von Material Design CSS hinterlegt ist
                                            https://github.com/Uhula/ioBroker-Material-Design-Style/blob/master/source/global.css

                                        Bildschirmfoto 2020-03-28 um 14.13.11.png

                                          1. Der Adapter "iobroker.vis-material" nicht installiert ist.

                                        Danke!!!!

                                        H Offline
                                        H Offline
                                        heinzie
                                        wrote on last edited by
                                        #28

                                        @der-eine

                                        Erst mal Danke für die Vorlage.
                                        Habe ich bei mir einmal zum Test installiert, ging auch ohne Fehlermeldung.
                                        Nur scheint etwas noch zu fehlen. Muss ich noch weitere Sachen installieren?

                                        e06898d1-f811-41d1-92a3-cc5f309cf8d8-grafik.png

                                        Dominik F.D 1 Reply Last reply
                                        0
                                        • H heinzie

                                          @der-eine

                                          Erst mal Danke für die Vorlage.
                                          Habe ich bei mir einmal zum Test installiert, ging auch ohne Fehlermeldung.
                                          Nur scheint etwas noch zu fehlen. Muss ich noch weitere Sachen installieren?

                                          e06898d1-f811-41d1-92a3-cc5f309cf8d8-grafik.png

                                          Dominik F.D Offline
                                          Dominik F.D Offline
                                          Dominik F.
                                          wrote on last edited by
                                          #29

                                          @heinzie

                                          nein, du musst nur pageStart auswählen für die runtime

                                          H 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

                                          501

                                          Online

                                          32.5k

                                          Users

                                          81.7k

                                          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