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

NEWS

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

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

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

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

Geplant Angeheftet Gesperrt Verschoben Visualisierung
650 Beiträge 111 Kommentatoren 220.7k 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.
  • 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
            • UhulaU Offline
              UhulaU Offline
              Uhula
              schrieb am zuletzt editiert von
              #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 Antwort Letzte Antwort
              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
                schrieb am zuletzt editiert von
                #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 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!

                  frieda99F Offline
                  frieda99F Offline
                  frieda99
                  schrieb am zuletzt editiert von
                  #414

                  @Uhula
                  Super! ...ick freu mir

                  D 1 Antwort Letzte Antwort
                  0
                  • frieda99F frieda99

                    @Uhula
                    Super! ...ick freu mir

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

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

                      B Offline
                      B Offline
                      Buddinski88
                      schrieb am zuletzt editiert von
                      #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 Antwort Letzte Antwort
                      0
                      • M Offline
                        M Offline
                        MaikB85
                        schrieb am zuletzt editiert von MaikB85
                        #417

                        kurze Frage: hab mal auf die aktuelle Version aktualisiert, jetzt ist bei der Top-Navigation Bar was anders. Kann ich von dem weißen Balken des aktiven Tabs die Farbe ändern? Wo kann ich das machen? Der Text vom aktiven Tab ist über die CSS-Klasse mdui-amber-acc eingefärbt aber der Balken nicht mehr, bzw. wird von einem weißen Balken überlagert.

                        Ach und noch was. Die Top-Navigation-Bar ist bei mir für das Smartphone zu klein. Ich kann so leider nur auf die ersten Elemente zugreifen. Hast du ne Idee wie man das anders umsetzen könnte? z.B. scrollen der tnavbar oder das die Elemente in die nächste Zeile springen. Geht sowas?

                        Gruß Maik

                        [EDIT] Für der Farbe hab ich das Attribut gefunden. In Zeile 511 des CSS Codes:

                        .mdui-tnav .mdui-flatbutton.ui-state-active {
                          box-shadow: inset 0px -3px 0px 0px #FFCA28;
                        }
                        

                        Da hab ich die Farbe von #FFFFFF auf #FFCA28 angepasst für "amber"

                        1 Antwort Letzte Antwort
                        0
                        • L Offline
                          L Offline
                          ljmarkus
                          schrieb am zuletzt editiert von
                          #418

                          Hallo...
                          gibt es eine Möglichkeit einen Timer laufen zulassen sobald man die Startseite verlassen hat nach einem Timeout (keine Touchfunktion ausgelöst hat) das er wieder auf die Startseite geht?

                          lg, Markus

                          P 1 Antwort Letzte Antwort
                          0
                          • L ljmarkus

                            Hallo...
                            gibt es eine Möglichkeit einen Timer laufen zulassen sobald man die Startseite verlassen hat nach einem Timeout (keine Touchfunktion ausgelöst hat) das er wieder auf die Startseite geht?

                            lg, Markus

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

                            @ljmarkus Ja, da gibts nen Script für. Das ganze hat aber halt mal grundsätzlich rein gar nichts mit dem Material Design zu tun, also separaten Thread aufmachen oder die Suche bemühen.

                            1 Antwort Letzte Antwort
                            1
                            • D Offline
                              D Offline
                              DJNick134
                              schrieb am zuletzt editiert von
                              #420

                              Guten Abend zusammen,
                              ich habe ein Problem mit dem Material Design.
                              Die VIS läuft auf einem Fire HD 10 mit dem Fully Kiosk Browser.
                              In der Top Navigation wird bei einigen "Kategorien" ein weißer Strich neben dem "Kategorienamen" angezeigt (siehe Bild) und bei anderen nicht...
                              Wie bekomme ich diesen Strich weg?

                              Vielen Dank schon mal.

                              Foto 01.01.20, 19 46 41.jpg

                              1 Antwort Letzte Antwort
                              0
                              • M Offline
                                M Offline
                                Maverick78
                                schrieb am zuletzt editiert von
                                #421

                                Ich habe eine kurze Frage, vielleicht habe ich es auch überlesen. Im Handbuch finde ich dazu leider nichts.
                                Ich nutze ein Material Design Bar Chart aus Einzelobjekten. Ich bekomme es einfach nicht hin das der Barchart nach Höhe der Werte eingefärbt wird. Außerdem hätte ich die x-Werte auch gerne Datenobjekten zugewiesen.

                                Ich möchte das sehr ungern auf flot und history umbauen müssen.

                                Jemad eine Idee

                                Unbenannt.PNG

                                D 1 Antwort Letzte Antwort
                                0
                                • M Maverick78

                                  Ich habe eine kurze Frage, vielleicht habe ich es auch überlesen. Im Handbuch finde ich dazu leider nichts.
                                  Ich nutze ein Material Design Bar Chart aus Einzelobjekten. Ich bekomme es einfach nicht hin das der Barchart nach Höhe der Werte eingefärbt wird. Außerdem hätte ich die x-Werte auch gerne Datenobjekten zugewiesen.

                                  Ich möchte das sehr ungern auf flot und history umbauen müssen.

                                  Jemad eine Idee

                                  Unbenannt.PNG

                                  D Offline
                                  D Offline
                                  darkiop
                                  Most Active
                                  schrieb am zuletzt editiert von
                                  #422

                                  @Maverick78 dann bist du hier in diesem Thread aber falsch ... hier geht es um das Material (CSS) Design von Uhula.

                                  Du meinst sicher den hier: https://forum.iobroker.net/topic/26925/test-adapter-material-design-widgets-v0-2-x

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

                                  1 Antwort Letzte Antwort
                                  0
                                  • M Offline
                                    M Offline
                                    Maverick78
                                    schrieb am zuletzt editiert von
                                    #423

                                    :man-facepalming: sorry wer lesen kann ist klar im Vorteil. Ich geh in den anderen Thread. Vielleicht kann ein Moderator den Post ja löschen.

                                    1 Antwort Letzte Antwort
                                    0
                                    • Archimedeus AA Offline
                                      Archimedeus AA Offline
                                      Archimedeus A
                                      schrieb am zuletzt editiert von
                                      #424

                                      Hi, ich komme ein wenig voran und bin schon ein echter Fan. Frage: Wie ändere ich die Reihenfolge von Cards/Tiles? mdui-float ordnet die ja so an, wie es passt. Es schein so zu sein, dass die Reihenfolge des Anlegens darüber entscheidet. Kann ich die Reihenfolge ändern? Einfach mit der Maus verschieben geht nicht. Oder liegts am nur am Browser?

                                      D 1 Antwort Letzte Antwort
                                      0
                                      • Archimedeus AA Archimedeus A

                                        Hi, ich komme ein wenig voran und bin schon ein echter Fan. Frage: Wie ändere ich die Reihenfolge von Cards/Tiles? mdui-float ordnet die ja so an, wie es passt. Es schein so zu sein, dass die Reihenfolge des Anlegens darüber entscheidet. Kann ich die Reihenfolge ändern? Einfach mit der Maus verschieben geht nicht. Oder liegts am nur am Browser?

                                        D Offline
                                        D Offline
                                        darkiop
                                        Most Active
                                        schrieb am zuletzt editiert von
                                        #425

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

                                        Es schein so zu sein, dass die Reihenfolge des Anlegens darüber entscheidet. Kann ich die Reihenfolge ändern?

                                        Du kannst die Cards in VIS Edit in der Content View ausschneiden und wieder einfügen, so kannst du eine andere Reihenfolge aufbauen :)

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

                                        Archimedeus AA 1 Antwort Letzte Antwort
                                        1
                                        • Archimedeus AA Offline
                                          Archimedeus AA Offline
                                          Archimedeus A
                                          schrieb am zuletzt editiert von
                                          #426

                                          Funzt! Danke

                                          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

                                          604

                                          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