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

Mit einem sogenannten „Binding“ kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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 …

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:

Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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:

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

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

{Eigene.0.Binding}
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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

Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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":""}
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.
Interpretiert bedeutet das: <wenn der wert (wert) größer als (>) 5 ist, dann (?) gib aus „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"}
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.
Abfrage, ob Wert true oder false ist
{wert:Eigene.0.Binding; wert === "true" ? "wahr" : "falsch"}
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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"}
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.
Interpretiert bedeutet das: <wenn der wert (wert) größer als (>) 5 ist, dann (?) gib aus „der Wert ist größer als 5“, sonst (:) gib aus „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"}
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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"}
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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}
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

Subtrahieren

{wert:Eigene.0.Binding;parseInt(wert)-4}
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

Multiplizieren

{wert:Eigene.0.Binding;parseInt(wert)*5}
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

Dividieren

{wert:Eigene.0.Binding;parseInt(wert)/2}
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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:

Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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

Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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:

Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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"}
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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

Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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")
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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

Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

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)
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.

Text oder Zahlen anhängen

{wert:Eigene.0.Binding;wert+"Text"}
Mit einem sogenannten "Binding" kannst du in deiner Visualisierung dynamisch Farben ausgeben, Formatierungen anpassen, Berechnungen durchführen oder bedingungsabhängig verschiedene Werte verändern.
War dieser Beitrag hilfreich?
Hat dir der Beitrag geholfen?
Die mit Sternchen (*) gekennzeichneten Links sind sogenannte Affiliate-Links. Wenn du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekomme ich von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich verändert sich der Preis nicht.

21 Kommentare

Kommentieren

Hallo Max,

sau coole Sache mit den Bindings!! Hilf mir bei meiner Vis mega viel! 😉
Aber gibt es eine Möglichkeit, Zahlen von der englischen Schreibweise (mit Punkt als Trennzeichen) in die deutsche Schreibweise (mit Komma) zu formatieren?

Schöne Grüße
Felix

Ah, ok! 🙂 Ich dachte, dass das mit den Bindings nur in HTML Feldern funktioniert. Wieder was gelernt! 🙂

Nein, das stimmt so wie du gedacht hast. Die Formatierung von Zahlen geht aktuell nur über das „Number“-Widget, das du mit dem entsprechenden „Zahl“-Datenpunkt verknüpfst. Ohne Binding.

Habs gerade versucht, scheint aber doch nicht zu funktionieren. Mein Problem ist, dass ich nicht direkt den Datenpunkt nehmen kann, da die Windgeschwindigkeit in km/h ist und ich m/s möchte. Deshalb habe ich es mit {wert:daswetter.0.NextHours.Location_1.Day_1.wind_value;(parseInt(wert)/3.6).toFixed(2)} m/s versucht. Also gibts eigentlich nur zwei Möglichkeiten: Entweder eigenen Datenpunkt anlegen und dort direkt m/s nutzen oder man könnte evtl. durch einen Befehl (replace(‚.‘, ‚,‘)?!) den Punk ersetzen. Kenn den Befehl aber nur von python. Gibts das hier auch?

Doch, das geht, in dem du folgendes Binding nutzt: {wert:DATENPUNKT;wert.replace(„WAS“,“DURCHWAS“)}

Hallo Felix,
ich versuche mit den Bindings und deiner Anleitung einen „Farbrange“ abzubilden.

{wert:hm-rpc.2.0006D788585C0B.1.ACTUAL_TEMPERATURE; wert 21 ? „#ff6659“ : „#6abf69“}

Ist der DP-Wert 21°C in roter Schrift, und dazwischen in grün. Leider klappt es nicht so wirklich. Kann es an der Syntax liegen?
Wie gehe ich mit Kommastellen um? DP ist 21.5°C …

Hallo Uwe, die korrekte Syntax sollte lauten: {wert:hm-rpc.2.0006D788585C0B.1.ACTUAL_TEMPERATURE; wert == 21 ? „#ff6659“ : „#6abf69“}. Du hattest offenbar „==“ vergessen, um den Wert mit einer Zahl zu vergleichen. Dieses Binding bitte unter „CSS Font & Text“ in den Abschnitt „Color“ kopieren. Grüße, Max

Hallo,

kann man über ein Binding auch auf die aktuelle Systemzeit zugreifen, die sich dann automatisch aktualisiert, so wie unter Javascript mit new Date() und getTime() z.B.?

Danke
Daniel

Hallo,
die ganzen Möglichkeiten mit den Bindings kannte ich noch nicht, hatte bisher nur ein wenig mit den Farben hantiert.
Aber genau dazu habe ich auch eine Frage:
Funktioniert denn auch so etwas:
{batt:adapter.0.geraet.Status_Akku;batt > 35 ? „{0_userdata.0.csstyle.color1}“ : „{0_userdata.0.csstyle.color2}“}

Also, daß ich die Farbwerte #xxxxxx und #yyyyyy als DP abspeichere und mittels Binding abrufe?
Bisher habe ich es nicht hinbekommen, weder mit Anführungszeichen, noch ohne.
Würde das grundsätzlich funktionieren?

Viele Grüße,
Andreas

Hallo,

kann mir jemand weiter helfen bezüglich der Addition?
Ich möchte zwei Objekte auf dem ioBroker mit einander addieren, z.B.

„wert:ford.0.XXXXXX.statususv4.vehiclestatus.elVehDTE.value;parseInt(wert)+ford.0.XXXXXX.statususv4.vehiclestatus.fuel.distanceToEmpty}“

Viele Grüße,
Sascha

Habe das jetzt so mal versucht:

„wert1:ford.0.XXXXXX.statususv4.vehiclestatus.elVehDTE.value;wert2:ford.0.XXXXXX.statususv4.vehiclestatus.fuel.distanceToEmpty;parseFloat(wert1+wert2).toFixed(1)}“

leider wird mir dann nur der Wert 1 angezeigt.

Ich glaube, die Berechnung muss vorher stattfinden. Also wert3:wert1+wert2. Ich probiere das mal und melde mich.

Ich habe nochmal weiter experimentiert, wenn ich das jetzt wie folgt schreibe bekomme ich einen wert. Leider stimmt dieser nicht.

„wert1:ford.0.XXXXXX.statususv4.vehiclestatus.elVehDTE.value;wert2:ford.0.XXXXXX.statususv4.vehiclestatus.fuel.distanceToEmpty;parseFloat(wert1)+(wert2)}”

z.B. wenn ich jetzt diese Werte nehme
Wert 1 = 30,2
Wert 2 = 238,1
bekomme ich dann dieses 30,2238,1.

Mach ich aber aus dem ‚+‘ ein ‚-‚ dann klappt die Berechnung. Wo liegt da der Fehler? Der Befehl ‚.toFixed(1)‘ klappt in dieser schreibform auch nicht.

Schreibe einen Kommentar