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 🙂

Newsletter
Immer auf dem Laufenden bleiben und keinen Artikel mehr verpassen – Jetzt am Newsletter anmelden.

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.

5 Gedanken zu „ioBroker Visualisierung mit lovelace – Teil 12 – History Graph Card

  • 25. Dezember 2019 um 7:50
    Permalink

    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

    Antwort
    • 25. Dezember 2019 um 18:22
      Permalink

      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

      Antwort
  • 27. Dezember 2019 um 7:22
    Permalink

    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

    Antwort
  • 12. April 2020 um 21:22
    Permalink

    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.

    Antwort
  • 6. Mai 2020 um 21:30
    Permalink

    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?

    Antwort

Schreibe einen Kommentar

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