Javascript | Button Hintergrundfarbe nach Wert

[TG70]

@mcu .. genau ich schreibe einfach im dem Beispiel mit "Button" die Farbe #171717 in den Datensatz, wo alle Widgets Hintergründe mit Bindings angebunden sind.

So in der Art möchte ich das eben mit den VIEW Hintergründen machen, ggf. auch mit Hintegrundbildern

[MCU]

@tg70 Bei den allgemeinen Hintergründe funktioniert ein Binding anscheinend nicht:

[TG70]

@mcu ... genau, das habe ich auch probiert. Wie wäre sowas dann möglich?

[MCU]

@tg70 Ich hatte es gehofft. Muss noch daran arbeiten.

[TG70]

@mcu Soll ich da mal einen neuen Thread aufmachen?

[MCU]

@tg70 Du willst doch nur zwischen zwei Farben hin und herschalten? Maximale Anzahl der Farben?

[TG70]

@mcu du meinst jetzt die Hintergründe oder was meinst du?

[MCU]

@tg70 Ja
Kannst auch mal hier schauen:
https://forum.iobroker.net/topic/765/css-hintergrund-für-view

Wenn man nur in CSS folgenden Eintrag macht, sind alle View mit Hintergrund green:

[TG70]

schau ich mir gleich an ... bin gespannt....

DU schau mal, die Farbe "red" funktioniert bei mir nicht

{v:coronavirus-statistics.0.Germany.Stadt.Nürnberg.cases7_per_100k; (v<50)? "green": (v<100)? "yellow": (v>100)? "red": "grey"}

Spoiler

[{"tpl":"tplValueFloat","data":{"oid":"coronavirus-statistics.0.Germany.Stadt.Nürnberg.cases7_per_100k","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"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","is_comma":false,"factor":"1","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,"digits":"1"},"style":{"left":"142px","top":"583px","background":"{v:coronavirus-statistics.0.Germany.Stadt.Nürnberg.cases7_per_100k; (v<50)? "green": (v<100)? "yellow": (v>100)? "red": "grey"}","width":"54px","height":"16px","border-width":"1px","border-style":"solid","border-radius":"4px","border-color":"grey","color":"black","text-align":"center","font-size":"16px","font-weight":"bolder","font-variant":"normal","background-color":""},"widgetSet":"basic"}]

[MCU]

@tg70

{v:coronavirus-statistics.0.Germany.todayDeaths;(v<0)? "green": (v<35)? "yellow": (v>50)? "red": "grey"}

Bei mir schon:

[TG70]

Hast du mein Widget probiert... bei mir gehts leider nicht
Das als Beispiel > 100 (128)

{v:coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k;(v<50)? "green": (v<100)? "yellow": (v>100)? "red": "grey"}

[MCU]

@tg70 Kann ich nicht:

[TG70]

@mcu .. das ist aber seltsam

Farbe Rot

Spoiler

[{"tpl":"tplValueFloat","data":{"oid":"coronavirus-statistics.0.Germany.Stadt.Nürnberg.cases7_per_100k","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"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","is_comma":false,"factor":"1","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,"digits":"1"},"style":{"left":"142px","top":"602px","background":"{v:coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k;(v<50)? "green": (v<100)? "yellow": (v>100)? "red": "grey"}","width":"54px","height":"15px","border-width":"1px","border-style":"solid","border-radius":"4px","border-color":"grey","color":"black","text-align":"center","font-size":"16px","font-weight":"bolder","font-variant":"normal","background-color":""},"widgetSet":"basic"}]

Farbe Gelb

Spoiler

[{"tpl":"tplValueFloat","data":{"oid":"coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"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","is_comma":false,"factor":"1","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,"digits":"1"},"style":{"left":"205px","top":"602px","background":"{v:coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k; (v<50)? "green": (v<100)? "yellow": (v>100)? "red": "grey"}","width":"54px","height":"15px","border-width":"1px","border-style":"solid","border-radius":"4px","border-color":"grey","color":"black","text-align":"center","font-size":"16px","font-weight":"bolder","font-variant":"normal"},"widgetSet":"basic"}]

[MCU]

@tg70 Kann ich beide nicht importieren?
Bei Dir wird nicht korrekt exportiert:

Es sind keine

"\"

vor den ", deswegen kommt der Import damit nicht klar.
Achso, du musst die Code-Tags nehmen!
</> im Spoiler

-> Erst Spoiler klicken, danach direkt Code-Tags (</>) und dann mit STRG+V, den Code einfügen.

[TG70]

@mcu ich hab das über den Export Button gemacht. Ist das nicht richtig?

[MCU]

@mcu Doch, aber dann das Einfügen in den Post ist falsch, siehe oben.

[TG70]

@mcu
Bin gerade unterwegs..schick dir in einer Stunde die beiden buttons

[MCU]

@tg70 Dort hat man es auch schon versucht:
https://forum.iobroker.net/topic/23851/bindings-in-vis/50

Es gibt auch ein Issue beim VIS-Adapter:

https://github.com/ioBroker/ioBroker.vis/issues/339

ice987987 created this issue in ioBroker/ioBroker.vis

closed Binding for background-color does not work #339

[TG70]

@mcu supi ... das heißt warten .... aber ich hab auf jeden Fall aboniert!
Aber da geht es eher um die Widget "background" oder?

Ich suche ja noch nach einer VIEW background Binding Möglichkeit

Oh klar ich füge ja einen Code in den Spoiler ein... sorry
Hier der "red"

Spoiler

[{"tpl":"tplValueFloat","data":{"oid":"coronavirus-statistics.0.Germany.Stadt.Nürnberg.cases7_per_100k","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"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","is_comma":false,"factor":"1","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,"digits":"1"},"style":{"left":"142px","top":"602px","background":"{v:coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k;(v<50)? \"green\": (v<100)? \"yellow\": (v>100)? \"red\": \"grey\"}","width":"54px","height":"15px","border-width":"1px","border-style":"solid","border-radius":"4px","border-color":"grey","color":"black","text-align":"center","font-size":"16px","font-weight":"bolder","font-variant":"normal","background-color":""},"widgetSet":"basic"}]

Hier der "green"

Spoiler

[{"tpl":"tplValueFloat","data":{"oid":"coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k","g_fixed":false,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"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","is_comma":false,"factor":"1","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,"digits":"1"},"style":{"left":"205px","top":"602px","background":"{v:coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k; (v<50)? \"green\": (v<100)? \"yellow\": (v>100)? \"red\": \"grey\"}","width":"54px","height":"15px","border-width":"1px","border-style":"solid","border-radius":"4px","border-color":"grey","color":"black","text-align":"center","font-size":"16px","font-weight":"bolder","font-variant":"normal"},"widgetSet":"basic"}]

Edit | background color:

Kann das so funktionieren - nein - weil es nicht funktioniert

{v:coronavirus-statistics.0.Germany.Kreis.Roth.cases7_per_100k; (v<35)? "green": (v<50)? "yellow": (v>50)? "red" (v>100)? "darkred": "grey"}

Das hier soll umgesetzt werden:

[MCU]

@tg70 Also bei mir funktioniert es:

Red funktioniert nicht bei Dir, weil der Wert falsch ist:

"oid":"coronavirus-statistics.0.Germany.Stadt.Nürnberg.cases7_per_100k"

und in der Abfrage:

"background":"{v:coronavirus-statistics.0.Germany.Kreis.Nürnberger_Land.cases7_per_100k;(v<50)? \"green\": (v<100)? \"yellow\": (v>100)? \"red\": \"grey\"}"

Also id und Abfrage für Background haben unterschiedliche Werte! Einmal Stadt und einmal Kreis, das geht nicht.