[Projekt] MDCSS v2: Material Design CSS Version 2

[Xsev]

@Uhula Vielleicht kannst du mir da helfen? Gibt es vielleicht die Möglichkeit, eine Klasse (bsp. mdui-color-glow) einem Status zuzuordnen bei einfachen Bulb on/off Widgets? Damit sich die Farbe dem aktuellen Schaltzustand anpasst. Wie in deienm Beispiel mit der Werteliste für Stati.

Aktuell nutze ich 2 Widgets übereinander über sichtbarkeit geschalten, das ist aber bei vielen Buttons relativ unpraktisch und mir kommt es auch so vor als zieht es mir ziemlich die Performance runter, da ich quasi alles doppelt habe.

[Pittini]

@Xsev sagte in [Projekt] Material Design CSS v2:

Gibt es vielleicht die Möglichkeit, eine Klasse (bsp. mdui-color-glow) einem Status zuzuordnen bei einfachen Bulb on/off Widgets?

Ja, das geht. Setzt mal bei Generell/CSS Klasse sowas rein:

{val:javascript.0.FensterUeberwachung.AlleFensterZu;val=="true"? "mdui-green-glow":  "mdui-red-glow"}  

Da mußt Du aber noch den DP anpassen, also das javascript.0.FensterUeberwachung.AlleFensterZu abändern zu dem was auch in Object ID steht. Hübsch ist das allerdings nicht mit dem Bulb Widget (habs grad mal getestet damit ich Dir keinen Quatsch ezähl). Ich nehm dafür meist das Basic Bool Widget, da biste flexibler weil man da auch noch innerhalb des img Tags mit den mdui... Klassen arbeiten kann.

[Xsev]

@Pittini Danke das versuche ich später gleich mal, wenn ich wieder daheim bin. Ja ich nutz auch meist das Basic Bool Widget, hab ich verwechselt.
Wäre genial wenn ich das alles in einem Widget unterbringen würde.

[Pittini]

@Xsev sagte in [Projekt] Material Design CSS v2:

Wäre genial wenn ich das alles in einem Widget unterbringen würde.

Dasgeht definitiv, hab ich zig mal hier verwendet. Wo man auch noch rumspielen kann, ist bei Signalbilder, da haste 3 vollkommen verschiedene Möglichkeiten zusätzlich, die sich auch mit mdui... Klassen versehen lassen.

[Xsev]

@Pittini Perfekt! Das funzt genau so wie ich es mir erhofft habe!!!! Danke nochmal!!! Das macht es deutlich überschaubarer.

Jetzt muss ich aber nochmal wegen dem bool widget fragen.

@Pittini sagte in [Projekt] Material Design CSS v2:

Ich nehm dafür meist das Basic Bool Widget, da biste flexibler weil man da auch noch innerhalb des img Tags mit den mdui... Klassen arbeiten kann.

Meinst du damit, das man damit dem Bild innerhalb des Widgets nochmal einen anderen css Effekt zuordnen kann? Also das Widget leuchtet je nach Stati rot/grün aber das Logo kann z.b. Blau flashen?
Hättest du da mal einen Beispiel Code für mich wie das ganze im HTML Tag dann aussehen müsste?

[Pittini]

@Xsev sagte in [Projekt] Material Design CSS v2:

Meinst du damit, das man damit dem Bild innerhalb des Widgets nochmal einen anderen css Effekt zuordnen kann? Also das Widget leuchtet je nach Stati rot/grün aber das Logo kann z.b. Blau flashen?

Ja, man kann kombinieren. Aber nicht jede Kombi macht Sinn, bzw. funktioniert. Einfach probieren, geht ja nix kaputt.

Hättest du da mal einen Beispiel Code für mich wie das ganze im HTML Tag dann aussehen müsste?

<img class="mdui-red-blink" height=32px src='/icons-mfd-svg/scene_making_love_clean.svg'>

[Xsev]

@Pittini Super danke!

Lol, ich glaube wir haben das selbe Schlafzimmer Symbol fehlt nur noch die Wägezelle im Bett für den Datenpunkt.

[bilberry]

Hallo zusmmen,

ich möchte mich gleich nochmal in die Frage von @Xsev einklinken. Mitte Febraur hatte ich einen ähnlichen Fall hier auch schon mal geschildert. @Glasfaser hat mir damals den Tipp gegeben, den dir @Pittini nun auch geschrieben hat.
Ich war recht glücklich darüber. Hab das aber inzwischen wieder zurückgenommen, denn: unter Windows mit Maus-Bedienung hat das wunderbar funktioniert. Aber unter Android wurde der Taster und damit der Status vom Schaltobjekt nach dem Antippen nach ca. 1s wieder zurückgesetzt. Ich war am Verzweifen, da plötzlich meine Lampen nach den Einschalten gleich wieder aus gingen oder nach dem Ausschalten sofort wieder ein. Je nach ursprünglichen Status.
Ich hatte das Phänomen nicht sofort mit der geänderte Formatierung in Verbindung gebracht, da es am PC ja funktionierte. Bis ich herausgefunden habe, dass man auf dem Touch-display (zumindet unter Android) jetzt länger auf die Taster drücken muss, um den Status daueraft umzuschalten.
Wenn man das oben beschriebene "bedingte Binding mit Formel" rausnimmt, war dieses Phänomen verschwunden. Die Lampen schalten dann auch wieder nach kurzem Antippen.

Hat jemand eine Erklärung dafür. Finde es schade diese Art der Formatierung nicht auf allen Geräten wie vorgestellt nutzen zu können.

[Dominik F.]

@Xsev

Du kannst auch 2 Widgets übereinander legen und das über die Sichtbarkeit regeln. Du machst das eine Widget nur sichbar wenn der Status True ist und das andere wenn der Status false ist und stellst die Widgets entsprechend ein mit glühen oder ohne etc.

[Glasfaser]

@bilberry

Gib mir mal dein Widget zum Testen, ich habe viellleicht da was , muss es aber anhand deines Probieren ob es geht !

[bilberry]

@Glasfaser: freut mich, dass Du Dich dem Thema noch mal annimmst.

mein Button - formatiert für Status "Aus"

Spoiler

[{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.Lichtszenen.AmbiLichtWohnz","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"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","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_false":"<i class="material-icons">power_settings_new</i>","html_true":"<i class="material-icons">power_settings_new</i>","class":"mdui-button-outlined mdui-grey"},"style":{"left":"91px","top":"169px","width":"64px","height":"64px","cursor":"pointer"},"widgetSet":"basic"}]

mein Button - formatiert für Status "Ein"

Spoiler

[{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.Lichtszenen.AmbiLichtWohnz","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"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","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_false":"<i class="material-icons">power_settings_new</i>","html_true":"<i class="material-icons">power_settings_new</i>","class":"mdui-button-outlined mdui-lime mdui-green-glow"},"style":{"left":"169px","top":"169px","width":"64px","height":"64px","cursor":"pointer"},"widgetSet":"basic"}]

[Glasfaser]

@bilberry

Setze bitte es in Code im Spoiler , Das Widget enthält so Fehler!

[bilberry]

@Glasfaser

ach so, dass kann man verschachteln - wieder was gelernt

AUS

Spoiler

[{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.Lichtszenen.AmbiLichtWohnz","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"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","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_false":"<i class=\"material-icons\">power_settings_new</i>","html_true":"<i class=\"material-icons\">power_settings_new</i>","class":"mdui-button-outlined mdui-grey"},"style":{"left":"104px","top":"234px","width":"64px","height":"64px","cursor":"pointer"},"widgetSet":"basic"}]

EIN

Spoiler

[{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.Lichtszenen.AmbiLichtWohnz","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"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","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_false":"<i class=\"material-icons\">power_settings_new</i>","html_true":"<i class=\"material-icons\">power_settings_new</i>","class":"mdui-button-outlined mdui-lime mdui-green-glow"},"style":{"left":"182px","top":"234px","width":"64px","height":"64px","cursor":"pointer"},"widgetSet":"basic"}]

[Glasfaser]

@bilberry

Hast du noch ein Widget dahinter , da der Rand nicht da ist !?

[bilberry]

@Glasfaser
nein, das ist ein einziges "BASIC bool HTML" und nur mit mdui-button-outlined formatiert - muss also auch ein Rand zu sehen sein

[sigi234]

@bilberry sagte in [Projekt] Material Design CSS v2:

muss also auch ein Rand zu sehen sein

Wenn man MD installiert hat schon

[Glasfaser]

@bilberry

Zustand AUS :

Zustand AN :

Spoiler

[{"tpl":"tplValueBoolCtrl","data":{"oid":"javascript.0.Lichtszenen.AmbiLichtWohnz","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"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,"html_false":"<i class=\"material-icons\">power_settings_new</i>","html_true":"<i class=\"mdui-lime\" </i><i class=\"mdui-green-glow\" </i><i class=\"material-icons\">power_settings_new</i>","class":"mdui-grey ","min":"false","max":"true","comment":"","name":""},"style":{"left":"407px","top":"55px","width":"64px","height":"64px","cursor":"pointer","background":"","position":"","text-align":"center","line-height":"4.4","box-shadow":" {val:javascript.0.Lichtszenen.AmbiLichtWohnz;val==\"true\"? \"0px 0px 11px 4px lightgreen\":  \" \"}","z-index":"1","border-width":"1px","border-style":"outset","border-radius":"1px"},"widgetSet":"basic"}]

Datenpunkt für den Effekt hier auch anpassen :

[bilberry]

@Glasfaser
Danke für Deine Mühen!

Bei wird zwar das Icon noch nicht zentriert dargestellt, aber das kann man ja offenbar unter "line-height" noch anpassen.

Der Effekt beim Schalten funktioniert auch. Das ist also noch ein weiterer Weg zum gewünschten Ziel zu kommen.

ABER, jetzt habe ich leider wieder das Phänomen, dass auf Tablet und Handy (Android / Firefox) ein zu kurzes Antippen dazu führt, dass der Schaltzustand nach einem kurzen Augenblick in den vorherigen Zustand zurückfällt.
Ich kann mir das nicht zu richtig erklären.

[Xsev]

@Dominik-F
Ja danke aber das hatte ich, das Problem ist die Überschaubarkeit und die Menge an Widgets das wird dann leider alles verdoppelt.

@bilberry Das "Problem" mit dem fester antippen habe ich jetzt auch, also kurz tippen und das Licht geht sofort wieder aus, fest drücken und es geht. Verstehe auch nicht wirklich warum, liegt das an den Geräten? Ich habe ein altes Nexus Tab da geht es Problemlos, bei den neueren Geräten ist es wie du beschreibst.

[bilberry]

@Xsev
na da bin ich ja beruhigt, dass ich nicht der einzige bin...

Zwei übereinanderliegende Widgets versuche ich auch nach Möglichkeit zu vermeiden. Ich kann Dir aber mal kurz beschreiben wie ich mir derzeit beholfen habe:

Ich habe ein "basic bool HTML"-Widget verwendet.
CSS Kalsse: mdui-button-outlined
HTML bei false <i class="material-icons mdui-grey">power_settings_new</i>
HTML bei true <i class="material-icons mdui-green-glow mdui-lime">power_settings_new</i>

Dann leuchtet zumindest das Icon, aber leider nicht der Rahmen.