FHEMWiki - Benutzerbeiträge [de]

Knxd

2017-05-07T15:13:21Z

Svenson08:

= knxd mit einem IP Gateway einrichten =
Damit FHEM auf den KNX Bus zugreifen kann, benötigt man ein passendes Interface

Es gibt:

* RS232
* USB
* IP

Ich beschreibe die Einrichtung von knxd mit einem IP Gateway auf einen Raspberry Pi2 mit Wheezy oder Jessie.

== Installation ==

'''1. als erstes müssen folgende Pakete installiert werden (Referenz Debian Jessie):'''
<source lang="bash">sudo apt-get update
sudo apt-get install debhelper cdbs automake libtool libusb-1.0-0-dev git-core build-essential libsystemd-daemon-dev dh-systemd libev-dev
</source>

'''1.1 als erstes müssen folgende Pakete installiert werden (Referenz Debian Stretch):'''
<source lang="bash">sudo apt-get update
sudo apt-get install debhelper cdbs automake libtool libusb-1.0-0-dev git-core build-essential libsystemd-dev dh-systemd libev-dev cmake
</source>

(Bei Debian Jessie-Lite fehlt noch mehr)

'''2. knxd herunterladen und installieren'''
Achtung: Wenn Abhängigkeiten fehlen, dann installiere diese nach. Nicht einfach mittels "-d" diese übergehen!
<source lang="bash">
git clone https://github.com/knxd/knxd.git
cd knxd
git checkout stable
dpkg-buildpackage -b -uc
cd ..
sudo dpkg -i knxd_*.deb knxd-tools_*.deb
</source>

== Konfiguration ==
'''1. Ohne systemd'''

es muss als nächstes die Konfigurationsdatei editiert werden.

das geht mit:
<source lang="bash">
sudo nano /etc/default/knxd
</source>
dann folgende Einträge anpassen:
<source lang="bash">
DAEMON_ARGS="-u /tmp/eib -u /var/run/knx -i -b ipt:192.168.188.XX"
</source>
und
<source lang="bash">
START_KNXD=YES
</source>
'''2. Mit systemd z. B. für Debian Jessie'''

Die Konfigurationsdatei bei Jessie hat sich wegen der Nutzung von systemd geändert:
<source lang="bash">
sudo nano /etc/knxd.conf
</source>
dann folgende Einträge anpassen:
<source lang="bash">
KNXD_OPTS="-u /tmp/eib -u /var/run/knx -b ipt:192.168.188.XX"
</source>
und
<source lang="bash">
START_KNXD=YES
</source>
== knxd Status überprüfen ==
<source lang="bash">
/etc/init.d/knxd status
</source>

== FAQ ==
'''Wie wird eibd vorher deinstalliert?'''
<source lang="bash">
sudo rm -r /usr/local/bin/{eibd,knxtool,group*} /usr/local/lib/lib{eib,pthsem}*.so* /usr/local/include/pth*
</source>

'''folgender Fehler: dpkg-buildpackage: Fehler: Fehler-Exitstatus von debian/rules build war 2'''
<source lang="bash">
sudo apt-get install git-core build-essential
</source>

'''Fehler: dpkg-buildpackage: error: fakeroot not found, either install the fakeroot <....> '''
<source lang="bash">
sudo apt-get install fakeroot dpkg-dev
</source>

== Links ==
[[Benutzer:Marthinx]]

[https://github.com/knxd/knxd Github knxd]

[https://knx-user-forum.de/forum/projektforen/knxd/1049547-grundlagen-zum-knxd-mit-installationsanleitung-vor-dem-schreiben-lesen Forums-Thread zu knxd. Sehr informativ.]

[[Kategorie:Examples]]
[[Kategorie:EIB/KNX]]

Homebridge User Configs

2017-02-12T18:37:44Z

Svenson08: /* Homematic HM-CC-RT-DN Funk-Heizkörperthermostat */

Dieser Eintrag dient zur Sammlung funktionsfähiger Homebridge Configs.

Bitte immer die FHEM Version und Homebridge Version angegeben.

Sehr gute Hinweise gibt es hier: http://www.meintechblog.de/2015/10/mit-siri-und-fhem-das-gesamte-smart-home-per-stimme-steuern/
== Feuchtesensor ==
Zum Einstieg etwas leicht nachvollziehbares.

Feuchtesensoren haben in der Regel ein "humidity" Reading, im Falle des Opus XT300 Bodenfeuchtesensors auch Temperatur und Batterie Level. Homekit unterstützt einen "HumiditySensor" Service. Dieser ist in homebridge-fhem nicht standardmäßig vorhanden (kann also nicht aus dem dropdown ausgewählt werden, sondern muss über das Befehlsfeld zugewiesen werden):

<code>attr meinSensor genericDeviceType HumiditySensor</code>

Im nächsten Schritt werden die Readings gemappt:

<code>attr meinSensor homebridgeMapping clear CurrentRelativeHumidity=humidity StatusLowBattery=battery,values=ok:BATTERY_LEVEL_NORMAL;;/^.*/:BATTERY_LEVEL_LOW CurrentTemperature=temperature</code>

<code>clear</code>löscht default mappings - das wird in der Regel nicht notwendig sein, schadet aber nicht

<code>CurrentRelativeHumidity</code> ist die relevante Homekit Characteristic - wird mit dem entsprechenden Reading des Sensors gemappt.

<code>StatusLowBattery</code> erwartet entweder BATTERY_LEVEL_NORMAL oder _LOW. Mein Sensor liefert ok zurück, wenn alles gut ist, also wird "ok" auf _NORMAL gemappt, alles andere auf _LOW.

Der Opus XT300 Bodenfeuchtesensors liefert auch noch die Temperatur - der HumiditySensor Service sieht das eigentlich nicht vor, daher wird die Temperatur auch nicht in der Apple "Home" App angezeigt. Bei Eve wird die Temperatur hingegen berücksichtigt.

== EnOcean STM 250 Tür-/Fensterkontakt ==
Der STM 250 liefert als Status in FHEM <code>open</code>, wenn das Fenster offen und damit der Kontakt "offen" ist. Analog liefert er <code>closed</code> wenn das Fenster geschlossen und damit auch der Kontakt geschlossen ist. Diese Statusangaben sind sehr intuitiv zu verstehen und zu interpretieren.

Die characteristic <code>ContactSensorState</code> von HomeKit liefert entweder den Wert <code>CONTACT_DETECTED=0</code> oder <code>CONTACT_NOT_DETECTED=1</code> zurück. Wobei <code>CONTACT_DETECTED</code> bedeutet, dass der Kontakt geschlossen ist. Je nach Darstellung in der HomeKit-fähigen App muss dieses Verhalten bei der Interpretation berücksichtigt werden. Die App Eve von Elgato zum Beispiel liefert für Kontaktsensoren "JA" oder "NEIN" mit der Bedeutung <code>CONTACT_DETECTED=0=JA</code> bzw. <code>CONTACT_NOT_DETECTED=1=NEIN</code> zurück.

Noch ein wichtiger Punkt: Um einen Sensorkontakt sinnvoll einzurichten sollte als zusätzlicher Wert für das Attribut <code>genericdeviceType</code> der Wert <code>ContactSensor</code> hinzugefügt werden. Wie das geht ist im Eintrag [[Homebridge_einrichten#FHEM_konfigurieren | Homebridge einrichten]] ausführlicher beschrieben.

Folgende Attribute dann hinzufügen:
attr STM250 genericDeviceType ContactSensor
attr STM250 homebridgeMapping ContactSensorState=state,values=closed:CONTACT_DETECTED;open:CONTACT_NOT_DETECTED

Getestet mit
FHEM 5.7 Rev. 9893
Homebridge 0.2.16
homebridge-fhem Vorschauversion aus [http://forum.fhem.de/index.php/topic,48558.msg402024.html#msg402024 homebridge/homekit]

== Modul RESIDENTS für Anwesenheitserkennung und Steuerung der Anwesenheit benutzen ==
[[Datei:Homebridge_bewohner_zu_szene.jpeg|mini|Schaltzustand eines Bewohners zu einer Szene hinzufügen]]
Aus den einzelnen Komponenten des Moduls RESIDENTS, homebridge sowie der characteristic <code>On</code> und der Szenensteuerung lässt sich eine gleichzeitige Steuerung der Anwesenheit und Anwesenheitserkennung basteln.

Dazu müssen folgende Schritte unternommen werden:
* einem Bewohner aus dem Modul ROOMMATE die Steuerung über homebridgeMapping hinzufügen
* Szene für "Ich bin zu Hause" und "Ich gehe jetzt" in einer HomeKit-fähigen App wie z.B. Eve einrichten

Man kann einen beliebigen Bewohner aus dem Modul ROOMMATE nehmen und ihn über die characteristic <code>On</code> in Form eines Schalters sozusagen schaltbar machen. Nur wird das Ein- und Ausschalten des Bewohners über HomeKit in FHEM auf den Status home bzw. absent gemappt. Seit dem 06.02.2016 werden RESIDENTS automatisch als Occupancy Sensor für HomeKit annonciert. Nun noch die Attribute des ROOMMATE wie folgt setzen:
attr <ROOMMATE> genericDeviceType switch
attr <ROOMMATE> homebridgeMapping On=state,valueOn=/home|awoken|asleep|gotosleep/,valueOff=/gone|absent/,cmdOn=home,cmdOff=absent

Natürlich muss der Bewohner noch dem Filter von homebridge hinzugefügt und homebridge neu gestartet werden.

Anschließend geht es in der HomeKit-fähigen App Deiner Wahl weiter. In Eve von Elgato ist von vornherein zum Beispiel vorgesehen, dass man zwei Szenen "Ich bin zuhause" und "Ich verlasse das Haus" hat. Zu diesen Szenen wird eine Aktion hinzugefügt indem der Bewohner, den das ROOMMATE-Modul meldet zur Szene hinzugefügt wird und beim Nachhausekommen "eingeschaltet" wird. Genauso wird mit der Szene "Ich verlasse das Haus" verfahren: Bewohner zur Szene hinzufügen und den Schaltvorgang auf "ausschalten" setzen.

Mit den Sprachbefehlen "Ich bin zuhause" oder "Ich verlasse das Haus" wird die entsprechende Szene eingeschaltet, homebridge schaltet über das <code>homebridgeMapping</code> Attribut dann den Bewohner auf "home" oder "absent".

Getestet mit
FHEM 5.7 Rev. 9893
Homebridge 0.2.16
homebridge-fhem Vorschauversion aus [http://forum.fhem.de/index.php/topic,48558.msg402024.html#msg402024 homebridge/homekit]

== ZWave Türschloss Vision ZM1701 einbinden ==
Das ZWave Türschloss ZM1701 von der Firma Vision sendet seinen aktuellen Schließstatus in ein einzelnes Reading wie "lock", sondern schickt eine ganze Reihe von Informationen über den Zustand in das Reading <code>doorLockOperation</code>. Das Schließen und Öffnen der Türschlosses wird auch nicht mit einem Setzen des <code>state</code> erreicht, sondern mit dem Setzen von <code>doorLockOperation</code>. Das macht das Einbinden in homebridge nicht trivial, funktioniert aber über folgendes Homebridge-Mapping:
attr <ZM1701> genericDeviceType lock
attr <ZM1701> homebridgeMapping LockCurrentState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED LockTargetState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED,cmds=SECURED:doorLockOperation+close;UNSECURED:doorLockOperation+open

Kurz zur Erklärung: Um ein Schloss über HomeKit steuern zu können braucht es zwei characteristics. LockCurrentState zeigt an, ob das Schloss geöffnet oder geschlossen ist. Und mit LockTargetState wird das Schloss geöffnet oder geschlossen. Damit der aktuelle Status des Schlosses ausgelesen werden kann, muss aus dem FHEM-Reading <code>doorLockOperation</code> die Zeichenfolge <code> secured</code> oder <code>unsecured</code> extrahiert werden, daher die beiden regulären Ausdrücke <code>/\ssecured/</code> und <code>/unsecured/</code>. In der characteristic <code>LockTargetState</code> muss sowohl der aktuelle Status des Schlosses als auch das Kommando angegeben werden, schließlich möchte man ein geschlossenes Schloss nicht nochmal schließen. Daher wird erst aus dem Reading <code>doorLockOperation</code> der aktuelle Status des Schlosses ausgelesen und die damit korrespondierenden Befehle über <code>cmds=SECURED:doorLockOperation+close;UNSECURED:doorLockOperation+open</code> generiert.

Wer es in FHEM über ein webCmd einfacher zu bedienen haben möchte, fügt bitte noch die dafür notwendigen Attribute und die leicht geänderten homebridgeMappings wie folgt ein:
attr <ZM1701> genericDeviceType lock
attr <ZM1701> homebridgeMapping LockCurrentState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED LockTargetState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED,cmds=SECURED:close;UNSECURED:open
attr <ZM1701> /doorLockOperation open:open/doorLockOperation close:close
attr <ZM1701> webCmd open:close

Getestet mit
FHEM 5.7 Rev. 12191
homebridge 0.4.6
homebridge-fhem 0.2.48

== Roomba über THINKINGCLEANER Modul ==
attr <THINKINGCLEANER> genericDeviceType switch
attr <THINKINGCLEANER> homebridgeMapping clear On=state,valueOn=/^(on|dock)/,cmdOn=on,cmdOff=off,nocache=1 ChargingState=deviceStatus,values=/(_recon|_full|_trickle)$/:CHARGING;/^.*/:NOT_CHARGING
attr <THINKINGCLEANER> siriName Robby

Getestet mit
FHEM 5.7 Rev. 12680
homebridge 0.4.11
homebridge-fhem 0.2.66

== Homematic HM-CC-RT-DN Funk-Heizkörperthermostat ==
[[Datei:HM-CC-RT-DN-Eve.PNG|mini|Darstellung des HM-CC-RT-DN in der iOS App Eve]]
attr <HMCCRTDN_Channel2_Clima> homebridgeMapping TargetTemperature=desired-temp::desired-temp,minValue=5,maxValue=35,minStep=0.5,nocache=1
CurrentTemperature=BU_Heizung_01_Clima:measured-temp,nocache=1
StatusLowBattery=BU_Heizung_01:battery,values=ok:BATTERY_LEVEL_NORMAL;;/^.*/:BATTERY_LEVEL_LOW
TargetHeatingCoolingState=heatingState,values=OFF:0;;HEAT:1;;COOL:2;;AUTO:3,cmds=OFF:controlManu+off;;HEAT:controlMode+boost;;AUTO:controlMode+auto;;COOL:controlManu+17.0
CurrentHeatingCoolingState=heatingState,values=OFF:0;;HEAT:1;;COOL:2;;AUTO:0,valud=OFF
attr <HMCCRTDN_Channel2_Clima> siriName Robby

[[Kategorie:HOWTOS]]
[[Kategorie:Code Snippets]]

Homebridge User Configs

2017-02-12T18:37:19Z

Svenson08: /* Homematic HM-CC-RT-DN Funk-Heizkörperthermostat */

Dieser Eintrag dient zur Sammlung funktionsfähiger Homebridge Configs.

Bitte immer die FHEM Version und Homebridge Version angegeben.

Sehr gute Hinweise gibt es hier: http://www.meintechblog.de/2015/10/mit-siri-und-fhem-das-gesamte-smart-home-per-stimme-steuern/
== Feuchtesensor ==
Zum Einstieg etwas leicht nachvollziehbares.

Feuchtesensoren haben in der Regel ein "humidity" Reading, im Falle des Opus XT300 Bodenfeuchtesensors auch Temperatur und Batterie Level. Homekit unterstützt einen "HumiditySensor" Service. Dieser ist in homebridge-fhem nicht standardmäßig vorhanden (kann also nicht aus dem dropdown ausgewählt werden, sondern muss über das Befehlsfeld zugewiesen werden):

<code>attr meinSensor genericDeviceType HumiditySensor</code>

Im nächsten Schritt werden die Readings gemappt:

<code>attr meinSensor homebridgeMapping clear CurrentRelativeHumidity=humidity StatusLowBattery=battery,values=ok:BATTERY_LEVEL_NORMAL;;/^.*/:BATTERY_LEVEL_LOW CurrentTemperature=temperature</code>

<code>clear</code>löscht default mappings - das wird in der Regel nicht notwendig sein, schadet aber nicht

<code>CurrentRelativeHumidity</code> ist die relevante Homekit Characteristic - wird mit dem entsprechenden Reading des Sensors gemappt.

<code>StatusLowBattery</code> erwartet entweder BATTERY_LEVEL_NORMAL oder _LOW. Mein Sensor liefert ok zurück, wenn alles gut ist, also wird "ok" auf _NORMAL gemappt, alles andere auf _LOW.

Der Opus XT300 Bodenfeuchtesensors liefert auch noch die Temperatur - der HumiditySensor Service sieht das eigentlich nicht vor, daher wird die Temperatur auch nicht in der Apple "Home" App angezeigt. Bei Eve wird die Temperatur hingegen berücksichtigt.

== EnOcean STM 250 Tür-/Fensterkontakt ==
Der STM 250 liefert als Status in FHEM <code>open</code>, wenn das Fenster offen und damit der Kontakt "offen" ist. Analog liefert er <code>closed</code> wenn das Fenster geschlossen und damit auch der Kontakt geschlossen ist. Diese Statusangaben sind sehr intuitiv zu verstehen und zu interpretieren.

Die characteristic <code>ContactSensorState</code> von HomeKit liefert entweder den Wert <code>CONTACT_DETECTED=0</code> oder <code>CONTACT_NOT_DETECTED=1</code> zurück. Wobei <code>CONTACT_DETECTED</code> bedeutet, dass der Kontakt geschlossen ist. Je nach Darstellung in der HomeKit-fähigen App muss dieses Verhalten bei der Interpretation berücksichtigt werden. Die App Eve von Elgato zum Beispiel liefert für Kontaktsensoren "JA" oder "NEIN" mit der Bedeutung <code>CONTACT_DETECTED=0=JA</code> bzw. <code>CONTACT_NOT_DETECTED=1=NEIN</code> zurück.

Noch ein wichtiger Punkt: Um einen Sensorkontakt sinnvoll einzurichten sollte als zusätzlicher Wert für das Attribut <code>genericdeviceType</code> der Wert <code>ContactSensor</code> hinzugefügt werden. Wie das geht ist im Eintrag [[Homebridge_einrichten#FHEM_konfigurieren | Homebridge einrichten]] ausführlicher beschrieben.

Folgende Attribute dann hinzufügen:
attr STM250 genericDeviceType ContactSensor
attr STM250 homebridgeMapping ContactSensorState=state,values=closed:CONTACT_DETECTED;open:CONTACT_NOT_DETECTED

Getestet mit
FHEM 5.7 Rev. 9893
Homebridge 0.2.16
homebridge-fhem Vorschauversion aus [http://forum.fhem.de/index.php/topic,48558.msg402024.html#msg402024 homebridge/homekit]

== Modul RESIDENTS für Anwesenheitserkennung und Steuerung der Anwesenheit benutzen ==
[[Datei:Homebridge_bewohner_zu_szene.jpeg|mini|Schaltzustand eines Bewohners zu einer Szene hinzufügen]]
Aus den einzelnen Komponenten des Moduls RESIDENTS, homebridge sowie der characteristic <code>On</code> und der Szenensteuerung lässt sich eine gleichzeitige Steuerung der Anwesenheit und Anwesenheitserkennung basteln.

Dazu müssen folgende Schritte unternommen werden:
* einem Bewohner aus dem Modul ROOMMATE die Steuerung über homebridgeMapping hinzufügen
* Szene für "Ich bin zu Hause" und "Ich gehe jetzt" in einer HomeKit-fähigen App wie z.B. Eve einrichten

Man kann einen beliebigen Bewohner aus dem Modul ROOMMATE nehmen und ihn über die characteristic <code>On</code> in Form eines Schalters sozusagen schaltbar machen. Nur wird das Ein- und Ausschalten des Bewohners über HomeKit in FHEM auf den Status home bzw. absent gemappt. Seit dem 06.02.2016 werden RESIDENTS automatisch als Occupancy Sensor für HomeKit annonciert. Nun noch die Attribute des ROOMMATE wie folgt setzen:
attr <ROOMMATE> genericDeviceType switch
attr <ROOMMATE> homebridgeMapping On=state,valueOn=/home|awoken|asleep|gotosleep/,valueOff=/gone|absent/,cmdOn=home,cmdOff=absent

Natürlich muss der Bewohner noch dem Filter von homebridge hinzugefügt und homebridge neu gestartet werden.

Anschließend geht es in der HomeKit-fähigen App Deiner Wahl weiter. In Eve von Elgato ist von vornherein zum Beispiel vorgesehen, dass man zwei Szenen "Ich bin zuhause" und "Ich verlasse das Haus" hat. Zu diesen Szenen wird eine Aktion hinzugefügt indem der Bewohner, den das ROOMMATE-Modul meldet zur Szene hinzugefügt wird und beim Nachhausekommen "eingeschaltet" wird. Genauso wird mit der Szene "Ich verlasse das Haus" verfahren: Bewohner zur Szene hinzufügen und den Schaltvorgang auf "ausschalten" setzen.

Mit den Sprachbefehlen "Ich bin zuhause" oder "Ich verlasse das Haus" wird die entsprechende Szene eingeschaltet, homebridge schaltet über das <code>homebridgeMapping</code> Attribut dann den Bewohner auf "home" oder "absent".

Getestet mit
FHEM 5.7 Rev. 9893
Homebridge 0.2.16
homebridge-fhem Vorschauversion aus [http://forum.fhem.de/index.php/topic,48558.msg402024.html#msg402024 homebridge/homekit]

== ZWave Türschloss Vision ZM1701 einbinden ==
Das ZWave Türschloss ZM1701 von der Firma Vision sendet seinen aktuellen Schließstatus in ein einzelnes Reading wie "lock", sondern schickt eine ganze Reihe von Informationen über den Zustand in das Reading <code>doorLockOperation</code>. Das Schließen und Öffnen der Türschlosses wird auch nicht mit einem Setzen des <code>state</code> erreicht, sondern mit dem Setzen von <code>doorLockOperation</code>. Das macht das Einbinden in homebridge nicht trivial, funktioniert aber über folgendes Homebridge-Mapping:
attr <ZM1701> genericDeviceType lock
attr <ZM1701> homebridgeMapping LockCurrentState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED LockTargetState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED,cmds=SECURED:doorLockOperation+close;UNSECURED:doorLockOperation+open

Kurz zur Erklärung: Um ein Schloss über HomeKit steuern zu können braucht es zwei characteristics. LockCurrentState zeigt an, ob das Schloss geöffnet oder geschlossen ist. Und mit LockTargetState wird das Schloss geöffnet oder geschlossen. Damit der aktuelle Status des Schlosses ausgelesen werden kann, muss aus dem FHEM-Reading <code>doorLockOperation</code> die Zeichenfolge <code> secured</code> oder <code>unsecured</code> extrahiert werden, daher die beiden regulären Ausdrücke <code>/\ssecured/</code> und <code>/unsecured/</code>. In der characteristic <code>LockTargetState</code> muss sowohl der aktuelle Status des Schlosses als auch das Kommando angegeben werden, schließlich möchte man ein geschlossenes Schloss nicht nochmal schließen. Daher wird erst aus dem Reading <code>doorLockOperation</code> der aktuelle Status des Schlosses ausgelesen und die damit korrespondierenden Befehle über <code>cmds=SECURED:doorLockOperation+close;UNSECURED:doorLockOperation+open</code> generiert.

Wer es in FHEM über ein webCmd einfacher zu bedienen haben möchte, fügt bitte noch die dafür notwendigen Attribute und die leicht geänderten homebridgeMappings wie folgt ein:
attr <ZM1701> genericDeviceType lock
attr <ZM1701> homebridgeMapping LockCurrentState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED LockTargetState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED,cmds=SECURED:close;UNSECURED:open
attr <ZM1701> /doorLockOperation open:open/doorLockOperation close:close
attr <ZM1701> webCmd open:close

Getestet mit
FHEM 5.7 Rev. 12191
homebridge 0.4.6
homebridge-fhem 0.2.48

== Roomba über THINKINGCLEANER Modul ==
attr <THINKINGCLEANER> genericDeviceType switch
attr <THINKINGCLEANER> homebridgeMapping clear On=state,valueOn=/^(on|dock)/,cmdOn=on,cmdOff=off,nocache=1 ChargingState=deviceStatus,values=/(_recon|_full|_trickle)$/:CHARGING;/^.*/:NOT_CHARGING
attr <THINKINGCLEANER> siriName Robby

Getestet mit
FHEM 5.7 Rev. 12680
homebridge 0.4.11
homebridge-fhem 0.2.66

== Homematic HM-CC-RT-DN Funk-Heizkörperthermostat ==
[[Datei:HM-CC-RT-DN-Eve.PNG|mini|Schaltzustand eines Bewohners zu einer Szene hinzufügen]]
attr <HMCCRTDN_Channel2_Clima> homebridgeMapping TargetTemperature=desired-temp::desired-temp,minValue=5,maxValue=35,minStep=0.5,nocache=1
CurrentTemperature=BU_Heizung_01_Clima:measured-temp,nocache=1
StatusLowBattery=BU_Heizung_01:battery,values=ok:BATTERY_LEVEL_NORMAL;;/^.*/:BATTERY_LEVEL_LOW
TargetHeatingCoolingState=heatingState,values=OFF:0;;HEAT:1;;COOL:2;;AUTO:3,cmds=OFF:controlManu+off;;HEAT:controlMode+boost;;AUTO:controlMode+auto;;COOL:controlManu+17.0
CurrentHeatingCoolingState=heatingState,values=OFF:0;;HEAT:1;;COOL:2;;AUTO:0,valud=OFF
attr <HMCCRTDN_Channel2_Clima> siriName Robby

[[Kategorie:HOWTOS]]
[[Kategorie:Code Snippets]]

Datei:HM-CC-RT-DN-Eve.PNG

2017-02-12T18:35:35Z

Svenson08: Darstellung des HM-CC-RT-DN in der iOS App Eve

Darstellung des HM-CC-RT-DN in der iOS App Eve

Homebridge User Configs

2017-02-12T18:31:21Z

Svenson08: /* Homematic HM-CC-RT-DN Funk-Heizkörperthermostat */

Dieser Eintrag dient zur Sammlung funktionsfähiger Homebridge Configs.

Bitte immer die FHEM Version und Homebridge Version angegeben.

Sehr gute Hinweise gibt es hier: http://www.meintechblog.de/2015/10/mit-siri-und-fhem-das-gesamte-smart-home-per-stimme-steuern/
== Feuchtesensor ==
Zum Einstieg etwas leicht nachvollziehbares.

Feuchtesensoren haben in der Regel ein "humidity" Reading, im Falle des Opus XT300 Bodenfeuchtesensors auch Temperatur und Batterie Level. Homekit unterstützt einen "HumiditySensor" Service. Dieser ist in homebridge-fhem nicht standardmäßig vorhanden (kann also nicht aus dem dropdown ausgewählt werden, sondern muss über das Befehlsfeld zugewiesen werden):

<code>attr meinSensor genericDeviceType HumiditySensor</code>

Im nächsten Schritt werden die Readings gemappt:

<code>attr meinSensor homebridgeMapping clear CurrentRelativeHumidity=humidity StatusLowBattery=battery,values=ok:BATTERY_LEVEL_NORMAL;;/^.*/:BATTERY_LEVEL_LOW CurrentTemperature=temperature</code>

<code>clear</code>löscht default mappings - das wird in der Regel nicht notwendig sein, schadet aber nicht

<code>CurrentRelativeHumidity</code> ist die relevante Homekit Characteristic - wird mit dem entsprechenden Reading des Sensors gemappt.

<code>StatusLowBattery</code> erwartet entweder BATTERY_LEVEL_NORMAL oder _LOW. Mein Sensor liefert ok zurück, wenn alles gut ist, also wird "ok" auf _NORMAL gemappt, alles andere auf _LOW.

Der Opus XT300 Bodenfeuchtesensors liefert auch noch die Temperatur - der HumiditySensor Service sieht das eigentlich nicht vor, daher wird die Temperatur auch nicht in der Apple "Home" App angezeigt. Bei Eve wird die Temperatur hingegen berücksichtigt.

== EnOcean STM 250 Tür-/Fensterkontakt ==
Der STM 250 liefert als Status in FHEM <code>open</code>, wenn das Fenster offen und damit der Kontakt "offen" ist. Analog liefert er <code>closed</code> wenn das Fenster geschlossen und damit auch der Kontakt geschlossen ist. Diese Statusangaben sind sehr intuitiv zu verstehen und zu interpretieren.

Die characteristic <code>ContactSensorState</code> von HomeKit liefert entweder den Wert <code>CONTACT_DETECTED=0</code> oder <code>CONTACT_NOT_DETECTED=1</code> zurück. Wobei <code>CONTACT_DETECTED</code> bedeutet, dass der Kontakt geschlossen ist. Je nach Darstellung in der HomeKit-fähigen App muss dieses Verhalten bei der Interpretation berücksichtigt werden. Die App Eve von Elgato zum Beispiel liefert für Kontaktsensoren "JA" oder "NEIN" mit der Bedeutung <code>CONTACT_DETECTED=0=JA</code> bzw. <code>CONTACT_NOT_DETECTED=1=NEIN</code> zurück.

Noch ein wichtiger Punkt: Um einen Sensorkontakt sinnvoll einzurichten sollte als zusätzlicher Wert für das Attribut <code>genericdeviceType</code> der Wert <code>ContactSensor</code> hinzugefügt werden. Wie das geht ist im Eintrag [[Homebridge_einrichten#FHEM_konfigurieren | Homebridge einrichten]] ausführlicher beschrieben.

Folgende Attribute dann hinzufügen:
attr STM250 genericDeviceType ContactSensor
attr STM250 homebridgeMapping ContactSensorState=state,values=closed:CONTACT_DETECTED;open:CONTACT_NOT_DETECTED

Getestet mit
FHEM 5.7 Rev. 9893
Homebridge 0.2.16
homebridge-fhem Vorschauversion aus [http://forum.fhem.de/index.php/topic,48558.msg402024.html#msg402024 homebridge/homekit]

== Modul RESIDENTS für Anwesenheitserkennung und Steuerung der Anwesenheit benutzen ==
[[Datei:Homebridge_bewohner_zu_szene.jpeg|mini|Schaltzustand eines Bewohners zu einer Szene hinzufügen]]
Aus den einzelnen Komponenten des Moduls RESIDENTS, homebridge sowie der characteristic <code>On</code> und der Szenensteuerung lässt sich eine gleichzeitige Steuerung der Anwesenheit und Anwesenheitserkennung basteln.

Dazu müssen folgende Schritte unternommen werden:
* einem Bewohner aus dem Modul ROOMMATE die Steuerung über homebridgeMapping hinzufügen
* Szene für "Ich bin zu Hause" und "Ich gehe jetzt" in einer HomeKit-fähigen App wie z.B. Eve einrichten

Man kann einen beliebigen Bewohner aus dem Modul ROOMMATE nehmen und ihn über die characteristic <code>On</code> in Form eines Schalters sozusagen schaltbar machen. Nur wird das Ein- und Ausschalten des Bewohners über HomeKit in FHEM auf den Status home bzw. absent gemappt. Seit dem 06.02.2016 werden RESIDENTS automatisch als Occupancy Sensor für HomeKit annonciert. Nun noch die Attribute des ROOMMATE wie folgt setzen:
attr <ROOMMATE> genericDeviceType switch
attr <ROOMMATE> homebridgeMapping On=state,valueOn=/home|awoken|asleep|gotosleep/,valueOff=/gone|absent/,cmdOn=home,cmdOff=absent

Natürlich muss der Bewohner noch dem Filter von homebridge hinzugefügt und homebridge neu gestartet werden.

Anschließend geht es in der HomeKit-fähigen App Deiner Wahl weiter. In Eve von Elgato ist von vornherein zum Beispiel vorgesehen, dass man zwei Szenen "Ich bin zuhause" und "Ich verlasse das Haus" hat. Zu diesen Szenen wird eine Aktion hinzugefügt indem der Bewohner, den das ROOMMATE-Modul meldet zur Szene hinzugefügt wird und beim Nachhausekommen "eingeschaltet" wird. Genauso wird mit der Szene "Ich verlasse das Haus" verfahren: Bewohner zur Szene hinzufügen und den Schaltvorgang auf "ausschalten" setzen.

Mit den Sprachbefehlen "Ich bin zuhause" oder "Ich verlasse das Haus" wird die entsprechende Szene eingeschaltet, homebridge schaltet über das <code>homebridgeMapping</code> Attribut dann den Bewohner auf "home" oder "absent".

Getestet mit
FHEM 5.7 Rev. 9893
Homebridge 0.2.16
homebridge-fhem Vorschauversion aus [http://forum.fhem.de/index.php/topic,48558.msg402024.html#msg402024 homebridge/homekit]

== ZWave Türschloss Vision ZM1701 einbinden ==
Das ZWave Türschloss ZM1701 von der Firma Vision sendet seinen aktuellen Schließstatus in ein einzelnes Reading wie "lock", sondern schickt eine ganze Reihe von Informationen über den Zustand in das Reading <code>doorLockOperation</code>. Das Schließen und Öffnen der Türschlosses wird auch nicht mit einem Setzen des <code>state</code> erreicht, sondern mit dem Setzen von <code>doorLockOperation</code>. Das macht das Einbinden in homebridge nicht trivial, funktioniert aber über folgendes Homebridge-Mapping:
attr <ZM1701> genericDeviceType lock
attr <ZM1701> homebridgeMapping LockCurrentState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED LockTargetState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED,cmds=SECURED:doorLockOperation+close;UNSECURED:doorLockOperation+open

Kurz zur Erklärung: Um ein Schloss über HomeKit steuern zu können braucht es zwei characteristics. LockCurrentState zeigt an, ob das Schloss geöffnet oder geschlossen ist. Und mit LockTargetState wird das Schloss geöffnet oder geschlossen. Damit der aktuelle Status des Schlosses ausgelesen werden kann, muss aus dem FHEM-Reading <code>doorLockOperation</code> die Zeichenfolge <code> secured</code> oder <code>unsecured</code> extrahiert werden, daher die beiden regulären Ausdrücke <code>/\ssecured/</code> und <code>/unsecured/</code>. In der characteristic <code>LockTargetState</code> muss sowohl der aktuelle Status des Schlosses als auch das Kommando angegeben werden, schließlich möchte man ein geschlossenes Schloss nicht nochmal schließen. Daher wird erst aus dem Reading <code>doorLockOperation</code> der aktuelle Status des Schlosses ausgelesen und die damit korrespondierenden Befehle über <code>cmds=SECURED:doorLockOperation+close;UNSECURED:doorLockOperation+open</code> generiert.

Wer es in FHEM über ein webCmd einfacher zu bedienen haben möchte, fügt bitte noch die dafür notwendigen Attribute und die leicht geänderten homebridgeMappings wie folgt ein:
attr <ZM1701> genericDeviceType lock
attr <ZM1701> homebridgeMapping LockCurrentState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED LockTargetState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED,cmds=SECURED:close;UNSECURED:open
attr <ZM1701> /doorLockOperation open:open/doorLockOperation close:close
attr <ZM1701> webCmd open:close

Getestet mit
FHEM 5.7 Rev. 12191
homebridge 0.4.6
homebridge-fhem 0.2.48

== Roomba über THINKINGCLEANER Modul ==
attr <THINKINGCLEANER> genericDeviceType switch
attr <THINKINGCLEANER> homebridgeMapping clear On=state,valueOn=/^(on|dock)/,cmdOn=on,cmdOff=off,nocache=1 ChargingState=deviceStatus,values=/(_recon|_full|_trickle)$/:CHARGING;/^.*/:NOT_CHARGING
attr <THINKINGCLEANER> siriName Robby

Getestet mit
FHEM 5.7 Rev. 12680
homebridge 0.4.11
homebridge-fhem 0.2.66

== Homematic HM-CC-RT-DN Funk-Heizkörperthermostat ==
attr <HMCCRTDN_Channel2_Clima> homebridgeMapping TargetTemperature=desired-temp::desired-temp,minValue=5,maxValue=35,minStep=0.5,nocache=1
CurrentTemperature=BU_Heizung_01_Clima:measured-temp,nocache=1
StatusLowBattery=BU_Heizung_01:battery,values=ok:BATTERY_LEVEL_NORMAL;;/^.*/:BATTERY_LEVEL_LOW
TargetHeatingCoolingState=heatingState,values=OFF:0;;HEAT:1;;COOL:2;;AUTO:3,cmds=OFF:controlManu+off;;HEAT:controlMode+boost;;AUTO:controlMode+auto;;COOL:controlManu+17.0
CurrentHeatingCoolingState=heatingState,values=OFF:0;;HEAT:1;;COOL:2;;AUTO:0,valud=OFF
attr <HMCCRTDN_Channel2_Clima> siriName Robby

[[Kategorie:HOWTOS]]
[[Kategorie:Code Snippets]]

Homebridge User Configs

2017-02-12T18:30:47Z

Svenson08: /* Homematic HM-CC-RT-DN Funk-Heizkörperthermostat */

Dieser Eintrag dient zur Sammlung funktionsfähiger Homebridge Configs.

Bitte immer die FHEM Version und Homebridge Version angegeben.

Sehr gute Hinweise gibt es hier: http://www.meintechblog.de/2015/10/mit-siri-und-fhem-das-gesamte-smart-home-per-stimme-steuern/
== Feuchtesensor ==
Zum Einstieg etwas leicht nachvollziehbares.

Feuchtesensoren haben in der Regel ein "humidity" Reading, im Falle des Opus XT300 Bodenfeuchtesensors auch Temperatur und Batterie Level. Homekit unterstützt einen "HumiditySensor" Service. Dieser ist in homebridge-fhem nicht standardmäßig vorhanden (kann also nicht aus dem dropdown ausgewählt werden, sondern muss über das Befehlsfeld zugewiesen werden):

<code>attr meinSensor genericDeviceType HumiditySensor</code>

Im nächsten Schritt werden die Readings gemappt:

<code>attr meinSensor homebridgeMapping clear CurrentRelativeHumidity=humidity StatusLowBattery=battery,values=ok:BATTERY_LEVEL_NORMAL;;/^.*/:BATTERY_LEVEL_LOW CurrentTemperature=temperature</code>

<code>clear</code>löscht default mappings - das wird in der Regel nicht notwendig sein, schadet aber nicht

<code>CurrentRelativeHumidity</code> ist die relevante Homekit Characteristic - wird mit dem entsprechenden Reading des Sensors gemappt.

<code>StatusLowBattery</code> erwartet entweder BATTERY_LEVEL_NORMAL oder _LOW. Mein Sensor liefert ok zurück, wenn alles gut ist, also wird "ok" auf _NORMAL gemappt, alles andere auf _LOW.

Der Opus XT300 Bodenfeuchtesensors liefert auch noch die Temperatur - der HumiditySensor Service sieht das eigentlich nicht vor, daher wird die Temperatur auch nicht in der Apple "Home" App angezeigt. Bei Eve wird die Temperatur hingegen berücksichtigt.

== EnOcean STM 250 Tür-/Fensterkontakt ==
Der STM 250 liefert als Status in FHEM <code>open</code>, wenn das Fenster offen und damit der Kontakt "offen" ist. Analog liefert er <code>closed</code> wenn das Fenster geschlossen und damit auch der Kontakt geschlossen ist. Diese Statusangaben sind sehr intuitiv zu verstehen und zu interpretieren.

Die characteristic <code>ContactSensorState</code> von HomeKit liefert entweder den Wert <code>CONTACT_DETECTED=0</code> oder <code>CONTACT_NOT_DETECTED=1</code> zurück. Wobei <code>CONTACT_DETECTED</code> bedeutet, dass der Kontakt geschlossen ist. Je nach Darstellung in der HomeKit-fähigen App muss dieses Verhalten bei der Interpretation berücksichtigt werden. Die App Eve von Elgato zum Beispiel liefert für Kontaktsensoren "JA" oder "NEIN" mit der Bedeutung <code>CONTACT_DETECTED=0=JA</code> bzw. <code>CONTACT_NOT_DETECTED=1=NEIN</code> zurück.

Noch ein wichtiger Punkt: Um einen Sensorkontakt sinnvoll einzurichten sollte als zusätzlicher Wert für das Attribut <code>genericdeviceType</code> der Wert <code>ContactSensor</code> hinzugefügt werden. Wie das geht ist im Eintrag [[Homebridge_einrichten#FHEM_konfigurieren | Homebridge einrichten]] ausführlicher beschrieben.

Folgende Attribute dann hinzufügen:
attr STM250 genericDeviceType ContactSensor
attr STM250 homebridgeMapping ContactSensorState=state,values=closed:CONTACT_DETECTED;open:CONTACT_NOT_DETECTED

Getestet mit
FHEM 5.7 Rev. 9893
Homebridge 0.2.16
homebridge-fhem Vorschauversion aus [http://forum.fhem.de/index.php/topic,48558.msg402024.html#msg402024 homebridge/homekit]

== Modul RESIDENTS für Anwesenheitserkennung und Steuerung der Anwesenheit benutzen ==
[[Datei:Homebridge_bewohner_zu_szene.jpeg|mini|Schaltzustand eines Bewohners zu einer Szene hinzufügen]]
Aus den einzelnen Komponenten des Moduls RESIDENTS, homebridge sowie der characteristic <code>On</code> und der Szenensteuerung lässt sich eine gleichzeitige Steuerung der Anwesenheit und Anwesenheitserkennung basteln.

Dazu müssen folgende Schritte unternommen werden:
* einem Bewohner aus dem Modul ROOMMATE die Steuerung über homebridgeMapping hinzufügen
* Szene für "Ich bin zu Hause" und "Ich gehe jetzt" in einer HomeKit-fähigen App wie z.B. Eve einrichten

Man kann einen beliebigen Bewohner aus dem Modul ROOMMATE nehmen und ihn über die characteristic <code>On</code> in Form eines Schalters sozusagen schaltbar machen. Nur wird das Ein- und Ausschalten des Bewohners über HomeKit in FHEM auf den Status home bzw. absent gemappt. Seit dem 06.02.2016 werden RESIDENTS automatisch als Occupancy Sensor für HomeKit annonciert. Nun noch die Attribute des ROOMMATE wie folgt setzen:
attr <ROOMMATE> genericDeviceType switch
attr <ROOMMATE> homebridgeMapping On=state,valueOn=/home|awoken|asleep|gotosleep/,valueOff=/gone|absent/,cmdOn=home,cmdOff=absent

Natürlich muss der Bewohner noch dem Filter von homebridge hinzugefügt und homebridge neu gestartet werden.

Anschließend geht es in der HomeKit-fähigen App Deiner Wahl weiter. In Eve von Elgato ist von vornherein zum Beispiel vorgesehen, dass man zwei Szenen "Ich bin zuhause" und "Ich verlasse das Haus" hat. Zu diesen Szenen wird eine Aktion hinzugefügt indem der Bewohner, den das ROOMMATE-Modul meldet zur Szene hinzugefügt wird und beim Nachhausekommen "eingeschaltet" wird. Genauso wird mit der Szene "Ich verlasse das Haus" verfahren: Bewohner zur Szene hinzufügen und den Schaltvorgang auf "ausschalten" setzen.

Mit den Sprachbefehlen "Ich bin zuhause" oder "Ich verlasse das Haus" wird die entsprechende Szene eingeschaltet, homebridge schaltet über das <code>homebridgeMapping</code> Attribut dann den Bewohner auf "home" oder "absent".

Getestet mit
FHEM 5.7 Rev. 9893
Homebridge 0.2.16
homebridge-fhem Vorschauversion aus [http://forum.fhem.de/index.php/topic,48558.msg402024.html#msg402024 homebridge/homekit]

== ZWave Türschloss Vision ZM1701 einbinden ==
Das ZWave Türschloss ZM1701 von der Firma Vision sendet seinen aktuellen Schließstatus in ein einzelnes Reading wie "lock", sondern schickt eine ganze Reihe von Informationen über den Zustand in das Reading <code>doorLockOperation</code>. Das Schließen und Öffnen der Türschlosses wird auch nicht mit einem Setzen des <code>state</code> erreicht, sondern mit dem Setzen von <code>doorLockOperation</code>. Das macht das Einbinden in homebridge nicht trivial, funktioniert aber über folgendes Homebridge-Mapping:
attr <ZM1701> genericDeviceType lock
attr <ZM1701> homebridgeMapping LockCurrentState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED LockTargetState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED,cmds=SECURED:doorLockOperation+close;UNSECURED:doorLockOperation+open

Kurz zur Erklärung: Um ein Schloss über HomeKit steuern zu können braucht es zwei characteristics. LockCurrentState zeigt an, ob das Schloss geöffnet oder geschlossen ist. Und mit LockTargetState wird das Schloss geöffnet oder geschlossen. Damit der aktuelle Status des Schlosses ausgelesen werden kann, muss aus dem FHEM-Reading <code>doorLockOperation</code> die Zeichenfolge <code> secured</code> oder <code>unsecured</code> extrahiert werden, daher die beiden regulären Ausdrücke <code>/\ssecured/</code> und <code>/unsecured/</code>. In der characteristic <code>LockTargetState</code> muss sowohl der aktuelle Status des Schlosses als auch das Kommando angegeben werden, schließlich möchte man ein geschlossenes Schloss nicht nochmal schließen. Daher wird erst aus dem Reading <code>doorLockOperation</code> der aktuelle Status des Schlosses ausgelesen und die damit korrespondierenden Befehle über <code>cmds=SECURED:doorLockOperation+close;UNSECURED:doorLockOperation+open</code> generiert.

Wer es in FHEM über ein webCmd einfacher zu bedienen haben möchte, fügt bitte noch die dafür notwendigen Attribute und die leicht geänderten homebridgeMappings wie folgt ein:
attr <ZM1701> genericDeviceType lock
attr <ZM1701> homebridgeMapping LockCurrentState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED LockTargetState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED,cmds=SECURED:close;UNSECURED:open
attr <ZM1701> /doorLockOperation open:open/doorLockOperation close:close
attr <ZM1701> webCmd open:close

Getestet mit
FHEM 5.7 Rev. 12191
homebridge 0.4.6
homebridge-fhem 0.2.48

== Roomba über THINKINGCLEANER Modul ==
attr <THINKINGCLEANER> genericDeviceType switch
attr <THINKINGCLEANER> homebridgeMapping clear On=state,valueOn=/^(on|dock)/,cmdOn=on,cmdOff=off,nocache=1 ChargingState=deviceStatus,values=/(_recon|_full|_trickle)$/:CHARGING;/^.*/:NOT_CHARGING
attr <THINKINGCLEANER> siriName Robby

Getestet mit
FHEM 5.7 Rev. 12680
homebridge 0.4.11
homebridge-fhem 0.2.66

== Homematic HM-CC-RT-DN Funk-Heizkörperthermostat ==
attr <HMCCRTDN_Channel2_Clima> homebridgeMapping TargetTemperature=desired-temp::desired-temp,minValue=5,maxValue=35,minStep=0.5,nocache=1
CurrentTemperature=BU_Heizung_01_Clima:measured-temp,nocache=1
StatusLowBattery=BU_Heizung_01:battery,values=ok:BATTERY_LEVEL_NORMAL;;/^.*/:BATTERY_LEVEL_LOW
TargetHeatingCoolingState=heatingState,values=OFF:0;;HEAT:1;;COOL:2;;AUTO:3,cmds=OFF:controlManu+off;;HEAT:controlMode+boost;;AUTO:controlMode+auto;;COOL:controlManu+17.0
CurrentHeatingCoolingState=heatingState,values=OFF:0;;HEAT:1;;COOL:2;;AUTO:0,valud=OFF
attr <HMCCRTDN_Channel2_Clima> siriName Robby

[[Kategorie:HOWTOS]]
[[Kategorie:Code Snippets]]

Homebridge User Configs

2017-02-12T18:30:22Z

Svenson08: /* Homematic HM-CC-RT-DN Funk-Heizkörperthermostat */

Dieser Eintrag dient zur Sammlung funktionsfähiger Homebridge Configs.

Bitte immer die FHEM Version und Homebridge Version angegeben.

Sehr gute Hinweise gibt es hier: http://www.meintechblog.de/2015/10/mit-siri-und-fhem-das-gesamte-smart-home-per-stimme-steuern/
== Feuchtesensor ==
Zum Einstieg etwas leicht nachvollziehbares.

Feuchtesensoren haben in der Regel ein "humidity" Reading, im Falle des Opus XT300 Bodenfeuchtesensors auch Temperatur und Batterie Level. Homekit unterstützt einen "HumiditySensor" Service. Dieser ist in homebridge-fhem nicht standardmäßig vorhanden (kann also nicht aus dem dropdown ausgewählt werden, sondern muss über das Befehlsfeld zugewiesen werden):

<code>attr meinSensor genericDeviceType HumiditySensor</code>

Im nächsten Schritt werden die Readings gemappt:

<code>attr meinSensor homebridgeMapping clear CurrentRelativeHumidity=humidity StatusLowBattery=battery,values=ok:BATTERY_LEVEL_NORMAL;;/^.*/:BATTERY_LEVEL_LOW CurrentTemperature=temperature</code>

<code>clear</code>löscht default mappings - das wird in der Regel nicht notwendig sein, schadet aber nicht

<code>CurrentRelativeHumidity</code> ist die relevante Homekit Characteristic - wird mit dem entsprechenden Reading des Sensors gemappt.

<code>StatusLowBattery</code> erwartet entweder BATTERY_LEVEL_NORMAL oder _LOW. Mein Sensor liefert ok zurück, wenn alles gut ist, also wird "ok" auf _NORMAL gemappt, alles andere auf _LOW.

Der Opus XT300 Bodenfeuchtesensors liefert auch noch die Temperatur - der HumiditySensor Service sieht das eigentlich nicht vor, daher wird die Temperatur auch nicht in der Apple "Home" App angezeigt. Bei Eve wird die Temperatur hingegen berücksichtigt.

== EnOcean STM 250 Tür-/Fensterkontakt ==
Der STM 250 liefert als Status in FHEM <code>open</code>, wenn das Fenster offen und damit der Kontakt "offen" ist. Analog liefert er <code>closed</code> wenn das Fenster geschlossen und damit auch der Kontakt geschlossen ist. Diese Statusangaben sind sehr intuitiv zu verstehen und zu interpretieren.

Die characteristic <code>ContactSensorState</code> von HomeKit liefert entweder den Wert <code>CONTACT_DETECTED=0</code> oder <code>CONTACT_NOT_DETECTED=1</code> zurück. Wobei <code>CONTACT_DETECTED</code> bedeutet, dass der Kontakt geschlossen ist. Je nach Darstellung in der HomeKit-fähigen App muss dieses Verhalten bei der Interpretation berücksichtigt werden. Die App Eve von Elgato zum Beispiel liefert für Kontaktsensoren "JA" oder "NEIN" mit der Bedeutung <code>CONTACT_DETECTED=0=JA</code> bzw. <code>CONTACT_NOT_DETECTED=1=NEIN</code> zurück.

Noch ein wichtiger Punkt: Um einen Sensorkontakt sinnvoll einzurichten sollte als zusätzlicher Wert für das Attribut <code>genericdeviceType</code> der Wert <code>ContactSensor</code> hinzugefügt werden. Wie das geht ist im Eintrag [[Homebridge_einrichten#FHEM_konfigurieren | Homebridge einrichten]] ausführlicher beschrieben.

Folgende Attribute dann hinzufügen:
attr STM250 genericDeviceType ContactSensor
attr STM250 homebridgeMapping ContactSensorState=state,values=closed:CONTACT_DETECTED;open:CONTACT_NOT_DETECTED

Getestet mit
FHEM 5.7 Rev. 9893
Homebridge 0.2.16
homebridge-fhem Vorschauversion aus [http://forum.fhem.de/index.php/topic,48558.msg402024.html#msg402024 homebridge/homekit]

== Modul RESIDENTS für Anwesenheitserkennung und Steuerung der Anwesenheit benutzen ==
[[Datei:Homebridge_bewohner_zu_szene.jpeg|mini|Schaltzustand eines Bewohners zu einer Szene hinzufügen]]
Aus den einzelnen Komponenten des Moduls RESIDENTS, homebridge sowie der characteristic <code>On</code> und der Szenensteuerung lässt sich eine gleichzeitige Steuerung der Anwesenheit und Anwesenheitserkennung basteln.

Dazu müssen folgende Schritte unternommen werden:
* einem Bewohner aus dem Modul ROOMMATE die Steuerung über homebridgeMapping hinzufügen
* Szene für "Ich bin zu Hause" und "Ich gehe jetzt" in einer HomeKit-fähigen App wie z.B. Eve einrichten

Man kann einen beliebigen Bewohner aus dem Modul ROOMMATE nehmen und ihn über die characteristic <code>On</code> in Form eines Schalters sozusagen schaltbar machen. Nur wird das Ein- und Ausschalten des Bewohners über HomeKit in FHEM auf den Status home bzw. absent gemappt. Seit dem 06.02.2016 werden RESIDENTS automatisch als Occupancy Sensor für HomeKit annonciert. Nun noch die Attribute des ROOMMATE wie folgt setzen:
attr <ROOMMATE> genericDeviceType switch
attr <ROOMMATE> homebridgeMapping On=state,valueOn=/home|awoken|asleep|gotosleep/,valueOff=/gone|absent/,cmdOn=home,cmdOff=absent

Natürlich muss der Bewohner noch dem Filter von homebridge hinzugefügt und homebridge neu gestartet werden.

Anschließend geht es in der HomeKit-fähigen App Deiner Wahl weiter. In Eve von Elgato ist von vornherein zum Beispiel vorgesehen, dass man zwei Szenen "Ich bin zuhause" und "Ich verlasse das Haus" hat. Zu diesen Szenen wird eine Aktion hinzugefügt indem der Bewohner, den das ROOMMATE-Modul meldet zur Szene hinzugefügt wird und beim Nachhausekommen "eingeschaltet" wird. Genauso wird mit der Szene "Ich verlasse das Haus" verfahren: Bewohner zur Szene hinzufügen und den Schaltvorgang auf "ausschalten" setzen.

Mit den Sprachbefehlen "Ich bin zuhause" oder "Ich verlasse das Haus" wird die entsprechende Szene eingeschaltet, homebridge schaltet über das <code>homebridgeMapping</code> Attribut dann den Bewohner auf "home" oder "absent".

Getestet mit
FHEM 5.7 Rev. 9893
Homebridge 0.2.16
homebridge-fhem Vorschauversion aus [http://forum.fhem.de/index.php/topic,48558.msg402024.html#msg402024 homebridge/homekit]

== ZWave Türschloss Vision ZM1701 einbinden ==
Das ZWave Türschloss ZM1701 von der Firma Vision sendet seinen aktuellen Schließstatus in ein einzelnes Reading wie "lock", sondern schickt eine ganze Reihe von Informationen über den Zustand in das Reading <code>doorLockOperation</code>. Das Schließen und Öffnen der Türschlosses wird auch nicht mit einem Setzen des <code>state</code> erreicht, sondern mit dem Setzen von <code>doorLockOperation</code>. Das macht das Einbinden in homebridge nicht trivial, funktioniert aber über folgendes Homebridge-Mapping:
attr <ZM1701> genericDeviceType lock
attr <ZM1701> homebridgeMapping LockCurrentState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED LockTargetState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED,cmds=SECURED:doorLockOperation+close;UNSECURED:doorLockOperation+open

Kurz zur Erklärung: Um ein Schloss über HomeKit steuern zu können braucht es zwei characteristics. LockCurrentState zeigt an, ob das Schloss geöffnet oder geschlossen ist. Und mit LockTargetState wird das Schloss geöffnet oder geschlossen. Damit der aktuelle Status des Schlosses ausgelesen werden kann, muss aus dem FHEM-Reading <code>doorLockOperation</code> die Zeichenfolge <code> secured</code> oder <code>unsecured</code> extrahiert werden, daher die beiden regulären Ausdrücke <code>/\ssecured/</code> und <code>/unsecured/</code>. In der characteristic <code>LockTargetState</code> muss sowohl der aktuelle Status des Schlosses als auch das Kommando angegeben werden, schließlich möchte man ein geschlossenes Schloss nicht nochmal schließen. Daher wird erst aus dem Reading <code>doorLockOperation</code> der aktuelle Status des Schlosses ausgelesen und die damit korrespondierenden Befehle über <code>cmds=SECURED:doorLockOperation+close;UNSECURED:doorLockOperation+open</code> generiert.

Wer es in FHEM über ein webCmd einfacher zu bedienen haben möchte, fügt bitte noch die dafür notwendigen Attribute und die leicht geänderten homebridgeMappings wie folgt ein:
attr <ZM1701> genericDeviceType lock
attr <ZM1701> homebridgeMapping LockCurrentState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED LockTargetState=doorLockOperation,values=/\ssecured/:SECURED;/unsecured/:UNSECURED,cmds=SECURED:close;UNSECURED:open
attr <ZM1701> /doorLockOperation open:open/doorLockOperation close:close
attr <ZM1701> webCmd open:close

Getestet mit
FHEM 5.7 Rev. 12191
homebridge 0.4.6
homebridge-fhem 0.2.48

== Roomba über THINKINGCLEANER Modul ==
attr <THINKINGCLEANER> genericDeviceType switch
attr <THINKINGCLEANER> homebridgeMapping clear On=state,valueOn=/^(on|dock)/,cmdOn=on,cmdOff=off,nocache=1 ChargingState=deviceStatus,values=/(_recon|_full|_trickle)$/:CHARGING;/^.*/:NOT_CHARGING
attr <THINKINGCLEANER> siriName Robby

Getestet mit
FHEM 5.7 Rev. 12680
homebridge 0.4.11
homebridge-fhem 0.2.66

== Homematic HM-CC-RT-DN Funk-Heizkörperthermostat ==
attr <HMCCRTDN_Channel2_Clima> homebridgeMapping TargetTemperature=desired-temp::desired-temp,minValue=5,maxValue=35,minStep=0.5,nocache=1
CurrentTemperature=BU_Heizung_01_Clima:measured-temp,nocache=1
StatusLowBattery=BU_Heizung_01:battery,values=ok:BATTERY_LEVEL_NORMAL;;/^.*/:BATTERY_LEVEL_LOW
TargetHeatingCoolingState=heatingState,values=OFF:0;;HEAT:1;;COOL:2;;AUTO:3,cmds=OFF:controlManu+off;;HEAT:controlMode+boost;;AUTO:controlMode+auto;;COOL:controlManu+17.0
CurrentHeatingCoolingState=heatingState,values=OFF:0;;HEAT:1;;COOL:2;;AUTO:0,valud=OFF
attr <HMCCRTDN_Channel2_Clima> siriName Robby

[[Kategorie:HOWTOS]]
[[Kategorie:Code Snippets]]

Homebridge Start und Status in FHEM

2017-02-09T05:34:27Z

Svenson08: /* Vorwort */

Um nicht bei jeder Änderung, welche die Homebridge betrifft, diese über die Console manuell neustarten zu müssen zeigt diese Lösung wie dies bequem aus FHEMWEB erfolgen kann. In den nachfolgenden Abschnitten sind die einzelnen Schritte dazu erläutert.

== Vorwort ==
Die im weitern genutzten Bezeichnungen von Dummys, Scriptdateinamen o.ä. können geändert werden. Die Änderungen müssen jedoch auch an allen entsprechenden Stellen vorgenommen werden.
Genannte IP Adressen, Benutzernamen und Passwörter sind auf die eigenen Gegebenheiten anzupassen. Die Berechtigungen des Benutzers müssen zur Ausführung der Scripte geprüft und ggf. angepasst werden. Entprechende Linux Kentnisse sollten vorhanden sein. Dieser Artikel berücksichtigt das FHEM und Homebridge nicht zwingend auf dem selben System laufen. Die hier gezeigte Lösung kann für beide Varianten genutzt werden, FHEM und Homebridge auf dem gleichen System oder auf getrennten Systemen.

== Umsetzung ==

=== Status- und Kontroll-Dummy ===
[[Datei:HomebridgeDummy.PNG|mini|550px|Status- bzw. Kontroll-Dummy]]

Es wird ein Dummy benötigt, welcher den Status des Homebridge-Dienstes anzeigt und über den dieser Dienst gesteuert werden kann. Das nötige Script um die Homebridge als Dienst zu starten wird weiter unten in diesem Artikel erstellt.

<source lang="bash" style="width:100%;">
define SYS_Homebridge dummy
attr SYS_Homebridge devStateIcon .*on:general_an .*off:general_aus .*:audio_rec
attr SYS_Homebridge eventMap status:status start:start stop:stop restart:restart
attr SYS_Homebridge icon it_router
attr SYS_Homebridge room System
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo service homebridge ".ReadingsVal($NAME,"state","restart")." &" );; }
attr SYS_Homebridge webCmd status:start:stop:restart
</source>

Der Dummy wird durch setzen von "start", "stop", "restart" oder "status" jeweils das userReading ausführen und somit letztendlich den homebridge Dienst steuert.

=== Start Script anlegen ===
Nun ist das Startscript für die Homebridge anzulegen. Mittels dem folgenden Befehl wird (wenn noch nicht vorhanden) das homebridge Script angelegt und im Editor geöffnet.

<source lang="bash" style="width:100%;">
sudo nano /etc/init.d/homebridge
</source>
Wenn die Homebridge nicht auf dem selben System läuft wie FHEM muss dieser Schritt auf dem Homebridge System ausgeführt werden.

Das nun folgende Script kann in die homebridge Datei, die im Nano Editor geöffnet, ist rein kopiert werden.

'''Achtung''': die Variabeln ''homeBridgeUser'', ''fhemHost'' und ''fhemHostTelnetPort'' sind ggf. auf die eigenen Gegebenheiten anzupassen.

<source lang="bash" style="width:100%;">
#!/bin/sh
### BEGIN INIT INFO
# Provides: homebridge
# Required-Start: $network $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start daemon at boot time for homebridge
# Description: Enable service provided by daemon.
### END INIT INFO
export PATH=$PATH:/usr/local/bin
export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules

PID=`pidof homebridge`
homeBridgeUser="fhem"
fhemHost=127.0.0.1 #FHEM Server (Masterinstanz)
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz
fhemDefine="SYS_Homebridge"

case "$1" in
start)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is already running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is already running"
else
su - $homeBridgeUser -c "homebridge > /dev/null 2>&1 &"
echo "Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine on"
sleep 2
$0 status
fi
;;
stop)
if ! ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
else
kill $PID
echo "Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine off"
sleep 2
$0 status
fi
;;
restart)
if ! ps -p $PID > /dev/null 2>&1; then
$0 start
else
$0 stop
$0 start
fi
;;
status)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is running PID $PID"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge running as PID $PID"
else
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0

</source>

Das Script setzt in dem bereits angelegten Dummy ein Reading ''info'' in dem der Ausführungsstatus des Scripts wieder gegeben wird. Das Reading ''state'' wir auf on oder off gesetzt. ''On'' bedeutet das Homebridge gestartet ist, ''off'' das die Homebridge nicht ausgeführt wird.

Damit die Homebridge auch mit Start des Systems gestartet wird sind die folgenden zwei Schritte notwendig

<source lang="bash" style="width:100%;">
sudo chmod 755 /etc/init.d/homebridge
sudo update-rc.d homebridge defaults
</source>

Zum testen kann der Dienst nun mit dem Befehl

<source lang="bash" style="width:100%;">
sudo service homebridge start
</source>
bzw.
<source lang="bash" style="width:100%;">
sudo /etc/init.d/homebridge start
</source>

gestartet werden. In dem angelegten Dummy werden zwei Readings erzeugt mit den entsprechenden Rückmeldungen aus dem Script. Die Readings werden erst angezeigt wenn die bereits geöffnete Detailseite des Dummys neu geladen wird.

=== Testlauf / Fertig ===
Nun können die einzelnen Aktionen über den Dummy ausführt werden. Dabei wird jeweils der eingerichtete Dienst angesteuert und eine (mit kurzer Verzögerung) Rückmeldung gegeben.

== Sonstiges ==

=== FHEM Benutzer Zugriff auf Script gewähren ===

Damit aus FHEM das Script ausgeführt werden kann benötigt dieser Benutzer entsprechende Berechtigungen. Dazu ist in der sudoers ein Eintrag zu ergänzen.
Dazu wird die sudoers Datei im Nano Editor geöffnet

<source lang="bash" style="width:100%;">
sudo nano /etc/sudoers
</source>

Dort sollte im Abschnitt ''# User privilege specification'' die folgende Zeile ergänzt werden

<source lang="bash" style="width:100%;">
fhem ALL=(ALL) NOPASSWD:/etc/init.d/homebridge
</source>

'''Achtung!''' Sollte FHEM nicht unter dem Benuter ''fhem'' laufen ist dies an den entsprechenden Stellen anzupassen.

Beispielinhalt der sudoers:
<source lang="bash" style="width:100%;">
#
# This file MUST be edited with the 'visudo' command as root.
#
# Please consider adding local content in /etc/sudoers.d/ instead of
# directly modifying this file.
#
# See the man page for details on how to write a sudoers file.
#
Defaults env_reset
Defaults mail_badpass
Defaults secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root ALL=(ALL:ALL) ALL
fhem ALL=(ALL) NOPASSWD:/opt/fhem/FHEM/backup.sh, /etc/init.d/homebridge

# Members of the admin group may gain root privileges
%admin ALL = (ALL) NOPASSWD: ALL

# Allow members of group sudo to execute any command
%sudo ALL=(ALL:ALL) ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d
</source>

[[Kategorie:HOWTOS]]

=== Anpassung wenn FHEM und Homebridge auf getrennten Systemen laufen ===
Unter dem Kapitel [[Umsetzung]] wurde bereits alles vorbereitet um mit wenigen Änderungen eine Homebridge zu starten die nicht auf dem selben System läuft wie FHEM. Es sind nur 2 Änderungen notwendig.
Die erste Änderung betrifft den eingerichteten Dummy. Hier ist das vorhandenen ''userReadings'' wie folgt abzuändern

<source lang="bash" style="width:100%;">
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo /opt/fhem/FHEM/homebridgeserviceremote.sh ".ReadingsVal($NAME,"state","restart")." &" );; }
</source>

Dadurch wird, durch die Aktionen des Dummys, ein weiteres Script angesprochen.

Nun wird dieses Script mit hilfe des Nano Editor angelegt

<source lang="bash" style="width:100%;">
sudo nano /opt/fhem/FHEM/homebridgeserviceremote.sh
</source>

und mit dem folgenden Inhalt befüllt.

'''Achtung''': die Variabeln ''remoteUser'', ''remotePasswort'' und ''remoteHost'' sind ggf. auf die eigenen Gegebenheiten der entfernt laufenden Homebridge anzupassen. Der hier genannte Benutzer muss natürlich berechtigt sein die Homebridge starten zu können. Es sollte auch nicht der root User verwendet werden, sondern ein eigens dafür angelegter und in den Berechtigungen eingeschränkter Benutzer verwendet werden.
Wer zur Fehleranalyse etwas mehr sehen möchte ändert den Wert von ''debug'' auf 1.

<source lang="bash" style="width:100%;">
#!/bin/bash
debug=0
remoteUser="root"
remotePasswort="root"
remoteHost="192.168.1.111"
remoteService="homebridge"
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz

# Vorraussetzungen prüfen
if [ $(dpkg-query -W -f='${Status}' sshpass 2>/dev/null | grep -c "ok installed") -eq 0 ];
then
if [ "$debug" = "1" ]; then
echo "sshpass wird benötigt. Installation beginnt";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wird benötigt. Installation beginnt\"}";
fi
apt-get install sshpass
if [ "$debug" = "1" ]; then
echo "sshpass wurde installiert";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wurde installiert\"}";
fi
fi
###################################

# Befehl ausführen
case "$1" in
start)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService start"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
stop)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService stop"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
restart)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService restart"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi

;;
status)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService status"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0
###################################
</source>

Das Script macht nicht sehr viel. Es verbindet sich über ssh mit dem entfernten System und startet (stopt, etc.) den Homebridge Dienst. Hinweis: es wird sshpass benötigt, welches das Script bei bedarf versucht zu installieren.

== Dankeschön ==
Ein Dankeschön geht an die Entwicklergemeinde rund um Homebridge und dem FHEM Plugin für die Homebridge.

Ein besonderes Dankeschön an ''No Legend'' der die zugrunde liegende Idee und Lösung in diesem Artikel beschrieben hat.

Homebridge Start und Status in FHEM

2017-02-09T05:25:45Z

Svenson08: /* Anpassung wenn FHEM und Homebridge auf getrennten Systemen laufen */

Um nicht bei jeder Änderung, welche die Homebridge betrifft, diese über die Console manuell neustarten zu müssen zeigt diese Lösung wie dies bequem aus FHEMWEB erfolgen kann. In den nachfolgenden Abschnitten sind die einzelnen Schritte dazu erläutert.

== Vorwort ==
Die im weitern genutzten Bezeichnungen von Dummys, Scriptdateinamen o.ä. können geändert werden. Die Änderungen müssen jedoch auch an allen entsprechenden Stellen vorgenommen werden.
Genannte IP Adressen, Benutzernamen und Passwörter sind auf die eigenen Gegebenheiten anzupassen. Die Berechtigungen des Benutzers müssen zur Ausführung der Scripte geprüft und ggf. angepasst werden. Entprechende Linux Kentnisse sollten vorhanden sein. In Teilen berücksichtigt dieser Artikel das FHEM und Homebridge nicht zwingend auf dem selben System laufen. Die hier gezeigte Lösung kann für beide Varianten genutzt werden, FHEM und Homebridge auf dem gleichen System oder auf getrennten Systemen.

== Umsetzung ==

=== Status- und Kontroll-Dummy ===
[[Datei:HomebridgeDummy.PNG|mini|550px|Status- bzw. Kontroll-Dummy]]

Es wird ein Dummy benötigt, welcher den Status des Homebridge-Dienstes anzeigt und über den dieser Dienst gesteuert werden kann. Das nötige Script um die Homebridge als Dienst zu starten wird weiter unten in diesem Artikel erstellt.

<source lang="bash" style="width:100%;">
define SYS_Homebridge dummy
attr SYS_Homebridge devStateIcon .*on:general_an .*off:general_aus .*:audio_rec
attr SYS_Homebridge eventMap status:status start:start stop:stop restart:restart
attr SYS_Homebridge icon it_router
attr SYS_Homebridge room System
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo service homebridge ".ReadingsVal($NAME,"state","restart")." &" );; }
attr SYS_Homebridge webCmd status:start:stop:restart
</source>

Der Dummy wird durch setzen von "start", "stop", "restart" oder "status" jeweils das userReading ausführen und somit letztendlich den homebridge Dienst steuert.

=== Start Script anlegen ===
Nun ist das Startscript für die Homebridge anzulegen. Mittels dem folgenden Befehl wird (wenn noch nicht vorhanden) das homebridge Script angelegt und im Editor geöffnet.

<source lang="bash" style="width:100%;">
sudo nano /etc/init.d/homebridge
</source>
Wenn die Homebridge nicht auf dem selben System läuft wie FHEM muss dieser Schritt auf dem Homebridge System ausgeführt werden.

Das nun folgende Script kann in die homebridge Datei, die im Nano Editor geöffnet, ist rein kopiert werden.

'''Achtung''': die Variabeln ''homeBridgeUser'', ''fhemHost'' und ''fhemHostTelnetPort'' sind ggf. auf die eigenen Gegebenheiten anzupassen.

<source lang="bash" style="width:100%;">
#!/bin/sh
### BEGIN INIT INFO
# Provides: homebridge
# Required-Start: $network $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start daemon at boot time for homebridge
# Description: Enable service provided by daemon.
### END INIT INFO
export PATH=$PATH:/usr/local/bin
export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules

PID=`pidof homebridge`
homeBridgeUser="fhem"
fhemHost=127.0.0.1 #FHEM Server (Masterinstanz)
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz
fhemDefine="SYS_Homebridge"

case "$1" in
start)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is already running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is already running"
else
su - $homeBridgeUser -c "homebridge > /dev/null 2>&1 &"
echo "Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine on"
sleep 2
$0 status
fi
;;
stop)
if ! ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
else
kill $PID
echo "Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine off"
sleep 2
$0 status
fi
;;
restart)
if ! ps -p $PID > /dev/null 2>&1; then
$0 start
else
$0 stop
$0 start
fi
;;
status)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is running PID $PID"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge running as PID $PID"
else
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0

</source>

Das Script setzt in dem bereits angelegten Dummy ein Reading ''info'' in dem der Ausführungsstatus des Scripts wieder gegeben wird. Das Reading ''state'' wir auf on oder off gesetzt. ''On'' bedeutet das Homebridge gestartet ist, ''off'' das die Homebridge nicht ausgeführt wird.

Damit die Homebridge auch mit Start des Systems gestartet wird sind die folgenden zwei Schritte notwendig

<source lang="bash" style="width:100%;">
sudo chmod 755 /etc/init.d/homebridge
sudo update-rc.d homebridge defaults
</source>

Zum testen kann der Dienst nun mit dem Befehl

<source lang="bash" style="width:100%;">
sudo service homebridge start
</source>
bzw.
<source lang="bash" style="width:100%;">
sudo /etc/init.d/homebridge start
</source>

gestartet werden. In dem angelegten Dummy werden zwei Readings erzeugt mit den entsprechenden Rückmeldungen aus dem Script. Die Readings werden erst angezeigt wenn die bereits geöffnete Detailseite des Dummys neu geladen wird.

=== Testlauf / Fertig ===
Nun können die einzelnen Aktionen über den Dummy ausführt werden. Dabei wird jeweils der eingerichtete Dienst angesteuert und eine (mit kurzer Verzögerung) Rückmeldung gegeben.

== Sonstiges ==

=== FHEM Benutzer Zugriff auf Script gewähren ===

Damit aus FHEM das Script ausgeführt werden kann benötigt dieser Benutzer entsprechende Berechtigungen. Dazu ist in der sudoers ein Eintrag zu ergänzen.
Dazu wird die sudoers Datei im Nano Editor geöffnet

<source lang="bash" style="width:100%;">
sudo nano /etc/sudoers
</source>

Dort sollte im Abschnitt ''# User privilege specification'' die folgende Zeile ergänzt werden

<source lang="bash" style="width:100%;">
fhem ALL=(ALL) NOPASSWD:/etc/init.d/homebridge
</source>

'''Achtung!''' Sollte FHEM nicht unter dem Benuter ''fhem'' laufen ist dies an den entsprechenden Stellen anzupassen.

Beispielinhalt der sudoers:
<source lang="bash" style="width:100%;">
#
# This file MUST be edited with the 'visudo' command as root.
#
# Please consider adding local content in /etc/sudoers.d/ instead of
# directly modifying this file.
#
# See the man page for details on how to write a sudoers file.
#
Defaults env_reset
Defaults mail_badpass
Defaults secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root ALL=(ALL:ALL) ALL
fhem ALL=(ALL) NOPASSWD:/opt/fhem/FHEM/backup.sh, /etc/init.d/homebridge

# Members of the admin group may gain root privileges
%admin ALL = (ALL) NOPASSWD: ALL

# Allow members of group sudo to execute any command
%sudo ALL=(ALL:ALL) ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d
</source>

[[Kategorie:HOWTOS]]

=== Anpassung wenn FHEM und Homebridge auf getrennten Systemen laufen ===
Unter dem Kapitel [[Umsetzung]] wurde bereits alles vorbereitet um mit wenigen Änderungen eine Homebridge zu starten die nicht auf dem selben System läuft wie FHEM. Es sind nur 2 Änderungen notwendig.
Die erste Änderung betrifft den eingerichteten Dummy. Hier ist das vorhandenen ''userReadings'' wie folgt abzuändern

<source lang="bash" style="width:100%;">
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo /opt/fhem/FHEM/homebridgeserviceremote.sh ".ReadingsVal($NAME,"state","restart")." &" );; }
</source>

Dadurch wird, durch die Aktionen des Dummys, ein weiteres Script angesprochen.

Nun wird dieses Script mit hilfe des Nano Editor angelegt

<source lang="bash" style="width:100%;">
sudo nano /opt/fhem/FHEM/homebridgeserviceremote.sh
</source>

und mit dem folgenden Inhalt befüllt.

'''Achtung''': die Variabeln ''remoteUser'', ''remotePasswort'' und ''remoteHost'' sind ggf. auf die eigenen Gegebenheiten der entfernt laufenden Homebridge anzupassen. Der hier genannte Benutzer muss natürlich berechtigt sein die Homebridge starten zu können. Es sollte auch nicht der root User verwendet werden, sondern ein eigens dafür angelegter und in den Berechtigungen eingeschränkter Benutzer verwendet werden.
Wer zur Fehleranalyse etwas mehr sehen möchte ändert den Wert von ''debug'' auf 1.

<source lang="bash" style="width:100%;">
#!/bin/bash
debug=0
remoteUser="root"
remotePasswort="root"
remoteHost="192.168.1.111"
remoteService="homebridge"
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz

# Vorraussetzungen prüfen
if [ $(dpkg-query -W -f='${Status}' sshpass 2>/dev/null | grep -c "ok installed") -eq 0 ];
then
if [ "$debug" = "1" ]; then
echo "sshpass wird benötigt. Installation beginnt";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wird benötigt. Installation beginnt\"}";
fi
apt-get install sshpass
if [ "$debug" = "1" ]; then
echo "sshpass wurde installiert";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wurde installiert\"}";
fi
fi
###################################

# Befehl ausführen
case "$1" in
start)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService start"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
stop)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService stop"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
restart)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService restart"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi

;;
status)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService status"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0
###################################
</source>

Das Script macht nicht sehr viel. Es verbindet sich über ssh mit dem entfernten System und startet (stopt, etc.) den Homebridge Dienst. Hinweis: es wird sshpass benötigt, welches das Script bei bedarf versucht zu installieren.

== Dankeschön ==
Ein Dankeschön geht an die Entwicklergemeinde rund um Homebridge und dem FHEM Plugin für die Homebridge.

Ein besonderes Dankeschön an ''No Legend'' der die zugrunde liegende Idee und Lösung in diesem Artikel beschrieben hat.

Homebridge Start und Status in FHEM

2017-02-09T05:24:13Z

Svenson08: /* Anpassung wenn FHEM und Homebridge auf getrennten Systemen laufen */

Um nicht bei jeder Änderung, welche die Homebridge betrifft, diese über die Console manuell neustarten zu müssen zeigt diese Lösung wie dies bequem aus FHEMWEB erfolgen kann. In den nachfolgenden Abschnitten sind die einzelnen Schritte dazu erläutert.

== Vorwort ==
Die im weitern genutzten Bezeichnungen von Dummys, Scriptdateinamen o.ä. können geändert werden. Die Änderungen müssen jedoch auch an allen entsprechenden Stellen vorgenommen werden.
Genannte IP Adressen, Benutzernamen und Passwörter sind auf die eigenen Gegebenheiten anzupassen. Die Berechtigungen des Benutzers müssen zur Ausführung der Scripte geprüft und ggf. angepasst werden. Entprechende Linux Kentnisse sollten vorhanden sein. In Teilen berücksichtigt dieser Artikel das FHEM und Homebridge nicht zwingend auf dem selben System laufen. Die hier gezeigte Lösung kann für beide Varianten genutzt werden, FHEM und Homebridge auf dem gleichen System oder auf getrennten Systemen.

== Umsetzung ==

=== Status- und Kontroll-Dummy ===
[[Datei:HomebridgeDummy.PNG|mini|550px|Status- bzw. Kontroll-Dummy]]

Es wird ein Dummy benötigt, welcher den Status des Homebridge-Dienstes anzeigt und über den dieser Dienst gesteuert werden kann. Das nötige Script um die Homebridge als Dienst zu starten wird weiter unten in diesem Artikel erstellt.

<source lang="bash" style="width:100%;">
define SYS_Homebridge dummy
attr SYS_Homebridge devStateIcon .*on:general_an .*off:general_aus .*:audio_rec
attr SYS_Homebridge eventMap status:status start:start stop:stop restart:restart
attr SYS_Homebridge icon it_router
attr SYS_Homebridge room System
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo service homebridge ".ReadingsVal($NAME,"state","restart")." &" );; }
attr SYS_Homebridge webCmd status:start:stop:restart
</source>

Der Dummy wird durch setzen von "start", "stop", "restart" oder "status" jeweils das userReading ausführen und somit letztendlich den homebridge Dienst steuert.

=== Start Script anlegen ===
Nun ist das Startscript für die Homebridge anzulegen. Mittels dem folgenden Befehl wird (wenn noch nicht vorhanden) das homebridge Script angelegt und im Editor geöffnet.

<source lang="bash" style="width:100%;">
sudo nano /etc/init.d/homebridge
</source>
Wenn die Homebridge nicht auf dem selben System läuft wie FHEM muss dieser Schritt auf dem Homebridge System ausgeführt werden.

Das nun folgende Script kann in die homebridge Datei, die im Nano Editor geöffnet, ist rein kopiert werden.

'''Achtung''': die Variabeln ''homeBridgeUser'', ''fhemHost'' und ''fhemHostTelnetPort'' sind ggf. auf die eigenen Gegebenheiten anzupassen.

<source lang="bash" style="width:100%;">
#!/bin/sh
### BEGIN INIT INFO
# Provides: homebridge
# Required-Start: $network $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start daemon at boot time for homebridge
# Description: Enable service provided by daemon.
### END INIT INFO
export PATH=$PATH:/usr/local/bin
export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules

PID=`pidof homebridge`
homeBridgeUser="fhem"
fhemHost=127.0.0.1 #FHEM Server (Masterinstanz)
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz
fhemDefine="SYS_Homebridge"

case "$1" in
start)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is already running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is already running"
else
su - $homeBridgeUser -c "homebridge > /dev/null 2>&1 &"
echo "Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine on"
sleep 2
$0 status
fi
;;
stop)
if ! ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
else
kill $PID
echo "Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine off"
sleep 2
$0 status
fi
;;
restart)
if ! ps -p $PID > /dev/null 2>&1; then
$0 start
else
$0 stop
$0 start
fi
;;
status)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is running PID $PID"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge running as PID $PID"
else
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0

</source>

Das Script setzt in dem bereits angelegten Dummy ein Reading ''info'' in dem der Ausführungsstatus des Scripts wieder gegeben wird. Das Reading ''state'' wir auf on oder off gesetzt. ''On'' bedeutet das Homebridge gestartet ist, ''off'' das die Homebridge nicht ausgeführt wird.

Damit die Homebridge auch mit Start des Systems gestartet wird sind die folgenden zwei Schritte notwendig

<source lang="bash" style="width:100%;">
sudo chmod 755 /etc/init.d/homebridge
sudo update-rc.d homebridge defaults
</source>

Zum testen kann der Dienst nun mit dem Befehl

<source lang="bash" style="width:100%;">
sudo service homebridge start
</source>
bzw.
<source lang="bash" style="width:100%;">
sudo /etc/init.d/homebridge start
</source>

gestartet werden. In dem angelegten Dummy werden zwei Readings erzeugt mit den entsprechenden Rückmeldungen aus dem Script. Die Readings werden erst angezeigt wenn die bereits geöffnete Detailseite des Dummys neu geladen wird.

=== Testlauf / Fertig ===
Nun können die einzelnen Aktionen über den Dummy ausführt werden. Dabei wird jeweils der eingerichtete Dienst angesteuert und eine (mit kurzer Verzögerung) Rückmeldung gegeben.

== Sonstiges ==

=== FHEM Benutzer Zugriff auf Script gewähren ===

Damit aus FHEM das Script ausgeführt werden kann benötigt dieser Benutzer entsprechende Berechtigungen. Dazu ist in der sudoers ein Eintrag zu ergänzen.
Dazu wird die sudoers Datei im Nano Editor geöffnet

<source lang="bash" style="width:100%;">
sudo nano /etc/sudoers
</source>

Dort sollte im Abschnitt ''# User privilege specification'' die folgende Zeile ergänzt werden

<source lang="bash" style="width:100%;">
fhem ALL=(ALL) NOPASSWD:/etc/init.d/homebridge
</source>

'''Achtung!''' Sollte FHEM nicht unter dem Benuter ''fhem'' laufen ist dies an den entsprechenden Stellen anzupassen.

Beispielinhalt der sudoers:
<source lang="bash" style="width:100%;">
#
# This file MUST be edited with the 'visudo' command as root.
#
# Please consider adding local content in /etc/sudoers.d/ instead of
# directly modifying this file.
#
# See the man page for details on how to write a sudoers file.
#
Defaults env_reset
Defaults mail_badpass
Defaults secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root ALL=(ALL:ALL) ALL
fhem ALL=(ALL) NOPASSWD:/opt/fhem/FHEM/backup.sh, /etc/init.d/homebridge

# Members of the admin group may gain root privileges
%admin ALL = (ALL) NOPASSWD: ALL

# Allow members of group sudo to execute any command
%sudo ALL=(ALL:ALL) ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d
</source>

[[Kategorie:HOWTOS]]

=== Anpassung wenn FHEM und Homebridge auf getrennten Systemen laufen ===
Unter dem Kapitel [[Umsetzung]] wurde bereits alles vorbereitet um mit wenigen Änderungen eine Homebridge zu starten die nicht auf dem selben System läuft wie FHEM. Es nur 2 Änderungen notwendig.
Die erste Änderung betrifft den eingerichteten Dummy. Hier ist das vorhandenen ''userReadings'' wie folgt abzuändern

<source lang="bash" style="width:100%;">
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo /opt/fhem/FHEM/homebridgeserviceremote.sh ".ReadingsVal($NAME,"state","restart")." &" );; }
</source>

Dadurch wird, durch die Aktionen des Dummys, ein weiteres Script angesprochen.

Nun wird dieses Script mit hilfe des Nano Editor angelegt

<source lang="bash" style="width:100%;">
sudo nano /opt/fhem/FHEM/homebridgeserviceremote.sh
</source>

und mit dem folgenden Inhalt befüllt.

'''Achtung''': die Variabeln ''remoteUser'', ''remotePasswort'' und ''remoteHost'' sind ggf. auf die eigenen Gegebenheiten der entfernt laufenden Homebridge anzupassen. Der hier genannte Benutzer muss natürlich berechtigt sein die Homebridge starten zu können. Es sollte auch nicht der root User verwendet werden, sondern ein eigens dafür angelegter und in den Berechtigungen eingeschränkter Benutzer verwendet werden.
Wer zur Fehleranalyse etwas mehr sehen möchte ändert den Wert von ''debug'' auf 1.

<source lang="bash" style="width:100%;">
#!/bin/bash
debug=0
remoteUser="root"
remotePasswort="root"
remoteHost="192.168.1.111"
remoteService="homebridge"
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz

# Vorraussetzungen prüfen
if [ $(dpkg-query -W -f='${Status}' sshpass 2>/dev/null | grep -c "ok installed") -eq 0 ];
then
if [ "$debug" = "1" ]; then
echo "sshpass wird benötigt. Installation beginnt";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wird benötigt. Installation beginnt\"}";
fi
apt-get install sshpass
if [ "$debug" = "1" ]; then
echo "sshpass wurde installiert";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wurde installiert\"}";
fi
fi
###################################

# Befehl ausführen
case "$1" in
start)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService start"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
stop)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService stop"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
restart)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService restart"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi

;;
status)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService status"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0
###################################
</source>

Das Script macht nicht sehr viel. Es verbindet sich über ssh mit dem entfernten System und startet (stopt, etc.) den Homebridge Dienst. Hinweis: es wird sshpass benötigt, welches das Script bei bedarf versucht zu installieren.

== Dankeschön ==
Ein Dankeschön geht an die Entwicklergemeinde rund um Homebridge und dem FHEM Plugin für die Homebridge.

Ein besonderes Dankeschön an ''No Legend'' der die zugrunde liegende Idee und Lösung in diesem Artikel beschrieben hat.

Homebridge Start und Status in FHEM

2017-02-09T05:23:28Z

Svenson08: /* FHEM Benutzer Zugriff auf Script gewähren */

Um nicht bei jeder Änderung, welche die Homebridge betrifft, diese über die Console manuell neustarten zu müssen zeigt diese Lösung wie dies bequem aus FHEMWEB erfolgen kann. In den nachfolgenden Abschnitten sind die einzelnen Schritte dazu erläutert.

== Vorwort ==
Die im weitern genutzten Bezeichnungen von Dummys, Scriptdateinamen o.ä. können geändert werden. Die Änderungen müssen jedoch auch an allen entsprechenden Stellen vorgenommen werden.
Genannte IP Adressen, Benutzernamen und Passwörter sind auf die eigenen Gegebenheiten anzupassen. Die Berechtigungen des Benutzers müssen zur Ausführung der Scripte geprüft und ggf. angepasst werden. Entprechende Linux Kentnisse sollten vorhanden sein. In Teilen berücksichtigt dieser Artikel das FHEM und Homebridge nicht zwingend auf dem selben System laufen. Die hier gezeigte Lösung kann für beide Varianten genutzt werden, FHEM und Homebridge auf dem gleichen System oder auf getrennten Systemen.

== Umsetzung ==

=== Status- und Kontroll-Dummy ===
[[Datei:HomebridgeDummy.PNG|mini|550px|Status- bzw. Kontroll-Dummy]]

Es wird ein Dummy benötigt, welcher den Status des Homebridge-Dienstes anzeigt und über den dieser Dienst gesteuert werden kann. Das nötige Script um die Homebridge als Dienst zu starten wird weiter unten in diesem Artikel erstellt.

<source lang="bash" style="width:100%;">
define SYS_Homebridge dummy
attr SYS_Homebridge devStateIcon .*on:general_an .*off:general_aus .*:audio_rec
attr SYS_Homebridge eventMap status:status start:start stop:stop restart:restart
attr SYS_Homebridge icon it_router
attr SYS_Homebridge room System
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo service homebridge ".ReadingsVal($NAME,"state","restart")." &" );; }
attr SYS_Homebridge webCmd status:start:stop:restart
</source>

Der Dummy wird durch setzen von "start", "stop", "restart" oder "status" jeweils das userReading ausführen und somit letztendlich den homebridge Dienst steuert.

=== Start Script anlegen ===
Nun ist das Startscript für die Homebridge anzulegen. Mittels dem folgenden Befehl wird (wenn noch nicht vorhanden) das homebridge Script angelegt und im Editor geöffnet.

<source lang="bash" style="width:100%;">
sudo nano /etc/init.d/homebridge
</source>
Wenn die Homebridge nicht auf dem selben System läuft wie FHEM muss dieser Schritt auf dem Homebridge System ausgeführt werden.

Das nun folgende Script kann in die homebridge Datei, die im Nano Editor geöffnet, ist rein kopiert werden.

'''Achtung''': die Variabeln ''homeBridgeUser'', ''fhemHost'' und ''fhemHostTelnetPort'' sind ggf. auf die eigenen Gegebenheiten anzupassen.

<source lang="bash" style="width:100%;">
#!/bin/sh
### BEGIN INIT INFO
# Provides: homebridge
# Required-Start: $network $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start daemon at boot time for homebridge
# Description: Enable service provided by daemon.
### END INIT INFO
export PATH=$PATH:/usr/local/bin
export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules

PID=`pidof homebridge`
homeBridgeUser="fhem"
fhemHost=127.0.0.1 #FHEM Server (Masterinstanz)
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz
fhemDefine="SYS_Homebridge"

case "$1" in
start)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is already running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is already running"
else
su - $homeBridgeUser -c "homebridge > /dev/null 2>&1 &"
echo "Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine on"
sleep 2
$0 status
fi
;;
stop)
if ! ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
else
kill $PID
echo "Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine off"
sleep 2
$0 status
fi
;;
restart)
if ! ps -p $PID > /dev/null 2>&1; then
$0 start
else
$0 stop
$0 start
fi
;;
status)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is running PID $PID"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge running as PID $PID"
else
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0

</source>

Das Script setzt in dem bereits angelegten Dummy ein Reading ''info'' in dem der Ausführungsstatus des Scripts wieder gegeben wird. Das Reading ''state'' wir auf on oder off gesetzt. ''On'' bedeutet das Homebridge gestartet ist, ''off'' das die Homebridge nicht ausgeführt wird.

Damit die Homebridge auch mit Start des Systems gestartet wird sind die folgenden zwei Schritte notwendig

<source lang="bash" style="width:100%;">
sudo chmod 755 /etc/init.d/homebridge
sudo update-rc.d homebridge defaults
</source>

Zum testen kann der Dienst nun mit dem Befehl

<source lang="bash" style="width:100%;">
sudo service homebridge start
</source>
bzw.
<source lang="bash" style="width:100%;">
sudo /etc/init.d/homebridge start
</source>

gestartet werden. In dem angelegten Dummy werden zwei Readings erzeugt mit den entsprechenden Rückmeldungen aus dem Script. Die Readings werden erst angezeigt wenn die bereits geöffnete Detailseite des Dummys neu geladen wird.

=== Testlauf / Fertig ===
Nun können die einzelnen Aktionen über den Dummy ausführt werden. Dabei wird jeweils der eingerichtete Dienst angesteuert und eine (mit kurzer Verzögerung) Rückmeldung gegeben.

== Sonstiges ==

=== FHEM Benutzer Zugriff auf Script gewähren ===

Damit aus FHEM das Script ausgeführt werden kann benötigt dieser Benutzer entsprechende Berechtigungen. Dazu ist in der sudoers ein Eintrag zu ergänzen.
Dazu wird die sudoers Datei im Nano Editor geöffnet

<source lang="bash" style="width:100%;">
sudo nano /etc/sudoers
</source>

Dort sollte im Abschnitt ''# User privilege specification'' die folgende Zeile ergänzt werden

<source lang="bash" style="width:100%;">
fhem ALL=(ALL) NOPASSWD:/etc/init.d/homebridge
</source>

'''Achtung!''' Sollte FHEM nicht unter dem Benuter ''fhem'' laufen ist dies an den entsprechenden Stellen anzupassen.

Beispielinhalt der sudoers:
<source lang="bash" style="width:100%;">
#
# This file MUST be edited with the 'visudo' command as root.
#
# Please consider adding local content in /etc/sudoers.d/ instead of
# directly modifying this file.
#
# See the man page for details on how to write a sudoers file.
#
Defaults env_reset
Defaults mail_badpass
Defaults secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root ALL=(ALL:ALL) ALL
fhem ALL=(ALL) NOPASSWD:/opt/fhem/FHEM/backup.sh, /etc/init.d/homebridge

# Members of the admin group may gain root privileges
%admin ALL = (ALL) NOPASSWD: ALL

# Allow members of group sudo to execute any command
%sudo ALL=(ALL:ALL) ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d
</source>

[[Kategorie:HOWTOS]]

=== Anpassung wenn FHEM und Homebridge auf getrennten Systemen laufen ===
Unter dem Kapitel [[Umsetzung]] wurde bereits alle vorbereitet um mit wenigen Änderungen eine Homebridge zu starten die nicht auf dem selben System läuft wie FHEM. Es nur 2 Änderungen notwendig.
Die erste Änderung betrifft den eingerichteten Dummy. Hier ist das vorhandenen ''userReadings'' wie folgt abzuändern

<source lang="bash" style="width:100%;">
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo /opt/fhem/FHEM/homebridgeserviceremote.sh ".ReadingsVal($NAME,"state","restart")." &" );; }
</source>

Dadurch wird, durch die Aktionen des Dummys, ein weiteres Script angesprochen.

Nun wird dieses Script mit hilfe des Nano Editor angelegt

<source lang="bash" style="width:100%;">
sudo nano /opt/fhem/FHEM/homebridgeserviceremote.sh
</source>

und mit dem folgenden Inhalt befüllt.

'''Achtung''': die Variabeln ''remoteUser'', ''remotePasswort'' und ''remoteHost'' sind ggf. auf die eigenen Gegebenheiten der entfernt laufenden Homebridge anzupassen. Der hier genannte Benutzer muss natürlich berechtigt sein die Homebridge starten zu können. Es sollte auch nicht der root User verwendet werden, sondern ein eigens dafür angelegter und in den Berechtigungen eingeschränkter Benutzer verwendet werden.
Wer zur Fehleranalyse etwas mehr sehen möchte ändert den Wert von ''debug'' auf 1.

<source lang="bash" style="width:100%;">
#!/bin/bash
debug=0
remoteUser="root"
remotePasswort="root"
remoteHost="192.168.1.111"
remoteService="homebridge"
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz

# Vorraussetzungen prüfen
if [ $(dpkg-query -W -f='${Status}' sshpass 2>/dev/null | grep -c "ok installed") -eq 0 ];
then
if [ "$debug" = "1" ]; then
echo "sshpass wird benötigt. Installation beginnt";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wird benötigt. Installation beginnt\"}";
fi
apt-get install sshpass
if [ "$debug" = "1" ]; then
echo "sshpass wurde installiert";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wurde installiert\"}";
fi
fi
###################################

# Befehl ausführen
case "$1" in
start)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService start"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
stop)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService stop"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
restart)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService restart"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi

;;
status)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService status"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0
###################################
</source>

Das Script macht nicht sehr viel. Es verbindet sich über ssh mit dem entfernten System und startet (stopt, etc.) den Homebridge Dienst. Hinweis: es wird sshpass benötigt, welches das Script bei bedarf versucht zu installieren.

== Dankeschön ==
Ein Dankeschön geht an die Entwicklergemeinde rund um Homebridge und dem FHEM Plugin für die Homebridge.

Ein besonderes Dankeschön an ''No Legend'' der die zugrunde liegende Idee und Lösung in diesem Artikel beschrieben hat.

Homebridge Start und Status in FHEM

2017-02-09T05:21:35Z

Svenson08: /* Start Script anlegen */

Um nicht bei jeder Änderung, welche die Homebridge betrifft, diese über die Console manuell neustarten zu müssen zeigt diese Lösung wie dies bequem aus FHEMWEB erfolgen kann. In den nachfolgenden Abschnitten sind die einzelnen Schritte dazu erläutert.

== Vorwort ==
Die im weitern genutzten Bezeichnungen von Dummys, Scriptdateinamen o.ä. können geändert werden. Die Änderungen müssen jedoch auch an allen entsprechenden Stellen vorgenommen werden.
Genannte IP Adressen, Benutzernamen und Passwörter sind auf die eigenen Gegebenheiten anzupassen. Die Berechtigungen des Benutzers müssen zur Ausführung der Scripte geprüft und ggf. angepasst werden. Entprechende Linux Kentnisse sollten vorhanden sein. In Teilen berücksichtigt dieser Artikel das FHEM und Homebridge nicht zwingend auf dem selben System laufen. Die hier gezeigte Lösung kann für beide Varianten genutzt werden, FHEM und Homebridge auf dem gleichen System oder auf getrennten Systemen.

== Umsetzung ==

=== Status- und Kontroll-Dummy ===
[[Datei:HomebridgeDummy.PNG|mini|550px|Status- bzw. Kontroll-Dummy]]

Es wird ein Dummy benötigt, welcher den Status des Homebridge-Dienstes anzeigt und über den dieser Dienst gesteuert werden kann. Das nötige Script um die Homebridge als Dienst zu starten wird weiter unten in diesem Artikel erstellt.

<source lang="bash" style="width:100%;">
define SYS_Homebridge dummy
attr SYS_Homebridge devStateIcon .*on:general_an .*off:general_aus .*:audio_rec
attr SYS_Homebridge eventMap status:status start:start stop:stop restart:restart
attr SYS_Homebridge icon it_router
attr SYS_Homebridge room System
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo service homebridge ".ReadingsVal($NAME,"state","restart")." &" );; }
attr SYS_Homebridge webCmd status:start:stop:restart
</source>

Der Dummy wird durch setzen von "start", "stop", "restart" oder "status" jeweils das userReading ausführen und somit letztendlich den homebridge Dienst steuert.

=== Start Script anlegen ===
Nun ist das Startscript für die Homebridge anzulegen. Mittels dem folgenden Befehl wird (wenn noch nicht vorhanden) das homebridge Script angelegt und im Editor geöffnet.

<source lang="bash" style="width:100%;">
sudo nano /etc/init.d/homebridge
</source>
Wenn die Homebridge nicht auf dem selben System läuft wie FHEM muss dieser Schritt auf dem Homebridge System ausgeführt werden.

Das nun folgende Script kann in die homebridge Datei, die im Nano Editor geöffnet, ist rein kopiert werden.

'''Achtung''': die Variabeln ''homeBridgeUser'', ''fhemHost'' und ''fhemHostTelnetPort'' sind ggf. auf die eigenen Gegebenheiten anzupassen.

<source lang="bash" style="width:100%;">
#!/bin/sh
### BEGIN INIT INFO
# Provides: homebridge
# Required-Start: $network $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start daemon at boot time for homebridge
# Description: Enable service provided by daemon.
### END INIT INFO
export PATH=$PATH:/usr/local/bin
export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules

PID=`pidof homebridge`
homeBridgeUser="fhem"
fhemHost=127.0.0.1 #FHEM Server (Masterinstanz)
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz
fhemDefine="SYS_Homebridge"

case "$1" in
start)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is already running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is already running"
else
su - $homeBridgeUser -c "homebridge > /dev/null 2>&1 &"
echo "Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine on"
sleep 2
$0 status
fi
;;
stop)
if ! ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
else
kill $PID
echo "Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine off"
sleep 2
$0 status
fi
;;
restart)
if ! ps -p $PID > /dev/null 2>&1; then
$0 start
else
$0 stop
$0 start
fi
;;
status)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is running PID $PID"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge running as PID $PID"
else
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0

</source>

Das Script setzt in dem bereits angelegten Dummy ein Reading ''info'' in dem der Ausführungsstatus des Scripts wieder gegeben wird. Das Reading ''state'' wir auf on oder off gesetzt. ''On'' bedeutet das Homebridge gestartet ist, ''off'' das die Homebridge nicht ausgeführt wird.

Damit die Homebridge auch mit Start des Systems gestartet wird sind die folgenden zwei Schritte notwendig

<source lang="bash" style="width:100%;">
sudo chmod 755 /etc/init.d/homebridge
sudo update-rc.d homebridge defaults
</source>

Zum testen kann der Dienst nun mit dem Befehl

<source lang="bash" style="width:100%;">
sudo service homebridge start
</source>
bzw.
<source lang="bash" style="width:100%;">
sudo /etc/init.d/homebridge start
</source>

gestartet werden. In dem angelegten Dummy werden zwei Readings erzeugt mit den entsprechenden Rückmeldungen aus dem Script. Die Readings werden erst angezeigt wenn die bereits geöffnete Detailseite des Dummys neu geladen wird.

=== Testlauf / Fertig ===
Nun können die einzelnen Aktionen über den Dummy ausführt werden. Dabei wird jeweils der eingerichtete Dienst angesteuert und eine (mit kurzer Verzögerung) Rückmeldung gegeben.

== Sonstiges ==

=== FHEM Benutzer Zugriff auf Script gewähren ===

Damit aus FHEM das Script ausgeführt werden kann benötigt dieser Benutzer entsprechende Berechtigungen. Dazu ist in der sudoers ein Eintrag zu ergänzen.
Dazu wird die sudoers Datei im Nano Editor geöffnet

<source lang="bash" style="width:100%;">
sudo nano /etc/sudoers
</source>

Dort sollte im Abschnitt ''# User privilege specification'' die folgende Zeile ergänzt werden

<source lang="bash" style="width:100%;">
fhem ALL=(ALL) NOPASSWD:/etc/init.d/homebridge
</source>

'''Achtung!''' Sollte FHEM nicht unter dem Benuter ''fhem'' laufen ist die an den entsprechenden Stellen anzupassen.

Beispielinhalt der sudoers:
<source lang="bash" style="width:100%;">
#
# This file MUST be edited with the 'visudo' command as root.
#
# Please consider adding local content in /etc/sudoers.d/ instead of
# directly modifying this file.
#
# See the man page for details on how to write a sudoers file.
#
Defaults env_reset
Defaults mail_badpass
Defaults secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root ALL=(ALL:ALL) ALL
fhem ALL=(ALL) NOPASSWD:/opt/fhem/FHEM/backup.sh, /etc/init.d/homebridge

# Members of the admin group may gain root privileges
%admin ALL = (ALL) NOPASSWD: ALL

# Allow members of group sudo to execute any command
%sudo ALL=(ALL:ALL) ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d
</source>

[[Kategorie:HOWTOS]]

=== Anpassung wenn FHEM und Homebridge auf getrennten Systemen laufen ===
Unter dem Kapitel [[Umsetzung]] wurde bereits alle vorbereitet um mit wenigen Änderungen eine Homebridge zu starten die nicht auf dem selben System läuft wie FHEM. Es nur 2 Änderungen notwendig.
Die erste Änderung betrifft den eingerichteten Dummy. Hier ist das vorhandenen ''userReadings'' wie folgt abzuändern

<source lang="bash" style="width:100%;">
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo /opt/fhem/FHEM/homebridgeserviceremote.sh ".ReadingsVal($NAME,"state","restart")." &" );; }
</source>

Dadurch wird, durch die Aktionen des Dummys, ein weiteres Script angesprochen.

Nun wird dieses Script mit hilfe des Nano Editor angelegt

<source lang="bash" style="width:100%;">
sudo nano /opt/fhem/FHEM/homebridgeserviceremote.sh
</source>

und mit dem folgenden Inhalt befüllt.

'''Achtung''': die Variabeln ''remoteUser'', ''remotePasswort'' und ''remoteHost'' sind ggf. auf die eigenen Gegebenheiten der entfernt laufenden Homebridge anzupassen. Der hier genannte Benutzer muss natürlich berechtigt sein die Homebridge starten zu können. Es sollte auch nicht der root User verwendet werden, sondern ein eigens dafür angelegter und in den Berechtigungen eingeschränkter Benutzer verwendet werden.
Wer zur Fehleranalyse etwas mehr sehen möchte ändert den Wert von ''debug'' auf 1.

<source lang="bash" style="width:100%;">
#!/bin/bash
debug=0
remoteUser="root"
remotePasswort="root"
remoteHost="192.168.1.111"
remoteService="homebridge"
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz

# Vorraussetzungen prüfen
if [ $(dpkg-query -W -f='${Status}' sshpass 2>/dev/null | grep -c "ok installed") -eq 0 ];
then
if [ "$debug" = "1" ]; then
echo "sshpass wird benötigt. Installation beginnt";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wird benötigt. Installation beginnt\"}";
fi
apt-get install sshpass
if [ "$debug" = "1" ]; then
echo "sshpass wurde installiert";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wurde installiert\"}";
fi
fi
###################################

# Befehl ausführen
case "$1" in
start)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService start"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
stop)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService stop"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
restart)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService restart"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi

;;
status)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService status"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0
###################################
</source>

Das Script macht nicht sehr viel. Es verbindet sich über ssh mit dem entfernten System und startet (stopt, etc.) den Homebridge Dienst. Hinweis: es wird sshpass benötigt, welches das Script bei bedarf versucht zu installieren.

== Dankeschön ==
Ein Dankeschön geht an die Entwicklergemeinde rund um Homebridge und dem FHEM Plugin für die Homebridge.

Ein besonderes Dankeschön an ''No Legend'' der die zugrunde liegende Idee und Lösung in diesem Artikel beschrieben hat.

Diskussion:Homebridge Start und Status in FHEM

2017-02-09T05:20:38Z

Svenson08:

09.02.2017

Artikel Überarbeitet, im Rahmen meiner Umsetzung die ich mit dem Artikel vorgenommen hatte.

Inhaltlich habe ich den Artikel textuell hoffentlich lesbarer und verständlicher gestaltet.

Alle Schritte sind getestet und funktionieren (hoffentlich) bei Nachahmern genauso.

Erweitert wurde der Artikel um die Betrachtung das FHEM und Homebridge nicht auf dem selben Server laufen muss.

Homebridge Start und Status in FHEM

2017-02-09T05:16:57Z

Svenson08: /* Dankeschön */

Um nicht bei jeder Änderung, welche die Homebridge betrifft, diese über die Console manuell neustarten zu müssen zeigt diese Lösung wie dies bequem aus FHEMWEB erfolgen kann. In den nachfolgenden Abschnitten sind die einzelnen Schritte dazu erläutert.

== Vorwort ==
Die im weitern genutzten Bezeichnungen von Dummys, Scriptdateinamen o.ä. können geändert werden. Die Änderungen müssen jedoch auch an allen entsprechenden Stellen vorgenommen werden.
Genannte IP Adressen, Benutzernamen und Passwörter sind auf die eigenen Gegebenheiten anzupassen. Die Berechtigungen des Benutzers müssen zur Ausführung der Scripte geprüft und ggf. angepasst werden. Entprechende Linux Kentnisse sollten vorhanden sein. In Teilen berücksichtigt dieser Artikel das FHEM und Homebridge nicht zwingend auf dem selben System laufen. Die hier gezeigte Lösung kann für beide Varianten genutzt werden, FHEM und Homebridge auf dem gleichen System oder auf getrennten Systemen.

== Umsetzung ==

=== Status- und Kontroll-Dummy ===
[[Datei:HomebridgeDummy.PNG|mini|550px|Status- bzw. Kontroll-Dummy]]

Es wird ein Dummy benötigt, welcher den Status des Homebridge-Dienstes anzeigt und über den dieser Dienst gesteuert werden kann. Das nötige Script um die Homebridge als Dienst zu starten wird weiter unten in diesem Artikel erstellt.

<source lang="bash" style="width:100%;">
define SYS_Homebridge dummy
attr SYS_Homebridge devStateIcon .*on:general_an .*off:general_aus .*:audio_rec
attr SYS_Homebridge eventMap status:status start:start stop:stop restart:restart
attr SYS_Homebridge icon it_router
attr SYS_Homebridge room System
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo service homebridge ".ReadingsVal($NAME,"state","restart")." &" );; }
attr SYS_Homebridge webCmd status:start:stop:restart
</source>

Der Dummy wird durch setzen von "start", "stop", "restart" oder "status" jeweils das userReading ausführen und somit letztendlich den homebridge Dienst steuert.

=== Start Script anlegen ===
Nun ist das Startscript für die Homebridge anzulegen. Mittels dem folgenden Befehl wird (wenn noch nicht vorhanden) das homebridge Script angelegt und im Editor geöffnet.

<source lang="bash" style="width:100%;">
sudo nano /etc/init.d/homebridge
</source>
Wenn die Homebridge nicht auf dem selben System läuft wie FHEM muss dieser Schritt auf dem Homebridge System ausgeführt werden.

Das nun folgende Script kann in die homebridge Datei die im Nano Editor geöffnet ist rein kopiert werden.

'''Achtung''': die Variabeln ''homeBridgeUser'', ''fhemHost'' und ''fhemHostTelnetPort'' sind ggf. auf die eigenen Gegebenheiten anzupassen.

<source lang="bash" style="width:100%;">
#!/bin/sh
### BEGIN INIT INFO
# Provides: homebridge
# Required-Start: $network $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start daemon at boot time for homebridge
# Description: Enable service provided by daemon.
### END INIT INFO
export PATH=$PATH:/usr/local/bin
export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules

PID=`pidof homebridge`
homeBridgeUser="fhem"
fhemHost=127.0.0.1 #FHEM Server (Masterinstanz)
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz
fhemDefine="SYS_Homebridge"

case "$1" in
start)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is already running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is already running"
else
su - $homeBridgeUser -c "homebridge > /dev/null 2>&1 &"
echo "Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine on"
sleep 2
$0 status
fi
;;
stop)
if ! ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
else
kill $PID
echo "Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine off"
sleep 2
$0 status
fi
;;
restart)
if ! ps -p $PID > /dev/null 2>&1; then
$0 start
else
$0 stop
$0 start
fi
;;
status)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is running PID $PID"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge running as PID $PID"
else
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0

</source>

Das Script setzt in dem bereits angelegten Dummy ein Reading ''info'' in dem der Ausführungsstatus des Scripts wieder gegeben wird. Das Reading ''state'' wir auf on oder off gesetzt. ''On'' bedeutet das Homebridge gestartet ist, ''off'' das die Homebridge nicht ausgeführt wird.

Damit die Homebridge auch mit Start des Systems gestartet wird sind die folgenden zwei Schritte notwendig

<source lang="bash" style="width:100%;">
sudo chmod 755 /etc/init.d/homebridge
sudo update-rc.d homebridge defaults
</source>

Zum testen kann der Dienst nun mit dem Befehl

<source lang="bash" style="width:100%;">
sudo service homebridge start
</source>
bzw.
<source lang="bash" style="width:100%;">
sudo /etc/init.d/homebridge start
</source>

gestartet werden. In dem angelegten Dummy werden zwei Readings erzeugt mit den entsprechenden Rückmeldungen aus dem Script. Die Readings werden erst angezeigt wenn die bereits geöffnete Detailseite des Dummys neu geladen wird.

=== Testlauf / Fertig ===
Nun können die einzelnen Aktionen über den Dummy ausführt werden. Dabei wird jeweils der eingerichtete Dienst angesteuert und eine (mit kurzer Verzögerung) Rückmeldung gegeben.

== Sonstiges ==

=== FHEM Benutzer Zugriff auf Script gewähren ===

Damit aus FHEM das Script ausgeführt werden kann benötigt dieser Benutzer entsprechende Berechtigungen. Dazu ist in der sudoers ein Eintrag zu ergänzen.
Dazu wird die sudoers Datei im Nano Editor geöffnet

<source lang="bash" style="width:100%;">
sudo nano /etc/sudoers
</source>

Dort sollte im Abschnitt ''# User privilege specification'' die folgende Zeile ergänzt werden

<source lang="bash" style="width:100%;">
fhem ALL=(ALL) NOPASSWD:/etc/init.d/homebridge
</source>

'''Achtung!''' Sollte FHEM nicht unter dem Benuter ''fhem'' laufen ist die an den entsprechenden Stellen anzupassen.

Beispielinhalt der sudoers:
<source lang="bash" style="width:100%;">
#
# This file MUST be edited with the 'visudo' command as root.
#
# Please consider adding local content in /etc/sudoers.d/ instead of
# directly modifying this file.
#
# See the man page for details on how to write a sudoers file.
#
Defaults env_reset
Defaults mail_badpass
Defaults secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root ALL=(ALL:ALL) ALL
fhem ALL=(ALL) NOPASSWD:/opt/fhem/FHEM/backup.sh, /etc/init.d/homebridge

# Members of the admin group may gain root privileges
%admin ALL = (ALL) NOPASSWD: ALL

# Allow members of group sudo to execute any command
%sudo ALL=(ALL:ALL) ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d
</source>

[[Kategorie:HOWTOS]]

=== Anpassung wenn FHEM und Homebridge auf getrennten Systemen laufen ===
Unter dem Kapitel [[Umsetzung]] wurde bereits alle vorbereitet um mit wenigen Änderungen eine Homebridge zu starten die nicht auf dem selben System läuft wie FHEM. Es nur 2 Änderungen notwendig.
Die erste Änderung betrifft den eingerichteten Dummy. Hier ist das vorhandenen ''userReadings'' wie folgt abzuändern

<source lang="bash" style="width:100%;">
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo /opt/fhem/FHEM/homebridgeserviceremote.sh ".ReadingsVal($NAME,"state","restart")." &" );; }
</source>

Dadurch wird, durch die Aktionen des Dummys, ein weiteres Script angesprochen.

Nun wird dieses Script mit hilfe des Nano Editor angelegt

<source lang="bash" style="width:100%;">
sudo nano /opt/fhem/FHEM/homebridgeserviceremote.sh
</source>

und mit dem folgenden Inhalt befüllt.

'''Achtung''': die Variabeln ''remoteUser'', ''remotePasswort'' und ''remoteHost'' sind ggf. auf die eigenen Gegebenheiten der entfernt laufenden Homebridge anzupassen. Der hier genannte Benutzer muss natürlich berechtigt sein die Homebridge starten zu können. Es sollte auch nicht der root User verwendet werden, sondern ein eigens dafür angelegter und in den Berechtigungen eingeschränkter Benutzer verwendet werden.
Wer zur Fehleranalyse etwas mehr sehen möchte ändert den Wert von ''debug'' auf 1.

<source lang="bash" style="width:100%;">
#!/bin/bash
debug=0
remoteUser="root"
remotePasswort="root"
remoteHost="192.168.1.111"
remoteService="homebridge"
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz

# Vorraussetzungen prüfen
if [ $(dpkg-query -W -f='${Status}' sshpass 2>/dev/null | grep -c "ok installed") -eq 0 ];
then
if [ "$debug" = "1" ]; then
echo "sshpass wird benötigt. Installation beginnt";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wird benötigt. Installation beginnt\"}";
fi
apt-get install sshpass
if [ "$debug" = "1" ]; then
echo "sshpass wurde installiert";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wurde installiert\"}";
fi
fi
###################################

# Befehl ausführen
case "$1" in
start)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService start"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
stop)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService stop"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
restart)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService restart"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi

;;
status)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService status"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0
###################################
</source>

Das Script macht nicht sehr viel. Es verbindet sich über ssh mit dem entfernten System und startet (stopt, etc.) den Homebridge Dienst. Hinweis: es wird sshpass benötigt, welches das Script bei bedarf versucht zu installieren.

== Dankeschön ==
Ein Dankeschön geht an die Entwicklergemeinde rund um Homebridge und dem FHEM Plugin für die Homebridge.

Ein besonderes Dankeschön an ''No Legend'' der die zugrunde liegende Idee und Lösung in diesem Artikel beschrieben hat.

Homebridge Start und Status in FHEM

2017-02-09T05:13:22Z

Svenson08:

Um nicht bei jeder Änderung, welche die Homebridge betrifft, diese über die Console manuell neustarten zu müssen zeigt diese Lösung wie dies bequem aus FHEMWEB erfolgen kann. In den nachfolgenden Abschnitten sind die einzelnen Schritte dazu erläutert.

== Vorwort ==
Die im weitern genutzten Bezeichnungen von Dummys, Scriptdateinamen o.ä. können geändert werden. Die Änderungen müssen jedoch auch an allen entsprechenden Stellen vorgenommen werden.
Genannte IP Adressen, Benutzernamen und Passwörter sind auf die eigenen Gegebenheiten anzupassen. Die Berechtigungen des Benutzers müssen zur Ausführung der Scripte geprüft und ggf. angepasst werden. Entprechende Linux Kentnisse sollten vorhanden sein. In Teilen berücksichtigt dieser Artikel das FHEM und Homebridge nicht zwingend auf dem selben System laufen. Die hier gezeigte Lösung kann für beide Varianten genutzt werden, FHEM und Homebridge auf dem gleichen System oder auf getrennten Systemen.

== Umsetzung ==

=== Status- und Kontroll-Dummy ===
[[Datei:HomebridgeDummy.PNG|mini|550px|Status- bzw. Kontroll-Dummy]]

Es wird ein Dummy benötigt, welcher den Status des Homebridge-Dienstes anzeigt und über den dieser Dienst gesteuert werden kann. Das nötige Script um die Homebridge als Dienst zu starten wird weiter unten in diesem Artikel erstellt.

<source lang="bash" style="width:100%;">
define SYS_Homebridge dummy
attr SYS_Homebridge devStateIcon .*on:general_an .*off:general_aus .*:audio_rec
attr SYS_Homebridge eventMap status:status start:start stop:stop restart:restart
attr SYS_Homebridge icon it_router
attr SYS_Homebridge room System
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo service homebridge ".ReadingsVal($NAME,"state","restart")." &" );; }
attr SYS_Homebridge webCmd status:start:stop:restart
</source>

Der Dummy wird durch setzen von "start", "stop", "restart" oder "status" jeweils das userReading ausführen und somit letztendlich den homebridge Dienst steuert.

=== Start Script anlegen ===
Nun ist das Startscript für die Homebridge anzulegen. Mittels dem folgenden Befehl wird (wenn noch nicht vorhanden) das homebridge Script angelegt und im Editor geöffnet.

<source lang="bash" style="width:100%;">
sudo nano /etc/init.d/homebridge
</source>
Wenn die Homebridge nicht auf dem selben System läuft wie FHEM muss dieser Schritt auf dem Homebridge System ausgeführt werden.

Das nun folgende Script kann in die homebridge Datei die im Nano Editor geöffnet ist rein kopiert werden.

'''Achtung''': die Variabeln ''homeBridgeUser'', ''fhemHost'' und ''fhemHostTelnetPort'' sind ggf. auf die eigenen Gegebenheiten anzupassen.

<source lang="bash" style="width:100%;">
#!/bin/sh
### BEGIN INIT INFO
# Provides: homebridge
# Required-Start: $network $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start daemon at boot time for homebridge
# Description: Enable service provided by daemon.
### END INIT INFO
export PATH=$PATH:/usr/local/bin
export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules

PID=`pidof homebridge`
homeBridgeUser="fhem"
fhemHost=127.0.0.1 #FHEM Server (Masterinstanz)
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz
fhemDefine="SYS_Homebridge"

case "$1" in
start)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is already running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is already running"
else
su - $homeBridgeUser -c "homebridge > /dev/null 2>&1 &"
echo "Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine on"
sleep 2
$0 status
fi
;;
stop)
if ! ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
else
kill $PID
echo "Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine off"
sleep 2
$0 status
fi
;;
restart)
if ! ps -p $PID > /dev/null 2>&1; then
$0 start
else
$0 stop
$0 start
fi
;;
status)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is running PID $PID"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge running as PID $PID"
else
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0

</source>

Das Script setzt in dem bereits angelegten Dummy ein Reading ''info'' in dem der Ausführungsstatus des Scripts wieder gegeben wird. Das Reading ''state'' wir auf on oder off gesetzt. ''On'' bedeutet das Homebridge gestartet ist, ''off'' das die Homebridge nicht ausgeführt wird.

Damit die Homebridge auch mit Start des Systems gestartet wird sind die folgenden zwei Schritte notwendig

<source lang="bash" style="width:100%;">
sudo chmod 755 /etc/init.d/homebridge
sudo update-rc.d homebridge defaults
</source>

Zum testen kann der Dienst nun mit dem Befehl

<source lang="bash" style="width:100%;">
sudo service homebridge start
</source>
bzw.
<source lang="bash" style="width:100%;">
sudo /etc/init.d/homebridge start
</source>

gestartet werden. In dem angelegten Dummy werden zwei Readings erzeugt mit den entsprechenden Rückmeldungen aus dem Script. Die Readings werden erst angezeigt wenn die bereits geöffnete Detailseite des Dummys neu geladen wird.

=== Testlauf / Fertig ===
Nun können die einzelnen Aktionen über den Dummy ausführt werden. Dabei wird jeweils der eingerichtete Dienst angesteuert und eine (mit kurzer Verzögerung) Rückmeldung gegeben.

== Sonstiges ==

=== FHEM Benutzer Zugriff auf Script gewähren ===

Damit aus FHEM das Script ausgeführt werden kann benötigt dieser Benutzer entsprechende Berechtigungen. Dazu ist in der sudoers ein Eintrag zu ergänzen.
Dazu wird die sudoers Datei im Nano Editor geöffnet

<source lang="bash" style="width:100%;">
sudo nano /etc/sudoers
</source>

Dort sollte im Abschnitt ''# User privilege specification'' die folgende Zeile ergänzt werden

<source lang="bash" style="width:100%;">
fhem ALL=(ALL) NOPASSWD:/etc/init.d/homebridge
</source>

'''Achtung!''' Sollte FHEM nicht unter dem Benuter ''fhem'' laufen ist die an den entsprechenden Stellen anzupassen.

Beispielinhalt der sudoers:
<source lang="bash" style="width:100%;">
#
# This file MUST be edited with the 'visudo' command as root.
#
# Please consider adding local content in /etc/sudoers.d/ instead of
# directly modifying this file.
#
# See the man page for details on how to write a sudoers file.
#
Defaults env_reset
Defaults mail_badpass
Defaults secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root ALL=(ALL:ALL) ALL
fhem ALL=(ALL) NOPASSWD:/opt/fhem/FHEM/backup.sh, /etc/init.d/homebridge

# Members of the admin group may gain root privileges
%admin ALL = (ALL) NOPASSWD: ALL

# Allow members of group sudo to execute any command
%sudo ALL=(ALL:ALL) ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d
</source>

[[Kategorie:HOWTOS]]

=== Anpassung wenn FHEM und Homebridge auf getrennten Systemen laufen ===
Unter dem Kapitel [[Umsetzung]] wurde bereits alle vorbereitet um mit wenigen Änderungen eine Homebridge zu starten die nicht auf dem selben System läuft wie FHEM. Es nur 2 Änderungen notwendig.
Die erste Änderung betrifft den eingerichteten Dummy. Hier ist das vorhandenen ''userReadings'' wie folgt abzuändern

<source lang="bash" style="width:100%;">
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo /opt/fhem/FHEM/homebridgeserviceremote.sh ".ReadingsVal($NAME,"state","restart")." &" );; }
</source>

Dadurch wird, durch die Aktionen des Dummys, ein weiteres Script angesprochen.

Nun wird dieses Script mit hilfe des Nano Editor angelegt

<source lang="bash" style="width:100%;">
sudo nano /opt/fhem/FHEM/homebridgeserviceremote.sh
</source>

und mit dem folgenden Inhalt befüllt.

'''Achtung''': die Variabeln ''remoteUser'', ''remotePasswort'' und ''remoteHost'' sind ggf. auf die eigenen Gegebenheiten der entfernt laufenden Homebridge anzupassen. Der hier genannte Benutzer muss natürlich berechtigt sein die Homebridge starten zu können. Es sollte auch nicht der root User verwendet werden, sondern ein eigens dafür angelegter und in den Berechtigungen eingeschränkter Benutzer verwendet werden.
Wer zur Fehleranalyse etwas mehr sehen möchte ändert den Wert von ''debug'' auf 1.

<source lang="bash" style="width:100%;">
#!/bin/bash
debug=0
remoteUser="root"
remotePasswort="root"
remoteHost="192.168.1.111"
remoteService="homebridge"
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz

# Vorraussetzungen prüfen
if [ $(dpkg-query -W -f='${Status}' sshpass 2>/dev/null | grep -c "ok installed") -eq 0 ];
then
if [ "$debug" = "1" ]; then
echo "sshpass wird benötigt. Installation beginnt";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wird benötigt. Installation beginnt\"}";
fi
apt-get install sshpass
if [ "$debug" = "1" ]; then
echo "sshpass wurde installiert";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wurde installiert\"}";
fi
fi
###################################

# Befehl ausführen
case "$1" in
start)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService start"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
stop)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService stop"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
restart)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService restart"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi

;;
status)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService status"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0
###################################
</source>

Das Script macht nicht sehr viel. Es verbindet sich über ssh mit dem entfernten System und startet (stopt, etc.) den Homebridge Dienst. Hinweis: es wird sshpass benötigt, welches das Script bei bedarf versucht zu installieren.

== Dankeschön ==

Homebridge Start und Status in FHEM

2017-02-09T05:13:11Z

Svenson08: /* Start Script anlegen */

Der Artikel befindet sich noch im Aufbau.
Der Code ist noch nicht 100% getestet, es muss also noch mit Fehler gerechnet werden.

Um nicht bei jeder Änderung, welche die Homebridge betrifft, diese über die Console manuell neustarten zu müssen zeigt diese Lösung wie dies bequem aus FHEMWEB erfolgen kann. In den nachfolgenden Abschnitten sind die einzelnen Schritte dazu erläutert.

== Vorwort ==
Die im weitern genutzten Bezeichnungen von Dummys, Scriptdateinamen o.ä. können geändert werden. Die Änderungen müssen jedoch auch an allen entsprechenden Stellen vorgenommen werden.
Genannte IP Adressen, Benutzernamen und Passwörter sind auf die eigenen Gegebenheiten anzupassen. Die Berechtigungen des Benutzers müssen zur Ausführung der Scripte geprüft und ggf. angepasst werden. Entprechende Linux Kentnisse sollten vorhanden sein. In Teilen berücksichtigt dieser Artikel das FHEM und Homebridge nicht zwingend auf dem selben System laufen. Die hier gezeigte Lösung kann für beide Varianten genutzt werden, FHEM und Homebridge auf dem gleichen System oder auf getrennten Systemen.

== Umsetzung ==

=== Status- und Kontroll-Dummy ===
[[Datei:HomebridgeDummy.PNG|mini|550px|Status- bzw. Kontroll-Dummy]]

Es wird ein Dummy benötigt, welcher den Status des Homebridge-Dienstes anzeigt und über den dieser Dienst gesteuert werden kann. Das nötige Script um die Homebridge als Dienst zu starten wird weiter unten in diesem Artikel erstellt.

<source lang="bash" style="width:100%;">
define SYS_Homebridge dummy
attr SYS_Homebridge devStateIcon .*on:general_an .*off:general_aus .*:audio_rec
attr SYS_Homebridge eventMap status:status start:start stop:stop restart:restart
attr SYS_Homebridge icon it_router
attr SYS_Homebridge room System
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo service homebridge ".ReadingsVal($NAME,"state","restart")." &" );; }
attr SYS_Homebridge webCmd status:start:stop:restart
</source>

Der Dummy wird durch setzen von "start", "stop", "restart" oder "status" jeweils das userReading ausführen und somit letztendlich den homebridge Dienst steuert.

=== Start Script anlegen ===
Nun ist das Startscript für die Homebridge anzulegen. Mittels dem folgenden Befehl wird (wenn noch nicht vorhanden) das homebridge Script angelegt und im Editor geöffnet.

<source lang="bash" style="width:100%;">
sudo nano /etc/init.d/homebridge
</source>
Wenn die Homebridge nicht auf dem selben System läuft wie FHEM muss dieser Schritt auf dem Homebridge System ausgeführt werden.

Das nun folgende Script kann in die homebridge Datei die im Nano Editor geöffnet ist rein kopiert werden.

'''Achtung''': die Variabeln ''homeBridgeUser'', ''fhemHost'' und ''fhemHostTelnetPort'' sind ggf. auf die eigenen Gegebenheiten anzupassen.

<source lang="bash" style="width:100%;">
#!/bin/sh
### BEGIN INIT INFO
# Provides: homebridge
# Required-Start: $network $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start daemon at boot time for homebridge
# Description: Enable service provided by daemon.
### END INIT INFO
export PATH=$PATH:/usr/local/bin
export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules

PID=`pidof homebridge`
homeBridgeUser="fhem"
fhemHost=127.0.0.1 #FHEM Server (Masterinstanz)
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz
fhemDefine="SYS_Homebridge"

case "$1" in
start)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is already running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is already running"
else
su - $homeBridgeUser -c "homebridge > /dev/null 2>&1 &"
echo "Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine on"
sleep 2
$0 status
fi
;;
stop)
if ! ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
else
kill $PID
echo "Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine off"
sleep 2
$0 status
fi
;;
restart)
if ! ps -p $PID > /dev/null 2>&1; then
$0 start
else
$0 stop
$0 start
fi
;;
status)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is running PID $PID"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge running as PID $PID"
else
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0

</source>

Das Script setzt in dem bereits angelegten Dummy ein Reading ''info'' in dem der Ausführungsstatus des Scripts wieder gegeben wird. Das Reading ''state'' wir auf on oder off gesetzt. ''On'' bedeutet das Homebridge gestartet ist, ''off'' das die Homebridge nicht ausgeführt wird.

Damit die Homebridge auch mit Start des Systems gestartet wird sind die folgenden zwei Schritte notwendig

<source lang="bash" style="width:100%;">
sudo chmod 755 /etc/init.d/homebridge
sudo update-rc.d homebridge defaults
</source>

Zum testen kann der Dienst nun mit dem Befehl

<source lang="bash" style="width:100%;">
sudo service homebridge start
</source>
bzw.
<source lang="bash" style="width:100%;">
sudo /etc/init.d/homebridge start
</source>

gestartet werden. In dem angelegten Dummy werden zwei Readings erzeugt mit den entsprechenden Rückmeldungen aus dem Script. Die Readings werden erst angezeigt wenn die bereits geöffnete Detailseite des Dummys neu geladen wird.

=== Testlauf / Fertig ===
Nun können die einzelnen Aktionen über den Dummy ausführt werden. Dabei wird jeweils der eingerichtete Dienst angesteuert und eine (mit kurzer Verzögerung) Rückmeldung gegeben.

== Sonstiges ==

=== FHEM Benutzer Zugriff auf Script gewähren ===

Damit aus FHEM das Script ausgeführt werden kann benötigt dieser Benutzer entsprechende Berechtigungen. Dazu ist in der sudoers ein Eintrag zu ergänzen.
Dazu wird die sudoers Datei im Nano Editor geöffnet

<source lang="bash" style="width:100%;">
sudo nano /etc/sudoers
</source>

Dort sollte im Abschnitt ''# User privilege specification'' die folgende Zeile ergänzt werden

<source lang="bash" style="width:100%;">
fhem ALL=(ALL) NOPASSWD:/etc/init.d/homebridge
</source>

'''Achtung!''' Sollte FHEM nicht unter dem Benuter ''fhem'' laufen ist die an den entsprechenden Stellen anzupassen.

Beispielinhalt der sudoers:
<source lang="bash" style="width:100%;">
#
# This file MUST be edited with the 'visudo' command as root.
#
# Please consider adding local content in /etc/sudoers.d/ instead of
# directly modifying this file.
#
# See the man page for details on how to write a sudoers file.
#
Defaults env_reset
Defaults mail_badpass
Defaults secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root ALL=(ALL:ALL) ALL
fhem ALL=(ALL) NOPASSWD:/opt/fhem/FHEM/backup.sh, /etc/init.d/homebridge

# Members of the admin group may gain root privileges
%admin ALL = (ALL) NOPASSWD: ALL

# Allow members of group sudo to execute any command
%sudo ALL=(ALL:ALL) ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d
</source>

[[Kategorie:HOWTOS]]

=== Anpassung wenn FHEM und Homebridge auf getrennten Systemen laufen ===
Unter dem Kapitel [[Umsetzung]] wurde bereits alle vorbereitet um mit wenigen Änderungen eine Homebridge zu starten die nicht auf dem selben System läuft wie FHEM. Es nur 2 Änderungen notwendig.
Die erste Änderung betrifft den eingerichteten Dummy. Hier ist das vorhandenen ''userReadings'' wie folgt abzuändern

<source lang="bash" style="width:100%;">
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo /opt/fhem/FHEM/homebridgeserviceremote.sh ".ReadingsVal($NAME,"state","restart")." &" );; }
</source>

Dadurch wird, durch die Aktionen des Dummys, ein weiteres Script angesprochen.

Nun wird dieses Script mit hilfe des Nano Editor angelegt

<source lang="bash" style="width:100%;">
sudo nano /opt/fhem/FHEM/homebridgeserviceremote.sh
</source>

und mit dem folgenden Inhalt befüllt.

'''Achtung''': die Variabeln ''remoteUser'', ''remotePasswort'' und ''remoteHost'' sind ggf. auf die eigenen Gegebenheiten der entfernt laufenden Homebridge anzupassen. Der hier genannte Benutzer muss natürlich berechtigt sein die Homebridge starten zu können. Es sollte auch nicht der root User verwendet werden, sondern ein eigens dafür angelegter und in den Berechtigungen eingeschränkter Benutzer verwendet werden.
Wer zur Fehleranalyse etwas mehr sehen möchte ändert den Wert von ''debug'' auf 1.

<source lang="bash" style="width:100%;">
#!/bin/bash
debug=0
remoteUser="root"
remotePasswort="root"
remoteHost="192.168.1.111"
remoteService="homebridge"
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz

# Vorraussetzungen prüfen
if [ $(dpkg-query -W -f='${Status}' sshpass 2>/dev/null | grep -c "ok installed") -eq 0 ];
then
if [ "$debug" = "1" ]; then
echo "sshpass wird benötigt. Installation beginnt";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wird benötigt. Installation beginnt\"}";
fi
apt-get install sshpass
if [ "$debug" = "1" ]; then
echo "sshpass wurde installiert";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wurde installiert\"}";
fi
fi
###################################

# Befehl ausführen
case "$1" in
start)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService start"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
stop)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService stop"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
restart)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService restart"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi

;;
status)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService status"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0
###################################
</source>

Das Script macht nicht sehr viel. Es verbindet sich über ssh mit dem entfernten System und startet (stopt, etc.) den Homebridge Dienst. Hinweis: es wird sshpass benötigt, welches das Script bei bedarf versucht zu installieren.

== Dankeschön ==

Homebridge Start und Status in FHEM

2017-02-09T05:12:51Z

Svenson08: /* Anpassung wenn FHEM und Homebridge auf getrennten Systemen laufen */

Der Artikel befindet sich noch im Aufbau.
Der Code ist noch nicht 100% getestet, es muss also noch mit Fehler gerechnet werden.

Um nicht bei jeder Änderung, welche die Homebridge betrifft, diese über die Console manuell neustarten zu müssen zeigt diese Lösung wie dies bequem aus FHEMWEB erfolgen kann. In den nachfolgenden Abschnitten sind die einzelnen Schritte dazu erläutert.

== Vorwort ==
Die im weitern genutzten Bezeichnungen von Dummys, Scriptdateinamen o.ä. können geändert werden. Die Änderungen müssen jedoch auch an allen entsprechenden Stellen vorgenommen werden.
Genannte IP Adressen, Benutzernamen und Passwörter sind auf die eigenen Gegebenheiten anzupassen. Die Berechtigungen des Benutzers müssen zur Ausführung der Scripte geprüft und ggf. angepasst werden. Entprechende Linux Kentnisse sollten vorhanden sein. In Teilen berücksichtigt dieser Artikel das FHEM und Homebridge nicht zwingend auf dem selben System laufen. Die hier gezeigte Lösung kann für beide Varianten genutzt werden, FHEM und Homebridge auf dem gleichen System oder auf getrennten Systemen.

== Umsetzung ==

=== Status- und Kontroll-Dummy ===
[[Datei:HomebridgeDummy.PNG|mini|550px|Status- bzw. Kontroll-Dummy]]

Es wird ein Dummy benötigt, welcher den Status des Homebridge-Dienstes anzeigt und über den dieser Dienst gesteuert werden kann. Das nötige Script um die Homebridge als Dienst zu starten wird weiter unten in diesem Artikel erstellt.

<source lang="bash" style="width:100%;">
define SYS_Homebridge dummy
attr SYS_Homebridge devStateIcon .*on:general_an .*off:general_aus .*:audio_rec
attr SYS_Homebridge eventMap status:status start:start stop:stop restart:restart
attr SYS_Homebridge icon it_router
attr SYS_Homebridge room System
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo service homebridge ".ReadingsVal($NAME,"state","restart")." &" );; }
attr SYS_Homebridge webCmd status:start:stop:restart
</source>

Der Dummy wird durch setzen von "start", "stop", "restart" oder "status" jeweils das userReading ausführen und somit letztendlich den homebridge Dienst steuert.

=== Start Script anlegen ===
Nun ist das Startscript für die Homebridge anzulegen. Mittels dem folgenden Befehl wird (wenn noch nicht vorhanden) das homebridge Script angelegt und im Editor geöffnet.

<source lang="bash" style="width:100%;">
sudo nano /etc/init.d/homebridge
</source>
Wenn die Homebridge nicht auf dem selben System läuft wie FHEM muss dieser Schritt auf dem Homebridge System ausgeführt werden.

Das nun folgende Script kann in die homebridge Datei die im Nano Editor geöffnet ist rein kopiert werden.

'''Achtung''': die Variabeln ''homeBridgeUser'', ''fhemHost'' und ''fhemHostTelnetPort'' sind ggf. auf die eigenen Gegebenheiten anzupassen.

<source lang="bash" style="width:100%;">
#!/bin/sh
### BEGIN INIT INFO
# Provides: homebridge
# Required-Start: $network $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start daemon at boot time for homebridge
# Description: Enable service provided by daemon.
### END INIT INFO
export PATH=$PATH:/usr/local/bin
export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules

PID=`pidof homebridge`
homeBridgeUser="fhem"
fhemHost=127.0.0.1 #FHEM Server (Masterinstanz)
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz
fhemDefine="SYS_Homebridge"

case "$1" in
start)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is already running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is already running"
else
su - $homeBridgeUser -c "homebridge > /dev/null 2>&1 &"
echo "Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine on"
sleep 2
$0 status
fi
;;
stop)
if ! ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
else
kill $PID
echo "Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine off"
sleep 2
$0 status
fi
;;
restart)
if ! ps -p $PID > /dev/null 2>&1; then
$0 start
else
$0 stop
$0 start
fi
;;
status)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is running PID $PID"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge running as PID $PID"
else
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0

</source>

Das Script setzt in dem bereits angelegten Dummy ein Reading ''info'' in dem der Ausführungsstatus des Scripts wieder gegeben wird. Das Reading ''state'' wir auf on oder off gesetzt. ''On'' bedeutet das Homebridge gestartet ist, ''off'' das die Homebridge nicht ausgeführt wird.

'''Das Tutorial wird aktuell angepasst (08.02.2017) - weiter geht es ab dieser Stelle in den nächsten Tagen....'''

Damit die Homebridge auch mit Start des Systems gestartet wird sind die folgenden zwei Schritte notwendig

<source lang="bash" style="width:100%;">
sudo chmod 755 /etc/init.d/homebridge
sudo update-rc.d homebridge defaults
</source>

Zum testen kann der Dienst nun mit dem Befehl

<source lang="bash" style="width:100%;">
sudo service homebridge start
</source>
bzw.
<source lang="bash" style="width:100%;">
sudo /etc/init.d/homebridge start
</source>

gestartet werden. In dem angelegten Dummy werden zwei Readings erzeugt mit den entsprechenden Rückmeldungen aus dem Script. Die Readings werden erst angezeigt wenn die bereits geöffnete Detailseite des Dummys neu geladen wird.

=== Testlauf / Fertig ===
Nun können die einzelnen Aktionen über den Dummy ausführt werden. Dabei wird jeweils der eingerichtete Dienst angesteuert und eine (mit kurzer Verzögerung) Rückmeldung gegeben.

== Sonstiges ==

=== FHEM Benutzer Zugriff auf Script gewähren ===

Damit aus FHEM das Script ausgeführt werden kann benötigt dieser Benutzer entsprechende Berechtigungen. Dazu ist in der sudoers ein Eintrag zu ergänzen.
Dazu wird die sudoers Datei im Nano Editor geöffnet

<source lang="bash" style="width:100%;">
sudo nano /etc/sudoers
</source>

Dort sollte im Abschnitt ''# User privilege specification'' die folgende Zeile ergänzt werden

<source lang="bash" style="width:100%;">
fhem ALL=(ALL) NOPASSWD:/etc/init.d/homebridge
</source>

'''Achtung!''' Sollte FHEM nicht unter dem Benuter ''fhem'' laufen ist die an den entsprechenden Stellen anzupassen.

Beispielinhalt der sudoers:
<source lang="bash" style="width:100%;">
#
# This file MUST be edited with the 'visudo' command as root.
#
# Please consider adding local content in /etc/sudoers.d/ instead of
# directly modifying this file.
#
# See the man page for details on how to write a sudoers file.
#
Defaults env_reset
Defaults mail_badpass
Defaults secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root ALL=(ALL:ALL) ALL
fhem ALL=(ALL) NOPASSWD:/opt/fhem/FHEM/backup.sh, /etc/init.d/homebridge

# Members of the admin group may gain root privileges
%admin ALL = (ALL) NOPASSWD: ALL

# Allow members of group sudo to execute any command
%sudo ALL=(ALL:ALL) ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d
</source>

[[Kategorie:HOWTOS]]

=== Anpassung wenn FHEM und Homebridge auf getrennten Systemen laufen ===
Unter dem Kapitel [[Umsetzung]] wurde bereits alle vorbereitet um mit wenigen Änderungen eine Homebridge zu starten die nicht auf dem selben System läuft wie FHEM. Es nur 2 Änderungen notwendig.
Die erste Änderung betrifft den eingerichteten Dummy. Hier ist das vorhandenen ''userReadings'' wie folgt abzuändern

<source lang="bash" style="width:100%;">
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo /opt/fhem/FHEM/homebridgeserviceremote.sh ".ReadingsVal($NAME,"state","restart")." &" );; }
</source>

Dadurch wird, durch die Aktionen des Dummys, ein weiteres Script angesprochen.

Nun wird dieses Script mit hilfe des Nano Editor angelegt

<source lang="bash" style="width:100%;">
sudo nano /opt/fhem/FHEM/homebridgeserviceremote.sh
</source>

und mit dem folgenden Inhalt befüllt.

'''Achtung''': die Variabeln ''remoteUser'', ''remotePasswort'' und ''remoteHost'' sind ggf. auf die eigenen Gegebenheiten der entfernt laufenden Homebridge anzupassen. Der hier genannte Benutzer muss natürlich berechtigt sein die Homebridge starten zu können. Es sollte auch nicht der root User verwendet werden, sondern ein eigens dafür angelegter und in den Berechtigungen eingeschränkter Benutzer verwendet werden.
Wer zur Fehleranalyse etwas mehr sehen möchte ändert den Wert von ''debug'' auf 1.

<source lang="bash" style="width:100%;">
#!/bin/bash
debug=0
remoteUser="root"
remotePasswort="root"
remoteHost="192.168.1.111"
remoteService="homebridge"
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz

# Vorraussetzungen prüfen
if [ $(dpkg-query -W -f='${Status}' sshpass 2>/dev/null | grep -c "ok installed") -eq 0 ];
then
if [ "$debug" = "1" ]; then
echo "sshpass wird benötigt. Installation beginnt";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wird benötigt. Installation beginnt\"}";
fi
apt-get install sshpass
if [ "$debug" = "1" ]; then
echo "sshpass wurde installiert";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wurde installiert\"}";
fi
fi
###################################

# Befehl ausführen
case "$1" in
start)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService start"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
stop)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService stop"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
restart)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService restart"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi

;;
status)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService status"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0
###################################
</source>

Das Script macht nicht sehr viel. Es verbindet sich über ssh mit dem entfernten System und startet (stopt, etc.) den Homebridge Dienst. Hinweis: es wird sshpass benötigt, welches das Script bei bedarf versucht zu installieren.

== Dankeschön ==

Homebridge Start und Status in FHEM

2017-02-09T05:09:49Z

Svenson08: /* Anpassung wenn FHEM und Homebridge auf getrennten Systemen laufen */

Der Artikel befindet sich noch im Aufbau.
Der Code ist noch nicht 100% getestet, es muss also noch mit Fehler gerechnet werden.

Um nicht bei jeder Änderung, welche die Homebridge betrifft, diese über die Console manuell neustarten zu müssen zeigt diese Lösung wie dies bequem aus FHEMWEB erfolgen kann. In den nachfolgenden Abschnitten sind die einzelnen Schritte dazu erläutert.

== Vorwort ==
Die im weitern genutzten Bezeichnungen von Dummys, Scriptdateinamen o.ä. können geändert werden. Die Änderungen müssen jedoch auch an allen entsprechenden Stellen vorgenommen werden.
Genannte IP Adressen, Benutzernamen und Passwörter sind auf die eigenen Gegebenheiten anzupassen. Die Berechtigungen des Benutzers müssen zur Ausführung der Scripte geprüft und ggf. angepasst werden. Entprechende Linux Kentnisse sollten vorhanden sein. In Teilen berücksichtigt dieser Artikel das FHEM und Homebridge nicht zwingend auf dem selben System laufen. Die hier gezeigte Lösung kann für beide Varianten genutzt werden, FHEM und Homebridge auf dem gleichen System oder auf getrennten Systemen.

== Umsetzung ==

=== Status- und Kontroll-Dummy ===
[[Datei:HomebridgeDummy.PNG|mini|550px|Status- bzw. Kontroll-Dummy]]

Es wird ein Dummy benötigt, welcher den Status des Homebridge-Dienstes anzeigt und über den dieser Dienst gesteuert werden kann. Das nötige Script um die Homebridge als Dienst zu starten wird weiter unten in diesem Artikel erstellt.

<source lang="bash" style="width:100%;">
define SYS_Homebridge dummy
attr SYS_Homebridge devStateIcon .*on:general_an .*off:general_aus .*:audio_rec
attr SYS_Homebridge eventMap status:status start:start stop:stop restart:restart
attr SYS_Homebridge icon it_router
attr SYS_Homebridge room System
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo service homebridge ".ReadingsVal($NAME,"state","restart")." &" );; }
attr SYS_Homebridge webCmd status:start:stop:restart
</source>

Der Dummy wird durch setzen von "start", "stop", "restart" oder "status" jeweils das userReading ausführen und somit letztendlich den homebridge Dienst steuert.

=== Start Script anlegen ===
Nun ist das Startscript für die Homebridge anzulegen. Mittels dem folgenden Befehl wird (wenn noch nicht vorhanden) das homebridge Script angelegt und im Editor geöffnet.

<source lang="bash" style="width:100%;">
sudo nano /etc/init.d/homebridge
</source>
Wenn die Homebridge nicht auf dem selben System läuft wie FHEM muss dieser Schritt auf dem Homebridge System ausgeführt werden.

Das nun folgende Script kann in die homebridge Datei die im Nano Editor geöffnet ist rein kopiert werden.

'''Achtung''': die Variabeln ''homeBridgeUser'', ''fhemHost'' und ''fhemHostTelnetPort'' sind ggf. auf die eigenen Gegebenheiten anzupassen.

<source lang="bash" style="width:100%;">
#!/bin/sh
### BEGIN INIT INFO
# Provides: homebridge
# Required-Start: $network $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start daemon at boot time for homebridge
# Description: Enable service provided by daemon.
### END INIT INFO
export PATH=$PATH:/usr/local/bin
export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules

PID=`pidof homebridge`
homeBridgeUser="fhem"
fhemHost=127.0.0.1 #FHEM Server (Masterinstanz)
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz
fhemDefine="SYS_Homebridge"

case "$1" in
start)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is already running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is already running"
else
su - $homeBridgeUser -c "homebridge > /dev/null 2>&1 &"
echo "Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine on"
sleep 2
$0 status
fi
;;
stop)
if ! ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
else
kill $PID
echo "Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge stopping"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine off"
sleep 2
$0 status
fi
;;
restart)
if ! ps -p $PID > /dev/null 2>&1; then
$0 start
else
$0 stop
$0 start
fi
;;
status)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is running PID $PID"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge running as PID $PID"
else
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0

</source>

Das Script setzt in dem bereits angelegten Dummy ein Reading ''info'' in dem der Ausführungsstatus des Scripts wieder gegeben wird. Das Reading ''state'' wir auf on oder off gesetzt. ''On'' bedeutet das Homebridge gestartet ist, ''off'' das die Homebridge nicht ausgeführt wird.

'''Das Tutorial wird aktuell angepasst (08.02.2017) - weiter geht es ab dieser Stelle in den nächsten Tagen....'''

Damit die Homebridge auch mit Start des Systems gestartet wird sind die folgenden zwei Schritte notwendig

<source lang="bash" style="width:100%;">
sudo chmod 755 /etc/init.d/homebridge
sudo update-rc.d homebridge defaults
</source>

Zum testen kann der Dienst nun mit dem Befehl

<source lang="bash" style="width:100%;">
sudo service homebridge start
</source>
bzw.
<source lang="bash" style="width:100%;">
sudo /etc/init.d/homebridge start
</source>

gestartet werden. In dem angelegten Dummy werden zwei Readings erzeugt mit den entsprechenden Rückmeldungen aus dem Script. Die Readings werden erst angezeigt wenn die bereits geöffnete Detailseite des Dummys neu geladen wird.

=== Testlauf / Fertig ===
Nun können die einzelnen Aktionen über den Dummy ausführt werden. Dabei wird jeweils der eingerichtete Dienst angesteuert und eine (mit kurzer Verzögerung) Rückmeldung gegeben.

== Sonstiges ==

=== FHEM Benutzer Zugriff auf Script gewähren ===

Damit aus FHEM das Script ausgeführt werden kann benötigt dieser Benutzer entsprechende Berechtigungen. Dazu ist in der sudoers ein Eintrag zu ergänzen.
Dazu wird die sudoers Datei im Nano Editor geöffnet

<source lang="bash" style="width:100%;">
sudo nano /etc/sudoers
</source>

Dort sollte im Abschnitt ''# User privilege specification'' die folgende Zeile ergänzt werden

<source lang="bash" style="width:100%;">
fhem ALL=(ALL) NOPASSWD:/etc/init.d/homebridge
</source>

'''Achtung!''' Sollte FHEM nicht unter dem Benuter ''fhem'' laufen ist die an den entsprechenden Stellen anzupassen.

Beispielinhalt der sudoers:
<source lang="bash" style="width:100%;">
#
# This file MUST be edited with the 'visudo' command as root.
#
# Please consider adding local content in /etc/sudoers.d/ instead of
# directly modifying this file.
#
# See the man page for details on how to write a sudoers file.
#
Defaults env_reset
Defaults mail_badpass
Defaults secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root ALL=(ALL:ALL) ALL
fhem ALL=(ALL) NOPASSWD:/opt/fhem/FHEM/backup.sh, /etc/init.d/homebridge

# Members of the admin group may gain root privileges
%admin ALL = (ALL) NOPASSWD: ALL

# Allow members of group sudo to execute any command
%sudo ALL=(ALL:ALL) ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d
</source>

[[Kategorie:HOWTOS]]

=== Anpassung wenn FHEM und Homebridge auf getrennten Systemen laufen ===
Unter dem Kapitel [[Umsetzung]] wurde bereits alle vorbereitet um mit wenigen Änderungen eine Homebridge zu starten die nicht auf dem selben System läuft wie FHEM. Es nur 2 Änderungen notwendig.
Die erste Änderung betrifft den eingerichteten Dummy. Hier ist das vorhandenen ''userReadings'' wie folgt abzuändern

<source lang="bash" style="width:100%;">
attr SYS_Homebridge userReadings OnStateChange:(start|stop|restart|status) { system ("sudo /opt/fhem/FHEM/homebridgeserviceremote.sh ".ReadingsVal($NAME,"state","restart")." &" );; }
</source>

Dadurch wird, durch die Aktionen des Dummys, ein weiteres Script angesprochen.

Nun wird dieses Script mit hilfe des Nano Editor angelegt

<source lang="bash" style="width:100%;">
sudo nano /opt/fhem/FHEM/homebridgeserviceremote.sh
</source>

und mit dem folgenden Inhalt befüllt.

'''Achtung''': die Variabeln ''remoteUser'', ''remotePasswort'' und ''remoteHost'' sind ggf. auf die eigenen Gegebenheiten der entfernt laufenden Homebridge anzupassen. Der hier genannte Benutzer muss natürlich berechtigt sein die Homebridge starten zu können. Wer zur Fehleranalyse etwas mehr sehen möchte ändert den Wert von ''debug'' auf 1.

<source lang="bash" style="width:100%;">
#!/bin/bash
debug=0
remoteUser="root"
remotePasswort="root"
remoteHost="192.168.1.111"
remoteService="homebridge"
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz

# Vorraussetzungen prüfen
if [ $(dpkg-query -W -f='${Status}' sshpass 2>/dev/null | grep -c "ok installed") -eq 0 ];
then
if [ "$debug" = "1" ]; then
echo "sshpass wird benötigt. Installation beginnt";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wird benötigt. Installation beginnt\"}";
fi
apt-get install sshpass
if [ "$debug" = "1" ]; then
echo "sshpass wurde installiert";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] sshpass wurde installiert\"}";
fi
fi
###################################

# Befehl ausführen
case "$1" in
start)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService start' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService start"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
stop)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService stop' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService stop"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
restart)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService restart' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService restart"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi

;;
status)
if [ "$debug" = "1" ]; then
echo "Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführen von 'sudo service $remoteService status' auf '$remoteHost' als '$remoteUser'\"}";
fi
sshpass -p "$remotePasswort" ssh -o StrictHostKeyChecking=no $remoteUser@$remoteHost "sudo service $remoteService status"
if [ "$debug" = "1" ]; then
echo "Ausführung beendet";
perl /opt/fhem/fhem.pl $fhemHostTelnetPort "{Log 1, \"[homebridgeserviceremote.sh] Ausführung beendet\"}";
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0
###################################

</source>

== Dankeschön ==

Homebridge Start und Status in FHEM

2017-02-09T04:59:12Z

Svenson08: /* FHEM Benutzer Zugriff auf Script gewähren */

Homebridge Start und Status in FHEM

2017-02-09T04:58:01Z

Svenson08: /* Homebridge FHEM Zugriff auf Script gewähren */

Homebridge Start und Status in FHEM

2017-02-09T04:52:59Z

Svenson08: /* Homebridge Start per FHEM */

Homebridge Start und Status in FHEM

2017-02-09T04:52:07Z

Svenson08: /* Status- und Kontroll-Dummy */

Datei:HomebridgeDummy.PNG

2017-02-09T04:49:58Z

Svenson08: Darstellung des Homebridge Dummys in FHEMWeb bei Verwendung des Darkstyles

Darstellung des Homebridge Dummys in FHEMWeb bei Verwendung des Darkstyles

Homebridge Start und Status in FHEM

2017-02-09T04:48:41Z

Svenson08: /* Testlauf */

Homebridge Start und Status in FHEM

2017-02-09T04:45:24Z

Svenson08: /* Start Script anlegen */

Homebridge Start und Status in FHEM

2017-02-09T04:44:54Z

Svenson08: /* Homebridge Start DOIF einrichten */

Homebridge Start und Status in FHEM

2017-02-09T04:44:36Z

Svenson08: /* Homebridge Start Dummy einrichten */

Homebridge Start und Status in FHEM

2017-02-09T04:44:12Z

Svenson08: /* Homebridge Start per Konsole */

Homebridge Start und Status in FHEM

2017-02-09T04:40:59Z

Svenson08: /* Start Script Autostart einrichten */

Homebridge Start und Status in FHEM

2017-02-09T04:39:48Z

Svenson08: /* Start Script anlegen */

Homebridge Start und Status in FHEM

2017-02-08T19:13:37Z

Svenson08: /* Start Script anlegen */

Homebridge Start und Status in FHEM

2017-02-08T19:13:21Z

Svenson08: /* Start Script anlegen */

Homebridge Start und Status in FHEM

2017-02-08T19:12:36Z

Svenson08: /* Vorwort */

Homebridge Start und Status in FHEM

2017-02-08T19:11:19Z

Svenson08: /* Start Script befüllen */

Homebridge Start und Status in FHEM

2017-02-08T19:05:38Z

Svenson08: /* Start Script anlegen */

Homebridge Start und Status in FHEM

2017-02-08T19:02:52Z

Svenson08:

Homebridge Start und Status in FHEM

2017-02-07T18:23:40Z

Svenson08: Textuelle Änderungen für bessere Verständlichkeit

Homebridge Start und Status in FHEM

2017-02-07T17:35:07Z

Svenson08: /* Homebridge Start Dummy einrichten */

Der Artikel befindet sich noch im Aufbau.
Der Code ist noch nicht 100% getestet, es muss also noch mit Fehler gerechnet werden.

Achtung: Die Code Zeilen sind direkt der FHEM Config Datei entnommen.

Ich war es leid bei jeder Änderung die Homebridge betrifft immer wieder auf die Console zu müssen um den Dienst neu zustarten.
Hier aus ist dann das folgenden entstanden.
Was noch nicht geht ist die Erkennung wenn Homebridge abgeschmiert ist.
Dies wird nach möglichleit zu einem späterem Zeitpunkt umgesetzt.

Grundlage ist das Script von meintechblog.de für das Auto Backup sowie das Startscript im Artikel Homebridge einrichten

== Status Dummy anlegen ==
1. Anlegen einen Dummies um den Status in FHEM zu sehen:
<source lang="bash" style="width:100%;">
define FHEM.Homebridge.Status dummy
attr FHEM.Homebridge.Status room 9.03_Tech
</source>

== Start Script anlegen ==
2. Script im Verzeichnis /etc/init.d/ erstellen

Wenn die Datei noch nicht angelegt ist auf der Console mit folgenden Befehl erstellen.
<source lang="bash" style="width:100%;">
sudo nano /etc/init.d/homebridge
</source>

== Start Script befüllen ==
Achtung: Damit das Script auch seine Arbeit richtig erledigen kann, muss zwingend der User unter dem Homebridge arbeiten soll eingetragen werden.
Diese Stelle ist durch "User hier" gekennzeichnet. Die Anführungszeichen werden an der Stelle nicht benötigt.

<source lang="bash" style="width:100%;">
#!/bin/sh
### BEGIN INIT INFO
# Provides: homebridge
# Required-Start: $network $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start daemon at boot time for homebridge
# Description: Enable service provided by daemon.
### END INIT INFO
export PATH=$PATH:/usr/local/bin
export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules
PID=`pidof homebridge`
case "$1" in
start)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is already running"
perl /opt/fhem/fhem.pl 7072 "setreading FHEM.Homebridge.Status info Homebridge is already running"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge.Status on"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge off"
else
su - "User hier" -c "homebridge > /dev/null 2>&1 &"
echo "Homebridge starting"
sleep 2
$0 status
fi
;;
stop)
if ! ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl 7072 "setreading FHEM.Homebridge.Status info Homebridge is not running"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge.Status off"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge off"
else
kill $PID
echo "Homebridge closed"
perl /opt/fhem/fhem.pl 7072 "setreading FHEM.Homebridge.Status info Homebridge closed"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge.Status off"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge off"
fi
;;
restart)
if ! ps -p $PID > /dev/null 2>&1; then
$0 start
else
$0 stop
$0 start
fi
;;
status)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is running PID $PID"
perl /opt/fhem/fhem.pl 7072 "setreading FHEM.Homebridge.Status info Homebridge running as PID $PID"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge.Status on"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge off"
else
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl 7072 "setreading FHEM.Homebridge.Status info Homebridge is not running"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge.Status off"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge off"
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0
</source>

== Start Script Autostart einrichten==
Autostart aktivieren:
<source lang="bash" style="width:100%;">
sudo chmod 755 /etc/init.d/homebridge

sudo update-rc.d homebridge defaults
</source>

== Homebridge Start per Konsole==
Nun kann man mit
<source lang="bash" style="width:100%;">
sudo service homebridge start
</source>
bzw.
<source lang="bash" style="width:100%;">
sudo /etc/init.d/homebridge start
</source>
den Dienst starten.
Da in dem Script versucht wird, den Status für den Dummy "FHEM.Homebridge" zu setzen, gibt's erstmal eine Fehlermeldung - also am Besten gleich den Dummy anlegen, wie im nächsten Abschnitt beschrieben.

== Homebridge Start per FHEM==

== Homebridge Start Dummy einrichten==
<source lang="bash" style="width:100%;">
define FHEM.Homebridge dummy
attr FHEM.Homebridge event-on-change-reading state
attr FHEM.Homebridge room 9.03_Tech
attr FHEM.Homebridge webCmd status:start:stop:restart
attr FHEM.Homebridge devStateIcon .*on:general_an .*off:general_aus .*:audio_rec
attr FHEM.Homebridge eventMap status:status start:start stop:stop restart:restart
attr FHEM.Homebridge icon it_router
</source>

== Homebridge Start DOIF einrichten==
<source lang="bash" style="width:100%;">
define FHEM.Homebridge.DOIF DOIF ([FHEM.Homebridge] eq "start") (set FHEM.Homebridge on, {system ("sudo /etc/init.d/homebridge start")})\
DOELSEIF ([FHEM.Homebridge] eq "stop") (set FHEM.Homebridge on, {system ("sudo /etc/init.d/homebridge stop")})\
DOELSEIF ([FHEM.Homebridge] eq "restart") (set FHEM.Homebridge on, {system ("sudo /etc/init.d/homebridge restart")})\
DOELSEIF ([FHEM.Homebridge] eq "status") (set FHEM.Homebridge on, {system ("sudo /etc/init.d/homebridge status")})
attr FHEM.Homebridge.DOIF room 9.03_Tech
</source>

== Homebridge FHEM Zugriff auf Script gewähren==

<source lang="bash" style="width:100%;">
sudo nano /etc/sudoers
</source>
Beispiel Zeile
<source lang="bash" style="width:100%;">
fhem ALL=(ALL) NOPASSWD:/etc/init.d/homebridge
</source>

Beispiel Datei:
<source lang="bash" style="width:100%;">
#
# This file MUST be edited with the 'visudo' command as root.
#
# Please consider adding local content in /etc/sudoers.d/ instead of
# directly modifying this file.
#
# See the man page for details on how to write a sudoers file.
#
Defaults env_reset
Defaults mail_badpass
Defaults secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root ALL=(ALL:ALL) ALL
fhem ALL=(ALL) NOPASSWD:/opt/fhem/FHEM/backup.sh, /etc/init.d/homebridge

# Members of the admin group may gain root privileges
%admin ALL = (ALL) NOPASSWD: ALL

# Allow members of group sudo to execute any command
%sudo ALL=(ALL:ALL) ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d
</source>

[[Kategorie:HOWTOS]]

Homebridge Start und Status in FHEM

2017-02-07T17:34:54Z

Svenson08: Homebridge Start Dummy - Feintuning in der Darstellung unter FHEMWeb - Erleichtert es etwas für Anfänger

Der Artikel befindet sich noch im Aufbau.
Der Code ist noch nicht 100% getestet, es muss also noch mit Fehler gerechnet werden.

Achtung: Die Code Zeilen sind direkt der FHEM Config Datei entnommen.

Ich war es leid bei jeder Änderung die Homebridge betrifft immer wieder auf die Console zu müssen um den Dienst neu zustarten.
Hier aus ist dann das folgenden entstanden.
Was noch nicht geht ist die Erkennung wenn Homebridge abgeschmiert ist.
Dies wird nach möglichleit zu einem späterem Zeitpunkt umgesetzt.

Grundlage ist das Script von meintechblog.de für das Auto Backup sowie das Startscript im Artikel Homebridge einrichten

== Status Dummy anlegen ==
1. Anlegen einen Dummies um den Status in FHEM zu sehen:
<source lang="bash" style="width:100%;">
define FHEM.Homebridge.Status dummy
attr FHEM.Homebridge.Status room 9.03_Tech
</source>

== Start Script anlegen ==
2. Script im Verzeichnis /etc/init.d/ erstellen

Wenn die Datei noch nicht angelegt ist auf der Console mit folgenden Befehl erstellen.
<source lang="bash" style="width:100%;">
sudo nano /etc/init.d/homebridge
</source>

== Start Script befüllen ==
Achtung: Damit das Script auch seine Arbeit richtig erledigen kann, muss zwingend der User unter dem Homebridge arbeiten soll eingetragen werden.
Diese Stelle ist durch "User hier" gekennzeichnet. Die Anführungszeichen werden an der Stelle nicht benötigt.

<source lang="bash" style="width:100%;">
#!/bin/sh
### BEGIN INIT INFO
# Provides: homebridge
# Required-Start: $network $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start daemon at boot time for homebridge
# Description: Enable service provided by daemon.
### END INIT INFO
export PATH=$PATH:/usr/local/bin
export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules
PID=`pidof homebridge`
case "$1" in
start)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is already running"
perl /opt/fhem/fhem.pl 7072 "setreading FHEM.Homebridge.Status info Homebridge is already running"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge.Status on"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge off"
else
su - "User hier" -c "homebridge > /dev/null 2>&1 &"
echo "Homebridge starting"
sleep 2
$0 status
fi
;;
stop)
if ! ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl 7072 "setreading FHEM.Homebridge.Status info Homebridge is not running"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge.Status off"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge off"
else
kill $PID
echo "Homebridge closed"
perl /opt/fhem/fhem.pl 7072 "setreading FHEM.Homebridge.Status info Homebridge closed"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge.Status off"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge off"
fi
;;
restart)
if ! ps -p $PID > /dev/null 2>&1; then
$0 start
else
$0 stop
$0 start
fi
;;
status)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is running PID $PID"
perl /opt/fhem/fhem.pl 7072 "setreading FHEM.Homebridge.Status info Homebridge running as PID $PID"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge.Status on"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge off"
else
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl 7072 "setreading FHEM.Homebridge.Status info Homebridge is not running"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge.Status off"
perl /opt/fhem/fhem.pl 7072 "set FHEM.Homebridge off"
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0
</source>

== Start Script Autostart einrichten==
Autostart aktivieren:
<source lang="bash" style="width:100%;">
sudo chmod 755 /etc/init.d/homebridge

sudo update-rc.d homebridge defaults
</source>

== Homebridge Start per Konsole==
Nun kann man mit
<source lang="bash" style="width:100%;">
sudo service homebridge start
</source>
bzw.
<source lang="bash" style="width:100%;">
sudo /etc/init.d/homebridge start
</source>
den Dienst starten.
Da in dem Script versucht wird, den Status für den Dummy "FHEM.Homebridge" zu setzen, gibt's erstmal eine Fehlermeldung - also am Besten gleich den Dummy anlegen, wie im nächsten Abschnitt beschrieben.

== Homebridge Start per FHEM==

== Homebridge Start Dummy einrichten==
<source lang="bash" style="width:100%;">
define FHEM.Homebridge dummy
attr FHEM.Homebridge event-on-change-reading state
attr FHEM.Homebridge room 9.03_Tech
attr FHEM.Homebridge webCmd status:start:stop:restart
attr FHEM.Homebridge devStateIcon .*on:general_an .*off:general_aus .*:audio_rec
attr FHEM.Homebridge eventMap status:status start:start stop:stop restart:restart
attr FHEM.Homebridge iconit_router
</source>

== Homebridge Start DOIF einrichten==
<source lang="bash" style="width:100%;">
define FHEM.Homebridge.DOIF DOIF ([FHEM.Homebridge] eq "start") (set FHEM.Homebridge on, {system ("sudo /etc/init.d/homebridge start")})\
DOELSEIF ([FHEM.Homebridge] eq "stop") (set FHEM.Homebridge on, {system ("sudo /etc/init.d/homebridge stop")})\
DOELSEIF ([FHEM.Homebridge] eq "restart") (set FHEM.Homebridge on, {system ("sudo /etc/init.d/homebridge restart")})\
DOELSEIF ([FHEM.Homebridge] eq "status") (set FHEM.Homebridge on, {system ("sudo /etc/init.d/homebridge status")})
attr FHEM.Homebridge.DOIF room 9.03_Tech
</source>

== Homebridge FHEM Zugriff auf Script gewähren==

<source lang="bash" style="width:100%;">
sudo nano /etc/sudoers
</source>
Beispiel Zeile
<source lang="bash" style="width:100%;">
fhem ALL=(ALL) NOPASSWD:/etc/init.d/homebridge
</source>

Beispiel Datei:
<source lang="bash" style="width:100%;">
#
# This file MUST be edited with the 'visudo' command as root.
#
# Please consider adding local content in /etc/sudoers.d/ instead of
# directly modifying this file.
#
# See the man page for details on how to write a sudoers file.
#
Defaults env_reset
Defaults mail_badpass
Defaults secure_path="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin"

# Host alias specification

# User alias specification

# Cmnd alias specification

# User privilege specification
root ALL=(ALL:ALL) ALL
fhem ALL=(ALL) NOPASSWD:/opt/fhem/FHEM/backup.sh, /etc/init.d/homebridge

# Members of the admin group may gain root privileges
%admin ALL = (ALL) NOPASSWD: ALL

# Allow members of group sudo to execute any command
%sudo ALL=(ALL:ALL) ALL

# See sudoers(5) for more information on "#include" directives:

#includedir /etc/sudoers.d
</source>

[[Kategorie:HOWTOS]]

Diskussion:Homebridge Start und Status in FHEM

2017-02-07T05:15:06Z

Svenson08: Die Seite wurde neu angelegt: „Ich hätte ein angepasstes Startscript. Dabei lässt sich dieses durch die Parameter im oberen Abschnitt für Anfänger ggf. besser auf die eigenen Bedürfniss…“

Ich hätte ein angepasstes Startscript. Dabei lässt sich dieses durch die Parameter im oberen Abschnitt für Anfänger ggf. besser auf die eigenen Bedürfnisse anpassen.
Falls die Homebridge nicht auf dem selben System wie FHEM läuft, funktioniert die Rückmeldung des Status an FHEM auch in diesem Szenario.

'''Leider gibts im Kommentar keine Syntax-Formatierung, daher wird das hier so zerstückelt angezeigt'''

#!/bin/sh
### BEGIN INIT INFO
# Provides: homebridge
# Required-Start: $network $remote_fs $syslog
# Required-Stop: $remote_fs $syslog
# Default-Start: 2 3 4 5
# Default-Stop: 0 1 6
# Short-Description: Start daemon at boot time for homebridge
# Description: Enable service provided by daemon.
### END INIT INFO
export PATH=$PATH:/usr/local/bin
export NODE_PATH=$NODE_PATH:/usr/local/lib/node_modules

PID=`pidof homebridge`
homeBridgeUser="User hier"
fhemHost=127.0.0.1 #FHEM Server (Masterinstanz)
fhemHostTelnetPort=7072 #TelnetPort der FHEM Instanz
fhemDefine="FHEM.Homebridge.Status"

case "$1" in
start)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is already running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is already running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine on"

else
su - $homeBridgeUser -c "homebridge > /dev/null 2>&1 &"
echo "Homebridge starting"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge starting"
sleep 2
$0 status
fi
;;
stop)
if ! ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine off"
else
kill $PID
echo "Homebridge closed"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge closed"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine off"
fi
;;
restart)
if ! ps -p $PID > /dev/null 2>&1; then
$0 start
else
$0 stop
$0 start
fi
;;
status)
if ps -p $PID > /dev/null 2>&1; then
echo "Homebridge is running PID $PID"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge running as PID $PID"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine on"
else
echo "Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "setreading $fhemDefine info Homebridge is not running"
perl /opt/fhem/fhem.pl $fhemHost:$fhemHostTelnetPort "set $fhemDefine off"
fi
;;
*)
echo "Usage: $0 {start|stop|status|restart}"
exit 1
;;
esac
exit 0

MYSENSORS

2016-05-01T17:34:37Z

Svenson08: Im Define fehlte der Modulname

{{Infobox Modul
|ModPurpose=Stellt als Gateway die Verbindung zu einem MySensors Netzwerk her
|ModType=d
|ModForumArea=Sonstige Systeme
|ModTechName=00_MYSENSORS.pm
|ModOwner=ntruchsess ({{Link2FU|677|Forum}}/[[Benutzer Diskussion:Ntruchsess|Wiki]]) }}
Das Modul [[MYSENSORS]] fungiert als [[Interface|Verbindung]] zwischen Fhem und einem [[MySensors]] Netzwerk und repräsentiert ein '''''MySensors Gateway'''''. Die durch das Modul [[MYSENSORS_DEVICE]] repräsentierten '''''MySensors Sensor Nodes''''' bzw. '''''MySensors Sensoren''''' werden im Folgenden der Einfachheit halber kurz als ''Node'' bezeichnet.

== Voraussetzungen ==
An das Fhem-System muss ein
* [http://www.mysensors.org/build/serial_gateway serielles] oder ein
* [http://www.mysensors.org/build/ethernet_gateway Ethernet] oder ein
* [http://www.mysensors.org/build/esp8266_gateway WiFi]
Gateway angeschlossen sein.

== Anwendung ==
In den folgenden Beispielen wird mit ''meinMSG'' das definierte '''M'''y'''S'''ensors'''G'''ateway bezeichnet.

=== Define ===
Das MySensors Gateway wird angelegt mit
:<code>define '''meinMSG''' MYSENSORS /dev/ttyUSB1@115200</code>
für ein serielles Gateway bzw.
:<code>define '''meinMSG''' MYSENSORS ip:port</code>
für ein Ethernet Gateway.

=== Attribute ===
Durch Setzen des Attributs
:<code>attr '''meinMSG''' autocreate</code>
werden neue ''Nodes'' bei Eintreffen einer neuen ''presentation-message'' automatisch angelegt.

== Anwendungsbeispiele ==

== Links ==
* [http://www.mysensors.org MySensors.org]
* Forenthema, aus dem die {{Link2Forum|Topic=26807|LinkText=Integration von MySensors in FHEM}} entstanden ist
* {{Link2Forum|Topic=28198|LinkText=Ankündigung}} der MySensors Module

[[Kategorie:IP Components]]
[[Kategorie:Other Components]]

Event-on-change-reading

2016-04-01T05:48:16Z

Svenson08: /* Syntax */ Angabe des optionalen Threshold fehlte

{{SEITENTITEL:event-on-change-reading}} 

{{Baustelle}}
Mit dem Attribut [[event-on-change-reading]] kann für Readings eines Gerätes festgelegt werden, dass nur bei einer Wertänderung ein Event (und damit in der Regel auch ein Log-Eintrag) erzeugt werden soll. Damit stellt das Attribut eine Möglichkeit zur Verfügung, die Menge von Log-Einträgen zu reduzieren.

Wird ''event-on-change-reading'' für ein einzelnes Reading gesetzt, werden zunächst alle übrigen Readings nicht mehr protokolliert, erzeugen also keine Events mehr.

== Syntax ==
Das ''event-on-change-reading'' Attribut wird in der folgenden Weise spezifiziert:
:<code><nowiki>attr <device> event-on-change-reading reading1[:threshold][,reading2[:threshold]...n]</nowiki></code>
Die zu berücksichtigenden Readings sind als durch Komma getrennte Werte anzugeben, können aber auch über reguläre Ausdrücke zusammengefasst werden.

== Wechselwirkungen ==
Dieses Attribut steht in Wechselwirkung mit den Attributen [[event-on-update-reading]] und [[event-min-interval]], bitte also unbedingt auch deren Beschreibung berücksichtigen!

Sind bei einem Device weder ''event-on-change-reading'' noch ''event-on-update-reading'' spezifiziert, werden für alle Readings sowohl bei Änderung als auch bei der Aktualisierung (mit dem gleichen Wert) Events erzeugt. Sobald jedoch eines der beiden Attribute gesetzt ist, müssen alle Readings, die protokolliert werden sollen bei (mindestens) einem der Attribute berücksichtigt sein.

Ist für ein Reading sowohl ''event-on-change-reading'' als auch ''event-on-update-reading'' spezifiziert, wird bei jeder Aktualisierung des Readings ein Event erzeugt, das ''event-on-change'' wird für dieses Reading also außer Kraft gesetzt bzw. "überstimmt".

Eine Zusammenfassung aus {{Link2Forum|Topic=26694|Message=196955|LinkText=diesem Forenbeitrag}}:
;Update + Min-Interval
:ein Event wird erzeugt, wenn der selbe Wert, der bereits im Reading steht, nochmal reingeschrieben wird '''und''' mindestens ''min-interval'' Sekunden seit dem letzten Event vergangen sind
;Change
:ein Event wird erzeugt, wenn der neue Wert wirklich abweichend vom alten Wert ist '''oder''' mindestens ''min-interval'' Sekunden seit dem letzten Event vergangen sind.

In der Regel ist es sinnvoll, ''event-on-change-reading'' mit ''min-interval'' zu kombinieren, ''min-interval'' deshalb, damit von Zeit zu Zeit Einträge in das Logfile geschrieben werden (findet FHEM zu wenige Ereignisse pro betrachteter Zeitspanne, bleibt das Diagramm leer oder wird nur teilweise gezeichnet (Plotabriss)).

== Beispiele ==
Um alle Readings eines Gerätes nur bei Änderungen zu protokollieren, sollte das Attribut folgendermaßen gesetzt werden:
:<code><nowiki>attr <device> event-on-change-reading .*</nowiki></code>

== Siehe auch ==
*[[event-on-update-reading]]
*[[event-min-interval]]
*[[event-aggregator]]

== Links ==
* Benutzungstipps (''Best Practice'') für das Attribut in {{Link2Forum|Topic=36522|LinkText=diesem Forenthread}}

[[Kategorie:Attribut (allgemeingültig)]]

FHEM Tablet UI

2016-03-16T18:46:09Z

Svenson08: /* Widgets LABEL */

{{Infobox Modul
|ModPurpose=Oberfläche für Fhem
|ModType=x
|ModFTopic=34233
|ModForumArea=Frontends
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
[[Datei:tablet_ui.png|200px|thumb|right|Fhem Tablet UI]]
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in Fhem integrierten Geräten. Zahlreiche Widgets können sehr flexibel und leicht per HTML Code konfiguriert werden.

In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben.

{{Todo|alle Widgets hier übernehmen, Übersetzung, weitere Beispiele aus dem Forum einfügen (evtl. mit Link!?)}}

== Voraussetzungen ==
Das User Interface hat sehr wenige Anforderungen für den Betrieb. Es benötigt <u>keine</u> zusätzliche Frameworks, wie z.B. PHP oder MySQL.

Voraussetzungen ist eine Fhem Installation mit HTTPSRV Modul. Das UI kann mit den gängigen Browsern Betriebssystem unabhängig genutzt werden oder mit dem Webviewcontrol.
Das Interface wird dabei in dem FHEM eigenen Webserver ausgeführt. Mit wenigen Anpassungen ist es auch möglich das UI auf anderen Webservern (Apache, u.a.) zu betreiben, dann kann FHEM und UI auch auf getrennten Systemen ausgeführt werden.

== Installation ==
* Im Befehls-Eingabefeld eingeben: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* Im Befehls-Eingabefeld eingeben: <code>define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI</code>
* Im Verzeichnis ./fhem/www/tablet die Datei index-example.html in index.html umbenennen oder eine neue index.html erzeugen und diese index.html wie nachfolgend beschrieben editieren.

Das UI ist über den Link "Tablet-UI" auf der Fhem-Hauptseite oder durch Direktaufruf der URL "<nowiki>http://<Fhem-url>:8083/fhem/tablet/index.html</nowiki>" zu erreichen.

Hinweise zu einer manuellen Installation und weitere Infos sind auf der Projektseite https://github.com/knowthelist/fhem-tablet-ui zu finden.

== Update ==
* Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von: <code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* Update des UI durch Eingabe von: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Über
<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
kann seit dem 24.12.2015 die URL zum normalen Updatebefehl von FHEM hinzugefügt werden. Mit einen "update check" sieht man dann gleich alle Updates aus beiden "Welten".

== Weitere Widgets ==

=== Widgets for Fhem-tablet-ui ===
Zusätzlich zu den bei der Installation des Tablet UI direkt zur Verfügung stehenden Widgets, gibt es eine weitere Widget-Quelle von nesges unter https://github.com/nesges/Widgets-for-fhem-tablet-ui. Die Widgets aus dieser Quelle müssen für eine Nutzung separat installiert werden.

Dazu folgenden Befehl in die Fhem-Befehlszeile eingeben: <code><nowiki>update all https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt</nowiki></code>.

Näheres zur Installation unter [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/Installation Wiki: Installation].

Die Dokumentation der einzelnen Widgets befindet sich ebenfalls [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki im Github-Wiki].

== Konfiguration ==
'''META-Parameter'''

Das Tablet UI lässt sich über die META-Parameter konfigurieren. Mit den meisten META-Parametern kann das verhalten des UI beeinflusst werden. Diese Parameter befinden sich in der jeweiligen '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>'''. Nachfolgend sind die verschiedenen Konfigurationsparameter aufgeführt. Die Parameter sind immer gleich aufgebaut.

:<code><meta name="<META-Parameter>" content="<Wert>"></code>

{| class="wikitable"
|-
! META-Parameter !! Wert / Beispiel !! Erklärung
|-
| longpoll || 1 oder 0 || Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh.
|-
| gridster_disable || 1 oder 0 || Drag&Drop der Gridster-Elemente auf der Seite deaktivieren.
|-
| toast || 1 oder 0 || Toast messages deaktivieren
|-
| fhemweb_url || http://meinFhemServer:8083/fhem || Wird benötigt wenn der Webserver des TabletUI nicht auf dem FHEM Server läuft.
|-
| widget_margin || 1 bis 9999 || Abstände der Gridsterelemente verändern.
|-
| widget_base_width || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.
|-
| widget_base_height || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.
|}

'''CSS-Styles'''

Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt [[#CSS Class description|CSS Class description]] oder [[#Positioning|Positioning]] aufgeführt. Es besteht auch die Möglichkeit eine eigene CSS Datei zu erstellen und darüber Änderungen am aussehen des UI vorzunehmen. Die eigenen CSS Datei würde bei einem Update unverändert bleiben. Daher ist abzuraten ein CSS Datei die mit dem UI Update verteilt wird zu modifizieren. Die eigene CSS Datei ist unter '''/fhem/tablet/css''' mit dem Namen '''fhem-tablet-ui-user.css''' zu finden. Sollte diese nicht vorhanden sein kann die Datei manuell erstellt werden.
Wird keine eigene CSS-Datei verwendet empfiehlt es sich den folgenden Eintrag im <head> der jeweiligen .html Datei zu entfernen, bzw. in Kommentar gesetzt werden um Probleme beim Laden der Seite zu verhindern.

:<code><link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /></code>

== Farbe ==
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form oder als RGB-Wert anzugeben. Zum Beispiel: Hex: #A3CFA3 RBG: rgb(163, 207, 163).

Knallige Farben wie #ff0000 für Rot oder #00ff00 für Grün sollten vermieden werden. Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.

Hilfreich bei der Suche nach den Farbwerten ist der color picker: http://www.w3schools.com/tags/ref_colorpicker.asp

== CSS Class description ==

Not all widgets support all classes

* readonly : changing of state is not allowed
* wider : 25px extra space for the widget to the top
* narrow : shorter distant to the widget above
* w1x, w2x, w3x : set the widget to a fix width: 1x, 2x, 3x width
* mini : lowest diameter for volume widget
* small : font 80% size (label), small diameter for volume widget
* medium : font 120% size
* large : font 150% size
* big : font 200% size
* bigplus : font 270% size
* bigger : font 320% size
* bigger.thin : font 450% size
* grande : font 600% size
* gigantic: font 144px size + 120px line-height
* thin : font thin
* darker : forecolor in gray
* hue-tick : draw ticks in color range
* hue-front : draw handle in color range
* hue-back : draw background in color range
* dim-tick : draw ticks in brightness range
* dim-front : draw handle in brightness range
* dim-back : draw background in brightness range
* red : foreground color red
* green : foreground color green
* blue : foreground color blue
* doublebox-v : container to place 2 small widgets (e.g. switch) one above the other
* doublebox-h : container to place 2 small widgets (e.g. switch) side by side
* timestamp : deliver the date time for the reading instead the value
* inline : positioning elements in a row, no line break
* top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
* left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
* right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
* blink : blink animatation for label or symbol widget
* verticalLine : Vertikale Line am rechten Rand

== Positioning ==

*container : new box or new row
*col-x-y : new column with x/y of width (col-1-3,col-2-3,col-1-2,col-1-4,col-1-8,col-1-5,col-2-5,col-3-5,col-4-5)
*inline : positioning elements in a row, no line break
*top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
*left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
*right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
*top-narrow : -15px closer on top (top-narrow-2x -> -30px; top-narrow-10 -> -10px)
*centered : horizontal centered
*left-align : align text left
*left : floating left
*right-align : align text right
*right : floating right
*wider : 15px extra space for the widget all around
*narrow : shorter distant to the widget above
*fullsize : 100% in width and height

== Widgets -- Konfiguration ==

Teilweise dokumentierte Widgets:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/button button]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen Fhem-Befehl absetzen kann.
* [[#chart|chart]]: chart with similar capabilities as the FHEM plots
* checkbox:
* [[#circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clicksound clicksound]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clock clock]: Das Widget "clock" stellt eine einfach Uhr zur verfügung.
* colorwheel:
* daytimepicker:
* departure:
* [[#dimmer|dimmer]]: toogle button with a setter for on value
* eventmonitor:
* highchart:
* [[#homestatus|homestatus]]: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]]: Widget zum Einbinden externer Inhalte in einem Iframe.
* [[#image|image]]: insert an image, the URL is given by a reading
* input:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/klimatrend klimatrend]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt.
* Knob:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* [[#label|label]]: STATE als Text anzeigen
* [[#level|level]]: vertical/horizontal bar to show values between min/max value
* link:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/multistatebutton multistatebutton]: Variante des push-Widgets das den set-Befehl abhängig vom gelesenen Status ändert.
* [[#pagetab|pagetab]]: Element to smoothly exchange the whole page with another page
* pagebutton:
* [[#playstream|playstream]]: Abspielen eines Webradio-Streams per Button
* [[#popup|popup]]: a popup dialog which open on click on another widget
* [[#progress|progress]]: round symbolic display for percent values
* [[#push|push]]: send any command to Fhem e.g. up / down
* range:
* readingsgroup:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads
* [[#rotor|rotor]]: Umschalten von zwei oder mehr Widgets an einer Position
* [[#select|select]]: Combobox to provide a list for selection
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: zum anzeigen und einstellen einer Uhrzeit.
* [[#simplechart|simplechart]]: simple XY line chart for one value (reads directly from Fhem log file)
* [[#slider|slider]]: vertical slider to select between min/max value
* spinner:
* swiper:
* [[#switch|switch]]: Toggle any command to Fhem (e.g. on / off)
* [[#symbol|symbol]]: State als Symbol darstellen (z.B. Fenster offen)
* [[#thermostat|thermostat]]: dial for heater thermostates to set desired value and show current value
* [[#volume|volume]]: dial to set a single value (e.g. 0-60)
* [[#weather|weather]]: insert an icon or image, represending a weather literal
* [https://github.com/svenson08/ftui-weekdaytimer-widget weekdaytimer]: Visualisierung des [[WeekdayTimer]] Modul
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/wind_direction wind_direction]: Zeigt die Windrichtung auf einer Windrose an.

Ein Demo der Widgets findet ihr [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Hier].
----------------------------------

Für alle Widgets gilt:
{| class="wikitable"
|+allgemeine Attribute
|-
!align="right" |data-type
|Widget-Typ
|-
!align="right" |data-device
|Fhem-Name des Gerätes (mit dem Befehl 'list' bekommt man im Fhem die kpl. Liste)
|-
!align="right" |class
|CSS-Klassen für Aussehen und Formatierung des Widgets
|-
|}

{| class="wikitable"
|+Daten Empfangen
|-
!align="right" |data-get
|Reading Name
|-
!align="right" |data-get-on
|Wert für den Status on
|-
!align="right" |data-get-off
|Wert für den Status off
|-
|}

{| class="wikitable"
|+Daten Senden
|-
!align="right" |data-set
|Reading Name
|-
!align="right" |data-set-on
|Wert für den Status on
|-
!align="right" |data-set-off
|Wert für den Status off
|-
|}

<div id="chart">'''CHART'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-logdevice
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung) or array of names if more than one graph shall be displayed
|-
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log) or or array of names if more than one graph shall be displayed
|'-' or omitting this data means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int") or or array of columnspecs if more than one graph shall be displayed
|-
|-
!align="right" |data-style
|name of the graph style to be used (e.g. 'SVGplot l0' or 'ftui l0dash') or or array of styles if more than one graph shall be displayed using different stlyes. The standard fhem plot styles can be used furthermore there are some more predefined styles existing (details see css file). Own styles can be specified e.g. in the fhem-table-ui-user.css file.
|-
|-
!align="right" |data-ptype
|name of the plot type (e.g. 'lines' or 'fa-cog') or or array of plottypes if more than one graph shall be displayed. All fhem plot styles are supported. Additionally it is possible to specify symbols (currently supported are font awesome ('fa-...'), open automation ('oa-...') and fhem symbols ('fs-...'))
|'lines'
|-
!align="right" |data-uaxis
|name of the axis to be used ('primary' or 'secondary') or or array of axis' to be used if more than one graph shall be displayed. The 'primary' axis is labelled on the left side, the 'secondary' axis is labelled on the right side
|'primary'
|-
!align="right" |data-legend
|caption of the graph (used in the legend and at the cursor) or an array of legend texts if more than one graph shall be displayed.
|-
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|10
|-
!align="right" |data-minvalue_sec
|min Y value to Show or an array of values for dynamic minY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|30
|-
!align="right" |data-maxvalue_sec
|max Y value to Show or an array of values for dynamic maxY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-yticks
|value distance between Y tick lines (related to primary axis). A value of 'auto' means that the value is calculated from the data displayed dynamically.
|'auto'
|-
!align="right" |data-xticks
|time range between each X tick lines (in minutes). A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-daysago_start
|number of days back from now for the start of the plot (0 means the plot starts from today 0:00). Additionally the x-axis start value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'.
|0
|-
!align="right" |data-daysago_end
|number of days back from now for the end of the plot (-1 means the plot ends today 24:00). Additionally the x-axis end value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'.
|-1
|-
!align="right" |data-nofulldays
|switch to activate/deactivate rounding of the xaxis start and end values to full days ('true' or 'false')
|'false'
|-
!align="right" |data-ytext
|text to be shown besides the primary y axis.
|-
|-
!align="right" |data-ytext_sec
|text to be shown besides the secondary y axis.
|-
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks for primary y axis.
|-
|-
!align="right" |data-crosshair
|switch to activate/deactivate the crosshair cursor ('true' or 'false')
|'false'
|-
!align="right" |data-cursorgroup
|number to define coupling of the crosshair cursor. The cursors of all charts having the same number are coupled and move together.
|-
|-
!align="right" |data-scrollgroup
|number to define coupling of the scrolling (shift and zoom). All charts having the same number are scrolled (shifted and zoomed) together.
|-
|-
!align="right" |data-showlegend
|switch to activate/deactivate the initial display of the legend window ('true' or 'false')
|'false'
|-
!align="right" |data-yunit_sec
|unit of the value to show beside of each Y ticks for secondary y axis.
|-
|-
!align="right" |data-width
|fixed size for width (in % or px)
|-
|-
!align="right" |data-height
|fixed size for height (in % or px)
|-
|-
!align="right" |class
|fullsize, noticks, nobuttons
|
|-
|}

<code>data-logfile</code> can be omitted in this case the default value "-" will be used. This means that the current logfile is going to be used.

There are several buttons that control the dynamic behaviour of the chart. The <-, ->, + and - buttons shift and zoom the displayed data. The "legend" and "cursor" buttons are switching on and off the display of the legend window and the crosshair cursor respectively.

When the legend window is displayed, a click on the legend text shows/hides the respective graph. The legend window can be dragged to other positions on desktop browsers (currently not yet working for iOS and Android).

The crosshair cursor currently only works dynamically on desktop browsers. On iOS and Android you have to tap on the screen to set the cursor to a new position.

There is a number of css styles that control the visible appearance of the chart. The following classes are supported:

{| class="wikitable"
!CSS class name
!Description
|-
!.chart-background
|Color etc. for the chart background
|-
!.text.axes
|Font and color for the chart axes
|-
!.buttons
|Size and color for the buttons (shift etc.)
|-
!.gridlines
|Size and color for gridlines generally
|-
!.xaxis
|Font, size and color for xaxis
|-
!.yaxis
|Font, size and color for yaxis
|-
!.xticks
|Font, size and color for xticks
|-
!.yticks
|Font, size and color for yticks
|-
!.crosshair
|Font, size and color (foreground/background) for the crosshair cursor
|-
!.caption
|Font, size and color for text buttons for legend and cursor switching
|-
!.legend
|Font, size and background color for legend window
|-
|-
|}

[[#Beispiel_chart|Link zu einem Beispiel]]

<div id="circlemenu">'''CIRCLEMENU'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-item-diameter
|diameter of the circle
|52
|-
!align="right" |data-circle-radius
|radius of each item, in pixel
|70
|-
!align="right" |data-direction
|position of the items in relation to the center
|'full'
|-
!align="right" |data-close-after
|closing time of the circle-menu
|(item-count + 1s) or a minimum of 4s
|-
!align="right" |class
|keepopen
|
|-
|}

Optionen für data-direction: top | right | bottom | left | top-right | top-left | bottom-right | bottom-left | top-half | right-half | bottom-half | left-half | full | vertical | horizontal

[[#Beispiel_circlemenu|Link zu einem Beispiel]]

<div id="dimmer">'''DIMMER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-get-on
|value for ON status to get
|'on'
|-
!align="right" |data-get-off
|value for OFF status to get
|'off'
|-
!align="right" |data-set
|(<command> <device> <reading> <value>)
|
|-
!align="right" |data-set-on
|value for ON status to set
|value of data-get-on
|-
!align="right" |data-set-off
|value for OFF status to set
|value of data-get-off
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-dim
|name of the reading responsible for dim (<command> <device> <reading> <value>)
|value of data-get-on
|-
!align="right" |data-icon
|name of the font-awesome icon
|fa-lightbulb-o
|-
|}

[[#Beispiel_dimmer|Link zu einem Beispiel]]

<div id="homestatus">'''HOMESTATUS'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-get-on
|array of states using for get
|['1','2','3','4']
|-
!align="right" |data-set-on
|array of states using for set.
|value of data-get-on
|-
!align="right" |data-alias
|array of fix names to show only in the UI as an alias to the real states
|''
|-
!align="right" |data-icons
|array of icons related to the data-get-on array
|''
|-
!align="right" |data-version
|name of the status model e.g. 'residents','roommate','guest'
|(default NULL)
|-
|}

The default version has 4 states: '1','2','3','4' The default aliases are 'Home','Night','Away','Holiday'; data-version='residents' or 'roommate' or 'guest' has 5 states ('home','asleep','absent','gone','gotosleep') They have these aliases 'Home','Night','Away','Holiday','Retire'

[[#Beispiel_homestatus|Link zu einem Beispiel]]

<div id="image">'''IMAGE'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get an URL from Fhem
|'STATE'
|-
!align="right" |data-size
|width of the image in px or %, the height scales proportionally
|50%
|-
!align="right" |data-url
|URL of the image to show (use data-url or data-device + data-get, not both)
|
|-
!align="right" |data-refresh
|Interval in seconds for image refresh for usage together with data-url
|900
|-
|}

[[#Beispiel_image|Link zu einem Beispiel]]

=== Widget LABEL ===
<div id="label">'''LABEL'''</div>

Mit dem LABEL Widget kann der STATUS eines Device in Textform angezeigt werden. Dabei kann das die Farbe des Anzeigetext abhängig von dessen Wert festgelegt werden.

Neben den '''allgemeine Attribute''' besitzt das LABEL-Widget die nachfolgenden Attribute.

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|Name des Readings in FHEM
|
|-
!align="right" |data-fix
|Eine bestimmte Anzahl an Dezimalstellen
|'-1' -> non-numeric
|-
!align="right" |data-part
|split position of the space separated value to show or an RegEx
|
|-
!align="right" |data-color
| fix color attribute or DEVICE:READING for dynamic setting of label color
| ''
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits-get
|name of the DEVICE:Reading to colorize the label
|data-device:data-get
|-
!align="right" |data-limits
|an array of numeric values to affect the colour of the Label
|
|-
!align="right" |data-limits-part
|part number of the space separated value to show or a RegEx
|'-1' -> all
|-
!align="right" |data-unit
|add a unit after a numeric value. use encoded strings e.g. "%B0C%0A"
|
|-
!align="right" |data-substitution
|regex-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected
|
|-
!align="right" |data-hide
|string to compare with current value. hide element when it's value equals data-hide
|
|-
!align="right" |data-hideparents
|jquery selector to hide element's parents too
|
|-
!align="right" |class
|small, large, big, bigger, thin, red, green, blue, darker, timestamp, w1x, w2x, w3x, fixedlabel, icon, bg-limit
|
|}

Mit der Class 'fixedlabel' kann man Label einbauen, die einen festen Text (direkt im HTML) haben, aber trotzdem die Farbe per Reading Value beeinflusst werden könnte.<br>
Mit der Class 'icon' kann man Label einbauen, die wie Icons aussehen. Als Hintergrund gibt es 'icon round' (rund), 'icon square' (Rechteck mit abgerundeten Ecken) und 'icon squareborder' (Rechteck mit abgerundeten Ecken und einem zusätzlichen Rand).<br>
Mit der Class 'bg-limit' wird der Hintergrund des Icon auf grün oder rot gesetzt, passend zum on/off Status des data-limits.
Use data-color OR data-colors + data-limits, not both.

With class="bg-limit" it changes the background color not the forecolor according data-limits

class="icon square" or class="icon round" forces the label to a fix width and height in icon style

Special layout can be achieved by overwriting of following classes in the fhem-tablet-ui-user.css:

.label-precomma .label-comma .label-aftercomma .label-unit

e.g.: .label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }

Functions for data-substitution:

Array of replacements
RegEx-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected
data-substitution="weekdayshort"
JS functions data-substitution="toDate().ddmm()" - convert to day:month
data-substitution="toDate().hhmm()" - convert to hour:minutes

data-substitution="toDate().hhmmss()" - convert to hour:minutes:secondes

data-substitution="toDate().eeee()" - convert to name of the week day

data-substitution="toDate().ago()" - convert to time span

[[#Beispiel_label|Link zu einem Beispiel]]

=== Widget LEVEL ===
<div id="level">'''LEVEL'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-min
|minimal value to set
|'0'
|-
!align="right" |data-max
|maximal value to set
|'100'
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-part
|part number of the space separated value to show or an RegEx
|
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits
|a array of numeric or RegEx values to affect the colour of the label
|
|-
!align="right" |class
|mini, horizontal
|
|-
|}

[[#Beispiel_level|Link zu einem Beispiel]] (fehlt noch)

<div id="pagetab">'''PAGETAB'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL of the new page to show
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|'fa-power-off'
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|''
|-
!align="right" |data-on-background-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-background-color
|color of OFF state
|'#505050'
|-
!align="right" |data-on-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-color
|color of Off state
|'#505050'
|-
!align="right" |data-get-on
|array of status to assign a special icon-list from data-icons
|
|-
!align="right" |data-icons
|array of icons related to the a data-get-on array
|
|-
!align="right" |class
|warn, activate (as additionals for data-icons)
|
|-
|}

[[#Beispiel_pagetab|Link zu einem Beispiel]]

<div id="playstream">'''PLAYSTREAM'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL des Radio-Streams
|-
!align="right" |data-get
|name of the reading to get the control state from FHEM
|'STATE'
|-
!align="right" |data-get-on
|value for PLAY status to get.
|'on'
|-
!align="right" |data-get-off
|value for STOP status to get.
|'off'
|-
!align="right" |data-volume
|name of the reading to get the volume value (0-100)
|volume
|-
|}

[[#Beispiel_playstream|Link zu einem Beispiel]]

<div id="popup">'''POPUP'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading where to get the alert value from
|'STATE'
|-
!align="right" |data-get-on
|value which trigger to open the dialog
|'on'
|-
!align="right" |data-off
|value which trigger to close the dialog
|'off'
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
|}

[[#Beispiel_popup|Link zu einem Beispiel]]

<div id="progress">'''PROGRESS'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-max
|maximal value to set or name of the reading which helds the max value
|100
|-
!align="right" |class
|novalue, percent
|
|-
|}

[[#Beispiel_progress|Link zu einem Beispiel]] (fehlt noch)

<div id="push">'''PUSH'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-set
| name of the reading to set on FHEM (<command> <device> <reading> <value>)
|
|-
!align="right" |data-set-on
|value to send when the the button get pressed oder ein Array zwischen dessen Werten umgeschaltet werden kann
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|'fa-circle'
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-doubleclick
|timeout to wait for a second click or touch. '0' disables the doubleclick feature.
|0
|-
!align="right" |data-countdown
|secondes for the countdown progress control
|autodetect from 'on-for-timer' command
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|
|-
!align="right" |data-off-background-color
|fix color attribute for OFF state or DEVICE:READING for dynamic setting
|#505050
|-
!align="right" |data-off-color
|fix color attribute for Off state or DEVICE:READING for dynamic setting
|#505050
|-
|}

'data-set-on' can also be an array of values to toggle between this values

[[#Beispiel_push|Link zu einem Beispiel]]

<div id="rotor">'''ROTOR'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" | data-delay
|time in millisecondes to wait until next list item get shown
|3500
|-
!align="right" |class
|fade, rotate
|''
|-
|}
Ohne Angabe von class erfolgt keine Animation.

[[#Beispiel_rotor|Link zu einem Beispiel]]

<div id="select">'''SELECT'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading that get the selected item of the list
|
|-
!align="right" |data-set
|name of the reading to set on Fhem (<command> <device> <reading> <value>)
|''
|-
!align="right" |data-list
|name of the reading to get a :-separated list from Fhem
|''
|-
!align="right" |data-items
|an array of fix items to show in the selection box (alternative if data-list is empty)
|
|-
!align="right" |data-alias
|an array of fix names to show only in the selection box as an alias to the real items
|
|-
!align="right" |data-cmd
|name of the command to send to Fhem (<command> <device> <reading> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-quote
|characters to enclose the send value
|
|-
!align="right" |class
|wider, w1x, w2x, w3x, large, big
|
|-
|}

[[#Beispiel_select|Link zu einem Beispiel]]

<div id="simplechart">'''SIMPLECHART'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-logdevice
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung)
|
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log)
|'-' means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int")
|''
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY
|10
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY
|30
|-
!align="right" |data-yticks
|value distance between Y tick lines
|5
|-
!align="right" |data-xticks
|time range between each X tick line (in Minuten)
|360 minutes
|-
!align="right" |data-daysago
|number of days back from now
|0
|-
!align="right" |data-caption
|name of the chart to show as text
|
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks
|
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
!align="right" |class
|fullsize, noticks
|
|-
|}

[[#Beispiel_simplechart|Link zu einem Beispiel]] (fehlt noch)

<code>data-logfile</code> kann man auch weglassen, dann greift der Defaultwert "-". Damit wird das neuste Logfile gelesen.

<div id="slider">'''SLIDER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|100
|-
!align="right" |data-step
|step value
|1
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-get-value
|RegEx to retrieve the value or part number of the space separated input to get the value
|'-1': all of the input
|-
!align="right" |data-set-value
|Format of the value to send to FHEM
|'$v': the value only
|-
!align="right" |data-width
|width for horizontal sliders
|'120px', for mini '60px'
|-
!align="right" |data-height
|height for vertical sliders
|'120px', for mini '60px'
|-
!align="right" |data-color
|color for quantity range
|'#aa6900'
|-
!align="right" |data-background-color
|color for range bar
|#404040
|-
!align="right" |class
|Aussehen/Ausrichtung
|
|-
|}

Für class steht mini, horizontal und negated (0 liegt oben) zur Verfügung.

[[#Beispiel_slider|Link zu einem Beispiel]]

<div id="switch">'''SWITCH'''</div>

{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-set
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-cmd
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-doubleclick
|timeout to wait for x millisecondes click or touch. '0' disables the doubleclick feature.
|'0'
|-
|}
Einstellung bei zwei Werten

{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get-on
|Wert, bei dem zum Status ON geschaltet werden soll.
|'on'
|-
!align="right" |data-get-off
|Wert, bei dem zum Status OFF geschaltet werden soll.
|'off'
|-
!align="right" |data-set-on
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf ON geschaltet wurde
|Wert von data-get-on
|-
!align="right" |data-set-off
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf OFF geschaltet wurde
|Wert von data-get-off
|-
!align="right" |data-icon
|Name des Font-Awesome Icon.
|'fa-lightbulb-o'
|-
!align="right" |data-background-icon
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-background-color
|Hintergrundfarbe beim Status on oder DEVICE:Reading bei dynamischen Einstellungen
|'#aa6900'
|-
!align="right" |data-off-background-color
|Hintergrundfarbe beim Status off oder DEVICE:Reading bei dynamischen Einstellungen
|'#505050'
|-
!align="right" |data-on-color
|Widget Farbe beim Status ON
|'#aa6900'
|-
!align="right" |data-off-color
|Widget Farbe beim Status OFF
|'#505050'
|-
|}

Einstellung bei mehreren Werten
{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-state
|Array mit Status Angaben
|
|-
!align="right" |data-set-state
|Array mit Status Angaben, die gesetzt werden sollen
|
|-
!align="right" |data-icons
|Array Icons zum zuvor definierten Status
|
|-
!align="right" |data-backgroundicons
|Array mit Hintergrund Icons zum zuvor definierten Status
|
|-
!align="right" |data-colors
|Array mit Farben zum zuvor definierten Status
|
|-
!align="right" |data-background-colors
|Array mit Hintergrund Farben zum zuvor definierten Status
|
|-
!align="right" |class : readonly
|Es wird nur der Status angezeigt und kann nicht geändert werden
|
|-
|}

<code>data-get-on</code> and <code>data-get-off</code> accept also RegEx values. e.g. data-get-on="[0-9]{1,3}|on" means set switch on if STATE is a numeric value or 'on'. data-get-off="!on" means accept all but the data-get-on value (negation)

[[#Beispiel_switch|Link zu einem Beispiel]]

=== Widget SYMBOL ===
<div id="symbol">'''SYMBOL'''</div>

Mit dem SYMBOL Widget kann der STATUS eines Device dargestellt werden. Dabei kann das angezeigte Symbol und dessen Farbe bestimmt werden. Wie bei anderen Widgets kann das Symbol und die Farbe vom State abhängig konfiguriert werden. Das SYMBOL-Widget dient nur zur Anzeige eines STATUS, es besitzt kein Möglichkeit der Interaktion.

Neben den '''allgemeine Attribute''' besitzt das SYMBOL-Widget die nachfolgenden Attribute.

dual state notation
{| class="wikitable"
! HTML Attribut !! Beschreibung !! Default Wert
|-
| data-get || Name des Reading, was gelesen werden soll || 'STATE'
|}

Einstellung bei zwei Werten
{| class="wikitable"
!HTML-Attribut !! Beschreibung !! Default-Wert
|-
|'''data-get-on''' ||Wert für on ||'open'
|-
|'''data-get-off''' ||Wert für off ||'closed'
|-
|'''data-icon''' ||Name des Symbols ||'ftui-window'
|-
|'''data-background-icon''' ||Hintergrundsymbol ||'''leer'''
|-
|'''data-on-background-color''' ||Farbe für ON-Zustand. ||'#aa6900'
|-
|'''data-off-background-color''' ||Farbe für OFF-Zustand. ||'#505050'
|-
|'''data-on-color''' ||Farbe für ON-Zustand. ||'#aa6900'
|-
|'''data-off-color''' ||Farbe für OFF-Zustand. ||'#505050'
|-
|}

Einstellung bei mehreren Werten

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-states
|Array für states.
|
|-
!align="right" |data-icons
|Array mit Icons zu data-states Array
|
|-
!align="right" |data-background-icons
|Array mit Icons zu data-states Array
|
|-
!align="right" |data-colors
|Array mit Farben zu data-states aArray
|''
|-
!align="right" |data-background-colors
|Array mit Hintergrundfarben zu data-states array
|''
|-
|}

data-get-on,data-get-off and data-states accept also RegEx values. The value for one icon can also contain an additional animatation CSS name, e.g. "fa-exclamation-triangle fa-blink" for a blinking Symbol

[[#Beispiel_symbol|Link zu einem Beispiel]]

=== Widget THERMOSTAT===
<div id="thermostat">'''THERMOSTAT'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'desired-temp'
|-
!align="right" |data-temp
|reading for measured temperature of thermostates
|'measured-temp'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|'desired-temp'
|-
!align="right" |data-valve
|reading for valve position of thermostates
|
|-
!align="right" |data-min
|minimal value to set
| 10
|-
!align="right" |data-max
|maximal value to set
| 30
|-
!align="right" |data-minColor
|Farbe des Keises für Min
| #4477FF
|-
!align="right" |data-maxColor
|Farbe des Kreises für Max, zwischen Min und Max wird linear interpoliert
| #FF0000
|-
!align="right" |data-step
|step size for value adjustment e.g. 0.5
|1
|-
!align="right" |data-bgColor
|Die Farbe der Kreises zwischen den ticks
|'transparent'
|-
!align="right" |data-fgColor
|Die Farbe der zahl im Kreismittelpunkt
|#bbbbbb
|-
!align="right" |data-tkColor
|Die Farbe der ticks
|#696969
|-
|-
!align="right" |data-angleOffset
|Start der ticks im Kreis (in Winkelgraden, 0 = oben)
| -120
|-
!align="right" |data-angleArc
|Bereich der ticks im Kreis (in Winkelgraden)
|240
|-
!align="right" |class
|big, readonly
|
|-
|}

[[#Beispiel_thermostat|Link zu einem Beispiel]]

<div id="volume">'''VOLUME'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|''
|-
!align="rigth" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|70
|-
!align="right" |data-get-value
|RegEx to retrieve the value or part number of the space separated input to get the value
|'-1': all of the input
|-
!align="right" |data-set-value
|Format of the value to send to FHEM
|'$v': the value only
|-
!align="right" |data-tickstep
|distance between ticks
|4|20
|-
!align="right" |data-unit
|add a unit after the desired value.
|
|-
!align="right" |class
|mini, small, big, bigger, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back, readonly
|
|-
|}

[[#Beispiel_volume|Link zu einem Beispiel]] (fehlt noch)

<div id="weather">'''WEATHER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get the weather literal from Fhem
|'STATE'
|-
!align="right" |data-imageset
|collection of images to display current weather situation. Possible values: 'meteocons', 'kleinklima'
|'meteocons'
|-
!align="right" |data-image-path
|path to the images of the selected imageset
|/images/weather/
|-
|}

[[#Beispiel_weather|Link zu einem Beispiel]]

== Widgets -- Beispiele ==

<div id="Beispiel_chart">'''Chart'''</div>

Display a chart with similar capabilities as the FHEM plots

<pre>
<div data-type="chart"
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'
data-ptype='["lines","histeps","histeps","cubic"]'
data-uaxis='["primary","secondary","secondary","primary"]'
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="mm"
data-ytext_sec="Rain (mm)"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="2013-08-13T00:00:00"
data-daysago_end="2013-08-14T00:00:00"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</pre>

[[Datei:chart_tabletUI.png]]

<div id="Beispiel_circlemenu">'''Circlemenu'''</div>

Cover a lot of other button behind one single button

<pre>
<div class="left">
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="push" data-icon="fa-wrench"></div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -6"
data-icon="">-6</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -2"
data-icon="">-2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level 0"
data-icon="">0</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +3"
data-icon="">2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +9"
data-icon="">9</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +C"
data-icon="">12</div></li>
</ul>
</div>
<div data-type="label" class="cell">Woofer</div>
</div>
</pre>

[[Datei:circlemenu_tabletUI.png]]

<div id="Beispiel_dimmer">'''Dimmer'''</div>

Dimmer Widget Beispiel für Philips Hue

Minimalvariante
<pre>
<div data-type="dimmer" data-device="HUEDevice1"
data-get-on="!off" data-get-off="off"
data-set="pct"</div>
</pre>

Mit Anzeige der Dimstufe
<pre>
<div data-type="dimmer" data-device="HUEDevice1"
data-get="onoff"
data-get-on="1" data-get-off="0"
data-set=""
data-set-on="on" data-set-off="off"
data-dim="pct">
</div>
</pre>

Dimmer Widget für MilightDevice

<pre>
<div data-type="dimmer"
data-device="SonstWas"
data-get="brightness"
data-get-off="0"
data-get-on="[1-9][0-9]*"
data-set-on="on"
data-set-off="off"
data-dim="dim"
data-min="0"
data-max="100"
></div>
</pre>

<div id="Beispiel_homestatus">'''Homestatus'''</div>

Beispiel rechts im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
data-get-on='["1","2","3","4"]'
data-alias='["Home","Night","Away","Holiday"]'
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase"]'>
</div>
</pre>

Beispiel links im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
data-get-on='["home","asleep","absent","gone","gotosleep"]'
data-alias='["Home","Night","Away","Holiday","Retire"]'
data-icons='["fa-fire","fa-film","fa-plus","fa-car","fa-tint"]'
data-version='residents'>
</div>
</pre>

[[Datei:homestatus_tabletUI.png]]

<div id="Beispiel_image">'''Image'''</div>

Erzeugt ein Widget mit einem Bild aus dem www, das alle 5 Sekunden aktualisiert wird (hier eine Wetterkarte vom DWD).

<pre>
<div data-type="image"
data-size="80%"
data-url="http://www.dwd.de/wundk/wetter/de/Deutschland.jpg"
</div>
</pre>

[[Datei:image_tabletUI.jpg]]

Example for how to add an image to the dashboard which its URL is delivered by a Fhem module like PROPLANTA:

<pre>
<div data-type="image" data-device="Wetter1"
data-get="fc0_weatherDayIcon"
data-size="40px"
class="cell">
</div>
</pre>

<div id="Beispiel_label">'''Label'''</div>

Example for HM-WDS40-TH-I Funk-Temperatur-/Feuchtesensor innen

<pre>
STATE T: 20.0 H: 61
</pre>
<pre>
<div data-type="label" data-device="THSensorWZ"
data-part="2" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ" data-part="4"
data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>

But the same result can reached by getting single readings:
<pre>
humidity 58
temperature 20.1
</pre>

<pre>
<div data-type="label" data-device="THSensorWZ"
data-get="temperature" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ"
data-get="humidity" data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>

Example for how to influence the color of the label according to value limits
<pre>
<div data-type="label"
data-device="OutTemp"
data-limits='[-73,10,23]'
data-colors='["#6699FF","#AA6900","#FF0000"]'
data-unit="%B0C%0A"
class="cell big">
</div>
</pre>

Example for how to create a widget for shutter via push: show state and set up/down
<pre>
<div data-type="switch"
data-device="wzRollo"
data-get-on="up"
data-get-off="down"
data-icon="fa-bars"
class="cell" >
</div>
<div data-type="label"
class="cell">Rollo</div>
</pre>

Example for how to create a label for a time value in short format with usage of RegEx.

<pre>
<div data-type="label"
data-device="dummy1"
data-part="(\d\d\.\d\d\.).*"
class="cell">
</div>
</pre>

Example for how to show two labels in one line.

<pre>
<div class="">
<div type="label" device="OnSunrise" class="inline"></div>bis
<div type="label" device="OnSunset" class="inline"></div>
</div>
</pre>

Beispiel für die Anzeige des UV-Indexes und der Abhängigkeit der anzuzeigenden Farbe.

<pre>
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
data-get="fc0_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc0_date"></div>
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
data-get="fc1_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc1_date"></div>
</pre>

[[Datei:label_tabletUI.jpg]]

Beispiel für die Anzeige des Labels als Icon.
<pre>
<div class="cell">
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon round bg-red cell"></div>
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon square bg-blue cell"></div>
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon squareborder cell"></div>
<div data-type="label" data-device="PowerAV_Sw" data-colors='["red","green"]' data-limits='["off","on"]' class="icon round bg-limit cell"></div>
</div>
</pre>

[[Datei:Label_tabletUI_icon.png]]

<div id="Beispiel_pagetab">'''Pagetab'''</div>

Example for a tab menu to switch smoothly between multiple pages. Multiple pagetabs in a template file: menu.html

<pre>
<html>
<body>
<header>MENU</header>
<div class="cell">
<div data-type="pagetab" data-url="index.html" data-icon="fa-home" class="cell"></div>
<div data-type="pagetab" data-url="index_2.html" data-icon="fa-sliders" class="cell"></div>
<div data-type="pagetab" data-url="index_3.html" data-icon="fa-music" class="cell"></div>
<div data-type="pagetab" data-url="index_4.html" data-icon="fa-hotel" class="cell"></div>
<div data-type="pagetab" data-url="index_5.html" data-icon="fa-music" class="cell"></div>
<div data-type="pagetab" data-url="index_6.html" data-icon="fa-database" class="cell"></div>
<div data-type="pagetab" data-url="index_7.html" data-icon="fa-fax" class="cell"></div>
</div>
</body>
</html>
</pre>

<div id="Beispiel_playstream">'''Playstream'''</div>

Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.

<pre>
<div data-type="playstream" data-url="http://radioeins.de/stream"></div>
<div data-type="label" class="darker">Radio eins</div>
</pre>

<div id="Beispiel_push">'''Push'''</div>

Example for how to create a push button widget to trigger all devices on:

<pre>
<div data-type="push"
data-device="LightAll"
data-cmd="trigger"
data-set="on"
class="cell">
</div>
</pre>

Beispiel für zwei horizontale Buttons:

<pre>
<div class="cell">
<div class="doublebox-h">
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push1.png]]

Beispiel für zwei quadratische vertikale Buttons:

<pre>
<div class="cell">
<div class="doublebox-v">
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push2.png]]

<div id="Beispiel_rotor">'''Rotor'''</div>

Example for a rotor widget, which switches between to days of weather forecast

<pre>
<div data-type="rotor" class="fade">
<ul>
<li>
<div data-type="label" class="darker">Heute</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
<li>
<div data-type="label" class="darker">Morgen</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
</ul>
</div>
</pre>

<div id="Beispiel_select">'''Select'''</div>

Erzeugt zwei Comboboxen zur Auswahl des Eingang eines 2-Zonen-AV-Receivers. Die Liste für Zone2 ist fest, die Liste für Zone1 wird von Fhem übergeben.

<pre>
<div class="cell wider">
<div data-type="label" class="inline wider">Zone2</div>
<div data-type="select" data-device="AvReceiverZ2" data-items='["Airplay","Webradio","BD/DVD","PHONO"]' data-get="input" data-set="input" class="cell w2x" ></div>
<div></div>
<div data-type="label" class="inline">Zone1</div>
<div data-type="select" data-device="AvReceiver" data-list="inputs" data-get="input" data-set="input" class="cell w2x" ></div>
</div>
</pre>

[[Datei:select_tabeltUI.png]]

<div id="Beispiel_slider">'''Slider'''</div>

Slider mit einstellbaren Werten von 10 bis 90:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</pre>

[[Datei:slider_tabletUI.png]]

Horizontal angeordneter Slider:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="0"
data-max="100"
class="horizontal"
</div>
</pre>

[[Datei:slider_tabletUI2.jpg]]

<div id="Beispiel_switch">'''Switch'''</div>

Schalter. Usage of RegEx pattern for state request:

<pre>
<div data-type="switch" class="cell"
data-device="MILIGHT_Zone1_Wohnzimmer"
data-get-on="on.*"
data-get-off="off"></div>
</pre>

[[Datei:switch.png]]

Beispiel für eine Gruppe von Schaltern, um zwischen vier verschiedenen Werten eines device umzuschalten:

<pre>
<div class="cell left">
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert1).)*"
data-get-on="Wert1" class="cell" ></div>
<div data-type="label" class="cell">Wert1</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert2).)*"
data-get-on="Wert2" class="cell" ></div>
<div data-type="label" class="cell">Wert2</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert3).)*"
data-get-on="Wert3" class="cell" ></div>
<div data-type="label" class="cell">Wert3</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert4).)*"
data-get-on="Wert4" class="cell" ></div>
<div data-type="label" class="cell">Wert4</div>
</div>
</pre>

[[Datei:switch4.png]]

<div id="Beispiel_symbol">'''Symbol'''</div>

Example for a tristate icon

<pre>
<div data-type="symbol" data-device="dummy1"
data-get-on='["wert1","wert2","wert3"]'
data-icons='["fa-arrow-up","fa-user","fa-arrow-down"]'
data-on-colors='["SeaGreen","SlateBlue","IndianRed"]'
class="cell big">
</div>
</pre>

Example for a tristate icon with blink and spin animation

<pre>
<div data-type="symbol" data-device="dummy1"
data-icons='["fa-exclamation-triangle fa-blink","fa-exclamation-circle","fa-cog fa-spin"]'
data-on-colors='["Crimson","GoldenRod","SeaGreen"]'
data-get-on='["Wert1","Wert2","Wert3"]' >
</div>
</pre>

Example for a battery level control with RegEx

<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
data-icons='["oa-measure_battery_100","oa-measure_battery_75","oa-measure_battery_50","oa-measure_battery_25","oa-measure_battery_0"]'
data-get-on='["3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]'
data-on-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'>
</div>
</pre>

Example for a battery level control with greater-equal compare and 90° rotated symbols

<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'
data-get-on='["0","2","2.4","2.7","3.0"]'
data-on-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'>
</div>
</pre>

<div id="Beispiel_thermostat">'''Thermostat'''</div>

Configure as data-device='...' that item which delivers temp and desired-temp as reading.

Default parameters are:
<pre>
data-get="desired-temp" data-temp="measured-temp" data-set="desired-temp"
</pre>

Therefor for HomaMatic HM-CC-RT-DN this is sufficient.

<pre>
<div data-type="thermostat" data-device='KH_Clima' class="cell"></div>
</pre>

The long format looks like this:

<pre>
<div data-type="thermostat"
data-device="KH_Clima"
data-get="desired-temp"
data-temp="measured-temp"
class="cell">
</div>
</pre>

Example for MAX!:
<pre>
<div data-type="thermostat" data-device="HZ_Tuer"
data-valve="valveposition"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature"
class="cell">
</div>
</pre>

The wigets will show the valve value only in case of a valid data-valve attribute. The default for data-valve ist null. That means, a empty data-valve attribute hides the valve label for the widget.

[[Datei:thermostat.png]]

<div id="Beispiel_weather">'''Weather'''</div>

Das Widget fügt ein dem Wetter entsprechendes Bild ein. Die Daten können durch Fhem-Module wie [[PROPLANTA]], [[OPENWEATHER]] und [[Weather]] bereitgestellt werden.
Add 'big' or 'bigger' to CSS class to get a bigger weather icon.

Beispiel:
<pre>
<div data-type="weather"
data-device="Weather"
data-get="fc0_weatherDay"
class="cell big">
</div>
</pre>

[[Datei:weather.png]]

== Icon-Konfiguration ==

* Eingebaute Icons: Diese haben das ftui-Präfix. Zurzeit sind folgende verfügbar: ftui-window, ftui-door

* Mehr als 500 Icons von "http://fortawesome.github.io/Font-Awesome/icons" verfügbar. Einfach den Icon-Namen angeben (Präfix "fa-" nicht vergessen, Z.B. <code>data-icon="fa-volume-up"</code>

* Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.
<pre>
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
</pre>

Diese font icons haben das Präfix 'fs-' bzw. 'oa-'.

Beispiel bei einem Schalter:
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>

Und so als großes Symbol:
<pre>
<div data-type="symbol" data-device='dummy1'
data-icon="oa-status_frost"
data-on-color="#bb3232"
data-get-on="on"
data-get-off="!on"
class="bigger">
</div>
</pre>

Die Icons kann man auch etwas dicker darstellen mit den Zusatz bold: <code>data-icon="oa-secur_locked bold"</code>

Die Namen der verfügbaren Icons findet man auch in den CSS Files (openautomation.css / fhemSVG.css)

== Spezial ==
Folgender Befehl setzt einen direkten Befehl an Fhem ab (<code>set dummy1 off</code>):
<pre>
<div onclick="setFhemStatus('set dummy1 off')">All off!</div>
</pre>

== FAQ ==
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM_Tablet_UI/FAQ|FHEM Tablet UI FAQ]] zusammengestellt.

== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* [http://forum.fhem.de/index.php/topic,37378.0.html User-Demos]
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]

[[Kategorie:FHEM Frontends]]

FHEM Tablet UI

2016-03-16T18:46:01Z

Svenson08: /* Widgets LEVEL */

{{Infobox Modul
|ModPurpose=Oberfläche für Fhem
|ModType=x
|ModFTopic=34233
|ModForumArea=Frontends
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
[[Datei:tablet_ui.png|200px|thumb|right|Fhem Tablet UI]]
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in Fhem integrierten Geräten. Zahlreiche Widgets können sehr flexibel und leicht per HTML Code konfiguriert werden.

In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben.

{{Todo|alle Widgets hier übernehmen, Übersetzung, weitere Beispiele aus dem Forum einfügen (evtl. mit Link!?)}}

== Voraussetzungen ==
Das User Interface hat sehr wenige Anforderungen für den Betrieb. Es benötigt <u>keine</u> zusätzliche Frameworks, wie z.B. PHP oder MySQL.

Voraussetzungen ist eine Fhem Installation mit HTTPSRV Modul. Das UI kann mit den gängigen Browsern Betriebssystem unabhängig genutzt werden oder mit dem Webviewcontrol.
Das Interface wird dabei in dem FHEM eigenen Webserver ausgeführt. Mit wenigen Anpassungen ist es auch möglich das UI auf anderen Webservern (Apache, u.a.) zu betreiben, dann kann FHEM und UI auch auf getrennten Systemen ausgeführt werden.

== Installation ==
* Im Befehls-Eingabefeld eingeben: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* Im Befehls-Eingabefeld eingeben: <code>define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI</code>
* Im Verzeichnis ./fhem/www/tablet die Datei index-example.html in index.html umbenennen oder eine neue index.html erzeugen und diese index.html wie nachfolgend beschrieben editieren.

Das UI ist über den Link "Tablet-UI" auf der Fhem-Hauptseite oder durch Direktaufruf der URL "<nowiki>http://<Fhem-url>:8083/fhem/tablet/index.html</nowiki>" zu erreichen.

Hinweise zu einer manuellen Installation und weitere Infos sind auf der Projektseite https://github.com/knowthelist/fhem-tablet-ui zu finden.

== Update ==
* Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von: <code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* Update des UI durch Eingabe von: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Über
<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
kann seit dem 24.12.2015 die URL zum normalen Updatebefehl von FHEM hinzugefügt werden. Mit einen "update check" sieht man dann gleich alle Updates aus beiden "Welten".

== Weitere Widgets ==

=== Widgets for Fhem-tablet-ui ===
Zusätzlich zu den bei der Installation des Tablet UI direkt zur Verfügung stehenden Widgets, gibt es eine weitere Widget-Quelle von nesges unter https://github.com/nesges/Widgets-for-fhem-tablet-ui. Die Widgets aus dieser Quelle müssen für eine Nutzung separat installiert werden.

Dazu folgenden Befehl in die Fhem-Befehlszeile eingeben: <code><nowiki>update all https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt</nowiki></code>.

Näheres zur Installation unter [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/Installation Wiki: Installation].

Die Dokumentation der einzelnen Widgets befindet sich ebenfalls [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki im Github-Wiki].

== Konfiguration ==
'''META-Parameter'''

Das Tablet UI lässt sich über die META-Parameter konfigurieren. Mit den meisten META-Parametern kann das verhalten des UI beeinflusst werden. Diese Parameter befinden sich in der jeweiligen '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>'''. Nachfolgend sind die verschiedenen Konfigurationsparameter aufgeführt. Die Parameter sind immer gleich aufgebaut.

:<code><meta name="<META-Parameter>" content="<Wert>"></code>

{| class="wikitable"
|-
! META-Parameter !! Wert / Beispiel !! Erklärung
|-
| longpoll || 1 oder 0 || Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh.
|-
| gridster_disable || 1 oder 0 || Drag&Drop der Gridster-Elemente auf der Seite deaktivieren.
|-
| toast || 1 oder 0 || Toast messages deaktivieren
|-
| fhemweb_url || http://meinFhemServer:8083/fhem || Wird benötigt wenn der Webserver des TabletUI nicht auf dem FHEM Server läuft.
|-
| widget_margin || 1 bis 9999 || Abstände der Gridsterelemente verändern.
|-
| widget_base_width || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.
|-
| widget_base_height || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.
|}

'''CSS-Styles'''

Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt [[#CSS Class description|CSS Class description]] oder [[#Positioning|Positioning]] aufgeführt. Es besteht auch die Möglichkeit eine eigene CSS Datei zu erstellen und darüber Änderungen am aussehen des UI vorzunehmen. Die eigenen CSS Datei würde bei einem Update unverändert bleiben. Daher ist abzuraten ein CSS Datei die mit dem UI Update verteilt wird zu modifizieren. Die eigene CSS Datei ist unter '''/fhem/tablet/css''' mit dem Namen '''fhem-tablet-ui-user.css''' zu finden. Sollte diese nicht vorhanden sein kann die Datei manuell erstellt werden.
Wird keine eigene CSS-Datei verwendet empfiehlt es sich den folgenden Eintrag im <head> der jeweiligen .html Datei zu entfernen, bzw. in Kommentar gesetzt werden um Probleme beim Laden der Seite zu verhindern.

:<code><link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /></code>

== Farbe ==
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form oder als RGB-Wert anzugeben. Zum Beispiel: Hex: #A3CFA3 RBG: rgb(163, 207, 163).

Knallige Farben wie #ff0000 für Rot oder #00ff00 für Grün sollten vermieden werden. Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.

Hilfreich bei der Suche nach den Farbwerten ist der color picker: http://www.w3schools.com/tags/ref_colorpicker.asp

== CSS Class description ==

Not all widgets support all classes

* readonly : changing of state is not allowed
* wider : 25px extra space for the widget to the top
* narrow : shorter distant to the widget above
* w1x, w2x, w3x : set the widget to a fix width: 1x, 2x, 3x width
* mini : lowest diameter for volume widget
* small : font 80% size (label), small diameter for volume widget
* medium : font 120% size
* large : font 150% size
* big : font 200% size
* bigplus : font 270% size
* bigger : font 320% size
* bigger.thin : font 450% size
* grande : font 600% size
* gigantic: font 144px size + 120px line-height
* thin : font thin
* darker : forecolor in gray
* hue-tick : draw ticks in color range
* hue-front : draw handle in color range
* hue-back : draw background in color range
* dim-tick : draw ticks in brightness range
* dim-front : draw handle in brightness range
* dim-back : draw background in brightness range
* red : foreground color red
* green : foreground color green
* blue : foreground color blue
* doublebox-v : container to place 2 small widgets (e.g. switch) one above the other
* doublebox-h : container to place 2 small widgets (e.g. switch) side by side
* timestamp : deliver the date time for the reading instead the value
* inline : positioning elements in a row, no line break
* top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
* left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
* right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
* blink : blink animatation for label or symbol widget
* verticalLine : Vertikale Line am rechten Rand

== Positioning ==

*container : new box or new row
*col-x-y : new column with x/y of width (col-1-3,col-2-3,col-1-2,col-1-4,col-1-8,col-1-5,col-2-5,col-3-5,col-4-5)
*inline : positioning elements in a row, no line break
*top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
*left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
*right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
*top-narrow : -15px closer on top (top-narrow-2x -> -30px; top-narrow-10 -> -10px)
*centered : horizontal centered
*left-align : align text left
*left : floating left
*right-align : align text right
*right : floating right
*wider : 15px extra space for the widget all around
*narrow : shorter distant to the widget above
*fullsize : 100% in width and height

== Widgets -- Konfiguration ==

Teilweise dokumentierte Widgets:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/button button]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen Fhem-Befehl absetzen kann.
* [[#chart|chart]]: chart with similar capabilities as the FHEM plots
* checkbox:
* [[#circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clicksound clicksound]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clock clock]: Das Widget "clock" stellt eine einfach Uhr zur verfügung.
* colorwheel:
* daytimepicker:
* departure:
* [[#dimmer|dimmer]]: toogle button with a setter for on value
* eventmonitor:
* highchart:
* [[#homestatus|homestatus]]: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]]: Widget zum Einbinden externer Inhalte in einem Iframe.
* [[#image|image]]: insert an image, the URL is given by a reading
* input:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/klimatrend klimatrend]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt.
* Knob:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* [[#label|label]]: STATE als Text anzeigen
* [[#level|level]]: vertical/horizontal bar to show values between min/max value
* link:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/multistatebutton multistatebutton]: Variante des push-Widgets das den set-Befehl abhängig vom gelesenen Status ändert.
* [[#pagetab|pagetab]]: Element to smoothly exchange the whole page with another page
* pagebutton:
* [[#playstream|playstream]]: Abspielen eines Webradio-Streams per Button
* [[#popup|popup]]: a popup dialog which open on click on another widget
* [[#progress|progress]]: round symbolic display for percent values
* [[#push|push]]: send any command to Fhem e.g. up / down
* range:
* readingsgroup:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads
* [[#rotor|rotor]]: Umschalten von zwei oder mehr Widgets an einer Position
* [[#select|select]]: Combobox to provide a list for selection
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: zum anzeigen und einstellen einer Uhrzeit.
* [[#simplechart|simplechart]]: simple XY line chart for one value (reads directly from Fhem log file)
* [[#slider|slider]]: vertical slider to select between min/max value
* spinner:
* swiper:
* [[#switch|switch]]: Toggle any command to Fhem (e.g. on / off)
* [[#symbol|symbol]]: State als Symbol darstellen (z.B. Fenster offen)
* [[#thermostat|thermostat]]: dial for heater thermostates to set desired value and show current value
* [[#volume|volume]]: dial to set a single value (e.g. 0-60)
* [[#weather|weather]]: insert an icon or image, represending a weather literal
* [https://github.com/svenson08/ftui-weekdaytimer-widget weekdaytimer]: Visualisierung des [[WeekdayTimer]] Modul
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/wind_direction wind_direction]: Zeigt die Windrichtung auf einer Windrose an.

Ein Demo der Widgets findet ihr [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Hier].
----------------------------------

Für alle Widgets gilt:
{| class="wikitable"
|+allgemeine Attribute
|-
!align="right" |data-type
|Widget-Typ
|-
!align="right" |data-device
|Fhem-Name des Gerätes (mit dem Befehl 'list' bekommt man im Fhem die kpl. Liste)
|-
!align="right" |class
|CSS-Klassen für Aussehen und Formatierung des Widgets
|-
|}

{| class="wikitable"
|+Daten Empfangen
|-
!align="right" |data-get
|Reading Name
|-
!align="right" |data-get-on
|Wert für den Status on
|-
!align="right" |data-get-off
|Wert für den Status off
|-
|}

{| class="wikitable"
|+Daten Senden
|-
!align="right" |data-set
|Reading Name
|-
!align="right" |data-set-on
|Wert für den Status on
|-
!align="right" |data-set-off
|Wert für den Status off
|-
|}

<div id="chart">'''CHART'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-logdevice
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung) or array of names if more than one graph shall be displayed
|-
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log) or or array of names if more than one graph shall be displayed
|'-' or omitting this data means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int") or or array of columnspecs if more than one graph shall be displayed
|-
|-
!align="right" |data-style
|name of the graph style to be used (e.g. 'SVGplot l0' or 'ftui l0dash') or or array of styles if more than one graph shall be displayed using different stlyes. The standard fhem plot styles can be used furthermore there are some more predefined styles existing (details see css file). Own styles can be specified e.g. in the fhem-table-ui-user.css file.
|-
|-
!align="right" |data-ptype
|name of the plot type (e.g. 'lines' or 'fa-cog') or or array of plottypes if more than one graph shall be displayed. All fhem plot styles are supported. Additionally it is possible to specify symbols (currently supported are font awesome ('fa-...'), open automation ('oa-...') and fhem symbols ('fs-...'))
|'lines'
|-
!align="right" |data-uaxis
|name of the axis to be used ('primary' or 'secondary') or or array of axis' to be used if more than one graph shall be displayed. The 'primary' axis is labelled on the left side, the 'secondary' axis is labelled on the right side
|'primary'
|-
!align="right" |data-legend
|caption of the graph (used in the legend and at the cursor) or an array of legend texts if more than one graph shall be displayed.
|-
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|10
|-
!align="right" |data-minvalue_sec
|min Y value to Show or an array of values for dynamic minY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|30
|-
!align="right" |data-maxvalue_sec
|max Y value to Show or an array of values for dynamic maxY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-yticks
|value distance between Y tick lines (related to primary axis). A value of 'auto' means that the value is calculated from the data displayed dynamically.
|'auto'
|-
!align="right" |data-xticks
|time range between each X tick lines (in minutes). A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-daysago_start
|number of days back from now for the start of the plot (0 means the plot starts from today 0:00). Additionally the x-axis start value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'.
|0
|-
!align="right" |data-daysago_end
|number of days back from now for the end of the plot (-1 means the plot ends today 24:00). Additionally the x-axis end value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'.
|-1
|-
!align="right" |data-nofulldays
|switch to activate/deactivate rounding of the xaxis start and end values to full days ('true' or 'false')
|'false'
|-
!align="right" |data-ytext
|text to be shown besides the primary y axis.
|-
|-
!align="right" |data-ytext_sec
|text to be shown besides the secondary y axis.
|-
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks for primary y axis.
|-
|-
!align="right" |data-crosshair
|switch to activate/deactivate the crosshair cursor ('true' or 'false')
|'false'
|-
!align="right" |data-cursorgroup
|number to define coupling of the crosshair cursor. The cursors of all charts having the same number are coupled and move together.
|-
|-
!align="right" |data-scrollgroup
|number to define coupling of the scrolling (shift and zoom). All charts having the same number are scrolled (shifted and zoomed) together.
|-
|-
!align="right" |data-showlegend
|switch to activate/deactivate the initial display of the legend window ('true' or 'false')
|'false'
|-
!align="right" |data-yunit_sec
|unit of the value to show beside of each Y ticks for secondary y axis.
|-
|-
!align="right" |data-width
|fixed size for width (in % or px)
|-
|-
!align="right" |data-height
|fixed size for height (in % or px)
|-
|-
!align="right" |class
|fullsize, noticks, nobuttons
|
|-
|}

<code>data-logfile</code> can be omitted in this case the default value "-" will be used. This means that the current logfile is going to be used.

There are several buttons that control the dynamic behaviour of the chart. The <-, ->, + and - buttons shift and zoom the displayed data. The "legend" and "cursor" buttons are switching on and off the display of the legend window and the crosshair cursor respectively.

When the legend window is displayed, a click on the legend text shows/hides the respective graph. The legend window can be dragged to other positions on desktop browsers (currently not yet working for iOS and Android).

The crosshair cursor currently only works dynamically on desktop browsers. On iOS and Android you have to tap on the screen to set the cursor to a new position.

There is a number of css styles that control the visible appearance of the chart. The following classes are supported:

{| class="wikitable"
!CSS class name
!Description
|-
!.chart-background
|Color etc. for the chart background
|-
!.text.axes
|Font and color for the chart axes
|-
!.buttons
|Size and color for the buttons (shift etc.)
|-
!.gridlines
|Size and color for gridlines generally
|-
!.xaxis
|Font, size and color for xaxis
|-
!.yaxis
|Font, size and color for yaxis
|-
!.xticks
|Font, size and color for xticks
|-
!.yticks
|Font, size and color for yticks
|-
!.crosshair
|Font, size and color (foreground/background) for the crosshair cursor
|-
!.caption
|Font, size and color for text buttons for legend and cursor switching
|-
!.legend
|Font, size and background color for legend window
|-
|-
|}

[[#Beispiel_chart|Link zu einem Beispiel]]

<div id="circlemenu">'''CIRCLEMENU'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-item-diameter
|diameter of the circle
|52
|-
!align="right" |data-circle-radius
|radius of each item, in pixel
|70
|-
!align="right" |data-direction
|position of the items in relation to the center
|'full'
|-
!align="right" |data-close-after
|closing time of the circle-menu
|(item-count + 1s) or a minimum of 4s
|-
!align="right" |class
|keepopen
|
|-
|}

Optionen für data-direction: top | right | bottom | left | top-right | top-left | bottom-right | bottom-left | top-half | right-half | bottom-half | left-half | full | vertical | horizontal

[[#Beispiel_circlemenu|Link zu einem Beispiel]]

<div id="dimmer">'''DIMMER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-get-on
|value for ON status to get
|'on'
|-
!align="right" |data-get-off
|value for OFF status to get
|'off'
|-
!align="right" |data-set
|(<command> <device> <reading> <value>)
|
|-
!align="right" |data-set-on
|value for ON status to set
|value of data-get-on
|-
!align="right" |data-set-off
|value for OFF status to set
|value of data-get-off
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-dim
|name of the reading responsible for dim (<command> <device> <reading> <value>)
|value of data-get-on
|-
!align="right" |data-icon
|name of the font-awesome icon
|fa-lightbulb-o
|-
|}

[[#Beispiel_dimmer|Link zu einem Beispiel]]

<div id="homestatus">'''HOMESTATUS'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-get-on
|array of states using for get
|['1','2','3','4']
|-
!align="right" |data-set-on
|array of states using for set.
|value of data-get-on
|-
!align="right" |data-alias
|array of fix names to show only in the UI as an alias to the real states
|''
|-
!align="right" |data-icons
|array of icons related to the data-get-on array
|''
|-
!align="right" |data-version
|name of the status model e.g. 'residents','roommate','guest'
|(default NULL)
|-
|}

The default version has 4 states: '1','2','3','4' The default aliases are 'Home','Night','Away','Holiday'; data-version='residents' or 'roommate' or 'guest' has 5 states ('home','asleep','absent','gone','gotosleep') They have these aliases 'Home','Night','Away','Holiday','Retire'

[[#Beispiel_homestatus|Link zu einem Beispiel]]

<div id="image">'''IMAGE'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get an URL from Fhem
|'STATE'
|-
!align="right" |data-size
|width of the image in px or %, the height scales proportionally
|50%
|-
!align="right" |data-url
|URL of the image to show (use data-url or data-device + data-get, not both)
|
|-
!align="right" |data-refresh
|Interval in seconds for image refresh for usage together with data-url
|900
|-
|}

[[#Beispiel_image|Link zu einem Beispiel]]

=== Widgets LABEL ===
<div id="label">'''LABEL'''</div>

Mit dem LABEL Widget kann der STATUS eines Device in Textform angezeigt werden. Dabei kann das die Farbe des Anzeigetext abhängig von dessen Wert festgelegt werden.

Neben den '''allgemeine Attribute''' besitzt das LABEL-Widget die nachfolgenden Attribute.

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|Name des Readings in FHEM
|
|-
!align="right" |data-fix
|Eine bestimmte Anzahl an Dezimalstellen
|'-1' -> non-numeric
|-
!align="right" |data-part
|split position of the space separated value to show or an RegEx
|
|-
!align="right" |data-color
| fix color attribute or DEVICE:READING for dynamic setting of label color
| ''
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits-get
|name of the DEVICE:Reading to colorize the label
|data-device:data-get
|-
!align="right" |data-limits
|an array of numeric values to affect the colour of the Label
|
|-
!align="right" |data-limits-part
|part number of the space separated value to show or a RegEx
|'-1' -> all
|-
!align="right" |data-unit
|add a unit after a numeric value. use encoded strings e.g. "%B0C%0A"
|
|-
!align="right" |data-substitution
|regex-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected
|
|-
!align="right" |data-hide
|string to compare with current value. hide element when it's value equals data-hide
|
|-
!align="right" |data-hideparents
|jquery selector to hide element's parents too
|
|-
!align="right" |class
|small, large, big, bigger, thin, red, green, blue, darker, timestamp, w1x, w2x, w3x, fixedlabel, icon, bg-limit
|
|}

Mit der Class 'fixedlabel' kann man Label einbauen, die einen festen Text (direkt im HTML) haben, aber trotzdem die Farbe per Reading Value beeinflusst werden könnte.<br>
Mit der Class 'icon' kann man Label einbauen, die wie Icons aussehen. Als Hintergrund gibt es 'icon round' (rund), 'icon square' (Rechteck mit abgerundeten Ecken) und 'icon squareborder' (Rechteck mit abgerundeten Ecken und einem zusätzlichen Rand).<br>
Mit der Class 'bg-limit' wird der Hintergrund des Icon auf grün oder rot gesetzt, passend zum on/off Status des data-limits.
Use data-color OR data-colors + data-limits, not both.

With class="bg-limit" it changes the background color not the forecolor according data-limits

class="icon square" or class="icon round" forces the label to a fix width and height in icon style

Special layout can be achieved by overwriting of following classes in the fhem-tablet-ui-user.css:

.label-precomma .label-comma .label-aftercomma .label-unit

e.g.: .label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }

Functions for data-substitution:

Array of replacements
RegEx-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected
data-substitution="weekdayshort"
JS functions data-substitution="toDate().ddmm()" - convert to day:month
data-substitution="toDate().hhmm()" - convert to hour:minutes

data-substitution="toDate().hhmmss()" - convert to hour:minutes:secondes

data-substitution="toDate().eeee()" - convert to name of the week day

data-substitution="toDate().ago()" - convert to time span

[[#Beispiel_label|Link zu einem Beispiel]]

=== Widget LEVEL ===
<div id="level">'''LEVEL'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-min
|minimal value to set
|'0'
|-
!align="right" |data-max
|maximal value to set
|'100'
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-part
|part number of the space separated value to show or an RegEx
|
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits
|a array of numeric or RegEx values to affect the colour of the label
|
|-
!align="right" |class
|mini, horizontal
|
|-
|}

[[#Beispiel_level|Link zu einem Beispiel]] (fehlt noch)

<div id="pagetab">'''PAGETAB'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL of the new page to show
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|'fa-power-off'
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|''
|-
!align="right" |data-on-background-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-background-color
|color of OFF state
|'#505050'
|-
!align="right" |data-on-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-color
|color of Off state
|'#505050'
|-
!align="right" |data-get-on
|array of status to assign a special icon-list from data-icons
|
|-
!align="right" |data-icons
|array of icons related to the a data-get-on array
|
|-
!align="right" |class
|warn, activate (as additionals for data-icons)
|
|-
|}

[[#Beispiel_pagetab|Link zu einem Beispiel]]

<div id="playstream">'''PLAYSTREAM'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL des Radio-Streams
|-
!align="right" |data-get
|name of the reading to get the control state from FHEM
|'STATE'
|-
!align="right" |data-get-on
|value for PLAY status to get.
|'on'
|-
!align="right" |data-get-off
|value for STOP status to get.
|'off'
|-
!align="right" |data-volume
|name of the reading to get the volume value (0-100)
|volume
|-
|}

[[#Beispiel_playstream|Link zu einem Beispiel]]

<div id="popup">'''POPUP'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading where to get the alert value from
|'STATE'
|-
!align="right" |data-get-on
|value which trigger to open the dialog
|'on'
|-
!align="right" |data-off
|value which trigger to close the dialog
|'off'
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
|}

[[#Beispiel_popup|Link zu einem Beispiel]]

<div id="progress">'''PROGRESS'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-max
|maximal value to set or name of the reading which helds the max value
|100
|-
!align="right" |class
|novalue, percent
|
|-
|}

[[#Beispiel_progress|Link zu einem Beispiel]] (fehlt noch)

<div id="push">'''PUSH'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-set
| name of the reading to set on FHEM (<command> <device> <reading> <value>)
|
|-
!align="right" |data-set-on
|value to send when the the button get pressed oder ein Array zwischen dessen Werten umgeschaltet werden kann
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|'fa-circle'
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-doubleclick
|timeout to wait for a second click or touch. '0' disables the doubleclick feature.
|0
|-
!align="right" |data-countdown
|secondes for the countdown progress control
|autodetect from 'on-for-timer' command
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|
|-
!align="right" |data-off-background-color
|fix color attribute for OFF state or DEVICE:READING for dynamic setting
|#505050
|-
!align="right" |data-off-color
|fix color attribute for Off state or DEVICE:READING for dynamic setting
|#505050
|-
|}

'data-set-on' can also be an array of values to toggle between this values

[[#Beispiel_push|Link zu einem Beispiel]]

<div id="rotor">'''ROTOR'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" | data-delay
|time in millisecondes to wait until next list item get shown
|3500
|-
!align="right" |class
|fade, rotate
|''
|-
|}
Ohne Angabe von class erfolgt keine Animation.

[[#Beispiel_rotor|Link zu einem Beispiel]]

<div id="select">'''SELECT'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading that get the selected item of the list
|
|-
!align="right" |data-set
|name of the reading to set on Fhem (<command> <device> <reading> <value>)
|''
|-
!align="right" |data-list
|name of the reading to get a :-separated list from Fhem
|''
|-
!align="right" |data-items
|an array of fix items to show in the selection box (alternative if data-list is empty)
|
|-
!align="right" |data-alias
|an array of fix names to show only in the selection box as an alias to the real items
|
|-
!align="right" |data-cmd
|name of the command to send to Fhem (<command> <device> <reading> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-quote
|characters to enclose the send value
|
|-
!align="right" |class
|wider, w1x, w2x, w3x, large, big
|
|-
|}

[[#Beispiel_select|Link zu einem Beispiel]]

<div id="simplechart">'''SIMPLECHART'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-logdevice
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung)
|
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log)
|'-' means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int")
|''
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY
|10
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY
|30
|-
!align="right" |data-yticks
|value distance between Y tick lines
|5
|-
!align="right" |data-xticks
|time range between each X tick line (in Minuten)
|360 minutes
|-
!align="right" |data-daysago
|number of days back from now
|0
|-
!align="right" |data-caption
|name of the chart to show as text
|
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks
|
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
!align="right" |class
|fullsize, noticks
|
|-
|}

[[#Beispiel_simplechart|Link zu einem Beispiel]] (fehlt noch)

<code>data-logfile</code> kann man auch weglassen, dann greift der Defaultwert "-". Damit wird das neuste Logfile gelesen.

<div id="slider">'''SLIDER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|100
|-
!align="right" |data-step
|step value
|1
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-get-value
|RegEx to retrieve the value or part number of the space separated input to get the value
|'-1': all of the input
|-
!align="right" |data-set-value
|Format of the value to send to FHEM
|'$v': the value only
|-
!align="right" |data-width
|width for horizontal sliders
|'120px', for mini '60px'
|-
!align="right" |data-height
|height for vertical sliders
|'120px', for mini '60px'
|-
!align="right" |data-color
|color for quantity range
|'#aa6900'
|-
!align="right" |data-background-color
|color for range bar
|#404040
|-
!align="right" |class
|Aussehen/Ausrichtung
|
|-
|}

Für class steht mini, horizontal und negated (0 liegt oben) zur Verfügung.

[[#Beispiel_slider|Link zu einem Beispiel]]

<div id="switch">'''SWITCH'''</div>

{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-set
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-cmd
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-doubleclick
|timeout to wait for x millisecondes click or touch. '0' disables the doubleclick feature.
|'0'
|-
|}
Einstellung bei zwei Werten

{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get-on
|Wert, bei dem zum Status ON geschaltet werden soll.
|'on'
|-
!align="right" |data-get-off
|Wert, bei dem zum Status OFF geschaltet werden soll.
|'off'
|-
!align="right" |data-set-on
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf ON geschaltet wurde
|Wert von data-get-on
|-
!align="right" |data-set-off
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf OFF geschaltet wurde
|Wert von data-get-off
|-
!align="right" |data-icon
|Name des Font-Awesome Icon.
|'fa-lightbulb-o'
|-
!align="right" |data-background-icon
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-background-color
|Hintergrundfarbe beim Status on oder DEVICE:Reading bei dynamischen Einstellungen
|'#aa6900'
|-
!align="right" |data-off-background-color
|Hintergrundfarbe beim Status off oder DEVICE:Reading bei dynamischen Einstellungen
|'#505050'
|-
!align="right" |data-on-color
|Widget Farbe beim Status ON
|'#aa6900'
|-
!align="right" |data-off-color
|Widget Farbe beim Status OFF
|'#505050'
|-
|}

Einstellung bei mehreren Werten
{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-state
|Array mit Status Angaben
|
|-
!align="right" |data-set-state
|Array mit Status Angaben, die gesetzt werden sollen
|
|-
!align="right" |data-icons
|Array Icons zum zuvor definierten Status
|
|-
!align="right" |data-backgroundicons
|Array mit Hintergrund Icons zum zuvor definierten Status
|
|-
!align="right" |data-colors
|Array mit Farben zum zuvor definierten Status
|
|-
!align="right" |data-background-colors
|Array mit Hintergrund Farben zum zuvor definierten Status
|
|-
!align="right" |class : readonly
|Es wird nur der Status angezeigt und kann nicht geändert werden
|
|-
|}

<code>data-get-on</code> and <code>data-get-off</code> accept also RegEx values. e.g. data-get-on="[0-9]{1,3}|on" means set switch on if STATE is a numeric value or 'on'. data-get-off="!on" means accept all but the data-get-on value (negation)

[[#Beispiel_switch|Link zu einem Beispiel]]

=== Widget SYMBOL ===
<div id="symbol">'''SYMBOL'''</div>

Mit dem SYMBOL Widget kann der STATUS eines Device dargestellt werden. Dabei kann das angezeigte Symbol und dessen Farbe bestimmt werden. Wie bei anderen Widgets kann das Symbol und die Farbe vom State abhängig konfiguriert werden. Das SYMBOL-Widget dient nur zur Anzeige eines STATUS, es besitzt kein Möglichkeit der Interaktion.

Neben den '''allgemeine Attribute''' besitzt das SYMBOL-Widget die nachfolgenden Attribute.

dual state notation
{| class="wikitable"
! HTML Attribut !! Beschreibung !! Default Wert
|-
| data-get || Name des Reading, was gelesen werden soll || 'STATE'
|}

Einstellung bei zwei Werten
{| class="wikitable"
!HTML-Attribut !! Beschreibung !! Default-Wert
|-
|'''data-get-on''' ||Wert für on ||'open'
|-
|'''data-get-off''' ||Wert für off ||'closed'
|-
|'''data-icon''' ||Name des Symbols ||'ftui-window'
|-
|'''data-background-icon''' ||Hintergrundsymbol ||'''leer'''
|-
|'''data-on-background-color''' ||Farbe für ON-Zustand. ||'#aa6900'
|-
|'''data-off-background-color''' ||Farbe für OFF-Zustand. ||'#505050'
|-
|'''data-on-color''' ||Farbe für ON-Zustand. ||'#aa6900'
|-
|'''data-off-color''' ||Farbe für OFF-Zustand. ||'#505050'
|-
|}

Einstellung bei mehreren Werten

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-states
|Array für states.
|
|-
!align="right" |data-icons
|Array mit Icons zu data-states Array
|
|-
!align="right" |data-background-icons
|Array mit Icons zu data-states Array
|
|-
!align="right" |data-colors
|Array mit Farben zu data-states aArray
|''
|-
!align="right" |data-background-colors
|Array mit Hintergrundfarben zu data-states array
|''
|-
|}

data-get-on,data-get-off and data-states accept also RegEx values. The value for one icon can also contain an additional animatation CSS name, e.g. "fa-exclamation-triangle fa-blink" for a blinking Symbol

[[#Beispiel_symbol|Link zu einem Beispiel]]

=== Widget THERMOSTAT===
<div id="thermostat">'''THERMOSTAT'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'desired-temp'
|-
!align="right" |data-temp
|reading for measured temperature of thermostates
|'measured-temp'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|'desired-temp'
|-
!align="right" |data-valve
|reading for valve position of thermostates
|
|-
!align="right" |data-min
|minimal value to set
| 10
|-
!align="right" |data-max
|maximal value to set
| 30
|-
!align="right" |data-minColor
|Farbe des Keises für Min
| #4477FF
|-
!align="right" |data-maxColor
|Farbe des Kreises für Max, zwischen Min und Max wird linear interpoliert
| #FF0000
|-
!align="right" |data-step
|step size for value adjustment e.g. 0.5
|1
|-
!align="right" |data-bgColor
|Die Farbe der Kreises zwischen den ticks
|'transparent'
|-
!align="right" |data-fgColor
|Die Farbe der zahl im Kreismittelpunkt
|#bbbbbb
|-
!align="right" |data-tkColor
|Die Farbe der ticks
|#696969
|-
|-
!align="right" |data-angleOffset
|Start der ticks im Kreis (in Winkelgraden, 0 = oben)
| -120
|-
!align="right" |data-angleArc
|Bereich der ticks im Kreis (in Winkelgraden)
|240
|-
!align="right" |class
|big, readonly
|
|-
|}

[[#Beispiel_thermostat|Link zu einem Beispiel]]

<div id="volume">'''VOLUME'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|''
|-
!align="rigth" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|70
|-
!align="right" |data-get-value
|RegEx to retrieve the value or part number of the space separated input to get the value
|'-1': all of the input
|-
!align="right" |data-set-value
|Format of the value to send to FHEM
|'$v': the value only
|-
!align="right" |data-tickstep
|distance between ticks
|4|20
|-
!align="right" |data-unit
|add a unit after the desired value.
|
|-
!align="right" |class
|mini, small, big, bigger, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back, readonly
|
|-
|}

[[#Beispiel_volume|Link zu einem Beispiel]] (fehlt noch)

<div id="weather">'''WEATHER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get the weather literal from Fhem
|'STATE'
|-
!align="right" |data-imageset
|collection of images to display current weather situation. Possible values: 'meteocons', 'kleinklima'
|'meteocons'
|-
!align="right" |data-image-path
|path to the images of the selected imageset
|/images/weather/
|-
|}

[[#Beispiel_weather|Link zu einem Beispiel]]

== Widgets -- Beispiele ==

<div id="Beispiel_chart">'''Chart'''</div>

Display a chart with similar capabilities as the FHEM plots

<pre>
<div data-type="chart"
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'
data-ptype='["lines","histeps","histeps","cubic"]'
data-uaxis='["primary","secondary","secondary","primary"]'
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="mm"
data-ytext_sec="Rain (mm)"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="2013-08-13T00:00:00"
data-daysago_end="2013-08-14T00:00:00"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</pre>

[[Datei:chart_tabletUI.png]]

<div id="Beispiel_circlemenu">'''Circlemenu'''</div>

Cover a lot of other button behind one single button

<pre>
<div class="left">
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="push" data-icon="fa-wrench"></div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -6"
data-icon="">-6</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -2"
data-icon="">-2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level 0"
data-icon="">0</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +3"
data-icon="">2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +9"
data-icon="">9</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +C"
data-icon="">12</div></li>
</ul>
</div>
<div data-type="label" class="cell">Woofer</div>
</div>
</pre>

[[Datei:circlemenu_tabletUI.png]]

<div id="Beispiel_dimmer">'''Dimmer'''</div>

Dimmer Widget Beispiel für Philips Hue

Minimalvariante
<pre>
<div data-type="dimmer" data-device="HUEDevice1"
data-get-on="!off" data-get-off="off"
data-set="pct"</div>
</pre>

Mit Anzeige der Dimstufe
<pre>
<div data-type="dimmer" data-device="HUEDevice1"
data-get="onoff"
data-get-on="1" data-get-off="0"
data-set=""
data-set-on="on" data-set-off="off"
data-dim="pct">
</div>
</pre>

Dimmer Widget für MilightDevice

<pre>
<div data-type="dimmer"
data-device="SonstWas"
data-get="brightness"
data-get-off="0"
data-get-on="[1-9][0-9]*"
data-set-on="on"
data-set-off="off"
data-dim="dim"
data-min="0"
data-max="100"
></div>
</pre>

<div id="Beispiel_homestatus">'''Homestatus'''</div>

Beispiel rechts im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
data-get-on='["1","2","3","4"]'
data-alias='["Home","Night","Away","Holiday"]'
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase"]'>
</div>
</pre>

Beispiel links im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
data-get-on='["home","asleep","absent","gone","gotosleep"]'
data-alias='["Home","Night","Away","Holiday","Retire"]'
data-icons='["fa-fire","fa-film","fa-plus","fa-car","fa-tint"]'
data-version='residents'>
</div>
</pre>

[[Datei:homestatus_tabletUI.png]]

<div id="Beispiel_image">'''Image'''</div>

Erzeugt ein Widget mit einem Bild aus dem www, das alle 5 Sekunden aktualisiert wird (hier eine Wetterkarte vom DWD).

<pre>
<div data-type="image"
data-size="80%"
data-url="http://www.dwd.de/wundk/wetter/de/Deutschland.jpg"
</div>
</pre>

[[Datei:image_tabletUI.jpg]]

Example for how to add an image to the dashboard which its URL is delivered by a Fhem module like PROPLANTA:

<pre>
<div data-type="image" data-device="Wetter1"
data-get="fc0_weatherDayIcon"
data-size="40px"
class="cell">
</div>
</pre>

<div id="Beispiel_label">'''Label'''</div>

Example for HM-WDS40-TH-I Funk-Temperatur-/Feuchtesensor innen

<pre>
STATE T: 20.0 H: 61
</pre>
<pre>
<div data-type="label" data-device="THSensorWZ"
data-part="2" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ" data-part="4"
data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>

But the same result can reached by getting single readings:
<pre>
humidity 58
temperature 20.1
</pre>

<pre>
<div data-type="label" data-device="THSensorWZ"
data-get="temperature" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ"
data-get="humidity" data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>

Example for how to influence the color of the label according to value limits
<pre>
<div data-type="label"
data-device="OutTemp"
data-limits='[-73,10,23]'
data-colors='["#6699FF","#AA6900","#FF0000"]'
data-unit="%B0C%0A"
class="cell big">
</div>
</pre>

Example for how to create a widget for shutter via push: show state and set up/down
<pre>
<div data-type="switch"
data-device="wzRollo"
data-get-on="up"
data-get-off="down"
data-icon="fa-bars"
class="cell" >
</div>
<div data-type="label"
class="cell">Rollo</div>
</pre>

Example for how to create a label for a time value in short format with usage of RegEx.

<pre>
<div data-type="label"
data-device="dummy1"
data-part="(\d\d\.\d\d\.).*"
class="cell">
</div>
</pre>

Example for how to show two labels in one line.

<pre>
<div class="">
<div type="label" device="OnSunrise" class="inline"></div>bis
<div type="label" device="OnSunset" class="inline"></div>
</div>
</pre>

Beispiel für die Anzeige des UV-Indexes und der Abhängigkeit der anzuzeigenden Farbe.

<pre>
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
data-get="fc0_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc0_date"></div>
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
data-get="fc1_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc1_date"></div>
</pre>

[[Datei:label_tabletUI.jpg]]

Beispiel für die Anzeige des Labels als Icon.
<pre>
<div class="cell">
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon round bg-red cell"></div>
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon square bg-blue cell"></div>
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon squareborder cell"></div>
<div data-type="label" data-device="PowerAV_Sw" data-colors='["red","green"]' data-limits='["off","on"]' class="icon round bg-limit cell"></div>
</div>
</pre>

[[Datei:Label_tabletUI_icon.png]]

<div id="Beispiel_pagetab">'''Pagetab'''</div>

Example for a tab menu to switch smoothly between multiple pages. Multiple pagetabs in a template file: menu.html

<pre>
<html>
<body>
<header>MENU</header>
<div class="cell">
<div data-type="pagetab" data-url="index.html" data-icon="fa-home" class="cell"></div>
<div data-type="pagetab" data-url="index_2.html" data-icon="fa-sliders" class="cell"></div>
<div data-type="pagetab" data-url="index_3.html" data-icon="fa-music" class="cell"></div>
<div data-type="pagetab" data-url="index_4.html" data-icon="fa-hotel" class="cell"></div>
<div data-type="pagetab" data-url="index_5.html" data-icon="fa-music" class="cell"></div>
<div data-type="pagetab" data-url="index_6.html" data-icon="fa-database" class="cell"></div>
<div data-type="pagetab" data-url="index_7.html" data-icon="fa-fax" class="cell"></div>
</div>
</body>
</html>
</pre>

<div id="Beispiel_playstream">'''Playstream'''</div>

Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.

<pre>
<div data-type="playstream" data-url="http://radioeins.de/stream"></div>
<div data-type="label" class="darker">Radio eins</div>
</pre>

<div id="Beispiel_push">'''Push'''</div>

Example for how to create a push button widget to trigger all devices on:

<pre>
<div data-type="push"
data-device="LightAll"
data-cmd="trigger"
data-set="on"
class="cell">
</div>
</pre>

Beispiel für zwei horizontale Buttons:

<pre>
<div class="cell">
<div class="doublebox-h">
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push1.png]]

Beispiel für zwei quadratische vertikale Buttons:

<pre>
<div class="cell">
<div class="doublebox-v">
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push2.png]]

<div id="Beispiel_rotor">'''Rotor'''</div>

Example for a rotor widget, which switches between to days of weather forecast

<pre>
<div data-type="rotor" class="fade">
<ul>
<li>
<div data-type="label" class="darker">Heute</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
<li>
<div data-type="label" class="darker">Morgen</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
</ul>
</div>
</pre>

<div id="Beispiel_select">'''Select'''</div>

Erzeugt zwei Comboboxen zur Auswahl des Eingang eines 2-Zonen-AV-Receivers. Die Liste für Zone2 ist fest, die Liste für Zone1 wird von Fhem übergeben.

<pre>
<div class="cell wider">
<div data-type="label" class="inline wider">Zone2</div>
<div data-type="select" data-device="AvReceiverZ2" data-items='["Airplay","Webradio","BD/DVD","PHONO"]' data-get="input" data-set="input" class="cell w2x" ></div>
<div></div>
<div data-type="label" class="inline">Zone1</div>
<div data-type="select" data-device="AvReceiver" data-list="inputs" data-get="input" data-set="input" class="cell w2x" ></div>
</div>
</pre>

[[Datei:select_tabeltUI.png]]

<div id="Beispiel_slider">'''Slider'''</div>

Slider mit einstellbaren Werten von 10 bis 90:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</pre>

[[Datei:slider_tabletUI.png]]

Horizontal angeordneter Slider:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="0"
data-max="100"
class="horizontal"
</div>
</pre>

[[Datei:slider_tabletUI2.jpg]]

<div id="Beispiel_switch">'''Switch'''</div>

Schalter. Usage of RegEx pattern for state request:

<pre>
<div data-type="switch" class="cell"
data-device="MILIGHT_Zone1_Wohnzimmer"
data-get-on="on.*"
data-get-off="off"></div>
</pre>

[[Datei:switch.png]]

Beispiel für eine Gruppe von Schaltern, um zwischen vier verschiedenen Werten eines device umzuschalten:

<pre>
<div class="cell left">
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert1).)*"
data-get-on="Wert1" class="cell" ></div>
<div data-type="label" class="cell">Wert1</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert2).)*"
data-get-on="Wert2" class="cell" ></div>
<div data-type="label" class="cell">Wert2</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert3).)*"
data-get-on="Wert3" class="cell" ></div>
<div data-type="label" class="cell">Wert3</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert4).)*"
data-get-on="Wert4" class="cell" ></div>
<div data-type="label" class="cell">Wert4</div>
</div>
</pre>

[[Datei:switch4.png]]

<div id="Beispiel_symbol">'''Symbol'''</div>

Example for a tristate icon

<pre>
<div data-type="symbol" data-device="dummy1"
data-get-on='["wert1","wert2","wert3"]'
data-icons='["fa-arrow-up","fa-user","fa-arrow-down"]'
data-on-colors='["SeaGreen","SlateBlue","IndianRed"]'
class="cell big">
</div>
</pre>

Example for a tristate icon with blink and spin animation

<pre>
<div data-type="symbol" data-device="dummy1"
data-icons='["fa-exclamation-triangle fa-blink","fa-exclamation-circle","fa-cog fa-spin"]'
data-on-colors='["Crimson","GoldenRod","SeaGreen"]'
data-get-on='["Wert1","Wert2","Wert3"]' >
</div>
</pre>

Example for a battery level control with RegEx

<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
data-icons='["oa-measure_battery_100","oa-measure_battery_75","oa-measure_battery_50","oa-measure_battery_25","oa-measure_battery_0"]'
data-get-on='["3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]'
data-on-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'>
</div>
</pre>

Example for a battery level control with greater-equal compare and 90° rotated symbols

<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'
data-get-on='["0","2","2.4","2.7","3.0"]'
data-on-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'>
</div>
</pre>

<div id="Beispiel_thermostat">'''Thermostat'''</div>

Configure as data-device='...' that item which delivers temp and desired-temp as reading.

Default parameters are:
<pre>
data-get="desired-temp" data-temp="measured-temp" data-set="desired-temp"
</pre>

Therefor for HomaMatic HM-CC-RT-DN this is sufficient.

<pre>
<div data-type="thermostat" data-device='KH_Clima' class="cell"></div>
</pre>

The long format looks like this:

<pre>
<div data-type="thermostat"
data-device="KH_Clima"
data-get="desired-temp"
data-temp="measured-temp"
class="cell">
</div>
</pre>

Example for MAX!:
<pre>
<div data-type="thermostat" data-device="HZ_Tuer"
data-valve="valveposition"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature"
class="cell">
</div>
</pre>

The wigets will show the valve value only in case of a valid data-valve attribute. The default for data-valve ist null. That means, a empty data-valve attribute hides the valve label for the widget.

[[Datei:thermostat.png]]

<div id="Beispiel_weather">'''Weather'''</div>

Das Widget fügt ein dem Wetter entsprechendes Bild ein. Die Daten können durch Fhem-Module wie [[PROPLANTA]], [[OPENWEATHER]] und [[Weather]] bereitgestellt werden.
Add 'big' or 'bigger' to CSS class to get a bigger weather icon.

Beispiel:
<pre>
<div data-type="weather"
data-device="Weather"
data-get="fc0_weatherDay"
class="cell big">
</div>
</pre>

[[Datei:weather.png]]

== Icon-Konfiguration ==

* Eingebaute Icons: Diese haben das ftui-Präfix. Zurzeit sind folgende verfügbar: ftui-window, ftui-door

* Mehr als 500 Icons von "http://fortawesome.github.io/Font-Awesome/icons" verfügbar. Einfach den Icon-Namen angeben (Präfix "fa-" nicht vergessen, Z.B. <code>data-icon="fa-volume-up"</code>

* Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.
<pre>
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
</pre>

Diese font icons haben das Präfix 'fs-' bzw. 'oa-'.

Beispiel bei einem Schalter:
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>

Und so als großes Symbol:
<pre>
<div data-type="symbol" data-device='dummy1'
data-icon="oa-status_frost"
data-on-color="#bb3232"
data-get-on="on"
data-get-off="!on"
class="bigger">
</div>
</pre>

Die Icons kann man auch etwas dicker darstellen mit den Zusatz bold: <code>data-icon="oa-secur_locked bold"</code>

Die Namen der verfügbaren Icons findet man auch in den CSS Files (openautomation.css / fhemSVG.css)

== Spezial ==
Folgender Befehl setzt einen direkten Befehl an Fhem ab (<code>set dummy1 off</code>):
<pre>
<div onclick="setFhemStatus('set dummy1 off')">All off!</div>
</pre>

== FAQ ==
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM_Tablet_UI/FAQ|FHEM Tablet UI FAQ]] zusammengestellt.

== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* [http://forum.fhem.de/index.php/topic,37378.0.html User-Demos]
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]

[[Kategorie:FHEM Frontends]]

FHEM Tablet UI

2016-03-16T18:45:45Z

Svenson08: /* Widgets THERMOSTAT */

{{Infobox Modul
|ModPurpose=Oberfläche für Fhem
|ModType=x
|ModFTopic=34233
|ModForumArea=Frontends
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
[[Datei:tablet_ui.png|200px|thumb|right|Fhem Tablet UI]]
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in Fhem integrierten Geräten. Zahlreiche Widgets können sehr flexibel und leicht per HTML Code konfiguriert werden.

In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben.

{{Todo|alle Widgets hier übernehmen, Übersetzung, weitere Beispiele aus dem Forum einfügen (evtl. mit Link!?)}}

== Voraussetzungen ==
Das User Interface hat sehr wenige Anforderungen für den Betrieb. Es benötigt <u>keine</u> zusätzliche Frameworks, wie z.B. PHP oder MySQL.

Voraussetzungen ist eine Fhem Installation mit HTTPSRV Modul. Das UI kann mit den gängigen Browsern Betriebssystem unabhängig genutzt werden oder mit dem Webviewcontrol.
Das Interface wird dabei in dem FHEM eigenen Webserver ausgeführt. Mit wenigen Anpassungen ist es auch möglich das UI auf anderen Webservern (Apache, u.a.) zu betreiben, dann kann FHEM und UI auch auf getrennten Systemen ausgeführt werden.

== Installation ==
* Im Befehls-Eingabefeld eingeben: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* Im Befehls-Eingabefeld eingeben: <code>define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI</code>
* Im Verzeichnis ./fhem/www/tablet die Datei index-example.html in index.html umbenennen oder eine neue index.html erzeugen und diese index.html wie nachfolgend beschrieben editieren.

Das UI ist über den Link "Tablet-UI" auf der Fhem-Hauptseite oder durch Direktaufruf der URL "<nowiki>http://<Fhem-url>:8083/fhem/tablet/index.html</nowiki>" zu erreichen.

Hinweise zu einer manuellen Installation und weitere Infos sind auf der Projektseite https://github.com/knowthelist/fhem-tablet-ui zu finden.

== Update ==
* Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von: <code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* Update des UI durch Eingabe von: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Über
<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
kann seit dem 24.12.2015 die URL zum normalen Updatebefehl von FHEM hinzugefügt werden. Mit einen "update check" sieht man dann gleich alle Updates aus beiden "Welten".

== Weitere Widgets ==

=== Widgets for Fhem-tablet-ui ===
Zusätzlich zu den bei der Installation des Tablet UI direkt zur Verfügung stehenden Widgets, gibt es eine weitere Widget-Quelle von nesges unter https://github.com/nesges/Widgets-for-fhem-tablet-ui. Die Widgets aus dieser Quelle müssen für eine Nutzung separat installiert werden.

Dazu folgenden Befehl in die Fhem-Befehlszeile eingeben: <code><nowiki>update all https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt</nowiki></code>.

Näheres zur Installation unter [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/Installation Wiki: Installation].

Die Dokumentation der einzelnen Widgets befindet sich ebenfalls [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki im Github-Wiki].

== Konfiguration ==
'''META-Parameter'''

Das Tablet UI lässt sich über die META-Parameter konfigurieren. Mit den meisten META-Parametern kann das verhalten des UI beeinflusst werden. Diese Parameter befinden sich in der jeweiligen '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>'''. Nachfolgend sind die verschiedenen Konfigurationsparameter aufgeführt. Die Parameter sind immer gleich aufgebaut.

:<code><meta name="<META-Parameter>" content="<Wert>"></code>

{| class="wikitable"
|-
! META-Parameter !! Wert / Beispiel !! Erklärung
|-
| longpoll || 1 oder 0 || Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh.
|-
| gridster_disable || 1 oder 0 || Drag&Drop der Gridster-Elemente auf der Seite deaktivieren.
|-
| toast || 1 oder 0 || Toast messages deaktivieren
|-
| fhemweb_url || http://meinFhemServer:8083/fhem || Wird benötigt wenn der Webserver des TabletUI nicht auf dem FHEM Server läuft.
|-
| widget_margin || 1 bis 9999 || Abstände der Gridsterelemente verändern.
|-
| widget_base_width || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.
|-
| widget_base_height || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.
|}

'''CSS-Styles'''

Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt [[#CSS Class description|CSS Class description]] oder [[#Positioning|Positioning]] aufgeführt. Es besteht auch die Möglichkeit eine eigene CSS Datei zu erstellen und darüber Änderungen am aussehen des UI vorzunehmen. Die eigenen CSS Datei würde bei einem Update unverändert bleiben. Daher ist abzuraten ein CSS Datei die mit dem UI Update verteilt wird zu modifizieren. Die eigene CSS Datei ist unter '''/fhem/tablet/css''' mit dem Namen '''fhem-tablet-ui-user.css''' zu finden. Sollte diese nicht vorhanden sein kann die Datei manuell erstellt werden.
Wird keine eigene CSS-Datei verwendet empfiehlt es sich den folgenden Eintrag im <head> der jeweiligen .html Datei zu entfernen, bzw. in Kommentar gesetzt werden um Probleme beim Laden der Seite zu verhindern.

:<code><link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /></code>

== Farbe ==
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form oder als RGB-Wert anzugeben. Zum Beispiel: Hex: #A3CFA3 RBG: rgb(163, 207, 163).

Knallige Farben wie #ff0000 für Rot oder #00ff00 für Grün sollten vermieden werden. Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.

Hilfreich bei der Suche nach den Farbwerten ist der color picker: http://www.w3schools.com/tags/ref_colorpicker.asp

== CSS Class description ==

Not all widgets support all classes

* readonly : changing of state is not allowed
* wider : 25px extra space for the widget to the top
* narrow : shorter distant to the widget above
* w1x, w2x, w3x : set the widget to a fix width: 1x, 2x, 3x width
* mini : lowest diameter for volume widget
* small : font 80% size (label), small diameter for volume widget
* medium : font 120% size
* large : font 150% size
* big : font 200% size
* bigplus : font 270% size
* bigger : font 320% size
* bigger.thin : font 450% size
* grande : font 600% size
* gigantic: font 144px size + 120px line-height
* thin : font thin
* darker : forecolor in gray
* hue-tick : draw ticks in color range
* hue-front : draw handle in color range
* hue-back : draw background in color range
* dim-tick : draw ticks in brightness range
* dim-front : draw handle in brightness range
* dim-back : draw background in brightness range
* red : foreground color red
* green : foreground color green
* blue : foreground color blue
* doublebox-v : container to place 2 small widgets (e.g. switch) one above the other
* doublebox-h : container to place 2 small widgets (e.g. switch) side by side
* timestamp : deliver the date time for the reading instead the value
* inline : positioning elements in a row, no line break
* top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
* left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
* right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
* blink : blink animatation for label or symbol widget
* verticalLine : Vertikale Line am rechten Rand

== Positioning ==

*container : new box or new row
*col-x-y : new column with x/y of width (col-1-3,col-2-3,col-1-2,col-1-4,col-1-8,col-1-5,col-2-5,col-3-5,col-4-5)
*inline : positioning elements in a row, no line break
*top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
*left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
*right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
*top-narrow : -15px closer on top (top-narrow-2x -> -30px; top-narrow-10 -> -10px)
*centered : horizontal centered
*left-align : align text left
*left : floating left
*right-align : align text right
*right : floating right
*wider : 15px extra space for the widget all around
*narrow : shorter distant to the widget above
*fullsize : 100% in width and height

== Widgets -- Konfiguration ==

Teilweise dokumentierte Widgets:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/button button]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen Fhem-Befehl absetzen kann.
* [[#chart|chart]]: chart with similar capabilities as the FHEM plots
* checkbox:
* [[#circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clicksound clicksound]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clock clock]: Das Widget "clock" stellt eine einfach Uhr zur verfügung.
* colorwheel:
* daytimepicker:
* departure:
* [[#dimmer|dimmer]]: toogle button with a setter for on value
* eventmonitor:
* highchart:
* [[#homestatus|homestatus]]: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]]: Widget zum Einbinden externer Inhalte in einem Iframe.
* [[#image|image]]: insert an image, the URL is given by a reading
* input:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/klimatrend klimatrend]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt.
* Knob:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* [[#label|label]]: STATE als Text anzeigen
* [[#level|level]]: vertical/horizontal bar to show values between min/max value
* link:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/multistatebutton multistatebutton]: Variante des push-Widgets das den set-Befehl abhängig vom gelesenen Status ändert.
* [[#pagetab|pagetab]]: Element to smoothly exchange the whole page with another page
* pagebutton:
* [[#playstream|playstream]]: Abspielen eines Webradio-Streams per Button
* [[#popup|popup]]: a popup dialog which open on click on another widget
* [[#progress|progress]]: round symbolic display for percent values
* [[#push|push]]: send any command to Fhem e.g. up / down
* range:
* readingsgroup:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads
* [[#rotor|rotor]]: Umschalten von zwei oder mehr Widgets an einer Position
* [[#select|select]]: Combobox to provide a list for selection
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: zum anzeigen und einstellen einer Uhrzeit.
* [[#simplechart|simplechart]]: simple XY line chart for one value (reads directly from Fhem log file)
* [[#slider|slider]]: vertical slider to select between min/max value
* spinner:
* swiper:
* [[#switch|switch]]: Toggle any command to Fhem (e.g. on / off)
* [[#symbol|symbol]]: State als Symbol darstellen (z.B. Fenster offen)
* [[#thermostat|thermostat]]: dial for heater thermostates to set desired value and show current value
* [[#volume|volume]]: dial to set a single value (e.g. 0-60)
* [[#weather|weather]]: insert an icon or image, represending a weather literal
* [https://github.com/svenson08/ftui-weekdaytimer-widget weekdaytimer]: Visualisierung des [[WeekdayTimer]] Modul
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/wind_direction wind_direction]: Zeigt die Windrichtung auf einer Windrose an.

Ein Demo der Widgets findet ihr [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Hier].
----------------------------------

Für alle Widgets gilt:
{| class="wikitable"
|+allgemeine Attribute
|-
!align="right" |data-type
|Widget-Typ
|-
!align="right" |data-device
|Fhem-Name des Gerätes (mit dem Befehl 'list' bekommt man im Fhem die kpl. Liste)
|-
!align="right" |class
|CSS-Klassen für Aussehen und Formatierung des Widgets
|-
|}

{| class="wikitable"
|+Daten Empfangen
|-
!align="right" |data-get
|Reading Name
|-
!align="right" |data-get-on
|Wert für den Status on
|-
!align="right" |data-get-off
|Wert für den Status off
|-
|}

{| class="wikitable"
|+Daten Senden
|-
!align="right" |data-set
|Reading Name
|-
!align="right" |data-set-on
|Wert für den Status on
|-
!align="right" |data-set-off
|Wert für den Status off
|-
|}

<div id="chart">'''CHART'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-logdevice
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung) or array of names if more than one graph shall be displayed
|-
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log) or or array of names if more than one graph shall be displayed
|'-' or omitting this data means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int") or or array of columnspecs if more than one graph shall be displayed
|-
|-
!align="right" |data-style
|name of the graph style to be used (e.g. 'SVGplot l0' or 'ftui l0dash') or or array of styles if more than one graph shall be displayed using different stlyes. The standard fhem plot styles can be used furthermore there are some more predefined styles existing (details see css file). Own styles can be specified e.g. in the fhem-table-ui-user.css file.
|-
|-
!align="right" |data-ptype
|name of the plot type (e.g. 'lines' or 'fa-cog') or or array of plottypes if more than one graph shall be displayed. All fhem plot styles are supported. Additionally it is possible to specify symbols (currently supported are font awesome ('fa-...'), open automation ('oa-...') and fhem symbols ('fs-...'))
|'lines'
|-
!align="right" |data-uaxis
|name of the axis to be used ('primary' or 'secondary') or or array of axis' to be used if more than one graph shall be displayed. The 'primary' axis is labelled on the left side, the 'secondary' axis is labelled on the right side
|'primary'
|-
!align="right" |data-legend
|caption of the graph (used in the legend and at the cursor) or an array of legend texts if more than one graph shall be displayed.
|-
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|10
|-
!align="right" |data-minvalue_sec
|min Y value to Show or an array of values for dynamic minY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|30
|-
!align="right" |data-maxvalue_sec
|max Y value to Show or an array of values for dynamic maxY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-yticks
|value distance between Y tick lines (related to primary axis). A value of 'auto' means that the value is calculated from the data displayed dynamically.
|'auto'
|-
!align="right" |data-xticks
|time range between each X tick lines (in minutes). A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-daysago_start
|number of days back from now for the start of the plot (0 means the plot starts from today 0:00). Additionally the x-axis start value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'.
|0
|-
!align="right" |data-daysago_end
|number of days back from now for the end of the plot (-1 means the plot ends today 24:00). Additionally the x-axis end value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'.
|-1
|-
!align="right" |data-nofulldays
|switch to activate/deactivate rounding of the xaxis start and end values to full days ('true' or 'false')
|'false'
|-
!align="right" |data-ytext
|text to be shown besides the primary y axis.
|-
|-
!align="right" |data-ytext_sec
|text to be shown besides the secondary y axis.
|-
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks for primary y axis.
|-
|-
!align="right" |data-crosshair
|switch to activate/deactivate the crosshair cursor ('true' or 'false')
|'false'
|-
!align="right" |data-cursorgroup
|number to define coupling of the crosshair cursor. The cursors of all charts having the same number are coupled and move together.
|-
|-
!align="right" |data-scrollgroup
|number to define coupling of the scrolling (shift and zoom). All charts having the same number are scrolled (shifted and zoomed) together.
|-
|-
!align="right" |data-showlegend
|switch to activate/deactivate the initial display of the legend window ('true' or 'false')
|'false'
|-
!align="right" |data-yunit_sec
|unit of the value to show beside of each Y ticks for secondary y axis.
|-
|-
!align="right" |data-width
|fixed size for width (in % or px)
|-
|-
!align="right" |data-height
|fixed size for height (in % or px)
|-
|-
!align="right" |class
|fullsize, noticks, nobuttons
|
|-
|}

<code>data-logfile</code> can be omitted in this case the default value "-" will be used. This means that the current logfile is going to be used.

There are several buttons that control the dynamic behaviour of the chart. The <-, ->, + and - buttons shift and zoom the displayed data. The "legend" and "cursor" buttons are switching on and off the display of the legend window and the crosshair cursor respectively.

When the legend window is displayed, a click on the legend text shows/hides the respective graph. The legend window can be dragged to other positions on desktop browsers (currently not yet working for iOS and Android).

The crosshair cursor currently only works dynamically on desktop browsers. On iOS and Android you have to tap on the screen to set the cursor to a new position.

There is a number of css styles that control the visible appearance of the chart. The following classes are supported:

{| class="wikitable"
!CSS class name
!Description
|-
!.chart-background
|Color etc. for the chart background
|-
!.text.axes
|Font and color for the chart axes
|-
!.buttons
|Size and color for the buttons (shift etc.)
|-
!.gridlines
|Size and color for gridlines generally
|-
!.xaxis
|Font, size and color for xaxis
|-
!.yaxis
|Font, size and color for yaxis
|-
!.xticks
|Font, size and color for xticks
|-
!.yticks
|Font, size and color for yticks
|-
!.crosshair
|Font, size and color (foreground/background) for the crosshair cursor
|-
!.caption
|Font, size and color for text buttons for legend and cursor switching
|-
!.legend
|Font, size and background color for legend window
|-
|-
|}

[[#Beispiel_chart|Link zu einem Beispiel]]

<div id="circlemenu">'''CIRCLEMENU'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-item-diameter
|diameter of the circle
|52
|-
!align="right" |data-circle-radius
|radius of each item, in pixel
|70
|-
!align="right" |data-direction
|position of the items in relation to the center
|'full'
|-
!align="right" |data-close-after
|closing time of the circle-menu
|(item-count + 1s) or a minimum of 4s
|-
!align="right" |class
|keepopen
|
|-
|}

Optionen für data-direction: top | right | bottom | left | top-right | top-left | bottom-right | bottom-left | top-half | right-half | bottom-half | left-half | full | vertical | horizontal

[[#Beispiel_circlemenu|Link zu einem Beispiel]]

<div id="dimmer">'''DIMMER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-get-on
|value for ON status to get
|'on'
|-
!align="right" |data-get-off
|value for OFF status to get
|'off'
|-
!align="right" |data-set
|(<command> <device> <reading> <value>)
|
|-
!align="right" |data-set-on
|value for ON status to set
|value of data-get-on
|-
!align="right" |data-set-off
|value for OFF status to set
|value of data-get-off
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-dim
|name of the reading responsible for dim (<command> <device> <reading> <value>)
|value of data-get-on
|-
!align="right" |data-icon
|name of the font-awesome icon
|fa-lightbulb-o
|-
|}

[[#Beispiel_dimmer|Link zu einem Beispiel]]

<div id="homestatus">'''HOMESTATUS'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-get-on
|array of states using for get
|['1','2','3','4']
|-
!align="right" |data-set-on
|array of states using for set.
|value of data-get-on
|-
!align="right" |data-alias
|array of fix names to show only in the UI as an alias to the real states
|''
|-
!align="right" |data-icons
|array of icons related to the data-get-on array
|''
|-
!align="right" |data-version
|name of the status model e.g. 'residents','roommate','guest'
|(default NULL)
|-
|}

The default version has 4 states: '1','2','3','4' The default aliases are 'Home','Night','Away','Holiday'; data-version='residents' or 'roommate' or 'guest' has 5 states ('home','asleep','absent','gone','gotosleep') They have these aliases 'Home','Night','Away','Holiday','Retire'

[[#Beispiel_homestatus|Link zu einem Beispiel]]

<div id="image">'''IMAGE'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get an URL from Fhem
|'STATE'
|-
!align="right" |data-size
|width of the image in px or %, the height scales proportionally
|50%
|-
!align="right" |data-url
|URL of the image to show (use data-url or data-device + data-get, not both)
|
|-
!align="right" |data-refresh
|Interval in seconds for image refresh for usage together with data-url
|900
|-
|}

[[#Beispiel_image|Link zu einem Beispiel]]

=== Widgets LABEL ===
<div id="label">'''LABEL'''</div>

Mit dem LABEL Widget kann der STATUS eines Device in Textform angezeigt werden. Dabei kann das die Farbe des Anzeigetext abhängig von dessen Wert festgelegt werden.

Neben den '''allgemeine Attribute''' besitzt das LABEL-Widget die nachfolgenden Attribute.

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|Name des Readings in FHEM
|
|-
!align="right" |data-fix
|Eine bestimmte Anzahl an Dezimalstellen
|'-1' -> non-numeric
|-
!align="right" |data-part
|split position of the space separated value to show or an RegEx
|
|-
!align="right" |data-color
| fix color attribute or DEVICE:READING for dynamic setting of label color
| ''
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits-get
|name of the DEVICE:Reading to colorize the label
|data-device:data-get
|-
!align="right" |data-limits
|an array of numeric values to affect the colour of the Label
|
|-
!align="right" |data-limits-part
|part number of the space separated value to show or a RegEx
|'-1' -> all
|-
!align="right" |data-unit
|add a unit after a numeric value. use encoded strings e.g. "%B0C%0A"
|
|-
!align="right" |data-substitution
|regex-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected
|
|-
!align="right" |data-hide
|string to compare with current value. hide element when it's value equals data-hide
|
|-
!align="right" |data-hideparents
|jquery selector to hide element's parents too
|
|-
!align="right" |class
|small, large, big, bigger, thin, red, green, blue, darker, timestamp, w1x, w2x, w3x, fixedlabel, icon, bg-limit
|
|}

Mit der Class 'fixedlabel' kann man Label einbauen, die einen festen Text (direkt im HTML) haben, aber trotzdem die Farbe per Reading Value beeinflusst werden könnte.<br>
Mit der Class 'icon' kann man Label einbauen, die wie Icons aussehen. Als Hintergrund gibt es 'icon round' (rund), 'icon square' (Rechteck mit abgerundeten Ecken) und 'icon squareborder' (Rechteck mit abgerundeten Ecken und einem zusätzlichen Rand).<br>
Mit der Class 'bg-limit' wird der Hintergrund des Icon auf grün oder rot gesetzt, passend zum on/off Status des data-limits.
Use data-color OR data-colors + data-limits, not both.

With class="bg-limit" it changes the background color not the forecolor according data-limits

class="icon square" or class="icon round" forces the label to a fix width and height in icon style

Special layout can be achieved by overwriting of following classes in the fhem-tablet-ui-user.css:

.label-precomma .label-comma .label-aftercomma .label-unit

e.g.: .label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }

Functions for data-substitution:

Array of replacements
RegEx-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected
data-substitution="weekdayshort"
JS functions data-substitution="toDate().ddmm()" - convert to day:month
data-substitution="toDate().hhmm()" - convert to hour:minutes

data-substitution="toDate().hhmmss()" - convert to hour:minutes:secondes

data-substitution="toDate().eeee()" - convert to name of the week day

data-substitution="toDate().ago()" - convert to time span

[[#Beispiel_label|Link zu einem Beispiel]]

=== Widgets LEVEL ===
<div id="level">'''LEVEL'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-min
|minimal value to set
|'0'
|-
!align="right" |data-max
|maximal value to set
|'100'
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-part
|part number of the space separated value to show or an RegEx
|
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits
|a array of numeric or RegEx values to affect the colour of the label
|
|-
!align="right" |class
|mini, horizontal
|
|-
|}

[[#Beispiel_level|Link zu einem Beispiel]] (fehlt noch)

<div id="pagetab">'''PAGETAB'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL of the new page to show
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|'fa-power-off'
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|''
|-
!align="right" |data-on-background-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-background-color
|color of OFF state
|'#505050'
|-
!align="right" |data-on-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-color
|color of Off state
|'#505050'
|-
!align="right" |data-get-on
|array of status to assign a special icon-list from data-icons
|
|-
!align="right" |data-icons
|array of icons related to the a data-get-on array
|
|-
!align="right" |class
|warn, activate (as additionals for data-icons)
|
|-
|}

[[#Beispiel_pagetab|Link zu einem Beispiel]]

<div id="playstream">'''PLAYSTREAM'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL des Radio-Streams
|-
!align="right" |data-get
|name of the reading to get the control state from FHEM
|'STATE'
|-
!align="right" |data-get-on
|value for PLAY status to get.
|'on'
|-
!align="right" |data-get-off
|value for STOP status to get.
|'off'
|-
!align="right" |data-volume
|name of the reading to get the volume value (0-100)
|volume
|-
|}

[[#Beispiel_playstream|Link zu einem Beispiel]]

<div id="popup">'''POPUP'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading where to get the alert value from
|'STATE'
|-
!align="right" |data-get-on
|value which trigger to open the dialog
|'on'
|-
!align="right" |data-off
|value which trigger to close the dialog
|'off'
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
|}

[[#Beispiel_popup|Link zu einem Beispiel]]

<div id="progress">'''PROGRESS'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-max
|maximal value to set or name of the reading which helds the max value
|100
|-
!align="right" |class
|novalue, percent
|
|-
|}

[[#Beispiel_progress|Link zu einem Beispiel]] (fehlt noch)

<div id="push">'''PUSH'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-set
| name of the reading to set on FHEM (<command> <device> <reading> <value>)
|
|-
!align="right" |data-set-on
|value to send when the the button get pressed oder ein Array zwischen dessen Werten umgeschaltet werden kann
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|'fa-circle'
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-doubleclick
|timeout to wait for a second click or touch. '0' disables the doubleclick feature.
|0
|-
!align="right" |data-countdown
|secondes for the countdown progress control
|autodetect from 'on-for-timer' command
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|
|-
!align="right" |data-off-background-color
|fix color attribute for OFF state or DEVICE:READING for dynamic setting
|#505050
|-
!align="right" |data-off-color
|fix color attribute for Off state or DEVICE:READING for dynamic setting
|#505050
|-
|}

'data-set-on' can also be an array of values to toggle between this values

[[#Beispiel_push|Link zu einem Beispiel]]

<div id="rotor">'''ROTOR'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" | data-delay
|time in millisecondes to wait until next list item get shown
|3500
|-
!align="right" |class
|fade, rotate
|''
|-
|}
Ohne Angabe von class erfolgt keine Animation.

[[#Beispiel_rotor|Link zu einem Beispiel]]

<div id="select">'''SELECT'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading that get the selected item of the list
|
|-
!align="right" |data-set
|name of the reading to set on Fhem (<command> <device> <reading> <value>)
|''
|-
!align="right" |data-list
|name of the reading to get a :-separated list from Fhem
|''
|-
!align="right" |data-items
|an array of fix items to show in the selection box (alternative if data-list is empty)
|
|-
!align="right" |data-alias
|an array of fix names to show only in the selection box as an alias to the real items
|
|-
!align="right" |data-cmd
|name of the command to send to Fhem (<command> <device> <reading> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-quote
|characters to enclose the send value
|
|-
!align="right" |class
|wider, w1x, w2x, w3x, large, big
|
|-
|}

[[#Beispiel_select|Link zu einem Beispiel]]

<div id="simplechart">'''SIMPLECHART'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-logdevice
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung)
|
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log)
|'-' means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int")
|''
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY
|10
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY
|30
|-
!align="right" |data-yticks
|value distance between Y tick lines
|5
|-
!align="right" |data-xticks
|time range between each X tick line (in Minuten)
|360 minutes
|-
!align="right" |data-daysago
|number of days back from now
|0
|-
!align="right" |data-caption
|name of the chart to show as text
|
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks
|
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
!align="right" |class
|fullsize, noticks
|
|-
|}

[[#Beispiel_simplechart|Link zu einem Beispiel]] (fehlt noch)

<code>data-logfile</code> kann man auch weglassen, dann greift der Defaultwert "-". Damit wird das neuste Logfile gelesen.

<div id="slider">'''SLIDER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|100
|-
!align="right" |data-step
|step value
|1
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-get-value
|RegEx to retrieve the value or part number of the space separated input to get the value
|'-1': all of the input
|-
!align="right" |data-set-value
|Format of the value to send to FHEM
|'$v': the value only
|-
!align="right" |data-width
|width for horizontal sliders
|'120px', for mini '60px'
|-
!align="right" |data-height
|height for vertical sliders
|'120px', for mini '60px'
|-
!align="right" |data-color
|color for quantity range
|'#aa6900'
|-
!align="right" |data-background-color
|color for range bar
|#404040
|-
!align="right" |class
|Aussehen/Ausrichtung
|
|-
|}

Für class steht mini, horizontal und negated (0 liegt oben) zur Verfügung.

[[#Beispiel_slider|Link zu einem Beispiel]]

<div id="switch">'''SWITCH'''</div>

{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-set
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-cmd
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-doubleclick
|timeout to wait for x millisecondes click or touch. '0' disables the doubleclick feature.
|'0'
|-
|}
Einstellung bei zwei Werten

{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get-on
|Wert, bei dem zum Status ON geschaltet werden soll.
|'on'
|-
!align="right" |data-get-off
|Wert, bei dem zum Status OFF geschaltet werden soll.
|'off'
|-
!align="right" |data-set-on
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf ON geschaltet wurde
|Wert von data-get-on
|-
!align="right" |data-set-off
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf OFF geschaltet wurde
|Wert von data-get-off
|-
!align="right" |data-icon
|Name des Font-Awesome Icon.
|'fa-lightbulb-o'
|-
!align="right" |data-background-icon
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-background-color
|Hintergrundfarbe beim Status on oder DEVICE:Reading bei dynamischen Einstellungen
|'#aa6900'
|-
!align="right" |data-off-background-color
|Hintergrundfarbe beim Status off oder DEVICE:Reading bei dynamischen Einstellungen
|'#505050'
|-
!align="right" |data-on-color
|Widget Farbe beim Status ON
|'#aa6900'
|-
!align="right" |data-off-color
|Widget Farbe beim Status OFF
|'#505050'
|-
|}

Einstellung bei mehreren Werten
{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-state
|Array mit Status Angaben
|
|-
!align="right" |data-set-state
|Array mit Status Angaben, die gesetzt werden sollen
|
|-
!align="right" |data-icons
|Array Icons zum zuvor definierten Status
|
|-
!align="right" |data-backgroundicons
|Array mit Hintergrund Icons zum zuvor definierten Status
|
|-
!align="right" |data-colors
|Array mit Farben zum zuvor definierten Status
|
|-
!align="right" |data-background-colors
|Array mit Hintergrund Farben zum zuvor definierten Status
|
|-
!align="right" |class : readonly
|Es wird nur der Status angezeigt und kann nicht geändert werden
|
|-
|}

<code>data-get-on</code> and <code>data-get-off</code> accept also RegEx values. e.g. data-get-on="[0-9]{1,3}|on" means set switch on if STATE is a numeric value or 'on'. data-get-off="!on" means accept all but the data-get-on value (negation)

[[#Beispiel_switch|Link zu einem Beispiel]]

=== Widget SYMBOL ===
<div id="symbol">'''SYMBOL'''</div>

Mit dem SYMBOL Widget kann der STATUS eines Device dargestellt werden. Dabei kann das angezeigte Symbol und dessen Farbe bestimmt werden. Wie bei anderen Widgets kann das Symbol und die Farbe vom State abhängig konfiguriert werden. Das SYMBOL-Widget dient nur zur Anzeige eines STATUS, es besitzt kein Möglichkeit der Interaktion.

Neben den '''allgemeine Attribute''' besitzt das SYMBOL-Widget die nachfolgenden Attribute.

dual state notation
{| class="wikitable"
! HTML Attribut !! Beschreibung !! Default Wert
|-
| data-get || Name des Reading, was gelesen werden soll || 'STATE'
|}

Einstellung bei zwei Werten
{| class="wikitable"
!HTML-Attribut !! Beschreibung !! Default-Wert
|-
|'''data-get-on''' ||Wert für on ||'open'
|-
|'''data-get-off''' ||Wert für off ||'closed'
|-
|'''data-icon''' ||Name des Symbols ||'ftui-window'
|-
|'''data-background-icon''' ||Hintergrundsymbol ||'''leer'''
|-
|'''data-on-background-color''' ||Farbe für ON-Zustand. ||'#aa6900'
|-
|'''data-off-background-color''' ||Farbe für OFF-Zustand. ||'#505050'
|-
|'''data-on-color''' ||Farbe für ON-Zustand. ||'#aa6900'
|-
|'''data-off-color''' ||Farbe für OFF-Zustand. ||'#505050'
|-
|}

Einstellung bei mehreren Werten

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-states
|Array für states.
|
|-
!align="right" |data-icons
|Array mit Icons zu data-states Array
|
|-
!align="right" |data-background-icons
|Array mit Icons zu data-states Array
|
|-
!align="right" |data-colors
|Array mit Farben zu data-states aArray
|''
|-
!align="right" |data-background-colors
|Array mit Hintergrundfarben zu data-states array
|''
|-
|}

data-get-on,data-get-off and data-states accept also RegEx values. The value for one icon can also contain an additional animatation CSS name, e.g. "fa-exclamation-triangle fa-blink" for a blinking Symbol

[[#Beispiel_symbol|Link zu einem Beispiel]]

=== Widget THERMOSTAT===
<div id="thermostat">'''THERMOSTAT'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'desired-temp'
|-
!align="right" |data-temp
|reading for measured temperature of thermostates
|'measured-temp'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|'desired-temp'
|-
!align="right" |data-valve
|reading for valve position of thermostates
|
|-
!align="right" |data-min
|minimal value to set
| 10
|-
!align="right" |data-max
|maximal value to set
| 30
|-
!align="right" |data-minColor
|Farbe des Keises für Min
| #4477FF
|-
!align="right" |data-maxColor
|Farbe des Kreises für Max, zwischen Min und Max wird linear interpoliert
| #FF0000
|-
!align="right" |data-step
|step size for value adjustment e.g. 0.5
|1
|-
!align="right" |data-bgColor
|Die Farbe der Kreises zwischen den ticks
|'transparent'
|-
!align="right" |data-fgColor
|Die Farbe der zahl im Kreismittelpunkt
|#bbbbbb
|-
!align="right" |data-tkColor
|Die Farbe der ticks
|#696969
|-
|-
!align="right" |data-angleOffset
|Start der ticks im Kreis (in Winkelgraden, 0 = oben)
| -120
|-
!align="right" |data-angleArc
|Bereich der ticks im Kreis (in Winkelgraden)
|240
|-
!align="right" |class
|big, readonly
|
|-
|}

[[#Beispiel_thermostat|Link zu einem Beispiel]]

<div id="volume">'''VOLUME'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|''
|-
!align="rigth" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|70
|-
!align="right" |data-get-value
|RegEx to retrieve the value or part number of the space separated input to get the value
|'-1': all of the input
|-
!align="right" |data-set-value
|Format of the value to send to FHEM
|'$v': the value only
|-
!align="right" |data-tickstep
|distance between ticks
|4|20
|-
!align="right" |data-unit
|add a unit after the desired value.
|
|-
!align="right" |class
|mini, small, big, bigger, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back, readonly
|
|-
|}

[[#Beispiel_volume|Link zu einem Beispiel]] (fehlt noch)

<div id="weather">'''WEATHER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get the weather literal from Fhem
|'STATE'
|-
!align="right" |data-imageset
|collection of images to display current weather situation. Possible values: 'meteocons', 'kleinklima'
|'meteocons'
|-
!align="right" |data-image-path
|path to the images of the selected imageset
|/images/weather/
|-
|}

[[#Beispiel_weather|Link zu einem Beispiel]]

== Widgets -- Beispiele ==

<div id="Beispiel_chart">'''Chart'''</div>

Display a chart with similar capabilities as the FHEM plots

<pre>
<div data-type="chart"
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'
data-ptype='["lines","histeps","histeps","cubic"]'
data-uaxis='["primary","secondary","secondary","primary"]'
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="mm"
data-ytext_sec="Rain (mm)"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="2013-08-13T00:00:00"
data-daysago_end="2013-08-14T00:00:00"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</pre>

[[Datei:chart_tabletUI.png]]

<div id="Beispiel_circlemenu">'''Circlemenu'''</div>

Cover a lot of other button behind one single button

<pre>
<div class="left">
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="push" data-icon="fa-wrench"></div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -6"
data-icon="">-6</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -2"
data-icon="">-2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level 0"
data-icon="">0</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +3"
data-icon="">2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +9"
data-icon="">9</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +C"
data-icon="">12</div></li>
</ul>
</div>
<div data-type="label" class="cell">Woofer</div>
</div>
</pre>

[[Datei:circlemenu_tabletUI.png]]

<div id="Beispiel_dimmer">'''Dimmer'''</div>

Dimmer Widget Beispiel für Philips Hue

Minimalvariante
<pre>
<div data-type="dimmer" data-device="HUEDevice1"
data-get-on="!off" data-get-off="off"
data-set="pct"</div>
</pre>

Mit Anzeige der Dimstufe
<pre>
<div data-type="dimmer" data-device="HUEDevice1"
data-get="onoff"
data-get-on="1" data-get-off="0"
data-set=""
data-set-on="on" data-set-off="off"
data-dim="pct">
</div>
</pre>

Dimmer Widget für MilightDevice

<pre>
<div data-type="dimmer"
data-device="SonstWas"
data-get="brightness"
data-get-off="0"
data-get-on="[1-9][0-9]*"
data-set-on="on"
data-set-off="off"
data-dim="dim"
data-min="0"
data-max="100"
></div>
</pre>

<div id="Beispiel_homestatus">'''Homestatus'''</div>

Beispiel rechts im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
data-get-on='["1","2","3","4"]'
data-alias='["Home","Night","Away","Holiday"]'
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase"]'>
</div>
</pre>

Beispiel links im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
data-get-on='["home","asleep","absent","gone","gotosleep"]'
data-alias='["Home","Night","Away","Holiday","Retire"]'
data-icons='["fa-fire","fa-film","fa-plus","fa-car","fa-tint"]'
data-version='residents'>
</div>
</pre>

[[Datei:homestatus_tabletUI.png]]

<div id="Beispiel_image">'''Image'''</div>

Erzeugt ein Widget mit einem Bild aus dem www, das alle 5 Sekunden aktualisiert wird (hier eine Wetterkarte vom DWD).

<pre>
<div data-type="image"
data-size="80%"
data-url="http://www.dwd.de/wundk/wetter/de/Deutschland.jpg"
</div>
</pre>

[[Datei:image_tabletUI.jpg]]

Example for how to add an image to the dashboard which its URL is delivered by a Fhem module like PROPLANTA:

<pre>
<div data-type="image" data-device="Wetter1"
data-get="fc0_weatherDayIcon"
data-size="40px"
class="cell">
</div>
</pre>

<div id="Beispiel_label">'''Label'''</div>

Example for HM-WDS40-TH-I Funk-Temperatur-/Feuchtesensor innen

<pre>
STATE T: 20.0 H: 61
</pre>
<pre>
<div data-type="label" data-device="THSensorWZ"
data-part="2" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ" data-part="4"
data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>

But the same result can reached by getting single readings:
<pre>
humidity 58
temperature 20.1
</pre>

<pre>
<div data-type="label" data-device="THSensorWZ"
data-get="temperature" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ"
data-get="humidity" data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>

Example for how to influence the color of the label according to value limits
<pre>
<div data-type="label"
data-device="OutTemp"
data-limits='[-73,10,23]'
data-colors='["#6699FF","#AA6900","#FF0000"]'
data-unit="%B0C%0A"
class="cell big">
</div>
</pre>

Example for how to create a widget for shutter via push: show state and set up/down
<pre>
<div data-type="switch"
data-device="wzRollo"
data-get-on="up"
data-get-off="down"
data-icon="fa-bars"
class="cell" >
</div>
<div data-type="label"
class="cell">Rollo</div>
</pre>

Example for how to create a label for a time value in short format with usage of RegEx.

<pre>
<div data-type="label"
data-device="dummy1"
data-part="(\d\d\.\d\d\.).*"
class="cell">
</div>
</pre>

Example for how to show two labels in one line.

<pre>
<div class="">
<div type="label" device="OnSunrise" class="inline"></div>bis
<div type="label" device="OnSunset" class="inline"></div>
</div>
</pre>

Beispiel für die Anzeige des UV-Indexes und der Abhängigkeit der anzuzeigenden Farbe.

<pre>
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
data-get="fc0_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc0_date"></div>
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
data-get="fc1_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc1_date"></div>
</pre>

[[Datei:label_tabletUI.jpg]]

Beispiel für die Anzeige des Labels als Icon.
<pre>
<div class="cell">
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon round bg-red cell"></div>
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon square bg-blue cell"></div>
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon squareborder cell"></div>
<div data-type="label" data-device="PowerAV_Sw" data-colors='["red","green"]' data-limits='["off","on"]' class="icon round bg-limit cell"></div>
</div>
</pre>

[[Datei:Label_tabletUI_icon.png]]

<div id="Beispiel_pagetab">'''Pagetab'''</div>

Example for a tab menu to switch smoothly between multiple pages. Multiple pagetabs in a template file: menu.html

<pre>
<html>
<body>
<header>MENU</header>
<div class="cell">
<div data-type="pagetab" data-url="index.html" data-icon="fa-home" class="cell"></div>
<div data-type="pagetab" data-url="index_2.html" data-icon="fa-sliders" class="cell"></div>
<div data-type="pagetab" data-url="index_3.html" data-icon="fa-music" class="cell"></div>
<div data-type="pagetab" data-url="index_4.html" data-icon="fa-hotel" class="cell"></div>
<div data-type="pagetab" data-url="index_5.html" data-icon="fa-music" class="cell"></div>
<div data-type="pagetab" data-url="index_6.html" data-icon="fa-database" class="cell"></div>
<div data-type="pagetab" data-url="index_7.html" data-icon="fa-fax" class="cell"></div>
</div>
</body>
</html>
</pre>

<div id="Beispiel_playstream">'''Playstream'''</div>

Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.

<pre>
<div data-type="playstream" data-url="http://radioeins.de/stream"></div>
<div data-type="label" class="darker">Radio eins</div>
</pre>

<div id="Beispiel_push">'''Push'''</div>

Example for how to create a push button widget to trigger all devices on:

<pre>
<div data-type="push"
data-device="LightAll"
data-cmd="trigger"
data-set="on"
class="cell">
</div>
</pre>

Beispiel für zwei horizontale Buttons:

<pre>
<div class="cell">
<div class="doublebox-h">
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push1.png]]

Beispiel für zwei quadratische vertikale Buttons:

<pre>
<div class="cell">
<div class="doublebox-v">
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push2.png]]

<div id="Beispiel_rotor">'''Rotor'''</div>

Example for a rotor widget, which switches between to days of weather forecast

<pre>
<div data-type="rotor" class="fade">
<ul>
<li>
<div data-type="label" class="darker">Heute</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
<li>
<div data-type="label" class="darker">Morgen</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
</ul>
</div>
</pre>

<div id="Beispiel_select">'''Select'''</div>

Erzeugt zwei Comboboxen zur Auswahl des Eingang eines 2-Zonen-AV-Receivers. Die Liste für Zone2 ist fest, die Liste für Zone1 wird von Fhem übergeben.

<pre>
<div class="cell wider">
<div data-type="label" class="inline wider">Zone2</div>
<div data-type="select" data-device="AvReceiverZ2" data-items='["Airplay","Webradio","BD/DVD","PHONO"]' data-get="input" data-set="input" class="cell w2x" ></div>
<div></div>
<div data-type="label" class="inline">Zone1</div>
<div data-type="select" data-device="AvReceiver" data-list="inputs" data-get="input" data-set="input" class="cell w2x" ></div>
</div>
</pre>

[[Datei:select_tabeltUI.png]]

<div id="Beispiel_slider">'''Slider'''</div>

Slider mit einstellbaren Werten von 10 bis 90:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</pre>

[[Datei:slider_tabletUI.png]]

Horizontal angeordneter Slider:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="0"
data-max="100"
class="horizontal"
</div>
</pre>

[[Datei:slider_tabletUI2.jpg]]

<div id="Beispiel_switch">'''Switch'''</div>

Schalter. Usage of RegEx pattern for state request:

<pre>
<div data-type="switch" class="cell"
data-device="MILIGHT_Zone1_Wohnzimmer"
data-get-on="on.*"
data-get-off="off"></div>
</pre>

[[Datei:switch.png]]

Beispiel für eine Gruppe von Schaltern, um zwischen vier verschiedenen Werten eines device umzuschalten:

<pre>
<div class="cell left">
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert1).)*"
data-get-on="Wert1" class="cell" ></div>
<div data-type="label" class="cell">Wert1</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert2).)*"
data-get-on="Wert2" class="cell" ></div>
<div data-type="label" class="cell">Wert2</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert3).)*"
data-get-on="Wert3" class="cell" ></div>
<div data-type="label" class="cell">Wert3</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert4).)*"
data-get-on="Wert4" class="cell" ></div>
<div data-type="label" class="cell">Wert4</div>
</div>
</pre>

[[Datei:switch4.png]]

<div id="Beispiel_symbol">'''Symbol'''</div>

Example for a tristate icon

<pre>
<div data-type="symbol" data-device="dummy1"
data-get-on='["wert1","wert2","wert3"]'
data-icons='["fa-arrow-up","fa-user","fa-arrow-down"]'
data-on-colors='["SeaGreen","SlateBlue","IndianRed"]'
class="cell big">
</div>
</pre>

Example for a tristate icon with blink and spin animation

<pre>
<div data-type="symbol" data-device="dummy1"
data-icons='["fa-exclamation-triangle fa-blink","fa-exclamation-circle","fa-cog fa-spin"]'
data-on-colors='["Crimson","GoldenRod","SeaGreen"]'
data-get-on='["Wert1","Wert2","Wert3"]' >
</div>
</pre>

Example for a battery level control with RegEx

<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
data-icons='["oa-measure_battery_100","oa-measure_battery_75","oa-measure_battery_50","oa-measure_battery_25","oa-measure_battery_0"]'
data-get-on='["3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]'
data-on-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'>
</div>
</pre>

Example for a battery level control with greater-equal compare and 90° rotated symbols

<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'
data-get-on='["0","2","2.4","2.7","3.0"]'
data-on-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'>
</div>
</pre>

<div id="Beispiel_thermostat">'''Thermostat'''</div>

Configure as data-device='...' that item which delivers temp and desired-temp as reading.

Default parameters are:
<pre>
data-get="desired-temp" data-temp="measured-temp" data-set="desired-temp"
</pre>

Therefor for HomaMatic HM-CC-RT-DN this is sufficient.

<pre>
<div data-type="thermostat" data-device='KH_Clima' class="cell"></div>
</pre>

The long format looks like this:

<pre>
<div data-type="thermostat"
data-device="KH_Clima"
data-get="desired-temp"
data-temp="measured-temp"
class="cell">
</div>
</pre>

Example for MAX!:
<pre>
<div data-type="thermostat" data-device="HZ_Tuer"
data-valve="valveposition"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature"
class="cell">
</div>
</pre>

The wigets will show the valve value only in case of a valid data-valve attribute. The default for data-valve ist null. That means, a empty data-valve attribute hides the valve label for the widget.

[[Datei:thermostat.png]]

<div id="Beispiel_weather">'''Weather'''</div>

Das Widget fügt ein dem Wetter entsprechendes Bild ein. Die Daten können durch Fhem-Module wie [[PROPLANTA]], [[OPENWEATHER]] und [[Weather]] bereitgestellt werden.
Add 'big' or 'bigger' to CSS class to get a bigger weather icon.

Beispiel:
<pre>
<div data-type="weather"
data-device="Weather"
data-get="fc0_weatherDay"
class="cell big">
</div>
</pre>

[[Datei:weather.png]]

== Icon-Konfiguration ==

* Eingebaute Icons: Diese haben das ftui-Präfix. Zurzeit sind folgende verfügbar: ftui-window, ftui-door

* Mehr als 500 Icons von "http://fortawesome.github.io/Font-Awesome/icons" verfügbar. Einfach den Icon-Namen angeben (Präfix "fa-" nicht vergessen, Z.B. <code>data-icon="fa-volume-up"</code>

* Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.
<pre>
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
</pre>

Diese font icons haben das Präfix 'fs-' bzw. 'oa-'.

Beispiel bei einem Schalter:
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>

Und so als großes Symbol:
<pre>
<div data-type="symbol" data-device='dummy1'
data-icon="oa-status_frost"
data-on-color="#bb3232"
data-get-on="on"
data-get-off="!on"
class="bigger">
</div>
</pre>

Die Icons kann man auch etwas dicker darstellen mit den Zusatz bold: <code>data-icon="oa-secur_locked bold"</code>

Die Namen der verfügbaren Icons findet man auch in den CSS Files (openautomation.css / fhemSVG.css)

== Spezial ==
Folgender Befehl setzt einen direkten Befehl an Fhem ab (<code>set dummy1 off</code>):
<pre>
<div onclick="setFhemStatus('set dummy1 off')">All off!</div>
</pre>

== FAQ ==
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM_Tablet_UI/FAQ|FHEM Tablet UI FAQ]] zusammengestellt.

== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* [http://forum.fhem.de/index.php/topic,37378.0.html User-Demos]
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]

[[Kategorie:FHEM Frontends]]

FHEM Tablet UI

2016-03-16T18:45:26Z

Svenson08: /* Widgets SYMBOL */

{{Infobox Modul
|ModPurpose=Oberfläche für Fhem
|ModType=x
|ModFTopic=34233
|ModForumArea=Frontends
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
[[Datei:tablet_ui.png|200px|thumb|right|Fhem Tablet UI]]
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in Fhem integrierten Geräten. Zahlreiche Widgets können sehr flexibel und leicht per HTML Code konfiguriert werden.

In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben.

{{Todo|alle Widgets hier übernehmen, Übersetzung, weitere Beispiele aus dem Forum einfügen (evtl. mit Link!?)}}

== Voraussetzungen ==
Das User Interface hat sehr wenige Anforderungen für den Betrieb. Es benötigt <u>keine</u> zusätzliche Frameworks, wie z.B. PHP oder MySQL.

Voraussetzungen ist eine Fhem Installation mit HTTPSRV Modul. Das UI kann mit den gängigen Browsern Betriebssystem unabhängig genutzt werden oder mit dem Webviewcontrol.
Das Interface wird dabei in dem FHEM eigenen Webserver ausgeführt. Mit wenigen Anpassungen ist es auch möglich das UI auf anderen Webservern (Apache, u.a.) zu betreiben, dann kann FHEM und UI auch auf getrennten Systemen ausgeführt werden.

== Installation ==
* Im Befehls-Eingabefeld eingeben: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* Im Befehls-Eingabefeld eingeben: <code>define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI</code>
* Im Verzeichnis ./fhem/www/tablet die Datei index-example.html in index.html umbenennen oder eine neue index.html erzeugen und diese index.html wie nachfolgend beschrieben editieren.

Das UI ist über den Link "Tablet-UI" auf der Fhem-Hauptseite oder durch Direktaufruf der URL "<nowiki>http://<Fhem-url>:8083/fhem/tablet/index.html</nowiki>" zu erreichen.

Hinweise zu einer manuellen Installation und weitere Infos sind auf der Projektseite https://github.com/knowthelist/fhem-tablet-ui zu finden.

== Update ==
* Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von: <code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* Update des UI durch Eingabe von: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Über
<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
kann seit dem 24.12.2015 die URL zum normalen Updatebefehl von FHEM hinzugefügt werden. Mit einen "update check" sieht man dann gleich alle Updates aus beiden "Welten".

== Weitere Widgets ==

=== Widgets for Fhem-tablet-ui ===
Zusätzlich zu den bei der Installation des Tablet UI direkt zur Verfügung stehenden Widgets, gibt es eine weitere Widget-Quelle von nesges unter https://github.com/nesges/Widgets-for-fhem-tablet-ui. Die Widgets aus dieser Quelle müssen für eine Nutzung separat installiert werden.

Dazu folgenden Befehl in die Fhem-Befehlszeile eingeben: <code><nowiki>update all https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt</nowiki></code>.

Näheres zur Installation unter [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/Installation Wiki: Installation].

Die Dokumentation der einzelnen Widgets befindet sich ebenfalls [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki im Github-Wiki].

== Konfiguration ==
'''META-Parameter'''

Das Tablet UI lässt sich über die META-Parameter konfigurieren. Mit den meisten META-Parametern kann das verhalten des UI beeinflusst werden. Diese Parameter befinden sich in der jeweiligen '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>'''. Nachfolgend sind die verschiedenen Konfigurationsparameter aufgeführt. Die Parameter sind immer gleich aufgebaut.

:<code><meta name="<META-Parameter>" content="<Wert>"></code>

{| class="wikitable"
|-
! META-Parameter !! Wert / Beispiel !! Erklärung
|-
| longpoll || 1 oder 0 || Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh.
|-
| gridster_disable || 1 oder 0 || Drag&Drop der Gridster-Elemente auf der Seite deaktivieren.
|-
| toast || 1 oder 0 || Toast messages deaktivieren
|-
| fhemweb_url || http://meinFhemServer:8083/fhem || Wird benötigt wenn der Webserver des TabletUI nicht auf dem FHEM Server läuft.
|-
| widget_margin || 1 bis 9999 || Abstände der Gridsterelemente verändern.
|-
| widget_base_width || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.
|-
| widget_base_height || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.
|}

'''CSS-Styles'''

Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt [[#CSS Class description|CSS Class description]] oder [[#Positioning|Positioning]] aufgeführt. Es besteht auch die Möglichkeit eine eigene CSS Datei zu erstellen und darüber Änderungen am aussehen des UI vorzunehmen. Die eigenen CSS Datei würde bei einem Update unverändert bleiben. Daher ist abzuraten ein CSS Datei die mit dem UI Update verteilt wird zu modifizieren. Die eigene CSS Datei ist unter '''/fhem/tablet/css''' mit dem Namen '''fhem-tablet-ui-user.css''' zu finden. Sollte diese nicht vorhanden sein kann die Datei manuell erstellt werden.
Wird keine eigene CSS-Datei verwendet empfiehlt es sich den folgenden Eintrag im <head> der jeweiligen .html Datei zu entfernen, bzw. in Kommentar gesetzt werden um Probleme beim Laden der Seite zu verhindern.

:<code><link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /></code>

== Farbe ==
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form oder als RGB-Wert anzugeben. Zum Beispiel: Hex: #A3CFA3 RBG: rgb(163, 207, 163).

Knallige Farben wie #ff0000 für Rot oder #00ff00 für Grün sollten vermieden werden. Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.

Hilfreich bei der Suche nach den Farbwerten ist der color picker: http://www.w3schools.com/tags/ref_colorpicker.asp

== CSS Class description ==

Not all widgets support all classes

* readonly : changing of state is not allowed
* wider : 25px extra space for the widget to the top
* narrow : shorter distant to the widget above
* w1x, w2x, w3x : set the widget to a fix width: 1x, 2x, 3x width
* mini : lowest diameter for volume widget
* small : font 80% size (label), small diameter for volume widget
* medium : font 120% size
* large : font 150% size
* big : font 200% size
* bigplus : font 270% size
* bigger : font 320% size
* bigger.thin : font 450% size
* grande : font 600% size
* gigantic: font 144px size + 120px line-height
* thin : font thin
* darker : forecolor in gray
* hue-tick : draw ticks in color range
* hue-front : draw handle in color range
* hue-back : draw background in color range
* dim-tick : draw ticks in brightness range
* dim-front : draw handle in brightness range
* dim-back : draw background in brightness range
* red : foreground color red
* green : foreground color green
* blue : foreground color blue
* doublebox-v : container to place 2 small widgets (e.g. switch) one above the other
* doublebox-h : container to place 2 small widgets (e.g. switch) side by side
* timestamp : deliver the date time for the reading instead the value
* inline : positioning elements in a row, no line break
* top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
* left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
* right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
* blink : blink animatation for label or symbol widget
* verticalLine : Vertikale Line am rechten Rand

== Positioning ==

*container : new box or new row
*col-x-y : new column with x/y of width (col-1-3,col-2-3,col-1-2,col-1-4,col-1-8,col-1-5,col-2-5,col-3-5,col-4-5)
*inline : positioning elements in a row, no line break
*top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
*left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
*right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
*top-narrow : -15px closer on top (top-narrow-2x -> -30px; top-narrow-10 -> -10px)
*centered : horizontal centered
*left-align : align text left
*left : floating left
*right-align : align text right
*right : floating right
*wider : 15px extra space for the widget all around
*narrow : shorter distant to the widget above
*fullsize : 100% in width and height

== Widgets -- Konfiguration ==

Teilweise dokumentierte Widgets:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/button button]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen Fhem-Befehl absetzen kann.
* [[#chart|chart]]: chart with similar capabilities as the FHEM plots
* checkbox:
* [[#circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clicksound clicksound]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clock clock]: Das Widget "clock" stellt eine einfach Uhr zur verfügung.
* colorwheel:
* daytimepicker:
* departure:
* [[#dimmer|dimmer]]: toogle button with a setter for on value
* eventmonitor:
* highchart:
* [[#homestatus|homestatus]]: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]]: Widget zum Einbinden externer Inhalte in einem Iframe.
* [[#image|image]]: insert an image, the URL is given by a reading
* input:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/klimatrend klimatrend]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt.
* Knob:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* [[#label|label]]: STATE als Text anzeigen
* [[#level|level]]: vertical/horizontal bar to show values between min/max value
* link:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/multistatebutton multistatebutton]: Variante des push-Widgets das den set-Befehl abhängig vom gelesenen Status ändert.
* [[#pagetab|pagetab]]: Element to smoothly exchange the whole page with another page
* pagebutton:
* [[#playstream|playstream]]: Abspielen eines Webradio-Streams per Button
* [[#popup|popup]]: a popup dialog which open on click on another widget
* [[#progress|progress]]: round symbolic display for percent values
* [[#push|push]]: send any command to Fhem e.g. up / down
* range:
* readingsgroup:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads
* [[#rotor|rotor]]: Umschalten von zwei oder mehr Widgets an einer Position
* [[#select|select]]: Combobox to provide a list for selection
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: zum anzeigen und einstellen einer Uhrzeit.
* [[#simplechart|simplechart]]: simple XY line chart for one value (reads directly from Fhem log file)
* [[#slider|slider]]: vertical slider to select between min/max value
* spinner:
* swiper:
* [[#switch|switch]]: Toggle any command to Fhem (e.g. on / off)
* [[#symbol|symbol]]: State als Symbol darstellen (z.B. Fenster offen)
* [[#thermostat|thermostat]]: dial for heater thermostates to set desired value and show current value
* [[#volume|volume]]: dial to set a single value (e.g. 0-60)
* [[#weather|weather]]: insert an icon or image, represending a weather literal
* [https://github.com/svenson08/ftui-weekdaytimer-widget weekdaytimer]: Visualisierung des [[WeekdayTimer]] Modul
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/wind_direction wind_direction]: Zeigt die Windrichtung auf einer Windrose an.

Ein Demo der Widgets findet ihr [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Hier].
----------------------------------

Für alle Widgets gilt:
{| class="wikitable"
|+allgemeine Attribute
|-
!align="right" |data-type
|Widget-Typ
|-
!align="right" |data-device
|Fhem-Name des Gerätes (mit dem Befehl 'list' bekommt man im Fhem die kpl. Liste)
|-
!align="right" |class
|CSS-Klassen für Aussehen und Formatierung des Widgets
|-
|}

{| class="wikitable"
|+Daten Empfangen
|-
!align="right" |data-get
|Reading Name
|-
!align="right" |data-get-on
|Wert für den Status on
|-
!align="right" |data-get-off
|Wert für den Status off
|-
|}

{| class="wikitable"
|+Daten Senden
|-
!align="right" |data-set
|Reading Name
|-
!align="right" |data-set-on
|Wert für den Status on
|-
!align="right" |data-set-off
|Wert für den Status off
|-
|}

<div id="chart">'''CHART'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-logdevice
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung) or array of names if more than one graph shall be displayed
|-
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log) or or array of names if more than one graph shall be displayed
|'-' or omitting this data means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int") or or array of columnspecs if more than one graph shall be displayed
|-
|-
!align="right" |data-style
|name of the graph style to be used (e.g. 'SVGplot l0' or 'ftui l0dash') or or array of styles if more than one graph shall be displayed using different stlyes. The standard fhem plot styles can be used furthermore there are some more predefined styles existing (details see css file). Own styles can be specified e.g. in the fhem-table-ui-user.css file.
|-
|-
!align="right" |data-ptype
|name of the plot type (e.g. 'lines' or 'fa-cog') or or array of plottypes if more than one graph shall be displayed. All fhem plot styles are supported. Additionally it is possible to specify symbols (currently supported are font awesome ('fa-...'), open automation ('oa-...') and fhem symbols ('fs-...'))
|'lines'
|-
!align="right" |data-uaxis
|name of the axis to be used ('primary' or 'secondary') or or array of axis' to be used if more than one graph shall be displayed. The 'primary' axis is labelled on the left side, the 'secondary' axis is labelled on the right side
|'primary'
|-
!align="right" |data-legend
|caption of the graph (used in the legend and at the cursor) or an array of legend texts if more than one graph shall be displayed.
|-
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|10
|-
!align="right" |data-minvalue_sec
|min Y value to Show or an array of values for dynamic minY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|30
|-
!align="right" |data-maxvalue_sec
|max Y value to Show or an array of values for dynamic maxY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-yticks
|value distance between Y tick lines (related to primary axis). A value of 'auto' means that the value is calculated from the data displayed dynamically.
|'auto'
|-
!align="right" |data-xticks
|time range between each X tick lines (in minutes). A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-daysago_start
|number of days back from now for the start of the plot (0 means the plot starts from today 0:00). Additionally the x-axis start value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'.
|0
|-
!align="right" |data-daysago_end
|number of days back from now for the end of the plot (-1 means the plot ends today 24:00). Additionally the x-axis end value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'.
|-1
|-
!align="right" |data-nofulldays
|switch to activate/deactivate rounding of the xaxis start and end values to full days ('true' or 'false')
|'false'
|-
!align="right" |data-ytext
|text to be shown besides the primary y axis.
|-
|-
!align="right" |data-ytext_sec
|text to be shown besides the secondary y axis.
|-
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks for primary y axis.
|-
|-
!align="right" |data-crosshair
|switch to activate/deactivate the crosshair cursor ('true' or 'false')
|'false'
|-
!align="right" |data-cursorgroup
|number to define coupling of the crosshair cursor. The cursors of all charts having the same number are coupled and move together.
|-
|-
!align="right" |data-scrollgroup
|number to define coupling of the scrolling (shift and zoom). All charts having the same number are scrolled (shifted and zoomed) together.
|-
|-
!align="right" |data-showlegend
|switch to activate/deactivate the initial display of the legend window ('true' or 'false')
|'false'
|-
!align="right" |data-yunit_sec
|unit of the value to show beside of each Y ticks for secondary y axis.
|-
|-
!align="right" |data-width
|fixed size for width (in % or px)
|-
|-
!align="right" |data-height
|fixed size for height (in % or px)
|-
|-
!align="right" |class
|fullsize, noticks, nobuttons
|
|-
|}

<code>data-logfile</code> can be omitted in this case the default value "-" will be used. This means that the current logfile is going to be used.

There are several buttons that control the dynamic behaviour of the chart. The <-, ->, + and - buttons shift and zoom the displayed data. The "legend" and "cursor" buttons are switching on and off the display of the legend window and the crosshair cursor respectively.

When the legend window is displayed, a click on the legend text shows/hides the respective graph. The legend window can be dragged to other positions on desktop browsers (currently not yet working for iOS and Android).

The crosshair cursor currently only works dynamically on desktop browsers. On iOS and Android you have to tap on the screen to set the cursor to a new position.

There is a number of css styles that control the visible appearance of the chart. The following classes are supported:

{| class="wikitable"
!CSS class name
!Description
|-
!.chart-background
|Color etc. for the chart background
|-
!.text.axes
|Font and color for the chart axes
|-
!.buttons
|Size and color for the buttons (shift etc.)
|-
!.gridlines
|Size and color for gridlines generally
|-
!.xaxis
|Font, size and color for xaxis
|-
!.yaxis
|Font, size and color for yaxis
|-
!.xticks
|Font, size and color for xticks
|-
!.yticks
|Font, size and color for yticks
|-
!.crosshair
|Font, size and color (foreground/background) for the crosshair cursor
|-
!.caption
|Font, size and color for text buttons for legend and cursor switching
|-
!.legend
|Font, size and background color for legend window
|-
|-
|}

[[#Beispiel_chart|Link zu einem Beispiel]]

<div id="circlemenu">'''CIRCLEMENU'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-item-diameter
|diameter of the circle
|52
|-
!align="right" |data-circle-radius
|radius of each item, in pixel
|70
|-
!align="right" |data-direction
|position of the items in relation to the center
|'full'
|-
!align="right" |data-close-after
|closing time of the circle-menu
|(item-count + 1s) or a minimum of 4s
|-
!align="right" |class
|keepopen
|
|-
|}

Optionen für data-direction: top | right | bottom | left | top-right | top-left | bottom-right | bottom-left | top-half | right-half | bottom-half | left-half | full | vertical | horizontal

[[#Beispiel_circlemenu|Link zu einem Beispiel]]

<div id="dimmer">'''DIMMER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-get-on
|value for ON status to get
|'on'
|-
!align="right" |data-get-off
|value for OFF status to get
|'off'
|-
!align="right" |data-set
|(<command> <device> <reading> <value>)
|
|-
!align="right" |data-set-on
|value for ON status to set
|value of data-get-on
|-
!align="right" |data-set-off
|value for OFF status to set
|value of data-get-off
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-dim
|name of the reading responsible for dim (<command> <device> <reading> <value>)
|value of data-get-on
|-
!align="right" |data-icon
|name of the font-awesome icon
|fa-lightbulb-o
|-
|}

[[#Beispiel_dimmer|Link zu einem Beispiel]]

<div id="homestatus">'''HOMESTATUS'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-get-on
|array of states using for get
|['1','2','3','4']
|-
!align="right" |data-set-on
|array of states using for set.
|value of data-get-on
|-
!align="right" |data-alias
|array of fix names to show only in the UI as an alias to the real states
|''
|-
!align="right" |data-icons
|array of icons related to the data-get-on array
|''
|-
!align="right" |data-version
|name of the status model e.g. 'residents','roommate','guest'
|(default NULL)
|-
|}

The default version has 4 states: '1','2','3','4' The default aliases are 'Home','Night','Away','Holiday'; data-version='residents' or 'roommate' or 'guest' has 5 states ('home','asleep','absent','gone','gotosleep') They have these aliases 'Home','Night','Away','Holiday','Retire'

[[#Beispiel_homestatus|Link zu einem Beispiel]]

<div id="image">'''IMAGE'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get an URL from Fhem
|'STATE'
|-
!align="right" |data-size
|width of the image in px or %, the height scales proportionally
|50%
|-
!align="right" |data-url
|URL of the image to show (use data-url or data-device + data-get, not both)
|
|-
!align="right" |data-refresh
|Interval in seconds for image refresh for usage together with data-url
|900
|-
|}

[[#Beispiel_image|Link zu einem Beispiel]]

=== Widgets LABEL ===
<div id="label">'''LABEL'''</div>

Mit dem LABEL Widget kann der STATUS eines Device in Textform angezeigt werden. Dabei kann das die Farbe des Anzeigetext abhängig von dessen Wert festgelegt werden.

Neben den '''allgemeine Attribute''' besitzt das LABEL-Widget die nachfolgenden Attribute.

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|Name des Readings in FHEM
|
|-
!align="right" |data-fix
|Eine bestimmte Anzahl an Dezimalstellen
|'-1' -> non-numeric
|-
!align="right" |data-part
|split position of the space separated value to show or an RegEx
|
|-
!align="right" |data-color
| fix color attribute or DEVICE:READING for dynamic setting of label color
| ''
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits-get
|name of the DEVICE:Reading to colorize the label
|data-device:data-get
|-
!align="right" |data-limits
|an array of numeric values to affect the colour of the Label
|
|-
!align="right" |data-limits-part
|part number of the space separated value to show or a RegEx
|'-1' -> all
|-
!align="right" |data-unit
|add a unit after a numeric value. use encoded strings e.g. "%B0C%0A"
|
|-
!align="right" |data-substitution
|regex-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected
|
|-
!align="right" |data-hide
|string to compare with current value. hide element when it's value equals data-hide
|
|-
!align="right" |data-hideparents
|jquery selector to hide element's parents too
|
|-
!align="right" |class
|small, large, big, bigger, thin, red, green, blue, darker, timestamp, w1x, w2x, w3x, fixedlabel, icon, bg-limit
|
|}

Mit der Class 'fixedlabel' kann man Label einbauen, die einen festen Text (direkt im HTML) haben, aber trotzdem die Farbe per Reading Value beeinflusst werden könnte.<br>
Mit der Class 'icon' kann man Label einbauen, die wie Icons aussehen. Als Hintergrund gibt es 'icon round' (rund), 'icon square' (Rechteck mit abgerundeten Ecken) und 'icon squareborder' (Rechteck mit abgerundeten Ecken und einem zusätzlichen Rand).<br>
Mit der Class 'bg-limit' wird der Hintergrund des Icon auf grün oder rot gesetzt, passend zum on/off Status des data-limits.
Use data-color OR data-colors + data-limits, not both.

With class="bg-limit" it changes the background color not the forecolor according data-limits

class="icon square" or class="icon round" forces the label to a fix width and height in icon style

Special layout can be achieved by overwriting of following classes in the fhem-tablet-ui-user.css:

.label-precomma .label-comma .label-aftercomma .label-unit

e.g.: .label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }

Functions for data-substitution:

Array of replacements
RegEx-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected
data-substitution="weekdayshort"
JS functions data-substitution="toDate().ddmm()" - convert to day:month
data-substitution="toDate().hhmm()" - convert to hour:minutes

data-substitution="toDate().hhmmss()" - convert to hour:minutes:secondes

data-substitution="toDate().eeee()" - convert to name of the week day

data-substitution="toDate().ago()" - convert to time span

[[#Beispiel_label|Link zu einem Beispiel]]

=== Widgets LEVEL ===
<div id="level">'''LEVEL'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-min
|minimal value to set
|'0'
|-
!align="right" |data-max
|maximal value to set
|'100'
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-part
|part number of the space separated value to show or an RegEx
|
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits
|a array of numeric or RegEx values to affect the colour of the label
|
|-
!align="right" |class
|mini, horizontal
|
|-
|}

[[#Beispiel_level|Link zu einem Beispiel]] (fehlt noch)

<div id="pagetab">'''PAGETAB'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL of the new page to show
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|'fa-power-off'
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|''
|-
!align="right" |data-on-background-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-background-color
|color of OFF state
|'#505050'
|-
!align="right" |data-on-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-color
|color of Off state
|'#505050'
|-
!align="right" |data-get-on
|array of status to assign a special icon-list from data-icons
|
|-
!align="right" |data-icons
|array of icons related to the a data-get-on array
|
|-
!align="right" |class
|warn, activate (as additionals for data-icons)
|
|-
|}

[[#Beispiel_pagetab|Link zu einem Beispiel]]

<div id="playstream">'''PLAYSTREAM'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL des Radio-Streams
|-
!align="right" |data-get
|name of the reading to get the control state from FHEM
|'STATE'
|-
!align="right" |data-get-on
|value for PLAY status to get.
|'on'
|-
!align="right" |data-get-off
|value for STOP status to get.
|'off'
|-
!align="right" |data-volume
|name of the reading to get the volume value (0-100)
|volume
|-
|}

[[#Beispiel_playstream|Link zu einem Beispiel]]

<div id="popup">'''POPUP'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading where to get the alert value from
|'STATE'
|-
!align="right" |data-get-on
|value which trigger to open the dialog
|'on'
|-
!align="right" |data-off
|value which trigger to close the dialog
|'off'
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
|}

[[#Beispiel_popup|Link zu einem Beispiel]]

<div id="progress">'''PROGRESS'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-max
|maximal value to set or name of the reading which helds the max value
|100
|-
!align="right" |class
|novalue, percent
|
|-
|}

[[#Beispiel_progress|Link zu einem Beispiel]] (fehlt noch)

<div id="push">'''PUSH'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-set
| name of the reading to set on FHEM (<command> <device> <reading> <value>)
|
|-
!align="right" |data-set-on
|value to send when the the button get pressed oder ein Array zwischen dessen Werten umgeschaltet werden kann
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|'fa-circle'
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-doubleclick
|timeout to wait for a second click or touch. '0' disables the doubleclick feature.
|0
|-
!align="right" |data-countdown
|secondes for the countdown progress control
|autodetect from 'on-for-timer' command
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|
|-
!align="right" |data-off-background-color
|fix color attribute for OFF state or DEVICE:READING for dynamic setting
|#505050
|-
!align="right" |data-off-color
|fix color attribute for Off state or DEVICE:READING for dynamic setting
|#505050
|-
|}

'data-set-on' can also be an array of values to toggle between this values

[[#Beispiel_push|Link zu einem Beispiel]]

<div id="rotor">'''ROTOR'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" | data-delay
|time in millisecondes to wait until next list item get shown
|3500
|-
!align="right" |class
|fade, rotate
|''
|-
|}
Ohne Angabe von class erfolgt keine Animation.

[[#Beispiel_rotor|Link zu einem Beispiel]]

<div id="select">'''SELECT'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading that get the selected item of the list
|
|-
!align="right" |data-set
|name of the reading to set on Fhem (<command> <device> <reading> <value>)
|''
|-
!align="right" |data-list
|name of the reading to get a :-separated list from Fhem
|''
|-
!align="right" |data-items
|an array of fix items to show in the selection box (alternative if data-list is empty)
|
|-
!align="right" |data-alias
|an array of fix names to show only in the selection box as an alias to the real items
|
|-
!align="right" |data-cmd
|name of the command to send to Fhem (<command> <device> <reading> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-quote
|characters to enclose the send value
|
|-
!align="right" |class
|wider, w1x, w2x, w3x, large, big
|
|-
|}

[[#Beispiel_select|Link zu einem Beispiel]]

<div id="simplechart">'''SIMPLECHART'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-logdevice
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung)
|
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log)
|'-' means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int")
|''
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY
|10
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY
|30
|-
!align="right" |data-yticks
|value distance between Y tick lines
|5
|-
!align="right" |data-xticks
|time range between each X tick line (in Minuten)
|360 minutes
|-
!align="right" |data-daysago
|number of days back from now
|0
|-
!align="right" |data-caption
|name of the chart to show as text
|
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks
|
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
!align="right" |class
|fullsize, noticks
|
|-
|}

[[#Beispiel_simplechart|Link zu einem Beispiel]] (fehlt noch)

<code>data-logfile</code> kann man auch weglassen, dann greift der Defaultwert "-". Damit wird das neuste Logfile gelesen.

<div id="slider">'''SLIDER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|100
|-
!align="right" |data-step
|step value
|1
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-get-value
|RegEx to retrieve the value or part number of the space separated input to get the value
|'-1': all of the input
|-
!align="right" |data-set-value
|Format of the value to send to FHEM
|'$v': the value only
|-
!align="right" |data-width
|width for horizontal sliders
|'120px', for mini '60px'
|-
!align="right" |data-height
|height for vertical sliders
|'120px', for mini '60px'
|-
!align="right" |data-color
|color for quantity range
|'#aa6900'
|-
!align="right" |data-background-color
|color for range bar
|#404040
|-
!align="right" |class
|Aussehen/Ausrichtung
|
|-
|}

Für class steht mini, horizontal und negated (0 liegt oben) zur Verfügung.

[[#Beispiel_slider|Link zu einem Beispiel]]

<div id="switch">'''SWITCH'''</div>

{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-set
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-cmd
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-doubleclick
|timeout to wait for x millisecondes click or touch. '0' disables the doubleclick feature.
|'0'
|-
|}
Einstellung bei zwei Werten

{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get-on
|Wert, bei dem zum Status ON geschaltet werden soll.
|'on'
|-
!align="right" |data-get-off
|Wert, bei dem zum Status OFF geschaltet werden soll.
|'off'
|-
!align="right" |data-set-on
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf ON geschaltet wurde
|Wert von data-get-on
|-
!align="right" |data-set-off
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf OFF geschaltet wurde
|Wert von data-get-off
|-
!align="right" |data-icon
|Name des Font-Awesome Icon.
|'fa-lightbulb-o'
|-
!align="right" |data-background-icon
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-background-color
|Hintergrundfarbe beim Status on oder DEVICE:Reading bei dynamischen Einstellungen
|'#aa6900'
|-
!align="right" |data-off-background-color
|Hintergrundfarbe beim Status off oder DEVICE:Reading bei dynamischen Einstellungen
|'#505050'
|-
!align="right" |data-on-color
|Widget Farbe beim Status ON
|'#aa6900'
|-
!align="right" |data-off-color
|Widget Farbe beim Status OFF
|'#505050'
|-
|}

Einstellung bei mehreren Werten
{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-state
|Array mit Status Angaben
|
|-
!align="right" |data-set-state
|Array mit Status Angaben, die gesetzt werden sollen
|
|-
!align="right" |data-icons
|Array Icons zum zuvor definierten Status
|
|-
!align="right" |data-backgroundicons
|Array mit Hintergrund Icons zum zuvor definierten Status
|
|-
!align="right" |data-colors
|Array mit Farben zum zuvor definierten Status
|
|-
!align="right" |data-background-colors
|Array mit Hintergrund Farben zum zuvor definierten Status
|
|-
!align="right" |class : readonly
|Es wird nur der Status angezeigt und kann nicht geändert werden
|
|-
|}

<code>data-get-on</code> and <code>data-get-off</code> accept also RegEx values. e.g. data-get-on="[0-9]{1,3}|on" means set switch on if STATE is a numeric value or 'on'. data-get-off="!on" means accept all but the data-get-on value (negation)

[[#Beispiel_switch|Link zu einem Beispiel]]

=== Widget SYMBOL ===
<div id="symbol">'''SYMBOL'''</div>

Mit dem SYMBOL Widget kann der STATUS eines Device dargestellt werden. Dabei kann das angezeigte Symbol und dessen Farbe bestimmt werden. Wie bei anderen Widgets kann das Symbol und die Farbe vom State abhängig konfiguriert werden. Das SYMBOL-Widget dient nur zur Anzeige eines STATUS, es besitzt kein Möglichkeit der Interaktion.

Neben den '''allgemeine Attribute''' besitzt das SYMBOL-Widget die nachfolgenden Attribute.

dual state notation
{| class="wikitable"
! HTML Attribut !! Beschreibung !! Default Wert
|-
| data-get || Name des Reading, was gelesen werden soll || 'STATE'
|}

Einstellung bei zwei Werten
{| class="wikitable"
!HTML-Attribut !! Beschreibung !! Default-Wert
|-
|'''data-get-on''' ||Wert für on ||'open'
|-
|'''data-get-off''' ||Wert für off ||'closed'
|-
|'''data-icon''' ||Name des Symbols ||'ftui-window'
|-
|'''data-background-icon''' ||Hintergrundsymbol ||'''leer'''
|-
|'''data-on-background-color''' ||Farbe für ON-Zustand. ||'#aa6900'
|-
|'''data-off-background-color''' ||Farbe für OFF-Zustand. ||'#505050'
|-
|'''data-on-color''' ||Farbe für ON-Zustand. ||'#aa6900'
|-
|'''data-off-color''' ||Farbe für OFF-Zustand. ||'#505050'
|-
|}

Einstellung bei mehreren Werten

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-states
|Array für states.
|
|-
!align="right" |data-icons
|Array mit Icons zu data-states Array
|
|-
!align="right" |data-background-icons
|Array mit Icons zu data-states Array
|
|-
!align="right" |data-colors
|Array mit Farben zu data-states aArray
|''
|-
!align="right" |data-background-colors
|Array mit Hintergrundfarben zu data-states array
|''
|-
|}

data-get-on,data-get-off and data-states accept also RegEx values. The value for one icon can also contain an additional animatation CSS name, e.g. "fa-exclamation-triangle fa-blink" for a blinking Symbol

[[#Beispiel_symbol|Link zu einem Beispiel]]

=== Widgets THERMOSTAT===
<div id="thermostat">'''THERMOSTAT'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'desired-temp'
|-
!align="right" |data-temp
|reading for measured temperature of thermostates
|'measured-temp'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|'desired-temp'
|-
!align="right" |data-valve
|reading for valve position of thermostates
|
|-
!align="right" |data-min
|minimal value to set
| 10
|-
!align="right" |data-max
|maximal value to set
| 30
|-
!align="right" |data-minColor
|Farbe des Keises für Min
| #4477FF
|-
!align="right" |data-maxColor
|Farbe des Kreises für Max, zwischen Min und Max wird linear interpoliert
| #FF0000
|-
!align="right" |data-step
|step size for value adjustment e.g. 0.5
|1
|-
!align="right" |data-bgColor
|Die Farbe der Kreises zwischen den ticks
|'transparent'
|-
!align="right" |data-fgColor
|Die Farbe der zahl im Kreismittelpunkt
|#bbbbbb
|-
!align="right" |data-tkColor
|Die Farbe der ticks
|#696969
|-
|-
!align="right" |data-angleOffset
|Start der ticks im Kreis (in Winkelgraden, 0 = oben)
| -120
|-
!align="right" |data-angleArc
|Bereich der ticks im Kreis (in Winkelgraden)
|240
|-
!align="right" |class
|big, readonly
|
|-
|}

[[#Beispiel_thermostat|Link zu einem Beispiel]]

<div id="volume">'''VOLUME'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|''
|-
!align="rigth" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|70
|-
!align="right" |data-get-value
|RegEx to retrieve the value or part number of the space separated input to get the value
|'-1': all of the input
|-
!align="right" |data-set-value
|Format of the value to send to FHEM
|'$v': the value only
|-
!align="right" |data-tickstep
|distance between ticks
|4|20
|-
!align="right" |data-unit
|add a unit after the desired value.
|
|-
!align="right" |class
|mini, small, big, bigger, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back, readonly
|
|-
|}

[[#Beispiel_volume|Link zu einem Beispiel]] (fehlt noch)

<div id="weather">'''WEATHER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get the weather literal from Fhem
|'STATE'
|-
!align="right" |data-imageset
|collection of images to display current weather situation. Possible values: 'meteocons', 'kleinklima'
|'meteocons'
|-
!align="right" |data-image-path
|path to the images of the selected imageset
|/images/weather/
|-
|}

[[#Beispiel_weather|Link zu einem Beispiel]]

== Widgets -- Beispiele ==

<div id="Beispiel_chart">'''Chart'''</div>

Display a chart with similar capabilities as the FHEM plots

<pre>
<div data-type="chart"
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'
data-ptype='["lines","histeps","histeps","cubic"]'
data-uaxis='["primary","secondary","secondary","primary"]'
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="mm"
data-ytext_sec="Rain (mm)"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="2013-08-13T00:00:00"
data-daysago_end="2013-08-14T00:00:00"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</pre>

[[Datei:chart_tabletUI.png]]

<div id="Beispiel_circlemenu">'''Circlemenu'''</div>

Cover a lot of other button behind one single button

<pre>
<div class="left">
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="push" data-icon="fa-wrench"></div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -6"
data-icon="">-6</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -2"
data-icon="">-2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level 0"
data-icon="">0</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +3"
data-icon="">2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +9"
data-icon="">9</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +C"
data-icon="">12</div></li>
</ul>
</div>
<div data-type="label" class="cell">Woofer</div>
</div>
</pre>

[[Datei:circlemenu_tabletUI.png]]

<div id="Beispiel_dimmer">'''Dimmer'''</div>

Dimmer Widget Beispiel für Philips Hue

Minimalvariante
<pre>
<div data-type="dimmer" data-device="HUEDevice1"
data-get-on="!off" data-get-off="off"
data-set="pct"</div>
</pre>

Mit Anzeige der Dimstufe
<pre>
<div data-type="dimmer" data-device="HUEDevice1"
data-get="onoff"
data-get-on="1" data-get-off="0"
data-set=""
data-set-on="on" data-set-off="off"
data-dim="pct">
</div>
</pre>

Dimmer Widget für MilightDevice

<pre>
<div data-type="dimmer"
data-device="SonstWas"
data-get="brightness"
data-get-off="0"
data-get-on="[1-9][0-9]*"
data-set-on="on"
data-set-off="off"
data-dim="dim"
data-min="0"
data-max="100"
></div>
</pre>

<div id="Beispiel_homestatus">'''Homestatus'''</div>

Beispiel rechts im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
data-get-on='["1","2","3","4"]'
data-alias='["Home","Night","Away","Holiday"]'
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase"]'>
</div>
</pre>

Beispiel links im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
data-get-on='["home","asleep","absent","gone","gotosleep"]'
data-alias='["Home","Night","Away","Holiday","Retire"]'
data-icons='["fa-fire","fa-film","fa-plus","fa-car","fa-tint"]'
data-version='residents'>
</div>
</pre>

[[Datei:homestatus_tabletUI.png]]

<div id="Beispiel_image">'''Image'''</div>

Erzeugt ein Widget mit einem Bild aus dem www, das alle 5 Sekunden aktualisiert wird (hier eine Wetterkarte vom DWD).

<pre>
<div data-type="image"
data-size="80%"
data-url="http://www.dwd.de/wundk/wetter/de/Deutschland.jpg"
</div>
</pre>

[[Datei:image_tabletUI.jpg]]

Example for how to add an image to the dashboard which its URL is delivered by a Fhem module like PROPLANTA:

<pre>
<div data-type="image" data-device="Wetter1"
data-get="fc0_weatherDayIcon"
data-size="40px"
class="cell">
</div>
</pre>

<div id="Beispiel_label">'''Label'''</div>

Example for HM-WDS40-TH-I Funk-Temperatur-/Feuchtesensor innen

<pre>
STATE T: 20.0 H: 61
</pre>
<pre>
<div data-type="label" data-device="THSensorWZ"
data-part="2" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ" data-part="4"
data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>

But the same result can reached by getting single readings:
<pre>
humidity 58
temperature 20.1
</pre>

<pre>
<div data-type="label" data-device="THSensorWZ"
data-get="temperature" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ"
data-get="humidity" data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>

Example for how to influence the color of the label according to value limits
<pre>
<div data-type="label"
data-device="OutTemp"
data-limits='[-73,10,23]'
data-colors='["#6699FF","#AA6900","#FF0000"]'
data-unit="%B0C%0A"
class="cell big">
</div>
</pre>

Example for how to create a widget for shutter via push: show state and set up/down
<pre>
<div data-type="switch"
data-device="wzRollo"
data-get-on="up"
data-get-off="down"
data-icon="fa-bars"
class="cell" >
</div>
<div data-type="label"
class="cell">Rollo</div>
</pre>

Example for how to create a label for a time value in short format with usage of RegEx.

<pre>
<div data-type="label"
data-device="dummy1"
data-part="(\d\d\.\d\d\.).*"
class="cell">
</div>
</pre>

Example for how to show two labels in one line.

<pre>
<div class="">
<div type="label" device="OnSunrise" class="inline"></div>bis
<div type="label" device="OnSunset" class="inline"></div>
</div>
</pre>

Beispiel für die Anzeige des UV-Indexes und der Abhängigkeit der anzuzeigenden Farbe.

<pre>
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
data-get="fc0_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc0_date"></div>
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
data-get="fc1_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc1_date"></div>
</pre>

[[Datei:label_tabletUI.jpg]]

Beispiel für die Anzeige des Labels als Icon.
<pre>
<div class="cell">
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon round bg-red cell"></div>
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon square bg-blue cell"></div>
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon squareborder cell"></div>
<div data-type="label" data-device="PowerAV_Sw" data-colors='["red","green"]' data-limits='["off","on"]' class="icon round bg-limit cell"></div>
</div>
</pre>

[[Datei:Label_tabletUI_icon.png]]

<div id="Beispiel_pagetab">'''Pagetab'''</div>

Example for a tab menu to switch smoothly between multiple pages. Multiple pagetabs in a template file: menu.html

<pre>
<html>
<body>
<header>MENU</header>
<div class="cell">
<div data-type="pagetab" data-url="index.html" data-icon="fa-home" class="cell"></div>
<div data-type="pagetab" data-url="index_2.html" data-icon="fa-sliders" class="cell"></div>
<div data-type="pagetab" data-url="index_3.html" data-icon="fa-music" class="cell"></div>
<div data-type="pagetab" data-url="index_4.html" data-icon="fa-hotel" class="cell"></div>
<div data-type="pagetab" data-url="index_5.html" data-icon="fa-music" class="cell"></div>
<div data-type="pagetab" data-url="index_6.html" data-icon="fa-database" class="cell"></div>
<div data-type="pagetab" data-url="index_7.html" data-icon="fa-fax" class="cell"></div>
</div>
</body>
</html>
</pre>

<div id="Beispiel_playstream">'''Playstream'''</div>

Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.

<pre>
<div data-type="playstream" data-url="http://radioeins.de/stream"></div>
<div data-type="label" class="darker">Radio eins</div>
</pre>

<div id="Beispiel_push">'''Push'''</div>

Example for how to create a push button widget to trigger all devices on:

<pre>
<div data-type="push"
data-device="LightAll"
data-cmd="trigger"
data-set="on"
class="cell">
</div>
</pre>

Beispiel für zwei horizontale Buttons:

<pre>
<div class="cell">
<div class="doublebox-h">
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push1.png]]

Beispiel für zwei quadratische vertikale Buttons:

<pre>
<div class="cell">
<div class="doublebox-v">
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push2.png]]

<div id="Beispiel_rotor">'''Rotor'''</div>

Example for a rotor widget, which switches between to days of weather forecast

<pre>
<div data-type="rotor" class="fade">
<ul>
<li>
<div data-type="label" class="darker">Heute</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
<li>
<div data-type="label" class="darker">Morgen</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
</ul>
</div>
</pre>

<div id="Beispiel_select">'''Select'''</div>

Erzeugt zwei Comboboxen zur Auswahl des Eingang eines 2-Zonen-AV-Receivers. Die Liste für Zone2 ist fest, die Liste für Zone1 wird von Fhem übergeben.

<pre>
<div class="cell wider">
<div data-type="label" class="inline wider">Zone2</div>
<div data-type="select" data-device="AvReceiverZ2" data-items='["Airplay","Webradio","BD/DVD","PHONO"]' data-get="input" data-set="input" class="cell w2x" ></div>
<div></div>
<div data-type="label" class="inline">Zone1</div>
<div data-type="select" data-device="AvReceiver" data-list="inputs" data-get="input" data-set="input" class="cell w2x" ></div>
</div>
</pre>

[[Datei:select_tabeltUI.png]]

<div id="Beispiel_slider">'''Slider'''</div>

Slider mit einstellbaren Werten von 10 bis 90:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</pre>

[[Datei:slider_tabletUI.png]]

Horizontal angeordneter Slider:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="0"
data-max="100"
class="horizontal"
</div>
</pre>

[[Datei:slider_tabletUI2.jpg]]

<div id="Beispiel_switch">'''Switch'''</div>

Schalter. Usage of RegEx pattern for state request:

<pre>
<div data-type="switch" class="cell"
data-device="MILIGHT_Zone1_Wohnzimmer"
data-get-on="on.*"
data-get-off="off"></div>
</pre>

[[Datei:switch.png]]

Beispiel für eine Gruppe von Schaltern, um zwischen vier verschiedenen Werten eines device umzuschalten:

<pre>
<div class="cell left">
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert1).)*"
data-get-on="Wert1" class="cell" ></div>
<div data-type="label" class="cell">Wert1</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert2).)*"
data-get-on="Wert2" class="cell" ></div>
<div data-type="label" class="cell">Wert2</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert3).)*"
data-get-on="Wert3" class="cell" ></div>
<div data-type="label" class="cell">Wert3</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert4).)*"
data-get-on="Wert4" class="cell" ></div>
<div data-type="label" class="cell">Wert4</div>
</div>
</pre>

[[Datei:switch4.png]]

<div id="Beispiel_symbol">'''Symbol'''</div>

Example for a tristate icon

<pre>
<div data-type="symbol" data-device="dummy1"
data-get-on='["wert1","wert2","wert3"]'
data-icons='["fa-arrow-up","fa-user","fa-arrow-down"]'
data-on-colors='["SeaGreen","SlateBlue","IndianRed"]'
class="cell big">
</div>
</pre>

Example for a tristate icon with blink and spin animation

<pre>
<div data-type="symbol" data-device="dummy1"
data-icons='["fa-exclamation-triangle fa-blink","fa-exclamation-circle","fa-cog fa-spin"]'
data-on-colors='["Crimson","GoldenRod","SeaGreen"]'
data-get-on='["Wert1","Wert2","Wert3"]' >
</div>
</pre>

Example for a battery level control with RegEx

<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
data-icons='["oa-measure_battery_100","oa-measure_battery_75","oa-measure_battery_50","oa-measure_battery_25","oa-measure_battery_0"]'
data-get-on='["3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]'
data-on-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'>
</div>
</pre>

Example for a battery level control with greater-equal compare and 90° rotated symbols

<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'
data-get-on='["0","2","2.4","2.7","3.0"]'
data-on-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'>
</div>
</pre>

<div id="Beispiel_thermostat">'''Thermostat'''</div>

Configure as data-device='...' that item which delivers temp and desired-temp as reading.

Default parameters are:
<pre>
data-get="desired-temp" data-temp="measured-temp" data-set="desired-temp"
</pre>

Therefor for HomaMatic HM-CC-RT-DN this is sufficient.

<pre>
<div data-type="thermostat" data-device='KH_Clima' class="cell"></div>
</pre>

The long format looks like this:

<pre>
<div data-type="thermostat"
data-device="KH_Clima"
data-get="desired-temp"
data-temp="measured-temp"
class="cell">
</div>
</pre>

Example for MAX!:
<pre>
<div data-type="thermostat" data-device="HZ_Tuer"
data-valve="valveposition"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature"
class="cell">
</div>
</pre>

The wigets will show the valve value only in case of a valid data-valve attribute. The default for data-valve ist null. That means, a empty data-valve attribute hides the valve label for the widget.

[[Datei:thermostat.png]]

<div id="Beispiel_weather">'''Weather'''</div>

Das Widget fügt ein dem Wetter entsprechendes Bild ein. Die Daten können durch Fhem-Module wie [[PROPLANTA]], [[OPENWEATHER]] und [[Weather]] bereitgestellt werden.
Add 'big' or 'bigger' to CSS class to get a bigger weather icon.

Beispiel:
<pre>
<div data-type="weather"
data-device="Weather"
data-get="fc0_weatherDay"
class="cell big">
</div>
</pre>

[[Datei:weather.png]]

== Icon-Konfiguration ==

* Eingebaute Icons: Diese haben das ftui-Präfix. Zurzeit sind folgende verfügbar: ftui-window, ftui-door

* Mehr als 500 Icons von "http://fortawesome.github.io/Font-Awesome/icons" verfügbar. Einfach den Icon-Namen angeben (Präfix "fa-" nicht vergessen, Z.B. <code>data-icon="fa-volume-up"</code>

* Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.
<pre>
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
</pre>

Diese font icons haben das Präfix 'fs-' bzw. 'oa-'.

Beispiel bei einem Schalter:
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>

Und so als großes Symbol:
<pre>
<div data-type="symbol" data-device='dummy1'
data-icon="oa-status_frost"
data-on-color="#bb3232"
data-get-on="on"
data-get-off="!on"
class="bigger">
</div>
</pre>

Die Icons kann man auch etwas dicker darstellen mit den Zusatz bold: <code>data-icon="oa-secur_locked bold"</code>

Die Namen der verfügbaren Icons findet man auch in den CSS Files (openautomation.css / fhemSVG.css)

== Spezial ==
Folgender Befehl setzt einen direkten Befehl an Fhem ab (<code>set dummy1 off</code>):
<pre>
<div onclick="setFhemStatus('set dummy1 off')">All off!</div>
</pre>

== FAQ ==
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM_Tablet_UI/FAQ|FHEM Tablet UI FAQ]] zusammengestellt.

== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* [http://forum.fhem.de/index.php/topic,37378.0.html User-Demos]
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]

[[Kategorie:FHEM Frontends]]

FHEM Tablet UI

2016-03-16T18:44:15Z

Svenson08: /* Widgets SYMBOL */

{{Infobox Modul
|ModPurpose=Oberfläche für Fhem
|ModType=x
|ModFTopic=34233
|ModForumArea=Frontends
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
[[Datei:tablet_ui.png|200px|thumb|right|Fhem Tablet UI]]
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in Fhem integrierten Geräten. Zahlreiche Widgets können sehr flexibel und leicht per HTML Code konfiguriert werden.

In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben.

{{Todo|alle Widgets hier übernehmen, Übersetzung, weitere Beispiele aus dem Forum einfügen (evtl. mit Link!?)}}

== Voraussetzungen ==
Das User Interface hat sehr wenige Anforderungen für den Betrieb. Es benötigt <u>keine</u> zusätzliche Frameworks, wie z.B. PHP oder MySQL.

Voraussetzungen ist eine Fhem Installation mit HTTPSRV Modul. Das UI kann mit den gängigen Browsern Betriebssystem unabhängig genutzt werden oder mit dem Webviewcontrol.
Das Interface wird dabei in dem FHEM eigenen Webserver ausgeführt. Mit wenigen Anpassungen ist es auch möglich das UI auf anderen Webservern (Apache, u.a.) zu betreiben, dann kann FHEM und UI auch auf getrennten Systemen ausgeführt werden.

== Installation ==
* Im Befehls-Eingabefeld eingeben: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* Im Befehls-Eingabefeld eingeben: <code>define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI</code>
* Im Verzeichnis ./fhem/www/tablet die Datei index-example.html in index.html umbenennen oder eine neue index.html erzeugen und diese index.html wie nachfolgend beschrieben editieren.

Das UI ist über den Link "Tablet-UI" auf der Fhem-Hauptseite oder durch Direktaufruf der URL "<nowiki>http://<Fhem-url>:8083/fhem/tablet/index.html</nowiki>" zu erreichen.

Hinweise zu einer manuellen Installation und weitere Infos sind auf der Projektseite https://github.com/knowthelist/fhem-tablet-ui zu finden.

== Update ==
* Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von: <code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* Update des UI durch Eingabe von: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Über
<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
kann seit dem 24.12.2015 die URL zum normalen Updatebefehl von FHEM hinzugefügt werden. Mit einen "update check" sieht man dann gleich alle Updates aus beiden "Welten".

== Weitere Widgets ==

=== Widgets for Fhem-tablet-ui ===
Zusätzlich zu den bei der Installation des Tablet UI direkt zur Verfügung stehenden Widgets, gibt es eine weitere Widget-Quelle von nesges unter https://github.com/nesges/Widgets-for-fhem-tablet-ui. Die Widgets aus dieser Quelle müssen für eine Nutzung separat installiert werden.

Dazu folgenden Befehl in die Fhem-Befehlszeile eingeben: <code><nowiki>update all https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt</nowiki></code>.

Näheres zur Installation unter [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/Installation Wiki: Installation].

Die Dokumentation der einzelnen Widgets befindet sich ebenfalls [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki im Github-Wiki].

== Konfiguration ==
'''META-Parameter'''

Das Tablet UI lässt sich über die META-Parameter konfigurieren. Mit den meisten META-Parametern kann das verhalten des UI beeinflusst werden. Diese Parameter befinden sich in der jeweiligen '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>'''. Nachfolgend sind die verschiedenen Konfigurationsparameter aufgeführt. Die Parameter sind immer gleich aufgebaut.

:<code><meta name="<META-Parameter>" content="<Wert>"></code>

{| class="wikitable"
|-
! META-Parameter !! Wert / Beispiel !! Erklärung
|-
| longpoll || 1 oder 0 || Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh.
|-
| gridster_disable || 1 oder 0 || Drag&Drop der Gridster-Elemente auf der Seite deaktivieren.
|-
| toast || 1 oder 0 || Toast messages deaktivieren
|-
| fhemweb_url || http://meinFhemServer:8083/fhem || Wird benötigt wenn der Webserver des TabletUI nicht auf dem FHEM Server läuft.
|-
| widget_margin || 1 bis 9999 || Abstände der Gridsterelemente verändern.
|-
| widget_base_width || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.
|-
| widget_base_height || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.
|}

'''CSS-Styles'''

Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt [[#CSS Class description|CSS Class description]] oder [[#Positioning|Positioning]] aufgeführt. Es besteht auch die Möglichkeit eine eigene CSS Datei zu erstellen und darüber Änderungen am aussehen des UI vorzunehmen. Die eigenen CSS Datei würde bei einem Update unverändert bleiben. Daher ist abzuraten ein CSS Datei die mit dem UI Update verteilt wird zu modifizieren. Die eigene CSS Datei ist unter '''/fhem/tablet/css''' mit dem Namen '''fhem-tablet-ui-user.css''' zu finden. Sollte diese nicht vorhanden sein kann die Datei manuell erstellt werden.
Wird keine eigene CSS-Datei verwendet empfiehlt es sich den folgenden Eintrag im <head> der jeweiligen .html Datei zu entfernen, bzw. in Kommentar gesetzt werden um Probleme beim Laden der Seite zu verhindern.

:<code><link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /></code>

== Farbe ==
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form oder als RGB-Wert anzugeben. Zum Beispiel: Hex: #A3CFA3 RBG: rgb(163, 207, 163).

Knallige Farben wie #ff0000 für Rot oder #00ff00 für Grün sollten vermieden werden. Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.

Hilfreich bei der Suche nach den Farbwerten ist der color picker: http://www.w3schools.com/tags/ref_colorpicker.asp

== CSS Class description ==

Not all widgets support all classes

* readonly : changing of state is not allowed
* wider : 25px extra space for the widget to the top
* narrow : shorter distant to the widget above
* w1x, w2x, w3x : set the widget to a fix width: 1x, 2x, 3x width
* mini : lowest diameter for volume widget
* small : font 80% size (label), small diameter for volume widget
* medium : font 120% size
* large : font 150% size
* big : font 200% size
* bigplus : font 270% size
* bigger : font 320% size
* bigger.thin : font 450% size
* grande : font 600% size
* gigantic: font 144px size + 120px line-height
* thin : font thin
* darker : forecolor in gray
* hue-tick : draw ticks in color range
* hue-front : draw handle in color range
* hue-back : draw background in color range
* dim-tick : draw ticks in brightness range
* dim-front : draw handle in brightness range
* dim-back : draw background in brightness range
* red : foreground color red
* green : foreground color green
* blue : foreground color blue
* doublebox-v : container to place 2 small widgets (e.g. switch) one above the other
* doublebox-h : container to place 2 small widgets (e.g. switch) side by side
* timestamp : deliver the date time for the reading instead the value
* inline : positioning elements in a row, no line break
* top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
* left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
* right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
* blink : blink animatation for label or symbol widget
* verticalLine : Vertikale Line am rechten Rand

== Positioning ==

*container : new box or new row
*col-x-y : new column with x/y of width (col-1-3,col-2-3,col-1-2,col-1-4,col-1-8,col-1-5,col-2-5,col-3-5,col-4-5)
*inline : positioning elements in a row, no line break
*top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
*left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
*right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
*top-narrow : -15px closer on top (top-narrow-2x -> -30px; top-narrow-10 -> -10px)
*centered : horizontal centered
*left-align : align text left
*left : floating left
*right-align : align text right
*right : floating right
*wider : 15px extra space for the widget all around
*narrow : shorter distant to the widget above
*fullsize : 100% in width and height

== Widgets -- Konfiguration ==

Teilweise dokumentierte Widgets:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/button button]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen Fhem-Befehl absetzen kann.
* [[#chart|chart]]: chart with similar capabilities as the FHEM plots
* checkbox:
* [[#circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clicksound clicksound]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clock clock]: Das Widget "clock" stellt eine einfach Uhr zur verfügung.
* colorwheel:
* daytimepicker:
* departure:
* [[#dimmer|dimmer]]: toogle button with a setter for on value
* eventmonitor:
* highchart:
* [[#homestatus|homestatus]]: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]]: Widget zum Einbinden externer Inhalte in einem Iframe.
* [[#image|image]]: insert an image, the URL is given by a reading
* input:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/klimatrend klimatrend]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt.
* Knob:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* [[#label|label]]: STATE als Text anzeigen
* [[#level|level]]: vertical/horizontal bar to show values between min/max value
* link:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/multistatebutton multistatebutton]: Variante des push-Widgets das den set-Befehl abhängig vom gelesenen Status ändert.
* [[#pagetab|pagetab]]: Element to smoothly exchange the whole page with another page
* pagebutton:
* [[#playstream|playstream]]: Abspielen eines Webradio-Streams per Button
* [[#popup|popup]]: a popup dialog which open on click on another widget
* [[#progress|progress]]: round symbolic display for percent values
* [[#push|push]]: send any command to Fhem e.g. up / down
* range:
* readingsgroup:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads
* [[#rotor|rotor]]: Umschalten von zwei oder mehr Widgets an einer Position
* [[#select|select]]: Combobox to provide a list for selection
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: zum anzeigen und einstellen einer Uhrzeit.
* [[#simplechart|simplechart]]: simple XY line chart for one value (reads directly from Fhem log file)
* [[#slider|slider]]: vertical slider to select between min/max value
* spinner:
* swiper:
* [[#switch|switch]]: Toggle any command to Fhem (e.g. on / off)
* [[#symbol|symbol]]: State als Symbol darstellen (z.B. Fenster offen)
* [[#thermostat|thermostat]]: dial for heater thermostates to set desired value and show current value
* [[#volume|volume]]: dial to set a single value (e.g. 0-60)
* [[#weather|weather]]: insert an icon or image, represending a weather literal
* [https://github.com/svenson08/ftui-weekdaytimer-widget weekdaytimer]: Visualisierung des [[WeekdayTimer]] Modul
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/wind_direction wind_direction]: Zeigt die Windrichtung auf einer Windrose an.

Ein Demo der Widgets findet ihr [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Hier].
----------------------------------

Für alle Widgets gilt:
{| class="wikitable"
|+allgemeine Attribute
|-
!align="right" |data-type
|Widget-Typ
|-
!align="right" |data-device
|Fhem-Name des Gerätes (mit dem Befehl 'list' bekommt man im Fhem die kpl. Liste)
|-
!align="right" |class
|CSS-Klassen für Aussehen und Formatierung des Widgets
|-
|}

{| class="wikitable"
|+Daten Empfangen
|-
!align="right" |data-get
|Reading Name
|-
!align="right" |data-get-on
|Wert für den Status on
|-
!align="right" |data-get-off
|Wert für den Status off
|-
|}

{| class="wikitable"
|+Daten Senden
|-
!align="right" |data-set
|Reading Name
|-
!align="right" |data-set-on
|Wert für den Status on
|-
!align="right" |data-set-off
|Wert für den Status off
|-
|}

<div id="chart">'''CHART'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-logdevice
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung) or array of names if more than one graph shall be displayed
|-
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log) or or array of names if more than one graph shall be displayed
|'-' or omitting this data means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int") or or array of columnspecs if more than one graph shall be displayed
|-
|-
!align="right" |data-style
|name of the graph style to be used (e.g. 'SVGplot l0' or 'ftui l0dash') or or array of styles if more than one graph shall be displayed using different stlyes. The standard fhem plot styles can be used furthermore there are some more predefined styles existing (details see css file). Own styles can be specified e.g. in the fhem-table-ui-user.css file.
|-
|-
!align="right" |data-ptype
|name of the plot type (e.g. 'lines' or 'fa-cog') or or array of plottypes if more than one graph shall be displayed. All fhem plot styles are supported. Additionally it is possible to specify symbols (currently supported are font awesome ('fa-...'), open automation ('oa-...') and fhem symbols ('fs-...'))
|'lines'
|-
!align="right" |data-uaxis
|name of the axis to be used ('primary' or 'secondary') or or array of axis' to be used if more than one graph shall be displayed. The 'primary' axis is labelled on the left side, the 'secondary' axis is labelled on the right side
|'primary'
|-
!align="right" |data-legend
|caption of the graph (used in the legend and at the cursor) or an array of legend texts if more than one graph shall be displayed.
|-
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|10
|-
!align="right" |data-minvalue_sec
|min Y value to Show or an array of values for dynamic minY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|30
|-
!align="right" |data-maxvalue_sec
|max Y value to Show or an array of values for dynamic maxY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-yticks
|value distance between Y tick lines (related to primary axis). A value of 'auto' means that the value is calculated from the data displayed dynamically.
|'auto'
|-
!align="right" |data-xticks
|time range between each X tick lines (in minutes). A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-daysago_start
|number of days back from now for the start of the plot (0 means the plot starts from today 0:00). Additionally the x-axis start value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'.
|0
|-
!align="right" |data-daysago_end
|number of days back from now for the end of the plot (-1 means the plot ends today 24:00). Additionally the x-axis end value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'.
|-1
|-
!align="right" |data-nofulldays
|switch to activate/deactivate rounding of the xaxis start and end values to full days ('true' or 'false')
|'false'
|-
!align="right" |data-ytext
|text to be shown besides the primary y axis.
|-
|-
!align="right" |data-ytext_sec
|text to be shown besides the secondary y axis.
|-
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks for primary y axis.
|-
|-
!align="right" |data-crosshair
|switch to activate/deactivate the crosshair cursor ('true' or 'false')
|'false'
|-
!align="right" |data-cursorgroup
|number to define coupling of the crosshair cursor. The cursors of all charts having the same number are coupled and move together.
|-
|-
!align="right" |data-scrollgroup
|number to define coupling of the scrolling (shift and zoom). All charts having the same number are scrolled (shifted and zoomed) together.
|-
|-
!align="right" |data-showlegend
|switch to activate/deactivate the initial display of the legend window ('true' or 'false')
|'false'
|-
!align="right" |data-yunit_sec
|unit of the value to show beside of each Y ticks for secondary y axis.
|-
|-
!align="right" |data-width
|fixed size for width (in % or px)
|-
|-
!align="right" |data-height
|fixed size for height (in % or px)
|-
|-
!align="right" |class
|fullsize, noticks, nobuttons
|
|-
|}

<code>data-logfile</code> can be omitted in this case the default value "-" will be used. This means that the current logfile is going to be used.

There are several buttons that control the dynamic behaviour of the chart. The <-, ->, + and - buttons shift and zoom the displayed data. The "legend" and "cursor" buttons are switching on and off the display of the legend window and the crosshair cursor respectively.

When the legend window is displayed, a click on the legend text shows/hides the respective graph. The legend window can be dragged to other positions on desktop browsers (currently not yet working for iOS and Android).

The crosshair cursor currently only works dynamically on desktop browsers. On iOS and Android you have to tap on the screen to set the cursor to a new position.

There is a number of css styles that control the visible appearance of the chart. The following classes are supported:

{| class="wikitable"
!CSS class name
!Description
|-
!.chart-background
|Color etc. for the chart background
|-
!.text.axes
|Font and color for the chart axes
|-
!.buttons
|Size and color for the buttons (shift etc.)
|-
!.gridlines
|Size and color for gridlines generally
|-
!.xaxis
|Font, size and color for xaxis
|-
!.yaxis
|Font, size and color for yaxis
|-
!.xticks
|Font, size and color for xticks
|-
!.yticks
|Font, size and color for yticks
|-
!.crosshair
|Font, size and color (foreground/background) for the crosshair cursor
|-
!.caption
|Font, size and color for text buttons for legend and cursor switching
|-
!.legend
|Font, size and background color for legend window
|-
|-
|}

[[#Beispiel_chart|Link zu einem Beispiel]]

<div id="circlemenu">'''CIRCLEMENU'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-item-diameter
|diameter of the circle
|52
|-
!align="right" |data-circle-radius
|radius of each item, in pixel
|70
|-
!align="right" |data-direction
|position of the items in relation to the center
|'full'
|-
!align="right" |data-close-after
|closing time of the circle-menu
|(item-count + 1s) or a minimum of 4s
|-
!align="right" |class
|keepopen
|
|-
|}

Optionen für data-direction: top | right | bottom | left | top-right | top-left | bottom-right | bottom-left | top-half | right-half | bottom-half | left-half | full | vertical | horizontal

[[#Beispiel_circlemenu|Link zu einem Beispiel]]

<div id="dimmer">'''DIMMER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-get-on
|value for ON status to get
|'on'
|-
!align="right" |data-get-off
|value for OFF status to get
|'off'
|-
!align="right" |data-set
|(<command> <device> <reading> <value>)
|
|-
!align="right" |data-set-on
|value for ON status to set
|value of data-get-on
|-
!align="right" |data-set-off
|value for OFF status to set
|value of data-get-off
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-dim
|name of the reading responsible for dim (<command> <device> <reading> <value>)
|value of data-get-on
|-
!align="right" |data-icon
|name of the font-awesome icon
|fa-lightbulb-o
|-
|}

[[#Beispiel_dimmer|Link zu einem Beispiel]]

<div id="homestatus">'''HOMESTATUS'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-get-on
|array of states using for get
|['1','2','3','4']
|-
!align="right" |data-set-on
|array of states using for set.
|value of data-get-on
|-
!align="right" |data-alias
|array of fix names to show only in the UI as an alias to the real states
|''
|-
!align="right" |data-icons
|array of icons related to the data-get-on array
|''
|-
!align="right" |data-version
|name of the status model e.g. 'residents','roommate','guest'
|(default NULL)
|-
|}

The default version has 4 states: '1','2','3','4' The default aliases are 'Home','Night','Away','Holiday'; data-version='residents' or 'roommate' or 'guest' has 5 states ('home','asleep','absent','gone','gotosleep') They have these aliases 'Home','Night','Away','Holiday','Retire'

[[#Beispiel_homestatus|Link zu einem Beispiel]]

<div id="image">'''IMAGE'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get an URL from Fhem
|'STATE'
|-
!align="right" |data-size
|width of the image in px or %, the height scales proportionally
|50%
|-
!align="right" |data-url
|URL of the image to show (use data-url or data-device + data-get, not both)
|
|-
!align="right" |data-refresh
|Interval in seconds for image refresh for usage together with data-url
|900
|-
|}

[[#Beispiel_image|Link zu einem Beispiel]]

=== Widgets LABEL ===
<div id="label">'''LABEL'''</div>

Mit dem LABEL Widget kann der STATUS eines Device in Textform angezeigt werden. Dabei kann das die Farbe des Anzeigetext abhängig von dessen Wert festgelegt werden.

Neben den '''allgemeine Attribute''' besitzt das LABEL-Widget die nachfolgenden Attribute.

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|Name des Readings in FHEM
|
|-
!align="right" |data-fix
|Eine bestimmte Anzahl an Dezimalstellen
|'-1' -> non-numeric
|-
!align="right" |data-part
|split position of the space separated value to show or an RegEx
|
|-
!align="right" |data-color
| fix color attribute or DEVICE:READING for dynamic setting of label color
| ''
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits-get
|name of the DEVICE:Reading to colorize the label
|data-device:data-get
|-
!align="right" |data-limits
|an array of numeric values to affect the colour of the Label
|
|-
!align="right" |data-limits-part
|part number of the space separated value to show or a RegEx
|'-1' -> all
|-
!align="right" |data-unit
|add a unit after a numeric value. use encoded strings e.g. "%B0C%0A"
|
|-
!align="right" |data-substitution
|regex-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected
|
|-
!align="right" |data-hide
|string to compare with current value. hide element when it's value equals data-hide
|
|-
!align="right" |data-hideparents
|jquery selector to hide element's parents too
|
|-
!align="right" |class
|small, large, big, bigger, thin, red, green, blue, darker, timestamp, w1x, w2x, w3x, fixedlabel, icon, bg-limit
|
|}

Mit der Class 'fixedlabel' kann man Label einbauen, die einen festen Text (direkt im HTML) haben, aber trotzdem die Farbe per Reading Value beeinflusst werden könnte.<br>
Mit der Class 'icon' kann man Label einbauen, die wie Icons aussehen. Als Hintergrund gibt es 'icon round' (rund), 'icon square' (Rechteck mit abgerundeten Ecken) und 'icon squareborder' (Rechteck mit abgerundeten Ecken und einem zusätzlichen Rand).<br>
Mit der Class 'bg-limit' wird der Hintergrund des Icon auf grün oder rot gesetzt, passend zum on/off Status des data-limits.
Use data-color OR data-colors + data-limits, not both.

With class="bg-limit" it changes the background color not the forecolor according data-limits

class="icon square" or class="icon round" forces the label to a fix width and height in icon style

Special layout can be achieved by overwriting of following classes in the fhem-tablet-ui-user.css:

.label-precomma .label-comma .label-aftercomma .label-unit

e.g.: .label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }

Functions for data-substitution:

Array of replacements
RegEx-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected
data-substitution="weekdayshort"
JS functions data-substitution="toDate().ddmm()" - convert to day:month
data-substitution="toDate().hhmm()" - convert to hour:minutes

data-substitution="toDate().hhmmss()" - convert to hour:minutes:secondes

data-substitution="toDate().eeee()" - convert to name of the week day

data-substitution="toDate().ago()" - convert to time span

[[#Beispiel_label|Link zu einem Beispiel]]

=== Widgets LEVEL ===
<div id="level">'''LEVEL'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-min
|minimal value to set
|'0'
|-
!align="right" |data-max
|maximal value to set
|'100'
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-part
|part number of the space separated value to show or an RegEx
|
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits
|a array of numeric or RegEx values to affect the colour of the label
|
|-
!align="right" |class
|mini, horizontal
|
|-
|}

[[#Beispiel_level|Link zu einem Beispiel]] (fehlt noch)

<div id="pagetab">'''PAGETAB'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL of the new page to show
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|'fa-power-off'
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|''
|-
!align="right" |data-on-background-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-background-color
|color of OFF state
|'#505050'
|-
!align="right" |data-on-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-color
|color of Off state
|'#505050'
|-
!align="right" |data-get-on
|array of status to assign a special icon-list from data-icons
|
|-
!align="right" |data-icons
|array of icons related to the a data-get-on array
|
|-
!align="right" |class
|warn, activate (as additionals for data-icons)
|
|-
|}

[[#Beispiel_pagetab|Link zu einem Beispiel]]

<div id="playstream">'''PLAYSTREAM'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL des Radio-Streams
|-
!align="right" |data-get
|name of the reading to get the control state from FHEM
|'STATE'
|-
!align="right" |data-get-on
|value for PLAY status to get.
|'on'
|-
!align="right" |data-get-off
|value for STOP status to get.
|'off'
|-
!align="right" |data-volume
|name of the reading to get the volume value (0-100)
|volume
|-
|}

[[#Beispiel_playstream|Link zu einem Beispiel]]

<div id="popup">'''POPUP'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading where to get the alert value from
|'STATE'
|-
!align="right" |data-get-on
|value which trigger to open the dialog
|'on'
|-
!align="right" |data-off
|value which trigger to close the dialog
|'off'
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
|}

[[#Beispiel_popup|Link zu einem Beispiel]]

<div id="progress">'''PROGRESS'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-max
|maximal value to set or name of the reading which helds the max value
|100
|-
!align="right" |class
|novalue, percent
|
|-
|}

[[#Beispiel_progress|Link zu einem Beispiel]] (fehlt noch)

<div id="push">'''PUSH'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-set
| name of the reading to set on FHEM (<command> <device> <reading> <value>)
|
|-
!align="right" |data-set-on
|value to send when the the button get pressed oder ein Array zwischen dessen Werten umgeschaltet werden kann
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|'fa-circle'
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-doubleclick
|timeout to wait for a second click or touch. '0' disables the doubleclick feature.
|0
|-
!align="right" |data-countdown
|secondes for the countdown progress control
|autodetect from 'on-for-timer' command
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|
|-
!align="right" |data-off-background-color
|fix color attribute for OFF state or DEVICE:READING for dynamic setting
|#505050
|-
!align="right" |data-off-color
|fix color attribute for Off state or DEVICE:READING for dynamic setting
|#505050
|-
|}

'data-set-on' can also be an array of values to toggle between this values

[[#Beispiel_push|Link zu einem Beispiel]]

<div id="rotor">'''ROTOR'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" | data-delay
|time in millisecondes to wait until next list item get shown
|3500
|-
!align="right" |class
|fade, rotate
|''
|-
|}
Ohne Angabe von class erfolgt keine Animation.

[[#Beispiel_rotor|Link zu einem Beispiel]]

<div id="select">'''SELECT'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading that get the selected item of the list
|
|-
!align="right" |data-set
|name of the reading to set on Fhem (<command> <device> <reading> <value>)
|''
|-
!align="right" |data-list
|name of the reading to get a :-separated list from Fhem
|''
|-
!align="right" |data-items
|an array of fix items to show in the selection box (alternative if data-list is empty)
|
|-
!align="right" |data-alias
|an array of fix names to show only in the selection box as an alias to the real items
|
|-
!align="right" |data-cmd
|name of the command to send to Fhem (<command> <device> <reading> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-quote
|characters to enclose the send value
|
|-
!align="right" |class
|wider, w1x, w2x, w3x, large, big
|
|-
|}

[[#Beispiel_select|Link zu einem Beispiel]]

<div id="simplechart">'''SIMPLECHART'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-logdevice
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung)
|
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log)
|'-' means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int")
|''
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY
|10
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY
|30
|-
!align="right" |data-yticks
|value distance between Y tick lines
|5
|-
!align="right" |data-xticks
|time range between each X tick line (in Minuten)
|360 minutes
|-
!align="right" |data-daysago
|number of days back from now
|0
|-
!align="right" |data-caption
|name of the chart to show as text
|
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks
|
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
!align="right" |class
|fullsize, noticks
|
|-
|}

[[#Beispiel_simplechart|Link zu einem Beispiel]] (fehlt noch)

<code>data-logfile</code> kann man auch weglassen, dann greift der Defaultwert "-". Damit wird das neuste Logfile gelesen.

<div id="slider">'''SLIDER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|100
|-
!align="right" |data-step
|step value
|1
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-get-value
|RegEx to retrieve the value or part number of the space separated input to get the value
|'-1': all of the input
|-
!align="right" |data-set-value
|Format of the value to send to FHEM
|'$v': the value only
|-
!align="right" |data-width
|width for horizontal sliders
|'120px', for mini '60px'
|-
!align="right" |data-height
|height for vertical sliders
|'120px', for mini '60px'
|-
!align="right" |data-color
|color for quantity range
|'#aa6900'
|-
!align="right" |data-background-color
|color for range bar
|#404040
|-
!align="right" |class
|Aussehen/Ausrichtung
|
|-
|}

Für class steht mini, horizontal und negated (0 liegt oben) zur Verfügung.

[[#Beispiel_slider|Link zu einem Beispiel]]

<div id="switch">'''SWITCH'''</div>

{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-set
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-cmd
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-doubleclick
|timeout to wait for x millisecondes click or touch. '0' disables the doubleclick feature.
|'0'
|-
|}
Einstellung bei zwei Werten

{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get-on
|Wert, bei dem zum Status ON geschaltet werden soll.
|'on'
|-
!align="right" |data-get-off
|Wert, bei dem zum Status OFF geschaltet werden soll.
|'off'
|-
!align="right" |data-set-on
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf ON geschaltet wurde
|Wert von data-get-on
|-
!align="right" |data-set-off
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf OFF geschaltet wurde
|Wert von data-get-off
|-
!align="right" |data-icon
|Name des Font-Awesome Icon.
|'fa-lightbulb-o'
|-
!align="right" |data-background-icon
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-background-color
|Hintergrundfarbe beim Status on oder DEVICE:Reading bei dynamischen Einstellungen
|'#aa6900'
|-
!align="right" |data-off-background-color
|Hintergrundfarbe beim Status off oder DEVICE:Reading bei dynamischen Einstellungen
|'#505050'
|-
!align="right" |data-on-color
|Widget Farbe beim Status ON
|'#aa6900'
|-
!align="right" |data-off-color
|Widget Farbe beim Status OFF
|'#505050'
|-
|}

Einstellung bei mehreren Werten
{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-state
|Array mit Status Angaben
|
|-
!align="right" |data-set-state
|Array mit Status Angaben, die gesetzt werden sollen
|
|-
!align="right" |data-icons
|Array Icons zum zuvor definierten Status
|
|-
!align="right" |data-backgroundicons
|Array mit Hintergrund Icons zum zuvor definierten Status
|
|-
!align="right" |data-colors
|Array mit Farben zum zuvor definierten Status
|
|-
!align="right" |data-background-colors
|Array mit Hintergrund Farben zum zuvor definierten Status
|
|-
!align="right" |class : readonly
|Es wird nur der Status angezeigt und kann nicht geändert werden
|
|-
|}

<code>data-get-on</code> and <code>data-get-off</code> accept also RegEx values. e.g. data-get-on="[0-9]{1,3}|on" means set switch on if STATE is a numeric value or 'on'. data-get-off="!on" means accept all but the data-get-on value (negation)

[[#Beispiel_switch|Link zu einem Beispiel]]

=== Widgets SYMBOL ===
<div id="symbol">'''SYMBOL'''</div>

Mit dem SYMBOL Widget kann der STATUS eines Device dargestellt werden. Dabei kann das angezeigte Symbol und dessen Farbe bestimmt werden. Wie bei anderen Widgets kann das Symbol und die Farbe vom State abhängig konfiguriert werden. Das SYMBOL-Widget dient nur zur Anzeige eines STATUS, es besitzt kein Möglichkeit der Interaktion.

Neben den '''allgemeine Attribute''' besitzt das SYMBOL-Widget die nachfolgenden Attribute.

dual state notation
{| class="wikitable"
! HTML Attribut !! Beschreibung !! Default Wert
|-
| data-get || Name des Reading, was gelesen werden soll || 'STATE'
|}

Einstellung bei zwei Werten
{| class="wikitable"
!HTML-Attribut !! Beschreibung !! Default-Wert
|-
|'''data-get-on''' ||Wert für on ||'open'
|-
|'''data-get-off''' ||Wert für off ||'closed'
|-
|'''data-icon''' ||Name des Symbols ||'ftui-window'
|-
|'''data-background-icon''' ||Hintergrundsymbol ||'''leer'''
|-
|'''data-on-background-color''' ||Farbe für ON-Zustand. ||'#aa6900'
|-
|'''data-off-background-color''' ||Farbe für OFF-Zustand. ||'#505050'
|-
|'''data-on-color''' ||Farbe für ON-Zustand. ||'#aa6900'
|-
|'''data-off-color''' ||Farbe für OFF-Zustand. ||'#505050'
|-
|}

Einstellung bei mehreren Werten

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-states
|Array für states.
|
|-
!align="right" |data-icons
|Array mit Icons zu data-states Array
|
|-
!align="right" |data-background-icons
|Array mit Icons zu data-states Array
|
|-
!align="right" |data-colors
|Array mit Farben zu data-states aArray
|''
|-
!align="right" |data-background-colors
|Array mit Hintergrundfarben zu data-states array
|''
|-
|}

data-get-on,data-get-off and data-states accept also RegEx values. The value for one icon can also contain an additional animatation CSS name, e.g. "fa-exclamation-triangle fa-blink" for a blinking Symbol

[[#Beispiel_symbol|Link zu einem Beispiel]]

=== Widgets THERMOSTAT===
<div id="thermostat">'''THERMOSTAT'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'desired-temp'
|-
!align="right" |data-temp
|reading for measured temperature of thermostates
|'measured-temp'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|'desired-temp'
|-
!align="right" |data-valve
|reading for valve position of thermostates
|
|-
!align="right" |data-min
|minimal value to set
| 10
|-
!align="right" |data-max
|maximal value to set
| 30
|-
!align="right" |data-minColor
|Farbe des Keises für Min
| #4477FF
|-
!align="right" |data-maxColor
|Farbe des Kreises für Max, zwischen Min und Max wird linear interpoliert
| #FF0000
|-
!align="right" |data-step
|step size for value adjustment e.g. 0.5
|1
|-
!align="right" |data-bgColor
|Die Farbe der Kreises zwischen den ticks
|'transparent'
|-
!align="right" |data-fgColor
|Die Farbe der zahl im Kreismittelpunkt
|#bbbbbb
|-
!align="right" |data-tkColor
|Die Farbe der ticks
|#696969
|-
|-
!align="right" |data-angleOffset
|Start der ticks im Kreis (in Winkelgraden, 0 = oben)
| -120
|-
!align="right" |data-angleArc
|Bereich der ticks im Kreis (in Winkelgraden)
|240
|-
!align="right" |class
|big, readonly
|
|-
|}

[[#Beispiel_thermostat|Link zu einem Beispiel]]

<div id="volume">'''VOLUME'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|''
|-
!align="rigth" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|70
|-
!align="right" |data-get-value
|RegEx to retrieve the value or part number of the space separated input to get the value
|'-1': all of the input
|-
!align="right" |data-set-value
|Format of the value to send to FHEM
|'$v': the value only
|-
!align="right" |data-tickstep
|distance between ticks
|4|20
|-
!align="right" |data-unit
|add a unit after the desired value.
|
|-
!align="right" |class
|mini, small, big, bigger, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back, readonly
|
|-
|}

[[#Beispiel_volume|Link zu einem Beispiel]] (fehlt noch)

<div id="weather">'''WEATHER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get the weather literal from Fhem
|'STATE'
|-
!align="right" |data-imageset
|collection of images to display current weather situation. Possible values: 'meteocons', 'kleinklima'
|'meteocons'
|-
!align="right" |data-image-path
|path to the images of the selected imageset
|/images/weather/
|-
|}

[[#Beispiel_weather|Link zu einem Beispiel]]

== Widgets -- Beispiele ==

<div id="Beispiel_chart">'''Chart'''</div>

Display a chart with similar capabilities as the FHEM plots

<pre>
<div data-type="chart"
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'
data-ptype='["lines","histeps","histeps","cubic"]'
data-uaxis='["primary","secondary","secondary","primary"]'
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="mm"
data-ytext_sec="Rain (mm)"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="2013-08-13T00:00:00"
data-daysago_end="2013-08-14T00:00:00"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</pre>

[[Datei:chart_tabletUI.png]]

<div id="Beispiel_circlemenu">'''Circlemenu'''</div>

Cover a lot of other button behind one single button

<pre>
<div class="left">
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="push" data-icon="fa-wrench"></div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -6"
data-icon="">-6</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -2"
data-icon="">-2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level 0"
data-icon="">0</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +3"
data-icon="">2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +9"
data-icon="">9</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +C"
data-icon="">12</div></li>
</ul>
</div>
<div data-type="label" class="cell">Woofer</div>
</div>
</pre>

[[Datei:circlemenu_tabletUI.png]]

<div id="Beispiel_dimmer">'''Dimmer'''</div>

Dimmer Widget Beispiel für Philips Hue

Minimalvariante
<pre>
<div data-type="dimmer" data-device="HUEDevice1"
data-get-on="!off" data-get-off="off"
data-set="pct"</div>
</pre>

Mit Anzeige der Dimstufe
<pre>
<div data-type="dimmer" data-device="HUEDevice1"
data-get="onoff"
data-get-on="1" data-get-off="0"
data-set=""
data-set-on="on" data-set-off="off"
data-dim="pct">
</div>
</pre>

Dimmer Widget für MilightDevice

<pre>
<div data-type="dimmer"
data-device="SonstWas"
data-get="brightness"
data-get-off="0"
data-get-on="[1-9][0-9]*"
data-set-on="on"
data-set-off="off"
data-dim="dim"
data-min="0"
data-max="100"
></div>
</pre>

<div id="Beispiel_homestatus">'''Homestatus'''</div>

Beispiel rechts im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
data-get-on='["1","2","3","4"]'
data-alias='["Home","Night","Away","Holiday"]'
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase"]'>
</div>
</pre>

Beispiel links im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
data-get-on='["home","asleep","absent","gone","gotosleep"]'
data-alias='["Home","Night","Away","Holiday","Retire"]'
data-icons='["fa-fire","fa-film","fa-plus","fa-car","fa-tint"]'
data-version='residents'>
</div>
</pre>

[[Datei:homestatus_tabletUI.png]]

<div id="Beispiel_image">'''Image'''</div>

Erzeugt ein Widget mit einem Bild aus dem www, das alle 5 Sekunden aktualisiert wird (hier eine Wetterkarte vom DWD).

<pre>
<div data-type="image"
data-size="80%"
data-url="http://www.dwd.de/wundk/wetter/de/Deutschland.jpg"
</div>
</pre>

[[Datei:image_tabletUI.jpg]]

Example for how to add an image to the dashboard which its URL is delivered by a Fhem module like PROPLANTA:

<pre>
<div data-type="image" data-device="Wetter1"
data-get="fc0_weatherDayIcon"
data-size="40px"
class="cell">
</div>
</pre>

<div id="Beispiel_label">'''Label'''</div>

Example for HM-WDS40-TH-I Funk-Temperatur-/Feuchtesensor innen

<pre>
STATE T: 20.0 H: 61
</pre>
<pre>
<div data-type="label" data-device="THSensorWZ"
data-part="2" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ" data-part="4"
data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>

But the same result can reached by getting single readings:
<pre>
humidity 58
temperature 20.1
</pre>

<pre>
<div data-type="label" data-device="THSensorWZ"
data-get="temperature" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ"
data-get="humidity" data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>

Example for how to influence the color of the label according to value limits
<pre>
<div data-type="label"
data-device="OutTemp"
data-limits='[-73,10,23]'
data-colors='["#6699FF","#AA6900","#FF0000"]'
data-unit="%B0C%0A"
class="cell big">
</div>
</pre>

Example for how to create a widget for shutter via push: show state and set up/down
<pre>
<div data-type="switch"
data-device="wzRollo"
data-get-on="up"
data-get-off="down"
data-icon="fa-bars"
class="cell" >
</div>
<div data-type="label"
class="cell">Rollo</div>
</pre>

Example for how to create a label for a time value in short format with usage of RegEx.

<pre>
<div data-type="label"
data-device="dummy1"
data-part="(\d\d\.\d\d\.).*"
class="cell">
</div>
</pre>

Example for how to show two labels in one line.

<pre>
<div class="">
<div type="label" device="OnSunrise" class="inline"></div>bis
<div type="label" device="OnSunset" class="inline"></div>
</div>
</pre>

Beispiel für die Anzeige des UV-Indexes und der Abhängigkeit der anzuzeigenden Farbe.

<pre>
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
data-get="fc0_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc0_date"></div>
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
data-get="fc1_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc1_date"></div>
</pre>

[[Datei:label_tabletUI.jpg]]

Beispiel für die Anzeige des Labels als Icon.
<pre>
<div class="cell">
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon round bg-red cell"></div>
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon square bg-blue cell"></div>
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon squareborder cell"></div>
<div data-type="label" data-device="PowerAV_Sw" data-colors='["red","green"]' data-limits='["off","on"]' class="icon round bg-limit cell"></div>
</div>
</pre>

[[Datei:Label_tabletUI_icon.png]]

<div id="Beispiel_pagetab">'''Pagetab'''</div>

Example for a tab menu to switch smoothly between multiple pages. Multiple pagetabs in a template file: menu.html

<pre>
<html>
<body>
<header>MENU</header>
<div class="cell">
<div data-type="pagetab" data-url="index.html" data-icon="fa-home" class="cell"></div>
<div data-type="pagetab" data-url="index_2.html" data-icon="fa-sliders" class="cell"></div>
<div data-type="pagetab" data-url="index_3.html" data-icon="fa-music" class="cell"></div>
<div data-type="pagetab" data-url="index_4.html" data-icon="fa-hotel" class="cell"></div>
<div data-type="pagetab" data-url="index_5.html" data-icon="fa-music" class="cell"></div>
<div data-type="pagetab" data-url="index_6.html" data-icon="fa-database" class="cell"></div>
<div data-type="pagetab" data-url="index_7.html" data-icon="fa-fax" class="cell"></div>
</div>
</body>
</html>
</pre>

<div id="Beispiel_playstream">'''Playstream'''</div>

Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.

<pre>
<div data-type="playstream" data-url="http://radioeins.de/stream"></div>
<div data-type="label" class="darker">Radio eins</div>
</pre>

<div id="Beispiel_push">'''Push'''</div>

Example for how to create a push button widget to trigger all devices on:

<pre>
<div data-type="push"
data-device="LightAll"
data-cmd="trigger"
data-set="on"
class="cell">
</div>
</pre>

Beispiel für zwei horizontale Buttons:

<pre>
<div class="cell">
<div class="doublebox-h">
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push1.png]]

Beispiel für zwei quadratische vertikale Buttons:

<pre>
<div class="cell">
<div class="doublebox-v">
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push2.png]]

<div id="Beispiel_rotor">'''Rotor'''</div>

Example for a rotor widget, which switches between to days of weather forecast

<pre>
<div data-type="rotor" class="fade">
<ul>
<li>
<div data-type="label" class="darker">Heute</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
<li>
<div data-type="label" class="darker">Morgen</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
</ul>
</div>
</pre>

<div id="Beispiel_select">'''Select'''</div>

Erzeugt zwei Comboboxen zur Auswahl des Eingang eines 2-Zonen-AV-Receivers. Die Liste für Zone2 ist fest, die Liste für Zone1 wird von Fhem übergeben.

<pre>
<div class="cell wider">
<div data-type="label" class="inline wider">Zone2</div>
<div data-type="select" data-device="AvReceiverZ2" data-items='["Airplay","Webradio","BD/DVD","PHONO"]' data-get="input" data-set="input" class="cell w2x" ></div>
<div></div>
<div data-type="label" class="inline">Zone1</div>
<div data-type="select" data-device="AvReceiver" data-list="inputs" data-get="input" data-set="input" class="cell w2x" ></div>
</div>
</pre>

[[Datei:select_tabeltUI.png]]

<div id="Beispiel_slider">'''Slider'''</div>

Slider mit einstellbaren Werten von 10 bis 90:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</pre>

[[Datei:slider_tabletUI.png]]

Horizontal angeordneter Slider:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="0"
data-max="100"
class="horizontal"
</div>
</pre>

[[Datei:slider_tabletUI2.jpg]]

<div id="Beispiel_switch">'''Switch'''</div>

Schalter. Usage of RegEx pattern for state request:

<pre>
<div data-type="switch" class="cell"
data-device="MILIGHT_Zone1_Wohnzimmer"
data-get-on="on.*"
data-get-off="off"></div>
</pre>

[[Datei:switch.png]]

Beispiel für eine Gruppe von Schaltern, um zwischen vier verschiedenen Werten eines device umzuschalten:

<pre>
<div class="cell left">
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert1).)*"
data-get-on="Wert1" class="cell" ></div>
<div data-type="label" class="cell">Wert1</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert2).)*"
data-get-on="Wert2" class="cell" ></div>
<div data-type="label" class="cell">Wert2</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert3).)*"
data-get-on="Wert3" class="cell" ></div>
<div data-type="label" class="cell">Wert3</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert4).)*"
data-get-on="Wert4" class="cell" ></div>
<div data-type="label" class="cell">Wert4</div>
</div>
</pre>

[[Datei:switch4.png]]

<div id="Beispiel_symbol">'''Symbol'''</div>

Example for a tristate icon

<pre>
<div data-type="symbol" data-device="dummy1"
data-get-on='["wert1","wert2","wert3"]'
data-icons='["fa-arrow-up","fa-user","fa-arrow-down"]'
data-on-colors='["SeaGreen","SlateBlue","IndianRed"]'
class="cell big">
</div>
</pre>

Example for a tristate icon with blink and spin animation

<pre>
<div data-type="symbol" data-device="dummy1"
data-icons='["fa-exclamation-triangle fa-blink","fa-exclamation-circle","fa-cog fa-spin"]'
data-on-colors='["Crimson","GoldenRod","SeaGreen"]'
data-get-on='["Wert1","Wert2","Wert3"]' >
</div>
</pre>

Example for a battery level control with RegEx

<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
data-icons='["oa-measure_battery_100","oa-measure_battery_75","oa-measure_battery_50","oa-measure_battery_25","oa-measure_battery_0"]'
data-get-on='["3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]'
data-on-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'>
</div>
</pre>

Example for a battery level control with greater-equal compare and 90° rotated symbols

<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'
data-get-on='["0","2","2.4","2.7","3.0"]'
data-on-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'>
</div>
</pre>

<div id="Beispiel_thermostat">'''Thermostat'''</div>

Configure as data-device='...' that item which delivers temp and desired-temp as reading.

Default parameters are:
<pre>
data-get="desired-temp" data-temp="measured-temp" data-set="desired-temp"
</pre>

Therefor for HomaMatic HM-CC-RT-DN this is sufficient.

<pre>
<div data-type="thermostat" data-device='KH_Clima' class="cell"></div>
</pre>

The long format looks like this:

<pre>
<div data-type="thermostat"
data-device="KH_Clima"
data-get="desired-temp"
data-temp="measured-temp"
class="cell">
</div>
</pre>

Example for MAX!:
<pre>
<div data-type="thermostat" data-device="HZ_Tuer"
data-valve="valveposition"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature"
class="cell">
</div>
</pre>

The wigets will show the valve value only in case of a valid data-valve attribute. The default for data-valve ist null. That means, a empty data-valve attribute hides the valve label for the widget.

[[Datei:thermostat.png]]

<div id="Beispiel_weather">'''Weather'''</div>

Das Widget fügt ein dem Wetter entsprechendes Bild ein. Die Daten können durch Fhem-Module wie [[PROPLANTA]], [[OPENWEATHER]] und [[Weather]] bereitgestellt werden.
Add 'big' or 'bigger' to CSS class to get a bigger weather icon.

Beispiel:
<pre>
<div data-type="weather"
data-device="Weather"
data-get="fc0_weatherDay"
class="cell big">
</div>
</pre>

[[Datei:weather.png]]

== Icon-Konfiguration ==

* Eingebaute Icons: Diese haben das ftui-Präfix. Zurzeit sind folgende verfügbar: ftui-window, ftui-door

* Mehr als 500 Icons von "http://fortawesome.github.io/Font-Awesome/icons" verfügbar. Einfach den Icon-Namen angeben (Präfix "fa-" nicht vergessen, Z.B. <code>data-icon="fa-volume-up"</code>

* Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.
<pre>
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
</pre>

Diese font icons haben das Präfix 'fs-' bzw. 'oa-'.

Beispiel bei einem Schalter:
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>

Und so als großes Symbol:
<pre>
<div data-type="symbol" data-device='dummy1'
data-icon="oa-status_frost"
data-on-color="#bb3232"
data-get-on="on"
data-get-off="!on"
class="bigger">
</div>
</pre>

Die Icons kann man auch etwas dicker darstellen mit den Zusatz bold: <code>data-icon="oa-secur_locked bold"</code>

Die Namen der verfügbaren Icons findet man auch in den CSS Files (openautomation.css / fhemSVG.css)

== Spezial ==
Folgender Befehl setzt einen direkten Befehl an Fhem ab (<code>set dummy1 off</code>):
<pre>
<div onclick="setFhemStatus('set dummy1 off')">All off!</div>
</pre>

== FAQ ==
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM_Tablet_UI/FAQ|FHEM Tablet UI FAQ]] zusammengestellt.

== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* [http://forum.fhem.de/index.php/topic,37378.0.html User-Demos]
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]

[[Kategorie:FHEM Frontends]]

Diskussion:FHEM Tablet UI

2016-03-08T11:25:45Z

Svenson08: /* Widgets */

Sollte man nicht die Widgets alphabetisch sortieren ?

Ich kann das gerne machen... bzw. mache das, wenn ich keinen Widerspruch höre --[[Benutzer:Nobby1805|Nobby1805]] ([[Benutzer Diskussion:Nobby1805|Diskussion]]) 13:05, 6. Mai 2015 (CEST)

Ich habe die Reihenfolge von github übernommen. Aber klar, eine alphabetische Sortierung ist durchaus sinnvoll. Dann aber auch die Beispiele entsprechend sortieren.

:Ich setz mich mal dran .. oder willst du noch aktuell noch etwas ändern ?--[[Benutzer:Nobby1805|Nobby1805]] ([[Benutzer Diskussion:Nobby1805|Diskussion]]) 16:48, 7. Mai 2015 (CEST)

== Sprung von der Widget-Auflistung zu den Beschreibungen ==

... habe ich testweise mal für CIRCLEMENU gemacht ... werde ich in den nächsten Tagen für alle nachzioehgen ... und von dort dann sinnvollerweise auch zu den Beispielen ?! --[[Benutzer:Nobby1805|Nobby1805]] ([[Benutzer Diskussion:Nobby1805|Diskussion]]) 11:54, 14. Mai 2015 (CEST)

== Update Link falsch? ==

Müsste der Update Link zum hinzfügen nicht wie folgt heißen:

<code>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>

ich bekomme mit dem aktuell hinterlegten Link nämlich einen Fehler

--[[Benutzer:Amenophis86|Amenophis86]] ([[Benutzer Diskussion:Amenophis86|Diskussion]]) 14:35, 16. Feb. 2016 (CET)
<HR>
: Hallo!
: Ja, Link auf Wiki-Seite war falsch; controlfile-Angabe fehlt dort.
: Ist korrigiert.
: Danke, --[[Benutzer:Krikan|Christian]] ([[Benutzer Diskussion:Krikan|Diskussion]]) 14:52, 16. Feb. 2016 (CET)

== Deutsch / Englisch ==
Sollten die Texte nicht eingedeutscht werden? Inhalt ist mal deutsch mal englisch --[[Benutzer:Svenson08|Svenson08]] ([[Benutzer Diskussion:Svenson08|Diskussion]]) 06:37, 2. Mär. 2016 (CET)

Ist richtig, hat nur noch keiner gemacht. Kommt daher, dass setstate es auf seiner github Seite in Englisch hat und von dort das Meiste kopiert wurde. --[[Benutzer:Amenophis86|Amenophis86]] ([[Benutzer Diskussion:Amenophis86|Diskussion]]) 00:57, 5. Mär. 2016 (CET)

== Widgets ==
zur besseren Lesbarkeit wäre es besser je Widget ein eigenen "Kapitel"/Überschrift in der Seite anzulegen. Es macht auch wenig Sinn die Beispiele eines Widgets am Ende der Seite einzuhängen. Verständlicher ist es Wenn die Beispiele bei dessen Erläuterung aufgeführt sind. Beispiele ohne Bilder machen wenig Sinn wenn ich ein UI erklären will. --[[Benutzer:Svenson08|Svenson08]] ([[Benutzer Diskussion:Svenson08|Diskussion]]) 19:39, 7. Mär. 2016 (CET)
:Da stimme ich nicht zu ... die jetzige Version mit den zusätzliche "Überschriften' bei Label und Level ist m.E. unübersichtlicher ... aus der alphabetischen Übersicht kommt ja immer durch die Links schnell zu den Beschreibungen und ebenfalls durch die Links zu den Beispielen ... wenn ich zu einem Widget die Argumente nachschlagen will würden m.E. die immer wieder dazwischen liegenden Beispiele eher stören --[[Benutzer:Nobby1805|Nobby1805]] ([[Benutzer Diskussion:Nobby1805|Diskussion]]) 23:33, 7. Mär. 2016 (CET)
Da diese Überschriften keine Kapitel sind ist diese Bearbeitung, Ergänzung mühselig. Das sollten zumindest Kapitel sein um das besser zu bearbeiten und in der Seiten Übersicht sind diese dann ebenfalls mit einem Blick zu sehen und man direkt von dort zum Beispiel springen. Ist eine kleinere Änderung. --[[Benutzer:Svenson08|Svenson08]] ([[Benutzer Diskussion:Svenson08|Diskussion]]) 04:54, 8. Mär. 2016 (CET)
Längere Artikel ohne Kapitel sind nur schwer zu Pflege, das dadurch ein index gebildet wird, besser ein Inhaltsverzeichnis halte ich sehr wohl als übersichtlicher, aber das sieht jeder anders. Aber bearbeite mal eine bestimmte stelle wenn du mehrere tausend Zeilen bis zur gesuchten Zeile scrollen musst. Diese Übersichtlichkeit ist ein Grund warum es die Funktion in jeder wiki Engine gibt.--[[Benutzer:Svenson08|Svenson08]] ([[Benutzer Diskussion:Svenson08|Diskussion]]) 04:58, 8. Mär. 2016 (CET)
:Ein seitlanges Inhaltsverzeichnis finde ich allerdings nicht so prickelnd ;) Ansonsten hast du ja nicht unrecht, ich habe schon mehrfach kleinere Änderungen an den Widgetbeschreibungen durchgeführt, das wäre einfacher wenn die Abschnitte kleiner wären. --[[Benutzer:Nobby1805|Nobby1805]] ([[Benutzer Diskussion:Nobby1805|Diskussion]]) 09:42, 8. Mär. 2016 (CET)
: :-) Toll, ich hab mal recht .... Spaß bei seite. Ich hab auch schon überlegt ob man den einzelnen Widgets nicht einzelne Artikel spendiert. Gibts hier im Wiki auch schon bei ähnlich ausführlicheren Dokus. Auch wenn mal (viel) mehr Beispiele zu einem Widget erfasst werden wäre das vielleicht nicht verkehrt. Hab aber keine Endgültige Meinung dazu.--[[Benutzer:Svenson08|Svenson08]] ([[Benutzer Diskussion:Svenson08|Diskussion]]) 12:25, 8. Mär. 2016 (CET)

== Betriff Abschnitt Vorraussetungen ==
Vorausgesetzt ist noch ein definierte FHEMWEB Instance, ohne das würden die Fhem Befehle nicht gesendet werden, longpoll, etc. Zwar ist das Default jeder installation, aber man sollte darauf Hinweisen. --[[Benutzer:Svenson08|Svenson08]] ([[Benutzer Diskussion:Svenson08|Diskussion]]) 05:54, 8. Mär. 2016 (CET)

Diskussion:FHEM Tablet UI

2016-03-08T04:54:44Z

Svenson08: /* Widgets */

Sollte man nicht die Widgets alphabetisch sortieren ?

Ich kann das gerne machen... bzw. mache das, wenn ich keinen Widerspruch höre --[[Benutzer:Nobby1805|Nobby1805]] ([[Benutzer Diskussion:Nobby1805|Diskussion]]) 13:05, 6. Mai 2015 (CEST)

Ich habe die Reihenfolge von github übernommen. Aber klar, eine alphabetische Sortierung ist durchaus sinnvoll. Dann aber auch die Beispiele entsprechend sortieren.

:Ich setz mich mal dran .. oder willst du noch aktuell noch etwas ändern ?--[[Benutzer:Nobby1805|Nobby1805]] ([[Benutzer Diskussion:Nobby1805|Diskussion]]) 16:48, 7. Mai 2015 (CEST)

== Sprung von der Widget-Auflistung zu den Beschreibungen ==

... habe ich testweise mal für CIRCLEMENU gemacht ... werde ich in den nächsten Tagen für alle nachzioehgen ... und von dort dann sinnvollerweise auch zu den Beispielen ?! --[[Benutzer:Nobby1805|Nobby1805]] ([[Benutzer Diskussion:Nobby1805|Diskussion]]) 11:54, 14. Mai 2015 (CEST)

== Update Link falsch? ==

Müsste der Update Link zum hinzfügen nicht wie folgt heißen:

<code>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>

ich bekomme mit dem aktuell hinterlegten Link nämlich einen Fehler

--[[Benutzer:Amenophis86|Amenophis86]] ([[Benutzer Diskussion:Amenophis86|Diskussion]]) 14:35, 16. Feb. 2016 (CET)
<HR>
: Hallo!
: Ja, Link auf Wiki-Seite war falsch; controlfile-Angabe fehlt dort.
: Ist korrigiert.
: Danke, --[[Benutzer:Krikan|Christian]] ([[Benutzer Diskussion:Krikan|Diskussion]]) 14:52, 16. Feb. 2016 (CET)

== Deutsch / Englisch ==
Sollten die Texte nicht eingedeutscht werden? Inhalt ist mal deutsch mal englisch --[[Benutzer:Svenson08|Svenson08]] ([[Benutzer Diskussion:Svenson08|Diskussion]]) 06:37, 2. Mär. 2016 (CET)

Ist richtig, hat nur noch keiner gemacht. Kommt daher, dass setstate es auf seiner github Seite in Englisch hat und von dort das Meiste kopiert wurde. --[[Benutzer:Amenophis86|Amenophis86]] ([[Benutzer Diskussion:Amenophis86|Diskussion]]) 00:57, 5. Mär. 2016 (CET)

== Widgets ==
zur besseren Lesbarkeit wäre es besser je Widget ein eigenen "Kapitel"/Überschrift in der Seite anzulegen. Es macht auch wenig Sinn die Beispiele eines Widgets am Ende der Seite einzuhängen. Verständlicher ist es Wenn die Beispiele bei dessen Erläuterung aufgeführt sind. Beispiele ohne Bilder machen wenig Sinn wenn ich ein UI erklären will. --[[Benutzer:Svenson08|Svenson08]] ([[Benutzer Diskussion:Svenson08|Diskussion]]) 19:39, 7. Mär. 2016 (CET)
:Da stimme ich nicht zu ... die jetzige Version mit den zusätzliche "Überschriften' bei Label und Level ist m.E. unübersichtlicher ... aus der alphabetischen Übersicht kommt ja immer durch die Links schnell zu den Beschreibungen und ebenfalls durch die Links zu den Beispielen ... wenn ich zu einem Widget die Argumente nachschlagen will würden m.E. die immer wieder dazwischen liegenden Beispiele eher stören --[[Benutzer:Nobby1805|Nobby1805]] ([[Benutzer Diskussion:Nobby1805|Diskussion]]) 23:33, 7. Mär. 2016 (CET)
Da diese Überschriften keine Kapitel sind ist diese Bearbeitung, Ergänzung mühselig. Das sollten zumindest Kapitel sein um das besser zu bearbeiten und in der Seiten Übersicht sind diese dann ebenfalls mit einem Blick zu sehen und man direkt von dort zum Beispiel springen. Ist eine kleinere Änderung. --[[Benutzer:Svenson08|Svenson08]] ([[Benutzer Diskussion:Svenson08|Diskussion]]) 04:54, 8. Mär. 2016 (CET)
Längere Artikel ohne Kapitel sind nur schwer zu Pflege, das dadurch ein index gebildet wird, besser ein Inhaltsverzeichnis halte ich sehr wohl als übersichtlicher, aber das sieht jeder anders. Aber bearbeite mal eine bestimmte stelle wenn du mehrere tausend Zeilen bis zur gesuchten Zeile scrollen musst. Diese Übersichtlichkeit ist ein Grund warum es die Funktion in jeder wiki Engine gibt.--[[Benutzer:Svenson08|Svenson08]] ([[Benutzer Diskussion:Svenson08|Diskussion]]) 04:58, 8. Mär. 2016 (CET)

== Betriff Abschnitt Vorraussetungen ==
Vorausgesetzt ist noch ein definierte FHEMWEB Instance, ohne das würden die Fhem Befehle nicht gesendet werden, longpoll, etc. Zwar ist das Default jeder installation, aber man sollte darauf Hinweisen. --[[Benutzer:Svenson08|Svenson08]] ([[Benutzer Diskussion:Svenson08|Diskussion]]) 05:54, 8. Mär. 2016 (CET)

FHEM Tablet UI

2016-03-08T04:51:02Z

Svenson08: Etwas umformuliert. Hinweis auf alternative WebServer eingefügt. Letzteres will ich noch ausführlicher in einem extra Abschnitt beschreiben

{{Infobox Modul
|ModPurpose=Oberfläche für Fhem
|ModType=x
|ModFTopic=34233
|ModForumArea=Frontends
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
[[Datei:tablet_ui.png|200px|thumb|right|Fhem Tablet UI]]
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in Fhem integrierten Geräten. Zahlreiche Widgets können sehr flexibel und leicht per HTML Code konfiguriert werden.

In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben.

{{Todo|alle Widgets hier übernehmen, Übersetzung, weitere Beispiele aus dem Forum einfügen (evtl. mit Link!?)}}

== Voraussetzungen ==
Das User Interface hat sehr wenige Anforderungen für den Betrieb. Es benötigt <u>keine</u> zusätzliche Frameworks, wie z.B. PHP oder MySQL.

Voraussetzungen ist eine Fhem Installation mit HTTPSRV Modul. Das UI kann mit den gängigen Browsern Betriebssystem unabhängig genutzt werden oder mit dem Webviewcontrol.
Das Interface wird dabei in dem FHEM eigenen Webserver ausgeführt. Mit wenigen Anpassungen ist es auch möglich das UI auf anderen Webservern (Apache, u.a.) zu betreiben, dann kann FHEM und UI auch auf getrennten Systemen ausgeführt werden.

== Installation ==
* Im Befehls-Eingabefeld eingeben: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* Im Befehls-Eingabefeld eingeben: <code>define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI</code>
* Im Verzeichnis ./fhem/www/tablet die Datei index-example.html in index.html umbenennen oder eine neue index.html erzeugen und diese index.html wie nachfolgend beschrieben editieren.

Das UI ist über den Link "Tablet-UI" auf der Fhem-Hauptseite oder durch Direktaufruf der URL "<nowiki>http://<Fhem-url>:8083/fhem/tablet/index.html</nowiki>" zu erreichen.

Hinweise zu einer manuellen Installation und weitere Infos sind auf der Projektseite https://github.com/knowthelist/fhem-tablet-ui zu finden.

== Update ==
* Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von: <code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* Update des UI durch Eingabe von: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Über
<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
kann seit dem 24.12.2015 die URL zum normalen Updatebefehl von FHEM hinzugefügt werden. Mit einen "update check" sieht man dann gleich alle Updates aus beiden "Welten".

== Weitere Widgets ==

=== Widgets for Fhem-tablet-ui ===
Zusätzlich zu den bei der Installation des Tablet UI direkt zur Verfügung stehenden Widgets, gibt es eine weitere Widget-Quelle von nesges unter https://github.com/nesges/Widgets-for-fhem-tablet-ui. Die Widgets aus dieser Quelle müssen für eine Nutzung separat installiert werden.

Dazu folgenden Befehl in die Fhem-Befehlszeile eingeben: <code><nowiki>update all https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt</nowiki></code>.

Näheres zur Installation unter [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/Installation Wiki: Installation].

Die Dokumentation der einzelnen Widgets befindet sich ebenfalls [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki im Github-Wiki].

== Konfiguration ==
'''META-Parameter'''

Das Tablet UI lässt sich über die META-Parameter konfigurieren. Mit den meisten META-Parametern kann das verhalten des UI beeinflusst werden. Diese Parameter befinden sich in der jeweiligen '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>'''. Nachfolgend sind die verschiedenen Konfigurationsparameter aufgeführt. Die Parameter sind immer gleich aufgebaut.

:<code><meta name="<META-Parameter>" content="<Wert>"></code>

{| class="wikitable"
|-
! META-Parameter !! Wert / Beispiel !! Erklärung
|-
| longpoll || 1 oder 0 || Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh.
|-
| gridster_disable || 1 oder 0 || Drag&Drop der Gridster-Elemente auf der Seite deaktivieren.
|-
| toast || 1 oder 0 || Toast messages deaktivieren
|-
| fhemweb_url || http://meinFhemServer:8083/fhem || Wird benötigt wenn der Webserver des TabletUI nicht auf dem FHEM Server läuft.
|-
| widget_margin || 1 bis 9999 || Abstände der Gridsterelemente verändern.
|-
| widget_base_width || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.
|-
| widget_base_height || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.
|}

'''CSS-Styles'''

Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt [[#CSS Class description|CSS Class description]] oder [[#Positioning|Positioning]] aufgeführt. Es besteht auch die Möglichkeit eine eigene CSS Datei zu erstellen und darüber Änderungen am aussehen des UI vorzunehmen. Die eigenen CSS Datei würde bei einem Update unverändert bleiben. Daher ist abzuraten ein CSS Datei die mit dem UI Update verteilt wird zu modifizieren. Die eigene CSS Datei ist unter '''/fhem/tablet/css''' mit dem Namen '''fhem-tablet-ui-user.css''' zu finden. Sollte diese nicht vorhanden sein kann die Datei manuell erstellt werden.
Wird keine eigene CSS-Datei verwendet empfiehlt es sich den folgenden Eintrag im <head> der jeweiligen .html Datei zu entfernen, bzw. in Kommentar gesetzt werden um Probleme beim Laden der Seite zu verhindern.

:<code><link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /></code>

== Farbe ==
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form oder als RGB-Wert anzugeben. Zum Beispiel: Hex: #A3CFA3 RBG: rgb(163, 207, 163).

Knallige Farben wie #ff0000 für Rot oder #00ff00 für Grün sollten vermieden werden. Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.

Hilfreich bei der Suche nach den Farbwerten ist der color picker: http://www.w3schools.com/tags/ref_colorpicker.asp

== CSS Class description ==

Not all widgets support all classes

* readonly : changing of state is not allowed
* wider : 25px extra space for the widget to the top
* narrow : shorter distant to the widget above
* w1x, w2x, w3x : set the widget to a fix width: 1x, 2x, 3x width
* mini : lowest diameter for volume widget
* small : font 80% size (label), small diameter for volume widget
* medium : font 120% size
* large : font 150% size
* big : font 200% size
* bigplus : font 270% size
* bigger : font 320% size
* bigger.thin : font 450% size
* grande : font 600% size
* gigantic: font 144px size + 120px line-height
* thin : font thin
* darker : forecolor in gray
* hue-tick : draw ticks in color range
* hue-front : draw handle in color range
* hue-back : draw background in color range
* dim-tick : draw ticks in brightness range
* dim-front : draw handle in brightness range
* dim-back : draw background in brightness range
* red : foreground color red
* green : foreground color green
* blue : foreground color blue
* doublebox-v : container to place 2 small widgets (e.g. switch) one above the other
* doublebox-h : container to place 2 small widgets (e.g. switch) side by side
* timestamp : deliver the date time for the reading instead the value
* inline : positioning elements in a row, no line break
* top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
* left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
* right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
* blink : blink animatation for label or symbol widget
* verticalLine : Vertikale Line am rechten Rand

== Positioning ==

*container : new box or new row
*col-x-y : new column with x/y of width (col-1-3,col-2-3,col-1-2,col-1-4,col-1-8,col-1-5,col-2-5,col-3-5,col-4-5)
*inline : positioning elements in a row, no line break
*top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
*left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
*right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
*top-narrow : -15px closer on top (top-narrow-2x -> -30px; top-narrow-10 -> -10px)
*centered : horizontal centered
*left-align : align text left
*left : floating left
*right-align : align text right
*right : floating right
*wider : 15px extra space for the widget all around
*narrow : shorter distant to the widget above
*fullsize : 100% in width and height

== Widgets -- Konfiguration ==

Teilweise dokumentierte Widgets:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/button button]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen Fhem-Befehl absetzen kann.
* [[#chart|chart]]: chart with similar capabilities as the FHEM plots
* checkbox:
* [[#circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clicksound clicksound]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clock clock]: Das Widget "clock" stellt eine einfach Uhr zur verfügung.
* colorwheel:
* daytimepicker:
* departure:
* [[#dimmer|dimmer]]: toogle button with a setter for on value
* eventmonitor:
* highchart:
* [[#homestatus|homestatus]]: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]]: Widget zum Einbinden externer Inhalte in einem Iframe.
* [[#image|image]]: insert an image, the URL is given by a reading
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/klimatrend klimatrend]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* [[#label|label]]: STATE als Text anzeigen
* [[#level|level]]: vertical/horizontal bar to show values between min/max value
* link:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/multistatebutton multistatebutton]: Variante des push-Widgets das den set-Befehl abhängig vom gelesenen Status ändert.
* [[#pagetab|pagetab]]: Element to smoothly exchange the whole page with another page
* pagebutton:
* [[#playstream|playstream]]: Abspielen eines Webradio-Streams per Button
* [[#popup|popup]]: a popup dialog which open on click on another widget
* [[#progress|progress]]: round symbolic display for percent values
* [[#push|push]]: send any command to Fhem e.g. up / down
* range:
* readingsgroup:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads
* [[#rotor|rotor]]: Umschalten von zwei oder mehr Widgets an einer Position
* [[#select|select]]: Combobox to provide a list for selection
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: zum anzeigen und einstellen einer Uhrzeit.
* [[#simplechart|simplechart]]: simple XY line chart for one value (reads directly from Fhem log file)
* [[#slider|slider]]: vertical slider to select between min/max value
* spinner:
* swiper:
* [[#switch|switch]]: Toggle any command to Fhem (e.g. on / off)
* [[#symbol|symbol]]: State als Symbol darstellen (z.B. Fenster offen)
* [[#thermostat|thermostat]]: dial for heater thermostates to set desired value and show current value
* [[#volume|volume]]: dial to set a single value (e.g. 0-60)
* [[#weather|weather]]: insert an icon or image, represending a weather literal
* [https://github.com/svenson08/ftui-weekdaytimer-widget weekdaytimer]: Visualisierung des [[WeekdayTimer]] Modul
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/wind_direction wind_direction]: Zeigt die Windrichtung auf einer Windrose an.

Ein Demo der Widgets findet ihr [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Hier].
----------------------------------

Für alle Widgets gilt:
{| class="wikitable"
|+allgemeine Attribute
|-
!align="right" |data-type
|Widget-Typ
|-
!align="right" |data-device
|Fhem-Name des Gerätes (mit dem Befehl 'list' bekommt man im Fhem die kpl. Liste)
|-
!align="right" |class
|CSS-Klassen für Aussehen und Formatierung des Widgets
|-
|}

<div id="chart">'''CHART'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-logdevice
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung) or array of names if more than one graph shall be displayed
|-
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log) or or array of names if more than one graph shall be displayed
|'-' or omitting this data means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int") or or array of columnspecs if more than one graph shall be displayed
|-
|-
!align="right" |data-style
|name of the graph style to be used (e.g. 'SVGplot l0' or 'ftui l0dash') or or array of styles if more than one graph shall be displayed using different stlyes. The standard fhem plot styles can be used furthermore there are some more predefined styles existing (details see css file). Own styles can be specified e.g. in the fhem-table-ui-user.css file.
|-
|-
!align="right" |data-ptype
|name of the plot type (e.g. 'lines' or 'fa-cog') or or array of plottypes if more than one graph shall be displayed. All fhem plot styles are supported. Additionally it is possible to specify symbols (currently supported are font awesome ('fa-...'), open automation ('oa-...') and fhem symbols ('fs-...'))
|'lines'
|-
!align="right" |data-uaxis
|name of the axis to be used ('primary' or 'secondary') or or array of axis' to be used if more than one graph shall be displayed. The 'primary' axis is labelled on the left side, the 'secondary' axis is labelled on the right side
|'primary'
|-
!align="right" |data-legend
|caption of the graph (used in the legend and at the cursor) or an array of legend texts if more than one graph shall be displayed.
|-
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|10
|-
!align="right" |data-minvalue_sec
|min Y value to Show or an array of values for dynamic minY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|30
|-
!align="right" |data-maxvalue_sec
|max Y value to Show or an array of values for dynamic maxY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-yticks
|value distance between Y tick lines (related to primary axis). A value of 'auto' means that the value is calculated from the data displayed dynamically.
|'auto'
|-
!align="right" |data-xticks
|time range between each X tick lines (in minutes). A value of 'auto' means that the value is calculated from the data displayed dynamically
|'auto'
|-
!align="right" |data-daysago_start
|number of days back from now for the start of the plot (0 means the plot starts from today 0:00). Additionally the x-axis start value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'.
|0
|-
!align="right" |data-daysago_end
|number of days back from now for the end of the plot (-1 means the plot ends today 24:00). Additionally the x-axis end value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'.
|-1
|-
!align="right" |data-nofulldays
|switch to activate/deactivate rounding of the xaxis start and end values to full days ('true' or 'false')
|'false'
|-
!align="right" |data-ytext
|text to be shown besides the primary y axis.
|-
|-
!align="right" |data-ytext_sec
|text to be shown besides the secondary y axis.
|-
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks for primary y axis.
|-
|-
!align="right" |data-crosshair
|switch to activate/deactivate the crosshair cursor ('true' or 'false')
|'false'
|-
!align="right" |data-cursorgroup
|number to define coupling of the crosshair cursor. The cursors of all charts having the same number are coupled and move together.
|-
|-
!align="right" |data-scrollgroup
|number to define coupling of the scrolling (shift and zoom). All charts having the same number are scrolled (shifted and zoomed) together.
|-
|-
!align="right" |data-showlegend
|switch to activate/deactivate the initial display of the legend window ('true' or 'false')
|'false'
|-
!align="right" |data-yunit_sec
|unit of the value to show beside of each Y ticks for secondary y axis.
|-
|-
!align="right" |data-width
|fixed size for width (in % or px)
|-
|-
!align="right" |data-height
|fixed size for height (in % or px)
|-
|-
!align="right" |class
|fullsize, noticks, nobuttons
|
|-
|}

<code>data-logfile</code> can be omitted in this case the default value "-" will be used. This means that the current logfile is going to be used.

There are several buttons that control the dynamic behaviour of the chart. The <-, ->, + and - buttons shift and zoom the displayed data. The "legend" and "cursor" buttons are switching on and off the display of the legend window and the crosshair cursor respectively.

When the legend window is displayed, a click on the legend text shows/hides the respective graph. The legend window can be dragged to other positions on desktop browsers (currently not yet working for iOS and Android).

The crosshair cursor currently only works dynamically on desktop browsers. On iOS and Android you have to tap on the screen to set the cursor to a new position.

There is a number of css styles that control the visible appearance of the chart. The following classes are supported:

{| class="wikitable"
!CSS class name
!Description
|-
!.chart-background
|Color etc. for the chart background
|-
!.text.axes
|Font and color for the chart axes
|-
!.buttons
|Size and color for the buttons (shift etc.)
|-
!.gridlines
|Size and color for gridlines generally
|-
!.xaxis
|Font, size and color for xaxis
|-
!.yaxis
|Font, size and color for yaxis
|-
!.xticks
|Font, size and color for xticks
|-
!.yticks
|Font, size and color for yticks
|-
!.crosshair
|Font, size and color (foreground/background) for the crosshair cursor
|-
!.caption
|Font, size and color for text buttons for legend and cursor switching
|-
!.legend
|Font, size and background color for legend window
|-
|-
|}

[[#Beispiel_chart|Link zu einem Beispiel]]

<div id="circlemenu">'''CIRCLEMENU'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-item-diameter
|diameter of the circle
|52
|-
!align="right" |data-circle-radius
|radius of each item, in pixel
|70
|-
!align="right" |data-direction
|position of the items in relation to the center
|'full'
|-
!align="right" |data-close-after
|closing time of the circle-menu
|(item-count + 1s) or a minimum of 4s
|-
!align="right" |class
|keepopen
|
|-
|}

Optionen für data-direction: top | right | bottom | left | top-right | top-left | bottom-right | bottom-left | top-half | right-half | bottom-half | left-half | full | vertical | horizontal

[[#Beispiel_circlemenu|Link zu einem Beispiel]]

<div id="dimmer">'''DIMMER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-get-on
|value for ON status to get
|'on'
|-
!align="right" |data-get-off
|value for OFF status to get
|'off'
|-
!align="right" |data-set
|(<command> <device> <reading> <value>)
|
|-
!align="right" |data-set-on
|value for ON status to set
|value of data-get-on
|-
!align="right" |data-set-off
|value for OFF status to set
|value of data-get-off
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-dim
|name of the reading responsible for dim (<command> <device> <reading> <value>)
|value of data-get-on
|-
!align="right" |data-icon
|name of the font-awesome icon
|fa-lightbulb-o
|-
|}

[[#Beispiel_dimmer|Link zu einem Beispiel]]

<div id="homestatus">'''HOMESTATUS'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-alias
|array of fix names to show only in the UI as an alias to the real states
|''
|-
!align="right" |data-icons
|array of icons related to the data-get-on array
|''
|-
!align="right" |data-version
|name of the status model e.g. 'residents','roommate','guest'
|(default NULL)
|-
|}

The default version has 4 states: '1','2','3','4' The default aliases are 'Home','Night','Away','Holiday'; data-version='residents' or 'roommate' or 'guest' has 5 states ('home','asleep','absent','gone','gotosleep') They have these aliases 'Home','Night','Away','Holiday','Retire'

[[#Beispiel_homestatus|Link zu einem Beispiel]]

<div id="image">'''IMAGE'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get an URL from Fhem
|'STATE'
|-
!align="right" |data-size
|width of the image in px or %, the height scales proportionally
|50%
|-
!align="right" |data-url
|URL of the image to show (use data-url or data-device + data-get, not both)
|
|-
!align="right" |data-refresh
|Interval in seconds for image refresh for usage together with data-url
|900
|-
|}

[[#Beispiel_image|Link zu einem Beispiel]]

=== Widgets LABEL ===
<div id="label">'''LABEL'''</div>

Mit dem LABEL Widget kann der STATUS eines Device in Textform angezeigt werden. Dabei kann das die Farbe des Anzeigetext abhängig von dessen Wert festgelegt werden.

Neben den '''allgemeine Attribute''' besitzt das LABEL-Widget die nachfolgenden Attribute.

{| class="wikitable"
!HTML Attribut !!Beschreibung !!Default Wert
|-
|data-get ||Name des Readings in FHEM ||
|-
|data-fix ||keeping a specified number of decimals. ||'-1' -> non-numeric
|-
|data-part ||split position of the space separated value to show or an RegEx ||
|-
|data-colors ||a array of color values to affect the colour of the label according to the limit value ||
|-
|data-limits-get ||name of the DEVICE:Reading to colorize the label ||data-device:data-get
|-
|data-limits ||an array of numeric values to affect the colour of the Label ||
|-
|data-limits-part ||part number of the space separated value to show or a RegEx ||'-1' -> all
|-
|data-unit ||add a unit after a numeric value. use encoded strings e.g. "%B0C%0A" ||
|-
|data-substitution ||regex-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected ||
|-
|class ||small, large, big, bigger, thin, red, green, blue, darker, timestamp, w1x, w2x, w3x, fixedlabel, icon, bg-limit ||
|}

Mit der Class 'fixedlabel' kann man Label einbauen, die einen festen Text (direkt im HTML) haben, aber trotzdem die Farbe per Reading Value beeinflusst werden könnte.<br>
Mit der Class 'icon' kann man Label einbauen, die wie Icons aussehen. Als Hintergrund gibt es 'icon round' (rund), 'icon square' (Rechteck mit abgerundeten Ecken) und 'icon squareborder' (Rechteck mit abgerundeten Ecken und einem zusätzlichen Rand).<br>
Mit der Class 'bg-limit' wird der Hintergrund des Icon auf grün oder rot gesetzt, passend zum on/off Status des data-limits.

[[#Beispiel_label|Link zu einem Beispiel]]

=== Widgets LEVEL ===
<div id="level">'''LEVEL'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-min
|minimal value to set
|'0'
|-
!align="right" |data-max
|maximal value to set
|'100'
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits
|a array of numeric or RegEx values to affect the colour of the label
|
|-
!align="right" |class
|mini, horizontal
|
|-
|}

[[#Beispiel_level|Link zu einem Beispiel]] (fehlt noch)

<div id="pagetab">'''PAGETAB'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL of the new page to show
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|'fa-power-off'
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|''
|-
!align="right" |data-on-background-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-background-color
|color of OFF state
|'#505050'
|-
!align="right" |data-on-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-color
|color of Off state
|'#505050'
|-
!align="right" |data-get-on
|array of status to assign a special icon-list from data-icons
|
|-
!align="right" |data-icons
|array of icons related to the a data-get-on array
|
|-
!align="right" |class
|warn, activate (as additionals for data-icons)
|
|-
|}

[[#Beispiel_pagetab|Link zu einem Beispiel]]

<div id="playstream">'''PLAYSTREAM'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL des Radio-Streams
|-
!align="right" |data-get
|name of the reading to get the control state from FHEM
|'STATE'
|-
!align="right" |data-get-on
|value for PLAY status to get.
|'on'
|-
!align="right" |data-get-off
|value for STOP status to get.
|'off'
|-
!align="right" |data-volume
|name of the reading to get the volume value (0-100)
|volume
|-
|}

[[#Beispiel_playstream|Link zu einem Beispiel]]

<div id="popup">'''POPUP'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading where to get the alert value from
|'STATE'
|-
!align="right" |data-get-on
|value which trigger to open the dialog
|'on'
|-
!align="right" |data-off
|value which trigger to close the dialog
|'off'
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
|}

[[#Beispiel_popup|Link zu einem Beispiel]]

<div id="progress">'''PROGRESS'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-max
|maximal value to set or name of the reading which helds the max value
|100
|-
!align="right" |class
|novalue, percent
|
|-
|}

[[#Beispiel_progress|Link zu einem Beispiel]] (fehlt noch)

<div id="push">'''PUSH'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-set
| name of the reading to set on FHEM (<command> <device> <reading> <value>)
|
|-
!align="right" |data-set-on
|value to send when the the button get pressed oder ein Array zwischen dessen Werten umgeschaltet werden kann
|
|-

!align="right" |data-icon
|name of the font-awesome icon
|
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|'fa-circle'
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-doubleclick
|timeout to wait for a second click or touch. '0' disables the doubleclick feature.
|0
|-
!align="right" |data-countdown
|secondes for the countdown progress control
|autodetect from 'on-for-timer' command
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|
|-
!align="right" |data-off-background-color
|fix color attribute for OFF state or DEVICE:READING for dynamic setting
|#505050
|-
!align="right" |data-off-color
|fix color attribute for Off state or DEVICE:READING for dynamic setting
|#505050
|-
|}

[[#Beispiel_push|Link zu einem Beispiel]]

<div id="rotor">'''ROTOR'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" | data-delay
|time in millisecondes to wait until next list item get shown
|3500
|-
!align="right" |class
|fade, rotate
|''
|-
|}
Ohne Angabe von class erfolgt keine Animation.

[[#Beispiel_rotor|Link zu einem Beispiel]]

<div id="select">'''SELECT'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading that get the selected item of the list
|
|-
!align="right" |data-set
|name of the reading to set on Fhem (<command> <device> <reading> <value>)
|''
|-
!align="right" |data-list
|name of the reading to get a :-separated list from Fhem
|''
|-
!align="right" |data-items
|an array of fix items to show in the selection box (alternative if data-list is empty)
|
|-
!align="right" |data-alias
|an array of fix names to show only in the selection box as an alias to the real items
|
|-
!align="right" |data-cmd
|name of the command to send to Fhem (<command> <device> <reading> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-quote
|characters to enclose the send value
|
|-
!align="right" |class
|wider, w1x, w2x, w3x, large, big
|
|-
|}

[[#Beispiel_select|Link zu einem Beispiel]]

<div id="simplechart">'''SIMPLECHART'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-logdevice
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung)
|
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log)
|'-' means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int")
|''
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY
|10
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY
|30
|-
!align="right" |data-yticks
|value distance between Y tick lines
|5
|-
!align="right" |data-xticks
|time range between each X tick line (in Minuten)
|360 minutes
|-
!align="right" |data-daysago
|number of days back from now
|0
|-
!align="right" |data-caption
|name of the chart to show as text
|
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks
|
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
!align="right" |class
|fullsize, noticks
|
|-
|}

[[#Beispiel_simplechart|Link zu einem Beispiel]] (fehlt noch)

<code>data-logfile</code> kann man auch weglassen, dann greift der Defaultwert "-". Damit wird das neuste Logfile gelesen.

<div id="slider">'''SLIDER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|100
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-value
|wenn true wird beim sliden der Wert angezeigt
|
|-
!align="right" |data-width
|width for horizontal sliders
|'120px', for mini '60px'
|-
!align="right" |data-height
|height for vertical sliders
|'120px', for mini '60px'
|-
!align="right" |class
|Aussehen/Ausrichtung
|
|-
|}

Für class steht mini, horizontal und negated (0 liegt oben) zur Verfügung.

[[#Beispiel_slider|Link zu einem Beispiel]]

<div id="switch">'''SWITCH'''</div>

{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-get-on
|Wert, bei dem zum Status ON geschaltet werden soll.
|'on'
|-
!align="right" |data-get-off
|Wert, bei dem zum Status OFF geschaltet werden soll.
|'off'
|-
!align="right" |data-set-on
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf ON geschaltet wurde
|Wert von data-get-on
|-
!align="right" |data-set-off
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf OFF geschaltet wurde
|Wert von data-get-off
|-
!align="right" |data-cmd
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-icon
|Name des Font-Awesome Icon.
|'fa-lightbulb-o'
|-
!align="right" |data-background-icon
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-color
|Widget Farbe beim Status ON
|'#aa6900'
|-
!align="right" |data-off-color
|Widget Farbe beim Status OFF
|'#505050'
|}

<code>data-get-on</code> and <code>data-get-off</code> accept also RegEx values. e.g. data-get-on="[0-9]{1,3}|on" means set switch on if STATE is a numeric value or 'on'. data-get-off="!on" means accept all but the data-get-on value (negation)

[[#Beispiel_switch|Link zu einem Beispiel]]

=== Widgets SYMBOL ===
<div id="symbol">'''SYMBOL'''</div>

Mit dem SYMBOL Widget kann der STATUS eines Device dargestellt werden. Dabei kann das angezeigte Symbol und dessen Farbe bestimmt werden. Wie bei anderen Widgets kann das Symbol und die Farbe vom State abhängig konfiguriert werden. Das SYMBOL-Widget dient nur zur Anzeige eines STATUS, es besitzt kein Möglichkeit der Interaktion.

Neben den '''allgemeine Attribute''' besitzt das SYMBOL-Widget die nachfolgenden Attribute.

dual state notation
{| class="wikitable"
! HTML Attribut !! Beschreibung !! Default Wert
|-
| data-get || Name des Reading, was gelesen werden soll || 'STATE'
|-
!align="right" |data-get-on
|value for ON status to get.
|'open'
|-
!align="right" |data-get-off
|value for OFF status to get.
|'closed'
|-
!align="right" |data-icon
|Name des font-awesome-Symbols
|'ftui-window'
|-
!align="right" |data-background-icon
|Hintergrundsymbol
|''
|-
!align="right" |data-on-background-color
|Farbe für ON-Zustand.
|'#aa6900'
|-
!align="right" |data-off-background-color
|Farbe für OFF-Zustand.
|'#505050'
|-
!align="right" |data-on-color
|Farbe für ON-Zustand.
|'#aa6900'
|-
!align="right" |data-off-color
|Farbe für OFF-Zustand.
|'#505050'
|-
|}

multi state notation

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-states
|array of states.
|
|-
!align="right" |data-icons
|Array mit Icons zu data-states Array
|
|-
!align="right" |data-background-icons
|Array mit Icons zu data-states Array
|
|-
!align="right" |data-colors
|array of colors related to the data-states array
|''
|-
!align="right" |data-background-colors
|array of background-colors related to the data-states array
|''
|-
|}

data-get-on,data-get-off and data-states accept also RegEx values. The value for one icon can also contain an additional animatation CSS name, e.g. "fa-exclamation-triangle fa-blink" for a blinking Symbol

[[#Beispiel_symbol|Link zu einem Beispiel]]

=== Widgets THERMOSTAT===
<div id="thermostat">'''THERMOSTAT'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'desired-temp'
|-
!align="right" |data-temp
|reading for measured temperature of thermostates
|'measured-temp'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|'desired-temp'
|-
!align="right" |data-valve
|reading for valve position of thermostates
|
|-
!align="right" |data-min
|minimal value to set
| 10
|-
!align="right" |data-max
|maximal value to set
| 30
|-
!align="right" |data-minColor
|Farbe des Keises für Min
| #4477FF
|-
!align="right" |data-maxColor
|Farbe des Kreises für Max, zwischen Min und Max wird linear interpoliert
| #FF0000
|-
!align="right" |data-step
|step size for value adjustment e.g. 0.5
|1
|-
!align="right" |data-bgColor
|Die Farbe der Kreises zwischen den ticks
|'transparent'
|-
!align="right" |data-fgColor
|Die Farbe der zahl im Kreismittelpunkt
|#bbbbbb
|-
!align="right" |data-tkColor
|Die Farbe der ticks
|#696969
|-
|-
!align="right" |data-angleOffset
|Start der ticks im Kreis (in Winkelgraden, 0 = oben)
| -120
|-
!align="right" |data-angleArc
|Bereich der ticks im Kreis (in Winkelgraden)
|240
|-
!align="right" |class
|big, readonly
|
|-
|}

[[#Beispiel_thermostat|Link zu einem Beispiel]]

<div id="volume">'''VOLUME'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|''
|-
!align="rigth" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|70
|-
!align="right" |class
|small, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back
|
|-
|}

[[#Beispiel_volume|Link zu einem Beispiel]] (fehlt noch)

<div id="weather">'''WEATHER'''</div>

{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get the weather literal from Fhem
|'STATE'
|-
!align="right" |data-imageset
|collection of images to display current weather situation. Possible values: 'meteocons', 'kleinklima'
|'meteocons'
|-
!align="right" |data-image-path
|path to the images of the selected imageset
|/images/weather/
|-
|}

[[#Beispiel_weather|Link zu einem Beispiel]]

== Widgets -- Beispiele ==

<div id="Beispiel_chart">'''Chart'''</div>

Display a chart with similar capabilities as the FHEM plots

<pre>
<div data-type="chart"
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'
data-ptype='["lines","histeps","histeps","cubic"]'
data-uaxis='["primary","secondary","secondary","primary"]'
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="mm"
data-ytext_sec="Rain (mm)"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="2013-08-13T00:00:00"
data-daysago_end="2013-08-14T00:00:00"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</pre>

[[Datei:chart_tabletUI.png]]

<div id="Beispiel_circlemenu">'''Circlemenu'''</div>

Cover a lot of other button behind one single button

<pre>
<div class="left">
<div data-type="circlemenu" class="cell circlemenu">
<ul class="menu">
<li><div data-type="push" data-icon="fa-wrench"></div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -6"
data-icon="">-6</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -2"
data-icon="">-2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level 0"
data-icon="">0</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +3"
data-icon="">2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +9"
data-icon="">9</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +C"
data-icon="">12</div></li>
</ul>
</div>
<div data-type="label" class="cell">Woofer</div>
</div>
</pre>

[[Datei:circlemenu_tabletUI.png]]

<div id="Beispiel_dimmer">'''Dimmer'''</div>

Dimmer Widget Beispiel für Philips Hue

Minimalvariante
<pre>
<div data-type="dimmer" data-device="HUEDevice1"
data-get-on="!off" data-get-off="off"
data-set="pct"</div>
</pre>

Mit Anzeige der Dimstufe
<pre>
<div data-type="dimmer" data-device="HUEDevice1"
data-get="onoff"
data-get-on="1" data-get-off="0"
data-set=""
data-set-on="on" data-set-off="off"
data-dim="pct">
</div>
</pre>

Dimmer Widget für MilightDevice

<pre>
<div data-type="dimmer"
data-device="SonstWas"
data-get="brightness"
data-get-off="0"
data-get-on="[1-9][0-9]*"
data-set-on="on"
data-set-off="off"
data-dim="dim"
data-min="0"
data-max="100"
></div>
</pre>

<div id="Beispiel_homestatus">'''Homestatus'''</div>

Beispiel rechts im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
data-get-on='["1","2","3","4"]'
data-alias='["Home","Night","Away","Holiday"]'
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase"]'>
</div>
</pre>

Beispiel links im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
data-get-on='["home","asleep","absent","gone","gotosleep"]'
data-alias='["Home","Night","Away","Holiday","Retire"]'
data-icons='["fa-fire","fa-film","fa-plus","fa-car","fa-tint"]'
data-version='residents'>
</div>
</pre>

[[Datei:homestatus_tabletUI.png]]

<div id="Beispiel_image">'''Image'''</div>

Erzeugt ein Widget mit einem Bild aus dem www, das alle 5 Sekunden aktualisiert wird (hier eine Wetterkarte vom DWD).

<pre>
<div data-type="image"
data-size="80%"
data-url="http://www.dwd.de/wundk/wetter/de/Deutschland.jpg"
</div>
</pre>

[[Datei:image_tabletUI.jpg]]

Example for how to add an image to the dashboard which its URL is delivered by a Fhem module like PROPLANTA:

<pre>
<div data-type="image" data-device="Wetter1"
data-get="fc0_weatherDayIcon"
data-size="40px"
class="cell">
</div>
</pre>

<div id="Beispiel_label">'''Label'''</div>

Example for HM-WDS40-TH-I Funk-Temperatur-/Feuchtesensor innen

<pre>
STATE T: 20.0 H: 61
</pre>
<pre>
<div data-type="label" data-device="THSensorWZ"
data-part="2" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ" data-part="4"
data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>

But the same result can reached by getting single readings:
<pre>
humidity 58
temperature 20.1
</pre>

<pre>
<div data-type="label" data-device="THSensorWZ"
data-get="temperature" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ"
data-get="humidity" data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>

Example for how to influence the color of the label according to value limits
<pre>
<div data-type="label"
data-device="OutTemp"
data-limits='[-73,10,23]'
data-colors='["#6699FF","#AA6900","#FF0000"]'
data-unit="%B0C%0A"
class="cell big">
</div>
</pre>

Example for how to create a widget for shutter via push: show state and set up/down
<pre>
<div data-type="switch"
data-device="wzRollo"
data-get-on="up"
data-get-off="down"
data-icon="fa-bars"
class="cell" >
</div>
<div data-type="label"
class="cell">Rollo</div>
</pre>

Example for how to create a label for a time value in short format with usage of RegEx.

<pre>
<div data-type="label"
data-device="dummy1"
data-part="(\d\d\.\d\d\.).*"
class="cell">
</div>
</pre>

Example for how to show two labels in one line.

<pre>
<div class="">
<div type="label" device="OnSunrise" class="inline"></div>bis
<div type="label" device="OnSunset" class="inline"></div>
</div>
</pre>

Beispiel für die Anzeige des UV-Indexes und der Abhängigkeit der anzuzeigenden Farbe.

<pre>
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
data-get="fc0_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc0_date"></div>
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
data-get="fc1_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc1_date"></div>
</pre>

[[Datei:label_tabletUI.jpg]]

Beispiel für die Anzeige des Labels als Icon.
<pre>
<div class="cell">
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon round bg-red cell"></div>
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon square bg-blue cell"></div>
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon squareborder cell"></div>
<div data-type="label" data-device="PowerAV_Sw" data-colors='["red","green"]' data-limits='["off","on"]' class="icon round bg-limit cell"></div>
</div>
</pre>

[[Datei:Label_tabletUI_icon.png]]

<div id="Beispiel_pagetab">'''Pagetab'''</div>

Example for a tab menu to switch smoothly between multiple pages. Multiple pagetabs in a template file: menu.html

<pre>
<html>
<body>
<header>MENU</header>
<div class="cell">
<div data-type="pagetab" data-url="index.html" data-icon="fa-home" class="cell"></div>
<div data-type="pagetab" data-url="index_2.html" data-icon="fa-sliders" class="cell"></div>
<div data-type="pagetab" data-url="index_3.html" data-icon="fa-music" class="cell"></div>
<div data-type="pagetab" data-url="index_4.html" data-icon="fa-hotel" class="cell"></div>
<div data-type="pagetab" data-url="index_5.html" data-icon="fa-music" class="cell"></div>
<div data-type="pagetab" data-url="index_6.html" data-icon="fa-database" class="cell"></div>
<div data-type="pagetab" data-url="index_7.html" data-icon="fa-fax" class="cell"></div>
</div>
</body>
</html>
</pre>

<div id="Beispiel_playstream">'''Playstream'''</div>

Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.

<pre>
<div data-type="playstream" data-url="http://radioeins.de/stream"></div>
<div data-type="label" class="darker">Radio eins</div>
</pre>

<div id="Beispiel_push">'''Push'''</div>

Example for how to create a push button widget to trigger all devices on:

<pre>
<div data-type="push"
data-device="LightAll"
data-cmd="trigger"
data-set="on"
class="cell">
</div>
</pre>

Beispiel für zwei horizontale Buttons:

<pre>
<div class="cell">
<div class="doublebox-h">
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push1.png]]

Beispiel für zwei quadratische vertikale Buttons:

<pre>
<div class="cell">
<div class="doublebox-v">
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push2.png]]

<div id="Beispiel_rotor">'''Rotor'''</div>

Example for a rotor widget, which switches between to days of weather forecast

<pre>
<div data-type="rotor" class="fade">
<ul>
<li>
<div data-type="label" class="darker">Heute</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
<li>
<div data-type="label" class="darker">Morgen</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
</ul>
</div>
</pre>

<div id="Beispiel_select">'''Select'''</div>

Erzeugt zwei Comboboxen zur Auswahl des Eingang eines 2-Zonen-AV-Receivers. Die Liste für Zone2 ist fest, die Liste für Zone1 wird von Fhem übergeben.

<pre>
<div class="cell wider">
<div data-type="label" class="inline wider">Zone2</div>
<div data-type="select" data-device="AvReceiverZ2" data-items='["Airplay","Webradio","BD/DVD","PHONO"]' data-get="input" data-set="input" class="cell w2x" ></div>
<div></div>
<div data-type="label" class="inline">Zone1</div>
<div data-type="select" data-device="AvReceiver" data-list="inputs" data-get="input" data-set="input" class="cell w2x" ></div>
</div>
</pre>

[[Datei:select_tabeltUI.png]]

<div id="Beispiel_slider">'''Slider'''</div>

Slider mit einstellbaren Werten von 10 bis 90:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</pre>

[[Datei:slider_tabletUI.png]]

Horizontal angeordneter Slider:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="0"
data-max="100"
class="horizontal"
</div>
</pre>

[[Datei:slider_tabletUI2.jpg]]

<div id="Beispiel_switch">'''Switch'''</div>

Schalter. Usage of RegEx pattern for state request:

<pre>
<div data-type="switch" class="cell"
data-device="MILIGHT_Zone1_Wohnzimmer"
data-get-on="on.*"
data-get-off="off"></div>
</pre>

[[Datei:switch.png]]

Beispiel für eine Gruppe von Schaltern, um zwischen vier verschiedenen Werten eines device umzuschalten:

<pre>
<div class="cell left">
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert1).)*"
data-get-on="Wert1" class="cell" ></div>
<div data-type="label" class="cell">Wert1</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert2).)*"
data-get-on="Wert2" class="cell" ></div>
<div data-type="label" class="cell">Wert2</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert3).)*"
data-get-on="Wert3" class="cell" ></div>
<div data-type="label" class="cell">Wert3</div>
<div data-type="switch" data-device="dummy1"
data-get-off="((?!Wert4).)*"
data-get-on="Wert4" class="cell" ></div>
<div data-type="label" class="cell">Wert4</div>
</div>
</pre>

[[Datei:switch4.png]]

<div id="Beispiel_symbol">'''Symbol'''</div>

Example for a tristate icon

<pre>
<div data-type="symbol" data-device="dummy1"
data-get-on='["wert1","wert2","wert3"]'
data-icons='["fa-arrow-up","fa-user","fa-arrow-down"]'
data-on-colors='["SeaGreen","SlateBlue","IndianRed"]'
class="cell big">
</div>
</pre>

Example for a tristate icon with blink and spin animation

<pre>
<div data-type="symbol" data-device="dummy1"
data-icons='["fa-exclamation-triangle fa-blink","fa-exclamation-circle","fa-cog fa-spin"]'
data-on-colors='["Crimson","GoldenRod","SeaGreen"]'
data-get-on='["Wert1","Wert2","Wert3"]' >
</div>
</pre>

Example for a battery level control with RegEx

<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
data-icons='["oa-measure_battery_100","oa-measure_battery_75","oa-measure_battery_50","oa-measure_battery_25","oa-measure_battery_0"]'
data-get-on='["3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]'
data-on-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'>
</div>
</pre>

Example for a battery level control with greater-equal compare and 90° rotated symbols

<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'
data-get-on='["0","2","2.4","2.7","3.0"]'
data-on-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'>
</div>
</pre>

<div id="Beispiel_thermostat">'''Thermostat'''</div>

Configure as data-device='...' that item which delivers temp and desired-temp as reading.

Default parameters are:
<pre>
data-get="desired-temp" data-temp="measured-temp" data-set="desired-temp"
</pre>

Therefor for HomaMatic HM-CC-RT-DN this is sufficient.

<pre>
<div data-type="thermostat" data-device='KH_Clima' class="cell"></div>
</pre>

The long format looks like this:

<pre>
<div data-type="thermostat"
data-device="KH_Clima"
data-get="desired-temp"
data-temp="measured-temp"
class="cell">
</div>
</pre>

Example for MAX!:
<pre>
<div data-type="thermostat" data-device="HZ_Tuer"
data-valve="valveposition"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature"
class="cell">
</div>
</pre>

The wigets will show the valve value only in case of a valid data-valve attribute. The default for data-valve ist null. That means, a empty data-valve attribute hides the valve label for the widget.

[[Datei:thermostat.png]]

<div id="Beispiel_weather">'''Weather'''</div>

Das Widget fügt ein dem Wetter entsprechendes Bild ein. Die Daten können durch Fhem-Module wie [[PROPLANTA]], [[OPENWEATHER]] und [[Weather]] bereitgestellt werden.
Add 'big' or 'bigger' to CSS class to get a bigger weather icon.

Beispiel:
<pre>
<div data-type="weather"
data-device="Weather"
data-get="fc0_weatherDay"
class="cell big">
</div>
</pre>

[[Datei:weather.png]]

== Icon-Konfiguration ==

* Eingebaute Icons: Diese haben das ftui-Präfix. Zurzeit sind folgende verfügbar: ftui-window, ftui-door

* Mehr als 500 Icons von "http://fortawesome.github.io/Font-Awesome/icons" verfügbar. Einfach den Icon-Namen angeben (Präfix "fa-" nicht vergessen, Z.B. <code>data-icon="fa-volume-up"</code>

* Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.
<pre>
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
</pre>

Diese font icons haben das Präfix 'fs-' bzw. 'oa-'.

Beispiel bei einem Schalter:
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>

Und so als großes Symbol:
<pre>
<div data-type="symbol" data-device='dummy1'
data-icon="oa-status_frost"
data-on-color="#bb3232"
data-get-on="on"
data-get-off="!on"
class="bigger">
</div>
</pre>

Die Icons kann man auch etwas dicker darstellen mit den Zusatz bold: <code>data-icon="oa-secur_locked bold"</code>

Die Namen der verfügbaren Icons findet man auch in den CSS Files (openautomation.css / fhemSVG.css)

== Spezial ==
Folgender Befehl setzt einen direkten Befehl an Fhem ab (<code>set dummy1 off</code>):
<pre>
<div onclick="setFhemStatus('set dummy1 off')">All off!</div>
</pre>

== FAQ ==
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM_Tablet_UI/FAQ|FHEM Tablet UI FAQ]] zusammengestellt.

== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* [http://forum.fhem.de/index.php/topic,37378.0.html User-Demos]
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]

[[Kategorie:FHEM Frontends]]