ioBroker HABPanel – Teil 19 – Das Button-Widget

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

Im 19. Teil der Artikelreihe schauen wir uns das Button-Widget genauer an. Mit dem Button-Widget wird eine Schaltfläche auf dem Dashboard eingefügt, mit der eine Aktion ausgeführt werden kann. Im ersten Schritt öffnen wir nun das Dashboard, auf dem wir den Button einfügen möchten. Über die Schaltfläche „Add Widget“ können wir nun das Button-Widget einfügen.

 

 

Im nächsten Schritt öffnen wir die Konfiguration des Widgets über die Bearbeiten-Schaltfläche.

 

Über die Konfiguration definieren wir im ersten Schritt der Konfiguration den Action-Type des Buttons. Mit dem Action-Type kann der Funktionsmodus der Schaltfläche eingestellt werden. Folgende Typen stehen zur Verfügung:

• Send a fixed command to an item
  Mit diesem Action-Type kann ein fest definierter Wert in einen Datenpunkt geschrieben werden.
• Alternative between 2 states
  Klassischer Schalter mit zwei States (z.B. true oder false, 1 oder 0)
• Navigate
  Schaltfläche zur Navigation in ein anderes Dashboard

 

Für den Artikel habe ich den Button nun auf den Action-Type „Alternate item between 2 states“ eingestellt. Als Datenpunkt habe ich einen Homematic-Zwischenstecker gewählt, mit dem ich das Licht im Esszimmer steuern kann. Als Command und Alternative Command Value wird nun automatisch true und false eingesetzt.

 

 

 

 

 

Auf der Tab-Lasche „Display“ können wir die Anzeige des Widgets konfigurieren. Über die Label Font Size kann die Schriftgröße des anzuzeigenden Textes eingestellt werden. Zudem kann ein Hintergrund-Icon (backgrop Icon) sowie ein Icon aktiviert werden. Über die Einstellung „Show the item’s state value“ kann der aktuelle Wert des Datenpunktes zusätzlich ausgegeben werden.

 

Auf den Tab-Laschen „Inactive“ und „Active“ kann zudem eine Farbe für jeden Zustand hinterlegt werden.

 

Hier die Abschließende Konfiguration des Button-Widgets.

 

Nach dem Verlassen des Bearbeitungsmodus wird das Widget jetzt so auf der Visualisierung angezeigt. Was Widget wird mit rotem Hintergrund dargestellt, wenn der Datenpunkt auf „Inactive“ (false) steht. Wenn der Datenpunkt auf (true) steht, wird das Widget mit einem grünen Hintergrund dargestellt.

 

Wie oben schon erwähnt kann das Widget auch einen fest definierten Wert in einen Datenpunkt schreiben. Dazu wird der Datenpunkt sowie das Command value definiert. Ich habe diese Form des Buttons bereits im Artikel Teil 11 – Script über Button starten gezeigt.

 

Der Button besitzt zudem die Funktionalität als Navigations-Schaltfläche zu interagieren. Dazu wird der Action-Type auf „Navigation“ eingestellt. Der Button unterstützt die Navigation auf ein anderes Dashboard sowie auf eine eigene URL. In der Auswahl Dashboard können wir nun das Dashboard auswählen, welches bei einem Klick auf den Button geladen werden soll.

 

 

Ich hoffe Dir gefällt der Artikel. Ich freue mich über Deinen Kommentar 🙂