[HowTo] Material Design: Status-Anzeigen

[Uhula]

<size size="150">[HowTo] Material Design: Status-Anzeigen</size>

Für die Darstellung von States wird das basic-ValueList HTML Widget verwendet. Es kann sowohl für die Darstellung von Status-Texten als auch von Status-Symbolen verwendet werden. Bei der Textdarstellung kann entweder der Text selbst oder der Hintergrund in verschiedenen Farben gefärbt werden. Weiterhin kann die Aufmerksamkeit durch die Verwendung von blink/flash/pulse Effekten erhöht werden.

Eine detaillierte Beschreibung: https://github.com/Uhula/ioBroker-Mater … eitung.pdf

ioBroker.vis Demo-Projekt: https://github.com/Uhula/ioBroker-Mater … 20projects

Da hierbei die CSS-Klassen und Javascript-Code des Material Designs benutzt werden, funktioniert es nur dort. Allerdings, wer mit CSS/JS umgehen kann, könnte sich die entsprechenden CSS-Klassen und den JS-Code auch herausziehen.

[Buddinski88]

Hallo Uhula,

vielen Dank für das HowTo und generell auch für die Bereitstellung deiner Arbeit thumbsup.

Gibt es die Möglichkeit die erwarteten Werte der Werteliste auch zu ändern?

Homematic liefert bei den Fensterkontakten nur "true" oder "false" und nicht "0, 1, 2".

Viele Grüße und besten Dank schon mal,

Bastian

[Tirador]

Ich habe das gleiche "Problem" wie Buddinski88, dass meine Fensterkontakte nur true oder false liefern.

Gibt es einen "Workarround", damit man die Werteliste ändern kann?

[Kuddel]

@Buddinski88 und @Tirador habt ihr es mal mit 0 und 1 statt true und false ausprobiert?

Ich meine 0 und false sowie 1 und true sind das gleiche und können somit verarbeitet werden.

[Dominik F.]

@Tirador

ich nutze dafür folgendes Widget:

[{"tpl":"tplValueBoolCtrl","data":{"oid":"zigbee.0.00158d0003d41914.opened","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"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":" <div class=\"mdui-green-bg\">geschlossen</div>;","html_true":"<div class=\"mdui-red-bg\">geöffnet</div>;","class":"mdui-state"},"style":{"left":"calc(80% - 52px)","top":"72px","width":"104px","height":"28px","text-align":"center","line-height":"","z-index":"11","border-width":"","border-radius":"","font-weight":"","font-family":""},"widgetSet":"basic"}]

[Buddinski88]

@Dominik-F genau so habe ich es auch gemacht

[Tirador]

@Dominik-F said in [HowTo] Material Design: Status-Anzeigen:

[{"tpl":"tplValueBoolCtrl","data":{"oid":"zigbee.0.00158d0003d41914.opened","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"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":" <div class="mdui-green-bg">geschlossen</div>;","html_true":"<div class="mdui-red-bg">geöffnet</div>;","class":"mdui-state"},"style":{"left":"calc(80% - 52px)","top":"72px","width":"104px","height":"28px","text-align":"center","line-height":"","z-index":"11","border-width":"","border-radius":"","font-weight":"","font-family":""},"widgetSet":"basic"}]

Besten Dank! Das klappt hervorragend.