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
compressed	Switches und Symbole bekommen Breite und Höhe von 1em 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>