In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.
Im ersten Schritt installieren wir nun das HABPanel über den entsprechenden Adapter. Dazu müssen wir zunächst den Verwahrungsort anpassen. Auf der Lasche „Haupteinstellungen“ muss der aktive Verwahrungsort auf „latest“ umgestellt werden.
Dazu wechseln wir zunächst auf den Bereich „Adapter“ und suchen nach „hab“. Über die Plus-Schaltfläche rechts können wir den Adapter „HABPanel“ installieren.
Nach der Installation finden wir im Bereich „Instanzen“ die neue Instanz des Adapters „HABPanel“. Über das Icon „Adapter-Webseite öffnen“ wird das HABPanel geöffnet.
Nach dem Start von HABPanel können wir nun mit der Einrichtung beginnen. Über die Zahnrad-Schaltfläche oben rechts kommen wir in den Bearbeitungsmodus des Adapters. In diesem Modus können wir die sogenannten Dashboards definieren. In einem Dashboard können verschiedene Widgets zusammengefasst werden. Ein Dashboard kann z.B. für einen Raum oder eine Gruppe von Sensoren oder Aktoren verwendet werden (z.B. Beleuchtung oder Temperatur).
In der folgenden Grafik wird der Aufbau von HABPanel mit den verschiedenen Elementen Registry, Panel Configuration, Panel, Dashboard und Widget verdeutlicht.
Nun beginnen wir mit dem Klick auf das Zahnrad des Bearbeitungsmodus.
Im Bearbeitungsmodus können wir nun ein neues Dashboard anlegen, bestehende Dashboards bearbeiten oder das Panel bearbeiten.
Um eine neue Visualisierung zu erzeugen legen wir uns nun ein neues Dashboard an. Im ersten Schritt legen wir das Dashboard „Home“ an, auf dem verschiedene Widgets für Beleuchtung und Status angezeigt werden sollen.
Wir sehen jetzt das hier angelegte Dashboard „Home“. Im nächsten Schritt können wir den Bearbeitungsmodus über die Zahnrad-Schaltfläche verlassen.
Hier sehen wir jetzt den grundsätzlichen Aufbau der Visualisierung. In der Liste links werden die einzelnen Dashboards aufgelistet. Auf der rechten Seite sehen wir den Inhalt des Dashboards.
Im aktivierten Bearbeitungsmodus können die Einstellungen eines Dashboard über das markierte Symbol aufgerufen werden.
In den Dashboard Settings kann der Name das Dashboard bearbeitet werden. Zudem kann ein Background Image, Icons sowie weitere Farbeinstellungen verändert werden. Auch das Löschen von Dashboard geht über diesen Dialog (unten links).
Im nächsten Artikel werden wir beginnen Widgets für die Beleuchtung oder den Status auf das Widget zu übernehmen.
ioBroker HABPanel
- Teil 1 – Installation und Grundlagen
- Teil 2 – Dashboard und Widgets
- Teil 3 – Custom Widgets
- Teil 4 – Custom Widgets importieren (JSON-Format)
- Teil 5 – Custom Widgets anpassen und erweitern
- Teil 6 – Eigenes Widget erstellen
- Teil 7 – Unterstützung von verschiedenen Geräten und Auflösungen
- Teil 8 – Tür-/Fensterkontakt visualisieren
- Teil 9 – Das Chart Widget
- Teil 10 - Mit dem Frame-Widget eine VIS-View einbinden
- Teil 11 - Script über Button starten
- Teil 12 - Das Timeline-Widget
- Teil 13 - Das Template-Widget
- Teil 14 - Template Wissenssammlung
- Teil 15 – Das Slider-Widget
- Teil 16 – Das Dummy-Widget
- Teil 17 – Das Knob-Widget
- Teil 18 – Das Clock-Widget
- Teil 19 – Das Button-Widget
- Teil 20 – iCal Termine HTML-Darstellung
- Teil 21 – OpenWeatherMap Widget
- Teil 22 – Image Widget
- Teil 23 – Selection Widget
- Teil 24 – Online-Status Widget
Ich hoffe Dir gefällt der Artikel. Ich freue mich über Deinen Kommentar 🙂