FTUI Widget Level
Zur Navigation springen
Zur Suche springen
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. | '-1': alles Anzeigen | |
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"]' | |
data-timer-state | Statusvariable mit der eine timergesteuerte Bewegung des Balkens ausgelöst werden kann | ||
data-timer-state-on | Zustand der Statusvariablen der die Bewegung startet | 'on' | |
data-timer-state-off | Zustand der Statusvariablen der die Bewegung stoppt | 'off' | !on (alles was nicht on ist stoppt den Timer) |
data-timer-step | Erhöhung des Wertes pro Timer-Intervall | 1 | |
data-timer-interval | Timer-Intervall in Millisekunden | 1000 |
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 ein 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>