ioBroker Visualisierung mit lovelace – Teil 16 – Widgets zur Steuerung von Aktoren – Das Button-Card Widget

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 16. Teil der Artikelreihe werden wir uns die Karte „Button-Card“ anschauen. Mit dieser Karte kann ein Aktor gesteuert steuern. Die Karte ist nicht im Standard-Umfang von lovelace enthalten, sondern wird in Form einer kundenspezifischen Karte hinzugefügt.

Die Karte kannst Du Dir auf folgendem GitHub-Projekt herunterladen:

https://github.com/custom-cards/button-card

Skrolle dazu einfach nach unten bis zum Punkt „Manuel Installation“ herunter und lade Dir die Datei button-card.js herunter.

Ich habe die Datei im Temp-Verzeichnis abgelegt.

Im nächsten Schritt wechseln wir in die Lovelace-Konfiguration. Klicke dazu in ioBroker auf den Bereich „Instanzen“ und klicke auf die gelbe markierte Konfigurationsschaltfläche des Lovelace-Adapters.

In der Adapter-Konfiguration wechseln wir auf den Bereich Kundenspezifische Karten. In diese Listenansicht können wir unsere heruntergeladene Karte einfach per Drag&Drop reinziehen und somit installieren.

Die Karte (button-card.js) wird nun in der Liste angezeigt. Im Anschluss muss der Adapter über die Neustart-Schaltfläche neu gestartet werden.

Wir haben die Karte nun in unserer Lovelace Umgebung installiert und können jetzt mit der Konfiguration fortfahren. Dazu wechseln wir wieder in die Konfiguration der Visualisierung und fügen im nächsten Schritt eine neue Karte vom Typ Manual Card hinzu.

Die Konfiguration der Karte erfolgt über den Code-Editor. Ich habe im folgenden Screenshot meine aktuelle Konfiguration eingeblendet. In der ersten Zeile der Konfiguration wird der Karten-Typ definiert. Die Entität definiert den zu steuernden Aktor. Icon und Name sollten klar sein 😉

Mit der Konfiguration confirmation wird eine Sicherheitsabfrage realisiert, diese ist natürlich optional. Die Eigenschaft color steuert die Anzeige des aktiven Status.

In der Visualisierung wird die Karte nun wie folgt dargestellt. Links wird der Aktor im Zustand aus und rechts in an dargestellt.

Die Karte unterstützt noch viele Weitere interessante Konfigurationen. Ich werde dazu in Zukunft noch einen weiteren Artikel veröffentlichen, in dem ich auf weitere Eigenschaften eingehen werden. Schreibt mir dazu doch einfach, falls euch Themen interessieren 🙂

Über Kommentare unterhalb des Artikels oder per E-Mail freue ich mich wie immer 🙂