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 🙂

Matthias Korte

Hauptberuflich Software-Entwickler und seit einigen Jahren Smart-Home Fan. Angefangen hat alles mit einem RaspberryMatic und einer schaltbaren Steckdose. Mittlerweile habe ich einige Steckdosen, Sensoren, und Thermostate sowie ioBroker zur Visualisierung im Einsatz.

6 Gedanken zu „ioBroker VIS – Object Binding im HTML-Widget

  • 21. August 2018 um 12:29
    Permalink

    Wäre dies auch als Input möglich?

    Antwort
    • 24. August 2018 um 6:19
      Permalink

      Ja, das geht auch. Der Artikel dazu folgt in den nächsten 1-2 Tagen 🙂

      Antwort
  • 26. November 2018 um 21:37
    Permalink

    Kann ich die Zahlen (Datenpunkte) auch formatieren? Z.B. nur 1 Nachkommastelle?

    Antwort
    • 4. Dezember 2018 um 19:05
      Permalink

      Hallo, mit dem HTML-Widget eher nicht. Für die Formatierung von numerischen Werten würde ich das Widget „Number“ verwenden. Schau mal bei mir in der VIS-Artikelreihe, da ist ein Artikel zum Thema dabei 🙂

      Antwort
  • 28. November 2018 um 21:40
    Permalink

    Ist es auch möglich die Werte zu formatieren, d.h. z.B. die Nachkommastellen auf 1 zu begrenzen?

    Antwort
    • 4. Dezember 2018 um 19:05
      Permalink

      Hallo, mit dem HTML-Widget eher nicht. Für die Formatierung von numerischen Werten würde ich das Widget „Number“ verwenden. Schau mal bei mir in der VIS-Artikelreihe, da ist ein Artikel zum Thema dabei 🙂

      Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

* Die Checkbox für die Zustimmung zur Speicherung ist nach DSGVO zwingend.

Ich akzeptiere