ioBroker Visualisierung mit lovelace – Teil 26 – TrashSchedule

Matthias Korte

vor 2 Jahren

In diesem Artikel zeige ich Dir, wie Du das Widget des TrashSchedule-Adapters in ioBroker lovelace integrieren kannst.

In den letzten Artikeln habe ich bereits einige Karten und Tipps und Tricks rund um iobroker lovelace vorgestellt. Mit dem neuen Update des Adapter kamen jetzt auch neue Karten und Funktionen hinzu, welche ich nun gerne in einem kleinen Artikel zeige. In diesem Artikel zeige ich Dir, wie Du die Visualisierung des TrashSchedule-Adapters in Lovelace integrieren kannst. Die Integration wird relativ einfach per integrierter ioBroker VIS View umgesetzt.

Im ersten Schritt benötigen wir eine ioBroker VIS View, welche wir dann später in Lovelace integrieren. Ich verwende für diese Views ein separates Projekt, welches bei mir dann mit views_ beginnt. Wir erstellen somit ein neues Projekt mit dem Namen views_lovelace.

Dazu öffnen wir nun ein beliebiges VIS Projekt und klicken in der Menüleiste auf Setup – Neues Projekt.

Als Projekt-Name habe ich hier views_lovelace gewählt.

Das neue Projekt wurde jetzt angelegt. Im nächsten Schritt klicken wir im Bereich Views auf die Plus-Schaltfläche. Somit können wir eine neue View anlegen.

Im Feld Neuer Name können wir jetzt den Namen der View definieren. Ich habe hier trashschedule gewählt.

Nach dem die neue View jetzt angelegt wurde, kannst Du im nächsten Schritt das TrashSchedule-Widget auf der View einfügen. Ich habe die Größe leicht verringert und das Widget relativ nah am oberen und linken Rand platziert. Über die Größe kannst Du das Widget später weiter anpassen, sodass das Widget perfekt in die lovelace Karte passt.

Im nächsten Schritt können wir nun das VIS-Projekt in der VIS-Runtime starten.

Die View wird jetzt in einem neuen Tab geöffnet. Im nächsten Schritt müssen wir die Adresse URL zur View in die Zwischenablage kopieren. Diese benötigen wir gleich in der Lovelace-Konfiguration.

Lovelace Konfiguration der Visualisierung

Im nächstenSchritt öffnen wir zunächst im Bereich Instanzen die Adapter-Webseite. Mit dieser Webseite wird die Visualisierung dargestellt. Zudem wird hier auch direkt die Konfiguration erledigt.

In der Visualisierung klicken wir dann oben rechts auf den Sandwitch-Button und dann auf die Schaltfläche „Benutzeroberfläche konfigurieren“. Nun öffnet sich die Konfiguration der Visualisierung.

Über einen Klick auf die Schaltfläche Karte hinzufügen können wir nun eine neue Karte für die Darstellung der Abfuhrtermine anlegen.

In der Karten-Auswahl wählen wir dann die hier gelb markierte Schaltfläche Webseite aus. Mit dieser Schaltfläche können wir eine Webseite in Form einer Karte darstellen.

Nach der Wahl der Karte öffnet sich jetzt die Karten-Konfiguration. Füge hier nun die vorher kopierte URL zum ioBroker VIS Projekt in das Feld URL ein. Zudem habe ich hier noch einen Titel hinterlegt. Das Seitenverhältnis in Höhe von 50% habe ich hier so belassen.

Nach dem Speichern der Konfiguration und Verlassen der Konfiguration wird die TrashSchedule View nun wie folgt in Lovelace dargestellt. Falls das Widget noch nicht vollständig, oder zu klein dargestellt wird, kannst Du nun in ioBroker VIS nochmals die Größe und Position anpassen.