In dieser Artikelreihe zeige ich Dir die Visualisierungs-Oberfläche HAPPanel für ioBroker.
Im 18. Teil der Artikelreihe schauen wir uns das Clock-Widget an. Mit dem Clock-Widget kannst Du dir die aktuelle Uhrzeit auf Deiner Visualisierung darstellen. Das Clock-Widget unterstützt dazu verschiedene Darstellungsformen. Im ersten Schritt fügen wir nun das Widget auf unserem Dashboard ein. Dazu klicken wir auf die Schaltfläche „Add Widget“ und wählen aus der Liste das „Clock“ Widget aus.
Im nächsten Schritt öffnen wir die Konfiguration des Widgets. Klicke dazu zunächst auf die drei Punkte rechts im Widget-Header und dann im Menü auf die Schaltfläche „Edit“.
In den Einstellungen des Clock-Widgets können wir den Namen sowie den Modus des Widgets ändern. Das Widget unterstützt eine analoge und digitale Anzeige der Uhrzeit. Bei der Verwendung des analogen Modes wird die Uhrzeit anhand von Zeigern auf einem Zifferblatt dargestellt. Bei der Darstellung als digitale Uhr wird die Uhrzeit in Form von einem Ziffernfolge im Widget dargestellt. Weiter unten habe ich dazu noch zwei Beispiele eingefügt. Neben der Mode-Einstellung kann zudem für die analoge Darstellung ein optionales Theme (Darstellung) eingestellt werden. Bei der Verwendung des digitalen Modes kann die Uhrzeit über eine Format-Zeichenkette konfiguriert und zudem die Schriftgröße eingestellt werden. In meinem Beispiel unten habe ich den Namen des Widgets auf „Demo“ gesetzt.
Wenn wir den Mode auf „Digital“ einstellen sieht das Widget wie folgt aus:
Der analoge Modus verfügt mit dem „light“ Theme über folgende Darstellung:
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 finde das Widget ganz praktisch für die Visualisierung.
Verwendest Du das Widget in Deiner Visualisierung? Ich freue mich über Deinen Kommentar und Anregungen zum Einsatz des Widgets.