FTUI Widget Level: Unterschied zwischen den Versionen
All-Ex (Diskussion | Beiträge) K (Schreibfehler korrigiert) |
K (catsort) |
||
(2 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt) | |||
Zeile 29: | Zeile 29: | ||
|- | |- | ||
|'''data-limits'''||Array von Zahlen oder RegEx zur Einfärbung der Anzeige||||data-limits='["20","70","95"]' | |'''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|| | |||
|} | |} | ||
Zeile 44: | Zeile 54: | ||
[[File:Ftui_widget_level_2-fach.png]] | [[File:Ftui_widget_level_2-fach.png]] | ||
< | <syntaxhighlight lang="html"> | ||
<div> | <div> | ||
<div data-type="level" data-device='Tablet' data-get='powerLevel' | <div data-type="level" data-device='Tablet' data-get='powerLevel' | ||
Zeile 64: | Zeile 74: | ||
class="top-space left"></div> | class="top-space left"></div> | ||
</div> | </div> | ||
</ | </syntaxhighlight> | ||
[[Kategorie:FHEM Tablet UI]] | [[Kategorie:FHEM Tablet UI|Level]] |
Version vom 26. Januar 2018, 15:02 Uhr
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>