FTUI Widget Progress: Unterschied zwischen den Versionen
K (catsort) |
Keine Bearbeitungszusammenfassung |
||
(Eine dazwischenliegende Version von einem anderen Benutzer wird nicht angezeigt) | |||
Zeile 1: | Zeile 1: | ||
Das [[{{PAGENAME}}|Progress Widget]] ist ein Widget für [[FHEM Tablet UI]], welches einen Kreis mit Fortschrittsbalken erstellt. | Das [[{{PAGENAME}}|Progress Widget]] ist ein Widget für [[FHEM Tablet UI V2]], welches einen Kreis mit Fortschrittsbalken erstellt. | ||
<gallery> | <gallery> | ||
Zeile 20: | Zeile 20: | ||
|- | |- | ||
|'''data-progress-width'''||Länge der Kreislinie vom Mittelpunkt bis zum Rand des Kreises in Prozent||15||data-progress-width="100" | |'''data-progress-width'''||Länge der Kreislinie vom Mittelpunkt bis zum Rand des Kreises in Prozent||15||data-progress-width="100" | ||
|- | |||
|'''data-on-color'''||Farbe der Kreislinie||#aa6900||data-on-color="Gold" | |||
|- | |- | ||
|'''data-unit'''||Einheit nach angezeigtem Wert hinzufügen||||data-unit="°C" | |'''data-unit'''||Einheit nach angezeigtem Wert hinzufügen||||data-unit="°C" | ||
Zeile 54: | Zeile 56: | ||
[[File:FTUI_Widget_Progress_02.png]] | [[File:FTUI_Widget_Progress_02.png]] | ||
[[Kategorie:FHEM Tablet UI|Progress]] | [[Kategorie:FHEM Tablet UI V2|Progress]] |
Aktuelle Version vom 2. August 2024, 15:08 Uhr
Das Progress Widget ist ein Widget für FHEM Tablet UI V2, welches einen Kreis mit Fortschrittsbalken erstellt.
Attribute
Attribut | Beschreibung | Standard-Wert | Beispiel |
---|---|---|---|
data-get | Name des Readings, dessen Wert angezeigt werden soll | STATE | data-get="measured-temp" |
data-min | Niedrigster Wert oder Name des Readings, in dem der Wert steht | 0 | data-min="10" |
data-max | Höchster Wert oder Name des Readings, in dem der Wert steht | 100 | data-max="25" |
data-progress-width | Länge der Kreislinie vom Mittelpunkt bis zum Rand des Kreises in Prozent | 15 | data-progress-width="100" |
data-on-color | Farbe der Kreislinie | #aa6900 | data-on-color="Gold" |
data-unit | Einheit nach angezeigtem Wert hinzufügen | data-unit="°C" | |
data-part | Wählt bei Werten, die durch Leerzeichen getrennt sind, die Position des Teiles aus, der angezeigt werden soll. Der Teil kann auch mit RegEx ermittelt werden. | -1 -> alles anzeigen | data-part="2" |
CSS Klassen
Klasse | Beschreibung |
---|---|
novalue | Zeigt den Wert nicht als Text, nur als Grafik an |
percent | Zeigt nicht den ausgelesenen Wert an, sondern rechnet ihn in eine Prozentangabe zw. dem angegebenem Mindest- und Maximalwert um. |
Beispiele
PCT Wert eines HUE-Devices
Ein ganz einfaches Beispiel, welches den pct-Wert einer HUE Lampe anzeigt.
<div data-type="progress" data-device="HUEDevice1" data-get='pct'></div>
Alle verfügbaren Attribute
<div data-type="progress"
data-device="HM_367B29_Weather"
data-get="STATE"
data-min="0"
data-max="100"
data-progress-width="100"
data-unit="°C"
data-part="2"
class=""></div>