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

[gammler2003]

Hallo zusammen,

auch ich nutze binding um die Textfarbe in einem Basic String Widget in meiner VIS zu ändern. In VIS Edit ändert sich die Farbe auch genau so wie sie soll - in der VIS Anzeige (egal ob Iphone-App oder wie Browser) ist die Textfarbe einfach nur schwarz. Refresh der VIS-Anzeige hilft nicht.

Wenn ich die Textfarbe statisch ändere (also einfach einen Hex-Code eingebe und nicht über binding) wird die Farbe in der Anzeige korrekt angezeigt.

Hat jemand eine Idee? Vielen Dank euch.

[SBorg]

@gammler2003 sagte in Binding: Textfarbe nach Wert:

In VIS Edit ändert sich die Farbe auch genau so wie sie soll

Hi, da scheint schon der Fehler zu sein. Bindings werden nur zur Laufzeit ausgeführt (Runtime), nie im Editor.
Da aber mein "Glaskugelmodus" ( ;) ) leider offline ist, wäre, um besser helfen zu können, mehr Infos nötig wie zB. mal dein Binding.
Bindings funktionieren mit unter auch nicht im verwendeten Widget. Zum testen eignet sich das einfache "HTML-Widget". Dort kann man sich dann auch zuerst mal das Ergebnis des Bindings als Text ausgeben lassen.

[gammler2003]

@sborg Sorry, doof von mir ;-) Vielen Dank für deine Hilfe.

Das Binding sieht wie folgt aus:

{wert:alexa2.0.Smart-Home-Devices.xxx.thermostatMode; wert == cool ? "#1874CD" : "#ff0000"}

Eingetragen unter CSS Font & Text/ color

[OliverIO]

@gammler2003 sagte in Binding: Textfarbe nach Wert:

{wert:alexa2.0.Smart-Home-Devices.xxx.thermostatMode; wert == cool ? "#1874CD" : "#ff0000"}

im Beispiel von eben, denke ich, hat sich noch ein Fehler eingeschlichen, da um das cool sicherlich auch Anführungsstriche gehören.

{wert:alexa2.0.Smart-Home-Devices.xxx.thermostatMode; wert == "cool" ? "#1874CD" : "#ff0000"}

Damit die Funktionsweiße genau verstanden wird, hier nochmal eine Detailerklärung
Bei Binding können mehrere Befehle hintereinander geschrieben werden. Die einzelnen Befehle werden mit einem ; getrennt.
Zur Unterscheidung von anderen Angaben in den jeweiligen Felders müssen Binding-Anweisungen mit geschweiften Klammern eingeschlossen werden. Davor und danach können troztdem gültige Angaben gemacht werden.
Anhand des Beispiels:

wert:alexa2.0.Smart-Home-Devices.xxx.thermostatMode
Der Inhalt des Datenpunkts wird in die Variable wert gepseichert und kann unter diesem namen weiter verwendet werden

wert == "cool" ? "#1874CD" : "#ff0000"

Diese Anweisung ist meist etwas schwer zu lesen, gibt es aber in mehrere Programmiersprachen und nennt sich ternärer Operator. Der Operator hat 3 Teile, die jeweils durch das ? und den : getrennt wird.

Der erste Teil (vor dem Fragezeichen) ist eine Vergleichsoperation, bei der Wahr oder Falsch herauskommen muss (allerdings hat javascript da so seine besonderheiten. Bei Interesse kann man mal unter falsy und truthy nachschlagen).
Hier wird der Inhalt von Wert mit dem Text "cool" verglichen. Wenn cool drin steht ist die Prüfung wahr, ansonsten falsch.

Der nächste Teil nach dem Fragezeichen und vor dem Doppelpunkt ist die Anweisung, die ausgeführt wird, wenn die Prüfung im ersten Teil wahr ist.

Der Teil nach dem Doppelpunkt ist die Anweisung, die ausgeführt wird, wenn die Prüfung falsch ergibt.

Jetzt kann man das auch noch ineinander verschachteln, so das da sehr komplexe Anweisungen herauskommen, die kaum noch lesbar sind, aber durchaus funktionieren.

Das Ergebnis dieses ternären Operators kann entweder in einer nachfolgenden Anweisung (nach einem weiteren Strichpunkt weiterverarbeitet werden. Gibt es keine weitere Anweisung, dann wird das Ergebnis einfach mit dem Inhalt der geschweiften Klammern ersetzt.

bspw in einem html-Feld kann man folgendes machen

der wert im datenpunk ist {val:wert:javascript.0.test1;val=="1"?"eins":"nicht eins"}

wenn der datenpunkt 1 enthält, dann wird
der wert im datenpunk ist eins
ausgegeben, ansonsten
der wert im datenpunk ist nicht eins
ausgegeben.

weitere infos zu binding hier
https://github.com/ioBroker/ioBroker.vis

[SBorg]

@gammler2003 gibt eigentlich nichts zu ergänzen, @OliverIO hat es schon ausführlich erklärt, bis auf das C&P-Monster (oder auch einfach C&P-Fehler) beim Beispiel:

der wert im datenpunk ist {val:javascript.0.test1;val=="1"?"eins":"nicht eins"} 

funktioniert besser :grinning:

Bei deinem Binding passiert folgendes:

{wert:alexa2.0.Smart-Home-Devices.xxx.thermostatMode; wert == cool ? "#1874CD" : "#ff0000"} 

Es wird die Variable wert (=der Inhalt des vorher definierten Datenpunktes) mit der Variablen cool verglichen ob sie gleich ist. cool hast du aber nicht als Variable definiert, sondern willst wohl eher vergleichen ob der Inhalt deines Datenpunktes "cool" ist.
Deswegen

{wert:alexa2.0.Smart-Home-Devices.xxx.thermostatMode; wert == "cool" ? "#1874CD" : "#ff0000"} 

Wenn du dies nun in ein HTM-Widget als "Inhalt" einträgst, wirst du sehen, dass die Ausgabe sich je nach Inhalt deines abgefragten Datenpunktes ändert. Beim falschen Binding dagegen wird sie immer "#ff0000" lauten.

Die Farbe des Textes im Editor wird sich auch nicht in Abhängigkeit des Datenpunktes ändern. Das ist mehr Zufall, denn wenn du wie hier in den Eigenschaften (text-color) ein Binding einträgst, interpretiert der Editor einfach den ersten Farbwert (bei dir dann #1874CD) den er im Binding findet ohne das Binding wirklich auszuführen ;)

[OliverIO]

@sborg sagte in Binding: Textfarbe nach Wert:

funktioniert besser

stimmt

[gammler2003]

@oliverio @SBorg
Ich verneige mich und sage ganz herzlichen Dank für eure Hilfe. Es funktioniert!

[G.Hawk]

Hallo

Ich habe eine kurze Frage dazu:

Wenn ich mehrere Bedingunggen einfüge, also wenn dann, wenn dann, sonst.
Wie muss ich das schreiben?

Das funktioniert nicht:

{wert:yamaha.0.Realtime.MAIN.PWR; wert == "Standby" ? "#B5B5B5" : "#FF0000"; wert == "On" ? "#00FF00" : "#0000CD" }

Also Z.B: Wenn "Standby" dann grau, Wenn "on" dann grün usw........ sonst rot.

Er soll die Textfarbe ändern bei "Standby" und "on".
Das möchte ich später noch erweitern, deshalb möchte ich gern verstehen, wie das funktioniert.

Nächste Frage wäre ob ich den Datenpunkt immer reinschreiben muss oder ob er sich den von der ObjektID automatisch holt, das habe ich oben nicht ganz vertanden.

Gruß

[bahnuhr]

@g-hawk sagte in Binding: Textfarbe nach Wert:

deshalb möchte ich gern verstehen, wie das funktioniert.

Es funktioniert so wie jede andere if then Abfrage.

{wert:yamaha.0.Realtime.MAIN.PWR; wert == "Standby" ? "grau" : wert == "on" ? "grün" : "rot" }

Die Farben noch ersetzen durch deine #..

Du schreibt in der Bedingung on groß; aber im Text klein.
Was ist nun richtig ?

@g-hawk sagte in Binding: Textfarbe nach Wert:

ob ich den Datenpunkt immer reinschreiben muss

ja, du musst ja der Variablen "wert" etwas zuweisen (kann ja auch was anderes sein).

[G.Hawk]

@bahnuhr

Super danke es klappt einwandrei.

[G.Hawk]

Eine Frage habe ich noch.
Kann soetwas irgendwie klappen wenn ich das bei Box Shaddow unter CSS Schatten und Abstand eintrage?

{wert:0_userdata.0.VIS.Werte_Test; wert == "true" ? "box-shadow:inset 0px 0px 10px #FFFFFF" : "box-shadow:inset 0px 0px 10px #39db00" }

[G.Hawk]

@g-hawk

Frage selbst beantwortet.

{wert:0_userdata.0.VIS.Werte_Test; wert == "true" ? "inset 0px 0px 10px #FFFFFF" : "inset 0px 0px 10px #39db00" }

Klappt!