FTUI Widget Slider

Das Slider Widget ist ein Widget für FHEM Tablet UI in Form eines Schiebereglers, mit dem ein beliebiger Wert zwischen zwei festgelegten Grenzwerten auswählen lässt. Es eignet sich zum Beispiel zum Einstellen der Lautstärke eines Audio-Gerätes oder der Helligkeit einer Lampe.

Steuer-Attribute

Attribut	Beschreibung	Standard-Wert
data-device	FHEM-Device, dessen Reading gesetzt werden soll (<command> <device> <reading> <value>)
data-get	Reading, dessen Inhalt den aktuellen Wert wiedergibt	'STATE'
data-set	Reading, das gesetzt werden soll (<command> <device> <reading> <value>)
data-on	Wert, bei dem der Slider zum maximalen Ausschlag springt	'on'
data-off	Wert, bei dem der Slider minimalen Ausschlag springt	'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-set-value	Format, wie der eingestellte Wert an FHEM übergeben werden soll	'$v': Nur den Wert
data-cmd	Befehl, der gesendet werden soll (<command> <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)	set
data-min	Minimaler Wert, der eingestellt werden kann	0
data-max	Maximaler Wert, der eingestellt werden kann	100
data-step	Schrittweite beim Schieben des Sliders	1
data-width	Breite des Sliders, wenn er horizontal ausgerichtet ist	normal '120px', mini '60px'
data-height	Höhe des Sliders, wenn er vertikal ausgerichtet ist	normal '120px', mini '60px'
data-color	Farbe des Sliders für den Bereich 0...<eingestellter Wert>	'#aa6900'
data-background-color	Farbe des Sliders für den Bereich <eingestellter Wert>...<Maximaler Wert>	'#404040'
data-handle-diameter	Größe des Griffs	'20'
data-touch-diameter	Größe des Griffs, wenn er bewegt wird	wie data-handle-diameter

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
negated	Spiegelt die Wirkungsweise (tauscht oben/unten oder links/rechts)
value	Zeigt ein Label am Element, das den aktuellen Wert enthält
FS20	Konvertiert den Wertebereich 0...100 in das von FS20-Dimmern erwartete Format
tab	Fehler: Klasse nicht vorhanden

Der Slider unterstützt tab to target, also das Springen zum gewünschten Wert durch einfaches Antippen, nur, wenn die CSS-Klasse tab verwendet wird.

Beispiele

Vertikaler Schieberegler

Einfacher Schieberegler mit dem Einstellbereich 10...90

<div data-type="slider" 
     data-device='Dummy1' 
     data-min="10" 
     data-max="90" 
     class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>

Horizontaler Schieberegler

Einfacher Schieberegler mit dem Einstellbereich 0...100

<div data-type="slider"
     data-device='Dummy1' 
     data-min="0" 
     data-max="100" 
     class="horizontal" 
</div>