FTUI Widget Level

Aus FHEMWiki
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.

Ftui widget level 2-fach.png

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