[Projekt] MDCSS v2: Material Design CSS Version 2

[lesiflo]

@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.]

@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}

[lesiflo]

@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.]

@lesiflo

Versuche mal content color auf #000000

[lesiflo]

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

[FrenkyIO]

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

[Uhula]

@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); });

[ak1]

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]

@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>

[FrenkyIO]

@Uhula Klasse! Vielen Dank

[ak1]

@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>

[klausiob]

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

[ak1]

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

Material Icons Guide

Besten Dank!

[klausiob]

@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]

@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.

[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:

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]

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

Ist das evt. ein Grund?

Antwort hier im tr064 Thema.

[Saschag]

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"}]

[klausiob]

@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).

[Uhula]

@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.