FTUI Widget Level: Unterschied zwischen den Versionen
KKeine Bearbeitungszusammenfassung |
(CSS-Klassen hinzugefügt) |
||
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"]' | ||
|- | |} | ||
| | |||
==CSS-Klassen== | |||
{|class="wikitable" | |||
!Klasse | |||
!Beschreibung | |||
{{FTUI Klassen|mini}}{{FTUI Klassen|horizontal}}{{FTUI Klassen|big}}{{FTUI Klassen|bigger}}{{FTUI Klassen|large}} | |||
|} | |} | ||
Version vom 8. Februar 2017, 18:15 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. | ||
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
Vorlage:FTUI KlassenVorlage:FTUI KlassenVorlage:FTUI KlassenVorlage:FTUI KlassenVorlage:FTUI Klassen |
---|
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>