FTUI Widget Slider: Unterschied zwischen den Versionen
K (catsort) |
Drhirn (Diskussion | Beiträge) K (→CSS-Klassen) |
||
Zeile 62: | Zeile 62: | ||
!Klasse | !Klasse | ||
!Beschreibung | !Beschreibung | ||
{{FTUI Klasse|mini}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|large}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|right}}{{FTUI Klasse|negated}}{{FTUI Klasse|value}}{{FTUI Klasse|FS20}}{{FTUI Klasse| | {{FTUI Klasse|mini}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|large}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|right}}{{FTUI Klasse|negated}}{{FTUI Klasse|value}}{{FTUI Klasse|FS20}}{{FTUI Klasse|tap}} | ||
|} | |} | ||
Der Slider unterstützt '' | Der Slider unterstützt ''tap to target'', also das Springen zum gewünschten Wert durch einfaches Antippen, nur, wenn die CSS-Klasse '''tap''' verwendet wird. | ||
==Beispiele== | ==Beispiele== |
Version vom 10. März 2018, 12:35 Uhr
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 | Beispiel |
---|---|---|---|
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 | |
data-timer-state | Statusvariable mit der eine timergesteuerte Bewegung des Sliders 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 |
right | Element wird rechtsbündig angeordnet |
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 |
tap | Durch einfaches Antippen zum gewünschten Wert springen |
Der Slider unterstützt tap to target, also das Springen zum gewünschten Wert durch einfaches Antippen, nur, wenn die CSS-Klasse tap 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>