ioBroker HABPanel – Teil 2 – Dashboard und Widgets

Matthias Korte

vor 5 Jahren

In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.

Im zweiten Teil fügen wir nun die ersten Widgets zu unserem Dashboard „Home“ hinzu. Dazu fahren wir mit dem Cursor über den Name des Dashboard. Neben dem Namen wird dann ein Stift-Symbol für die Aktivierung des Bearbeitungsmodus eingeblendet.

Im Bearbeitungsmodus stehen folgende Funktionen zur Verfügung:

Im ersten Schritt möchte ich einen eigenen Datenpunkt mit einer Zeichenfolge anzeigen. In meiner Visualisierung in VIS nutze ich diese Datenpunkte zur Anzeige des Fenster-und Türstatus. Für die Anzeige von Zeichenfolgen klicken wir nun einfach im Menü Add Widget auf Dummy.

Nun wird das Dummy-Widget auf dem Dashboard dargestellt. Über die Bearbeiten-Schaltfläche oben rechts im Widget können wir die Bearbeitungsfunktion Edit aufrufen.

In den Einstellungen des Widgets können wir nun einen neuen Namen sowie das anzuzeigende Item auswählen. Zudem stehen Format-Optionen sowie Einstellungen für optionale Icons zur Auswahl. Im ersten Schritt passen wir hier nun den Namen und das Item über die Datenpunkt-Auswahl an.

Nach dem Auswählen des entsprechenden Datenpunktes sehen die Einstellungen des Widgets so aus:

Ich habe zudem noch ein zweites Dummy-Widget für den Fensterstatus eingefügt.

Im nächsten Schritt können wir die Größe des Widgets noch entsprechend anpassen. Da hier nur relativ kurze Text-Informationen dargestellt werden, kann ich hier die Größe minimieren.

Nun können wir die Konfiguration speichern und zurück in die Visualisierung gehen. Die Anzeige der beiden Dummy-Widgets schaut nun so aus:

Im nächsten Schritt legen wir uns ein weiteres Dashboard für die Beleuchtung an. Auf diesem neuen Dashboard möchte ich die komplette Beleuchtung des Smart-Home steuern.