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.
    • L
      lesiflo Most Active @Uhula last edited by

      @Uhula
      Hi,
      wie verändere ich die Hintergrundfarbe bei einem Dialogfenster? Ich stelle gerade von der Version 1 auf 2 um und benutze das "Dark Design". Die Dialogfenster sind aber immer alle mit hellem Hintergrund.
      Dialog.JPG

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

        @Uhula

        Damit bekomme ich es irgendwie nicht hin bzw weiß ich nicht wie^^

        Andere Frage.
        Kann ich mit folgendem auch mehreren Datenpunkte mit einbinden die z.B. true sein sollen`?

        {val:javascript.0.Timer.1.Aktiv;val==true||val=="true"?'mdui-green-glow':''}
        
        1 Reply Last reply Reply Quote 0
        • Uhula
          Uhula @lesiflo last edited by

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

          Dialogfenster sind aber immer alle mit hellem Hintergrund

          Ich vermute, dass du das dark-Theme zur Designzeit verwendest, aber zur Laufzeit nicht im mdui-config (im abar-View) den Wert von content-color auch auf dunkel gesetzt hast (zB #121212). Denn die Dialoge erben zur Laufzeit den dark-Theme daraus.

          L 1 Reply Last reply Reply Quote 0
          • A
            ak1 last edited by

            Ich möchte ein Widget mit mdui-state benutzen, und darin in Abhängigkeit eines Datenpunkts zwei alternative Icons anzuzeigen. Allerdings ist der Datenpunkt keine boolsche Variable sondern eine ganze Zahl. Ich möchte ein Icon anzeigen, wenn der Datenpunkt den Wert 0 hat und ein anderes Icon bei einem Wert <>0. Der Datenpunkt beinhaltet die Anzahl der angeschalteten Lampen oder in einem anderen Fall die Anzahl der offenen Fenster.
            Was für ein Widget ist hier geeignet?

            Danke!

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

              OK, aber wie und wo kann ich das anpassen?

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

                @lesiflo

                Entweder im Menü unter Einstellungen, wenn du das aus der Demo übernommen hast, oder in der abar mit eingeben

                L 1 Reply Last reply Reply Quote 0
                • L
                  lesiflo Most Active @Dominik F. last edited by

                  @Dominik-F: Hi, das ist wohl mein Problem. Ich versuche gerade mein altes v1 Projekt auf v2 umzustellen, habe aber keine abar benutzt. Hatte ich aus Platzgründen rausgeschmissen. Gibt es noch einen anderen Weg?

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

                    @lesiflo

                    Erstelle am Besten eine View und nenn sie abar. Darin kopierst du folgende Widgets:

                    [{"tpl":"tplHtml","data":{"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,"g_last_change":false,"refreshInterval":"0","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,"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,"html":"\"primary_color\":\"#000000\",\n\"abar_color\":\"#121212\",\n\"tnav_color\":\"#000000\",\n\"bnav_color\":\"#000000\",\n\"lnav_color\":\"#000000\",\n\"rnav_color\":\"#000000\",\n\"secondary_color\":\"amber\",\n\"content_color\":\"#121212\",\n\"lnav_fixed_width\":\"{demo_lnav_fixed_width}\",\n\"lnav_fixed_open\":\"true\"\n","class":"mdui-label xdui-config","visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide"},"style":{"left":"80px","top":"336px","width":"542px","height":""},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"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,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","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,"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,"html":"\"primary_color\":\"{demo_primary_color}\",\n\"abar_color\":\"{demo_abar_color}\",\n\"tnav_color\":\"{demo_tnav_color}\",\n\"bnav_color\":\"{demo_bnav_color}\",\n\"lnav_color\":\"{demo_lnav_color}\",\n\"rnav_color\":\"{demo_lnav_color}\",\n\"secondary_color\":\"{demo_secondary_color}\",\n\"content_color\":\"{demo_content_color}\",\n\"lnav_fixed_width\":\"{demo_lnav_fixed_width}\",\n\"lnav_fixed_open\":\"true\"\n","class":"mdui-label mdui-config"},"style":{"left":"80px","top":"192px","width":"542px","height":""},"widgetSet":"basic"},{"tpl":"tplHtml","data":{"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,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","refreshInterval":"0","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,"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,"html":"\"primary_color\":\"\",\n\"abar_color\":\"\",\n\"tnav_color\":\"\",\n\"lnav_color\":\"\",\n\"rnav_color\":\"\",\n\"secondary_color\":\"\",\n\"content_color\":\"\",\n\"lnav_fixed_width\":\"{demo_lnav_fixed_width}\",\n\"lnav_fixed_open\":\"true\"\n","class":"mdui-label xdui-config"},"style":{"left":"80px","top":"80px","width":"542px","height":"","opacity":""},"widgetSet":"basic"}]
                    

                    Wenn das alleine noch nicht reicht(sollte es eigentlich), packst du in der contview in der css-klasse z.B. folgendes:

                    {demo_card} {demo_card_title}
                    
                    L 1 Reply Last reply Reply Quote 0
                    • L
                      lesiflo Most Active @Dominik F. last edited by

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

                      Hi, danke das hat geklappt. Welchen Wert muss ich jetzt verändern um den Hintergrund noch etwas dunkler zu bekommen?

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

                        @lesiflo

                        Versuche mal content color auf #000000

                        L 1 Reply Last reply Reply Quote 0
                        • L
                          lesiflo Most Active @Dominik F. last edited by

                          @Dominik-F: Ist dunkler geworden, allerdings noch nicht so wie unter v1. Geht jetzt aber erstmal so.

                          1 Reply Last reply Reply Quote 0
                          • F
                            FrenkyIO last edited by

                            @Uhula
                            Ist es möglich mit mdui-click?action:setValue(stateid,value) auch gleichzeitig eine Popup showMessage(message, title) zu erzeugen?

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

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

                              @Uhula
                              Ist es möglich mit mdui-click?action:setValue(stateid,value) auch gleichzeitig eine Popup showMessage(message, title) zu erzeugen?

                              Im Moment (noch) nicht, da man die Actions nicht verketten kann. Ich muss mal sehen, ob man das leicht integrieren könnte.

                              ... grübel ... grübel ...

                              mdui-click?action:setValue(demo_1,Zu+setzender+Wert)|showMessage(Wert+wurde+gesetzt!,Geklickt!)
                              

                              Ja, geht, ab v2.51 (dauert noch etwas bis ich die online stellen kann). Wenn du es vorher haben möchtest, musst du im Script in der function _click() ein paar Zeilen ändern:

                              Aus

                              if (opt.action) 
                                   _executeAction(opt.action);
                              

                              wird

                                  if (opt.action) 
                                      opt.action.split('|').forEach((action,ix,arr)=>{ _executeAction(action); });
                              
                              F 1 Reply Last reply Reply Quote 0
                              • A
                                ak1 last edited by

                                Wie kann ich eigentlich die Größe eines (in diesem Projekt vorgesehenen) Material Icons ändern?

                                Ich habe für meinen HEOS Player ein "jqui - ctrl Icon State" Widget. CSS Klasse mdui-button.
                                Text ist

                                <i class="material-icons">play_arrow</i>
                                

                                Der Button selbst hat eine Größe von 48x48px. Allerdings ist mir das Icon selbst zu klein. Änderungen unter CSS Font & Text/font-size hatten keinerlei Effekt.

                                Kann mir jemand einen Tipp geben?

                                Danke und Gruß

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

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

                                  Kann mir jemand einen Tipp geben?

                                  Die Icons werden praktisch als Font behandelt, so dass sich fontsize und color auswirken sollten. Über das Widget geht es nicht, da die material-icons Anweisung das zurücksetzt. Versuch es mal direkt in der <i> Anweisung:

                                  <i class="material-icons" style="fontsize:2em;">play_arrow</i>
                                  
                                  A 1 Reply Last reply Reply Quote 0
                                  • F
                                    FrenkyIO @Uhula last edited by

                                    @Uhula Klasse! Vielen Dank 🙂

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

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

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

                                      Kann mir jemand einen Tipp geben?

                                      Die Icons werden praktisch als Font behandelt, so dass sich fontsize und color auswirken sollten. Über das Widget geht es nicht, da die material-icons Anweisung das zurücksetzt. Versuch es mal direkt in der <i> Anweisung:

                                      <i class="material-icons" style="fontsize:2em;">play_arrow</i>
                                      

                                      Danke! Das war es. Allerdings eine kleine Korrektur: Der Bindestrich gehört in "font-size" hinein.

                                      <i class="material-icons" style="font-size:2em;">play_arrow</i>
                                      
                                      K 1 Reply Last reply Reply Quote 0
                                      • K
                                        klausiob @ak1 last edited by

                                        @ak1 Hier auch noch einige Tipps fürs Stylen: Material Icons Guide, z.B. Farbe

                                        A 1 Reply Last reply Reply Quote 0
                                        • A
                                          ak1 @klausiob last edited by

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

                                          Material Icons Guide

                                          Besten Dank!

                                          1 Reply Last reply Reply Quote 0
                                          • K
                                            klausiob last edited by

                                            @Uhula ist hier vielleicht offtopic, aber ich stelle gerade alles auf MDCSS v2 um. Vorher alles auf einen Raspi4 geschoben. Habe jetzt ein Problem im V1 und V2, dass jqui-Radiobutton-Valuelist, auch jqui-Select-Valuelist keine Werte in einen selbstdefinierten Datenpunkt schreibt. Auf dem Raspi3 hat das noch funktioniert. Das merkwürdige ist, das wenn ich den Wert in den Datenpunkt schreibe, zeigt das Widget den an. Im Datenpunkt steht immer die gleiche Zahl. Hat jemand auch so ein Effekt mal gehabt?

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            770
                                            Online

                                            31.8k
                                            Users

                                            80.0k
                                            Topics

                                            1.3m
                                            Posts

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