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
Bevor wir mit der Installation und Konfiguration des Adapters beginnen können, müssen folgende Voraussetzungen überprüft und erfüllt sein:
- Mindestens Node.Js 8.x
- Aktuelle Version des Controllers
- ioBroker Haupteinstellungen – Verwahrungsort auf „latest“ einstellen
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.
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