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. [Projekt] Material Design CSS für ioBroker.vis

NEWS

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

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

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.2k

[Projekt] Material Design CSS für ioBroker.vis

Scheduled Pinned Locked Moved Visualisierung
650 Posts 111 Posters 231.0k Views 68 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.
  • D dos1973

    @Snapergy
    Nimm doch einfach den DiscreteSlider aus dem MaterialDesign Adapter...?!

    S Offline
    S Offline
    Snapergy
    wrote on last edited by
    #397

    @dos1973
    den gibt es leider nicht als vertikalen slider :(

    1 Reply Last reply
    0
    • nukleuzN Offline
      nukleuzN Offline
      nukleuz
      wrote on last edited by
      #398

      Gibt es schon das Update für die Chips?

      Intel NUC -> ProxMox -> Debian -> ioBroker (Master)| RPI3B+ -> rtl_433 (Slave) | CCU2

      1 Reply Last reply
      0
      • K Offline
        K Offline
        K_o_bold
        wrote on last edited by K_o_bold
        #399

        So wie es aussieht, ist Uhula in diesem Forum nicht mehr so aktiv. Schade, denn die Chips sehen echt gut aus...

        1 Reply Last reply
        0
        • UhulaU Offline
          UhulaU Offline
          Uhula
          wrote on last edited by
          #400

          Stimmt, bin im Moment nicht aktiv im Forum, dafür aber umso aktiver beim Erstellen der Material Design for ioBroker 2.0 CSS Styles ;-) - dann natürlich inkl. der Chips.

          • Basis ist dann ein helles Design, das dunkle ist dann optional, auch jederzeit umschaltbar (wenn denn eigene Komponenten das auch mitmachen, die mdui- können es)
          • optionales Setzen der Farben für abar, tnav, lnav, rnav, bnav und content, inkl. automatischer Anpassung der Schriftfarbe (wenn Kontrast zu "schwarz" zu gering, dann "weiß") über mdui-config Elemente
          • die linke Navigation (lnav) kann als feste Site-Navigation arbeiten (optional ab x-Pixel Breite des Screens). Also auf dem Smartphone weiterhin als modale, sich öffnende Nav, auf dem Tablett dann als feste Nav, aber auch wegblendbar
          • Unterstützung des material-icons Fonts - d.h. images braucht man eigentlich nicht mehr. Vorteile: Sehr gute Skalierung und automatische Anpassung an die Schriftfarbe
          • alle material design Farben werden nun namentlich unterstützt
          • Anpassung der MD_Demo und MD_Simple Projekte
          • Anpassung der Dokumentation
          • ...

          Dauert alles noch etwas, schaut aber schon gut aus, eben wie 2019 und nicht mehr wie 2017. Screenshots liefere ich mal nach.

          Schöne Adventszeit noch!

          Uhula - Leise und Weise
          Ex: ioBroker on Gigabyte NUC Proxmox

          Z D blauholstenB S frieda99F 5 Replies Last reply
          5
          • S Offline
            S Offline
            Schrauberheld
            wrote on last edited by Schrauberheld
            #401

            Finde ich Mega das du noch an dem ganzen arbeitest :+1:

            1 Reply Last reply
            0
            • UhulaU Uhula

              Stimmt, bin im Moment nicht aktiv im Forum, dafür aber umso aktiver beim Erstellen der Material Design for ioBroker 2.0 CSS Styles ;-) - dann natürlich inkl. der Chips.

              • Basis ist dann ein helles Design, das dunkle ist dann optional, auch jederzeit umschaltbar (wenn denn eigene Komponenten das auch mitmachen, die mdui- können es)
              • optionales Setzen der Farben für abar, tnav, lnav, rnav, bnav und content, inkl. automatischer Anpassung der Schriftfarbe (wenn Kontrast zu "schwarz" zu gering, dann "weiß") über mdui-config Elemente
              • die linke Navigation (lnav) kann als feste Site-Navigation arbeiten (optional ab x-Pixel Breite des Screens). Also auf dem Smartphone weiterhin als modale, sich öffnende Nav, auf dem Tablett dann als feste Nav, aber auch wegblendbar
              • Unterstützung des material-icons Fonts - d.h. images braucht man eigentlich nicht mehr. Vorteile: Sehr gute Skalierung und automatische Anpassung an die Schriftfarbe
              • alle material design Farben werden nun namentlich unterstützt
              • Anpassung der MD_Demo und MD_Simple Projekte
              • Anpassung der Dokumentation
              • ...

              Dauert alles noch etwas, schaut aber schon gut aus, eben wie 2019 und nicht mehr wie 2017. Screenshots liefere ich mal nach.

              Schöne Adventszeit noch!

              Z Away
              Z Away
              zahnheinrich
              wrote on last edited by
              #402

              @Uhula
              Da warte ich aber SEHR gespannt!
              Ich glaube da spreche ich für eine größere Gemeinde, als du ahnst!

              MfG Ulrich

              D 1 Reply Last reply
              0
              • Z zahnheinrich

                @Uhula
                Da warte ich aber SEHR gespannt!
                Ich glaube da spreche ich für eine größere Gemeinde, als du ahnst!

                D Offline
                D Offline
                davimas
                wrote on last edited by davimas
                #403

                @zahnheinrich

                Die Meisten nutzen mittlerweile den neuen Adapter mit Material Style - da es hier still wurde in der Weiterentwicklung.....
                https://forum.iobroker.net/topic/26925/test-adapter-material-design-widgets-v0-2-x

                MeistertrM D 2 Replies Last reply
                0
                • UhulaU Uhula

                  Stimmt, bin im Moment nicht aktiv im Forum, dafür aber umso aktiver beim Erstellen der Material Design for ioBroker 2.0 CSS Styles ;-) - dann natürlich inkl. der Chips.

                  • Basis ist dann ein helles Design, das dunkle ist dann optional, auch jederzeit umschaltbar (wenn denn eigene Komponenten das auch mitmachen, die mdui- können es)
                  • optionales Setzen der Farben für abar, tnav, lnav, rnav, bnav und content, inkl. automatischer Anpassung der Schriftfarbe (wenn Kontrast zu "schwarz" zu gering, dann "weiß") über mdui-config Elemente
                  • die linke Navigation (lnav) kann als feste Site-Navigation arbeiten (optional ab x-Pixel Breite des Screens). Also auf dem Smartphone weiterhin als modale, sich öffnende Nav, auf dem Tablett dann als feste Nav, aber auch wegblendbar
                  • Unterstützung des material-icons Fonts - d.h. images braucht man eigentlich nicht mehr. Vorteile: Sehr gute Skalierung und automatische Anpassung an die Schriftfarbe
                  • alle material design Farben werden nun namentlich unterstützt
                  • Anpassung der MD_Demo und MD_Simple Projekte
                  • Anpassung der Dokumentation
                  • ...

                  Dauert alles noch etwas, schaut aber schon gut aus, eben wie 2019 und nicht mehr wie 2017. Screenshots liefere ich mal nach.

                  Schöne Adventszeit noch!

                  D Offline
                  D Offline
                  davimas
                  wrote on last edited by davimas
                  #404

                  @Uhula

                  Wäre cool wenn man "mdui-vibrate" als Klasse hätte - so wie die anderen neuen Widgets derzeit: "vibrateOnMobilDevices""

                  1 Reply Last reply
                  0
                  • K Offline
                    K Offline
                    K_o_bold
                    wrote on last edited by
                    #405

                    Da is er ;-)....
                    Super...da bin ich mal gespannt..hört sich gut an.

                    1 Reply Last reply
                    0
                    • D davimas

                      @zahnheinrich

                      Die Meisten nutzen mittlerweile den neuen Adapter mit Material Style - da es hier still wurde in der Weiterentwicklung.....
                      https://forum.iobroker.net/topic/26925/test-adapter-material-design-widgets-v0-2-x

                      MeistertrM Offline
                      MeistertrM Offline
                      Meistertr
                      Developer
                      wrote on last edited by
                      #406

                      @davimas ich nutze beides gleichzeitig, wo das eine schwächelt, punktet das andere...

                      1 Reply Last reply
                      1
                      • UhulaU Uhula

                        Stimmt, bin im Moment nicht aktiv im Forum, dafür aber umso aktiver beim Erstellen der Material Design for ioBroker 2.0 CSS Styles ;-) - dann natürlich inkl. der Chips.

                        • Basis ist dann ein helles Design, das dunkle ist dann optional, auch jederzeit umschaltbar (wenn denn eigene Komponenten das auch mitmachen, die mdui- können es)
                        • optionales Setzen der Farben für abar, tnav, lnav, rnav, bnav und content, inkl. automatischer Anpassung der Schriftfarbe (wenn Kontrast zu "schwarz" zu gering, dann "weiß") über mdui-config Elemente
                        • die linke Navigation (lnav) kann als feste Site-Navigation arbeiten (optional ab x-Pixel Breite des Screens). Also auf dem Smartphone weiterhin als modale, sich öffnende Nav, auf dem Tablett dann als feste Nav, aber auch wegblendbar
                        • Unterstützung des material-icons Fonts - d.h. images braucht man eigentlich nicht mehr. Vorteile: Sehr gute Skalierung und automatische Anpassung an die Schriftfarbe
                        • alle material design Farben werden nun namentlich unterstützt
                        • Anpassung der MD_Demo und MD_Simple Projekte
                        • Anpassung der Dokumentation
                        • ...

                        Dauert alles noch etwas, schaut aber schon gut aus, eben wie 2019 und nicht mehr wie 2017. Screenshots liefere ich mal nach.

                        Schöne Adventszeit noch!

                        blauholstenB Offline
                        blauholstenB Offline
                        blauholsten
                        Developer
                        wrote on last edited by
                        #407

                        @Uhula
                        Bedeutung dein letzter Satz der Release kommt 2019 noch:grimacing: .....spaß bei Seite, ich freu mich riesig:clap:

                        Nutze quasi deine viso schon seit dem es sie gibt

                        Entwickler vom: - Viessman Adapter
                        - Alarm Adapter

                        1 Reply Last reply
                        0
                        • nukleuzN Offline
                          nukleuzN Offline
                          nukleuz
                          wrote on last edited by
                          #408

                          Wir sind sehr gespannt 😎

                          Intel NUC -> ProxMox -> Debian -> ioBroker (Master)| RPI3B+ -> rtl_433 (Slave) | CCU2

                          1 Reply Last reply
                          0
                          • UhulaU Uhula

                            Stimmt, bin im Moment nicht aktiv im Forum, dafür aber umso aktiver beim Erstellen der Material Design for ioBroker 2.0 CSS Styles ;-) - dann natürlich inkl. der Chips.

                            • Basis ist dann ein helles Design, das dunkle ist dann optional, auch jederzeit umschaltbar (wenn denn eigene Komponenten das auch mitmachen, die mdui- können es)
                            • optionales Setzen der Farben für abar, tnav, lnav, rnav, bnav und content, inkl. automatischer Anpassung der Schriftfarbe (wenn Kontrast zu "schwarz" zu gering, dann "weiß") über mdui-config Elemente
                            • die linke Navigation (lnav) kann als feste Site-Navigation arbeiten (optional ab x-Pixel Breite des Screens). Also auf dem Smartphone weiterhin als modale, sich öffnende Nav, auf dem Tablett dann als feste Nav, aber auch wegblendbar
                            • Unterstützung des material-icons Fonts - d.h. images braucht man eigentlich nicht mehr. Vorteile: Sehr gute Skalierung und automatische Anpassung an die Schriftfarbe
                            • alle material design Farben werden nun namentlich unterstützt
                            • Anpassung der MD_Demo und MD_Simple Projekte
                            • Anpassung der Dokumentation
                            • ...

                            Dauert alles noch etwas, schaut aber schon gut aus, eben wie 2019 und nicht mehr wie 2017. Screenshots liefere ich mal nach.

                            Schöne Adventszeit noch!

                            S Offline
                            S Offline
                            Snapergy
                            wrote on last edited by
                            #409

                            @Uhula
                            vielleicht ist ja auch der Discrete Slider in vertikaler Form dabei ;)

                            1 Reply Last reply
                            0
                            • AxelF1977A Offline
                              AxelF1977A Offline
                              AxelF1977
                              wrote on last edited by
                              #410

                              Da bin ich gespannt. Ich habe meine VIS auch mit dem Framework von @Uhula aufgebaut. Mir bietet es auch alle Freiheiten. Da ich mich mit CSS ganz gut auskenne, ist das genau das Richtige.

                              @Uhula wenn Du bereits dran arbeit, wäre es Dir möglich eine HTML Drag&Drop Funktion mit einzubinden? Die ist in HTML5 bereits nativ implementiert. Es wäre klasse wenn die Container in den _cont Seiten per Drag & Drop positioniert werden können, sowie die größe per Ziehen angepasst werden kann.

                              https://marcojakob.github.io/dart-dnd/simple_sortable/

                              Mal als Idee, falls Du sie nicht schon hattest ;-)

                              ASROCK Deskmini Intel I3 8100 16GB mit Proxmox VM ioBroker VM DIYHue| CCU piVCCU + FHEM auf Raspberry | Maria DB mit Grafana und Prometheus auf Tinker Board

                              1 Reply Last reply
                              0
                              • D davimas

                                @zahnheinrich

                                Die Meisten nutzen mittlerweile den neuen Adapter mit Material Style - da es hier still wurde in der Weiterentwicklung.....
                                https://forum.iobroker.net/topic/26925/test-adapter-material-design-widgets-v0-2-x

                                D Online
                                D Online
                                darkiop
                                Most Active
                                wrote on last edited by
                                #411

                                @davimas sagte in [Projekt] Material Design CSS für ioBroker.vis:

                                @zahnheinrich

                                Die Meisten nutzen mittlerweile den neuen Adapter mit Material Style - da es hier still wurde in der Weiterentwicklung.....
                                https://forum.iobroker.net/topic/26925/test-adapter-material-design-widgets-v0-2-x

                                @Meistertr sagte in [Projekt] Material Design CSS für ioBroker.vis:

                                @davimas ich nutze beides gleichzeitig, wo das eine schwächelt, punktet das andere...

                                Ganz genau, @Uhula s CSS ist das Framework für VIS selbst - die Widgets von @Scrounger passen/ergänzen das perfekt.

                                Zusammen mit den Neuerungen in Uhula's Version 2 können wir da wohl was sehr brauchbares Erwarten!

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

                                1 Reply Last reply
                                0
                                • UhulaU Offline
                                  UhulaU Offline
                                  Uhula
                                  wrote on last edited by
                                  #412

                                  Ja, das MD-Widget Project und mein MD-CSS Project sind zwei vollkommen verschiedene Wege, ersteres setzt auf die MD web components von Google auf (welche natürlich mit installiert werden), meins hingegen spielt mit viel CSS und ein wenig Script nur mit den originalen vis Ausgaben herum, unter Nutzung der basic/HTML Komponenten.

                                  Deswegen kann ich auch im Editor solche schöne Dinge, wie Drag&Drop usw. nicht einbauen, darauf habe ich gar keinen Einfluss (da fehlt eine Script-Schnittstelle); lediglich über CSS Anweisungen kann ich den Editor leicht in der Darstellung manipulieren, so dass ein look&feel der späteren Darstellung entsteht. Für die Anordnung der cards im content habe ich aber eine Idee, wenn ich den content auf die Nutzung von flex-boxen umsetze, kann man den cards (child-elemente) dann via CSS eine Reihenfolge (order) mitgeben. Mal sehen, würde das dauernde Exportieren und Importieren der Widgets in dem Fall vermeiden.

                                  Dabei wird mein Projekt sicher nie die Perfektion der echten MD web components erreichen, dafür bleiben aber auch mehr Freiheiten, da jeder selbst die CSS und Scriptdaten direkt verändern kann. Außerdem müssen keine weiteren Componenten installiert werden. Die Adaption der MD web components für ioBroker von Scrounger sieht aber schon mal sehr gut aus, muss ich später mal testen (wenn denn der Tag nicht nur 24 Std hätte).

                                  Uhula - Leise und Weise
                                  Ex: ioBroker on Gigabyte NUC Proxmox

                                  AxelF1977A 1 Reply Last reply
                                  2
                                  • UhulaU Uhula

                                    Ja, das MD-Widget Project und mein MD-CSS Project sind zwei vollkommen verschiedene Wege, ersteres setzt auf die MD web components von Google auf (welche natürlich mit installiert werden), meins hingegen spielt mit viel CSS und ein wenig Script nur mit den originalen vis Ausgaben herum, unter Nutzung der basic/HTML Komponenten.

                                    Deswegen kann ich auch im Editor solche schöne Dinge, wie Drag&Drop usw. nicht einbauen, darauf habe ich gar keinen Einfluss (da fehlt eine Script-Schnittstelle); lediglich über CSS Anweisungen kann ich den Editor leicht in der Darstellung manipulieren, so dass ein look&feel der späteren Darstellung entsteht. Für die Anordnung der cards im content habe ich aber eine Idee, wenn ich den content auf die Nutzung von flex-boxen umsetze, kann man den cards (child-elemente) dann via CSS eine Reihenfolge (order) mitgeben. Mal sehen, würde das dauernde Exportieren und Importieren der Widgets in dem Fall vermeiden.

                                    Dabei wird mein Projekt sicher nie die Perfektion der echten MD web components erreichen, dafür bleiben aber auch mehr Freiheiten, da jeder selbst die CSS und Scriptdaten direkt verändern kann. Außerdem müssen keine weiteren Componenten installiert werden. Die Adaption der MD web components für ioBroker von Scrounger sieht aber schon mal sehr gut aus, muss ich später mal testen (wenn denn der Tag nicht nur 24 Std hätte).

                                    AxelF1977A Offline
                                    AxelF1977A Offline
                                    AxelF1977
                                    wrote on last edited by
                                    #413

                                    @Uhula sagte in [Projekt] Material Design CSS für ioBroker.vis:

                                    Deswegen kann ich auch im Editor solche schöne Dinge, wie Drag&Drop usw. nicht einbauen, darauf habe ich gar keinen Einfluss (da fehlt eine Script-Schnittstelle); lediglich über CSS Anweisungen kann ich den Editor leicht in der Darstellung manipulieren, so dass ein look&feel der späteren Darstellung entsteht. Für die Anordnung der cards im content habe ich aber eine Idee, wenn ich den content auf die Nutzung von flex-boxen umsetze, kann man den cards (child-elemente) dann via CSS eine Reihenfolge (order) mitgeben. Mal sehen, würde das dauernde Exportieren und Importieren der Widgets in dem Fall vermeiden.

                                    Ja genau, dies ständige exportieren und importieren nervt mich nämlich auch wie sau. Da die Möglichkeit besteht fest Scripte in VIS einzubinden, wie CSS, hatte ich die Hoffnung, den Code dort einzubinden und die CSS Klassen dann nutzen zu können. Und siehe da, Drag&Drop.

                                    @Uhula sagte in [Projekt] Material Design CSS für ioBroker.vis:

                                    Dabei wird mein Projekt sicher nie die Perfektion der echten MD web components erreichen, dafür bleiben aber auch mehr Freiheiten, da jeder selbst die CSS und Scriptdaten direkt verändern kann. Außerdem müssen keine weiteren Componenten installiert werden.

                                    Und genau diese Freiheiten machen es für mich perfekt. Also ist es perfekt!

                                    ASROCK Deskmini Intel I3 8100 16GB mit Proxmox VM ioBroker VM DIYHue| CCU piVCCU + FHEM auf Raspberry | Maria DB mit Grafana und Prometheus auf Tinker Board

                                    1 Reply Last reply
                                    0
                                    • UhulaU Uhula

                                      Stimmt, bin im Moment nicht aktiv im Forum, dafür aber umso aktiver beim Erstellen der Material Design for ioBroker 2.0 CSS Styles ;-) - dann natürlich inkl. der Chips.

                                      • Basis ist dann ein helles Design, das dunkle ist dann optional, auch jederzeit umschaltbar (wenn denn eigene Komponenten das auch mitmachen, die mdui- können es)
                                      • optionales Setzen der Farben für abar, tnav, lnav, rnav, bnav und content, inkl. automatischer Anpassung der Schriftfarbe (wenn Kontrast zu "schwarz" zu gering, dann "weiß") über mdui-config Elemente
                                      • die linke Navigation (lnav) kann als feste Site-Navigation arbeiten (optional ab x-Pixel Breite des Screens). Also auf dem Smartphone weiterhin als modale, sich öffnende Nav, auf dem Tablett dann als feste Nav, aber auch wegblendbar
                                      • Unterstützung des material-icons Fonts - d.h. images braucht man eigentlich nicht mehr. Vorteile: Sehr gute Skalierung und automatische Anpassung an die Schriftfarbe
                                      • alle material design Farben werden nun namentlich unterstützt
                                      • Anpassung der MD_Demo und MD_Simple Projekte
                                      • Anpassung der Dokumentation
                                      • ...

                                      Dauert alles noch etwas, schaut aber schon gut aus, eben wie 2019 und nicht mehr wie 2017. Screenshots liefere ich mal nach.

                                      Schöne Adventszeit noch!

                                      frieda99F Offline
                                      frieda99F Offline
                                      frieda99
                                      wrote on last edited by
                                      #414

                                      @Uhula
                                      Super! ...ick freu mir

                                      D 1 Reply Last reply
                                      0
                                      • frieda99F frieda99

                                        @Uhula
                                        Super! ...ick freu mir

                                        D Online
                                        D Online
                                        darkiop
                                        Most Active
                                        wrote on last edited by
                                        #415

                                        @frieda99 Ebenso, @Uhula wenn du einen Beta Tester um die Feiertage brauchst ... sag bescheid :)

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

                                        B 1 Reply Last reply
                                        0
                                        • D darkiop

                                          @frieda99 Ebenso, @Uhula wenn du einen Beta Tester um die Feiertage brauchst ... sag bescheid :)

                                          B Offline
                                          B Offline
                                          Buddinski88
                                          wrote on last edited by
                                          #416

                                          @darkiop sagte in [Projekt] Material Design CSS für ioBroker.vis:

                                          @frieda99 Ebenso, @Uhula wenn du einen Beta Tester um die Feiertage brauchst ... sag bescheid :)

                                          Melde mich auch, da ich eh die ganze Visualisierung überarbeiten möchte :-)

                                          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

                                          425

                                          Online

                                          32.6k

                                          Users

                                          82.2k

                                          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