FTUI Widget Level: Unterschied zwischen den Versionen

Aus FHEMWiki
K (Schreibfehler korrigiert)
K (catsort)
(2 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 29: Zeile 29:
|-
|-
|'''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||
|}
|}


Zeile 44: Zeile 54:
[[File:Ftui_widget_level_2-fach.png]]
[[File:Ftui_widget_level_2-fach.png]]


<source lang="html">
<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 64: Zeile 74:
         class="top-space left"></div>
         class="top-space left"></div>
</div>
</div>
</source>
</syntaxhighlight>


[[Kategorie:FHEM Tablet UI]]
[[Kategorie:FHEM Tablet UI|Level]]

Version vom 26. Januar 2018, 15:02 Uhr

Das Level Widget ist ein Widget für FHEM Tablet UI, 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.

Ftui widget level 2-fach.png

<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>