FTUI Widget Progress: Unterschied zwischen den Versionen

Aus FHEMWiki
(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.
<source lang="html">
<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>
</source>
</syntaxhighlight>
[[File:FTUI_Widget_Progress_01.png]]
[[File:FTUI_Widget_Progress_01.png]]


===Alle verfügbaren Attribute===
===Alle verfügbaren Attribute===
<source lang="html">
<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>
</source>
</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, 19: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>

FTUI Widget Progress 01.png

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="&deg;C"
	 data-part="2"
	 class=""></div>

FTUI Widget Progress 02.png