FTUI Widget Switch

Aus FHEMWiki

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.

  • Switch.png
  • Switch4.png
  • FTUI Switch-Homestatus2.png

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
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.

Switch.png 

<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.

Switch4.png 

<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.

FTUI Switch-Homestatus2.png 

<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>
Abgerufen von „http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Switch&oldid=20296“