ioBroker Visualisierung mit lovelace – Teil 12 – History Graph Card

In dieser Artikelreihe zeige ich Dir, wie Du eine Visualisierung mit lovelace UI erstellen kannst.

Mit Lovelace kannst Du Visualisierungsoberflächen für ioBroker einfach und schnell konfigurieren. Die Visualisierung kommt ursprünglich von der Home-Assistant Plattform und wurde nachträglich auch für ioBroker verfügbar gemacht. In der aktuellen Version funktionierten noch nicht alle Widgets vollständig, eine einfache Visualisierung kann aber ohne Probleme erstellt werden. In der Artikelreihe werde ich die Grundlagen sowie die Möglichkeiten der Visualisierung darstellen. Im 12. Teil der Artikelreihe werden wir uns die Karte „History Graph Card“ genauer ansehen. Mit dieser Karte können wir in der Visualisierung den Verlauf von Werten (z.B. Temperatur) darstellen.

Im ersten Schritt wechseln wir nun die Konfiguration der Visualisierung und klicken auf die Plus-Schaltfläche, mit der eine neue Karte eingefügt werden kann.

In der Auswahl der verfügbaren Karten klicken wir nun auf die Karte „HISTORY GRAPH“.

Nun wird die Karte eingefügt und wir können die Kartenkonfiguration öffnen. In der Konfiguration können wir zunächst einen optionalen Titel für die Karte anlegen. Zudem können wir den Betrachtungszeitraum des Graphen über die Angabe in Stunden verändern. Ich belasse den Wert hier zunächst bei 24 Stunden. Im nächsten Schritt können wir über die Entitäten-Auswahl die einzelnen Entitäten hinzufügen, welche später auf der Visualisierung angezeigt werden sollen.

Für meine Visualisierung habe ich hier die Temperatur sowie die Luftfeuchtigkeit des Aussensensors verwendet.

Falls ihr an dieser Stelle eigene Namen für die jeweiligen Entitäten vergeben wollt, könnt ihr dies über den Code-Editor durchführen. Dazu einfach auf die Schaltfläche „Code-Editor anzeigen“ klicken. Nun wird der YAML-Code angezeigt, welcher durch die Konfiguration generiert wurde. Wir können hier jetzt den Entitäten noch den Zusatz „name“ hinzufügen. Achtet dabei aber auf die Einrückung im Code, ansonsten erhaltet ihr hier einen Fehler.

In der Visualisierung wird die Karte nun wie folgt dargestellt. Leider ist es derzeit noch nicht möglich die Farbe der Linien anzupassen.

Über Kommentare unterhalb des Artikels oder per E-Mail freue ich mich wie immer 🙂