FTUI Widget Level: Unterschied zwischen den Versionen
KKeine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| (7 dazwischenliegende Versionen von 5 Benutzern werden nicht angezeigt) | |||
| Zeile 1: | Zeile 1: | ||
Das [[{{PAGENAME}}|Level Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann. | Das [[{{PAGENAME}}|Level Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann. | ||
<gallery> | <gallery> | ||
| Zeile 24: | Zeile 24: | ||
|'''data-off'''||Wert, bei dem der Balken minimalen Ausschlag zeigt||'off'|| | |'''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-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-colors'''||Array von Farbwerten, die die Anzeige entsprechend der Grenzwerte von '''data-limits''' einfärben||||data-colors='["#dd3366","#ffcc00","#55aa44"]' | ||
| Zeile 30: | Zeile 30: | ||
|'''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|| | |||
|} | |||
==CSS-Klassen== | |||
{|class="wikitable" | |||
!Klasse | |||
!Beschreibung | |||
{{FTUI Klasse|mini}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|large}}{{FTUI Klasse|horizontal}} | |||
|} | |} | ||
==Beispiele== | ==Beispiele== | ||
===Zwei Level-Anzeigen mit Label=== | ===Zwei Level-Anzeigen mit Label=== | ||
Beide Level-Anzeigen besitzen | 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. | ||
[[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 59: | Zeile 74: | ||
class="top-space left"></div> | class="top-space left"></div> | ||
</div> | </div> | ||
</ | </syntaxhighlight> | ||
[[Kategorie:FHEM Tablet UI]] | [[Kategorie:FHEM Tablet UI V2|Level]] | ||
Aktuelle Version vom 2. August 2024, 15:58 Uhr
Das Level Widget ist ein Widget für FHEM Tablet UI V2, 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>