Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨

[LightsiderTT]

Ich komme mir gerade extrem dämlich vor, denn eigentlich möchte ich etwas vergleichsweise einfaches machen, bekomme es aber nicht hin - und somit hoffe ich dass mir jemand auf die Sprünge helfen kann.

Ich möchte in meiner Visualisierung (mit Vis) anzeigen ob ein Fenster offen oder geschlossen ist, mittels eines Icons. Die Icons habe ich bereits, aber da die "Fenster auf" und "Fenster zu" Icons sehr ähnlich sind (und nicht unbedingt auf einen Blick zu unterscheiden sind), möchte ich auch gerne den Hintergrund der Icons verändern (ihr Hintergrund ist standardmäßig durchsichtig). Etwa so:

Ich dachte das müsste relativ einfach über die CSS background-color Eigenschaft des Icon-Widgets gehen, nur leider finde ich kein Widget, bei dem ich abhängig von einem Gerätezustand (in diesem Fall, das Signal meines Fensterkontaktes) die background-color-CSS-Eigenschaft ändern kann.

Mit dem Widget "Image 8" kann ich das Icon je nach Zustand des Fensterkontaktes wechseln. Ich dachte vielleicht könnte ich ein "Bool HTML" Widget hinter das Icon legen und dessen Hintergrundfarbe je nach Zustand meines Fensterkontaktes ändern, aber das geht scheinbar auch nicht (da ich nur den HTML-Inhalt des Widgets ändern kann, aber nicht dessen CSS).

Bis jetzt ist die einzige Lösung, die ich gefunden habe, zwei Icon-Bilder-Widgets übereinander zu legen, und das "obere" sichtbar/unsichtbar zu machen, je nach Zustand des Fensterkontaktes. Doch das klingt nach einer extrem frickeligen Lösung - ist das tatsächlich die einzige Lösung? Oder gibt es da einen einfacheren Weg, den ich bis jetzt übersehen habe?

[Wszene]

@lightsidertt
Guten Morgen
Ich mache das bei mir so
Hier mal ein export von meinem Widget

Spoiler

[{"tpl":"tplBulbOnOffCtrl","data":{"oid":"system.adapter.admin.0.connected","g_fixed":true,"g_visibility":false,"g_css_font_text":false,"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","icon_off":"/admin.admin/admin.png","icon_on":"/admin.admin/admin.png","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,"class":"{myvar:system.adapter.admin.0.connected; myvar==\"true\" ? \"adapter-status-pic-aktiv\" : \"adapter-status-pic\"}","g_ccontrol":false,"name":"01_Admin - Pic-Status","readOnly":true},"style":{"left":"255px","top":"190px","z-index":"1","width":"55px","height":"55px"},"widgetSet":"basic"}]

Wenn es nur um die Fahre geht kannst du natürlich den Code auch so

{myvar:system.adapter.admin.0.connected; myvar=="true" ? "#008000" : "#ff0000"}

direkt in Background einfügen

[LightsiderTT]

@wszene Vielen Dank für deine Hilfe!

Wenn ich eine wirklich blöde Anfängerfrage stellen darf: was ist das für eine Skriptsprache die da verwendet wird? Gibt es dazu eine Dokumentation (so dass ich mir die Syntax anschauen kann um zu verstehen wie das Skript aufgebaut wird, anstatt sie einfach nur stumpf zu kopieren)?

[Glasfaser]

@lightsidertt sagte in Vis: CSS Hintergrund dynamisch ändern:

Wenn ich eine wirklich blöde Anfängerfrage stellen darf:

Es gibt keine blöde Fragen im Forum ... :)

also einfach Fragen ....

um zu verstehen wie das Skript aufgebaut wird,

Schau mal hier :
https://forum.iobroker.net/post/802416