ioBroker HABPanel – Teil 17 – Das Knob-Widget
In dieser Artikelreihe zeige ich Dir eine weitere Visualierungsoberfläche für ioBroker.
Im 17. Teil der Artikelreihe schauen wir uns das Knob-Widget an. Mit dem Widget wird ein Ring-Diagramm angezeigt, mit dem numerische Werte dargestellt werden können. Über das Diagramm kann der Wert auch verändert 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 „Knob-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 den Knob Einstellungen wählen wir zunächst den Datenpunkt, den wir anzeigen möchten. Ich habe hier den Datenpunkt meines Aussensensors gewählt, welcher den Batteriestatus in Prozent zurückgibt. Nach dem Setzen des Items können wir dann den Namen anpassen. Ich habe hier als Namen nur „Außen“ angegeben. Da der Batteriestatus auf „readonly“ steht, wird hier im Widget die Einstellung „Disable interaction“ direkt aktiviert.
Für die Darstellung von Farbwerten je nach Batteriestatus habe ich auf der Tab-Lasche „Ranges“ folgende Bereiche anlegt:
- 0 – 10 (rot)
- 11 – 40 (gelb)
- 41 – 100 (grün)
Wenn wir nun den Bearbeitungsmodus verlassen wir das Widget so dargestellt:
Im nächsten Schritt fügen wir noch die drei farbigen Bereiche als Referenz ein. Dazu müssen wir auf der Tab-Lasche „Skin“ den Type auf „Tron“ ändern. Über die Tron-Einstellungen können wir zudem die Breite der Referenz (Width) sowie den Platz zwischen dem Diagramm und der Referenz (Space) angeben. Ich habe die Breite auf 10 Pixel, den Space auf 8 Pixel festgelegt.
Das Ergebnis schaut nun so aus:
Zusätzlich können wir in der Tab-Lasche „Skale“ eine Skalierung definieren. Dazu habe ich den Skale-Type auf Lines umstellen.
Das Ergebnis schaut nun so aus:
Ich hoffe Dir gefällt der Artikel. Ich freue mich über Deinen Kommentar 🙂
