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 siebten Teil schauen wir uns das Wetter Widget genauer an.
Um das Wetter Widget in der Visualisierung verwenden zu können, benötigst Du den Adapter „Das Wetter“ oder alternativ den „yr“ Adapter. Ich verwende in meiner Visualisierung den Adapter „Das Wetter“. Zudem muss der Adapter entsprechend eingerichtet und Wetter-Objekte angelegt sein. Weiter sollte mindestens die Version 0.1.4 installiert sein.
Um das Widget nutzen zu können, müssen wir im ersten Schritt einen neuen Raum „any“ in den Aufzählungen anlegen. Dieser Raum wird nachher in den Objekten verwendet.
Im nächsten Schritt wechseln wir in die Objekt-Ansicht und vergeben für folgenden Datenpunkt die unten genannten Eigenschaften:
daswetter.0.NextDays.Location_1
- Raum: Any
- Funktion: funcWeather
Dazu klickt ihr einfach auf die entsprechende Spalte des Datenpunkts und wählt in der Liste der Einträge den Raum und die Funktion aus.
Nun sind die Vorbereitungen in der ioBroker Objektstruktur abgeschlossen.
Im nächsten Schritt müssen wir die Entitäten für den lovelace-Adapter aktualisieren. Dazu einfach den Adapter Neu starten oder alternativ in der Adapter-Konfiguration die Entitäten aktualisieren. Nach der Aktualisierung der Entitäten sollte in der Liste der Entitäten die Entität für „Weather.“ zu sehen sein.
wir können jetzt in die lovelace Konfiguration wechseln und dort das Widget auf der entsprechenden Tab-Lasche einfügen. Ich möchte das Widget auf der Startseite „Übersicht“ der Visualisierung einfügen, also wechsele ich auf die Tab-Lasche und klicke auf die Plus-Schaltfläche.
In der Widget-Auswahl wählen wir hier das Widget „Weather Forecast“.
Nun müssen wir das eingefügte Widget konfigurieren.
Der Name ist optional, er wird als Überschrift in dem Widget eingeblendet. Ich habe hier die Überschrift „Wetter in Gerlingen“ verwendet. Als Entität wählen wir hier den vorher definierten Datenpunkt ausgewählt.
In der Vorschau werden direkt die Wetter-Informationen eingeblendet.
So einfach habt ihr die Wetter-Aussichten des Adapters „Das Wetter“ in lovelace integriert. Über die
Bekannte Probleme bei der Einrichtung des Widgets
- Invalide Date
Anstatt den Tagesnamen steht hier nur „Invalide Date“.
Lösung: Bitte aktualisiere den lovelace-Adapter auf die Version Version 0.1.4 (Stand August 2019)
Ü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