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 🙂
Teil 2 – Objekte und Widgets
Teil 3 – Widgets für Sensorinformationen
Teil 4 – Widgets für Lichtsteuerung
Teil 5 – Benachrichtigungen
Teil 6 – Konfigurationseditor
Teil 7 – Das Wetter Widget
Teil 8 – Entity Filter
Teil 9 – Gauge
Teil 10 – Alarm-Panel
Teil 11 – Custom Cards
Teil 12 – History Graph Card
Teil 13 – Vertical / Horizontal Stack Card
Teil 14 – Widgets zur Steuerung von Aktoren – Das Elements-Widget
Teil 15 – Widgets zur Steuerung von Aktoren – Das Entity-Button Widget
Teil 16 – Widgets zur Steuerung von Aktoren – Das Button-Card Widget
Teil 17 – Tipps und Tricks
Teil 18 – Conditional Card
Teil 19 – Sprachsteuerung
Teil 20 – Das Markdown Widget
Teil 21 – Das iFrame Widget
Teil 22 – iFrame und Daswetter.com
Teil 23 – Picture (Bild) Glance
Teil 24 – Einkaufsliste
Newsletter
Immer auf dem Laufenden bleiben und keinen Artikel mehr verpassen – Jetzt am Newsletter anmelden.
Grundsätzlich finde ich den Ansatz und das Aussehen von Lovelace sehr ansprechend.
Leider ist es immer noch sehr „verbugt“.
Im alten Edge-Browser läuft es gar nicht, Firefox geht zu 90%.
Erst hatte ich mehrfach Probleme den Lovelace-Adapter zu installieren, das ging so weit, dass der ioBroker neu aufgesetzt werden musste.
Stellenweise können Deine Tutorials so nicht nachvollzogen werden, da im Hintergrund scheinbar wieder mal was geändert wurde. So erscheint bei mir in der Kartenkonfiguration zum History-Graph die Meldung „No GUI editor available for: history-graph“. Selbst wenn ich versuche das über den Yaml-Code einzugeben, wird mir kein Graph angezeigt, leider.
Meine lovelace-Version ist 0.23.
Bitte nicht falsch verstehen, ich finde Du machst mit Deinem Blog hier eine hervorragende Arbeit und Deine Tutorials haben mir schon sehr oft weiter geholfen und entsprechende Denkanstöße gegeben. Danke dafür.
Leider ist Lovelace noch nicht ganz soweit, dass ich es als Produktivsystem nutzen würde, der Ansatz ist jedoch toll und man ist hier glaube ich auf einem guten Weg.
nochmal vielen Dank für Deine Arbeit und noch ein paar besinnliche Feiertage.
Grüße
Hallo,
Danke für Dein Feedback und das Lob 🙂
Ich nutze die Lovelace Adapter-Version 1.0.6, damit geht es problemlos. Versuche doch mal ein Update auf die neueste Version und berichte wieder. Grundsätzlich gibt es aber noch einige Dinge, die noch nicht richtig laufen im Adapter, da muss ich Dir schon Recht geben, ich hoffe das hier in Zukunft noch breiter weiterentwickelt wird, da ich diese UI auch sehr schick und einfach finde.
Viele Grüße und Dir ebenso besinnliche Feiertage,
Matthias
Danke für die schnelle Antwort.
Ein Update auf Version 1.0.6 ist bei mir leider nicht möglich.
Trotz Umstellung auf Latest ist die max. verfügbar angezeigte Version 0.2.3.
Viele Grüße
Hallo, vorab lieben Dank für das super Tutorial, habt mir sehr geholfen Lovelace besser zu verstehen.
Habe mich nur schwer getan die „History Funktion“ zu aktivieren.
Hatte vergessen unter dem Adapter – Lovelace.0 > Haupteinstellung > Historische Instanz : zB history.0
zu setzen einfacher aber wichtiger Startpunkt 😊
Danke mach weiter so.
hey phil, sehr interessant mit der Haupteinstellung. Bei mir steht die „Historische Instanz“ auf „disabled“ und ich habe keine weitere Option. Wie hast du das hinbekommen?
Hallo, vielen Dank für deinen tollen Guide.
Ich habe bei meinem History Graph nur ein Balken Diagramm, weist du zufällig wie ich das umstelle um ein Liniendiagramm zu bekommen wie du in dem Guide ?
Danke und LG Christian
Moin Christian,
was für einen Datenpunkt verwendest Du denn für die History-Card? Ich würde mal drauf tippen, dass hier keine Maßeinheit definiert ist.
Ich verwende das Balkendiagramm zum Beispiel bei einem Tür- und Fensterkontakt. Hier wird auf dem Balken dann in grün das geöffnete Fenster angezeigt.
LG Matthias