Javascript | Button Hintergrundfarbe nach Wert

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

[MCU]

@tg70 sagte in Javascript | Button Hintergrundfarbe nach Wert:

Kann das so funktionieren - nein - weil es nicht funktioniert

Das würde auch funktionieren, wenn die Werte entsprechend gleich wären. ID und Binding müssen passen: siehe oben.

[MCU]

@tg70 sagte in Javascript | Button Hintergrundfarbe nach Wert:

Aber da geht es eher um die Widget "background" oder?

Nein. Im Issue geht es um die Background-Color vom gesamten View. Siehe oben in der Beschreibung vom Issue.

[TG70]

@mcu Guten Morgen ... danke dir für dein unermütliche Hilfe.
Man lern jeden Tag dazu hier - das ID/Binding nicht passten kam wahrscheinlich vom vielen probieren.
Ich habe immer das Problem mit dem letztem, oberen Wert - hier wird zb. das "blue" nicht angezeigt.

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":"552px","top":"576px","background":"{v:coronavirus-statistics.0.Germany.Stadt.Nürnberg.cases7_per_100k;(v<35)? \\\"green\\\": (v<50)? \\\"yellow\\\": (v<100)? \\\"red\\\": (v>=100)? \\\"blue\\\": \\\"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":"","line-height":"17px"},"widgetSet":"basic"},{"tpl":"tplValueList","data":{"oid":"nothing_selected","g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":true,"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_prepend":"Nürnberg","html_append":"","name":"TEXT_TV_schauen"},"style":{"left":"552px","top":"599px","color":"white","font-size":"11px","width":"54px","height":"15px","text-align":"center","font-weight":"bolder","background":"","font-family":"Tahoma, Geneva, sans-serif","font-style":"normal","font-variant":"normal","line-height":"14px","z-index":"103","background-color":"","letter-spacing":""},"widgetSet":"basic"}]

[TG70]

ERGEBNIS: Es lag an einem defekten Widget, wer weiß auch immer was da anders war wie bei den anderen.
Habe ein neues Widget erstellt und ID und Bindings gesetzt und alles ist TOP

DANKE @MCU du hast mir sehr geholfen |+1|
Wenn du was raus bekommst wg. VIEW Background Bindings denkst vllt. an mich .. wäre TOP

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

TOPIC: Wenn jemand noch eine Idee hat warum der ganz oben genannte java-script nicht funktioniert wäre das
super. Würde mich sehr interessieren.

[MCU]

@tg70 Das Script funktioniert. Hab es gerade nochmal getestet.