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.
    • Uhula
      Uhula @foxriver76 last edited by

      @foxriver76 In der page-View, dort im content-Widget hast du sicher "mdui-flex" gesetzt - damit werden die Breitenanpassungen (MM-toc-NN) aktiviert. Wenn auch die Höhen (MM-tor-NN) angepasst werden sollen, musst du im content-Widget zusätzlich "mdui-flex-stretch" setzen.

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

        @Uhula Hmm.. das ist gesetzt.

        Edit: Deja-vu .. height war vom kopieren auf der card gesetzt 🤦

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

          @Uhula bin schon den ganzen Nachmittag dran aber bekomme es einfach nicht hin...
          Ich hätte gerne einen türkisen Ring der animiert einen Farbverlauf anzeigt. Er soll
          die LED eines Alexa Smartspeakers imitieren. Hättest Du eine Idee wie ich das machen könnte?

          AlexaLed.mov

          Würde gut zur Alexatimer-View passen...
          Bildschirmfoto 2020-03-20 um 17.43.26.png

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

            @der-eine Wenn es ohne Verlauf geht, dann sollte dir dieses helfen. Einfach in die Projekt CSS kopieren, ein basic-html in die View einfügen und "mdui-loader" als CSS-Class zuweisen.

            .mdui-loader {
              border:8px solid;
              border-radius:50%;
              border-color:blue aqua aqua aqua;
              animation:mdui-loader-spin 2s linear infinite;
            }
              
            @keyframes mdui-loader-spin{
              100%{transform:rotate(360deg)}
            }
            


            loader.gif

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

              Neu:

              • [Vorlage] MDCSS v2: Homatic-Log in vis anzeigen

              Bisher:

              • [Vorlage] MDCSS v2: ioBroker Log in vis anzeigen
              • [Vorlage] MDCSS v2: ping-Adapter in vis anzeigen
              • [Vorlage] MDCSS v2: tr-064/devices-Adapter in vis anzeigen
              1 Reply Last reply Reply Quote 1
              • P
                Pittini Developer @Dominik F. last edited by

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

                ....besonders bei der Vis für Heizungssteuerung bräuchte ich Anregungen

                Falls noch nicht bekannt: Hier ein Vis für Heizungssteuerung mit "Unterbau" durch MD2 von @Uhula. Vorraussetzung Du verwendest den HeatingControl Adapter.

                Dominik F. 1 Reply Last reply Reply Quote 1
                • liv-in-sky
                  liv-in-sky last edited by

                  ich versuche gerade meinen vis-editor zu verschönern - hat das schon jmd gemacht und hätte eine vorlage ?

                  das sind meine ersten schritte mit diesen css einstellungen (respekt - tolle und vor allem viel arbeit ) und evtl könnt mir jmd sagen, ob ich die farben ändern kann

                  Image 2.png

                  roter pfeil -die schriftfarbe in schwarz
                  lila - das icon sichtbarer - evt. dunkelgrün
                  blau - den hintergrund leicht gräulich

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

                    @Pittini

                    War noch nicht bekannt 😄 Vielen Dank, werde das gleich mal einbauen 🙂

                    1 Reply Last reply Reply Quote 0
                    • Uhula
                      Uhula @liv-in-sky last edited by

                      @liv-in-sky Ja, habe ich vor 2 Jahren schon mal gemacht. Wenn du die global.css in deiner vis als CSS/global einspielst, sieht deine vis dann so aus:

                      987a8dd9-125a-4ee0-af53-57e47277939b-image.png

                      Kannst du als Basis für eigene Verschönerungen nehmen.

                      liv-in-sky 1 Reply Last reply Reply Quote 0
                      • liv-in-sky
                        liv-in-sky @Uhula last edited by

                        @Uhula danke - aber das habe ich schon hinbekommen - ich wollte aber die farben ändern , die in meinem bild oben mit den pfeilen gekennzeichnet sind - diese einstellungen finde ich nicht

                        Uhula 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 Wenn du nur ein Widget skalieren möchtest, dann geht das über die "transform" Eigenschaft des Widgets in dem du dort "scale(f)" eingibst. f ist der Faktor 1=100% 0.5=50% 2=200% usw. Alternativ kannst du auch "mdui-scale-nnn" Klassen zuweisen. Schau mal in die CSS, dort stehen die drin.

                          /* Skalierungen */
                          .mdui-scale-010 { transform: scale(0.1); transform-origin: 0% 0%; }
                          .mdui-scale-020 { transform: scale(0.2); transform-origin: 0% 0%; }
                          .mdui-scale-025 { transform: scale(0.25); transform-origin: 0% 0%; }
                          .mdui-scale-030 { transform: scale(0.30); transform-origin: 0% 0%; }
                          .mdui-scale-033 { transform: scale(0.33); transform-origin: 0% 0%; }
                          .mdui-scale-040 { transform: scale(0.40); transform-origin: 0% 0%; }
                          .mdui-scale-050 { transform: scale(0.5); transform-origin: 0% 0%; }
                          .mdui-scale-060 { transform: scale(0.6); transform-origin: 0% 0%; }
                          .mdui-scale-066 { transform: scale(0.66); transform-origin: 0% 0%; }
                          .mdui-scale-070 { transform: scale(0.7); transform-origin: 0% 0%; }
                          .mdui-scale-075 { transform: scale(0.75); transform-origin: 0% 0%; }
                          .mdui-scale-080 { transform: scale(0.8); transform-origin: 0% 0%; }
                          .mdui-scale-090 { transform: scale(0.9); transform-origin: 0% 0%; }
                          

                          Vielen Dank - aber in dem Fall, in dem ich einen Grundriss verwende geht es mir nicht darum - ein Widget zu skalieren - bzw. das Widget muss eigentlich gar nicht skaliert werden - aber die Position ist wichtig. - aber das soll gar nicht weiter das Thema sein.

                          Mein Problem ist nach wie vor - worum nur beim 1. Aufruf - also nur nach Start - beim Aufklappen des Menüs - der Bildschirminhalt verschwindet und

                          noch eine Frage, gibt es eigentlich auch ein Widget wie das jqui- Select value list mit der Option einer Mehrfachauswahl also multi-select - oder realisiert man das dann über Listen / Tabellen?

                          1 Reply Last reply Reply Quote 0
                          • Uhula
                            Uhula @liv-in-sky last edited by Uhula

                            @liv-in-sky
                            Rot:

                            #menu_body li a {
                              color:#000000 !important;
                            }
                            

                            Blau:

                            #pan_attr {
                                background: #f0f0f0;
                            }
                            

                            Lila:
                            Das ist komplexer, da die Icons als background-image aus einem Bitmap (-Array) geladen werden und es nur bestimmte Farben gibt.

                            #button_undo.ui-state-default .ui-icon {
                              background-image: url(/lib/css/themes/jquery-ui/custom-light/images/ui-icons_222222_256x240.png);
                            }
                            
                            liv-in-sky 1 Reply Last reply Reply Quote 0
                            • liv-in-sky
                              liv-in-sky @Uhula last edited by

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

                              #button_undo.ui-state-default .ui-icon { background-image: url(/lib/css/themes/jquery-ui/custom-light/images/ui-icons_222222_256x240.png); }

                              super - tausend dank

                              jetzt nur noch eines - den blauen pfeil - diesen hintergrund auch in grau - dann bin ich glücklich und nerve nicht mehr (hoffentlich)

                              die gelben pfeile sind deine settings - schaut für mich besser aus

                              Image 7.png

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

                                V2.3 21.03.2020

                                CSS

                                • Scrollbars: werden in webkit-Browser (Chrome, Edge, Fully, Safari) nun feiner und abgerundet dargestellt
                                • mdui-shape-X für Safari-Browser mit "-webkit-"-Präfix versehen - vielleicht hilft es
                                • neben der Symbol-Darstellung über <i class="material-icons">home</i> kann nun auch verkürzt <i class="mdui-icon">home</i> genutzt werden
                                • optionale Nutzung der MaterialDesignIcons (https://github.com/Templarian/MaterialDesign-Webfont). Siehe Anmerkungen zur Konfiguration am Anfang der CSS Datei. In der vis Nutzung in der Form: <i class="mdui-mdi">&#xF02DC ;</i>
                                • mdui-table-outlined: Zeichnen des outlined-Rahmens nun per border, nicht mehr box-shadow. Damit kann im table-HTML gezielt der linke Rahmen (<tr style="border-left-color:red;">) oder der ganze Rahmen (<tr style="border-color:red;">) eingefärbt werden
                                • mdui-table-list|raised|outlined: Die Anordnung wird nun via flex statt float durchgeführt inkl. Größenanpassung der blöcke. Dadurch ergibt sich eine harmonischere Darstellung

                                script

                                • mdui-page-name: Der Widgetinhalt wird nach jedem Seitenwechsel mit dem page-Viewnamen gefüllt, kann in basic-HTMLs zur Anzeige des page-Viewnamens genutzt werden
                                • mdui-page-title: Wie mdui-page-name, allerdings wird der Name noch aufbereitet. Kleinbuchstaben am Anfang werden ignoriert und '_' werden zu Leerzeichen gewandelt. "pageMeine_ioBroker_Vis" -> "Meine ioBroker Vis"

                                Github-Links im ersten Beitrag des Themas

                                mickym 1 Reply Last reply Reply Quote 0
                                • Uhula
                                  Uhula @liv-in-sky last edited by

                                  @liv-in-sky Blau:

                                  #menu_body [class*="ribbon_tab"] div {
                                      background: #fefefe !important;
                                  }
                                  
                                  1 Reply Last reply Reply Quote 1
                                  • psifactory
                                    psifactory last edited by

                                    Hi zusammen,

                                    erstmal Hallo von mir in die Runde!
                                    Ich kämpf hier jetzt schon ne ganze Weile. Ich würde gerne das Theme auf Dark umschalten. Im Editor ist der dunkle Hintergrund zu sehen. In der Webansicht nicht. Woran kann das liegen? Verändere ich was anderes ändert sich das 1zu1.

                                    Habe die auskommentierten Zeilen gelöscht. Da dran sollte es also nicht scheitern. Browser cache ist leer! Browser, Iobroker, Hirn neugestartet! Nichts tut sich..

                                    /* (3) Umschalten vis-Edit light/dark Theme */
                                    :root {
                                      /* Design-time light-Theme */
                                      --content-background: #f8f8f8;
                                      --design-font-color: #000000;
                                      --design-hint-background: #0000ff;
                                      --design-hint-color: #ffffff;
                                      --design-grid: #000000;
                                      --design-black33-background:rgba(0,0,0,.33);
                                    
                                      /* Design-time dark-Theme */
                                       
                                      --content-background: #404040;
                                      --design-font-color: #ffffff;
                                      --design-hint-background: #ff8000;
                                      --design-hint-color: #ffffff;
                                      --design-grid: #ffffff;
                                      --design-black33-background:rgba(255,255,255,.33);
                                    }
                                    

                                    Ich bin leider noch nicht lang beim IoBroker, daher steh ich hier jetzt echt aufm Schlauch. Wär super wenn ihr mir da helfen könntet.

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

                                      @psifactory Design- und Runtime haben Background-mäßig nichts miteinander zu tun. Zur Designzeit gelten die von dir genannten CSS-Zeilen. Zur Laufzeit hingegen stellst du die Farben im "mdui-config" Widget im abar-View ein. Schau mal in das MD_Demo Projekt. Du kannst im "mdui-config"-Widget auch direkt Farben in der Form # RRGGBB, Bsp: #121212, angeben.

                                      Grübel, ich muss mich endlich mal an die Doku setzen ...

                                      psifactory B 2 Replies Last reply Reply Quote 1
                                      • psifactory
                                        psifactory @Uhula last edited by psifactory

                                        @Uhula
                                        Danke für die schnelle Antwort. 🙂 So funktioniert das auch.
                                        Bleiben die Einstellungen im Widget dann erhalten? Vor allem wenns auf einem anderen Gerät angezeigt werden soll?
                                        Wozu die auskommentierung des "Dark-Themes"?
                                        EDIT: Ich habs begriffen.

                                        Wie bring ich Custom Styles dann ein? (CSS Animation o.ä., BG mit Bildern)
                                        Sorry bin da schon etwas eingerostet.

                                        EDIT: Bleibt nur noch die Frage offen wie ich dann bsp. Einfluss auf Schriften (Farbe, Font-Family, etc.) nehmen kann.

                                        1 Reply Last reply Reply Quote 0
                                        • 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:

                                            ü -> &uuml;
                                            

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

                                            Uhula 2 Replies Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            498
                                            Online

                                            31.8k
                                            Users

                                            80.0k
                                            Topics

                                            1.3m
                                            Posts

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