FTUI Widget Bar: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| (5 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
Das [[{{PAGENAME}}|Bar Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem ein Reading eines FHEM-Devices in Form eines horizontalen Balkens angezeigt wird. | Das [[{{PAGENAME}}|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. Für die entsprechende Darstellung in FTUI3, siehe [[FTUI3 Widget Bar]]. | ||
Es ist nicht in den Standard-Widgets von FTUI2 enthalten, sondern wurde | Es ist nicht in den Standard-Widgets von FTUI2 enthalten, sondern wurde 2019 in | ||
<ref>P.A.Henning: <i>Smart Home mit FHEM</i>, Carl Hanser Verlag München 2019, 341 Seiten, ISBN 978-3-446-45873-4</ref> veröffentlicht. Zur Benutzung bitte den Anweisungen unter [[#Installation|Installation]] folgen. | |||
<gallery> | <gallery> | ||
File:Widget_bar_1.png | |||
File:Widget_bar_2.png | |||
File:Widget_bar_3.png | |||
</gallery> | </gallery> | ||
| Zeile 28: | Zeile 31: | ||
|'''data-unit'''||Einheit nach Zahl hinzufügen||||data-unit="m³" | |'''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" | |||
|'''data-interval'''||Anzahl Millisekunden, nach denen das Widget aktualisiert werden soll||0 -> kein Auto-Refresh||data-interval=" | |||
|} | |} | ||
<references/> | |||
=Installation= | =Installation= | ||
| Zeile 43: | Zeile 39: | ||
Dazu muss im ersten Schritt eine Widget-Datei widget_bar.js erstellt werden, die (mit | 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. | den korrekten Rechten) im Verzeichnis /opt/fhem/www/tablet/js gespeichert wird. | ||
<div class="mw-collapsible mw-collapsed"> | |||
Code:<div class="mw-collapsible-content"> | |||
<pre> | <pre> | ||
/* FTUI Plugin | /* FTUI Plugin | ||
| Zeile 168: | Zeile 165: | ||
}; | }; | ||
</pre> | </pre> | ||
</div></div> | |||
==Auf der FTUI-Seite== | ==Auf der FTUI-Seite== | ||
Die Seite, auf welcher das Bar-Widget angezeigt werden soll, benötigt | 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. | Dazu muss irgendwo auf dieser Seite eine HTML-Division eingebaut werden, gerne direkt nach dem <body>-Tag. | ||
<pre> | <pre> | ||
<div style="visibility:hidden"> | <div style="visibility:hidden"> | ||
<svg id="svg200x150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 225" width="200px" | <svg id="svg200x150" xmlns="http://www.w3.org/2000/svg" | ||
viewBox="0 0 300 225" width="200px" height="150px"> </svg> | |||
</div> | </div> | ||
</pre> | </pre> | ||
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 | |||
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: | |||
<div class="mw-collapsible mw-collapsed"> | |||
Code:<div class="mw-collapsible-content"> | |||
<pre> | <pre> | ||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" | ||
viewBox="0 0 10 10" width="0px" height="0px"> | |||
<defs> | <defs> | ||
<!-- white-snowwhite --> | <!-- white-snowwhite --> | ||
| Zeile 253: | Zeile 254: | ||
</svg> | </svg> | ||
</pre> | </pre> | ||
</div></div> | |||
[[Kategorie:FHEM Tablet UI V2|Bar]] | |||
Aktuelle Version vom 4. Juni 2025, 17:43 Uhr
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. Für die entsprechende Darstellung in FTUI3, siehe FTUI3 Widget Bar.
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.
Ausklappen
Code:
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:
Ausklappen
Code: