ioBroker HABPanel – Teil 15 – Das Slider-Widget
In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.
Im 15. Teil der Artikelreihe schauen wir uns das Slider-Widget genauer an. Mit dem Slider-Widget kannst Du einen Schieberegler auf Deiner Visualisierung darstellen, mit dem ein Datenpunkt verändert werden kann. In meinem Beispiel wollen wir einen Slider in die Visualisierung integrieren mit dem die Helligkeit der Wohnzimmer-Beleuchtung (Philips Hue) geregelt werden kann. Der Slider steuert dann den Datenpunkt (level) der Wohnzimmers.
Im ersten Schritt fügen wir nun auf dem Dashboard das neue Widget „Slider“ ein.
Nach dem Einfügen habe ich direkt die Größe des Widgets angepasst. Im nächsten Schritt starten wir mit der Bearbeitung des Widgets über die Bearbeiten-Schaltfläche des Widgets.
In den Einstellungen des Widgets habe ich im ersten Schritt den Datenpunkt „Item“ ausgewählt. Da ich hier Philips Hue Leuchtmittel einsetze habe ich den Datenpunkt „level“ aus dem Philips Hue Adapter eingestellt. Anschließend habe ich noch den Namen auf „Wohnzimmer Helligkeit“ abgeändert.
Auf der Tab-Lasche „Advanced“ können noch zusätzliche Einstellungen getroffen werden. Optional kann z.B. der Titel oder die Limits ausgeblendet werden.
Darstellung der Einstellungen
In der folgenden Tabelle werden die Einstellmöglichkeiten anhand des Beispiels „Wohnzimmer Helligkeit“ der Beleuchtung dargestellt:
Hide title label | |
Hide limits label | |
Hide current value label | |
Show ticks | |
Show ticks label | |
Reverse direction | |
Big slider |
Wenn wir nun den Bearbeitungsmodus beenden und das Dashboard neu anzeigen sieht das Ergebnis so aus:
So lassen sich nun einzelne Leuchtmittel oder gesamte Räume einfach und schnell über das Slider-Widget steuern.
Ich hoffe Dir gefällt der Artikel. Ich freue mich über Deinen Kommentar 🙂
Hi Matthias,
ich habe inzwischen sowohl in VIS als auch im HABPanel Slider eingefügt. Diese zeigen aber beim Aufrufen der Website default den Wert 0.
Ich hätte gerne, dass der aktuelle Wert angezeigt wird, bspw. 75%.
Hast du hier eine Idee?
Danke & Gruß
Steven