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

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

                        Hat jemand auch so ein Effekt mal gehabt?

                        Nein, den Effekt kenne ich nicht. Das kann ich auch mit dem MDCSS nicht erklären, da es ja auf das Setzen der States keinen EInfluss nimmt, sondern nur auf die Darstellung. Hast du die States vielleicht mit "write=false" angelegt? Oder direkt unterhalb eines Adapters und nicht in 0_userdata? Ansonsten habe ich keine weitere Idee.

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

                          @Uhula Nee, glaube auch nicht, dass es an MDCSS liegt. Datenpunkt liegt unter javascript.0.Eigene_Datenpunkte usw. ist schreibbar. Gestern abend hat es mal kurz funktioniert, dann mal wieder nicht, heute früh wieder. Vielleicht hatte ich zu viele Browserfenster auf?

                          Naja, mal beobachten. Habe noch ein anderes Problem:
                          Dein Skript MduiLogTR064Devices wirft bei mir ständig errors:

                          2020-05-25 00:00:11.843  - warn: javascript.0 (1017) getState "tr-064.0.devices.HTTP-ServerIPCam.lastIP" not found (3)
                          2020-05-25 00:00:11.844  - warn: javascript.0 (1017)     at MduiLogTR064.updateHTML (script.js.common.MduiLogTR064Devices:306:20)
                          2020-05-25 00:00:11.845  - warn: javascript.0 (1017)     at MduiLogTR064.onChangeReachable (script.js.common.MduiLogTR064Devices:295:14)
                          2020-05-25 00:00:11.845  - warn: javascript.0 (1017)     at Object.subscribe.obj (script.js.common.MduiLogTR064Devices:264:117)
                          2020-05-25 00:00:11.845  - warn: javascript.0 (1017)     at Object.callback (/opt/iobroker/node_modules/iobroker.javascript/lib/sandbox.js:1052:38)
                          2020-05-25 00:00:11.845  - warn: javascript.0 (1017)     at Object.stateChange (/opt/iobroker/node_modules/iobroker.javascript/main.js:451:25)
                          2020-05-25 00:00:11.845  - warn: javascript.0 (1017)     at Immediate.setImmediate (/opt/iobroker/node_modules/iobroker.js-controller/lib/adapter.js:4851:37)
                          2020-05-25 00:00:11.845  - warn: javascript.0 (1017)     at runCallback (timers.js:705:18)
                          2020-05-25 00:00:11.845  - warn: javascript.0 (1017)     at tryOnImmediate (timers.js:676:5)
                          2020-05-25 00:00:11.846  - warn: javascript.0 (1017)     at processImmediate (timers.js:658:5)
                          2020-05-25 00:00:11.846  - error: javascript.0 (1017) script.js.common.MduiLogTR064Devices: [mduiLogTR064Devices] updateHTML: Cannot read property 'split' of null
                          

                          Mehrere Devices, die nicht mehr im Netz hängen.
                          Irgendwas falsch konfiguriert?
                          Im Skript habe ich einen roten Marker rechts:
                          ![MduiLogTR06vDev.js](1eb106ba-0029-471b-8fc4-04820b436a0e-grafik.png Bild Link)

                          Ist das evt. ein Grund?

                          Und noch eine Frage. Kann man auch den Gerätenamen (Bezeichnungen) aus der Liste bei der Instanz anzeigen?
                          VG klausiob

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

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

                            Ist das evt. ein Grund?

                            Antwort hier im tr064 Thema.

                            1 Reply Last reply Reply Quote 0
                            • S
                              Saschag last edited by

                              Hallo zusammen,

                              kann mir jemand helfen wie ich beim mdui-input einen transparenten Hintergrund hinbekommen

                              [{"tpl":"tplJquiInputDatetime","data":{"oid":"javascript.0.Timer.Template.TimerTimestamp","g_fixed":true,"g_visibility":true,"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":"time","visibility-groups-action":"hide","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,"size":"5","timeOnly":true,"hideSeconds":false,"visibility-oid":"javascript.0.Timer.Template.TimerChoice","views":null,"class":"mdui-input","showGrid":false},"style":{"left":"364px","top":"91px","width":"72px","height":"22px","z-index":9},"widgetSet":"jqui"}]
                              

                              Bildschirmfoto 2020-05-27 um 20.20.55.png

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

                                @Uhula
                                Ich würde mein neues VIS mit MDCSS gerne gleichzeitig auf meinem S5 (360x640px) und auf Galaxy Tab S (1280x800px) und am PC verwenden. Im großen und ganzen passt alles bezüglich responsiv, aber kurz vor dem Umklappen der rechten Cards nach unten rutscht der Content über den Rand. Gibt es da eine Möglichkeit das zu verhindern. Fehlt da irgend ein padding-right? Oder wie kann man schon beim Design verhindern, dass der Content breiter wird als die kleinste Breite (min-width)(hier col-4).

                                Überlappung.JPG

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

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

                                  Oder wie kann man schon beim Design verhindern, dass der Content breiter wird als die kleinste Breite (min-width)(hier col-4).

                                  Jede col ist 80 Pixel breit, wenn du verhindern möchtest, dass dein Content über die 4 cols hinaus geht, musst du beim Design darauf achten nicht mehr als 320px zu nutzen -evtl. noch abzüglich von 2x16px Rand - je nach genutzten Card-Aussehen. Also max. 288px nutzen (mache ich auch so, damit es auf älteren Smartphones noch passt). Wobei die meisten heute mindestens eine 360er Breite haben und ich dann mdui-cols-4-toc-5 einstelle, damit zumindest optisch die volle Breite genutzt wird.

                                  Wenn man im Design das grid unter Tools einstellt, kann man es recht gut kontrollieren, da das MDCSS dann ein 80er Raster anzeigt.
                                  7749bb88-9d74-47ea-9444-92ad7a7c456c-image.png

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

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

                                    kann mir jemand helfen wie ich beim mdui-input einen transparenten Hintergrund hinbekommen

                                    Der ist eigentlich immer vorhanden - es sei denn, du hast einmal dem View selbst ein Thema zugeordnet, dann ist diese Einstellung stärker - und ich weiß auch nicht, wie du das rückgängig machen kannst ohne einen neuen View anzulegen und deine Widgets dort alle hinein zu kopieren.

                                    de75153a-fcd4-4f6b-990a-eb512948ca14-image.png

                                    Alternativ kannst du in der CSS Datei dir die Definition für mdui-input suchen und bei der background Angabe noch ein !important dahinter setzen. Ich würde aber eine saubere View nehmen, da die View Thema-Wahl evtl. noch andere Auswirkungen haben kann.

                                    .mdui-input input:not([type="button"]) {
                                    ...
                                      background: rgba(0,0,0,.03) !important;
                                    ...
                                    }
                                    
                                    S 1 Reply Last reply Reply Quote 0
                                    • Bostil
                                      Bostil last edited by

                                      Gerne würde ich ein Widget (von Scrounger) von rechts nach links "sanft" einblendend animieren lassen. War mit meiner Suche (auch hier) bisher erfolglos, hat jemand dennoch eine Idee, ob dies mit CSS klappt? Danke! 🙂

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

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

                                        hat jemand dennoch eine Idee, ob dies mit CSS klappt?

                                        Grundsätzlich kann man CSS-Properties einer CSS-Klasse animieren, auch left/right/width/height Werte. Was dann wohl dem entspricht, was du erreichen möchtest. Da ich aber die CSS-Klassen der MD-Widgets nicht kenne, kann ich dir leider nicht konkreter antworten. Wenn du dich diesbezüglich in die CSS-Materie einlesen möchtest, such mal nach css animation und css keyframes.

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

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

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

                                          kann mir jemand helfen wie ich beim mdui-input einen transparenten Hintergrund hinbekommen

                                          Der ist eigentlich immer vorhanden - es sei denn, du hast einmal dem View selbst ein Thema zugeordnet, dann ist diese Einstellung stärker - und ich weiß auch nicht, wie du das rückgängig machen kannst ohne einen neuen View anzulegen und deine Widgets dort alle hinein zu kopieren.

                                          de75153a-fcd4-4f6b-990a-eb512948ca14-image.png

                                          Alternativ kannst du in der CSS Datei dir die Definition für mdui-input suchen und bei der background Angabe noch ein !important dahinter setzen. Ich würde aber eine saubere View nehmen, da die View Thema-Wahl evtl. noch andere Auswirkungen haben kann.

                                          .mdui-input input:not([type="button"]) {
                                          ...
                                            background: rgba(0,0,0,.03) !important;
                                          ...
                                          }
                                          

                                          @Uhula
                                          Bin endlich dazu gekommen 😏
                                          Dank dir! Ein neuer View hat geholfen 👍

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

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

                                            @darkiop

                                            ja, mit mdui-expand mdui-onload

                                            @Uhula Aktuell werden nur die cards zusammengeklappt welche auf der View liegen die beim Laden aktiv war. Besteht die Möglichkeit, grundsätzlich alle Cards zusammenzuklappen?

                                            Ergänzung: Bei mir funktioniert das nicht wie von dir gedacht, da ich die Seiten in einem View8 Widget lade, d.h. onload() wird da nur einmal beim erstmaligen laden der Seite aufgerufen.

                                            Hat trotzdem jemand eine Idee wie ich den Cards mitgeben könnte?

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

                                            Support us

                                            ioBroker
                                            Community Adapters
                                            Donate

                                            952
                                            Online

                                            31.8k
                                            Users

                                            80.0k
                                            Topics

                                            1.3m
                                            Posts

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