ioBroker: Farben, Abfragen und Berechnungen in der Visualisierung mit Bindings steuern

Was sind Bindings?

Mit einem Binding kannst du den Wert jedes Datenpunkts in jedes Feld eines HTML-Widgets schreiben und dieses somit dynamisch über den Datenpunkt befüllen lassen. Es ist außerdem möglich, Berechnungen und Abfragen innerhalb eines Bindings auszuführen um den Wert, der ausgegeben wird, zu verändern. In dem Visualisierungs-Template „machs-smart.de Visualisierung für dein Fire HD“ (Download) nutze ich solche Bindings.

Um ein Binding in ein Widget einzufügen, schreibst du folgenden Code in das Widget-Feld, wobei „objectID“ durch die Objekt-ID deines Datenpunkts ersetzt wird:

{objectID}

Berechnungen kannst du wie folgt ausführen (dazu weiter unten mehr dazu):

{objectID;operation1;operation2;...}

Achtung

Beachte bitte, dass …

• … alle Werte, die über ein Binding eingelesen werden, in eine Zeichenkette (String) umgewandelt werden. Weiter unten erfährst du, wie du den Wert eines Bindings als Zahl zurückwandelst.
• … der „View“ nicht auf Bindings reagiert. Diese funktionierten nur in HTML-Widgets.
• … es momentan nicht möglich ist, einen Datenpunkt, der Doppelpunkte in seiner ID trägt, auszulesen. Über einen Alias-Datenpunkt (hier erfährst du, wie du einen Alias-Datenpunkt anlegst) kannst du dieses Problem beheben:

Eigene.0.Test:123ABC

Datenpunkt zum Testen anlegen

Für die folgenden Beispiele benötigst du zum Testen einen eigenen Datenpunkt. Ich habe unter „Eigene.0“ testweise „Binding“ als Logik-Datenpunkt angelegt:

Dieser Datenpunkt hat also die Objekt-ID:

Eigene.0.Binding

Stelle den eben erstellten Datenpunkt testweise auf „10“ und wechsle in deine Visualisierung. Lege dort ein neues „HTML“-Widget an:

Schreibe nun in das Feld „HTML“ folgenden Code, um den Wert deines Datenpunkt über ein Binding abzurufen:

{Eigene.0.Binding}

Im VIS-Editor wird dir der Inhalt noch nicht angezeigt, erst wenn du deine Visualisierung startest, sollte dort im View die Zahl „10“ stehen:

Bedingungen

Durch eine „if else“-Abfrage wird der an das Binding übermittelte Wert geprüft und je nach Bedinung weiterverarbeitet oder ein anderer Wert ausgegeben. Natürlich kannst du Abfragen mit den weiteren Beispielen (Farben, Berechnungen, …) nach Belieben kombinieren.

Um eine Bedingung zu starten, musst du in deinem Binding die Objekt-ID an einen Wert koppeln:

{wert:Eigene.0.Binding}

Wenn-Dann

Anschließend kannst du die <if>-Abfrage (?) in das Binding einbauen und beispielsweise prüfen, ob der Wert größer als „5“ ist. Wird die Bedingung erfüllt, lässt du „der Wert ist größer als 5“ ausgeben. Ansonsten bleibt die Ausgabe leer:

{wert:Eigene.0.Binding; wert > 5 ? "der Wert ist größer als 5":""}

Abfrage, ob Wert leer oder gesetzt ist

Mit folgendem Binding-Code kannst du abfragen, ob ein Wert leer oder gesetzt ist:

{wert:Eigene.0.Binding; wert ? "gesetzt" : "leer"}

Abfrage, ob Wert true oder false ist

{wert:Eigene.0.Binding; wert === "true" ? "wahr" : "falsch"}

Wenn-Sonst

Möchtest du zusätzlich eine <sonst>-Ausgabe (:) einbauen, musst du den Code wie folgt ändern. Anschließend änderst du den Test-Datenpunkt auf „4“:

{wert:Eigene.0.Binding; wert > 5 ? "der Wert ist größer als 5" : "der Wert ist kleiner als 5"}

Wenn-Oder-Sonst

Mit der „if or“-Abfrage kannst du prüfen, ob der Wert entweder auf Bedingung 1 oder Bedingung 2 zutrifft. Nutze dafür folgenden Code:

{wert:Eigene.0.Binding; wert == 5 || wert == 10 ? "der Wert ist 5 oder 10":"der Wert ist keine der beiden Zahlen"}

Wenn-Und-Sonst

Mit der „if and“-Abfrage kannst du prüfen, ob der Wert auf 2 verschiedene Bedingungen zutrifft. Nutze dafür folgenden Code:

{wert:Eigene.0.Binding; wert > 5 && wert < 10 ? "der Wert ist größer als 5 oder kleiner als 10":"der Wert liegt nicht im definierten Bereich"}

Wenn-Sonst-Wenn-Sonst

Wenn du genau wissen willst, wann ein Wert exakt „5“ ist, kannst du das mit einer <if>-Abfrage gefolgt von einer zweiten Abfrage machen.

Ist die erste falsch, wird die zweite Abfrage gestartet, ansonsten wird der Text „der Wert ist größer als 5“ ausgegeben. Ist die zweite Abfrage wahr, wird der Text „der Wert ist genau 5“ ausgegeben, asnosten der Text „der Wert ist kleiner als 5“:

{wert:Eigene.0.Binding; wert > 5 ? "der Wert ist größer als 5": wert == 5 ? "der Wert ist genau 5" : "der Wert ist kleiner als 5"}

Mathematische Berechnungen

Um eine mathematische Berechnung zu starten, musst du in deinem Binding die Objekt-ID an einen Wert koppeln:

{wert:Eigene.0.Binding}

Da alle Werte, die über ein Binding eingelesen werden, in eine Zeichenkette (String) umgewandelt werden, musst du den Wert, mit dem gerechnet werden soll, erst mit „parseInt“ als Zahl zückwandeln.

Addieren

{wert:Eigene.0.Binding;parseInt(wert)+5}

Subtrahieren

{wert:Eigene.0.Binding;parseInt(wert)-4}

Multiplizieren

{wert:Eigene.0.Binding;parseInt(wert)*5}

Dividieren

{wert:Eigene.0.Binding;parseInt(wert)/2}

Runden und Dezimalstellen

Zum Runden und der Ausgabe von Dezilmalstellen reicht folgender Binding-Code, diesmal jedoch ohne „Wert“-Verknüpfung.

Abrunden

floor rundet den Wert ab:

{Eigene.0.Binding;floor}

Aufrunden

ceil rundet den Wert auf:

{Eigene.0.Binding;ceil}

Aufrunden mit Nachkommastellen

round und round(Nachkommastellen) rundet den Wert wie folgt: Wenn der Nachkommateil des Argumentes größer als 0.5 ist, wird das Argument zur nächsten ganzen Zahl, deren Absolutwert größer ist, gerundet. Wenn der Nachkommateil kleiner als 0.5 ist, wird auf die nächsten ganzen Zahl, deren Absolutwert kleiner ist, gerundet. Wenn der Nachkommateil genau 0.5 ist, wird auf die nächst größere ganze Zahl aufgerundet:

{Eigene.0.Binding;round}
{Eigene.0.Binding;round(2)}

Nachkommastellen

Hängst du .toFixed(Nachkommastellen) an deinen Wert, werden automatisch (Nachkommastellen) mit ausgegeben. Das funktioniert aber nur mit Zahlen – vorher also wieder mit parseInt umwandeln:

{wert:Eigene.0.Timer;parseInt(wert).toFixed(2)}

Weitere Operatoren

Viele weitere Operatoren für mathematische Berechnungen und zum Auf- und Abrunden findest du im offiziellen GitHub von ioBroker / ioBroker.vis: github.com/ioBroker/ioBroker.vis#bindings-of-objects

Farben

Text- und Füllfarben

Indem du das Binding in das Widget-Attribut _Color unter _{CSS Font & Text} schreibst, kannst du darüber einfach die Textfarbe ändern:

Setze dazu den Datenpunkt auf einen Farb-HEX-Wert (in diesem Beispiel rot #ff0000). HEX-Werte findest du beispielswiese unter https://htmlcolorcodes.com/:

Gleiches kannst du mit der Hintergrundfarbe von Formen oder Widgets machen. Schreibe das Binding dazu in das Widget-Attribut _background unter _{CSS Hintergrund} oder in das entsprechende _Color-Attribut der Form:

Bedingungsabhängige Farben

Damit du ein Widget bedingungsabhängig einfärben kannst, setze zuerst den Datenpunkt wieder zurück auf „5“. Dann schreibst du folgende Bedingung in das _Color-Attribut des Widgets. Als Ausgabetext verwendest du jetzt einfach die HEX-Codes:

{wert:Eigene.0.Binding; wert > 5 ? "#ff0000" : "##00ff00"}

Wenn du den Wert jetzt auf eine Zahl größer „5“ änderst, färbt sich der Kreis rot:

Manipulationen

Textersetzung mir „replace“

Einen bestimmten Teil oder bestimmte Zeichen kannst du mit replace einfach austauschen bzw. ersetzen. Verwende dafür folgenden Binding-Code:

{wert:Eigene.0.Binding;wert.replace("welcheZeichen","durchZeichenersetzen")

Leider ersetzt replace aktuell nur das erste Vorkommen des gesuchten Zeichens. Möchtest du also mehrere Zeichen ersetzen, musst du erneut replace anhängen:

Teil-Rückgabe mit „substring“

Mit substring kannst du einen Teil des Datenpunkt-Werts ausgeben. Hänge .substring() einfach an den wert an. In der Klammer definierst du den Startpunkt („0“ ist der Anfang) und die Anzahl der Zeichen, die ausgegeben werden sollen. In diesem Beispiel werden also die ersten beiden Zeichen des Werts ausgegeben:

{wert:Eigene.0.Binding;wert.substring(0,2)

Text oder Zahlen anhängen

{wert:Eigene.0.Binding;wert+"Text"}