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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
650 Beiträge 111 Kommentatoren 221.6k Aufrufe 68 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.
  • D davimas

    @Pittini
    Perfekt - Danke hat funktioniert. Und die Schriftfarbe der Textes/Menü in der lnav?

    P Offline
    P Offline
    Pittini
    Developer
    schrieb am zuletzt editiert von
    #392

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

    Und die Schriftfarbe der Textes/Menü in der lnav?

    Jedes mdui-blabla hat eine Entsprechung in der CSS Datei, mußt halt dort nach dem gewünschten mdui-xxx suchen.

    1 Antwort Letzte Antwort
    1
    • UhulaU Uhula

      Vorab-Info:
      Ich habe das Material Design CSS/Script bei mir etwas erweitert, es kann nun auch "Chips" darstellen (Alternative zu Radio-Buttons). Wenn ich es auf Github aktualisiert habe, gibt es einen Hinweis hier im Forum.

      087dd4fa-9a1c-4716-9969-296a2530cde8-image.png

      D Offline
      D Offline
      davimas
      schrieb am zuletzt editiert von
      #393

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

      Vorab-Info:
      Ich habe das Material Design CSS/Script bei mir etwas erweitert, es kann nun auch "Chips" darstellen (Alternative zu Radio-Buttons). Wenn ich es auf Github aktualisiert habe, gibt es einen Hinweis hier im Forum.

      087dd4fa-9a1c-4716-9969-296a2530cde8-image.png

      Hey,

      sind die schon irgendwo verfügbar? Die CSS Klasse habe ich nicht gefunden in der Demo......

      by,
      David

      K 1 Antwort Letzte Antwort
      0
      • S Offline
        S Offline
        Snapergy
        schrieb am zuletzt editiert von
        #394

        @Uhula
        erst einmal vielen Dank für das schöne Design via CSS. Ich habe mir den Switch und den Slider für meine Visualisierung "rausgepickt". Jetzt habe ich eine Frage bzgl. der Machbarkeit an dich. Ich hätte gern beim Slider ein Label, welcher mit dem Knopf beim Vertical Slider mitläuft und den aktuellen Wert darstellt (siehe Discrete Slider vom Google Material Design). Ich hatte dazu auch schon einen Thread eröffnet, aber dort konnte mir keiner weiterhelfen.

        Aktuell behelfe ich mir mit einer Krücke, welche den Wert in einem statischen HTML aus einem Datenobjekt ausliest. Dies ist aber immer mit einem kleinen Delay verbunden, welches sich als unschön und nicht gerade Userfreundlich darstellt.

        D 1 Antwort Letzte Antwort
        0
        • D davimas

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

          Vorab-Info:
          Ich habe das Material Design CSS/Script bei mir etwas erweitert, es kann nun auch "Chips" darstellen (Alternative zu Radio-Buttons). Wenn ich es auf Github aktualisiert habe, gibt es einen Hinweis hier im Forum.

          087dd4fa-9a1c-4716-9969-296a2530cde8-image.png

          Hey,

          sind die schon irgendwo verfügbar? Die CSS Klasse habe ich nicht gefunden in der Demo......

          by,
          David

          K Offline
          K Offline
          K_o_bold
          schrieb am zuletzt editiert von
          #395

          @davimas ,
          @Uhula , das wäre echt super, wenn auch Chips zur Verfügung gestellt werden.

          1 Antwort Letzte Antwort
          0
          • S Snapergy

            @Uhula
            erst einmal vielen Dank für das schöne Design via CSS. Ich habe mir den Switch und den Slider für meine Visualisierung "rausgepickt". Jetzt habe ich eine Frage bzgl. der Machbarkeit an dich. Ich hätte gern beim Slider ein Label, welcher mit dem Knopf beim Vertical Slider mitläuft und den aktuellen Wert darstellt (siehe Discrete Slider vom Google Material Design). Ich hatte dazu auch schon einen Thread eröffnet, aber dort konnte mir keiner weiterhelfen.

            Aktuell behelfe ich mir mit einer Krücke, welche den Wert in einem statischen HTML aus einem Datenobjekt ausliest. Dies ist aber immer mit einem kleinen Delay verbunden, welches sich als unschön und nicht gerade Userfreundlich darstellt.

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

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

            S 1 Antwort Letzte Antwort
            0
            • D dos1973

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

              S Offline
              S Offline
              Snapergy
              schrieb am zuletzt editiert von
              #397

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

              1 Antwort Letzte Antwort
              0
              • nukleuzN Offline
                nukleuzN Offline
                nukleuz
                schrieb am zuletzt editiert von
                #398

                Gibt es schon das Update für die Chips?

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

                1 Antwort Letzte Antwort
                0
                • K Offline
                  K Offline
                  K_o_bold
                  schrieb am zuletzt editiert von 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 Antwort Letzte Antwort
                  0
                  • UhulaU Offline
                    UhulaU Offline
                    Uhula
                    schrieb am zuletzt editiert von
                    #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 Antworten Letzte Antwort
                    5
                    • S Offline
                      S Offline
                      Schrauberheld
                      schrieb am zuletzt editiert von Schrauberheld
                      #401

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

                      1 Antwort Letzte Antwort
                      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 Abwesend
                        Z Abwesend
                        zahnheinrich
                        schrieb am zuletzt editiert von
                        #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 Antwort Letzte Antwort
                        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
                          schrieb am zuletzt editiert von 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 Antworten Letzte Antwort
                          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
                            schrieb am zuletzt editiert von davimas
                            #404

                            @Uhula

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

                            1 Antwort Letzte Antwort
                            0
                            • K Offline
                              K Offline
                              K_o_bold
                              schrieb am zuletzt editiert von
                              #405

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

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

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

                                1 Antwort Letzte Antwort
                                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
                                  schrieb am zuletzt editiert von
                                  #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 Antwort Letzte Antwort
                                  0
                                  • nukleuzN Offline
                                    nukleuzN Offline
                                    nukleuz
                                    schrieb am zuletzt editiert von
                                    #408

                                    Wir sind sehr gespannt 😎

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

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

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

                                      1 Antwort Letzte Antwort
                                      0
                                      • AxelF1977A Offline
                                        AxelF1977A Offline
                                        AxelF1977
                                        schrieb am zuletzt editiert von
                                        #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 Antwort Letzte Antwort
                                        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 Offline
                                          D Offline
                                          darkiop
                                          Most Active
                                          schrieb am zuletzt editiert von
                                          #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 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

                                          830

                                          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