FTUI Widget Level
Das Level Widget ist ein Widget für FHEM Tablet UI, mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann.
Attribute
Attribut | Beschreibung | Standard-Wert | Beispiel |
---|---|---|---|
data-device | FHEM-Device, dessen Reading Reading angezeigt werden soll | ||
data-get | Name des Readings, das den Wert enthält | 'STATE' | |
data-min | Minimaler Wert, der angezeigt werden soll | 0 | |
data-max | Maximaler Wert, der angezeigt werden soll, oder Name des Readings, das den Maximalwert enthält | 100 | |
data-on | Wert, bei dem der Balken maximalen Ausschlag zeigt | 'on' | |
data-off | Wert, bei dem der Balken minimalen Ausschlag zeigt | 'off' | |
data-part | Wählt bei Werten, die durch Leerzeichen getrennt sind, den Teil aus, der angezeigt werden soll. Der Teil kann auch mit RegEx ermittelt werden. | ||
data-colors | Array von Farbwerten, die die Anzeige entsprechend der Grenzwerte von data-limits einfärben | data-colors='["#dd3366","#ffcc00","#55aa44"]' | |
data-limits | Array von Zahlen oder RegEx zur Einfärbung der Anzeige | data-limits='["20","70","95"]' |
CSS-Klassen
Klasse | Beschreibung |
---|---|
mini | Setzt die Größe des Elementes auf 50% |
big | Setzt die Größe des Elementes auf 150% |
bigger | Setzt die Größe des Elementes auf 200% |
large | Setzt die Größe des Elementes auf 125% |
horizontal | Element horizontal ausrichten |
Beispiele
Zwei Level-Anzeigen mit Label
Beide Level-Anzeigen besitzen in Label auf gleicher Höhe, das den aktuellen Wert als Zahl mit Einheit anzeigt. Die Farbe der Level-Anzeigen wird beim Erreichen bestimmter Werte verändert.
<div>
<div data-type="level" data-device='Tablet' data-get='powerLevel'
data-limits='["[12]*[0-9]","[3456][0-9]","([789][0-9]|100)"]'
data-colors='["#dd3366","#ffcc00","#55aa44"]'
class="horizontal left" >
</div>
<div data-type="label" data-device='Tablet'
data-get='powerLevel'
data-unit="%" class="top-space left"></div>
</div>
<div>
<div data-type="level" data-device='dummy1'
data-limits='["20","70","95"]'
data-colors='["#dd3366","#ffcc00","#55aa44"]'
class="horizontal left" >
</div>
<div data-type="label" data-device='dummy1' data-unit="%"
class="top-space left"></div>
</div>