FTUI Widget Switch
Das Switch Widget ist ein Widget für FHEM Tablet UI. Dabei handelt es sich um einen Ein-/Ausschalter in Form eines runden Druckknopfes. Er dient zum Ausführen beliebiger Schaltbefehle und kann auch für FTUI-interne Steuerungen genutzt werden. Zusätzlich kann der Schalter in Abhängigkeit eines Readings sein Aussehen verändern und so zwei oder mehr Zustände optisch darstellen. Beispielsweise können Farbe und/oder das Symbol die Zuständen an/aus anzeigen. Kann das Status-Reading mehr als zwei Zustände einnehmen, kann auch dies dargestellt werden. Dabei sind beliebige Kombinationen von Vorder-/Hintergrundfarben und Symbolen möglich.
Attribute
Standard-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-cmd | Befehl, der gesendet werden soll (<command> <device> <reading> <value>) (z.B. setstate, set, setreading, trigger) | set | |
| data-doubleclick | Zeit, die vergehen muss, bis das Element ein zweites mal betätigt werden kann. '0' schaltet dieses Verhalten ab. | 0 | |
| data-lock | Reading, mit dem das Element für eine Bedienung gesperrt wird. Gütige Werte sind 'true', '1' oder 'on' | ||
| data-icon | Name des Icons im Vordergrund | 'fa-lightbulb-o' | |
| data-background-icon | Name des Icons, das als Hintergrund verwendet werden soll | 'fa-circle' | |
| data-color | Farbe des Icon (RGB-Angabe oder Farbname) | #2A2A2A | data-color="#c0c0c0" |
| data-background-color | Hintergrundfarbe des Widgets | #505050 | data-background-color="none" |
| data-warn | Reading, dessen Inhalt als rotes Kennzeichen angezeigt wird. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein. | ||
| data-warn-on | Werte von data-warn, bei denen das Kennzeichen angezeigt wird | 'true|on|[1-9]{1}[0-9]*' | |
| data-warn-off | Werte von data-warn, bei denen das Kennzeichen versteckt wird | 'false|off|0' | |
| data-warn-color | Textfarbe des Kennzeichens | '#aaa' | |
| data-warn-background-color | Hintergrundfarbe des Kennzeichens | '#aa2200' | |
| data-hide | Reading zum Verstecken des Elementes. Das Element verschwindet, wenn der Wert mit data-hide-on übereinstimmt. | 'STATE' | |
| data-hide-on | Zeichenkette, bei der das Element versteckt wird | 'true|1|on' | |
| data-hide-off | Zeichenkette, bei der das Element angezeigt wird | '!on' | |
| data-hideparents | jQuery-Selector, um auch die Eltern-Elemente zu verstecken | data-hideparents="#Name" | |
| data-reachable | Reading, dessen Inhalt angibt, ob das Device erreichbar ist, oder nicht. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein. |
Attribute für zwei Zustände
Zur Anzeige von zwei Zuständen können nachfolgende Attribute zusätzlich zu den Standard-Attributen genutzt werden.
| Attribut | Beschreibung | Standard-Wert | Beispiel |
|---|---|---|---|
| data-get-on | Zeichenkette oder ein Array von Werten, die als Zustand ON interpretiert werden | 'on' | |
| data-get-off | Zeichenkette oder ein Array von Werten, die als Zustand OFF interpretiert werden | 'off' | |
| data-set-on | Wert, der beim Einschalten gesendet werden soll | Wert von data-get-on | data-set-on="1" |
| data-set-off | Wert, der beim Ausschalten gesendet werden soll | Wert von data-get-off | data-set-off="0" |
| data-on-color | Iconfarbe für den Zustand ON, oder <device>:<reading>, um einen entsprechenden Wert dynamisch aus FHEM abzurufen. | '#aa6900' | |
| data-off-color | Iconfarbe für den Zustand OFF, oder <device>:<reading>, um einen entsprechenden Wert dynamisch aus FHEM abzurufen. | '#505050' | |
| data-on-background-color | Hintergrundfarbe für den Zustand ON, oder <device>:<reading>, um einen entsprechenden Wert dynamisch aus FHEM abzurufen. | '#aa6900' | |
| data-off-background-color | Hintergrundfarbe für den Zustand OFF, oder <device>:<reading>, um einen entsprechenden Wert dynamisch aus FHEM abzurufen. | '#505050' |
data-get-on und data-get-off können auch RegEx enthalten:
data-get-on="[0-9]{1,3}|on" bedeutet, dass der Schalter AN ist, wenn das Reading eine Zahl zwischen 0 und 100 ist, oder den Wert on enthält.
data-get-off="!on" bedeutet, dass alle Werte, die nicht für on stehen, automatisch off bedeuten (Negation).
data-set-off="" unterdrückt das Senden eines OFF-Befehls.
data-[on|off]-color erwartet einen RGB-Wert, wenn dieser aus einen Reading gelesen wird (rgb(0, 0, 0) statt #000000)
Attribute für mehrere Zustände
Zur Anzeige von mehreren Zuständen können nachfolgende Attribute zusätzlich zu den Standard-Attributen genutzt werden.
| Attribut | Beschreibung | Standard-Wert | Beispiel |
|---|---|---|---|
| data-states | Array von Werten, die das Reading einnehmen kann | ||
| data-set-states | Array von Werten, die gesetzt werden sollen. Die Werte werden nacheinander durchgeschaltet. | ||
| data-icons | Array von Icons, die in Abhängigkeit des Arrays von data-states im Vordergrund angezeigt werden | ||
| data-background-icons | Array von Icons, die in Abhängigkeit des Arrays von data-states im Hintergrund angezeigt werden | ||
| data-colors | Array von Farben, die in Abhängigkeit des Arrays von data-states das Vordergrund-Icon einfärben | ||
| data-background-colors | Array von Farben, die in Abhängigkeit des Arrays von data-states das Hintergrund-Icon einfärben |
CSS-Klassen
| Klasse | Beschreibung |
|---|---|
| readonly | Manuelle Änderung des Device-Zustandes nicht möglich |
| small | Setzt die Größe des Elementes auf 80% |
| compressed | Switches und Symbole bekommen Breite und Höhe von 1em statt 2em, damit weniger Platz rundum das Icon benötigt wird |
| compressed-50 | Switches und Symbole bekommen Breite und Höhe von 1.5em statt 2em, damit weniger Platz rundum das Icon benötigt wird |
| height-narrow | Widgets bekommen eine fest definierte Höhe und Zeilenhöhe, um sie leichter nebeneinander anordnen zu können |
| invert | Vertauscht Vorder- und Hintergrundfarbe |
Beispiele
An/Aus
Einfacher Schalter, der on/off sendet und diesen Status durch Farbumschlag anzeigt.
<div data-type="switch" data-device="MyDevice"></div>
An/Aus (Farben invertiert)
Einfacher Schalter, der on/off sendet und diesen Status durch Farbumschlag anzeigt. Die Farben sind hier im Gegensatz zum vorherigen Beispiel invertiert.
<div data-type="switch" data-device="MyDevice" class="invert"></div>
1/0 als Befehl
Einfacher Schalter, der 1/0 sendet und diesen Status durch Farbumschlag anzeigt.
<div data-type="switch"
data-icon="fa-rss"
data-device='MyDevice'
data-get-on="1"
data-get-off="0"
data-set-on="1"
data-set-off="0"
class="green small invert">
</div>
MILIGHT-Switch
Beispiel for einen MILIGHT-Schalter. Der on-Zustand wird per RegEx ermittelt.
<div data-type="switch"
data-device="MILIGHT_Zone1_Wohnzimmer"
data-get-on="on.*"
data-get-off="off">
</div>
4-fach-Schalter
Gruppe von 4 Schaltern, die den Status des selben Devices umschalten.
<div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-home" data-get-on="Home"></div>
<div>Home</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-bed" data-get-on="Sleep"></div>
<div>Sleep</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-car" data-get-on="Away"></div>
<div>Away</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-suitcase" data-get-on="Holiday"></div>
<div>Holiday</div>
</div>
Zwei Zustände umschalten
Großer Homestatus-Button, der zwischen zwei Zuständen umschaltet.
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
<header>HOMESTATUS</header>
<div data-type="switch"
data-device="dummy3"
data-set-on="Anwesend"
data-set-off="Abwesend"
data-states='["Anwesend","Abwesend"]'
data-icons='["fa-home", "fa-car"]'
data-colors='["white", "white"]'
data-background-colors='["green", "red"]'
class="bigger top-space">
</div>
</li>