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

  1. ioBroker Community Home
  2. Deutsch
  3. Visualisierung
  4. [Projekt] MDCSS v2: Material Design CSS Version 2

NEWS

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

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

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

[Projekt] MDCSS v2: Material Design CSS Version 2

Scheduled Pinned Locked Moved Visualisierung
material uivismaterial css
717 Posts 74 Posters 178.2k Views 77 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.
  • UhulaU Uhula

    @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

    Geht das bei einem Projekt, dass am Smartphone nur über das Burgermenü die lnav geöffnet wird und am Tablet immer offen ist?

    Logo. Dafür gibt es in der Konfiguration
    0feaa9bc-f8c7-42bc-b77c-4c3d775c088b-image.png
    wo man die Anzahl der Pixel angibt, ab der das automatische Öffnen funktionieren soll.

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

    @Uhula danke Dir. :+1: das MD CSS ist so riesig das man viele Sachen einfach wieder vergisst. Das Fenster hab ich schon mal gesehen. :joy:

    1 Reply Last reply
    0
    • UhulaU Uhula

      @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

      Hast Du dazu einen Tipp?

      Ja. Du hast auch mdui-lnav-fixed-open-hide angegeben. Dieses bedeutet, wenn die lnav fixiert geöffnet ist, dann verstecke das Widget - soll dazu dienen, dass in diesem Fall nicht beide Navigationen sichtbar sind. Wenn du das möchtest, nimm das mdui-lnav-fixed-open-hide einfach weg.

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

      @Dominik-F sollte das nicht genau das gleiche sein wie bei mir?
      @Uhula sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

      Ja. Du hast auch mdui-lnav-fixed-open-hide angegeben. Dieses bedeutet, wenn die lnav fixiert geöffnet ist, dann verstecke das Widget - soll dazu dienen, dass in diesem Fall nicht beide Navigationen sichtbar sind. Wenn du das möchtest, nimm das mdui-lnav-fixed-open-hide einfach weg.

      Dominik F.D 1 Reply Last reply
      1
      • UhulaU Uhula

        @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

        Hast Du dazu einen Tipp?

        Ja. Du hast auch mdui-lnav-fixed-open-hide angegeben. Dieses bedeutet, wenn die lnav fixiert geöffnet ist, dann verstecke das Widget - soll dazu dienen, dass in diesem Fall nicht beide Navigationen sichtbar sind. Wenn du das möchtest, nimm das mdui-lnav-fixed-open-hide einfach weg.

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

        @Uhula sorry aber es geht immer noch nicht. Was könnte denn noch sein?

        lnav fixiert muss ich ja nicht eingeben oder?

        Bildschirmfoto 2020-06-07 um 20.20.04.png

        UhulaU 1 Reply Last reply
        0
        • D der-eine

          @Dominik-F sollte das nicht genau das gleiche sein wie bei mir?
          @Uhula sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

          Ja. Du hast auch mdui-lnav-fixed-open-hide angegeben. Dieses bedeutet, wenn die lnav fixiert geöffnet ist, dann verstecke das Widget - soll dazu dienen, dass in diesem Fall nicht beide Navigationen sichtbar sind. Wenn du das möchtest, nimm das mdui-lnav-fixed-open-hide einfach weg.

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

          @der-eine

          du hast recht, es funktioniert nun. vielen Dank.

          1 Reply Last reply
          0
          • D der-eine

            @Uhula sorry aber es geht immer noch nicht. Was könnte denn noch sein?

            lnav fixiert muss ich ja nicht eingeben oder?

            Bildschirmfoto 2020-06-07 um 20.20.04.png

            UhulaU Offline
            UhulaU Offline
            Uhula
            wrote on last edited by
            #525

            @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

            lnav fixiert muss ich ja nicht eingeben oder?

            Du hast die mdui-hide480 und mdui-show480 Angabe auch in der CSS Angabe drin, damit blendest du das Widget komplett aus. Du möchtest aber nur den Text variieren, also darf die mdui-hide480 und mdui-show480 Angabe auch nur im Text sein.

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

            D 1 Reply Last reply
            1
            • UhulaU Uhula

              @der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

              lnav fixiert muss ich ja nicht eingeben oder?

              Du hast die mdui-hide480 und mdui-show480 Angabe auch in der CSS Angabe drin, damit blendest du das Widget komplett aus. Du möchtest aber nur den Text variieren, also darf die mdui-hide480 und mdui-show480 Angabe auch nur im Text sein.

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

              @Uhula :man-facepalming: da is der Fehler jetzt läuft es. Danke dachte die Anweisungen gehören auch nochmal ins CSS.

              1 Reply Last reply
              0
              • M Offline
                M Offline
                mctom
                wrote on last edited by mctom
                #527

                Hallo zusammen,

                ich habe ein kleine (manchmal auch größeres) Problem. Ich habe bei mir 2 Tablets verbaut auf denen ich über den Fully Browser mit Hilfe von Material Design CSS Version 2 und VIS mein Smart Homer visualisiert habe.

                Jetzt tritt zeitweise folgende Problem auf. Und zwar lässt sich das Menü nicht aufrufen. Wenn ich auf den Button klicke sieht man das er gedrückt wurde, aber das left Menü wird nicht aufgeklappt. Alle Funktionen sind sonst soweit in Ordnung. Ich kann auch alles steuern, nur das Menü bekomme ich nicht auf. Erst wenn ich die Seite neu lade bekomme ich das Menü wieder auf.
                Hat einer eine Idee woran dies liegen könnte ?
                Wo könnte ich noch auf spuren suche gehen ?

                Gruß

                Michael

                Update:
                Ich habe jetzt noch mal die Android WEB VIEW & Fully auf den neusten Stand gebracht. Beim CSS Code bin ich bei Version 2.5. Aber das Thema tritt weiterhin auf.

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

                  @Uhula bei den Button view in jqui - Container würde ich gerne das X weiter nach unten setzen. Wo ist denn dazu die passende Stelle im CSS?

                  Bildschirmfoto 2020-06-14 um 23.56.49.png

                  Edit:
                  In den Einstellungen "Kopfzeile verbergen" dann rutscht es nach unten.

                  1 Reply Last reply
                  0
                  • svenomattS Offline
                    svenomattS Offline
                    svenomatt
                    wrote on last edited by
                    #529

                    Hallo sitze gerade an der Umsetzung meiner neuen Visualisierungen und stehe vor dem Probleme, dass ich den mdui-switch mit den Werten aktiv, inaktiv bzw. 0, 1 benötige. es wird aber immer nur der wert true oder false gesetzt.

                    <label for="w00219_checkbox"><label>
                    

                    Kann ich irgenwie den Wert von True bzw. false in 0 bzw. 1 ändern. Habe nichts gefunden. würde gerne die Schalter für alle geräte nutzen.

                    [{"tpl":"tplValueBoolCheckbox","data":{"oid":"hm-rega.0.10714","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"html_append":"<label for=\"w00219_checkbox\"><label>","class":"mdui-switch mdui-blue-acc","html":"Switches Beispiele","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"name":"Schatten-Programm"},"style":{"left":"631px","top":"316px","width":"55px","height":"30px","z-index":8},"widgetSet":"basic"}]
                    
                    Dominik F.D 1 Reply Last reply
                    0
                    • svenomattS svenomatt

                      Hallo sitze gerade an der Umsetzung meiner neuen Visualisierungen und stehe vor dem Probleme, dass ich den mdui-switch mit den Werten aktiv, inaktiv bzw. 0, 1 benötige. es wird aber immer nur der wert true oder false gesetzt.

                      <label for="w00219_checkbox"><label>
                      

                      Kann ich irgenwie den Wert von True bzw. false in 0 bzw. 1 ändern. Habe nichts gefunden. würde gerne die Schalter für alle geräte nutzen.

                      [{"tpl":"tplValueBoolCheckbox","data":{"oid":"hm-rega.0.10714","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"html_append":"<label for=\"w00219_checkbox\"><label>","class":"mdui-switch mdui-blue-acc","html":"Switches Beispiele","lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"name":"Schatten-Programm"},"style":{"left":"631px","top":"316px","width":"55px","height":"30px","z-index":8},"widgetSet":"basic"}]
                      
                      Dominik F.D Offline
                      Dominik F.D Offline
                      Dominik F.
                      wrote on last edited by
                      #530

                      @svenomatt

                      wenn ich mich nicht täusche wird 0 als false gewertet und alles andere als true. müsste also damit gehen

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

                        @svenomatt

                        wenn ich mich nicht täusche wird 0 als false gewertet und alles andere als true. müsste also damit gehen

                        svenomattS Offline
                        svenomattS Offline
                        svenomatt
                        wrote on last edited by svenomatt
                        #531

                        @Dominik-F Glaube ich habe mich nicht ganz verständlich ausgedrückt. Ich möchte wie gesagt den "mdui-switch" (wigdet: basis-bool checkbox)nutzen. Dieser liefert in die Instanzen dann bei einschalten True bei ausschalten False. Möchte jetzt das er anstatt dieser Werte die Werte Aktiv oder Inaktiv einträgt. Hintergrund ist, ich habe in Hommatic einige State (Programme) die ich mit Aktiv und Inaktiv starte oder stoppe. Mittels Schalter möchte ich Programme dann aktivieren bzw. deaktivieren.

                        Ich habe bis vor kurzem die HQ wigdets genutzt, dort konnte ich für True und False einen Wert hinterlegen.![Bild Text](sw.PNG

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

                          @Dominik-F Glaube ich habe mich nicht ganz verständlich ausgedrückt. Ich möchte wie gesagt den "mdui-switch" (wigdet: basis-bool checkbox)nutzen. Dieser liefert in die Instanzen dann bei einschalten True bei ausschalten False. Möchte jetzt das er anstatt dieser Werte die Werte Aktiv oder Inaktiv einträgt. Hintergrund ist, ich habe in Hommatic einige State (Programme) die ich mit Aktiv und Inaktiv starte oder stoppe. Mittels Schalter möchte ich Programme dann aktivieren bzw. deaktivieren.

                          Ich habe bis vor kurzem die HQ wigdets genutzt, dort konnte ich für True und False einen Wert hinterlegen.![Bild Text](sw.PNG

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

                          @svenomatt

                          Ob man das so definieren kann, kann ich dir leider nicht sagen. Du kannst dir jedoch ein kleines Skript schreiben das wenn ein Datenpunkt true wird, er in einen anderen aktiv schreibt und andersherum.

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

                            @svenomatt

                            Ob man das so definieren kann, kann ich dir leider nicht sagen. Du kannst dir jedoch ein kleines Skript schreiben das wenn ein Datenpunkt true wird, er in einen anderen aktiv schreibt und andersherum.

                            svenomattS Offline
                            svenomattS Offline
                            svenomatt
                            wrote on last edited by
                            #533

                            @Dominik-F Ja im Grunde geht das, macht die Sache aber wieder so mächtig. Hatte gehofft, dass es eine schlanke Lösung gibt, ähnlich des HQ wigdet wo ich e True bzw. False einen Wert zuordnen kann.

                            1 Reply Last reply
                            0
                            • D Offline
                              D Offline
                              danny_v1
                              wrote on last edited by
                              #534

                              Hallo,

                              erst mal vielen Dank für das Mega Projekt, ist echt toll!

                              Bin gerade dabei meine Visualisierung zu erstellen und das Vorlageprojekt macht es um einiges einfacher!

                              Gibt es eine Möglichkeit wenn man mdui-expand verwendet das nach dem Laden der Seite die Views gleich ein der "kleinen Ansicht" sind (also collapsed) und man nicht erst alle Views klein machen muss?

                              Und wie kann ich die Views sortieren, wenn ich position relativ verwende, über die order klappt es leider nicht der Editor sortiert dann irgendwie alles willkürlich wie mir scheint.

                              mfg danny_v1

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

                                Hallo,

                                erst mal vielen Dank für das Mega Projekt, ist echt toll!

                                Bin gerade dabei meine Visualisierung zu erstellen und das Vorlageprojekt macht es um einiges einfacher!

                                Gibt es eine Möglichkeit wenn man mdui-expand verwendet das nach dem Laden der Seite die Views gleich ein der "kleinen Ansicht" sind (also collapsed) und man nicht erst alle Views klein machen muss?

                                Und wie kann ich die Views sortieren, wenn ich position relativ verwende, über die order klappt es leider nicht der Editor sortiert dann irgendwie alles willkürlich wie mir scheint.

                                mfg danny_v1

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

                                @danny_v1

                                mit

                                mdui-expand mdui-onload 
                                

                                werden die direkt eingeklappt wenn du die view öffnest.

                                1 Reply Last reply
                                0
                                • D Offline
                                  D Offline
                                  danny_v1
                                  wrote on last edited by danny_v1
                                  #536

                                  @Dominik-F said in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                  mdui-expand mdui-onload

                                  Super danke schön, hat geklappt.
                                  Gibts für sowas eine Befehlsliste, hab das in der Anleitung nicht gefunden.

                                  1 Reply Last reply
                                  0
                                  • Q Offline
                                    Q Offline
                                    Qlink
                                    wrote on last edited by
                                    #537

                                    @Uhula

                                    Ich habe mir eine View importiert wo ich bei der Value List folgenden Anzeigefehler hab, sobald ich die Fontsize auf Large oder größer stelle:

                                    7f9098de-6a27-49a1-9978-ca47daa2418e-image.png

                                    Schaut so aus als ob da noch ein Pfeil unter dem jqui-mdselect Pfeil drunter liegt und erscheint sobald man auf größer stellt...

                                    Kann ich den irgendwie ausblenden oder wegbekommen ?

                                    Beste Grüße

                                    UhulaU 1 Reply Last reply
                                    0
                                    • Q Qlink

                                      @Uhula

                                      Ich habe mir eine View importiert wo ich bei der Value List folgenden Anzeigefehler hab, sobald ich die Fontsize auf Large oder größer stelle:

                                      7f9098de-6a27-49a1-9978-ca47daa2418e-image.png

                                      Schaut so aus als ob da noch ein Pfeil unter dem jqui-mdselect Pfeil drunter liegt und erscheint sobald man auf größer stellt...

                                      Kann ich den irgendwie ausblenden oder wegbekommen ?

                                      Beste Grüße

                                      UhulaU Offline
                                      UhulaU Offline
                                      Uhula
                                      wrote on last edited by
                                      #538

                                      @Qlink sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                      Kann ich den irgendwie ausblenden oder wegbekommen ?

                                      Das ist das Zeichen, welches der Browser selbst bereits zeichnet. In der nächsten MDCSS Version behandel ich das etwas anders, da sieht es dann besser aus. Hier ein Test mit Standard und xx-large (siehe select bei "Modus"):
                                      37a11e9d-4a82-44fd-9ee5-e11c93ad0570-image.png

                                      (Hinweis: Der Screenshot zeigt einen Ausschnitt aus meinem clientseitigen Optionsdialog für die Adaption vom chart.js um Charts beliebiger Quellen ohne flot und grafana darstellen zu können - dazu später mehr Details ... when its done)

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

                                      1 Reply Last reply
                                      1
                                      • X Offline
                                        X Offline
                                        xADDRx
                                        wrote on last edited by
                                        #539

                                        Hallo,

                                        kann mir einer bitte kurz erklären was die Version 2 mehr kann als die erste?

                                        Ich habe viel zeit in die V1 gesteckt. Bevor ich mit der Version 2 anfange...

                                        Sonos, Intel Nuc, Iobroker Pro, Proxmox, IPad Air (Wand), Vis, Xiaomi, Devolo, Bose, Philips Hue, Instar, Synology

                                        D 1 Reply Last reply
                                        0
                                        • X xADDRx

                                          Hallo,

                                          kann mir einer bitte kurz erklären was die Version 2 mehr kann als die erste?

                                          Ich habe viel zeit in die V1 gesteckt. Bevor ich mit der Version 2 anfange...

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

                                          @xADDRx hast Du Dir die Demos auf GitHub angesehen? Dort werden die Neuerungen gezeigt. Die Anleitung wurde auch an V2 angepasst.

                                          X 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

                                          494

                                          Online

                                          32.4k

                                          Users

                                          81.4k

                                          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