In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.
Im 16. Teil der HABPanel-Artikelreihe schauen wir uns das Dummy-Widget an. Ich finde der Name des Widgets ist etwas unpassend gewählt. Mit dem Widget kann der Inhalt von beliebigen Datenpunkten auf dem Dashboard dargestellt werden.
Im ersten Schritt öffnen wir das Dashboard, auf dem das Widget eingefügt werden soll. Über die Schaltfläche „Add Widget“ fügen wir dann das „Dummy-Widget“ ein.
Nach dem wir das Widget eingefügt haben können wir nun mit der Konfiguration beginnen. Dazu klicken wir im Menü auf die Edit-Schaltfläche.
In der Widget Konfiguration wählen wir zunächst den anzuzeigenden Datenpunkt im Bereich Item aus. Ich habe hier einen Datenpunkt für die Innen-Temperatur der Garage ausgewählt. Die Einstellung Name können wir nun anpassen. Zudem können wir hier die Schriftgröße des anzuzeigenden Wertes anpassen. Für das Beispiel weiter unten habe ich hier eine Größe von „30“ gewählt. Neben der Schriftgröße können wir zudem eine Maßeinheit sowie das Format zur Anzeige definieren. Mit der Format-Angabe „%.1f“ wird die Fließkommazahl mit einer Nachkommastelle ausgegeben. Hier können wir natürlich auch andere Format-Optionen verwenden:
Beispiele
- %.1f – Anzeige mit einer Nachkommastelle
- %.2f – 2 Nachkommastellen
Optional können wir im Bereich Backdrop-Icon zudem ein Hintergrund-Icon für das Widget definieren.
Mit der Option „Icon“ kann ein Icon vor dem Inhalt des Widgets eingeblendet werden. Die Vorgehensweise ist hier die selbe wie beim „Backdrop Icon“.
Nach dem wir nun die Konfiguration des Dummy-Widgets gespeichert haben schaut das Widget in der Ausführung der Visualisierung so aus:
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 🙂