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

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    [Projekt] MDCSS v2: Material Design CSS Version 2

    This topic has been deleted. Only users with topic management privileges can see it.
    • D
      der-eine @Uhula last edited by

      @Uhula danke genau das hab ich gemeint! Wahnsinn was mit CSS alles möglich ist!

      1 Reply Last reply Reply Quote 0
      • T
        Tirador last edited by

        Ich habe jetzt mal auf den neuen Tag mdui-page-title umgestellt.
        Dabei habe ich noch ein Problem mit Sonderzeichen im HTML.

        Bsp. pageKüche wird in der HTML Anzeige zu:

        61b39f9e-41f0-4c9f-abc0-969a26337031-grafik.png

        Eine vorgabe des HTMLs:

        ü -> ü
        

        im Viewnamen war bei mir nicht möglich. VIS sagt dann der View existiert bereits.

        Uhula 2 Replies Last reply Reply Quote 0
        • B
          BoehserWolf @Uhula last edited by

          @Uhula Habe einige Anpassungen in der CSS gemacht, die möglicherweise auch für andere interessant sein könnten. Außerdem nervt mich das Mergen bei neuen Versionen 🙂

          693fafa5-2c8c-48cd-8c8b-4f55d2082511-grafik.png

          • Eigene States, die anders "abgerundete" Ecken haben nach meinem persönlichen empfinden gestaltet. Außerdem arbeite ich (bis jetzt noch nicht mit den Fonts für Bilder) sondern mit PNGs. Die kann man übernehmen, muss man aber nicht (mdui-state-bow)
          • "outline" von States per border um das outline nachzuempfinden (mdui-state-bow2 ink. aller mdui-state-bow2.mdui-<color>-ol)
          • Zuordnung meiner States:
            f3103238-d0c5-4f22-9418-834becef91ae-grafik.png

          Falls du etwas davon übernehmen würdest (insbesondere die ol für die States) würde mich das freuen.
          Meine angepasste CSS: project_v2-3-bow.css

          T 1 Reply Last reply Reply Quote 0
          • Uhula
            Uhula @Tirador last edited by

            @Tirador Umlaute in Namen vermeide ich (Jahrzehnte lange Prog-Erfahrung), meine Küche heißt Kueche 😉 Insofern habe ich es nicht getestet. Lässt sich aber im Script sicher leicht einbauen bei der Übernahme des page-Namens in das HTML-Element. Merke ich mir mal.

            1 Reply Last reply Reply Quote 0
            • T
              Tirador @BoehserWolf last edited by

              @BoehserWolf Deine Übersicht ist klasse und genau das was ich auch noch bauen wollte. Kannst Du deine Arbeit zur Verfügung stellen. Den Look finde ich auch super und finde deinen Vorschlag toll, wenn dies in das CSS zurückfliessen würde.

              B 1 Reply Last reply Reply Quote 0
              • B
                BoehserWolf @Tirador last edited by

                @Tirador Habe meinen Export im Thread https://forum.iobroker.net/topic/31335/material-design-css-mdcss-v2-vis-views-zur-inspiration/38 gepostet.

                1 Reply Last reply Reply Quote 0
                • R
                  ratte-rizzo @Dominik F. last edited by

                  @Dominik-F
                  Es tut mir leid, ich bin zu blöd. Ich bekomme das dark theme nicht hin. Auch nicht mit Deinem Quelltext. Muss ich noch etwas an einer anderen stelle ändern? Im Editor ist es brav dunkel, aber nicht in Echt.

                  Hat noch jemand eine Idee?

                  Dank & Gruß
                  Daniel

                  Dominik F. psifactory 2 Replies Last reply Reply Quote 0
                  • Dominik F.
                    Dominik F. @ratte-rizzo last edited by Dominik F.

                    @ratte-rizzo

                    Du musst auf jeden Fall links oben ins Menü und dann den Punkt Einstellungen anklicken. Dort kannst du die Farben einstellen. Hier ein Beispiel meiner Einstellungen dort:
                    Unbenannt.PNG

                    1 Reply Last reply Reply Quote 0
                    • psifactory
                      psifactory @ratte-rizzo last edited by

                      @ratte-rizzo Genau an der Front habe ich gestern auch bis zur Verzweiflung gekämpft 🙂
                      @Uhula solltest du eventuell mal für diejenigen die das Prinzip noch nicht verstanden haben in den Post#1 aufnehmen.
                      Kurze Frage noch: Custom CSS packe ganz unten ins Stylesheet? Bis jetzt hat das eigentlich ganz gut geklappt.

                      R 1 Reply Last reply Reply Quote 0
                      • R
                        ratte-rizzo @psifactory last edited by

                        @psifactory und @Uhula
                        Okay, jetzt hab ich es. Der Hinweis mit dem Menü zur Einstellung war der Trick.

                        Außerdem: Diese Einstellungen gibts im MD_Simple Beispiel nicht!!! Da ich das einfache Beispiel verwendet hab, konnte ich natürlich lange suchen...

                        Uhula 1 Reply Last reply Reply Quote 0
                        • mickym
                          mickym Most Active @Uhula last edited by mickym

                          @Uhula
                          Ich hoffe, ich nerve hier nicht wegen den IOS - Geräten und ich weiß ja, dass Du keine Apple Geräte zuhause hast - aber vielleicht möchte der eine oder andere ja Deine tolle Arbeit auch auf diesen Geräten anzeigen und ich denke mal, dass Du mit der letzten Modifikation auf der richtigen Spur bist, aber es gibt noch einiges anderes was auf den IOS-Geräten nicht korrekt angezeigt wird. Das mit den Shapes hat auf jedenfall geklappt, aber wahrscheinlich muss in dieser Richtung noch mehr verändert werden.
                          Grundsätzlich werden manche Dinge - immer noch nur in rechteckiger Form angezeigt. I

                          Die Details verpacke ich hier mal - damit das Posting nicht so lang wird. 😉

                          Ich bin mir zwar immer noch nicht sicher, dass das alles mit dem Safari zu tun hat, da es sich mit dem Google Browser auf dem iPad identisch - aber eben unterschiedlich zum Windows Rechner verhält (dort wird alles korrekt angezeigt) - vielleicht nutzt aber auch der Google Browser auf dem iPad die gleiche Maschine unten drunter.

                          Erst mal der Test des Demo Projektes:

                          1. Die Shapes werden nun tatsächlich korrekt angezeigt. 🙂
                          2. Bei den Flows wird weiterhin ein rechteckiger Rahmen um den Flow angezeigt.
                          3. Ebenfalls bei den Bars - die spitz zulaufen
                          4. Bei den Glow- Pulse Effekten sind die auch alle rechteckig und passen sich nicht der Form des Widgets an.

                          Da Bilder mehr als 1000 Worte sagen - hier mal ein paar Screenshots.

                          Erst mal die Verbesserung von 2.2 ==> 2.3

                          V2.2 iPad.png ==> v 2.3
                          V2.3 iPad.png

                          Referenz Bars Windows PC

                          Referenz Bars.png

                          so schaut es auf dem iPad aus:

                          Bars iPad.PNG

                          Generell scheinen auch die Effekte rechteckig zu sein

                          Effekte rechteckig.png

                          Ich hoffe - ich kann mit den Rückmeldung etwas helfen.

                          Gruß Mic 🙂

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

                            @Uhula
                            Kurz noch eine Frage: kann man die CSS Variablen an dieser Stelle dazu missbrauchen und ein Hintergrundbild zu übergeben?

                            "primary_color":"",
                            
                            Uhula 1 Reply Last reply Reply Quote 0
                            • C
                              chhe last edited by

                              @Uhula

                              Ich habe mir die MD_Demo mal heruntergeladen und importiert. Ich habe nämlich aktuell, dass ich die Cards nicht zusammenklappen kann. Dies funktioniert weder in der MD_Demo noch in der von Dominik F. bereitgestellten Vis

                              Kannst du mir weiterhelfen?

                              Uhula 1 Reply Last reply Reply Quote 0
                              • Uhula
                                Uhula @ratte-rizzo last edited by

                                @ratte-rizzo Im MD_Simple habe ich auf die komplexere Konfiguration verzichtet und stattdessen die Farben direkt im abar-View im mdui-config-Widget eingetragen. Aber es stimmt, die Doku muss angepasst werden.

                                1 Reply Last reply Reply Quote 1
                                • Uhula
                                  Uhula @mickym last edited by

                                  @mickym danke dir. Safari kann ohne -webkit- mit den clip-path Angaben nicht umgehen, ich habe alle für die Baranzeige ergänzt. Mit dem Blinken/Flash/Pulse kann ich so nichts anfangen, ich sehe nur, dass der box-shadow leicht anders dargestellt wird.

                                  mickym 1 Reply Last reply Reply Quote 0
                                  • Uhula
                                    Uhula @psifactory last edited by

                                    @psifactory Nein, leider nicht. Aber das Bild kannst du z.B. in jedem contXXXX View einfügen, zb mit dem basic-image Widget. Dem gibst du einen z-index von 1 und die CSS class "mdui-noflex", alle cardXXX die du auch einfügst erhalten einen z-index = 2.
                                    Im MD-Demo für contStart angewendet:
                                    715495f6-9c22-4a38-a048-c02fdeb924f0-image.png

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

                                      @chhe Wenn du den 2 Jahre alten "Material Design Widget Adapter" installiert hast, der stört, da dort die MDCSS v1.8 enthalten sind. Auch kann es sein, dass der Material Design Adapter von Scrounger stört (habe ich aber noch nicht selbst ausprobiert, nur an anderer Stelle einen Hinweis gelesen).

                                      C 1 Reply Last reply Reply Quote 0
                                      • mickym
                                        mickym Most Active @Uhula last edited by

                                        @Uhula said in [Projekt] MDCSS v2: Material Design CSS Version 2:

                                        @mickym danke dir. Safari kann ohne -webkit- mit den clip-path Angaben nicht umgehen, ich habe alle für die Baranzeige ergänzt. Mit dem Blinken/Flash/Pulse kann ich so nichts anfangen, ich sehe nur, dass der box-shadow leicht anders dargestellt wird.

                                        Nun es ist eigentlich genauso - dass hier bei den Effekten Rechtecke angezeigt werden.

                                        Ich habe hier alles kleine runde Buttons erstellt und zeige die nun mit dem "glow" Effekt an.

                                        Normal schaut das so aus:
                                        Effekte normal (PC).png

                                        auf dem iPad so:

                                        icons mit Effekt(ipad).png

                                        Für mich ist das das gleiche Problem - dass hier nicht der Form gefolgt wird. Ist kein Effekt aktiv - wird das normal angezeigt (s. unteres Bild ganz rechts)

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

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

                                          Ich habe jetzt mal auf den neuen Tag mdui-page-title umgestellt.
                                          Dabei habe ich noch ein Problem mit Sonderzeichen im HTML.

                                          Ab MDCSS v2.4 geändert: mdui-page-name und mdui-page-title verarbeiten nun auch Umlaute korrekt

                                          1 Reply Last reply Reply Quote 1
                                          • Uhula
                                            Uhula @mickym last edited by

                                            @mickym Da musst du mir helfen, dass kann ich hier nicht nachstellen. Für das rote Blinken ergänze mal in der Projekt-CSS am Ende die CSS aus (a) oder (b) oder (c) :

                                            .mdui-red-blink   {
                                              animation: mdui-red-blink-ani 1s linear infinite;
                                              -webkit-animation: mdui-red-blink-ani 1s linear infinite;
                                            }
                                            @keyframes mdui-red-blink-ani  {
                                              0%,50% {filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); }
                                              51% {filter: none;}
                                            }
                                            


                                            .mdui-red-blink   {
                                              animation: mdui-red-blink-ani 1s linear infinite;
                                            }
                                            @keyframes mdui-red-blink-ani  {
                                              0%,50% {filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); 
                                                    -webkit-filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); }
                                              51% {filter: none;
                                                    -webkit-filter: none;}
                                            }
                                            


                                            .mdui-red-blink   {
                                              animation: mdui-red-blink-ani 1s linear infinite;
                                              -webkit-animation: mdui-red-blink-ani 1s linear infinite;
                                            }
                                            @keyframes mdui-red-blink-ani  {
                                              0%,50% {filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); 
                                                      -webkit-filter: drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336) drop-shadow(0px 0px 4px #F44336); }
                                              51% {filter: none;
                                                   -webkit-filter: none;}
                                            
                                            }
                                            


                                            Was funktioniert?

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            836
                                            Online

                                            31.8k
                                            Users

                                            80.0k
                                            Topics

                                            1.3m
                                            Posts

                                            material css material ui vis
                                            74
                                            717
                                            141752
                                            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