FHEMWiki - Benutzerbeiträge [de]

Harmony

2017-08-12T21:59:01Z

EnlightningMan: /* Aktivitäten */

{{SEITENTITEL:harmony}}
{{Infobox Modul
|ModPurpose=Anbindung Logitech Harmony Hub basierter Fernbedienungen
|ModType=d
|ModCmdRef=harmony
|ModForumArea=Multimedia
|ModTechName=37_harmony.pm
|ModOwner=Andre ([http://forum.fhem.de/index.php?action=profile;u=430 Forum] / [[Benutzer Diskussion:justme|Wiki]])}}

Das FHEM-[[:Kategorie:Gerätemodul|Gerätemodul]] [[harmony]] bietet die Möglichkeit Logitech Harmony Hub basierte Fernbedienungen an FHEM anzubinden und so von FHEM aus Aktivitäten zu starten und zu stoppen, in FHEM auf das Starten und Stoppen von Aktivitäten über eine der mit dem Hub verbundenen Fernbedienungen zu reagieren oder auf Geräteebene jedes im Hub konfigurierte Gerät über IR, Bluetooth und/oder einen Smart Keyboard USB Dongle zu steuern.

Unterstützt werden zur Zeit die Modelle Ultimate Hub, Ultimate Smart Control, Ultimate, Smart Keyboard sowie alle darauf basierenden Kombinationen mit Smart Control und Smart Keyboard Add-On.

== Define ==
define <hub> harmony [<username> <password>] <ip>

Hier sind <code>username</code> und <code>password</code> die myharmony Zugangsdaten und <code>ip</code> ist die IP-Adresse des Hub im lokalen Netz.

Für die Firmware-Versionen 3.x ist die volle Funktionalität des Moduls auch ohne Angaben von <code>username</code> und <code>password</code> gegeben. Ab Firmware 4.x muss beides angegeben werden. Sonst ist keine Steuerung auf Geräteebene möglich.

==Allgemeines==
Aktivitäten und Geräte lassen sich an allen Stellen entweder als ID oder als Name angeben. Wenn der Name angegeben wird, müssen hierbei Leerzeichen durch einen Punkt ersetzt werden. Dies kann auch für eventuell andere im Namen vorhandene Sonderzeichen gelten.

== Aktivitäten ==
Das Reading <code>currentActivity</code> enthält die gerade laufende Aktivität. Beim Wechsel zwischen Aktivitäten erzeugt es Events, auf die in FHEM über ''notify'' reagiert werden kann. Das Reading <code>previousActivity</code> enthält die davor laufende Aktivität, sofern diese bekannt ist. Dieses Reading erzeugt keine Events.

In den Internals <code>currentActivityID</code> und <code>previousActivityID</code> stehen die dazu gehörenden IDs der Aktivitäten.

Mögliche Aktivitäten anzeigen geht über
get <hub> activities

Eine der Aktivitäten via FHEM starten über
set <hub> activity <activityname>
Wobei der Activityname zwingend so geschrieben werden muss wie FHEM ihn im Dropdown anzeigt.

Innerhalb einer laufenden Aktivität kann mit
set <hub> command <command>
ein IR-Kommando an eines der beteiligten Geräte gesendet werden.

== Geräteebene ==
Innerhalb und außerhalb einer laufenden Aktivität kann mit
set <hub> command <id|name> <command>
ein IR-Kommando an eines der im Hub bekannten Geräte gesendet werden. Hierbei ist darauf zu achten, dass innerhalb einer Aktivität keine Kommandos verwendet werden sollten, die den Smart-State betreffen.

Die möglichen Kommandos kann man sich über
get <hub> deviceCommands
anzeigen lassen.

Wichtig ist, dass wenn in der so erzeugten Liste ein Gerät mit Leerzeichen geschrieben wird, dass man im FHEM Befehl das Leerzeichen durch einen "." ersetzen muss. Hat man bspw. ein Harmony Device "Samsung TV" ist der Gerätebefehl zum anschalten:
set <hub> command Samsung.TV PowerOn

=== FHEM Devices auf Geräteebene ===
Es ist möglich, sich für einzelne oder alle im Hub konfigurierten Geräte ein zugehöriges FHEM-Device anlegen zu lassen:
set <hub> autocreate [<id|name>]

Beim Umschalten zwischen Aktivitäten wird in diesen FHEM-Devices im Reading power der in der Aktivität konfigurierten Einschaltzustand (on, off oder manual) angezeigt. Mit einem ''notify'' auf <code>power</code> Events lässt sich in FHEM auf einzelne Geräte reagieren.

'''Wichtig:''' Diese FHEM-Device spiegeln nicht den tatsächlichen Gerätezustand wieder, sondern den innerhalb einer Aktivität beabsichtigen Zustand. Der tatsächliche Zustand kann z.B. auf Grund von Empfangsproblemen abweichen.

Das get <code>commands</code> sowie die set <code>command</code>, <code>hidDevice</code>, <code>text</code>, <code>cursor</code> und <code>special</code> Kommandos auf Hub-Ebene stehen hier direkt und ohne Angabe von Device-ID oder Name zur Verfügung.

=== Kommandos an FHEM senden ===
Da es (zur Zeit) nicht möglich ist, Geräte-Kommandos oder einzelne Tasten direkt vom HUB zu empfangen, muss hierzu ein zusätzlicher Empfänger in FHEM eingebunden werden. Dies kann z.B. mit einem MCE-IR Empfänger oder per Bluetooth geschehen. Ein FHEM-Modul hierzu findet sich im in diesem {{Link2Forum|Topic=36257|LinkText=Forenthread}}.

Mit dem in diesem {{Link2Forum|Topic=51619|LinkText=Forenthread}} vorgestellten Modul ist es möglich einzeln belegte Tasten der Harmony über das Roku External Control Protocol per Netzwerk an FHEM zu senden und dort auszuwerten.

== Smart Keyboard ==
Der Harmony Hub kann über Bluetooth oder die zum Smart Keyboard gehörenden USB-Dongle mit einem Rechner, Media PC oder sonstigem Gerät, das Tastatureingabe unterstützt, verbunden werden. FHEM kann diese Verbindung nutzen, um beliebige Tastendrücke an ein solches Gerät zu senden. Das können Texte sein, Cursorbewegungen oder die Power-, Multimedia oder sonstigen Funktionstasten, die das Gerät unterstützt.

Alle gesendeten Tastendrücke beziehen sich normalerweise auf das zur gerade laufenden Aktivität gehörende Tastatureingabegerät. Mit dem <code>hidDevice</code> Kommando lässt sich die Tastatureingabe auf jedes im Hub dafür konfigurierte Gerät umschalten.

'''Wichtig:''' Dieses Umschalten kann einige Sekunden dauern, da hierbei die bestehende Bluetooth-Verbindung getrennt und eine neue aufgebaut wird.

Es stehen die Kommandos <code>text</code>, <code>cursor</code> und <code>special</code> zur Verfügung.

Beispiele:

Gehe in PLEX auf die Library Musik und spiele das erste Item in der OnDeck Liste:
set <hub> text M
set <hub> cursor right
set <hub> text p

== Beispiele ==

=== Vorgeschaltete Funksteckdose ansteuern ===

'''Vorbereitung Harmony'''

Nachdem die Geräte mit Strom versorgt werden, benötigen sie einige Sekunden, bis sie ihre Einschaltsignale verarbeiten können. Diese Verzögerung wird durch ein Dummy Gerät in jeder Aktion erzeugt.

1) In MyHarmony einen Amazon Fire TV anlegen und ihm einen passenden Namen geben (z.B. Pause)

2) Unter "Geräte" dieses markieren und per "Ändern der Betriebseinstellungen" die Einstellungen aufrufen

3) Punkt "Ich möchte dieses Gerät eingeschaltet lassen, wenn Aktionen gewechselt werden und nur durch Drücken der Off-Taste ausschalten" auswählen

4) Einen harmlosen Befehl einfügen ("Search"), danach eine Verzögerung von 5000ms einbauen und dann noch einen Befehl ("Search"). Dies bewirkt eine Verzögerung von 5 Sekunden beim Ein- und Ausschalten

5) Unter Aktionen die Aktion auswählen und per "Einstellung ändern" das neue Gerät hinzufügen

6) Per "Diese Aktion anpassen" das neue Gerät an die erste Stelle schieben

7) Schritte 5-7 für alle Aktionen wiederholen

'''Konfiguration in FHEM'''

1) Der Harmony Hub muss existieren

#Harmony Hub Wohnzimmer definieren
define wz_harmonyhub harmony 192.168.123.123

2) Ihr benötigt eine fertig konfigurierte Funksteckdose (hier "wz_Multimedia")

3) Ihr baut eine Bedingung, die auf den Ein- und Ausschaltvorgang des Harmony Hub (hier wz_harmonyhub) reagiert und die Steckdose (hier wz_Multimedia) schaltet. Es wird eine '''zusätzliche''' Pause genutzt von 0 Sekunden bei der ersten Bedingung (wäre kontraproduktiv) und 10 Sekunden bei der zweiten Bedingung (DOELSEIF). Bei der Nutzung eines Beamers lässt sich hierüber die Abkühlzeit einstellen. Im Beispiel bleiben den Geräten somit 15 Sekunden zum Ausschalten und 5 Sekunden um die Empfangsbereitschaft herzustellen. Die erste Bedingung im DOIF ist eine Regex, da "currentActivity" bei mehrfachem Abschalten hintereinander immer wieder von "PowerOff" auf "Stopping PowerOff" wechselt.

#Auf den Schaltvorgang des Hubs reagieren
define wz_Multimedia_Automatik DOIF ([wz_harmonyhub:currentActivity] !~ /PowerOff/) (set wz_Multimedia on) DOELSEIF ([wz_harmonyhub:activity] eq "PowerOff") (set wz_Multimedia off)
attr wz_Multimedia_Automatik wait 0:10

====Weitere Möglichkeiten====
Statt Fire TV kann jedes andere nicht vorhandene Gerät als Platzhalter in der Harmony verwendet werden. In diesem Gerät kann man auch direkt die Einschaltverzögerung anpassen um die nötige Wartezeit zu erhalten.
Besser als ein notify oder DOIF auf Activity-Ebene ist es über die Harmony autocreate funktion ein FHEM Device für die platzhalter Steckdose anzulegen und dort dann auf das power Event zu reagieren. Damit ist man unabhängig von allen Änderungen bei den Activities.

===Button für eine bestimmte Activity im Frontend und Homekit über readingsProxy ===
In FHEMWEB und Homebridge:
<syntaxhighlight lang="perl">
define Fernsehen readingsProxy <hub>:activity
attr Fernsehen devStateIcon on:control_on_off@green off:control_standby
attr Fernsehen event-on-change-reading .*
attr Fernsehen genericDeviceType switch
attr Fernsehen setFn { return 'activity <meine activity>' if( $CMD eq 'on' );; return 'off';; }
attr Fernsehen setList on off
attr Fernsehen valueFn { return 'on' if( $VALUE eq '<meine activity>' );; return 'off';; }
</syntaxhighlight>

Zusätzlich im TableUI:
<syntaxhighlight lang="xml">
<div class="left">
<div data-type="switch" data-device="Fernsehen" data-icon="fa-tv" class="cell" ></div>
<div data-type="label" class="narrow">FERNSEHEN</div>
</div>
</syntaxhighlight>

== Bekannte Probleme ==
Wenn FHEM den Harmony Hub nicht erreichen kann, blockiert das Modul FHEM für den Timeout von 2 Sekunden im Abstand von nur wenigen Sekunden:

<pre>[...]
2015.12.26 18:25:45 1: Perfmon: possible freeze starting at 18:25:43, delay is 2.794
2015.12.26 18:25:58 1: Perfmon: possible freeze starting at 18:25:56, delay is 2.709
2015.12.26 18:26:11 1: Perfmon: possible freeze starting at 18:26:09, delay is 2.676
2015.12.26 18:26:24 1: Perfmon: possible freeze starting at 18:26:22, delay is 2.686
2015.12.26 18:26:37 1: Perfmon: possible freeze starting at 18:26:35, delay is 2.686
[...]
</pre>

Da dieses Blockieren die Funktionalität von FHEM beeinträchtigen kann, sollte man bei geplanten Auszeiten des Hubs diesen disablen:

set <hub> disable 1

== Weblinks ==
* [http://myharmony.com myHarmony] Logitech Harmony Hersteller
* [http://www.harmony-remote-forum.de/portal.php Harmony Remote Forum] deutsches Harmony Forum
* {{Link2Forum|Topic=14163|LinkText=Thread im FHEM Forum}} Weitere Infos im FHEM Forum Thread

[[Kategorie:Unterhaltungselektronik]]
[[Kategorie:IP Components]]

Harmony

2017-08-12T21:15:26Z

EnlightningMan: /* Geräteebene */

{{SEITENTITEL:harmony}}
{{Infobox Modul
|ModPurpose=Anbindung Logitech Harmony Hub basierter Fernbedienungen
|ModType=d
|ModCmdRef=harmony
|ModForumArea=Multimedia
|ModTechName=37_harmony.pm
|ModOwner=Andre ([http://forum.fhem.de/index.php?action=profile;u=430 Forum] / [[Benutzer Diskussion:justme|Wiki]])}}

Das FHEM-[[:Kategorie:Gerätemodul|Gerätemodul]] [[harmony]] bietet die Möglichkeit Logitech Harmony Hub basierte Fernbedienungen an FHEM anzubinden und so von FHEM aus Aktivitäten zu starten und zu stoppen, in FHEM auf das Starten und Stoppen von Aktivitäten über eine der mit dem Hub verbundenen Fernbedienungen zu reagieren oder auf Geräteebene jedes im Hub konfigurierte Gerät über IR, Bluetooth und/oder einen Smart Keyboard USB Dongle zu steuern.

Unterstützt werden zur Zeit die Modelle Ultimate Hub, Ultimate Smart Control, Ultimate, Smart Keyboard sowie alle darauf basierenden Kombinationen mit Smart Control und Smart Keyboard Add-On.

== Define ==
define <hub> harmony [<username> <password>] <ip>

Hier sind <code>username</code> und <code>password</code> die myharmony Zugangsdaten und <code>ip</code> ist die IP-Adresse des Hub im lokalen Netz.

Für die Firmware-Versionen 3.x ist die volle Funktionalität des Moduls auch ohne Angaben von <code>username</code> und <code>password</code> gegeben. Ab Firmware 4.x muss beides angegeben werden. Sonst ist keine Steuerung auf Geräteebene möglich.

==Allgemeines==
Aktivitäten und Geräte lassen sich an allen Stellen entweder als ID oder als Name angeben. Wenn der Name angegeben wird, müssen hierbei Leerzeichen durch einen Punkt ersetzt werden. Dies kann auch für eventuell andere im Namen vorhandene Sonderzeichen gelten.

== Aktivitäten ==
Das Reading <code>currentActivity</code> enthält die gerade laufende Aktivität. Beim Wechsel zwischen Aktivitäten erzeugt es Events, auf die in FHEM über ''notify'' reagiert werden kann. Das Reading <code>previousActivity</code> enthält die davor laufende Aktivität, sofern diese bekannt ist. Dieses Reading erzeugt keine Events.

In den Internals <code>currentActivityID</code> und <code>previousActivityID</code> stehen die dazu gehörenden IDs der Aktivitäten.

Innerhalb einer laufenden Aktivität kann mit
set <hub> command <command>
ein IR-Kommando an eines der beteiligten Geräte gesendet werden.

== Geräteebene ==
Innerhalb und außerhalb einer laufenden Aktivität kann mit
set <hub> command <id|name> <command>
ein IR-Kommando an eines der im Hub bekannten Geräte gesendet werden. Hierbei ist darauf zu achten, dass innerhalb einer Aktivität keine Kommandos verwendet werden sollten, die den Smart-State betreffen.

Die möglichen Kommandos kann man sich über
get <hub> deviceCommands
anzeigen lassen.

Wichtig ist, dass wenn in der so erzeugten Liste ein Gerät mit Leerzeichen geschrieben wird, dass man im FHEM Befehl das Leerzeichen durch einen "." ersetzen muss. Hat man bspw. ein Harmony Device "Samsung TV" ist der Gerätebefehl zum anschalten:
set <hub> command Samsung.TV PowerOn

=== FHEM Devices auf Geräteebene ===
Es ist möglich, sich für einzelne oder alle im Hub konfigurierten Geräte ein zugehöriges FHEM-Device anlegen zu lassen:
set <hub> autocreate [<id|name>]

Beim Umschalten zwischen Aktivitäten wird in diesen FHEM-Devices im Reading power der in der Aktivität konfigurierten Einschaltzustand (on, off oder manual) angezeigt. Mit einem ''notify'' auf <code>power</code> Events lässt sich in FHEM auf einzelne Geräte reagieren.

'''Wichtig:''' Diese FHEM-Device spiegeln nicht den tatsächlichen Gerätezustand wieder, sondern den innerhalb einer Aktivität beabsichtigen Zustand. Der tatsächliche Zustand kann z.B. auf Grund von Empfangsproblemen abweichen.

Das get <code>commands</code> sowie die set <code>command</code>, <code>hidDevice</code>, <code>text</code>, <code>cursor</code> und <code>special</code> Kommandos auf Hub-Ebene stehen hier direkt und ohne Angabe von Device-ID oder Name zur Verfügung.

=== Kommandos an FHEM senden ===
Da es (zur Zeit) nicht möglich ist, Geräte-Kommandos oder einzelne Tasten direkt vom HUB zu empfangen, muss hierzu ein zusätzlicher Empfänger in FHEM eingebunden werden. Dies kann z.B. mit einem MCE-IR Empfänger oder per Bluetooth geschehen. Ein FHEM-Modul hierzu findet sich im in diesem {{Link2Forum|Topic=36257|LinkText=Forenthread}}.

Mit dem in diesem {{Link2Forum|Topic=51619|LinkText=Forenthread}} vorgestellten Modul ist es möglich einzeln belegte Tasten der Harmony über das Roku External Control Protocol per Netzwerk an FHEM zu senden und dort auszuwerten.

== Smart Keyboard ==
Der Harmony Hub kann über Bluetooth oder die zum Smart Keyboard gehörenden USB-Dongle mit einem Rechner, Media PC oder sonstigem Gerät, das Tastatureingabe unterstützt, verbunden werden. FHEM kann diese Verbindung nutzen, um beliebige Tastendrücke an ein solches Gerät zu senden. Das können Texte sein, Cursorbewegungen oder die Power-, Multimedia oder sonstigen Funktionstasten, die das Gerät unterstützt.

Alle gesendeten Tastendrücke beziehen sich normalerweise auf das zur gerade laufenden Aktivität gehörende Tastatureingabegerät. Mit dem <code>hidDevice</code> Kommando lässt sich die Tastatureingabe auf jedes im Hub dafür konfigurierte Gerät umschalten.

'''Wichtig:''' Dieses Umschalten kann einige Sekunden dauern, da hierbei die bestehende Bluetooth-Verbindung getrennt und eine neue aufgebaut wird.

Es stehen die Kommandos <code>text</code>, <code>cursor</code> und <code>special</code> zur Verfügung.

Beispiele:

Gehe in PLEX auf die Library Musik und spiele das erste Item in der OnDeck Liste:
set <hub> text M
set <hub> cursor right
set <hub> text p

== Beispiele ==

=== Vorgeschaltete Funksteckdose ansteuern ===

'''Vorbereitung Harmony'''

Nachdem die Geräte mit Strom versorgt werden, benötigen sie einige Sekunden, bis sie ihre Einschaltsignale verarbeiten können. Diese Verzögerung wird durch ein Dummy Gerät in jeder Aktion erzeugt.

1) In MyHarmony einen Amazon Fire TV anlegen und ihm einen passenden Namen geben (z.B. Pause)

2) Unter "Geräte" dieses markieren und per "Ändern der Betriebseinstellungen" die Einstellungen aufrufen

3) Punkt "Ich möchte dieses Gerät eingeschaltet lassen, wenn Aktionen gewechselt werden und nur durch Drücken der Off-Taste ausschalten" auswählen

4) Einen harmlosen Befehl einfügen ("Search"), danach eine Verzögerung von 5000ms einbauen und dann noch einen Befehl ("Search"). Dies bewirkt eine Verzögerung von 5 Sekunden beim Ein- und Ausschalten

5) Unter Aktionen die Aktion auswählen und per "Einstellung ändern" das neue Gerät hinzufügen

6) Per "Diese Aktion anpassen" das neue Gerät an die erste Stelle schieben

7) Schritte 5-7 für alle Aktionen wiederholen

'''Konfiguration in FHEM'''

1) Der Harmony Hub muss existieren

#Harmony Hub Wohnzimmer definieren
define wz_harmonyhub harmony 192.168.123.123

2) Ihr benötigt eine fertig konfigurierte Funksteckdose (hier "wz_Multimedia")

3) Ihr baut eine Bedingung, die auf den Ein- und Ausschaltvorgang des Harmony Hub (hier wz_harmonyhub) reagiert und die Steckdose (hier wz_Multimedia) schaltet. Es wird eine '''zusätzliche''' Pause genutzt von 0 Sekunden bei der ersten Bedingung (wäre kontraproduktiv) und 10 Sekunden bei der zweiten Bedingung (DOELSEIF). Bei der Nutzung eines Beamers lässt sich hierüber die Abkühlzeit einstellen. Im Beispiel bleiben den Geräten somit 15 Sekunden zum Ausschalten und 5 Sekunden um die Empfangsbereitschaft herzustellen. Die erste Bedingung im DOIF ist eine Regex, da "currentActivity" bei mehrfachem Abschalten hintereinander immer wieder von "PowerOff" auf "Stopping PowerOff" wechselt.

#Auf den Schaltvorgang des Hubs reagieren
define wz_Multimedia_Automatik DOIF ([wz_harmonyhub:currentActivity] !~ /PowerOff/) (set wz_Multimedia on) DOELSEIF ([wz_harmonyhub:activity] eq "PowerOff") (set wz_Multimedia off)
attr wz_Multimedia_Automatik wait 0:10

====Weitere Möglichkeiten====
Statt Fire TV kann jedes andere nicht vorhandene Gerät als Platzhalter in der Harmony verwendet werden. In diesem Gerät kann man auch direkt die Einschaltverzögerung anpassen um die nötige Wartezeit zu erhalten.
Besser als ein notify oder DOIF auf Activity-Ebene ist es über die Harmony autocreate funktion ein FHEM Device für die platzhalter Steckdose anzulegen und dort dann auf das power Event zu reagieren. Damit ist man unabhängig von allen Änderungen bei den Activities.

===Button für eine bestimmte Activity im Frontend und Homekit über readingsProxy ===
In FHEMWEB und Homebridge:
<syntaxhighlight lang="perl">
define Fernsehen readingsProxy <hub>:activity
attr Fernsehen devStateIcon on:control_on_off@green off:control_standby
attr Fernsehen event-on-change-reading .*
attr Fernsehen genericDeviceType switch
attr Fernsehen setFn { return 'activity <meine activity>' if( $CMD eq 'on' );; return 'off';; }
attr Fernsehen setList on off
attr Fernsehen valueFn { return 'on' if( $VALUE eq '<meine activity>' );; return 'off';; }
</syntaxhighlight>

Zusätzlich im TableUI:
<syntaxhighlight lang="xml">
<div class="left">
<div data-type="switch" data-device="Fernsehen" data-icon="fa-tv" class="cell" ></div>
<div data-type="label" class="narrow">FERNSEHEN</div>
</div>
</syntaxhighlight>

== Bekannte Probleme ==
Wenn FHEM den Harmony Hub nicht erreichen kann, blockiert das Modul FHEM für den Timeout von 2 Sekunden im Abstand von nur wenigen Sekunden:

<pre>[...]
2015.12.26 18:25:45 1: Perfmon: possible freeze starting at 18:25:43, delay is 2.794
2015.12.26 18:25:58 1: Perfmon: possible freeze starting at 18:25:56, delay is 2.709
2015.12.26 18:26:11 1: Perfmon: possible freeze starting at 18:26:09, delay is 2.676
2015.12.26 18:26:24 1: Perfmon: possible freeze starting at 18:26:22, delay is 2.686
2015.12.26 18:26:37 1: Perfmon: possible freeze starting at 18:26:35, delay is 2.686
[...]
</pre>

Da dieses Blockieren die Funktionalität von FHEM beeinträchtigen kann, sollte man bei geplanten Auszeiten des Hubs diesen disablen:

set <hub> disable 1

== Weblinks ==
* [http://myharmony.com myHarmony] Logitech Harmony Hersteller
* [http://www.harmony-remote-forum.de/portal.php Harmony Remote Forum] deutsches Harmony Forum
* {{Link2Forum|Topic=14163|LinkText=Thread im FHEM Forum}} Weitere Infos im FHEM Forum Thread

[[Kategorie:Unterhaltungselektronik]]
[[Kategorie:IP Components]]

FHEM Tablet UI

2017-05-03T19:10:59Z

EnlightningMan: Beispiel für Verwendung von normalen Bilder icons hinzugefügt

{{Infobox Modul
|ModPurpose=Oberfläche für FHEM
|ModType=x
|ModFTopic=34233
|ModForumArea=Frontends
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
[[FHEM Tablet UI]] (FTUI) ist ein leichtgewichtiges aber funktionsreiches Frontend-Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Es basiert auf HTML/CSS/JavaScript und stellt somit keine zusätzlichen Anforderungen an den FHEM-Server.

Mit Hilfe zahlreicher Widgets, die sehr leicht mit HTML Code konfiguriert werden können, ist es möglich, innerhalb kurzer Zeit ein den eigenen Wünschen entsprechendes User-Interface aufzubauen.

Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.

Mit wenigen Anpassungen ist es auch möglich das UI auf anderen Webservern (Apache, u.a.) zu betreiben. Somit können FHEM und FHEM Tablet UI auch auf getrennten Systemen ausgeführt werden.

[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]

{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}}

== Installation ==
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:
*Dateien aus dem GitHub-Repository herunterladen
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)
*Eine Beispieldatei anlegen

{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}

'''1.''' Zuerst müssen alle Dateien von FHEM Tablet UI in das FHEM-Verzeichnis '''/opt/fhem/www''' kopiert werden. Das geht mit folgendem '''update'''-Befehl über die FHEM-Befehlszeile.
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>

:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]

'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code>

:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]

'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.

:<code>attr WEB longpoll websocket</code>
:bzw. bei Problemen mit ''websocket''
:<code>attr WEB longpoll 1</code>

:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]

'''4.''' Weil FTUI noch nichts anzuzeigen hat, wird die Datei '''/opt/fhem/www/tablet/index-example.html''' nach '''/opt/fhem/www/tablet/index.html''' kopiert.
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code>

:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]

'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.

Somit ist FHEM Tablet UI bereit zur Verwendung und kann durch Aufruf der URL '''<nowiki>http://<fhem-server>:8083/fhem/ftui</nowiki>''' oder den Link im FHEM-Menü geöffnet werden

== Update ==
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.

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

'''2.''' Update der geänderten Dateien durch Eingabe von:
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Eine weitere Option ist das Hinzufügen des FTUI-Git-Repositories zum allgemeinem Update-Vorgang von FHEM. Dabei wird dann bei einem FHEM-Update auch gleich FHEM Tablet UI aktualisiert, bzw. die Änderungen angezeigt.
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

== Konfiguration ==
===DOCTYPE===
In allen HTML-Dateien, die im Browser geladen werden und das typische HTML-Gerüst besitzen (also alle Hauptseiten, jedoch keine Template-Dateien), sollte eine DOCTYPE-Deklaration eingefügt werden. Mit ihr wird festgelegt, in welcher Version der nachfolgende HTML-Code vom Browser interpretiert werden soll. Lässt man sie weg, oder definiert sie auf verschiedenen Seiten unterschiedlich, kann ein und der selbe HTML-Code zu unterschiedlichen Darstellungen führen. Die DOCTYPE-Deklaration erfolgt immer auch der ersten Zeile, noch vor dem <code><html></code>-Tag. Nachfolgend wird HTML5 verwendet.

<source lang="html">
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
</source>

===META-Parameter===
Das Tablet UI lässt sich über die META-Parameter konfigurieren. Diese Parameter sind in jeder '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>''' einzutragen. Ausgenommen davon sind Dateien, die als Template, Pagebutton-Zielseiten oder ähnliches eingebunden werden.

Die Parameter sind immer nach diesem Schema aufgebaut:
<meta name="[Parameter-Name]" content="[Parameter-Wert]">

===Verbindung zu FHEM===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird
|-
|longpoll||1||0, 1||
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)

'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.
|-
|longpoll_type||websocket||websocket, ajax, 0||
'''websocket''': Für die Aktualisierung der Daten wird das Websocket-Protokoll verwendet. Werden vom Browser keine Websockets unterstützt, gibt es einen automatischen Fallback auf Ajax.

'''ajax''': Ajax wird für die Aktualisierung verwendet.

'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.
|-
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.
|-
|longpoll_maxage||240||Integer||Kommen in diesem Zeitraum (Sekunden) keine Longpoll-Events bei FTUI an, wird die Verbindung als "disconnected" angesehen und ein neuer Verbindungsversuch wird gestartet.
|-
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet
|-
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein
|-
|fhemweb_url||/fhem/||Integer||URL zu FHEM. Wird benötigt wenn FTUI auf einem anderen als dem FHEM Server läuft oder nicht im Standard-Pfad installiert ist.
Hinweis: Wenn FHEM auf einem anderem Server/Domain läuft muss man das "CORS" Attribut im FHEMWEB Modul (s.o.) auf 1 setzen, sonst bekommt man Cross Origin Fehler.
|}

===Funktionalität===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|debug||0||0 - 5||Log-Level
|-
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.
|-
|toast_position||bottom-left||||Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.
|-
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)
|-
|username||||String||Benutzername für eine Basic-Authentifierung *
|-
|password||||String||Passwort für eine Basic-Authentifizierung *
|}
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.

===Toast-Nachrichten===
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]
Tablet-UI liefert Informationen darüber, was im Moment gerade passiert. Das geschieht über Toast-Nachrichten, die in der Standardeinstellung unten links im Browser auftauchen.

Wird beispielsweise ein Gerät eingeschaltet, so erscheint eine kleine Nachricht mit dem abgesetzten Befehl. Auch Fehlermeldungen und Statusinformationen werden angezeigt. Ob überhaupt und was konkret angezeigt wird, richtet sich nach dem eingestellten Debug-Level (siehe oben). Beim Debug-Level 5 werden alle Nachrichten angezeigt, bei 0 keine.

Die Position der Toast-Nachrichten kann über den Meta-Tag <code>meta name='toast_position'</code> festgelegt werden. Für oben-mittig müsste folgender Code eingefügt werden:
<pre><meta name='toast_position' content='top-center'></pre>

Möglich sind folgende Positionen:
* <code>top-left</code>
* <code>top-right</code>
* <code>bottom-left</code>
* <code>bottom-right</code>
* <code>top-center</code>
* <code>bottom-center</code>
* <code>mid-center</code>

Die maximale Anzahl an Nachrichten, die gleichzeitig angezeigt werden können, lässt sich mit <code>meta name='toast'</code> Sind maximal 2 Nachrichten gewünscht, muss folgender Meta-Tag gesetzt werden:
<pre><meta name='toast' content='2'></pre>

==Navigationsmethoden==
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}}

'''Unterschied zwischen Pagetab und Pagebutton:

'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite
[[FTUI_Widget_Pagetab]]

'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite
[[FTUI_Widget_Pagebutton]]

==Gestaltung==
===Layout-Optionen===
* [[FTUI Layout Gridster|Gridster]]
* [[FTUI Layout Flex|Flex]]
* [[FTUI Layout Sheet|Tabelle]]
* [[FTUI Layout Row|Reihen]]

=== Farben ===
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel:

*HEX: #ADD8E6
*RBG: rgb(173, 216, 230)
*Namen: lightblue

Knallige Farben wie '''<span style="color: #ff0000;">#ff0000</span>''' für Rot oder '''<span style="color: #00ff00;">#00ff00</span>''' für Grün sollten vermieden werden.
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.

Empfohlene Farben sind z.B.:

*Orange: <span style="color: #aa6900;">#aa6900</span>
*Rot: <span style="color: #ad3333;">#ad3333</span>
*Grün: <span style="color: #32a054;">#32a054</span>
*Blau: <span style="color: #6699FF;">#6699FF</span>
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span>

Hilfreich bei der Suche nach den Farbwerten ist zum Beispiel der Color-Picker auf dieser Seite: http://www.colorpicker.com. Für die Suche nach Farben, die einen guten Kontrast bilden, diese Webseite: http://vanisoft.pl/~lopuszanski/public/colors/

Im Ordner ''css'' der FTUI Installation finden sich einige vorbereitete Farbschemas. Diese können mit einem zusätzlichen Eintrag im <nowiki><head></nowiki>-Bereich der FTUI-Seite(n) aktiviert werden.

Hier am Beispiel eines blauen Farbschemas:
<source lang="html">
<html>
<head>
[...]
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" />
[...]
</head>
</source>

Diese Schema-Dateien ändern alle Widgets. Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.

===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-Klassen|CSS-Klassen]] aufgeführt.

Soll das Aussehen des UI durch eigene CSS-Klassen oder durch Überschreiben der vorhandenen verändert werden, kann eine eigene CSS-Datei erstellt werden, die dann bei einem eventuellen Update von FTUI nicht überschrieben wird. Diese Datei muss den Dateinamen '''fhem-tablet-ui-user.css''' haben und im Ordner '''/fhem/tablet/css''' abgelegt werden. Sie wird dann beim Aufruf von FTUI automatisch mitgeladen.

=== CSS-Klassen ===
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|sheet}}{{FTUI Klasse|row}}{{FTUI Klasse|cell}}{{FTUI Klasse|cell-1-x}}{{FTUI Klasse|cell-x}}{{FTUI Klasse|left-align}}{{FTUI Klasse|right-align}}{{FTUI Klasse|bottom-align}}{{FTUI Klasse|top-align}}{{FTUI Klasse|center-align}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|row/col-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|hbox/vbox-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|vbox}}{{FTUI Klasse|hbox}}{{FTUI Klasse|card}}{{FTUI Klasse|phone-width}}{{FTUI Klasse|full-height}}{{FTUI Klasse|full-width}}{{FTUI Klasse|grow-0}}{{FTUI Klasse|grow-1}}{{FTUI Klasse|grow-2}}{{FTUI Klasse|grow-x}}{{FTUI Klasse|items-top}}{{FTUI Klasse|items-center}}{{FTUI Klasse|items-bottom}}{{FTUI Klasse|items-space-between}}{{FTUI Klasse|items-space-around}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|inline}}{{FTUI Klasse|newline}}{{FTUI Klasse|top-space}}{{FTUI Klasse|top-space-2x}}{{FTUI Klasse|top-space-3x}}{{FTUI Klasse|left-space}}{{FTUI Klasse|left-space-2x}}{{FTUI Klasse|left-space-3x}}{{FTUI Klasse|right-space}}{{FTUI Klasse|right-space-2x}}{{FTUI Klasse|right-space-3x}}{{FTUI Klasse|top-narrow}}{{FTUI Klasse|top-narrow-2x}}{{FTUI Klasse|top-narrow-10}}{{FTUI Klasse|left-narrow}}{{FTUI Klasse|left-narrow-2x}}{{FTUI Klasse|left-narrow-3x}}{{FTUI Klasse|right-narrow}}{{FTUI Klasse|right-narrow-2x}}{{FTUI Klasse|right-narrow-3x}}{{FTUI Klasse|centered}}{{FTUI Klasse|wider}}{{FTUI Klasse|narrow}}{{FTUI Klasse|fullsize}}{{FTUI Klasse|compressed}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|maxw40}}{{FTUI Klasse|doublebox-v}}{{FTUI Klasse|doublebox-h}}{{FTUI Klasse|triplebox-v}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Vordergrundfarben
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|lightblue}}{{FTUI Klasse|orange}}{{FTUI Klasse|gray}}{{FTUI Klasse|lightgray}}{{FTUI Klasse|white}}{{FTUI Klasse|black}}{{FTUI Klasse|mint}}{{FTUI Klasse|yellow}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Hintergrundfarben
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|bg-red}}{{FTUI Klasse|bg-green}}{{FTUI Klasse|bg-blue}}{{FTUI Klasse|bg-lightblue}}{{FTUI Klasse|bg-orange}}{{FTUI Klasse|bg-gray}}{{FTUI Klasse|bg-lightgray}}{{FTUI Klasse|bg-white}}{{FTUI Klasse|bg-black}}{{FTUI Klasse|bg-mint}}{{FTUI Klasse|bg-yellow}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Rahmen
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|verticalLine}}{{FTUI Klasse|border-black}}{{FTUI Klasse|border-white}}{{FTUI Klasse|border-orange}}{{FTUI Klasse|border-red}}{{FTUI Klasse|border-green}}{{FTUI Klasse|border-mint}}{{FTUI Klasse|border-lightblue}}{{FTUI Klasse|border-blue}}{{FTUI Klasse|border-gray}}{{FTUI Klasse|border-yellow}}{{FTUI Klasse|border-lightgray}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Größen
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|mini}}{{FTUI Klasse|tiny}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|tall}}{{FTUI Klasse|great}}{{FTUI Klasse|grande}}{{FTUI Klasse|gigantic}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Schriftstil
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Sonstiges
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|blank}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}{{FTUI Klasse|fail-shake}}{{FTUI Klasse|marquee}}{{FTUI Klasse|icon round}}{{FTUI Klasse|icon square}}{{FTUI Klasse|readonly}}{{FTUI Klasse|blink}}{{FTUI Klasse|rotate-90}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|autohide}}{{FTUI Klasse|notransmit}}{{FTUI Klasse|tab}}{{FTUI Klasse|FS20}}{{FTUI Klasse|value}}{{FTUI Klasse|novalue}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|percent}}{{FTUI Klasse|nocache}}{{FTUI Klasse|fade}}{{FTUI Klasse|rotate}}{{FTUI Klasse|nolabels}}{{FTUI Klasse|default}}{{FTUI Klasse|prefetch}}{{FTUI Klasse|circulate}}{{FTUI Klasse|valueonly}}{{FTUI Klasse|positiononly}}{{FTUI Klasse|lineIndicator}}{{FTUI Klasse|barIndicator}}{{FTUI Klasse|roundIndicator}}{{FTUI Klasse|dim-tick}}{{FTUI Klasse|dim-front}}{{FTUI Klasse|dim-back}}{{FTUI Klasse|hue-tick}}{{FTUI Klasse|hue-front}}{{FTUI Klasse|hue-back}}{{FTUI Klasse|warn}}{{FTUI Klasse|activate}}{{FTUI Klasse|labelright}}{{FTUI Klasse|interlock}}{{FTUI Klasse|keepopen}}{{FTUI Klasse|noshade}}
|}

=== Icons ===
FTUI bringt einige Icons-"Schriftarten" mit, die für die Darstellung genützt werden können. Diese werden automatisch beim Start des UI eingebunden, sobald ein entsprechendes Icon-Präfix im Code der Seite vorkommt.

Verfügbare Icon-Schriftarten sind:
* Eingebaute Icons ''ftui-windows'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code>
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code>
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code>
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code>
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi-'''. Beispiel: <code>data-icon="wi-day-rain-mix"</code>

Alternativ können auch Bilder Icons (bspw. png) über CSS verwendet werden. Bspw:
<source lang="html5">
<head>
<style type="text/css">
.logo-fhem {
background: url(https://wiki.fhem.de/fhemlogo.png) no-repeat;
width: 120px;
height: 132px;
background-size: contain;
}
</style>
</head>
<body>
<div data-type="symbol" data-icon="logo-fhem"></div>
</body>
</source>

== Widgets ==
===Allgemeine Attribute===
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:

{| 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
|-
|}

Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.

=== Integrierte Widgets ===
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.

* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen
* [[FTUI Widget Circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
* [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert
* [[FTUI Widget Eventmonitor|eventmonitor]]:
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)
* [[FTUI Widget Html|html]]:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe.
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt.
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn
* [[FTUI Widget Label|label]]: Reading als Text anzeigen
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM
* [[FTUI Widget Medialist|medialist]]:
* [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.
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste
* [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit.
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird
* [[FTUI Widget Slideout|slideout]]:
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen
* [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln
* [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose

===3rd Party Widgets===
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [[FTUI Widget Filelog|filelog]]:
* [[FTUI Widget Fullcalview|fullcalview]]:
* [[FTUI Widget Gds|gds]]:
* [[FTUI Widget Highchart|highchart]]:
* [[FTUI Widget Highchart3d|highchart3d]]:
* [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/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* [[FTUI Widget Loading|loading]]:
* [[FTUI Widget Meteogram|meteogram]]:
* [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/reload reload]: auslösen eine Pagereloads
* [[FTUI Widget Screensaver|screensaver]]:
* [[FTUI Widget Svgplot|svgplot]]:
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.
* [[FTUI Widget Uwz|uwz]]:
* [[FTUI Widget Wakeup|wakeup]]:
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul
* [[FTUI Widget Weekprofile|weekprofile]]:

==Templates==
Kommt ein bestimmtes "Code-Fragment" auf mehreren Seiten oder öfter pro Seite vor, bietet FTUI die Option, Templates zu erstellen. Diese werden einmal gebaut und können dann mit dem Attribut '''data-template''' nach Belieben in eine Seite eingefügt werden. Dabei besteht auch die Möglichkeit, Parameter zu verwenden.

Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.

===Einzelnes Widget===
Soll ein Widget an mehreren Stellen in exakt der selben Ausführung eingebunden werden, kann diese Widget in einer eigenen Datei erstellt und diese dann auf den Zielseiten automatisch mitgeladen werden.

;Template-Seite
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.
<source lang="html">
<div data-type="symbol"
data-device="dummy1">
</source>

;Haupt-Seite
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.
<source lang="html" highlight="6">
[...]
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1">
<div data-template="template_symbol.html"></div>
</li>
</ul>
</div>
</body>
[...]
</source>

===Gridster-Element===
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.
<source lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li>
</source>

=== Widget-Gruppen ===
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.

=== Verwendung von Parametern ===
==== Einfaches Beispiel ====
Oft wird ein und dasselbe, liebevoll gestaltete, Widget für verschiedenen Devices verwendet. Um nicht für jedes Device das Widget neu kopieren zu müssen (bzw. bei Änderungen alle Seiten ausbessern zu müssen), kann ein Template verwendet werden, dem einfach per Parameter mitgeteilt wird, von welchem Device es gerade die Daten empfangen soll.

In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.

;Template-Seite
Die Template-Seite enthält nur ein einfaches Label-Widget und wird in diesem Beispiel ''template_label.html'' genannt. Um sie für mehrere Devices verwenden zu können, wird im Attribut '''data-device''' der Name des eigentlichen Devices durch den Parameter '''par01''' ersetzt.
<source lang="html" highlight="2">
<div data-type="label"
data-device="par01"
data-get="measured-temp"></div>
</source>

;Haupt-Seite
Auf der Haupt-Seite wird die Template-Seite mit dem Attribut '''data-template''' eingebunden und ihr via Attribut '''data-parameter''' das jeweils gewünschte Device übergeben.
<source lang="html">
[...]
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div>
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div>
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div>
[...]
</source>

==== Wetter-Slider mit Template ====
In diesem Beispiel wird ein [[FTUI Widget Slider|Slider-Widget]] erstellt, welches die verschiedenen Tage eines Wetterberichtes anzeigt. Dabei wird für den Wetterbericht des jeweiligen Tages immer dasselbe Template verwendet um nicht für jeden Tag ein eigenes Widget schreiben zu müssen.

;Template-Seite
<source lang="html">
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="°C"></div>
<div class="inline">
<div data-type="label" data-device="AgroWeather" data-get="par02"></div>
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div>
min: <div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="°C"></div>
</div>
</div>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div>
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div>
</div>
</source>

;Haupt-Seite
In der Haupt-Seite wird das Template dann für jede Slider-Seite eingebunden und das Reading für den jeweiligen Tag via Parameter übergeben.
<source lang="html">
[...]
<div data-type="swiper">
<ul>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li>
</ul>
</div>
[...]
</source>

== JavaScript-Funktionen ==
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.

Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
<source lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></source>

Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):
<source lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")}')">+</div></source>

Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:
<source lang="html">
<div data-type="label" data-device="dummy1" data-get="temperature"></div>
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div>
</source>

== FAQ ==
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.

== Links ==
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}
* [[FTUI_Snippets|Snippets]]
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]

[[Kategorie:FHEM Tablet UI]]

FHEM Tablet UI

2017-04-25T19:35:32Z

EnlightningMan: Hinweis auf CORS bei unterschiedlichen Domains

{{Infobox Modul
|ModPurpose=Oberfläche für FHEM
|ModType=x
|ModFTopic=34233
|ModForumArea=Frontends
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
[[FHEM Tablet UI]] (FTUI) ist ein leichtgewichtiges aber funktionsreiches Frontend-Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Es basiert auf HTML/CSS/JavaScript und stellt somit keine zusätzlichen Anforderungen an den FHEM-Server.

Mit Hilfe zahlreicher Widgets, die sehr leicht mit HTML Code konfiguriert werden können, ist es möglich, innerhalb kurzer Zeit ein den eigenen Wünschen entsprechendes User-Interface aufzubauen.

Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.

Mit wenigen Anpassungen ist es auch möglich das UI auf anderen Webservern (Apache, u.a.) zu betreiben. Somit können FHEM und FHEM Tablet UI auch auf getrennten Systemen ausgeführt werden.

[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]

{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}}

== Installation ==
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:
*Dateien aus dem GitHub-Repository herunterladen
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)
*Eine Beispieldatei anlegen

{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}

'''1.''' Zuerst müssen alle Dateien von FHEM Tablet UI in das FHEM-Verzeichnis '''/opt/fhem/www''' kopiert werden. Das geht mit folgendem '''update'''-Befehl über die FHEM-Befehlszeile.
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>

:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]

'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code>

:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]

'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.

:<code>attr WEB longpoll websocket</code>
:bzw. bei Problemen mit ''websocket''
:<code>attr WEB longpoll 1</code>

:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]

'''4.''' Weil FTUI noch nichts anzuzeigen hat, wird die Datei '''/opt/fhem/www/tablet/index-example.html''' nach '''/opt/fhem/www/tablet/index.html''' kopiert.
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code>

:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]

'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.

Somit ist FHEM Tablet UI bereit zur Verwendung und kann durch Aufruf der URL '''<nowiki>http://<fhem-server>:8083/fhem/ftui</nowiki>''' oder den Link im FHEM-Menü geöffnet werden

== Update ==
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.

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

'''2.''' Update der geänderten Dateien durch Eingabe von:
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Eine weitere Option ist das Hinzufügen des FTUI-Git-Repositories zum allgemeinem Update-Vorgang von FHEM. Dabei wird dann bei einem FHEM-Update auch gleich FHEM Tablet UI aktualisiert, bzw. die Änderungen angezeigt.
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

== Konfiguration ==
===DOCTYPE===
In allen HTML-Dateien, die im Browser geladen werden und das typische HTML-Gerüst besitzen (also alle Hauptseiten, jedoch keine Template-Dateien), sollte eine DOCTYPE-Deklaration eingefügt werden. Mit ihr wird festgelegt, in welcher Version der nachfolgende HTML-Code vom Browser interpretiert werden soll. Lässt man sie weg, oder definiert sie auf verschiedenen Seiten unterschiedlich, kann ein und der selbe HTML-Code zu unterschiedlichen Darstellungen führen. Die DOCTYPE-Deklaration erfolgt immer auch der ersten Zeile, noch vor dem <code><html></code>-Tag. Nachfolgend wird HTML5 verwendet.

<source lang="html">
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
</source>

===META-Parameter===
Das Tablet UI lässt sich über die META-Parameter konfigurieren. Diese Parameter sind in jeder '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>''' einzutragen. Ausgenommen davon sind Dateien, die als Template, Pagebutton-Zielseiten oder ähnliches eingebunden werden.

Die Parameter sind immer nach diesem Schema aufgebaut:
<meta name="[Parameter-Name]" content="[Parameter-Wert]">

===Verbindung zu FHEM===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird
|-
|longpoll||1||0, 1||
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)

'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.
|-
|longpoll_type||websocket||websocket, ajax, 0||
'''websocket''': Für die Aktualisierung der Daten wird das Websocket-Protokoll verwendet. Werden vom Browser keine Websockets unterstützt, gibt es einen automatischen Fallback auf Ajax.

'''ajax''': Ajax wird für die Aktualisierung verwendet.

'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.
|-
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.
|-
|longpoll_maxage||240||Integer||Kommen in diesem Zeitraum (Sekunden) keine Longpoll-Events bei FTUI an, wird die Verbindung als "disconnected" angesehen und ein neuer Verbindungsversuch wird gestartet.
|-
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet
|-
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein
|-
|fhemweb_url||/fhem/||Integer||URL zu FHEM. Wird benötigt wenn FTUI auf einem anderen als dem FHEM Server läuft oder nicht im Standard-Pfad installiert ist.
Hinweis: Wenn FHEM auf einem anderem Server/Domain läuft muss man das "CORS" Attribut im FHEMWEB Modul (s.o.) auf 1 setzen, sonst bekommt man Cross Origin Fehler.
|}

===Funktionalität===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|debug||0||0 - 5||Log-Level
|-
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.
|-
|toast_position||bottom-left||||Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.
|-
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)
|-
|username||||String||Benutzername für eine Basic-Authentifierung *
|-
|password||||String||Passwort für eine Basic-Authentifizierung *
|}
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.

===Toast-Nachrichten===
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]
Tablet-UI liefert Informationen darüber, was im Moment gerade passiert. Das geschieht über Toast-Nachrichten, die in der Standardeinstellung unten links im Browser auftauchen.

Wird beispielsweise ein Gerät eingeschaltet, so erscheint eine kleine Nachricht mit dem abgesetzten Befehl. Auch Fehlermeldungen und Statusinformationen werden angezeigt. Ob überhaupt und was konkret angezeigt wird, richtet sich nach dem eingestellten Debug-Level (siehe oben). Beim Debug-Level 5 werden alle Nachrichten angezeigt, bei 0 keine.

Die Position der Toast-Nachrichten kann über den Meta-Tag <code>meta name='toast_position'</code> festgelegt werden. Für oben-mittig müsste folgender Code eingefügt werden:
<pre><meta name='toast_position' content='top-center'></pre>

Möglich sind folgende Positionen:
* <code>top-left</code>
* <code>top-right</code>
* <code>bottom-left</code>
* <code>bottom-right</code>
* <code>top-center</code>
* <code>bottom-center</code>
* <code>mid-center</code>

Die maximale Anzahl an Nachrichten, die gleichzeitig angezeigt werden können, lässt sich mit <code>meta name='toast'</code> Sind maximal 2 Nachrichten gewünscht, muss folgender Meta-Tag gesetzt werden:
<pre><meta name='toast' content='2'></pre>

==Navigationsmethoden==
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}}

'''Unterschied zwischen Pagetab und Pagebutton:

'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite
[[FTUI_Widget_Pagetab]]

'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite
[[FTUI_Widget_Pagebutton]]

==Gestaltung==
===Layout-Optionen===
* [[FTUI Layout Gridster|Gridster]]
* [[FTUI Layout Flex|Flex]]
* [[FTUI Layout Sheet|Tabelle]]
* [[FTUI Layout Row|Reihen]]

=== Farben ===
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel:

*HEX: #ADD8E6
*RBG: rgb(173, 216, 230)
*Namen: lightblue

Knallige Farben wie '''<span style="color: #ff0000;">#ff0000</span>''' für Rot oder '''<span style="color: #00ff00;">#00ff00</span>''' für Grün sollten vermieden werden.
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.

Empfohlene Farben sind z.B.:

*Orange: <span style="color: #aa6900;">#aa6900</span>
*Rot: <span style="color: #ad3333;">#ad3333</span>
*Grün: <span style="color: #32a054;">#32a054</span>
*Blau: <span style="color: #6699FF;">#6699FF</span>
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span>

Hilfreich bei der Suche nach den Farbwerten ist zum Beispiel der Color-Picker auf dieser Seite: http://www.colorpicker.com. Für die Suche nach Farben, die einen guten Kontrast bilden, diese Webseite: http://vanisoft.pl/~lopuszanski/public/colors/

Im Ordner ''css'' der FTUI Installation finden sich einige vorbereitete Farbschemas. Diese können mit einem zusätzlichen Eintrag im <nowiki><head></nowiki>-Bereich der FTUI-Seite(n) aktiviert werden.

Hier am Beispiel eines blauen Farbschemas:
<source lang="html">
<html>
<head>
[...]
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" />
[...]
</head>
</source>

Diese Schema-Dateien ändern alle Widgets. Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.

===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-Klassen|CSS-Klassen]] aufgeführt.

Soll das Aussehen des UI durch eigene CSS-Klassen oder durch Überschreiben der vorhandenen verändert werden, kann eine eigene CSS-Datei erstellt werden, die dann bei einem eventuellen Update von FTUI nicht überschrieben wird. Diese Datei muss den Dateinamen '''fhem-tablet-ui-user.css''' haben und im Ordner '''/fhem/tablet/css''' abgelegt werden. Sie wird dann beim Aufruf von FTUI automatisch mitgeladen.

=== CSS-Klassen ===
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|sheet}}{{FTUI Klasse|row}}{{FTUI Klasse|cell}}{{FTUI Klasse|cell-1-x}}{{FTUI Klasse|cell-x}}{{FTUI Klasse|left-align}}{{FTUI Klasse|right-align}}{{FTUI Klasse|bottom-align}}{{FTUI Klasse|top-align}}{{FTUI Klasse|center-align}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|row/col-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|hbox/vbox-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|vbox}}{{FTUI Klasse|hbox}}{{FTUI Klasse|card}}{{FTUI Klasse|phone-width}}{{FTUI Klasse|full-height}}{{FTUI Klasse|full-width}}{{FTUI Klasse|grow-0}}{{FTUI Klasse|grow-1}}{{FTUI Klasse|grow-2}}{{FTUI Klasse|grow-x}}{{FTUI Klasse|items-top}}{{FTUI Klasse|items-center}}{{FTUI Klasse|items-bottom}}{{FTUI Klasse|items-space-between}}{{FTUI Klasse|items-space-around}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|inline}}{{FTUI Klasse|newline}}{{FTUI Klasse|top-space}}{{FTUI Klasse|top-space-2x}}{{FTUI Klasse|top-space-3x}}{{FTUI Klasse|left-space}}{{FTUI Klasse|left-space-2x}}{{FTUI Klasse|left-space-3x}}{{FTUI Klasse|right-space}}{{FTUI Klasse|right-space-2x}}{{FTUI Klasse|right-space-3x}}{{FTUI Klasse|top-narrow}}{{FTUI Klasse|top-narrow-2x}}{{FTUI Klasse|top-narrow-10}}{{FTUI Klasse|left-narrow}}{{FTUI Klasse|left-narrow-2x}}{{FTUI Klasse|left-narrow-3x}}{{FTUI Klasse|right-narrow}}{{FTUI Klasse|right-narrow-2x}}{{FTUI Klasse|right-narrow-3x}}{{FTUI Klasse|centered}}{{FTUI Klasse|wider}}{{FTUI Klasse|narrow}}{{FTUI Klasse|fullsize}}{{FTUI Klasse|compressed}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|maxw40}}{{FTUI Klasse|doublebox-v}}{{FTUI Klasse|doublebox-h}}{{FTUI Klasse|triplebox-v}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Vordergrundfarben
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|lightblue}}{{FTUI Klasse|orange}}{{FTUI Klasse|gray}}{{FTUI Klasse|lightgray}}{{FTUI Klasse|white}}{{FTUI Klasse|black}}{{FTUI Klasse|mint}}{{FTUI Klasse|yellow}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Hintergrundfarben
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|bg-red}}{{FTUI Klasse|bg-green}}{{FTUI Klasse|bg-blue}}{{FTUI Klasse|bg-lightblue}}{{FTUI Klasse|bg-orange}}{{FTUI Klasse|bg-gray}}{{FTUI Klasse|bg-lightgray}}{{FTUI Klasse|bg-white}}{{FTUI Klasse|bg-black}}{{FTUI Klasse|bg-mint}}{{FTUI Klasse|bg-yellow}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Rahmen
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|verticalLine}}{{FTUI Klasse|border-black}}{{FTUI Klasse|border-white}}{{FTUI Klasse|border-orange}}{{FTUI Klasse|border-red}}{{FTUI Klasse|border-green}}{{FTUI Klasse|border-mint}}{{FTUI Klasse|border-lightblue}}{{FTUI Klasse|border-blue}}{{FTUI Klasse|border-gray}}{{FTUI Klasse|border-yellow}}{{FTUI Klasse|border-lightgray}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Größen
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|mini}}{{FTUI Klasse|tiny}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|tall}}{{FTUI Klasse|great}}{{FTUI Klasse|grande}}{{FTUI Klasse|gigantic}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Schriftstil
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Sonstiges
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|blank}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}{{FTUI Klasse|fail-shake}}{{FTUI Klasse|marquee}}{{FTUI Klasse|icon round}}{{FTUI Klasse|icon square}}{{FTUI Klasse|readonly}}{{FTUI Klasse|blink}}{{FTUI Klasse|rotate-90}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|autohide}}{{FTUI Klasse|notransmit}}{{FTUI Klasse|tab}}{{FTUI Klasse|FS20}}{{FTUI Klasse|value}}{{FTUI Klasse|novalue}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|percent}}{{FTUI Klasse|nocache}}{{FTUI Klasse|fade}}{{FTUI Klasse|rotate}}{{FTUI Klasse|nolabels}}{{FTUI Klasse|default}}{{FTUI Klasse|prefetch}}{{FTUI Klasse|circulate}}{{FTUI Klasse|valueonly}}{{FTUI Klasse|positiononly}}{{FTUI Klasse|lineIndicator}}{{FTUI Klasse|barIndicator}}{{FTUI Klasse|roundIndicator}}{{FTUI Klasse|dim-tick}}{{FTUI Klasse|dim-front}}{{FTUI Klasse|dim-back}}{{FTUI Klasse|hue-tick}}{{FTUI Klasse|hue-front}}{{FTUI Klasse|hue-back}}{{FTUI Klasse|warn}}{{FTUI Klasse|activate}}{{FTUI Klasse|labelright}}{{FTUI Klasse|interlock}}{{FTUI Klasse|keepopen}}{{FTUI Klasse|noshade}}
|}

=== Icons ===
FTUI bringt einige Icons-"Schriftarten" mit, die für die Darstellung genützt werden können. Diese werden automatisch beim Start des UI eingebunden, sobald ein entsprechendes Icon-Präfix im Code der Seite vorkommt.

Verfügbare Icon-Schriftarten sind:
* Eingebaute Icons ''ftui-windows'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code>
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code>
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code>
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code>
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi-'''. Beispiel: <code>data-icon="wi-day-rain-mix"</code>

== Widgets ==
===Allgemeine Attribute===
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:

{| 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
|-
|}

Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.

=== Integrierte Widgets ===
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.

* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen
* [[FTUI Widget Circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
* [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert
* [[FTUI Widget Eventmonitor|eventmonitor]]:
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)
* [[FTUI Widget Html|html]]:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe.
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt.
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn
* [[FTUI Widget Label|label]]: Reading als Text anzeigen
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM
* [[FTUI Widget Medialist|medialist]]:
* [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.
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste
* [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit.
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird
* [[FTUI Widget Slideout|slideout]]:
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen
* [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln
* [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose

===3rd Party Widgets===
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [[FTUI Widget Filelog|filelog]]:
* [[FTUI Widget Fullcalview|fullcalview]]:
* [[FTUI Widget Gds|gds]]:
* [[FTUI Widget Highchart|highchart]]:
* [[FTUI Widget Highchart3d|highchart3d]]:
* [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/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* [[FTUI Widget Loading|loading]]:
* [[FTUI Widget Meteogram|meteogram]]:
* [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/reload reload]: auslösen eine Pagereloads
* [[FTUI Widget Screensaver|screensaver]]:
* [[FTUI Widget Svgplot|svgplot]]:
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.
* [[FTUI Widget Uwz|uwz]]:
* [[FTUI Widget Wakeup|wakeup]]:
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul
* [[FTUI Widget Weekprofile|weekprofile]]:

==Templates==
Kommt ein bestimmtes "Code-Fragment" auf mehreren Seiten oder öfter pro Seite vor, bietet FTUI die Option, Templates zu erstellen. Diese werden einmal gebaut und können dann mit dem Attribut '''data-template''' nach Belieben in eine Seite eingefügt werden. Dabei besteht auch die Möglichkeit, Parameter zu verwenden.

Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.

===Einzelnes Widget===
Soll ein Widget an mehreren Stellen in exakt der selben Ausführung eingebunden werden, kann diese Widget in einer eigenen Datei erstellt und diese dann auf den Zielseiten automatisch mitgeladen werden.

;Template-Seite
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.
<source lang="html">
<div data-type="symbol"
data-device="dummy1">
</source>

;Haupt-Seite
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.
<source lang="html" highlight="6">
[...]
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1">
<div data-template="template_symbol.html"></div>
</li>
</ul>
</div>
</body>
[...]
</source>

===Gridster-Element===
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.
<source lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li>
</source>

=== Widget-Gruppen ===
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.

=== Verwendung von Parametern ===
==== Einfaches Beispiel ====
Oft wird ein und dasselbe, liebevoll gestaltete, Widget für verschiedenen Devices verwendet. Um nicht für jedes Device das Widget neu kopieren zu müssen (bzw. bei Änderungen alle Seiten ausbessern zu müssen), kann ein Template verwendet werden, dem einfach per Parameter mitgeteilt wird, von welchem Device es gerade die Daten empfangen soll.

In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.

;Template-Seite
Die Template-Seite enthält nur ein einfaches Label-Widget und wird in diesem Beispiel ''template_label.html'' genannt. Um sie für mehrere Devices verwenden zu können, wird im Attribut '''data-device''' der Name des eigentlichen Devices durch den Parameter '''par01''' ersetzt.
<source lang="html" highlight="2">
<div data-type="label"
data-device="par01"
data-get="measured-temp"></div>
</source>

;Haupt-Seite
Auf der Haupt-Seite wird die Template-Seite mit dem Attribut '''data-template''' eingebunden und ihr via Attribut '''data-parameter''' das jeweils gewünschte Device übergeben.
<source lang="html">
[...]
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div>
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div>
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div>
[...]
</source>

==== Wetter-Slider mit Template ====
In diesem Beispiel wird ein [[FTUI Widget Slider|Slider-Widget]] erstellt, welches die verschiedenen Tage eines Wetterberichtes anzeigt. Dabei wird für den Wetterbericht des jeweiligen Tages immer dasselbe Template verwendet um nicht für jeden Tag ein eigenes Widget schreiben zu müssen.

;Template-Seite
<source lang="html">
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="°C"></div>
<div class="inline">
<div data-type="label" data-device="AgroWeather" data-get="par02"></div>
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div>
min: <div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="°C"></div>
</div>
</div>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div>
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div>
</div>
</source>

;Haupt-Seite
In der Haupt-Seite wird das Template dann für jede Slider-Seite eingebunden und das Reading für den jeweiligen Tag via Parameter übergeben.
<source lang="html">
[...]
<div data-type="swiper">
<ul>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li>
</ul>
</div>
[...]
</source>

== JavaScript-Funktionen ==
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.

Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
<source lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></source>

Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):
<source lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")}')">+</div></source>

Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:
<source lang="html">
<div data-type="label" data-device="dummy1" data-get="temperature"></div>
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div>
</source>

== FAQ ==
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.

== Links ==
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}
* [[FTUI_Snippets|Snippets]]
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]

[[Kategorie:FHEM Tablet UI]]

HM-MOD-RPI-PCB HomeMatic Funkmodul für Raspberry Pi

2017-04-23T17:14:38Z

EnlightningMan: /* Firmware Update HM-MOD-RPI-PCB */ Link auf HEAD ergänzt um aktuellste FW zu laden

{{Infobox Hardware
|Bild=HM-MOD-RPI-PCB.jpg
|Bildbeschreibung=HomeMatic Funkmodul für Raspberry Pi
|HWProtocol=HomeMatic
|HWType=Gateway
|HWCategory=HomeMatic
|HWComm=868,3/869,525 MHz
|HWChannels=n/a
|HWVoltage=1,8–3,6 V DC
|HWPowerConsumption=50 mA max.
|HWPoweredBy=RasPi
|HWSize=19x41x14mm
|HWDeviceFHEM=[[HMUARTLGW]]
|HWManufacturer=ELV / eQ-3
}}

Das [[HM-MOD-RPI-PCB HomeMatic Funkmodul für Raspberry Pi]] ist eine Zusatzplatine, die auf die GPIO-Schnittstelle des [[Raspberry Pi]] aufgesteckt werden und damit als [[Interface]] zu [[HomeMatic]] Geräten dienen kann.

== Features ==
(Noch zu ergänzen)
* ...

== Hinweise zum Betrieb mit FHEM ==
Juni 2016: Beginn der Entwicklung eines FHEM-Moduls (HMUARTLGW) für dieses Interface, beschrieben im Forum unter dem Titel {{Link2Forum|Topic=54511|LinkText=Modul für HomeMatic UART-Modul (RPi) und HomeMatic LAN Gateway}}. Dieses Modul unterstützt gleichzeitig auch das "neue" [[HM-LGW-O-TW-W-EU Funk-LAN Gateway|Funk-LAN Gateway HM-LGW-O-TW-W-EU]].

Juli 2016: [[HMUARTLGW]] wird über FHEM [[update]] verteilt, damit ist dieses Funkmodul offiziell unterstützt.

=== Vorbereitung serielle Schnittstelle unter Jessie===
Diese Beschreibung gilt für Jessie Version 27.05.2016.
Die Grundlagen findet man hier: [[Raspberry Pi 3: GPIO-Port Module und Bluetooth]]

Die Datei /boot/config.txt um diese Zeile ergänzen

<pre>enable_uart=1</pre>

Beim PI 3 zusätzlich diese Zeilen ergänzen, bitte entweder core_freq oder force_turbo setzen. Wichtig ist lediglich, dass damit eine feste Taktfrequenz gesetzt wird.

<pre>dtoverlay=pi3-miniuart-bt
core_freq=250
#Alternativ kann auch dieser Eintrag gesetzt werden
force_turbo=1</pre>
In der Datei /boot/cmdline.txt diesen Eintrag löschen:
<pre>console=serial0,115200 </pre>

Den Dienst serial-getty deaktivieren

<pre>systemctl disable serial-getty@ttyAMA0.service</pre>

Der Benutzer fhem muss Mitglied in der Gruppe dialout sein! Bitte kontrollieren.
<pre>groups fhem </pre>

Das System unbedingt neu starten!

=== Vorbereitung serielle Schnittstelle unter Wheezy===
Diese Beschreibung gilt für Wheezy Version Stand 26.07.2016.

Die Datei /boot/config.txt um diese Zeile ergänzen

<pre>enable_uart=1</pre>

In der Datei /boot/cmdline.txt diesen Eintrag löschen:

<pre>console=ttyAMA0,115200</pre>

Die Datei sollte dann den folgenden Inhalt aufweisen:

<pre>dwc_otg.lpm_enable=0 console=tty1 root=/dev/mmcblk0p2 rootfstype=ext4 elevator=deadline rootwait</pre>

Den Dienst serial-getty deaktivieren

in der Datei /etc/inittab wie folgt die Zeile (ziemlich am Ende) mit einer # auskommentieren

<pre># T0:23:respawn:/sbin/getty -L ttyAMA0 115200 vt100</pre>
Mit folgendem Befehlen überprüfen, dass kein getty auf der Schnittstelle läuft
<pre>ps -A |grep getty
cat /etc/inittab</pre>
{{Randnotiz|RNText=Tipp: Sollte der HM-MOD-RPI-PCB nach der Einrichtung immer wieder den Status zwischen init und disconnect wechseln, alle aufgeführten Punkte erneut kontrollieren! reboot nicht vergessen! In ganz hartnäckigen Fällen von der Stromversorgung trennen!}}

Der Benutzer fhem muss Mitglied in der Gruppe dialout sein! Bitte prüfen:
<pre>groups fhem</pre>

'''Das System unbedingt neu starten!'''

=== Kontrolle ===
Berechtigungen der Schnittstelle kontrollieren
<pre>ls -l /dev/ttyAMA0</pre> liefert die Ausgabe unter Jessie
<pre>crw-rw---- 1 root dialout 204, 64 Jul 27 23:39 /dev/ttyAMA0</pre>
bzw. unter wheezy
<pre>crw-rw---T 1 root dialout 204, 64 Aug 9 18:07 /dev/ttyAMA0</pre>
Bitte kontrollieren, dass serial1 auf ttyS0 verlinkt ist. Andernfalls muss die Datei /lib/systemd/system/hciuart.service angepasst werden. Dort müsste ttyAMA0 durch ttyS0 ersetzt werden. Dies ist aber seit jessie Version Herbst 2016 nicht mehr nötig.
<pre>ls -l /dev/serial1
lrwxrwxrwx 1 root root 5 Jan 11 20:00 /dev/serial1 -> ttyS0</pre>

=== Definition in FHEM===
<pre>define myHmUART HMUARTLGW /dev/ttyAMA0
attr myHmUART hmId xxxxxx</pre>

=== Verwendung AES in FHEM===
Das Modul beherrscht AES.
Für weitere Informationen gibt es einen separaten Wiki Eintrag [[AES Encryption]]

=== Logbeispiel ===
Typischerweise meldet sich das Modul beim Start so:
2016.10.06 17:11:16 3: Opening myHmUART device /dev/ttyAMA0
2016.10.06 17:11:16 3: Setting myHmUART serial parameters to 115200,8,N,1
2016.10.06 17:11:16 3: myHmUART device opened
2016.10.06 17:11:17 3: HMUARTLGW myHmUART currently running Co_CPU_BL
2016.10.06 17:11:17 3: HMUARTLGW myHmUART currently running Co_CPU_App

=== Firmware Update HM-MOD-RPI-PCB ===

Die Module werden mit einer Firmware 1.2.1 ausgeliefert. Dies Firmware ist nicht für einen stabilen Betrieb geeignet!
Firmware 1.4.1 ist die minimal lauffähige Version!

1. Firmware herunterladen
# Version 1.4.1
wget https://raw.githubusercontent.com/eq-3/occu/28045df83480122f90ab92f7c6e625f9bf3b61aa/firmware/HM-MOD-UART/coprocessor_update.eq3
# Alternativ die aktuellste
wget https://raw.githubusercontent.com/eq-3/occu/HEAD/firmware/HM-MOD-UART/coprocessor_update.eq3

2. Kopieren an einen Ort wo FHEM Zugriff hat, am Besten nach /opt/fhem/FHEM/firmware
sudo cp coprocessor_update.eq3 /opt/fhem/FHEM/firmware/
3. Flashen der neuen Firmware aus FHEM
fhem> set myHmUART updateCoPro /opt/fhem/FHEM/firmware/coprocessor_update.eq3

=== Alternative Methode zum Firmware Update ohne FHEM ===

Sollte das Update über FHEM nicht funktionieren oder FHEM nicht verfügbar sein, kann die Firmware auch wie folgt eingespielt werden (Quelle: [http://heinz-otto.blogspot.com/2016/07/raspberry-pi-homematic-modul.html Ottos Technik Blog])

sudo su
apt-get update && apt-get -y install libusb-1.0-0-dev build-essential git
systemctl stop fhem
git clone git://git.zerfleddert.de/hmcfgusb
cd hmcfgusb/
make
# Firmware runterladen
wget https://raw.githubusercontent.com/eq-3/occu/ee68faf77e42ed5e3641790b43a710a3301cea7e/firmware/HM-MOD-UART/coprocessor_update.eq3
# eigentliches flashen:
./flash-hmmoduart -U /dev/ttyAMA0 coprocessor_update.eq3

== Remoteanbindung - Pi + RPI Modul = LAN Modul ==
{{Randnotiz|RNText=Tipp: Dieser Abschnitt ist noch in Bearbeitung und unter Umständen noch nicht "perfekt". Bitte gesamten Artikel durchlesen und beachten!}}

Die Remoteanbindung ist kein Sharing des Moduls! Es darf an dem Remote Pi (wo das Modul sitzt) '''keinerlei''' Zugriff auf das Modul seitens einer etwaigen lokalen FHEM Instanz erfolgen.

'''Installation auf Remote Instanz'''

sudo apt-get install socat

Auf diesem Pi, also wo das Modul steckt:

sudo socat TCP4-LISTEN:2000,fork,reuseaddr /dev/ttyAMA0,raw,echo=0,b115200

Auf einen Debian Jessie mit systemd legt man am besten folgende Datei an:
/etc/systemd/system/hmlangw.service

[Install]
WantedBy=multi-user.target
Type=forking

[Service]
ExecStart=/usr/bin/socat TCP4-LISTEN:2000,fork,reuseaddr /dev/ttyAMA0,raw,echo=0,b115200
User=root
Restart=always
RestartSec=10

Dann kann mit

sudo systemctl enable hmlangw

der Service zum Autostart konfiguriert werden.
Auf dem Modul wo FHEM läuft und das Modul Remote angeschlossen werden soll:

define RM_HmUART_EG HMUARTLGW uart://<IP-Adresse>:2000
attr RM_HmUART hmId xxxxxx

Es handelt sich nicht um sharing der seriellen Schnittstelle und damit "verfügbar machen" des Moduls "all over the World"! Es handelt sich um ein exklusives "Kabel" von Pi zu Pi zur Schnittstelle zum RPI Modul.

Lokaler Pi: FHEM -> uart://IP:Port -> Netzwerk -> socat listener -> socat serial -> RPI Modul auf Remote Pi
Remote Pi: RPI Modul -> serial -> socat -> Netzwerk -> uart://IP:Port -> FHEM auf lokalem Pi

== Bekannte Probleme ==
Sollten beim Flashen der Firmware hartnäckige Probleme auftreten (kein Erfolg aber auch gar keine Fehlermeldungen) ist das Modul vom Strom zu trennen, ein Neustart des Pi reicht nicht!

Ein {{Link2Forum|Topic=41203|Message=340320|LinkText=Beitrag}} aus dem genannten Forenthread: ''Das Ding ist anscheinend wirklich einfach das Funkmodul aus der CCU2 (wird zumindest in der eQ-3 SW als CCU2 angesprochen) und spricht ein für FHEM vollkommen neues Protokoll.''

== Links ==
* {{Link2Forum|Topic=41203|LinkText=Forenthread}} mit Nachfrage zur Unterstützung dieses Geräts in FHEM
* {{Link2Forum|Topic=54511|LinkText=Modul für HomeMatic UART-Modul (RPi) und HomeMatic LAN Gateway}}
* [http://www.elv.de/homematic-funkmodul-fuer-raspberry-pi-bausatz.html Produktseite] bei ELV
* {{DocLink|elv|/Assets/Produkte/10/1040/104029/Downloads/104029_lan_gateway_um.pdf Bedienungsanleitung}}

[[Kategorie:HomeMatic Components]]
[[Kategorie:Interfaces]]
[[Kategorie:Raspberry Pi]]

HomeMatic Type Thermostat

2015-02-01T14:26:51Z

EnlightningMan: Explizit reingeschrieben, mit welchem Befehl man das initiale Temperaturtemplate anlegt.

<div style="clear: both; border-width:3px; border-color:#00AA00; border-style:solid; padding:5px; background-color:#FFEFEF; margin:1em; margin-left:5em; margin-right:5em;">Dieser Artikel befindet sich zur Zeit im Umbau, nicht alle Informationen sind unbedingt Korrekt.</div>

Es gibt verschiedene HomeMatic Geräte-Typen. Hier gibt es eine allgemeine Beschreibung für den Typ "Thermostat" und deren speziellen Eigenschaften und Einstellungen

== HomeMatic Geräte vom Typ Blind ==
Die in der aktuellen Version unterstützten Modelle kann man in <u>[[Homematic_HMInfo#Infos|HMInfo]]</u> sehen mit
set hm models -f thermostat
*[[HM-CC-RT-DN Funk-Heizkörperthermostat]]
*[[HM-CC-TC Funk-Wandthermostat]]
*[[HM-TC-IT-WM-W-EU Funk-Wandthermostat AP]]

== Hinweise zur Konfiguration ==
Die Thermostate unterscheiden sich in vielen Details und Funktionen. Daher sind Einzelheiten im Device nachzulesen.
Gemeinsam ist den Controllern, dass sie eine oder mehr Temperaturlisten als Wochenprogramm unterstützen.
=== Temperaturlisten ===
====manuell====
Hinweis: Bei den Wandthermostaten heißt der Kanal _climate, beim HM-CC-RT-DN ist der Kanal _Clima zuständig für die Wochenprogramme.

Mit dem Kommando
set Thermostat_Climate tempListMon 05:30 16.0 07:00 18.0 16:00 18.5 20:30 19.0 24:00 16.0
kann man das Temperaturprofil für den Wochentag ''Montag'' einstellen. Die nach dem Schaltzeitpunkt stehende Temperatur gilt immer '''bis''' zu diesen Zeitpunkt, nicht ab diesem Zeitpunkt. Der letzte Wert muss immer Mitternacht (24:00) sein.
damit ist also 00:00 - 05:30 = 16Grad, 05:30 - 07:30 = 18 Grad. Die Zeit kann in Schritten von 30min eingestellt werden, die Temperatur in 0.1 Grad.
Der Tage beginnt immer um 00:00, der letzte Abschnitt MUSS 24:00 sein.

Ändert man mehrere Tage auf einmal sollte man unbedingt mit "prep" und "exec" arbeiten, da es sonst zu Wiederholungen und langen Bearbeitungen kommen kann. Prep bereitet die Änderung in FHEM nur vor, mit exec werden die Daten dann an das Device übertragen. Das könnte in einem Fhem-Script lauten

######################################################
# Temperatur-Liste für Zimmer
# setzen per Aufruf von "{SetTempList_Heizung}"
######################################################
sub
SetTempList_Heizung()
{
{ fhem ("set Thermostat_Climate tempListMon prep 05:30 19.0 07:00 20.5 16:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListTue prep 05:30 19.0 07:00 20.5 16:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListWed prep 05:30 19.0 07:00 20.5 16:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListThu prep 05:30 19.0 07:00 20.5 16:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListFri prep 05:30 19.0 07:00 20.5 15:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListSat prep 07:00 19.0 09:00 21.0 15:00 19.0 21:00 21.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListSun exec 07:00 19.0 09:00 21.0 15:00 19.0 21:00 21.0 24:00 17.0")};
}
# End SetTempList_Heizung

====Templates ====
Etwas komfortabler kann man Wochenprogramme in einem File verwalten. Man kann beliebig viele templates erzeugen und diese in einem File ablegen. Diese unterschiedlichen Wochenprogramme kann man den Thermostaten zuweisen. So kann man ein Wochenprogramm beliebig vielen Thermostaten zuweisen. Bei Änderungen kann man alle betroffenen Thermostate, die das gleiche Template nutzen sollen, erreichen.

Zusammenfassend:
* Temperaturlisten der Devices in ein file schreiben
* Templates definieren, die man mehreren Devices zuordnen kann
* Template-Änderungen gleichzeitig in mehrere Devices einspielen
* Temperaturlisten gegen ein Template prüfen

=====File erstellen und verwalten =====
Ein File mit den Temperaturlisten (Wochenplänen) muss erzeugt werden. Zur Verwaltung der Temperaturprofile sollte die Datei tempList.cfg im Verzeichnis FHEM liegen, dann kann sie mit dem Web-Interface editiert werden.
HMInfo unterstützt das speichern allen temperaturlisten in ein File mit <u>[[Homematic_HMInfo#Speichern|temperaturListen speichern]]</u>. Dies kann man gut als Startpunkt nutzen.
Bsp:

Angenommen HMInfo ist definiert per
define hm HMinfo
legt dieser Aufruf ein initiales Template an.
set hm tempList save FHEM/tempList.cfg

Die Wochenprogramme sollten in FHEM vorliegen. ggf. mit getConfig auslesen.

entities:tempTmpl1
tempListSat>08:00 14.0 15:00 18.0 21:30 19.0 24:00 14.0
tempListSun>08:00 14.0 15:00 18.0 21:30 19.0 24:00 17.0
tempListMon>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListTue>07:00 14.0 13:00 16.0 16:00 18.0 21:00 19.0 24:00 15.0
tempListWed>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListThu>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListFri>07:00 14.0 13:00 16.0 16:00 18.0 21:00 19.0 24:00 14.0
entities:tempTWohnzimmer
tempListSat>08:00 14.0 15:00 18.0 21:30 19.0 24:00 17.0
tempListSun>08:00 14.0 15:00 18.0 21:30 19.0 24:00 14.0
tempListMon>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListTue>07:00 14.0 13:00 16.0 16:00 18.0 21:00 19.0 24:00 15.0
tempListWed>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListThu>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListFri>07:00 14.0 13:00 16.0 16:00 18.0 21:00 19.0 24:00 14.0

=====Templates zuweisen =====
Das Attribut tempListTmpl sollte man allen Thermostaten zuweisen. Dies ist dem jeweiligen Steuerungschannel zuzuweisen
attr hk1_Clima tempListTmpl setup/tempList.cfg:tempTmpl1
attr hk2_Clima tempListTmpl setup/tempList.cfg:tempTmpl1
attr hk3_Clima tempListTmpl setup/tempList.cfg:tempTWohnzimmer

In entsprechenden Kommandos muss man nun nicht mehr den Namen des Templates für den HK angeben, es wird der aus dem Attribut genommen. Man gibt das File an und dann den Namen des Templates im File.
===== Überprüfen/Einlesen =====
Mit dem verify-Kommando wird überprüft, ob das gegenwärtig vorhandene Temperaturprofil mit dem in der Datei befindlichen übereinstimmt.
set thermostat_Climate tempListTmpl verify FHEM/tempList.cfg:room1
Mit dem restore-Kommando wird das Temperaturprofil des Heizkörperthermostaten mit dem in der Datei befindlichen überschrieben.
set thermostat_Climate tempListTmpl restore FHEM/tempList.cfg:room1
* FHEM/tempList.cfg ist die Datei, in dem das Temperaturprofil zu suchen ist. '''room1''' ist der Name des Temperaturprofils, welches in der Datei gesucht wird. Wird keine Datei angegeben wird "template.cfg" im "fhem"-Verzeichnis angenommen.
Man kann einem Thermostat das '''Attribut tempListTmpl''' geben. Damit wird der Default-Name des Temperaturprofils für dieses Device gesetzt.
attr thermostat_Climate tempListTmpl FHEM/tempList.cfg:room1
set thermostat_Climate tempListTmpl
prüft das gegenwärtige Temperaturprofil gegen FHEM/tempList.cfg:room1 (da verify der Default ist). Die Prüfung des Profils ist auch Teil des configCheck von HMInfo.
Will man explizit kein Temperaturprofil zuweisen sollte man tempListTmpl auf none setzen.
set thermostat_Climate tempListTmpl restore
überschreibt das gegenwärtige Temperaturprofil des Heizkörperthermostaten mit dem in der Datei befindlichen überschrieben.
=====Templates systemweit nutzen=====
Sinnvoll erscheint es, das ganze systemweit zu machen. Man legt ein File mit allen Wochenplänen an, die man nutzen will. Dann weißt man die TemplateNamen den Thermostaten zu. Und schließlich prüft oder updates man alle Thermostate in einem System mit einem Kommando. Siehe hierzu <u>[[Homematic_HMInfo#Temperaturlisten|HMInfo temperaturlisten]]</u>.

[[Kategorie:HomeMatic Components]]

HomeMatic Type Thermostat

2015-02-01T14:18:50Z

EnlightningMan: paar Rechtschreibfehler gefixt

<div style="clear: both; border-width:3px; border-color:#00AA00; border-style:solid; padding:5px; background-color:#FFEFEF; margin:1em; margin-left:5em; margin-right:5em;">Dieser Artikel befindet sich zur Zeit im Umbau, nicht alle Informationen sind unbedingt Korrekt.</div>

Es gibt verschiedene HomeMatic Geräte-Typen. Hier gibt es eine allgemeine Beschreibung für den Typ "Thermostat" und deren speziellen Eigenschaften und Einstellungen

== HomeMatic Geräte vom Typ Blind ==
Die in der aktuellen Version unterstützten Modelle kann man in <u>[[Homematic_HMInfo#Infos|HMInfo]]</u> sehen mit
set hm models -f thermostat
*[[HM-CC-RT-DN Funk-Heizkörperthermostat]]
*[[HM-CC-TC Funk-Wandthermostat]]
*[[HM-TC-IT-WM-W-EU Funk-Wandthermostat AP]]

== Hinweise zur Konfiguration ==
Die Thermostate unterscheiden sich in vielen Details und Funktionen. Daher sind Einzelheiten im Device nachzulesen.
Gemeinsam ist den Controllern, dass sie eine oder mehr Temperaturlisten als Wochenprogramm unterstützen.
=== Temperaturlisten ===
====manuell====
Hinweis: Bei den Wandthermostaten heißt der Kanal _climate, beim HM-CC-RT-DN ist der Kanal _Clima zuständig für die Wochenprogramme.

Mit dem Kommando
set Thermostat_Climate tempListMon 05:30 16.0 07:00 18.0 16:00 18.5 20:30 19.0 24:00 16.0
kann man das Temperaturprofil für den Wochentag ''Montag'' einstellen. Die nach dem Schaltzeitpunkt stehende Temperatur gilt immer '''bis''' zu diesen Zeitpunkt, nicht ab diesem Zeitpunkt. Der letzte Wert muss immer Mitternacht (24:00) sein.
damit ist also 00:00 - 05:30 = 16Grad, 05:30 - 07:30 = 18 Grad. Die Zeit kann in Schritten von 30min eingestellt werden, die Temperatur in 0.1 Grad.
Der Tage beginnt immer um 00:00, der letzte Abschnitt MUSS 24:00 sein.

Ändert man mehrere Tage auf einmal sollte man unbedingt mit "prep" und "exec" arbeiten, da es sonst zu Wiederholungen und langen Bearbeitungen kommen kann. Prep bereitet die Änderung in FHEM nur vor, mit exec werden die Daten dann an das Device übertragen. Das könnte in einem Fhem-Script lauten

######################################################
# Temperatur-Liste für Zimmer
# setzen per Aufruf von "{SetTempList_Heizung}"
######################################################
sub
SetTempList_Heizung()
{
{ fhem ("set Thermostat_Climate tempListMon prep 05:30 19.0 07:00 20.5 16:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListTue prep 05:30 19.0 07:00 20.5 16:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListWed prep 05:30 19.0 07:00 20.5 16:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListThu prep 05:30 19.0 07:00 20.5 16:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListFri prep 05:30 19.0 07:00 20.5 15:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListSat prep 07:00 19.0 09:00 21.0 15:00 19.0 21:00 21.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListSun exec 07:00 19.0 09:00 21.0 15:00 19.0 21:00 21.0 24:00 17.0")};
}
# End SetTempList_Heizung

====Templates ====
Etwas komfortabler kann man Wochenprogramme in einem File verwalten. Man kann beliebig viele templates erzeugen und diese in einem File ablegen. Diese unterschiedlichen Wochenprogramme kann man den Thermostaten zuweisen. So kann man ein Wochenprogramm beliebig vielen Thermostaten zuweisen. Bei Änderungen kann man alle betroffenen Thermostate, die das gleiche Template nutzen sollen, erreichen.

Zusammenfassend:
* Temperaturlisten der Devices in ein file schreiben
* Templates definieren, die man mehreren Devices zuordnen kann
* Template-Änderungen gleichzeitig in mehrere Devices einspielen
* Temperaturlisten gegen ein Template prüfen

=====File erstellen und verwalten =====
Ein File mit den Temperaturlisten (Wochenplänen) muss erzeugt werden. Zur Verwaltung der Temperaturprofile sollte die Datei tempList.cfg im Verzeichnis FHEM liegen, dann kann sie mit dem Web-Interface editiert werden.
HMInfo unterstützt das speichern allen temperaturlisten in ein File mit <u>[[Homematic_HMInfo#Speichern|temperaturListen speichern]]</u>. Dies kann man gut als Startpunkt nutzen. Sie Wochenprogramme sollten in FHEM vorliegen. ggf. mit getConfig auslesen.

entities:tempTmpl1
tempListSat>08:00 14.0 15:00 18.0 21:30 19.0 24:00 14.0
tempListSun>08:00 14.0 15:00 18.0 21:30 19.0 24:00 17.0
tempListMon>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListTue>07:00 14.0 13:00 16.0 16:00 18.0 21:00 19.0 24:00 15.0
tempListWed>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListThu>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListFri>07:00 14.0 13:00 16.0 16:00 18.0 21:00 19.0 24:00 14.0
entities:tempTWohnzimmer
tempListSat>08:00 14.0 15:00 18.0 21:30 19.0 24:00 17.0
tempListSun>08:00 14.0 15:00 18.0 21:30 19.0 24:00 14.0
tempListMon>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListTue>07:00 14.0 13:00 16.0 16:00 18.0 21:00 19.0 24:00 15.0
tempListWed>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListThu>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListFri>07:00 14.0 13:00 16.0 16:00 18.0 21:00 19.0 24:00 14.0

=====Templates zuweisen =====
Das Attribut tempListTmpl sollte man allen Thermostaten zuweisen. Dies ist dem jeweiligen Steuerungschannel zuzuweisen
attr hk1_Clima tempListTmpl setup/tempList.cfg:tempTmpl1
attr hk2_Clima tempListTmpl setup/tempList.cfg:tempTmpl1
attr hk3_Clima tempListTmpl setup/tempList.cfg:tempTWohnzimmer

In entsprechenden Kommandos muss man nun nicht mehr den Namen des Templates für den HK angeben, es wird der aus dem Attribut genommen. Man gibt das File an und dann den Namen des Templates im File.
===== Überprüfen/Einlesen =====
Mit dem verify-Kommando wird überprüft, ob das gegenwärtig vorhandene Temperaturprofil mit dem in der Datei befindlichen übereinstimmt.
set thermostat_Climate tempListTmpl verify FHEM/tempList.cfg:room1
Mit dem restore-Kommando wird das Temperaturprofil des Heizkörperthermostaten mit dem in der Datei befindlichen überschrieben.
set thermostat_Climate tempListTmpl restore FHEM/tempList.cfg:room1
* FHEM/tempList.cfg ist die Datei, in dem das Temperaturprofil zu suchen ist. '''room1''' ist der Name des Temperaturprofils, welches in der Datei gesucht wird. Wird keine Datei angegeben wird "template.cfg" im "fhem"-Verzeichnis angenommen.
Man kann einem Thermostat das '''Attribut tempListTmpl''' geben. Damit wird der Default-Name des Temperaturprofils für dieses Device gesetzt.
attr thermostat_Climate tempListTmpl FHEM/tempList.cfg:room1
set thermostat_Climate tempListTmpl
prüft das gegenwärtige Temperaturprofil gegen FHEM/tempList.cfg:room1 (da verify der Default ist). Die Prüfung des Profils ist auch Teil des configCheck von HMInfo.
Will man explizit kein Temperaturprofil zuweisen sollte man tempListTmpl auf none setzen.
set thermostat_Climate tempListTmpl restore
überschreibt das gegenwärtige Temperaturprofil des Heizkörperthermostaten mit dem in der Datei befindlichen überschrieben.
=====Templates systemweit nutzen=====
Sinnvoll erscheint es, das ganze systemweit zu machen. Man legt ein File mit allen Wochenplänen an, die man nutzen will. Dann weißt man die TemplateNamen den Thermostaten zu. Und schließlich prüft oder updates man alle Thermostate in einem System mit einem Kommando. Siehe hierzu <u>[[Homematic_HMInfo#Temperaturlisten|HMInfo temperaturlisten]]</u>.

[[Kategorie:HomeMatic Components]]

HomeMatic Type Thermostat

2015-02-01T14:14:53Z

EnlightningMan: 2 Links auf HMInfo korrigiert

<div style="clear: both; border-width:3px; border-color:#00AA00; border-style:solid; padding:5px; background-color:#FFEFEF; margin:1em; margin-left:5em; margin-right:5em;">Dieser Artikel befindet sich zur Zeit im Umbau, nicht alle Informationen sind unbedingt Korrekt.</div>

Es gibt verschiedene HomeMatic Geräte-Typen. Hier gibt es eine allgemeine Beschreibung für den Typ "Thermostat" und deren speziellen Eigenschaften und Einstellungen

== HomeMatic Geräte vom Typ Blind ==
Die in der aktuellen Version unterstützten Modelle kann man in <u>[[Homematic_HMInfo#Infos|HMInfo]]</u> sehen mit
set hm models -f thermostat
*[[HM-CC-RT-DN Funk-Heizkörperthermostat]]
*[[HM-CC-TC Funk-Wandthermostat]]
*[[HM-TC-IT-WM-W-EU Funk-Wandthermostat AP]]

== Hinweise zur Konfiguration ==
Die Thermostate unterscheiden sich in vielen Details und Funktionen. Daher sind Einzelheiten im Device nachzulesen.
Gemeinsam ist den Controllern, das sie eine oder mehr Temperaturlisten als Wochenprogramm unterstützen.
=== Temperaturlisten ===
====manuell====
Hinweis: Bei den Wandthermostaten heißt der Kanal _climate, beim HM-CC-RT-DN ist der Kanal _Clima zuständig für die Wochenprogramme.

Mit dem Kommando
set Thermostat_Climate tempListMon 05:30 16.0 07:00 18.0 16:00 18.5 20:30 19.0 24:00 16.0
kann man das Temperaturprofil für den Wochentag ''Montag'' einstellen. Die nach dem Schaltzeitpunkt stehende Temperatur gilt immer '''bis''' zu diesen Zeitpunkt, nicht ab diesem Zeitpunkt. Der letzte Wert muss immer Mitternacht (24:00) sein.
damit ist also 00:00 - 05:30 = 16Grad, 05:30 - 07:30 = 18 Grad. Die Zeit kann in Schritten von 30min eingestellt werden, die Temperatur in 0.1 Grad.
Der Tage beginnt immer um 00:00, der letzte Abschnitt MUSS 24:00 sein.

Ändert man mehrere Tage auf einmal sollte man unbedingt mit "prep" und "exec" arbeiten, da es sonst zu Wiederholungen und langen Bearbeitungen kommen kann. Prep bereitet die Änderung in FHEM nur vor, mit exec werden die Daten dann an das Device übertragen. Das könnte in einem Fhem-Script lauten

######################################################
# Temperatur-Liste für Zimmer
# setzen per Aufruf von "{SetTempList_Heizung}"
######################################################
sub
SetTempList_Heizung()
{
{ fhem ("set Thermostat_Climate tempListMon prep 05:30 19.0 07:00 20.5 16:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListTue prep 05:30 19.0 07:00 20.5 16:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListWed prep 05:30 19.0 07:00 20.5 16:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListThu prep 05:30 19.0 07:00 20.5 16:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListFri prep 05:30 19.0 07:00 20.5 15:00 19.0 20:30 20.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListSat prep 07:00 19.0 09:00 21.0 15:00 19.0 21:00 21.0 24:00 17.0")};
{ fhem ("set Thermostat_Climate tempListSun exec 07:00 19.0 09:00 21.0 15:00 19.0 21:00 21.0 24:00 17.0")};
}
# End SetTempList_Heizung

====Templates ====
Etwas komfortabler kann man Wochenprogramme in einem File verwalten. Man kann beliebig viele tempaltes erzeugen und diese in einem File ablegen. Diese unterschiedlichen Wochenprogramme kann man den Termostaten zuweisen. So kann man ein Wochenprogramm beliebig vielen Thermostaten zuweisen. Bei Änderungen kann man alle betroffenen Thermostate, die das gleiche Template nutzen sollen, erreichen.

Zusammenfassend:
* Temperaturlisten der Devices in ein file schreiben
* Templates definieren, die man mehreren Devices zuordnen kann
* Template-Änderungen gleichzeitig in mehrere Devices einspielen
* Temperaturlisten gegen ein Template prüfen

=====File erstellen und verwalten =====
Ein File mit den Temperaturlisten (Wochenplänen) muss erzeugt werden. Zur Verwaltung der Temperaturprofile sollte die Datei tempList.cfg im Verzeichnis FHEM liegen, dann kann sie mit dem Web-Interface editiert werden.
HMInfo unterstützt das speichern allen temperaturlisten in ein File mit <u>[[Homematic_HMInfo#Speichern|temperaturListen speichern]]</u>. Dies kann man gut als Startpunkt nutzen. Sie Wochenprogramme sollten in FHEM vorliegen. ggf. mit getConfig auslesen.

entities:tempTmpl1
tempListSat>08:00 14.0 15:00 18.0 21:30 19.0 24:00 14.0
tempListSun>08:00 14.0 15:00 18.0 21:30 19.0 24:00 17.0
tempListMon>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListTue>07:00 14.0 13:00 16.0 16:00 18.0 21:00 19.0 24:00 15.0
tempListWed>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListThu>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListFri>07:00 14.0 13:00 16.0 16:00 18.0 21:00 19.0 24:00 14.0
entities:tempTWohnzimmer
tempListSat>08:00 14.0 15:00 18.0 21:30 19.0 24:00 17.0
tempListSun>08:00 14.0 15:00 18.0 21:30 19.0 24:00 14.0
tempListMon>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListTue>07:00 14.0 13:00 16.0 16:00 18.0 21:00 19.0 24:00 15.0
tempListWed>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListThu>07:00 14.0 16:00 18.0 21:00 19.0 24:00 14.0
tempListFri>07:00 14.0 13:00 16.0 16:00 18.0 21:00 19.0 24:00 14.0

=====Templates zuweisen =====
Das Attribut tempListTmpl sollte man allen Termostaten zuweisen. Dies ist dem jeweiligen Steuerungschannel zuzuweisen
attr hk1_Clima tempListTmpl setup/tempList.cfg:tempTmpl1
attr hk2_Clima tempListTmpl setup/tempList.cfg:tempTmpl1
attr hk3_Clima tempListTmpl setup/tempList.cfg:tempTWohnzimmer

In entsprechenden Kommandos muss man nun nicht mehr den Namen des Templates für den HK angeben, es wird der aus dem Attribut genommen. Man gibt das File an und dann den Namen des Templates im File.
===== Überprüfen/Einlesen =====
Mit dem verify-Kommando wird überprüft, ob das gegenwärtig vorhandene Temperaturprofil mit dem in der Datei befindlichen übereinstimmt.
set thermostat_Climate tempListTmpl verify FHEM/tempList.cfg:room1
Mit dem restore-Kommando wird das Temperaturprofil des Heizkörperthermostaten mit dem in der Datei befindlichen überschrieben.
set thermostat_Climate tempListTmpl restore FHEM/tempList.cfg:room1
* FHEM/tempList.cfg ist die Datei, in dem das Temperaturprofil zu suchen ist. '''room1''' ist der Name des Temperaturprofils, welches in der Datei gesucht wird. Wird keine Datei angegeben wird "template.cfg" im "fhem"-Verzeichnis angenommen.
Man kann einem Thermostat das '''Attribut tempListTmpl''' geben. Damit wird der Default-Name des Temperaturprofils für dieses Device gesetzt.
attr thermostat_Climate tempListTmpl FHEM/tempList.cfg:room1
set thermostat_Climate tempListTmpl
prüft das gegenwärtige Temperaturprofil gegen FHEM/tempList.cfg:room1 (da verify der Default ist). Die Prüfung des Profils ist auch Teil des configCheck von HMInfo.
Will man explizit kein Temperaturprofil zuweisen sollte man tempListTmpl auf none setzen.
set thermostat_Climate tempListTmpl restore
überschreibt das gegenwärtige Temperaturprofil des Heizkörperthermostaten mit dem in der Datei befindlichen überschrieben.
=====Templates systemweit nutzen=====
Sinnvoll erscheint es, das ganze systemweit zu machen. Man legt ein File mit allen Wochenplänen an, die man nutzen will. Dann weißt man die TemplateNamen den Thermostaten zu. Und schließlich prüft oder updates man alle Thermostate in einem System mit einem Kommando. Siehe hierzu <u>[[Homematic_HMInfo#Temperaturlisten|HMInfo temperaturlisten]]</u>.

[[Kategorie:HomeMatic Components]]