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.	'-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>