FTUI Widget Progress: Unterschied zwischen den Versionen

Aus FHEMWiki
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="&deg;C"
|'''data-unit'''||Einheit nach angezeigtem Wert hinzufügen||||data-unit="&deg;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>

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