ioBroker Visualisierung mit lovelace – Teil 9 – Gauge

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 9. Teil der Artikelreihe werden wir uns die Karte „Gauge“ genauer anschauen. Mit dieser Karte können wir numerische Werte in Form eines Tachometers darstellen. Ich nutze diese Karte für die Visualisierung unseres Vorrats für Regenwasser zum Gießen.

In den Objekten haben ich dazu einen separaten Datenpunkt, in dem der aktuelle Füllstand in Prozent der Regentonnen gespeichert wird. Über die Eigenschaften des Datenpunkts müssen wir nun die Freigabe für Lovelace erstellen. Dazu klicken wir auf die Settings-Schaltfläche.

In den Einstellungen für Lovelace wird zunächst der Aktivierungs-Haken gesetzt. Als Entity-Type wählen wir hier „sensor“ aus. Den Namen der Entität habe ich auf „SensorLevel“ gesetzt.

Im ersten Schritt wechseln wir nun in den Bearbeitungsmodus der Visualisierung. Dann wählen wir die View aus, auf dem wir die Karte einfügen möchten. In meinem Fall soll die Karte direkt auf der Übersicht-View dargestellt werden. Über die Plus-Schaltfläche können wir im nächsten Schritt die Karte hinzufügen.

In der Kartenkonfiguration wählen wir hier die Karte „Gauge“ aus. Mit einem Klick auf die Karte wird diese zur View hinzugefügt.

In der Kartenkonfiguration müssen wir nun die Eigenschaften definieren. Im ersten Schritt wählen wir dazu die Entität aus. In der List der Entitäten finden wir nun unseren erstellen Sensor-Wert für den Füllstand der Regentonnen. Nach der Auswahl der Entität passe ich auf der Karte zudem nochmals den Namen für die Anzeige an. Im Feld Unit können wir nun die Maßeinheit festlegen. In unserem Fall handelt es sich um einen Füllstand in Prozent. Als Minimum-Wert habe ich 0 festgelegt, das Maximum auf 100 gesetzt. Zudem können wir über die Severity-Einstellung noch einen eigenen Farbwert definieren. In der Vorschau der Karte sehen wir nun direkt wie die Karte in der Visualisierung angezeigt wird.

Wie schon in der Vorschau gezeigt, wir der Füllstand nun wie folgt in der Visualisierung dargestellt.

Über die Severity-Einstellung können je nach Wert zudem noch unterschiedliche Farben eingestellt werden. Somit lassen sich kritische Füllstände super visualisieren.
Für unser Beispiel habe ich folgende Grenzwerte definiert:

Rot – 0-30 %
Gelb – 30-70%
Grün – >70%

In der Konfiguration tragen wir dazu bei Red 0 ein. Bei Yellow wird 30 und bei Green 70 definiert.

In der Visualisierung werden die unterschiedlichen Werte und Farben nun folgendermaßen dargestellt:

Ich hoffe ich konnte Dir damit auch die Gauge-Karte näher erklären. Über Kommentare unterhalb des Artikels oder per E-Mail freue ich mich wie immer 🙂