Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Visualisierung
    4. [Projekt] MDCSS v2: Material Design CSS Version 2

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    [Projekt] MDCSS v2: Material Design CSS Version 2

    This topic has been deleted. Only users with topic management privileges can see it.
    • sigi234
      sigi234 Forum Testing Most Active @der-eine last edited by

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

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

      Einfach das Widget MD Table nehmen und als ID den DP nehmen.

      1 Reply Last reply Reply Quote 0
      • D
        der-eine @Pittini last edited by

        @Pittini genau. Danke 👍

        1 Reply Last reply Reply Quote 0
        • sigi234
          sigi234 Forum Testing Most Active @Pittini last edited by

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

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

          Hast du so einen DP?

          Wieso sollte er den haben? Hier gehts nicht um den Adapter Leute, sondern ums CSS/Skript.

          Ach ja, die verwechsle ich immer wieder.

          1 Reply Last reply Reply Quote 0
          • Dominik F.
            Dominik F. @Pittini last edited by Dominik F.

            @Pittini
            Hast du in den Einstellungen der Widgets in der Contendcard auch alles umbenannt? Ich weiß nicht obs daran liegen kann, aber ich hab diese Einstellungen aus dem Demoprojekt übernommen gehabt und bei mir gehts
            Unbenannt.PNG

            @etv
            seltsam....ich habs genauso eingestellt und bei mir hats so funktioniert

            P 1 Reply Last reply Reply Quote 0
            • P
              Pittini Developer @Dominik F. last edited by

              @Dominik-F sagte in [Projekt] Material Design CSS v2:

              Hast du in den Einstellungen der Widgets in der Contendcard

              Mal abgesehen davon dass ich ja kein Problem mitm content habe, sondern mit lnav/rnav ist natürlich alles identisch benannt, so einfach isses leider nicht zu lösen. Ich mach sowas eh nicht "händisch", sondern immer mit suchen und ersetzen, da rutscht nix durch.

              Dominik F. 1 Reply Last reply Reply Quote 0
              • Dominik F.
                Dominik F. @Pittini last edited by Dominik F.

                @Pittini
                eine Idee hätte ich noch....auf dem Bild was du oben gezeigt hast steht xdui-config anstatt mdui-config

                hab gerade in der neuen Demo gesehen, dass es dort auch steht, dann wird es das nicht sein sorry

                P 1 Reply Last reply Reply Quote 0
                • D
                  der-eine @Pittini last edited by

                  @Pittini hast Du das am laufen und könntest mir erklären was ich dazu alles brauche?

                  1 Reply Last reply Reply Quote 0
                  • P
                    Pittini Developer @Dominik F. last edited by

                    @Dominik-F sagte in [Projekt] Material Design CSS v2:

                    eine Idee hätte ich noch....auf dem Bild was du oben gezeigt hast steht xdui-config anstatt mdui-config

                    Jap, isso, aber auch schon in der Demo. 2 Blöcke heißen xdui und einer mdui. Ich denke mal die zwei xdui Blöcke sind zum testen für @Uhula und werden entsprechend umbenannt je nach Bedarf.

                    1 Reply Last reply Reply Quote 0
                    • Uhula
                      Uhula @Dominik F. last edited by

                      @Dominik-F Das die "visibility" nicht funktioniert, liegt an der Zuweisung vom "mdui-center". Denn sowohl das Verstecken als auch das Zentrieren erfolgt über die display-Eigenschaft im CSS. Letzteres übersteuert das Verstecken. Wenn du "mdui-center" nicht brauchst, entferne es mal. Alternativ, kannst du aus der CSS Datei auch drei Zeilen löschen, dann geht es auch. Ich teste mal, ob ich die generell entfernen kann, denke schon.

                      /* zentrieren */
                      
                      .xmdui-center-v,
                      .mdui-center-v .vis-widget-body,
                      .mdui-center-v .vis-widget-body *  {
                        display:flex !important;
                        align-items: center;
                      }
                      .xmdui-center-h,
                      .mdui-center-h .vis-widget-body,
                      .mdui-center-h .vis-widget-body *  {
                        display:flex !important;
                        justify-content: center;
                      }
                      .xmdui-center,
                      .mdui-center .vis-widget-body,
                      .mdui-center .vis-widget-body * {
                        display:flex !important;
                        align-items: center;
                        justify-content: center;
                      }
                      

                      @der-eine Das mit dem share-Button ist mir schon klar. Ich weiß nur nicht, wie ich Grafana mitteile, dass ich eine Tendenz angezeigt haben möchte.

                      @foxriver76 Wenn du mdui-cols-4-toc-16 angibst UND zusätzlich eine width, dann wird versuch der width innerhalb der Grenzen von 4-16 (x80) zu entsprechen. Ist z.B. sinnvoll, wenn man genau zwei cards nebeneinander ahaben möchten und ihnen die width=50% zuweist. Generell sollte die width dann aber keine Zuweisung haben.
                      Da es bei den Angaben mdui-cols-N Angaben ohne bis-Angabe zu Verständnisproblemen kam, da diese +10% Größenänderung erlaubten, habe ich in der v2.1 diese 10% entfernt. Nun ist mdui-cols-4 = 320 Px = mdui-cols-4-toc-4

                      @Pittini Kannst du mir dein Projekt anonymisiert zukommen lassen, das macht es leichter. Mail-Addy bekommst du per PN/Chat. Die "Material Design Widgets" aus 2018 hast du nicht als Adapter installiert - die stören nämlich, da dort MD CSS v1.8 drin ist.
                      Der config-Dialog bekommt seinen Titel und das X dadurch, dass er als jqui-Dialog angezeigt wird.
                      NavButtons und Secondary Color: Theoretisch machbar, aber problematisch, wenn man z.B. die tnav im dark-Theme, den content aber im light-Theme hat.

                      @SMARTY-ML Automatische View-Wechsel werden nicht durch das MD CSS ausgelöst. Das muss andere Ursachen haben.

                      Dominik F. 1 Reply Last reply Reply Quote 0
                      • P
                        Pittini Developer last edited by Pittini

                        Ein Problem welches mal auftaucht, mal nicht, ist folgendes:

                        Inked2020-02-23 14_45_50-Window_LI.jpg

                        Seitenrefresh bringt keine Änderung. Irgendwann mach ich die Seite neu auf und es wird wieder angezeigt. Dann wieder mal nicht, ka was da bockt. Die Config Dialoge sind direkt aus der MD_Demo in ein MD_Simple kopiert (und angepasst). Den Effekt hab ich btw. bei beiden Projekten an denen ich grad arbeite.

                        1 Reply Last reply Reply Quote 0
                        • Dominik F.
                          Dominik F. @Uhula last edited by

                          @Uhula

                          Ja genau das wars. Da ich das mdui-center dort brauchte hab ich es nun anders gelöst, mit 2 Buttons übereinander und der Sichtbarkeit. Möchte ungern was in der CSS Datei löschen da ich dann mit dem nächsten Update von dir wieder das gleiche Problem haben könnte.

                          Uhula 1 Reply Last reply Reply Quote 0
                          • Uhula
                            Uhula @Dominik F. last edited by

                            @Dominik-F Ich habe das in der CSS geändert, hat offensichtlich keine Nebeneffekte und funktioniert mit deinem Widget.

                            1 Reply Last reply Reply Quote 0
                            • Uhula
                              Uhula last edited by

                              Kleines Update - in Bezug auf die Meldungen von @Dominik-F und @Pittini - danke.
                              -> GitHub

                              v2.1.1 23.02.2020

                              CSS

                              • mdui-center[-h|-v]: Benutzte die CSS "display: !important" Eigenschaft, was dazu führte, dass die vis-Visibility Funktion, die auch über "display" geht, nicht mehr funktionierte. "!important" entfernt.
                              • weitere CSS-Variablen für die Farben (abar, ...) eingeführt
                              • ui-dialog: Korrektur der Hintergrundfarbe

                              vis-Editor

                              script

                              • Umbau des Setzens der Farben auf die neuen CSS-Variablen. Damit entfällt das (unsichere) anhängen von CSS-Anweisungen, welches manchmal fehl schlug, wenn die CSS Reihenfolge durch timing-Probleme nicht wie erwartet war.

                              MD_Demo

                              L 1 Reply Last reply Reply Quote 0
                              • foxriver76
                                foxriver76 Developer last edited by

                                So perfekt, habe nun endlich meine produktive vis komplett umgezogen. Einziger offener Punkt ist noch die fehlende Farbanpassung im Filter mdui-timespan-XXX.

                                Vielen Dank für die gute Umsetzung.

                                1 Reply Last reply Reply Quote 0
                                • bilberry
                                  bilberry last edited by

                                  Hallo zusammen,

                                  bin mit meinem Umzug auf die MD-Version 2.x auch so gut wie fertig. Zwei Probleme konnte ich bislang nicht lösen:

                                  • Widget wird nicht ausgeblendet (offenbar das gleiche Problem wie bei @Dominik-F, welches ja inzwischen von @Uhula gelöst zu sein scheint - hab mir aber inzwischen anderes beholfen und probiere es demnächst noch mal aus)

                                  • wenn ich ein Card mit Flott-Diagramm „minimiert“ (mdui-expand mdui-onload) starte, wird nach dem späteren manuellen Expandieren durch den Nutzer das Diagramm nicht angezeigt. Erst wenn man einen willkürlichen Zeitraum durch Klick auf ein mdui-timespan-Element wählt, wird das Diagramm geladen.
                                    Wie könnte man das umgehen?

                                  1 Reply Last reply Reply Quote 0
                                  • S
                                    SMARTY.ML last edited by

                                    Hi,
                                    ich wollte meine Rollos mit den Input aus "pageDemoInput" füttern.
                                    Leider folgt nachfolgende Fehlermeldung:

                                    • (949) Datatype for SHSW-25#6870BC#1.Shutter.Position differs from expected, ignore state change! Please write correct datatype (number)

                                    Lässt sich das ohne ein lästiges Skript realisieren?

                                    Dominik F. 1 Reply Last reply Reply Quote 0
                                    • Dominik F.
                                      Dominik F. @SMARTY.ML last edited by

                                      @Uhula
                                      Ich nutze für meine Vis auch den MDW Adapter (Ja ich weiß, es kann zu Problemen führen) und habe bis auf ein Widget nun alles raus vom Adapter.
                                      Ich versuche nun das Widget nachzubauen nur daran scheitere ich. Ich hab es mit den Balken versucht, jedoch bin ich noch ganz weit vom Orginal entfernt. Vielleicht kannst du mir ja Tipps geben wie ich den Balken einstellen muss damit es dem Orginal sehr ähnelt.
                                      Im Widget wird die aktuelle Temperatur angezeigt und je nachdem wie Hoch die Temperatur ist ändert sich die Farbe und die Füllbreite. Wäre cool wenn man dort auch Outlined und Raised einstellen könnte beim Balken

                                      Hier das Orginal:
                                      Unbenannt.PNG

                                      Uhula 1 Reply Last reply Reply Quote 0
                                      • Uhula
                                        Uhula @Dominik F. last edited by

                                        @Dominik-F Schau dir mal im MD_Demo die Bargraphs an, die können ihren Hintergrund wertabhängig einfärben. Für den Wert selbst musst du noch ein basic-String drüberlegen.


                                        5250a204-d41a-4c7b-a305-ab14589d1dbb-image.png 319981d3-7b6c-4773-9aee-296b14bee285-image.png 9bad2c5f-237f-4fe5-a628-dde4fdd618d2-image.png

                                        @SMARTY-ML Das wird ohne serverseitiges Script nicht gehen, da das input-Element wohl immer einen String im vis liefert, auch wenn der type=number ist. ALso nen string-State anlegen und via Serverscript und on-Event als Number in den eigentlichen State schreiben. Sorry, da kann ich nichts machen.

                                        @foxriver76 Hast du den Auswahl-Widgets neben "mdui-timespan..." auch "mdui-menuitem" zugewiesen?

                                        @bilberry flot/onload muss ich mir mal ansehen, muss dazu aber erst wieder flot einrichten (habe ich schon komplett durch Grafana ersetzt).

                                        foxriver76 1 Reply Last reply Reply Quote 0
                                        • D
                                          der-eine last edited by

                                          @Uhula könntest Du das mit dem Basic-HTML, Script und iCal bitte nochmal erklären? Das wäre super! 👍

                                          1 Reply Last reply Reply Quote 0
                                          • foxriver76
                                            foxriver76 Developer @Uhula last edited by

                                            @Uhula Ne, war nur mdui-timespan-1440 mdui-target-w00019 mdui-hide habe es nun um mdui-menuitem mdui-center erweitert, dann passt es, danke.

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            908
                                            Online

                                            31.7k
                                            Users

                                            79.8k
                                            Topics

                                            1.3m
                                            Posts

                                            material css material ui vis
                                            74
                                            717
                                            136545
                                            Loading More Posts
                                            • Oldest to Newest
                                            • Newest to Oldest
                                            • Most Votes
                                            Reply
                                            • Reply as topic
                                            Log in to reply
                                            Community
                                            Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                                            The ioBroker Community 2014-2023
                                            logo