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.
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 🙂