Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[ub.privat]

Hallo zusammen,

es ist sicher eine "simple" Frage, doch für mich eine Herausforderung.
Ich möchte gern ein farbiges Rechteck erstellen, welches die eine bestimmte Farbe entsprechend des Wertes im DP annimmt.
Bsp.

bei <19 --> ist das Rechteck blau
bei >19<22 --> ist das Rechteck grün
bei >22 --> ist das Rechteck rot

Dazu würe ich das Widget "ValueList HTML Style" verwenden und wie folgt konfigurieren:

Sind die Gedanken für den Wertebereich korrekt angelegt oder muss ich eine Syntax beachten.
Für den Stil muss dazu ein "Color-Befehl" eingepflegt werden?

Vielleicht geht es ja auch einfacher?
Danke schon mal vorab für jeden Tipp oder Hilfe!

BG

[liv-in-sky]

@ub-privat

geht auch über binding mit einem standard html widget

widget import

[{"tpl":"tplHtml","data":{"g_fixed":false,"g_visibility":false,"g_css_font_text":false,"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","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},"style":{"left":"787px","top":"413px","border-width":"4px","border-style":"solid","border-radius":"15px","border-color":"{val:0_userdata.0.CONTROL-OWN.AAATEST.TestZahl2; val<19 ? \"blue\" : val>22 ? \"red\" : \"green\"}"},"widgetSet":"basic"}]

{val:0_userdata.0.CONTROL-OWN.AAATEST.TestZahl2; val<19 ? "blue" : val>22 ? "red" : "green"}

[ub.privat]

Danke! Wieder etwas gelernt und das kann ich für soviele Anwendungen benutzen! Perfekt!

[liv-in-sky]

@ub-privat

oh ja - damit kann man z.b. widgets unsichtbar machen, wenn man mehrere dp auswerten will/muss (man kann auch mehrere verschiedene datenpunkte nutzen), oder widget in der position verschieben (nutze ich auch), oder classen (blinken, drehen,..) zuweisen, oder werte mit komma in werte mit punkt verwandel, oder auch widget verschieden skalieren...........