ioBroker Visualisierung mit lovelace – Teil 13 – Vertical / Horizontal Stack Card

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 13. Teil der Artikelreihe werden wir uns die Karten „Vertical“ und „Horizontal“ Stack anschauen. Mit diesen beiden Kartentypen kannst Du weitere Karten in der Visualisierung anordnen.

Grundsätzlich werden die Karten nach dem folgenden Schema angeordnet. Die erste Karte wird mittig oben in der Visualisierung eingeblendet. Beim Erreichen des unteren Endes wird eine neue Spalte begonnen und dort wieder von oben nach unten fortgesetzt. Die Anzahl an Spalten richten sich dabei an der jeweiligen Display-Größe.

 

 

In der Visualisierung werden beispielsweise drei Karten zur Lichtsteuerung wie folgt dargestellt:

 

Mit dem Horizontal Stack können die Karten horizontal angeordnet werden. Die zugeordneten Karten des horizontalen Stacks werden nun horizontal angeordnet.

 

In der Kartenkonfiguration muss die Karte komplett manuell definiert werden. Als Type wird zunächst „horizontal-stack“ definiert. Die einzelnen Karten werden dann unterhalb der Definition „cards“ aufgelistet. Hier können alle Arten von Karten eingefügt werden.

 

Die „Vertical“ Stack Karte unterstützt die vertikale Darstellung.

 

Zudem ermöglichen die Stack-Karten auch die Mischung in der Darstellung. In der folgenden Ansicht

 

In der Kartenkonfiguration wird hier zunächst ein „vertical-stack“ definiert. Mit der ersten Karte werden alle Entitäten gesteuert. Zudem wird im „vertical-stack“ ein „horizontal-stack“ eingefügt, in dem dann alle einzelnen Entitäten nach rechts angeordnet dargestellt werden.

 

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