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