smarthome-tricks.de

ioBroker Visualisierung mit lovelace – Teil 1 – Installation und Grundlagen

Matthias Korte

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 ersten Teil werden wir nun mit der Installation und den Grundlagen von lovelace beginnen.

 

Inhaltsverzeichnis

  1. Voraussetzungen und Installation
  2. Konfiguration der Navigation
  3. Weitere Funktionen

 

1. Voraussetzungen und Installation

Bevor wir mit der Installation und Konfiguration des Adapters beginnen können, müssen folgende Voraussetzungen überprüft und erfüllt sein:

Der Adapter ist aktuell noch nicht im Produktiv-Stand von ioBroker enthalten. Daher müssen wir den Adapter über Github installieren. Dazu wechseln wir auf den Bereich „Adapter“ und klicken auf die Schaltfläche „aus eigener URL installieren“.

 

 

Auf der neuen View können wir nun auf der Lasche „Von Github“ den Adapter „lovelace“ auswählen und installieren.

 

Nach der Installation des Adapters sollte der Adapter jetzt in der Liste der „Instanzen“ aufgelistet sein. Bitte darauf achten, dass der Status auf auf OK steht und der Adapter fehlerfrei gestartet ist. Die Konfiguration vom lovelace kann dann über die Adapter-Webseite gestartet werden.

 

2. Konfiguration der Navigation

Nach dem Start der Adapter-Webseite sehen wir nun eine leere Umgebung, welche wir über den Sandwich-Button oben rechts konfigurieren können. Um die Konfiguration zu starten klicken wir nun also im Menü auf den Eintrag „Benutzeroberfläche konfigurieren“.


 

In der Konfiguration können wir nun die einzelnen Laschen konfigurieren. Auf den Laschen können z.B. Gewerke, Räume oder sonstige logische Untergliederungen der Haussteuerung dargestellt werden. Ich erstelle meine Visualisierungen auf der obersten Navigationsebene nach den Gewerken (Licht, Temperatur, Status, etc…).

 

Im nächsten Schritt klicke ich dazu nun auf die Plus-Schaltfläche um eine weitere Lasche hinzuzufügen.

 

In der Konfiguration kann nun ein Titel für die Lasche definiert werden. In das Feld Icon können wir alternativ zum Titel auch ein entsprechendes Icon definieren. Dazu müssen wir folgende Notation verwenden:

mdi: {Icon-Name}

Den Platzhalter {Icon-Name} müssen wir mit dem entsprechenden Namen des Icons ersetzen. Eine Liste aller unterstützten Icons findest Du hier:

https://materialdesignicons.com/

Ein Beispiel-Icon für die Beleuchtung schaut dann so aus:

mdi:lightbulb-on

 

Auf der Lasche „Badges“ kannst Du Entitäten z.B. Sensoren auswählen, die dann am oberen Bildschirmrand der Visualisierung dargestellt werden. Hier könnte man z.B. wichtige Informationen des jeweiligen Gewerkes einblenden. Optional wäre es auch möglich die Navigation nach Räumen zu gliedern und so in den Badges z.B. alle Sensorwerte darzustellen und in den Widgets die entsprechenden Aktoren zur Steuerung von Geräten.

 

3. Weitere Funktionen

Mit den Pfeilen links und rechts neben der Bezeichnung der Lasche kann die Lasche in der Navigationsstruktur nachträglich verschoben werden.

 

 

Wir können nun so unsere Grundstruktur der Visualisierung aufbauen und festlegen. Im zweiten Schritt fügen wir im nächsten Artikel nun die entsprechenden Widgets ein, mit denen wir Informationen darstellen oder Aktoren steuern können.

Ich hoffe euch gefällt dieser Artikel. Über Kommentare unterhalb des Artikels oder per E-Mail freue ich mich wie immer.

Die mobile Version verlassen