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

[Kuddel]

Moin zusammen,

ich bin gerade dabei mich in CSS einzuarbeiten um die Anzahl meiner Widgets zu reduzieren.

In meiner VIS habe ich die Anwesenheit über ein Navigationwidget dargestellt.

Leider werden die CSS Einstellungen bei den Signalbildern nicht umgesetzt.

Die rechte Anzeige ist noch mit zwei Widgets.

Hier einmal das komplette Widget:

Spoiler

[{"tpl":"tplMetroTileNav","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":true,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":true,"g_signals":true,"hover":false,"transform":false,"label":"","bg_class":"bg-transparent","bg_class_active":"bg-transparent","signals-cond-0":"==","signals-val-0":"true","signals-icon-0":"/icons-mfd-png/status_man.png","signals-icon-size-0":"100","signals-blink-0":false,"signals-horz-0":"-20","signals-vert-0":"-20","signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":"false","signals-icon-1":"/icons-mfd-png/status_man.png","signals-icon-size-1":"100","signals-blink-1":false,"signals-horz-1":"-20","signals-vert-1":"-20","signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis.0/VIS/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"g_badge":true,"badge_bg_class":"","badge_bg_class_active":"","badge_top":"0","badge_left":"0","icon_badge":"","brand_bg_class":"","brand_bg_class_active":"","g_icon":true,"icon_class":"","icon_src":"","icon_width":"70","icon_height":"70","icon_top":"42","icon_left":"50","nav_view":"400_System","g_last_change":true,"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,"g_effects":true,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","hide_duration":"0","show_duration":"0","name":"Daniel","select_current":false,"comment":"","signals-oid-0":"javascript.0.Anwesenheit.Daniel","signals-oid-1":"javascript.0.Anwesenheit.Daniel","signals-icon-style-1":"border: red 2px solid; border-radius: 10px;2px solid; border-radius: 10px","signals-icon-style-2":"","signals-icon-style-0":"border: #41f316 2px solid; border-radius: 10px"},"style":{"left":"30px","top":"45px","width":"65px","height":"65px","z-index":"20","transform":""},"widgetSet":"metro"}]

Und die CSS Einstellungen als Beispiel für Signalbild 1: border: #41f316 2px solid; border-radius: 10px

Kann jemand helfen?

[Oli]

@Kuddel
Das geht auch mit Binding, direkt in der Rahmenfarbe

[Kuddel]

@Oli wie genau mache ich das ?

der dp ist

javascript.0.Anwesenheit.Daniel

bei true, soll der rahmen grün sein, bei false rot

[Oli]

@Kuddel
Kann ich dir heute Abend sagen, bin noch unterwegs

[Oli]

@Kuddel

hier mal das Binding, Datenpunkt muss noch angepasst werden:

{wert:javascript.0.Gewerke.Licht_DG.StatusAlarm; wert==0 ? "green" :: "orange"}

Das ganze muss hier eingetragen werden:

[Kuddel]

@Oli super, funktionert :-)

[Kuddel]

@Oli hmm oder auch nicht:

{wert:javascript.0.Anwesenheit.Jenny; wert==true ? "#41f316" :: "red"} 

[J.A.R.V.I.S.]

@Kuddel es bedarf auch keiner zwei Doppelpunkte.

{wert:javascript.0.Anwesenheit.Jenny; wert==true ? "#41f316" : "red"} 

Hast du es nur im Editor oder auch in der Visualisierung?

[Kuddel]

@J-A-R-V-I-S habe das so von @Oli übernommen und auch in der VIS die Doppelpunkte gesetzt.

Ich werde das mal eben korrigieren

[SBorg]

@Kuddel Interessanter ist der Typ vom DP. Ist dein "true" vom JS nur Text oder ein "echter" Boolean?

[OliverIO]

@SBorg das ist relativ egal, da die aktuelle LogiK von Binding das immer in text umsetzt.
ich habe da in Verbindung mit JSON-Daten einen Issue bei iobroker.vis eingestellt.
Wenn das umgesetzt wird, dann kommen auch die echten Datentypen an.

[Kuddel]

@SBorg es ist ein echter Boolean

[zahnheinrich]

@Kuddel
Könnte auch ein anderes Problem sein.
In den Objekten ist dein "true" rot, also nicht bestätigt.
In deiner CSS Einstellung deutet der grüne Untergrund darauf hin, dass der aktuelle Wert tatsächlich true ist.
Vertausche mal die Bedingungen, um zu sehen, ob sich die Anzeige dann ändert

[Kuddel]

@zahnheinrich die erste Farbe wird angezeigt, wenn die Bedingung wahr ist richtig ?

[zahnheinrich]

@Kuddel
So sollte es sein.
Prüfe einfach mal auf false, versuche auch "false",
mit Anführungszeichen.
Probier auch wert == false mit Leerzeichen vor und hinter==

[Kuddel]

@zahnheinrich habe es nochmal gestestet:

{wert:javascript.0.Anwesenheit.Daniel; wert=="true" ? "#41f316" : "red"}

Meine Frau ist zu Hause, ich nicht.

Sieht als gut aus. Scheint so als wenn true in Anführungszeichen muss

[zahnheinrich]

@Kuddel
Hab ich auch schon mal rumgesucht.
So gehts dann.
Scheint also doch kein "echtes" true zu sein, sondern ein Textstring.

[SBorg]

@OliverIO sagte in CSS Einstellungen werden nicht umgesetzt:

das ist relativ egal, da die aktuelle LogiK von Binding das immer in text umsetzt.

Dann kann aber IMHO wert==true nicht funktionieren? und muss "true" sein ;)

Beim Binding wird im Editor unabhängig vom Status immer der erste verwertbare Wert genommen, egal ob die Bedingung "true" oder "false" ist.

[Kuddel]

@zahnheinrich

[zahnheinrich]

@Kuddel
Klar, aber siehe den post darüber von @SBorg .