FTUI Widget Progress: Unterschied zwischen den Versionen
Drhirn (Diskussion | Beiträge) (Die Seite wurde neu angelegt: „Das [[{{PAGENAME}}|Progress Widget]] ist ein Widget für FHEM Tablet UI, welches einen Kreis mit Fortschrittsbalken erstellt. <gallery> File:FTUI_Widget_P…“) |
(Anpassung von <source>-Tags nach <syntaxhighlight>) |
||
Zeile 35: | Zeile 35: | ||
===PCT Wert eines HUE-Devices=== | ===PCT Wert eines HUE-Devices=== | ||
Ein ganz einfaches Beispiel, welches den ''pct''-Wert einer HUE Lampe anzeigt. | Ein ganz einfaches Beispiel, welches den ''pct''-Wert einer HUE Lampe anzeigt. | ||
< | <syntaxhighlight lang="html"> | ||
<div data-type="progress" data-device="HUEDevice1" data-get='pct'></div> | <div data-type="progress" data-device="HUEDevice1" data-get='pct'></div> | ||
</ | </syntaxhighlight> | ||
[[File:FTUI_Widget_Progress_01.png]] | [[File:FTUI_Widget_Progress_01.png]] | ||
===Alle verfügbaren Attribute=== | ===Alle verfügbaren Attribute=== | ||
< | <syntaxhighlight lang="html"> | ||
<div data-type="progress" | <div data-type="progress" | ||
data-device="HM_367B29_Weather" | data-device="HM_367B29_Weather" | ||
Zeile 51: | Zeile 51: | ||
data-part="2" | data-part="2" | ||
class=""></div> | class=""></div> | ||
</ | </syntaxhighlight> | ||
[[File:FTUI_Widget_Progress_02.png]] | [[File:FTUI_Widget_Progress_02.png]] | ||
[[Kategorie:FHEM Tablet UI]] | [[Kategorie:FHEM Tablet UI]] |
Version vom 26. Juli 2017, 18:57 Uhr
Das Progress Widget ist ein Widget für FHEM Tablet UI, 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-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>