FTUI Widget Bar
Das Bar Widget ist ein Widget für FHEM Tablet UI V2, mit dem ein Reading eines FHEM-Devices in Form eines horizontalen Balkens mit rundem Querschnitt angezeigt wird.
Es ist nicht in den Standard-Widgets von FTUI2 enthalten, sondern wurde 2019 in [1] veröffentlicht. Zur Benutzung bitte den Anweisungen unter Installation folgen.
Attribute
| Attribut | Beschreibung | Standard-Wert | Beispiel |
|---|---|---|---|
| data-device | Name des Device, dessen Reading angezeigt werden soll | data-get="G.Verb" | |
| data-get | Name des Readings, dessen Wert angezeigt werden soll | data-get="power" | |
| data-part | RegEx oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll | ||
| data-fix | Angegebene Anzahl an Dezimalstellen einhalten | (-1 -> nicht numerisch) | |
| data-max | Zahlenwert, bei welchem der Balken zu 100% gefüllt ist | 1 | data-max="20.0" |
| data-color | Fester Wert für die Farbe des Balkens. Erlaubte Werte hängen von den Definitionen im SVG-Teil ab, siehe unten. Mit dem unten gegebenem Beispiel sind erlaubte Farben "red", "green", "bue", "pink", "orange" | data-color="pink" | |
| data-unit | Einheit nach Zahl hinzufügen | data-unit="m³" | |
| data-interval | Anzahl Millisekunden, nach denen das Widget aktualisiert werden soll | 0 -> kein Auto-Refresh | data-interval="5000" |
- ↑ P.A.Henning: Smart Home mit FHEM, Carl Hanser Verlag München 2019, 341 Seiten, ISBN 978-3-446-45873-4
Installation
Widget-Datei widget_bar.js
Dazu muss im ersten Schritt eine Widget-Datei widget_bar.js erstellt werden, die (mit den korrekten Rechten) im Verzeichnis /opt/fhem/www/tablet/js gespeichert wird.
Auf der FTUI-Seite
Die Seite, auf welcher das Bar-Widget angezeigt werden soll, benötigt einerseits eine unsichtbare Region, deren sichtbare Kopien später das Widget enthalten werden. Dazu muss irgendwo auf dieser Seite eine HTML-Division eingebaut werden, gerne direkt nach dem <body>-Tag.
<div style="visibility:hidden">
<svg id="svg200x150" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 225" width="200px" height="150px"> </svg>
</div>
Außerdem wollen wir natürlich die Farben des Widgets durch schicke Gradienten darstellen, und benötigen die grafische Struktur des Widgets. Dazu gibt es eine SVG-Region, die wegen einer Breite und Höhe von jeweils Null Pixel unsichtbar ist. Also gleich im Anschluss an die unsichtbare HTML-Division von oben: