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] MDCSS v2: Material Design CSS Version 2

NEWS

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

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

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

[Projekt] MDCSS v2: Material Design CSS Version 2

Geplant Angeheftet Gesperrt Verschoben Visualisierung
material uivismaterial css
717 Beiträge 74 Kommentatoren 177.8k Aufrufe 77 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.
  • foxriver76F Offline
    foxriver76F Offline
    foxriver76
    Developer
    schrieb am zuletzt editiert von foxriver76
    #19

    @Uhula habe auf meinem iPhone in der Darstellung noch ein Problem. Alle Cards im cont haben mdui-cols-4-toc-16, jedoch tanzt ab und an eine Card aus der Reihe, was dann äußerst doof ist, da zu breit für Display und horizontales Scrollen dadurch aktiviert wird. Siehe Bild CC688D67-432A-4872-AF4C-787D01587B5B.png

    Irgendeine Idee? ;-)

    Videotutorials & mehr

    Hier könnt ihr mich unterstützen.

    Dominik F.D 1 Antwort Letzte Antwort
    0
    • foxriver76F foxriver76

      @Uhula habe auf meinem iPhone in der Darstellung noch ein Problem. Alle Cards im cont haben mdui-cols-4-toc-16, jedoch tanzt ab und an eine Card aus der Reihe, was dann äußerst doof ist, da zu breit für Display und horizontales Scrollen dadurch aktiviert wird. Siehe Bild CC688D67-432A-4872-AF4C-787D01587B5B.png

      Irgendeine Idee? ;-)

      Dominik F.D Offline
      Dominik F.D Offline
      Dominik F.
      schrieb am zuletzt editiert von
      #20

      @foxriver76

      hast du zufällig unter CSS Allgemein eine Breite angegeben? Das hat bei mir mal den Effekt ausgelöst.

      foxriver76F 1 Antwort Letzte Antwort
      0
      • Dominik F.D Dominik F.

        @foxriver76

        hast du zufällig unter CSS Allgemein eine Breite angegeben? Das hat bei mir mal den Effekt ausgelöst.

        foxriver76F Offline
        foxriver76F Offline
        foxriver76
        Developer
        schrieb am zuletzt editiert von
        #21

        @Dominik-F Danke, war der entscheidende Hinweis. Es stand zwar nichts drin, habe allerdings mal kurz auf auto gemacht und wieder weg, jetzt funzt es. Weiß jetzt nicht, was da intern passiert ist. Siehe auch die Änderung die ich hier vornehme und wie es sich im edit auswirkt. Es steht nichts in width am Ende steht wieder nichts drin, aber es ist deutlich schmaler.

        vis.gif

        Videotutorials & mehr

        Hier könnt ihr mich unterstützen.

        1 Antwort Letzte Antwort
        0
        • UhulaU Uhula

          Update V2.1 20.02.2020

          CSS

          • mdui-value: padding entfernt
          • hover-Effekt: Einfärbung mit 5% statt 20% schwarz/weiß
          • mdui-list, mdui-listitem: Erlaubt die Darstellung von List-Elementen. Je nach Anorderung können drei Listarten umgesezt werden: read only, clickable, complex. Beispiele im MD_Demo
          • mdui-flex-justify-content_center, mdui-flex-justify-content_space-evenly: Der Vorgabewert bei der flex-Angabe für die innenliegenden Elemente ist mdui-flex-justify-content_flex-start, d.h. sie werden ab links oben angeordnet. Über die beiden neuen CSS-Klassen kann eine zentrierte Anordnung erreicht werden.
          • mdui-shape-XXXX: Stellt verschiedene Shapes (Formen) zur Verfügung um einfache Grafiken darzustellen. XXXX=circle, semicircle, quadrant, arrow08, arrow16, triangle. Diese können dann z.B. mit mdui-flow/mdui-rotate versehen werden. Beispiele im MD_Demo
          • mdui-card mdui-title kann nun mit einer Farbe für den Titelbereich versehen werden. Erlaubt sind die MD-Color-Konstanten COLOR="red, ...". Es kann die Hintergrundfarbe festgelegt werden.
            mdui-title-COLOR-bg : Angabe der Hintergrundfarbe
          • mdui-menuitem: Korrektur der font-Farbe im dark-Theme
          • mdui-flow: Das "flow"-Symbol überarbeitet
          • mdui-input-number: kann zusätzlich zu einem mdui-input gesetzt werden um den Eingabe-Typ von "text" auf "number" zur Laufzeit zu wechseln.
          • mdui-input-date: kann zusätzlich zu einem mdui-input gesetzt werden um den Eingabe-Typ von "text" auf "date" zur Laufzeit zu wechseln.
          • mdui-input-time: kann zusätzlich zu einem mdui-input gesetzt werden um den Eingabe-Typ von "text" auf "time" zur Laufzeit zu wechseln.
          • mdui-input-color: kann zusätzlich zu einem mdui-input gesetzt werden um den Eingabe-Typ von "text" auf "color" zur Laufzeit zu wechseln.
          • mdui-placeholder-XXXXX: kann zusätzlich zu einem mdui-input gesetzt werden um, wenn das Eingabefeld leer ist, den Platzhalter-Text "XXXXX" anzuzeigen.
          • mdui-flex: So geändert, dass es im Bereich der tnav/bnav nun ein horizontales Scrollen erlaubt

          vis-Editor

          • Nutzung von CSS-Variablen: Hier kann in der CSS am Anfang nun leicht ein dark-Theme zur vis-Bearbeitung gewählt werden.
          • Korrektur des backgrounds des Editors, so dass nun die roten Hilfslinien beim Ausrichten der Widgets mit den Cursortasten wieder eingeblendet werden.

          script

          • Farbinterpretation überarbeitet, damit auch bei falschen oder nicht vorhandenen Farb-Konfiguration sinnvolle Farben verwendet werden. Greift auch im MD_Demo Projekt
          • Auswertung der mdui-input-number hinzugefügt
          • Secondary-color wird nun über CSS-var gesetzt

          MD_Demo

          • Einstellungsdialog nun 2-seitig, 1x Farben, 1xcards. Separate Einstellung für lnav/rnav-Farben und card-Titel
          • Ergänzung Beispiel für mdui-listitem (Bedienung>Listen)
          • Ergänzung Beispiel für mdui-shape-NNN (Darstellung>Formen)


          Einstellungen und Titel-Hintergrund
          243fb9be-cebe-4afe-a015-36d3b5eaab64-image.png
          mdui-list
          fa71855e-bfc7-4d2c-8c97-e014b30b2e88-image.png
          mdui-shape-XXX
          fae584dd-c8fc-4fb6-9a3b-7d6b581a2435-image.png
          mdui-flow
          08e96b85-467d-4ee8-86dc-74b28284b206-image.png

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

          @Uhula sagte in [Projekt] Material Design CSS v2:

          Einstellungsdialog nun 2-seitig, 1x Farben, 1xcards. Separate Einstellung für lnav/rnav-Farben und card-Titel
          Jap, funktioniert im Demoprojekt.

          Nach einfügen in mein Projekt:
          Einstelldialog 2seitig, ja. Separate Einstellung für lnav und rnav funktioniert hier kein bisschen, es ändert sich keine Hg-Farbe, wohl aber die Textfarbe. Einstelldialog bleibt weiß. Card Titel Farben funktionieren einwandfrei.

          Hab den kompletten Einstelldialog, also die 3 Config Seiten aus dem MD_Demo Projekt kopiert und alles was dort "demo_" hieß, zu "myhome_" umbenannt. Ebenso die 3 Blöcke im abar.

          2020-02-22 16_17_04-.png

          2020-02-22 14_22_10-Window.png

          Um den Fehler einzugrenzen hab ich mal aus dem Demoprojekt die komplette rnav importiert und meine umbenannt - gleiches Ergebnis.
          Dann hab ich eine der page... zu mir importiert, hat natürlich etliche "View nicht gefunden" gegeben aber die Navs heißen ja gleich. Aber auch hier gleiches Ergebnis.

          Hab ich was vergessen? Wo kann ich noch suchen? Mir gehen die Ideen aus.

          PS: Ich hab noch ein Projekt angefangen auf GRundlage des MD Simple Projekts. Da gibts aktuell grad mal das Grundgerüst und 3 Demopages, aber auch hier is schon der Wurm drin, da ändern sich die abar und tnav Farben nicht.
          Entweder stell ich mich ganz besonders dämlich an, oder mir fehlen Infos, oder irgendwo is im Projekt nochn Bug drin.

          PPS: Getestet mit Chrome und Firefox, jeweils aktuelle Version.

          Dominik F.D 1 Antwort Letzte Antwort
          0
          • P Offline
            P Offline
            Pittini
            Developer
            schrieb am zuletzt editiert von Pittini
            #23

            Wär es möglich das auch die NavButtons die Handlefarbe kriegen, wär irgendwie konsequent?

            Inked2020-02-22 16_51_35-vis_LI.jpg

            PS: Der Config Dialog hat oben den Text "Einstellungen" und das x zum schliessen. Woher kommt das? Weil in der Cardconfig isses ja nicht drin.

            1 Antwort Letzte Antwort
            0
            • S Offline
              S Offline
              SMARTY.ML
              schrieb am zuletzt editiert von
              #24

              Hi,

              bei mir wechselt er automatisch auf eine andere View #card... wenn ich am Desktop/Firefox das Fenster anders skaliere.
              Jemand eine Idee?

              GlasfaserG 1 Antwort Letzte Antwort
              0
              • S SMARTY.ML

                Hi,

                bei mir wechselt er automatisch auf eine andere View #card... wenn ich am Desktop/Firefox das Fenster anders skaliere.
                Jemand eine Idee?

                GlasfaserG Offline
                GlasfaserG Offline
                Glasfaser
                schrieb am zuletzt editiert von
                #25

                @SMARTY-ML

                Den Haken nur auf deinem Start-View !?

                1.JPG

                Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                S 1 Antwort Letzte Antwort
                0
                • GlasfaserG Glasfaser

                  @SMARTY-ML

                  Den Haken nur auf deinem Start-View !?

                  1.JPG

                  S Offline
                  S Offline
                  SMARTY.ML
                  schrieb am zuletzt editiert von
                  #26

                  @Glasfaser Danke ja, aber ausgegraut. Kann ich nicht ändern?

                  GlasfaserG 1 Antwort Letzte Antwort
                  0
                  • S SMARTY.ML

                    @Glasfaser Danke ja, aber ausgegraut. Kann ich nicht ändern?

                    GlasfaserG Offline
                    GlasfaserG Offline
                    Glasfaser
                    schrieb am zuletzt editiert von Glasfaser
                    #27

                    @SMARTY-ML

                    Wenn " nicht definiert " ist , dann ist er nicht auswählbar !

                    1.JPG
                    .
                    1.JPG

                    Synology 918+ 16GB - ioBroker in Docker v9 , VISO auf Trekstor Primebook C13 13,3" , Hikvision Domkameras mit Surveillance Station .. CCU RaspberryMatic in Synology VM .. Zigbee CC2538+CC2592 .. Sonoff .. KNX .. Modbus ..

                    S 1 Antwort Letzte Antwort
                    0
                    • GlasfaserG Glasfaser

                      @SMARTY-ML

                      Wenn " nicht definiert " ist , dann ist er nicht auswählbar !

                      1.JPG
                      .
                      1.JPG

                      S Offline
                      S Offline
                      SMARTY.ML
                      schrieb am zuletzt editiert von
                      #28

                      @Glasfaser Danke,es liegt auf jedenfall daran. Trotzdem bockt er bei manchen Auflösungen immer wieder in die View rein. Alle Haken raus und es steht auf nicht definiert. hmmm?

                      1 Antwort Letzte Antwort
                      0
                      • Dominik F.D Dominik F.

                        @etv

                        versuch es mal so:

                        :root {
                        
                          /* Design-time light-Theme 
                          --design-background: #f8f8f8;
                          --design-vis-font-color: #000000;
                          --design-hint-background: #0000ff;
                          --design-hint-color: #ffffff;
                          --design-grid: #000000;
                        */
                          /* Design-time dark-Theme */ 
                          --design-background: #404040;
                          --design-vis-font-color: #ffffff;
                          --design-hint-background: #ff8000;
                          --design-hint-color: #ffffff;
                          --design-grid: #ffffff;
                          
                        }
                        
                        etvE Offline
                        etvE Offline
                        etv
                        schrieb am zuletzt editiert von
                        #29

                        @Dominik-F , danke dir - leider auch nicht, aber Uhula hat weiter unten die Lösung gepostet.....ich hab dazwischen sogar schon den light Theme Part ganz rausgenommen...ging auch nicht, weil's wo anders eingestellt wird was in der Runtime dann gilt...

                        Liebe Grüße
                        Tom

                        …ist schon sehr lange begeisterter ioBroker Nutzer! 1x zu Hause und 1x auf der Alm. ioBroker ist das 'Hirn' des Smarthome und steuert HomeMatic und Shellys, loggt was so passiert, zeigt es auf Tabletts schön an und ermöglicht mir via Cloud Adapter den Fernzugriff...

                        1 Antwort Letzte Antwort
                        0
                        • D Offline
                          D Offline
                          der-eine
                          schrieb am zuletzt editiert von
                          #30

                          Guten Morgen zusammen,

                          bekomme es leider nicht hin, die Daten aus dem iCal Adapter in einem Basic-html anzuzeigen. Habe es probiert, mit dem iCal to html Script das im anderen Posting Skript
                          gepostet wurde aber damit bekomme ich im JavaScript.0 Ordner kein neues Objekt. Kann mir bitte jemand erklären, wie ich das machen muss?

                          sigi234S 1 Antwort Letzte Antwort
                          0
                          • D der-eine

                            Guten Morgen zusammen,

                            bekomme es leider nicht hin, die Daten aus dem iCal Adapter in einem Basic-html anzuzeigen. Habe es probiert, mit dem iCal to html Script das im anderen Posting Skript
                            gepostet wurde aber damit bekomme ich im JavaScript.0 Ordner kein neues Objekt. Kann mir bitte jemand erklären, wie ich das machen muss?

                            sigi234S Online
                            sigi234S Online
                            sigi234
                            Forum Testing Most Active
                            schrieb am zuletzt editiert von
                            #31

                            @der-eine

                            Screenshot (1779).png

                            Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                            Immer Daten sichern!

                            D 1 Antwort Letzte Antwort
                            0
                            • sigi234S sigi234

                              @der-eine

                              Screenshot (1779).png

                              D Offline
                              D Offline
                              der-eine
                              schrieb am zuletzt editiert von
                              #32

                              @sigi234 ohne Skript einfach nur das Binding? Damit kann ich es aber nicht mit den Klassen aus MD formatieren.

                              sigi234S 1 Antwort Letzte Antwort
                              0
                              • D der-eine

                                @sigi234 ohne Skript einfach nur das Binding? Damit kann ich es aber nicht mit den Klassen aus MD formatieren.

                                sigi234S Online
                                sigi234S Online
                                sigi234
                                Forum Testing Most Active
                                schrieb am zuletzt editiert von
                                #33

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

                                @sigi234 ohne Skript einfach nur das Binding? Damit kann ich es aber nicht mit den Klassen aus MD formatieren.

                                Ja, übersehen, willst ja mit MD.

                                Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                Immer Daten sichern!

                                D 1 Antwort Letzte Antwort
                                0
                                • sigi234S sigi234

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

                                  @sigi234 ohne Skript einfach nur das Binding? Damit kann ich es aber nicht mit den Klassen aus MD formatieren.

                                  Ja, übersehen, willst ja mit MD.

                                  D Offline
                                  D Offline
                                  der-eine
                                  schrieb am zuletzt editiert von
                                  #34

                                  @sigi234 ja genau hätte es gerne mit MD formatiert!

                                  sigi234S 1 Antwort Letzte Antwort
                                  0
                                  • D der-eine

                                    @sigi234 ja genau hätte es gerne mit MD formatiert!

                                    sigi234S Online
                                    sigi234S Online
                                    sigi234
                                    Forum Testing Most Active
                                    schrieb am zuletzt editiert von
                                    #35

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

                                    @sigi234 ja genau hätte es gerne mit MD formatiert!

                                    Hast du so einen DP?
                                    Screenshot (1781).png

                                    Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                    Immer Daten sichern!

                                    P 1 Antwort Letzte Antwort
                                    0
                                    • D Offline
                                      D Offline
                                      der-eine
                                      schrieb am zuletzt editiert von
                                      #36

                                      @sigi234 Nein, hab ich nicht. Muss ich selber einen anlegen? Stand nirgends dachte er wird durch das Skript im js.0 angelegt.

                                      sigi234S 1 Antwort Letzte Antwort
                                      0
                                      • D der-eine

                                        @sigi234 Nein, hab ich nicht. Muss ich selber einen anlegen? Stand nirgends dachte er wird durch das Skript im js.0 angelegt.

                                        sigi234S Online
                                        sigi234S Online
                                        sigi234
                                        Forum Testing Most Active
                                        schrieb am zuletzt editiert von
                                        #37

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

                                        @sigi234 Nein, hab ich nicht. Muss ich selber einen anlegen? Stand nirgends dachte er wird durch das Skript im js.0 angelegt.

                                        Ja, kann man auch. Ich habe halt 2 DP......

                                        Bitte benutzt das Voting rechts unten im Beitrag wenn er euch geholfen hat.
                                        Immer Daten sichern!

                                        D 1 Antwort Letzte Antwort
                                        0
                                        • sigi234S sigi234

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

                                          @sigi234 Nein, hab ich nicht. Muss ich selber einen anlegen? Stand nirgends dachte er wird durch das Skript im js.0 angelegt.

                                          Ja, kann man auch. Ich habe halt 2 DP......

                                          D Offline
                                          D Offline
                                          der-eine
                                          schrieb am zuletzt editiert von der-eine
                                          #38

                                          @sigi234 hast Du dann ein Skript, dass die Datenpunkte befüllt oder wie machst Du das?

                                          sigi234S 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

                                          632

                                          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