ioBroker VIS – Object Binding im HTML-Widget

Im folgenden Artikel zeige ich Dir, wie Du Werte von Datenpunkten direkt im HTML-Widget darstellen kannst.Für die Darstellung von Sensorwerten wollte ich bestimmte Datenpunkte in einer tabellarischen Form auf meiner View darstellen. Im ersten Schritt habe ich dazu ein HTML-Widget auf die View gezogen und die Größe und Position festgelegt.

Nach dem wir das Widget soweit auf der View platziert haben können wir im nächsten Schritt mit dem HTML beginnen. Dazu klicken wir auf der Lasche Allgemein des HTML-Widget auf die Schaltfläche hinter dem HTML-Eingabefeld.

Jetzt können wir mit dem HTML-Code für die Darstellung beginnen. Für die Darstellung habe ich die Form einer Tabelle gewählt, da wir so unsere Sensorwerte übersichtlich darstellen können. Zudem kann die Tabelle einfach und schnell erweitert werden. In der Tabelle sollen zwei Spalten angezeigt werden. In der ersten Spalte soll die Bezeichnung (z.B. Lufttemperatur) stehen. Die Bezeichnung ist statisch und wird später einfach im HTML-Code eingetragen. Der Wert in der zweiten Spalte ist ein dynamischer Wert aus dem entsprechenden Datenpunkt. Diesen Wert können wir über das Object-Binding einfügen. Dazu benötigen wir im ersten Schritt die Object-ID des Wertes. In meinem Fall ist der Wert im MQTT-Bereich der Objekte zu finden:

mqtt.0.outdoor1_Lufttemperatur

Für das Binding wird diese ID nun einfach in geschweifte Klammern gesetzt und direkt im HTML-Code eingefügt.

{mqtt.0.outdoor1_Lufttemperatur}

Der fertige HTML-Code des Widget sind nun folgendermaßen aus:

<table>
  <tr>
    <td>Lufttemperatur:</td>      
    <td align="right"><b>{mqtt.0.outdoor1_Lufttemperatur}°C</b></td>
  </tr>      
  <tr>
    <td>Luftfeuchtigkeit:</td>      
    <td align="right"><b>{mqtt.0.outdoor1_Luftfeuchtigkeit}%</b></td>
  </tr>   
  <tr>
    <td>Bodenfeuchtigkeit:</td>      
    <td align="right"><b>{mqtt.0.outdoor1_Bodenfeuchtigkeit}</b></td>
  </tr>     
</table>

Nun speichern wir den HTML-Code. In der View wird das Object-Binding nicht als Wert sondern als Definition angezeigt.

Wenn wir jetzt auf die View in der Anzeige wechseln sehen wir folgendes Ergebnis:

Hinweis:
Beim Einsatz von zu vielen Objekt-Bindings kann es zu Performance-Problemen kommen. Ich bin hier noch auf der Suche nach einer alternativen Lösung.

Ich hoffe euch gefällt dieser kurzer Artikel.
Über Kommentare unterhalb des Artikels oder Feedback per E-Mail freue ich mich wie immer 🙂