FTUI Widget Knob
Das Knob Widget ist ein Widget für FHEM Tablet UI, das einen verschiebbaren Statusbalken auf einer Kreisbahn erstellt.
Attribute
Attribut | Beschreibung | Standard-Wert | Beispiel |
---|---|---|---|
data-device | FHEM-Device, dessen Readings gelesen/geändert werden sollen | ||
data-get | Name des Readings, das den darzustellenden Wert enthält | STATE | |
data-set | Name des Reading, welches geändert werden soll | ||
data-cmd | Name des Befehls, mit dem das Reading geändert wird (z.B. setstate, set, setreading, trigger) | set | |
data-get-value | RegEx oder Position des Wertes in einer leerzeichen-getrennten Textzeile, mit der der Wert erhalten werden kann | ||
data-set-value | Format des Wertes, wie er an FHEM gesendet werden soll | $v (nur der Wert) | |
data-min | Mindestwert, der gesetzt werden kann | 0 | data-min="10" |
data-max | Maximalwert, der gesetzt werden kann | 70 | data-max="100" |
data-initvalue | Startwert | 10 | data-initvalue="20" |
data-step | Schrittgröße | 1 | data-step="0.5" |
data-angleoffset | Bestimmt die Position auf der Kreisform, auf dem die Statusanzeige beginnen soll | -120 | data-angleoffset="0" |
data-anglearc | Reichweite der Anzeige auf einem Kreis in Grad | 240 | data-anglearc="360" |
data-height | Höhe des Widgets | 120 | |
data-bgcolor | Hintergrundfarbe des Steuerungsbalkens | #505050 | data-bgcolor="white" |
data-fgcolor | Farbe der Statusanzeige | #666 | data-fgcolor="red" |
data-inputcolor | Textfarbe des Wertes | #ffffff | data-inputcolor="#00ff00" |
data-displayInput | Wert anzeigen | true | data-displayInput="false" |
data-font | Schriftart des Wertes | ||
data-font-weight | Dicke der Schrift | ||
data-unit | Einheit, die zum Wert hinzugefügt werden soll | data-unit="°" | |
data-lock | Reading, welches den booleanschen Wert (1,true,on) enthält um das Widget auf readonly zu setzen | ||
data-reachable | Reading, dessen Inhalt angibt, ob das Device erreichbar ist, oder nicht |
CSS Klassen
mini | Setzt die Größe des Elementes auf 50% |
small | Setzt die Größe des Elementes auf 80% |
large | Setzt die Größe des Elementes auf 125% |
big | Setzt die Größe des Elementes auf 150% |
bigger | Setzt die Größe des Elementes auf 200% |
readonly | Manuelle Änderung des Device-Zustandes nicht möglich |
Beispiele
Einfache Lautstärkeregelung
<div data-type="knob"
data-device="RXV777"
data-get="volumeStraight"
data-set="volumeStraight"
data-min="-60"
data-max="-24"
data-step="0.5"
data-unit="db"></div>
Steuerung HUEDevice
In diesem Beispiel ist das gewünschte HUEDevice nicht erreichbar und das Widget wird somit auf readonly gesetzt.
<div data-type="knob"
data-device="HUEDevice12"
data-get="pct"
data-set="pct"
data-min="0"
data-max="100"
data-step="1"
data-unit="%"
data-reachable="reachable"></div>
Verändertes Aussehen
Um zu zeigen, wie das Aussehen verändert werden könnte, hier ein etwas übertriebenes Beispiel.
<div data-type="knob"
data-device="HUEDevice12"
data-get="pct"
data-set="pct"
data-min="0"
data-max="100"
data-step="5"
data-unit="%"
data-bgcolor="lightblue"
data-fgcolor="blue"
data-inputcolor="yellow"
data-anglearc="360"
data-angleoffset="0"
data-height="100px"
data-font="courier"
data-font-weight="bold"
data-reachable="reachable"></div>