http://wiki.fhem.de/w/api.php?action=feedcontributions&user=Standarduser&feedformat=atomFHEMWiki - Benutzerbeiträge [de]2024-03-29T05:50:04ZBenutzerbeiträgeMediaWiki 1.39.3http://wiki.fhem.de/w/index.php?title=HMCCU_Best_Practice&diff=26474HMCCU Best Practice2018-04-23T08:24:16Z<p>Standarduser: /* Format von Readingnames */ Typo</p>
<hr />
<div>==I/O Device anlegen==<br />
===I/O Device definieren===<br />
Die Kommunikation zwischen FHEM und einer CCU2 erfolgt über ein Device vom Typ HMCCU. Der folgende Befehl legt ein solches I/O Device an. Dabei wird die IP-Adresse der CCU2 als Parameter angegeben:<br />
<pre>define d_ccu HMCCU 192.168.1.100</pre><br />
<br />
===Attribute setzen===<br />
Zunächst wird der RPC-Server konfiguriert. Im folgenden Beispiel werden BidCos, HM-IP, CUxD und Gerätegruppen (VirtualDevices) berücksichtigt. Es dürfen nur die Schnittstellen angegeben werden, die in der CCU2 auch verwendet werden.<br />
<pre><br />
#<br />
# Schnittstellen<br />
attr d_ccu rpcinterfaces BidCos-RF,CUxD,HmIP-RF,VirtualDevices<br />
#<br />
# RPC-Server nach dem Start von FHEM automatisch starten<br />
attr d_ccu rpcserver on<br />
#<br />
# Status anzeigen<br />
attr d_ccu stateFormat rpcstate/state<br />
#<br />
# Buttons für das Starten und Stoppen des RPC-Servers anzeigen<br />
attr d_ccu cmdIcon on:general_an off:general_aus<br />
attr d_ccu eventMap /rpcserver on:on/rpcserver off:off/<br />
</pre><br />
<br />
Mit dem Befehl set d_ccu defaults werden weitere Attribute gesetzt, die das Handling von Readings in den später definierten Devices vom Typ HMCCUCHN und HMCCUDEV beeinflussen bzw. vereinfachen. Diese Attribute können natürlich auch einzeln gesetzt werden:<br />
<pre><br />
#<br />
# Readings LOWBAT, LOW_BAT und UNREACH immer berücksichtigen<br />
attr d_ccu ccudef-readingfilter ^(LOW_?BAT|UNREACH)$<br />
#<br />
# Readings LOWBAT und LOW_BAT in battery umbenennen, Reading UNREACH in activity umbenennen<br />
attr d_ccu ccudef-readingname ^(.+\.)?LOW_?BAT$:battery;^(.+\.)?UNREACH$:activity<br />
#<br />
# Werte von Readings durch sprechende Ausdrücke ersetzen<br />
attr d_ccu ccudef-substitute AES_KEY!(0|false):off,(1|true):on;LOWBAT,LOW_BAT!(0|false):ok,(1|true):low;UNREACH!(0|false):alive,(1|true):dead;MOTION!(0|false):noMotion,(1|true):motion;DIRECTION!0:stop,1:up,2:down,3:undefined;WORKING!0:false,1:true;INHIBIT!(0|false):unlocked,(1|true):locked<br />
</pre><br />
<br />
Nun werden noch Aggregationen definiert. Mit dieser Funktion können bestimmte Stati von Homematic Devices im I/O Device als Reading dargestellt werden (z.B. Liste der offenen Fenster, Geräte mit leerer Batterie). Um die Definition der Aggregationen bzw. der Filter einfach zu halten, sollte man sich ein Namensschema überlegen. Die folgenden Aggregationen gehen davon aus, dass alle Homematic Devices in FHEM mit "HM-" beginnen. Danach folgt die Funktion des Gerätes, z.B. KL für Klima und TF für TürFenster. Bei anderer Namensgebung sind die Filterangaben entsprechend anzupassen. Alternativ kann auch der Gerätetyp oder die Gruppe als Filter verwendet werden (s.a. Command Reference zu HMCCU). Das Attribut ''ccuaggregate'' unterstützt mehrzeilige Angaben. Im folgenden Beispiel ist nur der Attributwert angegeben. Eingabe am besten über Auswahl des Attributs ''ccuaggregate'' in der FHEM Oberfläche. Die Kommentarzeilen beginnend mit # weglassen.<br />
<pre><br />
#<br />
# Anzeige aller Geräte, deren Namen mit HM_ beginnt und bei denen das Reading battery den Wert low hat<br />
name:battery,filter:name=^HM_.*,read:battery,if:any=low,else:ok,prefix:battery_,coll:comment!Batterien OK;<br />
#<br />
# Anzeige aller Geräte vom Typ HM-CC-RT-DN oder HM-TC-IT-WM-W-EU, deren Batteriespannung kleiner gleich 2.2 Volt ist<br />
name:voltage,filter:type=(HM-CC-RT-DN|HM-TC-IT-WM-W-EU),read:BATTERY_STATE,if:le=2.2,else:0,prefix:voltage_,coll:comment!Batteriespannung OK;<br />
#<br />
# Anzeige aller Geräte, deren Namen mit HM_TF beginnt und bei denen das Reading state den Wert open hat<br />
name:lock,filter:name=^HM_TF.*,read:state,if:any=open,else:closed,prefix:lock_,coll:comment!Alle Fenster/Türen geschlossen;<br />
#<br />
# Anzeige aller Geräte der Gruppe Dachfenster, bei denen das Reading state den Wert open hat<br />
name:lockroof,filter:group=Dachfenster,read:state,if:any=open,else:closed,prefix:lockroof_,coll:comment!Alle Dachfenster geschlossen;<br />
#<br />
# Anzeige aller Geräte, deren Namen mit HM_TF beginnt aber nicht mit Haustuer endet und bei denen das Reading state den Wert open hat<br />
name:lockwin,filter:name=^HM_TF.*!Haustuer$,read:state,if:any=open,else:closed,prefix:lockwin_,coll:comment!Alle Fenster/Türen geschlossen;<br />
#<br />
# Anzeige aller Geräte, deren Namen mit HM_KL beginnt und bei denen das Reading HUMIDITY größer gleich 60 ist<br />
name:hummax,filter:name=^HM_KL.*,read:HUMIDITY,if:ge=60,else:0,prefix:hummax_,coll:alias!Luftfeuchte OK;<br />
#<br />
# Anzeige aller Geräte, deren Namen mit HM_ beginnt und die nicht erreichbar sind<br />
name:unreach,filter:name=^HM_.*,read:activity,if:any=dead,else:alive,prefix:unreach_,coll:comment!Alle Devices erreichbar<br />
</pre><br />
<br />
Mit den folgenden Attributen werden die Aggregations-Readings im I/O Device aktualisiert:<br />
<pre><br />
#<br />
# Readings schreiben<br />
attr d_ccu ccureadings 1<br />
attr d_ccu event-on-change-reading .*<br />
#<br />
# Werte auf eine Nachkommastelle abschneiden<br />
attr d_ccu stripnumber 1<br />
</pre><br />
<br />
==Neue Geräte anlernen==<br />
Um ein neues Gerät an die CCU anzulernen und in FHEM zu nutzen, kann man wie folgt vorgehen:<br />
<br />
# Gerät in CCU2 anlernen<br />
# Im WebUI der CCU2 den Menübefehl ''Einstellungen → Geräte'' aufrufen. Das neu angelernte Gerät in der Liste suchen und nacheinander das Gerät selbst sowie die einzelnen Kanäle nach eigenen Wünschen umbenennen. Dabei sind folgende Regeln zu beachten:<br />
#* CCU2 weit Keine Namen doppelt vergeben, z.B. darf ein Raum nicht den gleichen Namen haben wie ein Gerät.<br />
#* Keine Umlaute verwenden.<br />
#* Wenn möglich keine Leerzeichen verwenden (funktioniert zwar, erschwert aber das Handling in FHEM).<br />
# In FHEM für das I/O Device den Befehl '''get devicelist''' ausführen, um das neue Gerät in FHEM bekannt zu machen.<br />
# Für das I/O Device den Befehl get deviceinfo CCU2-Devicename ausführen. Die Ausgabe zeigt die für das Gerät verfügbaren Kanäle und Datenpunkte sowie die möglichen Operationen (R=Read, W=Write, E=Event) an, die ausgeführt werden können. Anhand dieser Informationen kann man entscheiden, ob man im nächsten Schritt besser HMCCUCHN oder HMCCUDEV für die weiteren Definitionen verwendet. Falls sich aus den Namen der Datenpunkte nicht ihr Verwendungszweck ergibt, findet man in der [http://www.eq-3.de/Downloads/eq3/download%20bereich/hm_web_ui_doku/hm_devices_Endkunden.pdf EQ3-Doku] eine detaillierte Beschreibung der Datenpunkte aller Geräte.<br />
# Ein FHEM Device für das neue Gerät und/oder seine Kanäle definieren:<br />
#* Das Modul HMCCUCHN verwenden, wenn lediglich ein Kanal des Geräts in FHEM eingebunden werden soll oder die Kanäle separat verwendet werden sollen (z.B. bei einem 4-fach Aktor).<br />
#* Das Modul HMCCUDEV verwenden, wenn das komplette Gerät mit allen Kanälen in FHEM eingebunden werden soll oder bei Sonderfällen wie Rauchmeldergruppen oder virtuelle Gerätegruppen.<br />
# Für das neue Device in FHEM den Befehl set defaults ausführen, um einige Attribute zu setzen. Hinweis: Default-Attribute sind nicht für alle Gerätetypen verfügbar. Grundsätzlich sollten folgende Attribute gesetzt werden:<br />
#* ccureadingfilter - Einschränkung auf die tatsächlich benötigten Datenpunkte bzw. Readings<br />
#* ccureadingformat - Bessere Lesbarkeit der Readings durch das Format datapoint<br />
#* event-on-change-reading bzw. event-on-update-reading - Wenn ein Schalter oder Taster über Datenpunkte wie PRESSED_xxx verfügt, sollte event-on-update-reading auf ".*" gesetzt werden. Bei allen anderen Geräten event-on-change-reading.<br />
#* statedatapoint - Legt den Kanal und den Datenpunkt fest, über den ein Gerät oder ein Kanal geschaltet wird bzw. dessen Wert in STATE des FHEM Devices übernommen wird. Bei HMCCUCHN Devices wird nur der Datenpunkt angegeben.<br />
#* statevals - Legt sprechende Namen für Schaltzustände fest. Die Angaben hier stehen dann als Set-Befehle zur Verfügung.<br />
#* substitute - Ersetzt Datenpunktwerte durch Texte bevor sie in Readings gespeichert werden<br />
<br />
==Readingnames anpassen==<br />
===Format von Readingnames===<br />
In HMCCUDEV und HMCCUCHN werden Readingnames aus den Kanalnamen oder den Kanaladressen sowie den Datenpunktnamen gebildet. Das Format der Readingnames kann über das Attribut ''ccureadingformat'' eingestellt werden. Die Vorgabe ist 'datapoint' Die folgende Tabelle enthält eine Übersicht der Formate:<br />
<br />
{| class="wikitable"<br />
|-<br />
! Datenpunktname oder -adresse !! ccureadingformat !! Readingname<br />
|-<br />
| BidCos-RF.1234567:1.STATE || datapoint || 1.STATE<br />
|- <br />
| BidCos-RF.1234567:1.STATE || datapointlc || 1.state<br />
|-<br />
| BidCos-RF.1234567:1.LEVEL || name || MeinKanal.1.LEVEL<br />
|-<br />
| BidCos-RF.1234567:1.LEVEL || address || 1234567.1.LEVEL<br />
|}<br />
<br />
===Readingnames ändern oder ergänzen===<br />
Mit dem Attribut ''ccureadingname'' können einzelne Readings umbenannt oder neue Readings als Kopie vorhandener Readings hinzugefügt werden. Die Syntax des Attributs sieht wie folgt aus:<br />
<br />
ccureadingname Ausdruck:[+]NewReading[;...]<br />
<br />
Der Parameter ''Ausdruck'' gibt den Teil eines Readingnames an, der ersetzt werden soll. Mit ''NewReading'' wird der Name des zusätzlichen Readings (führendes '+') oder der Ersetzungstext für den vorhandenen Readingname festgelegt. Beispiele:<br />
<br />
{| class="wikitable"<br />
|-<br />
! Readingname alt !! ccureadingname !! Readingname(s) neu<br />
|-<br />
| 1.LEVEL || LEVEL:pct || 1.pct<br />
|- <br />
| 1.LEVEL || [0-9]{1,2}\.LEVEL:pct || pct<br />
|-<br />
| 1.LEVEL || 1.LEVEL:+pct;1.LEVEL:level || pct, level<br />
|-<br />
| 1.LEVEL || 1.LEVEL:pct;1.LEVEL:level || pct<br />
|}<br />
<br />
Wichtig! Die Regeln werden von links nach rechts abgearbeitet. Daher greift die 2. Regel in der letzten Zeile nicht mehr (1.LEVEL wurde zuvor durch pct ersetzt).<br />
<br />
=== Readingnames zusammenfassen===<br />
Mit dem Attribut ''ccureadingname'' können auch mehrere Readings zu einem neuen Reading zusammengefasst werden. Beispiel: Ein Taster liefert je nach Dauer des Tastendrucks im Kanal 1 ein Event PRESS_SHORT oder PRESS_LONG. Normalerweise würden dabei auch zwei Readings "1.PRESS_SHORT" und "1.PRESS_LONG" entstehen. Diese beiden Readings können mit folgendem Befehl in einem Reading PRESSED zusammengefasst werden:<br />
<br />
<pre>attr mydev ccureadingname ^1.PRESS_(SHORT|LONG)$:PRESSED</pre><br />
<br />
Wenn ein Taster über mehrere Kanäle (hier vier) verfügt, können auch diese zu einem einzigen Reading zusammengefasst werden:<br />
<br />
<pre>attr mydev ccureadingname ^[1-4].PRESS_(SHORT|LONG)$:PRESSED</pre><br />
<br />
==Readingwerte manipulieren==<br />
===Readingwerte ersetzen===<br />
Mit dem Attribut ''substitute'' können Werte von Readings durch neue Werte bzw. Zeichenketten ersetzt werden. Die Veränderungen können sich auf bestimmte Datenpunkte oder alle Readings eines Devices beziehen. Die zu ersetzenden Werte werden dabei entweder durch reguläre Ausdrücke oder als Nummernbereiche angegeben.<br />
<br />
Im folgenden Beispiel werden die Werte 1 oder true in allen Readings durch "yes" ersetzt, die Werte 0 oder false durch "no":<br />
<br />
<pre>attr mydev substitute (1|true):yes,(0|false):no</pre><br />
<br />
Wenn sich mehrere Ersetzungsregeln auf den gleichen Datenpunkt beziehen oder wie im Beispiel oben für alle Datenpunkte gelten, werden sie einfach durch ein Komma getrennt aneinander gehängt. Eine Ersetzungsregel kann sich auch auf einen bestimmten Datenpunkt beziehen. Im folgenden Beispiel eines Fensterkontakts sollen die Werte des Datenpunktes STATE durch "open" bzw. "closed" ersetzt werden. Der Name des Datenpunktes wird in diesem Fall einfach durch ein Ausrufezeichen getrennt der Regel vorangestellt: <br />
<br />
<pre>attr mydev substitute STATE!(1|true):open,(0|false):closed</pre><br />
<br />
Sollte ein Geräte in mehreren Kanälen identische Datenpunkte enthalten, kann dem Datenpunktnamen noch eine Kanalnummer mit einem Punkt vorangestellt werden:<br />
<br />
<pre>attr mydev substitute 1.STATE!(1|true):open,(0|false):closed</pre><br />
<br />
Eine Ersetzungsregel kann sich auch auf mehrere Datenpunkte beziehen (im Beispiel ERROR und LOWBAT), die durch Komma getrennt vor dem '!' aufgelistet werden:<br />
<br />
<pre>attr mydev substitute ERROR,LOWBAT!(1|true):yes,(0|false):no</pre><br />
<br />
Wenn mehrere Ersetzungsregeln definiert werden sollen, werden sie durch ein Semikolon getrennt. Im folgenden Beispiel sollen die Werte der Datenpunkte STATE und LOWBAT unterschiedlich interpretiert werden:<br />
<br />
<pre>attr mydev substitute STATE!(1|true):open,(0|false):closed;LOWBAT!(1|true):low,(0|false):ok</pre><br />
<br />
Bei Datenpunkten mit numerischen Werten wie z.B. dem Level eines Rollladenaktors kann es sinnvoll sein, Werte oder Wertebereiche zu ersetzen. Im folgenden Beispiel kann der Datenpunkt LEVEL Werte von 0-100 annehmen. Der Wert 0 soll als "closed" und der Wert 100 als "open" dargestellt werden. Alle anderen Werte als "partial":<br />
<br />
<pre>attr mydev substitute LEVEL!#0-0:closed,#1-99:partial,#100-100:open</pre><br />
<br />
Zu ersetzende Nummernbereiche beginnen also immer mit einem #. Es müssen immer Bereiche angegeben werden.<br />
<br />
In Ersetzungsregeln können auch Variablen verwendet werden. Eine Variable wird dabei im Format ${Datenpunkt} angegeben. Ein Sonderfall ist die Variable ${value}, die durch den Originalwert ersetzt wird. Beispiel: An den Wert der Luftfeuchte soll der Text "Prozent" angehängt werden:<br />
<br />
<pre>attr mydev substitute HUMIDITY!.+:${value}%</pre><br />
<br />
Im zweiten Beispiel soll der Temperaturwert durch eine Ausgabe im Format T=Temperatur°, H=Luftfeuchte% ersetzt werden:<br />
<br />
<pre> attr mydev substitute TEMPERATURE!.+:T=${value}° H={1.HUMIDITY}%</pre><br />
<br />
<br />
<br />
[[Kategorie:HomeMatic Components]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=ECMD&diff=25475ECMD2018-02-25T20:38:00Z<p>Standarduser: Link zu Thread im Forum hinzugefügt</p>
<hr />
<div>ECMD bedeutet "Ethersex Command"<ref>[http://www.ethersex.de/index.php/Main_Page_%28Deutsch%29 Ethersex.de]</ref> und ist laut FHEM-Dokumentation<br />
"Any physical device with request/response-like communication capabilities over a TCP connection"<ref>{{Link2CmdRef|Anker=ECMD|Label=FHEM Commandref}}</ref>, das heisst, irgendein physisches Gerät, welches request/response-artige Kommunikationsfähigkeiten aufweist, sei es über eine TCP-Verbindung (Netzwerk) oder eine serielle Schnittstelle.<br />
<br />
In FHEM sind enthalten:<br />
* Modul [[ECMD (Modul)|ECMD]] für die Bearbeitung physischer I/O-Schnittstellengeräte und<br />
* Modul [[ECMDDevice]] für einzelne logische Geräte, deren Kommunikation über ein ECMD-Gerät läuft<br />
<br />
==Beispiele & Links==<br />
{{Link2Forum|Topic= 60753 |Message=521462|LinkText=Thread im FHEM-Forum}}<br />
<br />
<br />
==Quellen==<br />
<references /><br />
<br />
[[Kategorie:Glossary]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Switch&diff=23345FTUI Widget Switch2017-11-24T18:46:44Z<p>Standarduser: /* Zwei Zustände umschalten */ data-set-states korrigiert</p>
<hr />
<div>Das [[{{PAGENAME}}|Switch Widget]] ist ein Widget für [[FHEM Tablet UI]]. Dabei handelt es sich um einen Ein-/Ausschalter in Form eines runden Druckknopfes. Er dient zum Ausführen beliebiger Schaltbefehle und kann auch für FTUI-interne Steuerungen genutzt werden. Zusätzlich kann der Schalter in Abhängigkeit eines Readings sein Aussehen verändern und so zwei oder mehr Zustände optisch darstellen. Beispielsweise können Farbe und/oder das Symbol die Zuständen an/aus anzeigen. Kann das Status-Reading mehr als zwei Zustände einnehmen, kann auch dies dargestellt werden. Dabei sind beliebige Kombinationen von Vorder-/Hintergrundfarben und Symbolen möglich.<br />
<br />
<gallery><br />
File:Switch.png<br />
File:Switch4.png<br />
File:FTUI_Switch-Homestatus2.png<br />
</gallery><br />
<br />
==Attribute==<br />
===Standard-Attribute===<br />
{| class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, dessen Reading gesetzt werden soll (<command> '''<device>''' <reading> <value>)||||<br />
|-<br />
|'''data-get'''||Reading, dessen Inhalt den aktuellen Wert wiedergibt||'STATE'||<br />
|-<br />
|'''data-set'''||Reading, das gesetzt werden soll (<command> <device> '''<reading>''' <value>)||||<br />
|-<br />
|'''data-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||<br />
|-<br />
|'''data-doubleclick'''||Zeit, die vergehen muss, bis das Element ein zweites mal betätigt werden kann. '0' schaltet dieses Verhalten ab.||0||<br />
|-<br />
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Gütige Werte sind 'true', '1' oder 'on' ||||<br />
|-<br />
|'''data-icon'''||Name des Icons im Vordergrund||'fa-lightbulb-o'||<br />
|-<br />
|'''data-background-icon'''||Name des Icons, das als Hintergrund verwendet werden soll||'fa-circle'||<br />
|-<br />
|'''data-color'''||Farbe des Icon (RGB-Angabe oder Farbname)||#2A2A2A||data-color="#c0c0c0"<br />
|-<br />
|'''data-background-color'''||Hintergrundfarbe des Widgets||#505050||data-background-color="none"<br />
|-<br />
|'''data-warn'''||Reading, dessen Inhalt als rotes Kennzeichen angezeigt wird. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||<br />
|-<br />
|'''data-warn-on'''||Werte von '''data-warn''', bei denen das Kennzeichen angezeigt wird||<nowiki>'true|on|[1-9]{1}[0-9]*'</nowiki>||<br />
|-<br />
|'''data-warn-off'''||Werte von '''data-warn''', bei denen das Kennzeichen versteckt wird||<nowiki>'false|off|0'</nowiki>||<br />
|-<br />
|'''data-warn-color'''||Textfarbe des Kennzeichens||'#aaa'||<br />
|-<br />
|'''data-warn-background-color'''||Hintergrundfarbe des Kennzeichens||'#aa2200'||<br />
|-<br />
|'''data-hide'''||Reading zum Verstecken des Elementes. Das Element verschwindet, wenn der Wert mit '''data-hide-on''' übereinstimmt.||'STATE'||<br />
|-<br />
|'''data-hide-on'''||Zeichenkette, bei der das Element versteckt wird||<nowiki>'true|1|on'</nowiki>||<br />
|-<br />
|'''data-hide-off'''||Zeichenkette, bei der das Element angezeigt wird||'!on'||<br />
|-<br />
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"<br />
|-<br />
|'''data-reachable'''||Reading, dessen Inhalt angibt, ob das Device erreichbar ist, oder nicht. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||<br />
|-<br />
|'''data-timeout'''||Maximale Zeit, die der eingestellte Zustand nach einer Veränderung angezeigt wird, bis die echte Rückmeldung vom Device wieder angezeigt wird||2000ms||<br />
|}<br />
<br />
===Attribute für zwei Zustände===<br />
Zur Anzeige von zwei Zuständen können nachfolgende Attribute zusätzlich zu den Standard-Attributen genutzt werden.<br />
{| class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-get-on'''||Zeichenkette oder ein Array von Werten, die als Zustand ON interpretiert werden||'on'||<br />
|-<br />
|'''data-get-off'''||Zeichenkette oder ein Array von Werten, die als Zustand OFF interpretiert werden||'off'||<br />
|-<br />
|'''data-set-on'''||Wert, der beim Einschalten gesendet werden soll ||Wert von '''data-get-on'''||data-set-on="1"<br />
|-<br />
|'''data-set-off'''||Wert, der beim Ausschalten gesendet werden soll||Wert von '''data-get-off'''||data-set-off="0"<br />
|-<br />
|'''data-on-color'''||Iconfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#aa6900'||<br />
|-<br />
|'''data-off-color'''||Iconfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#505050'||<br />
|-<br />
|'''data-on-background-color'''||Hintergrundfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#aa6900'||<br />
|-<br />
|'''data-off-background-color'''||Hintergrundfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#505050'||<br />
|}<br />
<br />
'''data-get-on''' und '''data-get-off''' können auch RegEx enthalten:<br />
<code>data-get-on="[0-9]{1,3}|on"</code> bedeutet, dass der Schalter AN ist, wenn das Reading eine Zahl zwischen 0 und 100 ist, oder den Wert <code>on</code> enthält.<br />
<code>data-get-off="!on"</code> bedeutet, dass alle Werte, die nicht für <code>on</code> stehen, automatisch <code>off</code> bedeuten (Negation).<br />
<code>data-set-off=""</code> unterdrückt das Senden eines OFF-Befehls.<br />
'''data-[on|off]-color''' erwartet einen RGB-Wert, wenn dieser aus einen Reading gelesen wird (<code>rgb(0, 0, 0)</code> statt <code>#000000</code>)<br />
<br />
===Attribute für mehrere Zustände===<br />
Zur Anzeige von mehreren Zuständen können nachfolgende Attribute zusätzlich zu den Standard-Attributen genutzt werden.<br />
{| class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-states'''||Array von Werten, die das Reading einnehmen kann||||<br />
|-<br />
|'''data-set-states'''||Array von Werten, die in Abhängigkeit des Arrays von '''data-states''' geschaltet werden||||<br />
|-<br />
|'''data-icons'''||Array von Icons, die in Abhängigkeit des Arrays von '''data-states''' im Vordergrund angezeigt werden||||<br />
|-<br />
|'''data-background-icons'''||Array von Icons, die in Abhängigkeit des Arrays von '''data-states''' im Hintergrund angezeigt werden||||<br />
|-<br />
|'''data-colors'''||Array von Farben, die in Abhängigkeit des Arrays von '''data-states''' das Vordergrund-Icon einfärben||||<br />
|-<br />
|'''data-background-colors'''||Array von Farben, die in Abhängigkeit des Arrays von '''data-states''' das Hintergrund-Icon einfärben||||<br />
|}<br />
<br />
==CSS-Klassen==<br />
{|class="wikitable"<br />
!Klasse<br />
!Beschreibung<br />
{{FTUI Klasse|readonly}}{{FTUI Klasse|small}}{{FTUI Klasse|compressed}}{{FTUI Klasse|compressed-50}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|invert}}<br />
|}<br />
<br />
==Hinweise==<br />
Das Attribut '''data-timeout''' dient dazu, ein "Flackern" der Anzeige zu verhindern. Manche Devices benötigen einige Zeit, bis der gewünschte und eben eingestellte Zustand erreicht wird.<br />
Zitat aus dem Forum: "data-timeout gilt nur für die on-off (toggle) Funktion von Switch und Dimmer, nicht fürs Dimmen. Das Problem: Am Switch wird eingeschaltet, der Knopf wird hell und ON an FHEM gesendet. Aber die Hardware reagiert nicht, geht nicht auf ON.<br />
Wenn sie das machen würde, käme auch eine Bestätigung per Longpoll. Mit '''data-timeout''' wird die eingestellte Zeit gewartet und bei Ausbleiben der Bestätigung fällt der Switch zum ursprünglichen Status zurück, geht also wieder aus. Nur wenn innerhalb der x Sekunden das Longpoll-Event kommt, wird der Fallbacktimer gestoppt."<br />
<br />
==Beispiele==<br />
===An/Aus===<br />
Einfacher Schalter, der <code>on</code>/<code>off</code> sendet und diesen Status durch Farbumschlag anzeigt.<br />
<br />
[[File:Switch.png]]<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch" data-device="MyDevice"></div><br />
</syntaxhighlight><br />
<br />
===An/Aus (Farben invertiert)===<br />
Einfacher Schalter, der <code>on</code>/<code>off</code> sendet und diesen Status durch Farbumschlag anzeigt. Die Farben sind hier im Gegensatz zum vorherigen Beispiel invertiert.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch" data-device="MyDevice" class="invert"></div><br />
</syntaxhighlight><br />
<br />
===1/0 als Befehl===<br />
Einfacher Schalter, der <code>1</code>/<code>0</code> sendet und diesen Status durch Farbumschlag anzeigt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch"<br />
data-icon="fa-rss"<br />
data-device='MyDevice'<br />
data-get-on="1" <br />
data-get-off="0" <br />
data-set-on="1" <br />
data-set-off="0"<br />
class="green small invert"><br />
</div><br />
</syntaxhighlight><br />
<br />
===MILIGHT-Switch===<br />
Beispiel for einen MILIGHT-Schalter. Der <code>on</code>-Zustand wird per RegEx ermittelt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch"<br />
data-device="MILIGHT_Zone1_Wohnzimmer" <br />
data-get-on="on.*"<br />
data-get-off="off"><br />
</div><br />
</syntaxhighlight><br />
<br />
===4-fach-Schalter===<br />
Gruppe von 4 Schaltern, die den Status des selben Devices umschalten.<br />
<br />
[[File:Switch4.png]]<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-home" data-get-on="Home"></div><br />
<div>Home</div><br />
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-bed" data-get-on="Sleep"></div><br />
<div>Sleep</div><br />
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-car" data-get-on="Away"></div><br />
<div>Away</div><br />
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-suitcase" data-get-on="Holiday"></div><br />
<div>Holiday</div><br />
</div><br />
</syntaxhighlight><br />
<br />
===Zwei Zustände umschalten===<br />
Großer Homestatus-Button, der zwischen zwei Zuständen umschaltet.<br />
<br />
[[File:FTUI_Switch-Homestatus2.png]]<br />
<syntaxhighlight lang="html"><br />
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2"><br />
<header>HOMESTATUS</header><br />
<div data-type="switch"<br />
data-device="dummy3"<br />
data-set-states='["Abwesend","Anwesend"]'<br />
data-states='["Anwesend","Abwesend"]'<br />
data-icons='["fa-home", "fa-car"]'<br />
data-colors='["white", "white"]'<br />
data-background-colors='["green", "red"]'<br />
class="bigger top-space"><br />
</div><br />
</li><br />
</syntaxhighlight><br />
<br />
===Serienschaltung: Mehrere Zustände nacheinander===<br />
Bei jeder Betätigung wird der nächste der hinterlegten Zustände eingenommen.<br />
Man beachte die Reihenfolge in data-set-states und data-states.<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch"<br />
data-device="Test"<br />
data-set-states='["on","off","auto"]'<br />
data-states='["auto","on","off"]'<br />
data-icons='["fa-tint","fa-tint","fa-tint"]'<br />
data-colors='["white","white","white"]'<br />
data-background-colors='["blue","green","red"]' <br />
class="small"><br />
</div><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Image&diff=23200FTUI Widget Image2017-11-06T19:02:37Z<p>Standarduser: /* Hinweise */ Hinweis zu blassen Bildern hinzugefügt</p>
<hr />
<div>Das [[{{PAGENAME}}|Image Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Bild angezeigt werden kann. Die URL des Bildes kann entweder fest vorgegeben oder aus einem Reading gelesen werden.<br />
<br />
<gallery><br />
File:FTUI_Widget_Image_01.png<br />
File:FTUI_Widget_Image_02.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, dessen Reading eine Bild-URL enthält||||<br />
|-<br />
|'''data-get'''||Name des Readings, das die zu verwendende Bild-URL enthält||STATE||data-get="Image-URL"<br />
|-<br />
|'''data-path'''||Erster Teil der URL des anzuzeigenden Bildes||||<nowiki>data-path="https://www.example.com/images/"</nowiki><br />
|-<br />
|'''data-suffix'''||Letzter Teil der URL des anzuzeigenden Bildes||||data-suffix=".png"<br />
|-<br />
|'''data-url'''||URL des anzuzeigenden Bildes||||<nowiki>data-url="https://example.com/bild.jpg"</nowiki><br />
|-<br />
|'''data-fhem-cmd'''||Befehl, der bei einem Klick auf das Bild an FHEM gesendet werden soll||||data-fhem-cmd="set Bulp01 off"<br />
|-<br />
|'''data-state-get'''||Name des Parameters, der den Status-Wert enthält||||data-state-get="STATE"<br />
|-<br />
|'''data-states'''||Ein Array an möglichen Status-Werten||||data-states='["on","off","pending"]'<br />
|-<br />
|'''data-classes'''||Ein Array von CSS-Klassen. Welche Klasse zusätzlich hinzugefügt wird, entscheidet sich durch das ''data-states''-Array||||data-classes='["bg-green","bg-red","bg-yellow"]'<br />
|-<br />
|'''data-size'''||Gewünschte Breite des Bildes in Pixel oder Prozent. Die Höhe wird proportional skaliert||50%||data-size="248px"<br />
|-<br />
|'''data-width'''||Gewünschte Breite des Bildes in Pixel oder Prozent.||100%||data-size="248px"<br />
|-<br />
|'''data-height'''||Gewünschte Höhe des Bildes in Pixel oder Prozent.||auto||data-height="248px"<br />
|-<br />
|'''data-opacity'''||Durchsichtigkeit des Bildes (opacity)||0.8||data-opacity="1"<br />
|-<br />
|'''data-refresh'''||Interval in Sekunden, nachdem das Bild aktualisiert werden soll||900||data-refresh="3600"<br />
|-<br />
|'''data-hide'''||Reading, nach dessen Wert entschieden wird, ob das Bild angezeigt wird, oder nicht.||STATE||data-hide="STATE"<br />
|-<br />
|'''data-hide-on'''||Wert, bei dem das Bild nicht angezeigt wird||true,1,on||data-hide-on="aus"<br />
|-<br />
|'''data-hide-off'''||Wert, bei dem das Bild angezeigt wird||!on||data-hide-on="an"<br />
|-<br />
|'''data-hide-parents'''||Soll das HTML-Eltern-Element auch versteckt werden, ist hier der jQuery-Selektor einzugeben.||||data-hide-parents="#BildDiv"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|nocache}}<br />
|}<br />
<br />
==Hinweise==<br />
* Wenn ''data-url'' nicht definiert ist, wird die URL des Bildes aus ''data-path'' + ''data-get'' + ''data-suffix'' zusammengesetzt.<br />
* Es kann nur ''data-url'' + ''data-refresh'' oder ''data-device'' + ''data-get'' verwendet werden, nicht beides gleichzeitig.<br />
* Wenn die Farben von Bildern etwas blass erscheinen, liegt das an einer leichten Transparenz, mit der die Bilder dargestellt werden. Um das zu verhindern sollte '''data-opacity="1"''' gesetzt werden.<br />
<br />
==Beispiele==<br />
===Bild aus dem Internet anzeigen===<br />
Dieses einfache Beispiel zeigt die Verwendung des [[FTUI Widget Image|Image-Widgets]] mit einer fest vorgegebenen Internetadresse.<br />
<syntaxhighlight lang="html"><br />
<div data-type="image"<br />
data-url="https://fhem.de/www/images/default/fhemicon.png"<br />
data-size="100px"></div><br />
</syntaxhighlight><br />
<br />
Soll verhindert werden, dass Browser das Bild aus ihrem Cache laden, anstatt von der Original-URL, muss die Klasse ''nocache'' verwendet werden:<br />
<syntaxhighlight lang="html"><br />
<div data-type="image"<br />
data-url="https://fhem.de/www/images/default/Eventuell_im_Cache_gespeichertes_Bild.png"<br />
data-size="100px"></div><br />
<div data-type="image"<br />
data-url="https://fhem.de/www/images/default/OriginalBild.png"<br />
data-size="100px"<br />
class="nocache"></div><br />
</syntaxhighlight><br />
<br />
[[File:FTUI_Widget_Image_01.png]]<br />
<br />
===URL aus einem Reading===<br />
Hier wird die URL zum anzuzeigenden Bild aus dem STATE eines FHEM-Devices ausgelesen.<br />
<syntaxhighlight lang="html"><br />
<div data-type="image"<br />
data-device="dDummy"<br />
data-get="STATE"<br />
data-size="100px"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Image_01.png]]<br />
<br />
===Dynamische URL===<br />
In diesem Beispiel wird die URL zu einem Bild anhand eines Readings zusammen gebaut.<br />
<br />
Das entsprechende FHEM-Device liefert z.B. folgende Readings:<br />
{|class="wikitable"<br />
|channels_01_channel||201||2017-02-12 09:50:50<br />
|-<br />
|channels_01_image||orf-1-hd.png||2017-02-12 09:50:50<br />
|-<br />
|channels_01_name||ORF eins||2017-02-12 09:50:50<br />
|}<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="image"<br />
data-device="jnTVSender"<br />
data-get="channels_01_image"<br />
data-path="/fhem/images/TVSender/"<br />
data-size="80px"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Image_02.png]]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Popup&diff=23199FTUI Widget Popup2017-11-06T19:00:03Z<p>Standarduser: /* Attribute */ data-return-time hinzugefügt</p>
<hr />
<div>Das [[{{PAGENAME}}|Popup Widget]] ist ein Widget für [[FHEM Tablet UI]], das eine Popup nach einem Klick auf ein anderes Widget öffnet.<br />
<br />
<gallery><br />
File:FTUI_Widget_Popup_01.png<br />
File:FTUI_Widget_Popup_04.png<br />
File:FTUI_Widget_Popup_03.png<br />
File:FTUI_Widget_Popup_05.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, dessen Readings gelesen/geändert werden sollen||||<br />
|-<br />
|'''data-get'''||Name des Readings, das den Trigger zum Öffnen des Popups liefert||STATE||data-get="warn"<br />
|-<br />
|'''data-get-on'''||Wert, bei dem das Popup geöffnet wird||on||data-get-on="true"<br />
|-<br />
|'''data-get-off'''||Wert, bei dem das Popup geschlossen wird||off||data-get-on="false"<br />
|-<br />
|'''data-width'''||Festgelegte Breite des Popups in px oder %||400px||data-width="200px"<br />
|-<br />
|'''data-height'''||Festgelegte Höhe des Popups in px oder %||300px||data-height="200px"<br />
|-<br />
|'''data-left'''||Festgelegter Abstand des Popups vom linken Rand in px oder %||Mitte des Bildschirms||data-left="200px"<br />
|-<br />
|'''data-top'''||Festgelegter Abstand des Popups von oben in px oder %||Mitte des Bildschirms||data-top="100px"<br />
|-<br />
|'''data-draggable'''||Erlaubt das Verschieben des Popups||true||data-draggable="false"<br />
|-<br />
|'''data-mode'''||Animation des Popups (''animateTop'', ''animate'', ''fade'')||animate||data-mode="fade"<br />
|-<br />
|'''data-return-time'''||Zeit in Sekunden, nach der sich das Popup von alleine schließt||0||data-return-time="10"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
{{FTUI Klasse|interlock}}<br />
|}<br />
<br />
==Hinweise==<br />
===Allgemein===<br />
* ''data-mode'' kann die Werte '''animateTop''', '''animate''' oder '''fade''' haben.<br />
* Es muss ein <nowiki><div class="dialog"></nowiki> innerhalb des Widgets gefunden werden. Siehe [[#Struktur]].<br />
* Die CSS-Klasse '''interlock''' verhindert, dass Popup-Elemente manuell geschlossen werden. Das Schließen kann dann nur über ''data-get-off'' getriggert werden.<br />
* Ein Popup-Dialog kann auch durch einfaches Anklicken geschlossen werden. Hierfür kann folgender JavaScript-Code direkt im HTML verwendet werden: <syntaxhighlight lang="html"><div data-type="popup" ... onclick="$('.dialog-close').trigger('click');">...</syntaxhighlight><br />
===Verschachtelung===<br />
Soll in einem Popup-Dialog ein weiter Popup-Dialog geöffnet werden, kann es bei der Verwendung von <code>onclick</code> zum Schließen vorkommen, dass beide Dialoge geschlossen werden. Dies lässt sich verhindern, indem man jedem Popup eine andere ID mitgibt und diese gezielt anspricht.<br />
<syntaxhighlight lang="html"><br />
<div data-type="popup" id="popup1"<br />
...<br />
onclick="$('#popup1.dialog-close').trigger('click');"<br />
...><br />
</div><br />
</syntaxhighlight><br />
<br />
==Struktur==<br />
Innerhalb des Popup-Widgets muss ein Element mit der CSS-Klasse '''dialog''' vorhanden sein. Dieses Element wird als Popup geöffnet und in diesem können weitere Widgets vorhanden sein.<br />
<syntaxhighlight lang="html"><br />
<div data-type="popup" data-height="150px" data-width="250px"><br />
<div><!-- Hier klicken, um das Popup zu öffnen --></div><br />
<div class="dialog"><br />
<header>DIALOG</header><br />
<div><!-- Widget(s) innerhalb des Popup Dialogs --></div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<br />
==Beispiele==<br />
===Popup nach Klick auf HTML-Element===<br />
<syntaxhighlight lang="html"><br />
<div data-type="popup"<br />
data-height="50px"<br />
data-width="150px"><br />
<div>Hier klicken um Popup zu öffnen</div><br />
<div class="dialog"><br />
<header>Popup</header><br />
<div>Inhalt des Popups</div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Popup_01.png]]<br />
<br />
<br />
===Popup öffnet abhängig von STATE===<br />
<syntaxhighlight lang="html"><br />
<div data-type="popup"<br />
data-device="dDummy"<br />
data-get-on="on"<br />
data-get-off="off"<br />
data-height="50px"<br />
data-width="150px"><br />
<div class="dialog"><br />
<header>Popup</header><br />
<div>Inhalt des Popups</div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
<gallery widths=300px heights=200px><br />
File:FTUI_Widget_Popup_02.png<br />
File:FTUI_Widget_Popup_03.png<br />
</gallery><br />
<br />
<br />
===Widgets innerhalb des Popups===<br />
<syntaxhighlight lang="html"><br />
<div data-type="popup"<br />
data-height="130px"<br />
data-width="120px"><br />
<div>Hier klicken um Popup zu öffnen</div><br />
<div class="dialog"><br />
<header>Popup</header><br />
<div data-type="thermostat" data-device="HM_363B29_Climate"></div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Popup_04.png]]<br />
<br />
<br />
===Chart im Popup vergrößern===<br />
In diesem Beispiel wird eine kleine Version des Charts dargestellt. Nach dem Klick auf das Chart öffnet sich ein Popup mit einer größeren Version.<br />
<syntaxhighlight lang="html"><br />
<div data-type="popup"<br />
data-width="450px"><br />
<div data-type="simplechart"<br />
data-device="MySpeedtest"<br />
data-logdevice="FileLog_speedtest"<br />
data-columnspec="4:MySpeedtest.download:"<br />
data-minvalue="0"<br />
data-maxvalue="130"<br />
data-width="100"<br />
data-height="50"></div><br />
<div class="dialog"><br />
<header>Popup</header><br />
<div data-type="simplechart"<br />
data-device="MySpeedtest"<br />
data-logdevice="FileLog_speedtest"<br />
data-columnspec="4:MySpeedtest.download:"<br />
data-minvalue="0"<br />
data-maxvalue="130"></div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Popup_05.png]]<br />
<br />
===Popup nach Klick auf Widget schließen===<br />
In diesem Beispiel wird das Popup geschlossen, sobald auf eines der Push-Widgets geklickt wird. Eventuelle Befehle der Widgets werden aber trotzdem ausgeführt.<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="popup" data-draggable="false" class="interlock"><br />
<div data-type="symbol"<br />
data-device="dDummy3"></div><br />
<div class="dialog"><br />
<div data-type="push"<br />
data-device="dDummy3"<br />
data-icon="mi-local_dining"<br />
onclick="$('.dialog-close').trigger('click');"></div><br />
<div data-type="push"<br />
data-device="dDummy3"<br />
data-icon="mi-tv"<br />
onclick="$('.dialog-close').trigger('click');"></div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Label&diff=23088FTUI Widget Label2017-10-29T16:14:01Z<p>Standarduser: /* Attribute */ ''data-color'' und ''data-limits-part'' ergänzt/korrigiert</p>
<hr />
<div>Das [[{{PAGENAME}}|Label Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Reading eines FHEM-Devices in Textform angezeigt werden kann.<br />
<br />
<gallery><br />
File:FTUI_Widget_Label_01.png<br />
File:FTUI_Widget_Label_02.png<br />
File:FTUI_Widget_Label_03.png<br />
File:FTUI_Widget_Label_04.png<br />
File:FTUI_Widget_Label_05.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-get'''||Name des Readings, dessen Wert angezeigt werden soll||||data-get="measured-temp"<br />
|-<br />
|'''data-part'''||[[Regulärer Ausdruck|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll||||<br />
|-<br />
|'''data-fix'''||Angegebene Anzahl an Dezimalstellen einhalten||(-1 -> nicht numerisch)||<br />
|-<br />
|'''data-color'''||Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe||||data-color="red"<br />
|-<br />
|'''data-colors'''||Ein Array von Farben. Welche Farbe für das Label verwendet wird, wird durch das ''data-limits''-Attribut bestimmt||||data-colors='["red","yellow","green"]'<br />
|-<br />
|'''data-classes'''||Ein Array von CSS-Klassen. Welche Klasse verwendet wird, hängt vom zutreffenden Wert im ''data-limits''-Attribut ab||||data-classes='["bg-red","bg-yellow","bg-green"]'<br />
|-<br />
|'''data-limits'''||Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert||||data-limits='[1,15,30]'<br />
|-<br />
|'''data-limits-get'''||Name des Readings, von dem die Werte für den Vergleich mit dem data-limits-Array geholt werden||data-get||data-limit-get="Dummy01:Limits"<br />
|-<br />
|'''data-limits-part'''||Filtern nach Wert, Position eines Wertes in einer Leerzeichen-getrennte Liste oder RegEx||'-1' -> alle||<br />
|-<br />
|'''data-unit'''||Einheit nach Zahl hinzufügen||||data-unit="%B0C%0A"<br />
|-<br />
|'''data-substitution'''||Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen||||siehe [[#Hinweise]]<br />
|-<br />
|'''data-pre-text'''||Text, der vor dem empfangenen Wert stehen soll||||data-pre-text="Es ist "<br />
|-<br />
|'''data-post-text'''||Text, der nach dem empfangenen Wert sehen soll||||data-post-text=" Grad warm"<br />
|-<br />
|'''data-hide'''||Name des Readings, nach dessen Wert das Widget angezeigt werden soll oder nicht||STATE||data-hide="power-on"<br />
|-<br />
|'''data-hide-on'''||Wert, bei dem das Widget versteckt wird||true,1,on||data-hide-on="on"<br />
|-<br />
|'''data-hide-off'''||Wert, bei dem das Widget angezeigt wird||!on||data-hide-off="!on"<br />
|-<br />
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"<br />
|-<br />
|'''data-refresh'''||Anzahl Sekunden, nach denen das Widget aktualisiert werden soll||0 -> kein Auto-Refresh||data-refresh="10"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|thin}}{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|orange}}{{FTUI Klasse|darker}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|squareborder}}{{FTUI Klasse|bg-limit}}{{FTUI Klasse|icon square}}{{FTUI Klasse|icon round}}{{FTUI Klasse|truncate}}<br />
|}<br />
<br />
==Hinweise==<br />
* Es kann nur entweder ''data-color'' verwendet werden, oder ''data-colors'' + ''data-limits'', nicht beides gleichzeitig<br />
* Mit der Klasse ''bg-limit'' wird die Hintergrund- statt der Vordergrundfarbe abhängig von den Werten in ''data-limits'' geändert<br />
* Die Klassen ''icon square'' und ''icon round'' formatieren das Label mit einer fixen Breite und Höhe im Icon-Stil<br />
* Wird die Klasse ''timestamp'' zusammen mit ''data-substitution="toDate().ago()"'' verwendet, sollte eine automatische Aktualisierung (''data-refresh="xx"'') eingestellt werden für den Fall, dass die Aktualisierungsrate des Readings zu gering ist.<br />
* Ein benutzerdefiniertes Layout kann durch Hinzufügen der folgenden Klassen in die fhem-tablet-ui-user.css erreicht werden:<br />
** .label-precomma<br />
** .label-comma<br />
** .label-aftercomma<br />
** .label-unit<br />
** z.B.: <code>.label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }</code><br />
* Bis zur Version 2.6.2 wurde data-unit mit 50% Schriftgröße auf der Baseline des Wertes positioniert, danach wird die Unit auf superscript angehoben. Dies kann mit einem Eintrag in fhem-tablet-ui-user.css wieder überschrieben werden.<br />
** <Code>.label-unit{ font-size: 50%; vertical-align: baseline; }</code><br />
<br />
<br />
<br />
;Funktionsweise(n) von ''data-substitution'':<br />
* Ein Array an Ersetzungen: <code>data-substitution='["on","Lampe ist an","off","Lampe ist aus"]'</code><br />
* [[Regulärer Ausdruck|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code><br />
* <code>data-substitution="weekdayshort"</code><br />
* Mit JavaScript- und RegEx-Funktionen den Wert umwandeln in:<br />
** Tag:Monat: <code>data-substitution="toDate().ddmm()"</code><br />
** Stunden:Minuten: <code>data-substitution="toDate().hhmm()"</code><br />
** Stunden:Minuten:Sekunden: <code>data-substitution="toDate().hhmmss()"</code><br />
** den Namen des Wochentages: <code>data-substitution="toDate().eeee()"</code><br />
** einen Zeitraum (langes Format): <code>data-substitution="toDate().ago()"</code><br />
** einen Zeitraum (kurzes Format):<code>data-substitution="toDate().ago('hh:mm:ss')"</code><br />
** einen Zeitraum (Minuten ohne führende Nullen):<code>data-substitution="toDate().ago('m')"</code><br />
** 20:15 statt 20:15:00: <code>data-substitution="s/(:00)$//g"</code><br />
<br />
==Beispiele==<br />
===Einfaches Auslesen des STATE eines Devices===<br />
Ein ganz einfaches Beispiel, welches den ''STATE'' eines FHEM-Devices (in diesem Fall ein Heizkörperthermostat) ausliest und anzeigt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" data-device="HM_367B39_Climate"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_01.png]]<br />
<br />
===Anzeige bestimmter Werte eines Devices===<br />
In diesem Beispiel werden Temperatur und Luftfeuchtigkeit eines Heizkörperthermostates ausgelesen und untereinander angezeigt.<br />
<syntaxhighlight lang="html"><br />
<div>Temperatur</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="measured-temp"<br />
data-unit="&deg;C"></div><br />
<br />
<div>Luftfeuchte</div><br />
<div data-type="label"<br />
data-device="HM_367B21_Climate" <br />
data-get="humidity"<br />
data-unit="%"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_02.png]]<br />
<br />
===Textfarbe bei bestimmten Grenzwerten ändern===<br />
Mit dem Label-Widget kann die Textfarbe je nach bestimmten Grenzwerten geändert werden. In diesem Beispiel ist die Farbe blau, sobald die Temperatur gleich oder kleiner 18° ist, grün ab 20° und rot ab 23°.<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" <br />
data-device="dDummy"<br />
data-limits='[18,20,23]' <br />
data-colors='["blue","green","#FF0000"]' <br />
data-unit="&deg;C"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_03.png]]<br />
[[Kategorie:FHEM Tablet UI]]<br />
<br />
===Zwei Labels in einer Textzeile===<br />
Mit der Klasse ''inline'' (kein Zeilenumbruch) können mehrere Label-Widgets in der selben Textzeile platziert werden.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="label" data-device="dDummy" class="inline"></div> bis<br />
<div data-type="label" data-device="dDummy2" class="inline"></div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_04.png]]<br />
<br />
===Kombination von Label- mit anderen Widgets===<br />
Das Label-Widget kann sehr gut verwendet werden, um einen Beschreibungstext für andere Widgets bereitzustellen.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch" data-device="EnO_0193F070" data-icon="mi-power_settings_new"></div><br />
<div data-type="label">Nexus7</div><br />
(<div data-type="label" data-device="Nexus7" data-get="powerLevel"></div>%)<br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_05.png]]<br />
<br />
===Statisches Label mit Symbol===<br />
Möchte man einen statischen Text darstellen, muss hierfür nicht unbedingt das Label-Widget verwendet werden. Das nachfolgende Beispiel zeigt genau dies und fügt links noch ein Symbol ein. Der Teil für das Symbol kann auch für richtige Labels verwendet werden.<br />
<syntaxhighlight lang="html"><br />
<i class="fa fa-cloud fa-2x inline"></i><div class="inline big">WETTER</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_label_symbol.png]]<br />
<br />
===Label- und Symbol-Widget kombiniert===<br />
Dieses Beispiel zeigt, wie man ein Label- innerhalb eines [[FTUI Widget Symbol|Symbol]]-Widgets anzeigen kann. Dazu wird einfach das Label-Widget im &lt;DIV&gt;-Container des Symbols platziert.<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="symbol"<br />
data-device="dDummy3"<br />
data-icon="none"<br />
data-color='none'<br />
data-background-icon="fa-circle"<br />
data-background-colors='["red","blue"]'<br />
data-limits='["0","1"]'><br />
<div data-type="label"<br />
data-device="dDummy3"<br />
data-color="white"></div><br />
</div><br />
</div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Label_06.png]]<br />
<br />
===Unterdrücken der Anzeige===<br />
Die Argumente für ''data-hide-on'' und ''data-hide-off'' sind reguläre Ausdrücke. Um die Anzeige zu aktivieren, wenn eine Bedingung nicht zutrifft, ist für ''data-hide-off'' ein Schema <code>(?!.*MUSTER).*</code> zu verwenden, resp. <code>(?!.*MUSTER1|MUSTER2).*</code>, wenn mehrere Bedinungen zutreffen können; für ''data-hide-on'' entsprechend <code>MUSTER</code> resp. <code>MUSTER1|MUSTER2</code>. <br />
<br />
Im folgenden Beispiel wird ein Eintrag eines [[CALVIEW|CALVIEW-Objekts]] ''Abfalldaten'' nur dann angezeigt, wenn er heute oder morgen aktuell ist, ausgeblendet wird die ganze Gruppe von Widgets über die ID des Elternelements:<br />
<syntaxhighlight lang="html"><br />
<div id="Abfall1"><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_bdate" <br />
data-hide="t_001_daysleftLong" <br />
data-hide-on="(?!.*heute|morgen).*" <br />
data-hide-off="heute|morgen" <br />
data-hideparents="#Abfall1"><br />
</div><br />
<div class="inline" <br />
data-type="label" <br />
data-device="Abfalldaten" <br />
data-get="t_001_summary"><br />
</div><br />
</div><br />
</syntaxhighlight></div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Weather&diff=23081FTUI Widget Weather2017-10-28T16:47:19Z<p>Standarduser: /* Attribute */ Attribut ''data-warn'' hinzugefügt</p>
<hr />
<div>Das [[{{PAGENAME}}|Widget Weather]] ist ein Widget für [[FHEM Tablet UI]], das Bezeichnungen von Wetterlagen in Icons umwandelt. Die Daten können durch FHEM-Module wie [[PROPLANTA]], [[OPENWEATHER]] und [[Weather]] bereitgestellt werden. Icon-Sets [http://www.alessioatzeni.com/meteocons/ meteocons] und [https://kleinklima.de/ kleinklima] werden mit FHEM geliefert.<br />
<br />
<gallery><br />
File:FTUI_Widget_Weather_01.png<br />
File:FTUI_Widget_Weather_02.png<br />
</gallery><br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, welches die Wetterdaten bereitstellt||||data-device="Proplanta"<br />
|-<br />
|'''data-get'''||Reading, dessen Wettertext in ein Icon umgewandelt werden soll||||data-get="fc0_weatherDay"<br />
|-<br />
|'''data-warn'''||Reading, dessen Inhalt als rotes Kennzeichen angezeigt wird.||||<br />
|-<br />
|'''data-imageset'''||Bildersammlung, mit der die Wetterlagen dargestellt werden. Derzeit: [http://www.alessioatzeni.com/meteocons/ meteocons], [https://kleinklima.de/ kleinklima] und [https://erikflowers.github.io/weather-icons/ weathericons]||meteocons||data-imageset="kleinklima"<br />
|-<br />
|-<br />
|||Für data-imageset="weathericons" zusätzlich||||<br />
|-<br />
|'''data-device-type'''||"YahooCode" oder "WindDirection" (Wert in Grad)||||data-device-type="WindDirection"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{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|grande}}{{FTUI Klasse|gigantic}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}<br />
|}<br />
<br />
==Hinweise==<br />
Die über die Devices verfügbaren umfangreichen Wetterdaten liefern eine wesentlich differenziertere Beschreibung der Wetterlage, als mit diesem Widget darstellbar ist. Sinnvoll ist deshalb eine Kombination des Weather-Widgets mit [[FTUI_Widget_Label]], ggf. auch [[FTUI_Widget_Wind_direction]].<br />
<br />
Um auf hellen Hintergründen meteocons-Icons besser erkennbar darzustellen, kann ein Webkit-Filter verwendet werden. Statt wie hier direkt im HTML, kann der Filter auch in einer eigenen CSS-Datei definiert werden. <br />
<syntaxhighlight lang="html"><br />
<div class="cell big" data-type="weather" data-device="Wetter" data-get="condition" data-imageset="meteocons" style="-webkit-filter: sepia(100%); filter: sepia(100%);"></div><br />
</syntaxhighlight><br />
<br />
Gelegentlich wird berichtet, dass einzelne Bilder nicht optimal auf die readings abgestimmt seien. In solchen Fällen bitte im Forum posten, damit die Zuordnungen verbessert werden können.<br />
<br />
==Beispiele==<br />
===Einfaches Symbol mit Min- und Max-Temperatur===<br />
[[Datei:FTUI_Widget_Weather_03.png|100px]]<br />
<syntaxhighlight lang="html"><br />
<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherDay" data-imageset="meteocons" class="cell"></div><br />
<div data-type="label" data-device="Proplanta" data-get="fc0_weatherDay" class="cell"></div><br />
<div data-type="label" data-device="Proplanta" data-get="fc0_tempMin" data-unit="%B0C%0A" class="cell inline"></div><br />
<div data-type="label" data-device="Proplanta" data-get="fc0_tempMax" data-unit="%B0C%0A" class="cell inline"></div><br />
</syntaxhighlight><br />
<br />
===Detaillierte Wetteranzeige mit Vorhersage für den Folgetag===<br />
[[Datei:FTUI_Widget_Weather_04.png|400px]]<br />
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%"<br />
!style="text-align: left;"|index.html<br />
|-<br />
| class="mw-collapsible-content" |<br />
<syntaxhighlight lang="html"><br />
<li data-row="1" data-col="1" data-sizex="4" data-sizey="4"><br />
<div class="sheet"><br />
<div class="row"> <br />
<div class="col-1-3"><br />
<div data-type="label" class="cell top-space narrow">morgens</div><br />
<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherMorningIcon" data-imageset="kleinklima" class="cell"></div><br />
<div data-type="label" data-device="Proplanta" data-get="fc0_weatherMorning" class="cell top-narrow"></div><br />
<div data-type="label" data-device="Proplanta" data-get="fc0_temp06" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div><br />
</div><br />
<div class="col-1-3"><br />
<div data-type="label" class="cell top-space narrow">mittags</div><br />
<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="cell"></div><br />
<div data-type="label" data-device="Proplanta" data-get="fc0_weatherDay" class="cell top-narrow"></div><br />
<div data-type="label" data-device="Proplanta" data-get="fc0_temp12" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div><br />
</div><br />
<div class="col-1-3"><br />
<div data-type="label" class="cell top-space narrow">abends</div><br />
<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherEveningIcon" data-imageset="kleinklima" class="cell"></div><br />
<div data-type="label" data-device="Proplanta" data-get="fc0_weatherEvening" class="cell top-narrow"></div><br />
<div data-type="label" data-device="Proplanta" data-get="fc0_temp18" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div><br />
</div><br />
</div><br />
</div><br />
<br />
<div class="container top-space-3x"><br />
<div data-type="label" class="cell bigger darker">Morgen</div><br />
</div><br />
<br />
<div class="sheet"><br />
<div class="row"> <br />
<div class="col-1-3"><br />
<div data-type="label" class="cell top-space darker">morgens</div><br />
<div data-type="weather" data-device="Proplanta" data-get="fc1_weatherMorningIcon" data-imageset="kleinklima" class="cell half-transparent"></div><br />
<div data-type="label" data-device=”Proplanta" data-get="fc1_weatherMorning" class="cell top-narrow darker"></div><br />
<div data-type="label" data-device="Proplanta" data-get="fc1_temp06" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#a3a3fc","grey"]'></div><br />
</div><br />
<div class="col-1-3"><br />
<div data-type="label" class="cell top-space darker">mittags</div><br />
<div data-type="weather" data-device="Proplanta" data-get="fc1_weatherDayIcon" data-imageset="kleinklima" class="cell half-transparent"></div><br />
<div data-type="label" data-device="Proplanta" data-get="fc1_weatherDay" class="cell top-narrow darker"></div><br />
<div data-type="label" data-device="Proplanta" data-get="fc1_temp12" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#a3a3fc","grey"]'></div><br />
</div><br />
<div class="col-1-3"><br />
<div data-type="label" class="cell top-space darker">abends</div><br />
<div data-type="weather" data-device="Proplanta" data-get="fc1_weatherEveningIcon" data-imageset="kleinklima" class="cell half-transparent"></div><br />
<div data-type="label" data-device="Proplanta" data-get="fc1_weatherEvening" class="cell top-narrow darker"></div><br />
<div data-type="label" data-device="Proplanta" data-get="fc1_temp18" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#a3a3fc","grey"]'></div><br />
</div><br />
</div><br />
</div><br />
</li><br />
</syntaxhighlight><br />
|}<br />
<br />
<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=Departure&diff=22861Departure2017-10-07T17:44:23Z<p>Standarduser: neue URLs eingefügt</p>
<hr />
<div>Departure ist ein Modul zur Anzeige der Abfahrtszeiten von Bahn, Bus, Zug und Fähre des öffentlichen Personennahverkehrs (ÖPNV).<br />
Diese Seite basiert auf dem Beitrag im Forum https://forum.fhem.de/index.php?topic=48255.0 (von sbierman). Mittlerweile gibt es hierzu ein noch inoffizielles Modul https://forum.fhem.de/index.php?topic=60046.0 (von uniqueck).<br />
Zusätzlich gibt es ein Widget für die FHEM Tablet UI (FTUI) https://forum.fhem.de/index.php?topic=48255.0 (von setstate).<br />
Diese Seite sollte angepasst/überarbeitet werden, wenn das Modul 98_departure offiziell eingecheckt ist.<br />
<br />
== Vorbereitung ==<br />
Um die Abfahrtzeiten zu ermitteln wird der REST-Wrapper von sbiermann genutzt, der auf dem Dienst für die Android App "Öffi" basiert.<br />
Für die Spätere Abfrage wird der Provider und die ID der Haltestelle benötigt. Beides kann wie folgt ermittelt werden.<br />
<br />
<b>1. Ermitteln welche Provider gibt es und welcher ist für mich zuständig.</b><br />
<pre>https://transport.stefan-biermann.de/publictransportapi/rest/provider</pre><br />
<br />
Dieses liefert als Antwort im JSON Format:<br />
<pre><br />
[{"name":"Sncb","aClass":"SncbProvider"},{"name":"Vbn","aClass":"VbnProvider"},{"name":"Wien","aClass":"WienProvider"},{"name":"Linz","aClass":"LinzProvider"},{"name":"Vrr","aClass":"VrrProvider"},{"name":"Oebb","aClass":"OebbProvider"},{"name":"Gvh","aClass":"GvhProvider"},{"name":"Ns","aClass":"NsProvider"},{"name":"Vao","aClass":"VaoProvider"},{"name":"Tfi","aClass":"TfiProvider"},{"name":"Vgn","aClass":"VgnProvider"},{"name":"Mvg","aClass":"MvgProvider"},{"name":"Pl","aClass":"PlProvider"},{"name":"Vgs","aClass":"VgsProvider"},{"name":"Nasa","aClass":"NasaProvider"},{"name":"Vbb","aClass":"VbbProvider"},{"name":"Ivb","aClass":"IvbProvider"},{"name":"Nvv","aClass":"NvvProvider"},{"name":"Mvv","aClass":"MvvProvider"},{"name":"Vagfr","aClass":"VagfrProvider"},{"name":"Vvv","aClass":"VvvProvider"},{"name":"Sf","aClass":"SfProvider"},{"name":"Vms","aClass":"VmsProvider"},{"name":"Sbb","aClass":"SbbProvider"},{"name":"Bsvag","aClass":"BsvagProvider"},{"name":"Jet","aClass":"JetProvider"},{"name":"Septa","aClass":"SeptaProvider"},{"name":"Bvb","aClass":"BvbProvider"},{"name":"Mersey","aClass":"MerseyProvider"},{"name":"Vvs","aClass":"VvsProvider"},{"name":"Nvbw","aClass":"NvbwProvider"},{"name":"Se","aClass":"SeProvider"},{"name":"Svv","aClass":"SvvProvider"},{"name":"Bahn","aClass":"BahnProvider"},{"name":"Vrs","aClass":"VrsProvider"},{"name":"Stockholm","aClass":"StockholmProvider"},{"name":"Vmv","aClass":"VmvProvider"},{"name":"Stv","aClass":"StvProvider"},{"name":"Sydney","aClass":"SydneyProvider"},{"name":"Paris","aClass":"ParisProvider"},{"name":"Dsb","aClass":"DsbProvider"},{"name":"Rt","aClass":"RtProvider"},{"name":"Dub","aClass":"DubProvider"},{"name":"Bvg","aClass":"BvgProvider"},{"name":"Paca","aClass":"PacaProvider"},{"name":"Vor","aClass":"VorProvider"},{"name":"FrenchSouthWest","aClass":"FrenchSouthWestProvider"},{"name":"Avv","aClass":"AvvProvider"},{"name":"Zvv","aClass":"ZvvProvider"},{"name":"Nri","aClass":"NriProvider"},{"name":"Invg","aClass":"InvgProvider"},{"name":"Eireann","aClass":"EireannProvider"},{"name":"Vbl","aClass":"VblProvider"},{"name":"Vvo","aClass":"VvoProvider"},{"name":"Sh","aClass":"ShProvider"},{"name":"Kvv","aClass":"KvvProvider"},{"name":"Bayern","aClass":"BayernProvider"},{"name":"Atc","aClass":"AtcProvider"},{"name":"Lu","aClass":"LuProvider"},{"name":"Italy","aClass":"ItalyProvider"},{"name":"Vvm","aClass":"VvmProvider"},{"name":"Met","aClass":"MetProvider"},{"name":"Ding","aClass":"DingProvider"},{"name":"Tlem","aClass":"TlemProvider"},{"name":"Vvt","aClass":"VvtProvider"},{"name":"Vrn","aClass":"VrnProvider"}]<br />
</pre><br />
Das was bei Name steht wird verwendet, der Wert aClass ist intern und braucht hier nicht weiter verwendet werden. Im Beispiel haben die Verkehrsbetriebe Stuttgart (VVS) den Namen "Vvs".<br />
<br />
<b>2. Ermitteln der StationId für die Haltestelle deren Abfahrtszeiten ich gerne haben möchte. In diesem Beispiel die Haltstelle "SSB-Zentrum"</b><br />
<pre><br />
https://transport.stefan-biermann.de/publictransportapi/rest/station/suggest?q=SSB-Zentrum&provider=Vvs<br />
</pre><br />
Dieses liefert als Antwort im JSON Format:<br />
<pre><br />
[{"type":"STATION","id":"5000350","lat":48726856,"lon":9129721,"place":"Stuttgart","name":"SSB-Zentrum","products":null,"lonAsDouble":9.129721,"latAsDouble":48.726856,"identified":true},{"type":"STATION","id":"5002601","lat":48722757,"lon":9129058,"place":"Stuttgart","name":"Industriestraße (SSB-Zentrum)","products":null,"lonAsDouble":9.129058,"latAsDouble":48.722757,"identified":true}]<br />
</pre><br />
Wie man sehen kann gibt es mehrere Treffer für SSB-Zentrum. Es wird aber nur der Typ "STATION" benötigt und somit lautet die StationId "5000350".<br />
<br />
<b>3. Abfrage der Departure Zeiten für die Haltestelle "SSB-Zentrum". Diese liefert die Daten im passenden Format für das zugehörige departure Widget für FTUI</b><br />
<pre><br />
https://transport.stefan-biermann.de/publictransportapi/rest/departureFHEM?from=6930306&provider=Vvs<br />
</pre><br />
dieses liefert als Antwort im passenden Format:<br />
<pre><br />
[["U8","Vaihingen","3"],["U12","Dürrlewang","6"],["U8","Ostfildern","5"],["U3","Vaihingen","6"],["U12","Hallschlag","7"],["U3","Plieningen","9"],["U8","Vaihingen","12"],["U12","Dürrlewang","17"],["U8","Waldau","15"],["U3","Vaihingen","16"]]<br />
</pre><br />
Die Zeiten sind immer inklusive Verspätung angegeben, sofern der Provider diese Daten mit sendet.<br />
<br />
== Einbindung in FHEM ==<br />
Wie in der Einleitung erwähnt gibt es aktuell zwei Wege, die Abfahrtszeiten einzubinden: über HTTPMOD oder über das noch inofizielle Modul 98_departure<br />
<pre><br />
define myDeparture HTTPMOD none 0<br />
attr myDeparture get01Name SSB-Zentrum<br />
attr myDeparture get01URL https://transport.stefan-biermann.de/publictransportapi/rest/departureFHEM?from=6930306&provider=Vvs<br />
attr myDeparture get01Regex (\[\[.*\]\]).*<br />
attr VAG timeout 30<br />
</pre><br />
Es können mehrere Haltestellen in einem Device hinterlegt werden, hierzu einfach die drei Attribute get01Name, get01URL und get01Regex duplizieren und durchnummerieren. Dabei müssen natürlich Name und URL angepasst werden.<br />
Bei dieser Konfiguration erfolgt die Aktualisierung über das FTUI Widget!<br />
<br />
== Links ==<br />
* {{Link2Forum|Topic=48255|LinkText=Forum: Neues FTUI Widget - Departure}}<br />
* [https://forum.fhem.de/index.php?topic=60046.0 Forum: Modul 98_Departure: Bereitstellung von Abfahrtszeiten an einem Bahnhof]<br />
* [[FTUI Widget Departure|Wiki: FHEM Tablet UI - Departure Widget]]<br />
<br />
[[Kategorie:HOWTOS]]<br />
[[Kategorie:Code Snippets]]<br />
[[Kategorie:Modul (Inoffiziell)]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Chart&diff=22835FTUI Widget Chart2017-10-05T18:16:58Z<p>Standarduser: /* Zeitstrahl / Start & Ende auf der X-Achse */ Verbesserung der Beschreibung von Zeitbereichen</p>
<hr />
<div>Das [[{{PAGENAME}}|Chart Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem sich verschiedenste Diagramme darstellen lassen. Die Aneinanderreihung mehrerer Werte eines Device-Readings zu einem zeitlichen Verlauf wird dabei als Graph bezeichnet.<br />
<br />
Es können beliebige Werte dargestellt und entsprechend der Sinnhaftigkeit, oder persönlichem Geschmack, formatiert werden. Farbe und Form der Linien sind je Graph einstellbar, auch wenn mehrere gleichzeitig in einem Diagramm angezeigt werden.<br />
<br />
Jedes Diagramm kann zwei Y-Achsen besitzen. Die primäre Y-Achse (primary) wird auf der linken Seite angezeigt, die sekundäre Y-Achse (secondary) auf der rechten Seite. Beide Achsen können unterschiedlich formatiert werden.<br />
<br />
<gallery><br />
File:Chart_tabletUI.png<br />
Datei:FTUI Widget Chart Stacked.png<br />
Datei:FTUI Widget Chart-fc-Proplanta.png<br />
Datei:Wetterchart2.png<br />
Datei:PieChart.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
! style="width:150px"|Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||Name des FHEM-Device, das die Aktualisierung des Charts triggert||||data-device="WohnzimmerHeizung"<br />
|-<br />
|'''data-get'''||Reading, das das Update des Diagramms triggert||'STATE'||<br />
|-<br />
|'''data-logdevice'''||Name des Log-Device, das dargestellt werden soll, oder ein Array, um mehrere Werte in einem Diagramm darzustellen||||data-logdevice="FileLog_WohnzimmerHeizung"<br />
|-<br />
|'''data-logfile'''|| Name des Log-Files, aus dem die Daten entnommen werden sollen (oder Array)||'-' = aktuelle Datei||data-logfile="WohnzimmerHeizung-2015.log"<br />
|-<br />
|'''data-columnspec'''||Ermittelt den Wert aus dem Log-File, der angezeigt werden soll (oder Array)||||data-columnspec="4:meas.*"<br />
|-<br />
|'''data-style'''||Stil, wie die Graph-Linien dargestellt werden sollen (z.B. 'SVGplot l0' oder 'ftui l0dash'), oder ein Array, wenn mehrere Linien unterschiedlich dargestellt werden sollen (siehe [[#Aussehen_der_Linien|Hinweise]])||||<br />
|-<br />
|'''data-ptype'''||Form, wie die Graphen dargestellt werden sollen (z.B. 'lines', 'cubic' oder 'fa-cog'), oder ein Array (siehe [[#Form_der_Linien|Hinweise]])||'lines'||<br />
|-<br />
|'''data-uaxis'''||Name der Achse, die verwendet werden soll ('primary' = links, oder 'secondary' = rechts), oder ein Array||'primary'||<br />
|-<br />
|'''data-legend'''||Bezeichnung des Graphen (wird in Legende und am Cursor angezeigt), oder ein Array||||<br />
|-<br />
|'''data-minvalue'''||Minimaler Wert, der auf der linken Y-Achse ('primary') angezeigt werden soll. 'auto' = automatische Berechnung||'10'||<br />
|-<br />
|'''data-maxvalue'''||Maximaler Wert, der auf der linken Y-Achse ('primary') angezeigt werden soll. 'auto' = automatische Berechnung||'30'||<br />
|-<br />
|'''data-minvalue_sec'''||Minimaler Wert, der auf der rechten Y-Achse ('secondary') angezeigt werden soll. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-maxvalue_sec'''||Maximaler Wert, der auf der rechten Y-Achse ('secondary') angezeigt werden soll. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-xticks'''||Abstand zwischen den vertikalen Hilfslinien (bezogen auf die X-Achse) in Minuten. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-yticks'''||Abstand zwischen den horizontalen Hilfslinien (bezogen auf die linke Y-Achse). Kann auch ein Array mit Werte-Paaren enthalten, um die Linien mit Text zu beschriften.||'auto'||data-yticks='[[0,"open"],[1,"closed"]]'<br />
|-<br />
|'''data-yticks_sec'''||Abstand zwischen den horizontalen Hilfslinien (bezogen auf die rechte Y-Achse). Kann auch ein Array mit Werte-Paaren enthalten, um die Linien mit Text zu beschriften.||'auto'||data-yticks='[[0,"open"],[1,"closed"]]'<br />
|-<br />
|'''data-yticks_prio'''||Legt fest, ob die horizontalen Hilfslinien der linken (primary) oder der rechten (secondary) Y-Achse zugeordnet werden sollen||||data-yticks_prio='secondary'<br />
|-<br />
|'''data-ytype'''||Legt fest, ob die primäre y Achse logarithmisch sein soll (wert "log")||||data-ytype="log"<br />
|-<br />
|'''data-ytype_sec'''||Legt fest, ob die sekundäre y Achse logarithmisch sein soll (wert "log")||||data-ytype_sec="log"<br />
|-<br />
|'''data-y_margin'''|||Gibt die Möglichkeit, Abstände zwischen den Graphen und dem oberen Rand des Plots zu definieren (Einheit Pixel). Falls der Wert skalar ist, werden oben und unten die gleichen Abstände eingehalten. Falls ein 2D Array angegeben wird, können die Werte unten (erster Wert im Array) und oben (zweiter Wert im Array) getrennt festgelegt werden||"0"|||data-y_margin='["10","20"]'<br />
|-<br />
|'''data-y_margin_sec'''|||Gibt die Möglichkeit, Abstände zwischen den Graphen und dem oberen Rand des Plots zu definieren (Einheit Pixel). Falls der Wert skalar ist, werden oben und unten die gleichen Abstände eingehalten. Falls ein 2D Array angegeben wird, können die Werte unten (erster Wert im Array) und oben (zweiter Wert im Array) getrennt festgelegt werden||"0"|||data-y_margin='["10","20"]'<br />
|-<br />
|'''data-daysago_start'''||Anzahl der vergangenen Tage, wo das Diagramm beginnen soll. '0' = Beginn heute 0:00 Uhr. (siehe [[#Zeitstrahl_.2F_Start_.26_Ende_auf_der_X-Achse|Hinweise]])||'0'||<br />
|-<br />
|'''data-daysago_end'''||Anzahl der vergangenen Tage, wo das Diagramm enden soll. '-1' = Ende heute 24:00 Uhr. (siehe [[#Zeitstrahl_.2F_Start_.26_Ende_auf_der_X-Achse|Hinweise]])||'-1'||<br />
|-<br />
|'''data-nofulldays'''||Aktiviert/deaktiviert die Rundung der X-Achse auf ganze Tage. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-timeformat'''||Zeitformat für die Anzeige an der X-Achse (siehe [[#Zeitformat_der_X-Achse|Hinweise]])||||<br />
|-<br />
|'''data-ytext'''||Text, der neben der linken Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-ytext_sec'''||Text, der neben der rechten Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-yunit'''||Einheit, die an der linken Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-yunit_sec'''||Einheit, die an der rechten Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-crosshair'''||Aktiviert/deaktiviert den Fadenkreuz-Cursor. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-cursorgroup'''||Zahl zur Gruppierung der Werte am Fadenkreuz-Cursor ([[#Fadenkreuz-Cursor|Hinweise]])||||<br />
|-<br />
|'''data-scrollgroup'''||Zahl zur Gruppierung der Graphen beim Bewegen und Zoomen. Alle Linien mit der selben Zahl werden miteinander gekoppelt und bewegen sich gemeinsam.||||<br />
|-<br />
|'''data-showlegend'''||Aktiviert/deaktiviert die Anzeige der Legene. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-legendpos'''||Array von zwei Werten, die die horizontale und vertikale Position der Legende festlegen ([[#Legende|Hinweise]])||'["top","right"]'||<br />
|-<br />
|'''data-legend_horiz'''||legt fest, dass die Legendeneinträge horizontal angeordnet sind (anstatt vertikal wie im default Fall)||false||data-legend_horiz="true"<br />
|-<br />
|'''data-width'''||Breite des Diagramms (in % oder px)||||<br />
|-<br />
|'''data-height'''||Höhe des Diagramms (in % oder px)||||<br />
|-<br />
|'''data-graphsshown'''||Aktiviert/deaktiviert die initiale Anzeige von Graphen. Binärwert ('true' oder 'false'). Array, wenn mehrere Linien angezeigt werden sollen.||||<br />
|-<br />
|'''data-ddd'''||Einstellung für die 3D-Drehung ([[#3-dimensionale_Drehung|Hinweise]])||||data-ddd='["40","60","0"]'<br />
|-<br />
|'''data-dddspace'''||Abstand zwischen zwei Graphen, wenn die 3D-Anzeige aktiviert wurde (px)||'15'||<br />
|-<br />
|'''data-dddwidth'''||Breite, bzw. Tiefe der Graphen, wenn diese 3-dimensional angezeigt werden (px)||'10'||<br />
|-<br />
|'''data-title'''||Titel, der über dem Diagramm angezeigt werden soll. Der Inhalt kann auch dynamisch erzeugt werden ([[#Diagrammtitel|Hinweise]])||||<br />
|-<br />
|'''data-prefetch'''||Legt fest, ob zusätzliche Daten rechts und links des Plots im Hintergrund vom Server geholt werden sollen||false||data-prefetch="true"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|fullsize}}{{FTUI Klasse|noticks}}{{FTUI Klasse|nobuttons}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}<br />
|}<br />
<br />
<br />
Folgende Widget-spezifsche Klassen können zusätzlich in einer eigenen CSS-Datei definiert werden:<br />
<br />
{|class="wikitable"<br />
!Klasse<br />
!Beschreibung<br />
|-<br />
|'''chart-background'''||Hintergrundfarbe des Diagramms<br />
|-<br />
|'''buttons'''||Größe und Farbe der Buttons<br />
|-<br />
|'''text.axes'''||Generelle Schriftart und Farbe der Achsen<br />
|-<br />
|'''gridlines'''||Generelle Farbe und Größe der Gitternetzlinien<br />
|-<br />
|'''xaxis'''||Schriftart, Größe und Farbe der X-Achse<br />
|-<br />
|'''yaxis'''||Schriftart, Größe und Farbe der Y-Achse<br />
|-<br />
|'''xticks'''||Schriftart, Größe und Farbe der X-Achse (Zwischenlinien)<br />
|-<br />
|'''yticks'''||Schriftart, Größe und Farbe der Y-Achse (Zwischenlinien)<br />
|-<br />
|'''crosshair'''||Schriftart, Größe und Vordergrund/Hintergrundfarbe der Momentanwerte am Fadenkreuzcursor<br />
|-<br />
|'''caption'''||Schriftart, Größe und Farbe der Text-Buttons für Legende und Cursor<br />
|-<br />
|'''legend'''||Schriftart, Größe und Farbe der Legende<br />
|}<br />
<br />
Die Standardwerte sind in der Datei <code>css/ftui_chart.css</code> zu finden.<br />
<br />
==Datenquellen==<br />
Beim Chart-Widget können die gleichen Datenquellen genutzt werden, die auch für SVG-Plots verwendet werden können:<br />
# [[FileLog]]: Verlaufsdaten einer Textdatei entnehmen<br />
# [[DbLog]]: Verlaufsdaten einer Datenbank entnehmen<br />
# [[LogProxy]]: Daten dynamisch berechnet<br />
<br />
===FileLog===<br />
Um [[FileLog]] zu nutzen, wird als '''data-logdevice''' das FHEM-Device für das FileLog angegeben. In der Regel entstehen hier im Laufe der Zeit mehrere Log-Dateien. Name und Anzahl sind von der Definition abhängig - meist wird jeden Monat oder jedes Jahr eine neue Datei angelegt. Die gewünschte Datei kann mit '''data-logfile''' ausgewählt werden. Möchte man stets die aktuelle Datei verwenden (macht vor allem dann Sinn, wenn man die neusten Daten anzeigen will), kann das Attribut weggelassen, oder explizit <code>-</code> eingetragen werden. Zuletzt wird '''data-columnspec''' benötigt, um die gewünschten Daten zu in der Logdatei zu identifizieren. Hier wird die Spalte, in der die Daten stehen, gefolgt von Doppelpunkt und Readingname angegeben.<br />
<br />
Für ein Heizungsthermostat von Homematic mit dem Namen ''DG.wz.HZ.Heizungsventil'' ergibt sich somit beispielhaft folgende Definition, um gemessene Temperatur, Sollwert und Ventilstellung im Diagramm darzustellen:<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="FileLog_DG.wz.HZ.Heizungsventil"<br />
data-logfile="-"<br />
data-columnspec='["4:measured-temp","4:desired-temp","4:actuator"]'<br />
...><br />
</div><br />
</syntaxhighlight><br />
<br />
Sollen Daten von unterschiedlichen Geräten in einem Diagramm angezeigt werden, muss '''data-logdevice''' als Array nach dem Schema <code>data-logdevice='["<Logdatei_1>","<Logdatei_2>","<Logdatei_3>"]'</code> definiert werden. Für jeden Eintrag in '''data-columnspec''' muss es auch den passenden Eintrag in '''data-logdevice''' geben (auch die Reihenfolge ist relevant).<br />
<br />
===DbLog===<br />
Um die Daten aus [[DbLog]] anzeigen zu können, werden die gleichen Attribute verwendet und mit für die Datenbank angepassten Werten beschrieben. Bei '''data-logdevice''' das FHEM-Device für die Datenbank angegeben. Im nachfolgenden Beispiel heißt diese <code>logdb</code> und besitzt wie üblich zwei Tabellen: <code>current</code> und <code>history</code> (der zeitliche Verlauf liegt in letzterer). Der Tabellenname wird bei '''data-logfile''' eingetragen. Da die Daten in der Datenbank etwas anders abgelegt werden, muss auch '''data-columnspec''' entsprechend angepasst werden. Statt der Spalte wird hier das FHEM-Device, gefolgt von Doppelpunkt und Readingname angegeben.<br />
<br />
Für das oben beschriebene Homematic-Heizungsthermostat ergibt sich dann folgende Definition, um die gleichen Daten aus einer Datenbank, statt einem LogFile zu lesen:<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="logdb"<br />
data-logfile="HISTORY"<br />
data-columnspec='["DG.wz.HZ.Heizungsventil:measured-temp","DG.wz.HZ.Heizungsventil:desired-temp","DG.wz.HZ.Heizungsventil:actuator"]'<br />
...><br />
</div><br />
</syntaxhighlight><br />
<br />
Für die Anzeige von unterschiedlichen Geräten in einem Diagramm, muss nur '''data-columnspec''' entsprechend angepasst werden, solange sich alle Daten in der Datenbank befinden.<br />
<br />
===LogProxy===<br />
Um die Daten mittels [[LogProxy]] berechnen und anzeigen zu können, muss in FHEM ein LogProxy-Device definiert sein:<br />
<br />
<pre><br />
define myLogProxy logProxy<br />
</pre><br />
<br />
Weitere Einstellungen am LogProxy sind nicht nötig, die bloße Existenz reicht.<br />
<br />
Bei '''data-logdevice''' wird das FHEM-Device für den LogProxy angegeben. Im nachfolgenden Beispiel heißt dieses <code>myLogProxy</code>. Das Attribut '''data-logfile''' wird für LogProxy nicht benötigt. Befinden sich nur LogProxy-Werte im Diagramm kann das Attribut komplett entfallen. Sollen weitere Werte angezeigt werden, bleibt die Definition im Array einfach leer.<br />
<br />
Im Attribut '''data-columnspec''' wird eine Formel angegeben, wie die Werte berechnet werden sollen. Hier können die Formeln 1:1 von einem eventuell vorhandenen SVG-Plot übernommen werden. '''Dabei gibt es jedoch folgendes zu beachten:''' Befindet sich die Formel in einem Array, dürfen die Formeln keine Anführungszeichen (<code>"</code>) beinhalten. Stattdessen müssen sie als escapter Ascii-Code (<code>\\x22</code>) eingefügt werden.<br />
<br />
Das nachfolgende Beispiel zeigt, wie Vorhersagewerte aus einem FHEM-Device vom Typ Proplanta (Name hier <code>AU.xx.WE.Proplanta</code>) angezeigt werden können.<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22temp_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
...><br />
</div><br />
</syntaxhighlight><br />
<br />
'''Auch alle anderen Funktionen, die [[LogProxy]] bietet, können hier angewendet werden.'''<br />
<br />
==Hinweise==<br />
===Aktualisierung des Charts===<br />
Damit der Refresh des Charts funktioniert, muss auch ein Device angegeben werden, der das Refresh triggert. Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von '''data-get''' ändert.<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="chart"<br />
data-device="WohnzimmerHeizung"<br />
data-logdevice="FileLog_WohnzimmerHeizung"<br />
...><br />
</div><br />
</syntaxhighlight><br />
<br />
===Aussehen der Linien===<br />
Mit dem Attribut '''data-style''' kann das Aussehen der Linien des jeweiligen Graphen verändert werden. Hierfür können die Standard-FHEM-Styles verwendet werden. Dazu wird das Attribut mit <code>SVGplot</code>, gefolgt von einem Leerzeichen und der gewünschten Farbe/Stil befüllt. Es existieren jedoch auch noch weitere, an FTUI angepasste Styles, zu finden in der CSS-Datei <code>css/ftui_chart.css</code>. Um diese zu verwenden, wird das Attribut mit <code>ftui</code>, gefolgt von einem Leerzeichen und der gewünschten Farbe/Stil befüllt. Eigene Styles können zum Beispiel in der Datei <code>css/fhem-table-ui-user.css</code> definiert werden.<br />
<br />
Folgende Übersicht zeigt die im Standard verfügbaren '''Farben''', alle Abbildungen sind mit im FTUI-Style entstanden:<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f0.png|thumb|none|150px|Farbe "l0"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f1.png|thumb|none|150px|Farbe "l1"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f2.png|thumb|none|150px|Farbe "l2"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f3.png|thumb|none|150px|Farbe "l3"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f4.png|thumb|none|150px|Farbe "l4"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f5.png|thumb|none|150px|Farbe "l5"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f6.png|thumb|none|150px|Farbe "l6"]] </li><br />
</ul></div><br />
<br />
Die Angabe zur Farbe kann dann mit der Linienart kombiniert werden. Dazu stehen folgende '''Stile''' zur Verfügung:<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-normal.png|thumb|none|225px|Darstellung in 2D: Stil "normal"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-dot.png|thumb|none|225px|Darstellung in 2D: Stil "dot"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-dash.png|thumb|none|225px|Darstellung in 2D: Stil "dash"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-fill.png|thumb|none|225px|Darstellung in 2D: Stil "fill"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-sym.png|thumb|none|225px|Darstellung in 2D: Stil "sym"]] </li><br />
</ul></div><br />
<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-normal.png|thumb|none|225px|Darstellung in 3D: Stil "normal"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-dot.png|thumb|none|225px|Darstellung in 3D: Stil "dot"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-dash.png|thumb|none|225px|Darstellung in 3D: Stil "dash"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-fill.png|thumb|none|225px|Darstellung in 3D: Stil "fill"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-sym.png|thumb|none|225px|Darstellung in 3D: Stil "sym"]] </li><br />
</ul></div><br />
<br />
Farbe und Stil werden kombiniert (zusammengeschrieben) beim Attribut '''data-style''' angegeben, sodass sich beispielsweise für eine graue Punktlinie folgendes ergibt: <code>data-style="ftui l1dot"</code>.<br />
Um die Darstellung als normale Linie zu erhalten, darf im Gegensatz zu den anderen Linienformen der Stil <code>normal</code> nicht angegeben werden. Für eine einfache graue Linie ist also die Angabe <code>data-style="ftui l1"</code> korrekt, wohingegen <code>data-style="ftui l1normal"</code> zu einer fehlerhaften Anzeige führt.<br />
<br />
'''Hinweis:''' Der Stil ''sym'' ist speziell dafür geeignet, Symbole statt Linien zu zeichnen. Dazu kann beim Attribut '''data-ptype''' als Linienform ein beliebiges Font-Awsome-, oder Open Automation-Icon angegeben werden. Alle in diesem Abschnitt enthaltenen Abbildungen sind mit <code>data-ptype="lines"</code> entstanden.<br />
<br />
===Form der Linien===<br />
Das Attribut '''data-ptype''' beeinflusst die Form der Linien. Hier sind folgende Werte möglich:<br />
<br />
* <code>lines</code><br />
* <code>steps</code><br />
* <code>fsteps</code><br />
* <code>histeps</code><br />
* <code>bars</code><br />
* <code>ibars</code><br />
* <code>cubic</code><br />
* <code>quadratic</code><br />
* <code>quadraticSmooth</code><br />
<br />
Zusätzlich ist es möglich, Symbole anzeigen zu lassen. Unterstützt werden Font-Awesome ('fa-...'), Open Automation ('oa-...') und FHEM-Symbole ('fs-...')). Damit die Symbole korrekt angezeigt werden, muss im Attribut '''data-style''' der Stil <code>sym</code> gewählt werden, da sonst nur Punkte, statt der Symbole gezeichnet werden.<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="FileLog_DG.wz.HZ.Heizungsventil"<br />
...<br />
data-style="ftui l1sym"<br />
data-ptype="fa-cog"<br />
...><br />
</div><br />
</syntaxhighlight><br />
<br />
Die Größe der Symbole ist in der Datei <code>css/ftui_chart.css</code> auf 12px festgelegt. Dieser Wert kann in einer eigenen CSS-Datei durch Anpassung von <code>stroke-width</code> überschrieben werden.<br />
<br />
<syntaxhighlight lang="css"><br />
.ftui.l0sym { stroke:#DDA400; stroke-width:12px; fill:none; }<br />
.ftui.l1sym { stroke:#BBBBBB; stroke-width:12px; fill:none; }<br />
.ftui.l2sym { stroke:#CC0000; stroke-width:12px; fill:none; }<br />
.ftui.l3sym { stroke:#CCCC00; stroke-width:12px; fill:none; }<br />
.ftui.l4sym { stroke:#33CC33; stroke-width:12px; fill:none; }<br />
.ftui.l5sym { stroke:#33CCCC; stroke-width:12px; fill:none; }<br />
.ftui.l6sym { stroke:#3333CC; stroke-width:12px; fill:none; }<br />
</syntaxhighlight><br />
<br />
'''data-ptype''' kann auch Inhalt im Format <code>'icon:1'</code> verarbeiten. Dann muss der zugehörige Wert in '''data-columnspec''' den Pfad zu einem Icon (z.B. für Wettervorhersagen) beinhalten. Der Y-Wert wird dann vom ersten Graphen übernommen. Weitere Ausführungen hierzu im Beispiel [[#Darstellung der Wetter Icons im Diagramm]]. <br />
<br />
===Stapeln von Linien===<br />
Über '''data-ptype''' kann zusätzlich festgelegt werden, ob Graphen übereinander gestapelt werden sollen. <code>data-ptype='lines:1'</code> bedeutet, dass der zugehörige Graph auf den Graph mit der Nummer 1 gestapelt werden soll. So etwas kann z.B. Sinn machen, wenn man den Stromverbrauch einzelner Devices darstellen und zusätzlich sehen will, wie hoch die Summe ist. Beispiel siehe unten.<br />
<br />
[[Datei:FTUI Widget Chart Stacked.png]]<br />
<br />
===Zeitstrahl / Start & Ende auf der X-Achse===<br />
Die Attribute '''data-daysago_start''' und '''data-daysago_end''' dienen der Definition von Anfang und Ende der X-Achse. Im einfachsten Fall wird eine Anzahl an Tagen eingegeben, die sich auf das aktuelle Datum beziehen. Dabei gilt es zu beachten, dass es sich um ''vergangene Tage'' handelt. Das bedeutet, dass Tage in der Vergangenheit als positive Zahl angegeben werden, Tage in der Zukunft hingegen als negative Zahl. Es kann jeweils auch ein fixes Datum (z.B. '2013-10-23') angegeben werden. Uhrzeitangaben werden nur berücksichtigt, wenn '''data-nofulldays='true' ''' verwendet wird.<br />
<br />
'''Relative Zeitangabe in Stunden'''<br /><br />
Zur Ausgabe einer Anzahl an zurückliegenden Stunden bis zum aktuellen Zeitpunkt wird als Startzeitpunkt die Anzahl der Stunden angegeben werden, die angezeigt werden sollen, gefolgt vom Kleinbuchstaben '''h'''. Als Endzeitpunkt wird '''now''' gewählt.<br /><br />
Das nachfolgende Beispiel zeigt die Werte der vergangenen 3 Stunden an:<br />
<syntaxhighlight lang="html"><br />
data-nofulldays="true"<br />
data-daysago_start="3h"<br />
data-daysago_end="now"<br />
</syntaxhighlight><br />
<br />
'''Fester Zeitbereich des heutigen Tages (Stunden)'''<br /><br />
Um ein festes Stundenfenster des heutigen Tages anzuzeigen, werden die absoluten Stundenzahlen mit negativem Vorzeichen, gefolgt vom Großbuchstaben '''H''' angegeben. Wird '''data-daysago_start''' als positiver Wert angegeben, wird die Anzahl der Stunden von heute 0:00 Uhr subtrahiert (siehe Rechenweg weiter unten).<br /><br />
Das Beispiel zeigt den Zeitbereich von heute 5:00 Uhr bis heute 22:00 Uhr:<br />
<syntaxhighlight lang="html"><br />
data-nofulldays="true"<br />
data-daysago_start="-5H"<br />
data-daysago_end="-22H"<br />
</syntaxhighlight><br />
<br />
'''Fester Zeitbereich Tage-übergreifend'''<br /><br />
Die Zeit in Tagen kann als Gleitkommazahl angegeben werden. Damit ist es möglich, Tage und Uhrzeiten zu kombinieren. Die Werte sind dann als Teil eines ganzen Tages, bezogen auf heute 0:00 Uhr zu errechnen und mit <code>.</code> als Teiler anzugeben.<br /><br />
Das nachfolgende Beispiel zeigt einen Zeitbereich von '''gestern 15:00 Uhr''' bis '''morgen 3:00 Uhr'''.<br />
<syntaxhighlight lang="html"><br />
data-nofulldays="true"<br />
data-daysago_start="0.375"<br />
data-daysago_end="-1.125"<br />
</syntaxhighlight><br />
<br />
Für die nachfolgenden Rechenwege sind die Einheiten nur zur Verdeutlichung angegeben. Die Einheiten werden im Attribut nicht angegeben.<br />
<br />
Der Wert für '''GESTERN''' wird wie folgt ermittelt:<br /><br />
Ausgangspunkt ist heute 0:00 Uhr, gestern 15:00 Uhr liegt also 9 Stunden davor. Diese 9 Stunden sind ein <code>9/24 Tag</code> und errechnet sich so:<br />
<pre><br />
1d / 24h = 0.0416666...d/h<br />
0.0416d/h * 9h = 0.375d<br />
</pre><br />
<br />
Der Wert für '''MORGEN''' wird wie folgt ermittelt:<br /><br />
Ausgangspunkt ist wieder heute 0:00 Uhr, morgen 3:00 Uhr liegt dann 27 Stunden dahinter. Der Einfachheit halber werden hier nur die 3 Stunden errechnet und dann ein ganzer Tag addiert:<br />
<pre><br />
1d / 24h = 0.0416666...d/h<br />
0.0416d/h * 3h = 0.125d<br />
<br />
0.125d + 1d = 1.125d<br />
</pre><br />
Da das Attribut Tage in der Vergangenheit erwartet, muss für einen Wert in der Zukunft wieder eine negative Zahl angegeben werden.<br />
<br />
===Zeitformat der X-Achse===<br />
Die Zeitanzeige auf der X-Achse kann sehr flexibel eingestellt werden. Dafür stehen verschiedene Platzhalter zur Verfügung, die durch spezielle Zeichen (<code>-</code>, <code>.</code>, <code>/</code>, <code> </code> (Leerzeichen), <code>:</code>, <code>,</code>, <code>\</code>) getrennt werden. Alle Zeichen werden trotz Escape-Zeichen (<code>\</code>) in der Ausgabe angezeigt.<br />
<br />
Folgende Platzhalter werden unterstützt:<br />
*<code>'mm'</code>: Minuten als zweistellige Zahl<br />
*<code>'hh'</code>: Stunden als zweistellige Zahl<br />
*<code>'dd'</code>: Tag als zweistellige Zahl (Kalenderdatum)<br />
*<code>'MM'</code>: Monat als zweistellige Zahl (z.B. 02 für Februar)<br />
*<code>'MMM'</code>: Monat als dreistellige Abkürzung (z.B. Dec für Dezember)<br />
*<code>'MMMM'</code>: Langname des Monats (z.B. March)<br />
*<code>'ee'</code>: Wochentag als zweistellige Zahl (z.B. 00 für Sonntag)<br />
*<code>'eee'</code>: Wochentag als dreistellige Abkürzung (z.B. Mon für Montag)<br />
*<code>'eeee'</code>: Langname des Wochentags (z.B. Tuesday)<br />
*<code>'yy'</code>: Jahr als zweistellige Zahl (z.B. 16 für 2016)<br />
*<code>'yyyy'</code>: Jahr als vierstellige Zahl (z.B. 2016)<br />
*<code>'LF'</code>: Fügt einen Zeilenumbruch hinzu<br />
<br />
Beispiel: Der String <code>'MMM\LF\yyyy'</code> zeigt <code>'Jan'</code> in der ersten, und <code>'2016'</code> in der zweiten Zeile. <code>'MM.dd 2016'</code> wird zu <code>'03.05 2016'</code>.<br />
<br />
===Fadenkreuz-Cursor===<br />
Der Fadenkreuz-Cursor zeigt die Momentanwerte, indem man ihn über die Graphen bewegt. In Desktop-Browsern reicht einfaches Bewegen des Maus. Unter iOS und Android kann der Cursor wird der Cursor durch einfaches Tippen auf die neue Position bewegt.<br />
<br />
Mit dem Attribut '''data-cursorgroup''' können Graphen gruppiert werden. Am Cursor werden dann die Momentanwerte aller Graphen gleichzeitig angezeigt, die die selbe Zahl besitzen, sobald man die Maus über einen aus der Gruppe bewegt.<br />
<br />
===Legende===<br />
Mit dem Attribut '''data-legendpos''' kann die Position der Legende innerhalb des Diagramms festgelegt werden. Die Position wird mit einem Array, bestehend aus zwei Werten im Format <code>'["<horizontal>","<vertikal>"]'</code> angegeben. Für die horizontale Positionierung sind <code>'left'</code>, <code>'right'</code>, <code>'before'</code>, und <code>'behind'</code>, die vertikale Positionierung <code>'top'</code>, <code>'bottom'</code>, <code>'above'</code>, <code>'below'</code> erlaubt (der Unterschied zwischen <code>'left'</code> und <code>'before'</code> liegt darin, dass im zweiten Fall die Legende nicht in den Zeichenbereich gesetzt wird sondern vor das ganze Chart (entsprechend für <code>'after'</code>, <code>'above'</code> und <code>'below'</code>). Alternativ können auch Zahlen verwendet werden, die die Position in Prozent angeben. Durch verschieben mit der Maus oder durch verschieben mit dem Finger oder Stift auf Touch Devices kann die Legende auch an eine andere Position verschoben werden.<br />
<br />
Wenn die Legende eingeblendet ist, kann mittels Klick auf einen Legendeneintrag der zugehörige Graph ein- und ausgeblendet werden.<br />
<br />
===3-dimensionale Drehung===<br />
'''data-ddd''' ermöglicht, den Graphen 3-dimensional zu drehen. Als Wert wird ein Array mit den 3 Winkeln für x, y und z erwartet, wobei z selbst bisher nicht unterstützt wird.<br />
<br />
Beispiel: <code>data-ddd='["40","60","0"]'</code>. <br />
<br />
Wenn der 3D Modus aktiv ist ('''data-ddd''' gesetzt) sind 2 zusätzliche Parameter verfügbar um das Aussehen der Graphen zu beeinflussen. '''data-dddspace''' gibt an, wie viele pixel der Raum zwischen den einzelnen in z-Richtung hintereinander angeordneten Graphen betragen soll.<br />
'''data-dddwidth''' legt fest, wie viele pixel die einzelnen Graphen tief (oder dick) sein sollen.<br />
<br />
Wenn das Array angegeben wird, erscheinen zwei zusätzliche Buttons im Diagramm, mit denen die Drehung in X- und Y-Richtung verändert werden kann.<br />
<br />
===Diagrammtitel===<br />
Mit dem Attribut '''data-title''' kann dem Diagramm, ähnlich wie in FHEM-SVG-Plots, ein Titel hinzugefügt werden.<br />
<br />
Folgende Platzhalter werden unterstützt:<br />
*<code>'min1'</code>: Minimaler Y-Wert des ersten Graphs<br />
*<code>'max1'</code>: Maximaler Y-Wert des ersten Graphs<br />
*<code>'avg1'</code>: Mittlerer Y-Wert des ersten Graphs<br />
*<code>'cnt1'</code>: Anzahl der dargestellten Einzelwerte im ersten Graph<br />
*<code>'currval1'</code>: Letzter, bzw. aktuellster Y-Wert des ersten Graphs<br />
*<code>'mindate1'</code>: Niedrigster Wert auf der X-Achse des ersten Graphs<br />
*<code>'maxdate1'</code>: Höchster Wert auf der X-Achse vom ersten Graphs<br />
*<code>'currdate1'</code>: Letzter, bzw. aktuellster Wert auf der X-Achse des ersten Graphs<br />
<br />
Durch Einsetzen einer anderen Zahl statt '1' können auch die Werte der anderen Graphen angezeigt werden. Das Weglassen der Zahl bewirkt, dass der jeweils zutreffende Wert automatisch ermittelt wird. Bedeutet: <code>max</code> führt dazu, dass der höchste Wert aller angezeigter Graphen verwendet wird.<br />
<br />
Beispiel: <code>data-title="Min: $data{mindate4}, Max: $data{maxdate4}, Last: $data{currdate4}"</code><br />
<br />
===Buttons im Diagramm===<br />
Es gibt mehrere Buttons, mit denen sich die Anzeige des Diagramms verändern lässt. <code><-</code> und <code>-></code> bewegen die Graphen nach links und rechts. <code>+</code> und <code>-</code> zoomen die Anzeige. <code>legend</code> und <code>cursor</code> schalten die zugehörigen Anzeigen ein und aus.<br />
<br />
==Beispiele==<br />
===Einfaches Diagramm===<br />
Das Beispiel zeigt ein einfaches Diagramm mit 4 unterschiedlich formatierten Graphen, Legende und Momentanwerten am Fadenkreuz-Cursor.<br />
<br />
[[File:Chart_tabletUI.png]]<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="chart"<br />
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'<br />
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'<br />
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'<br />
data-ptype='["lines","histeps","histeps","cubic"]'<br />
data-uaxis='["primary","secondary","secondary","primary"]'<br />
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'<br />
data-yunit="°C"<br />
data-ytext="Temperature"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-yunit_sec="mm"<br />
data-ytext_sec="Rain (mm)"<br />
data-height="250"<br />
data-yticks="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-nofulldays="true"<br />
data-daysago_start="2013-08-13T00:00:00"<br />
data-daysago_end="2013-08-14T00:00:00"<br />
data-cursorgroup="1"<br />
data-scrollgroup="1"<br />
data-xticks="auto"><br />
</div><br />
</syntaxhighlight><br />
<br />
===7-Tage-Wettervorhersage mit Proplanta===<br />
In diesem Beispiel wird gezeigt, wie die Vorhersagewerte von [[PROPLANTA]] in einem Diagramm dargestellt werden können. Da die Werte nicht in einer Datenbank oder einem FileLog vorliegen, müssen sie über [[LogProxy]] verarbeitet werden. Dafür sind einige Vorbereitungen in FHEM nötig.<br />
<br />
[[File:FTUI_Widget_Chart-fc-Proplanta.png|941px]]<br />
<br />
'''1.''' Ein LogProxy-Device muss vorhanden sein:<br />
<pre><br />
define myLogProxy logProxy<br />
</pre><br />
<br />
'''2.''' In der Datei <code>99_myUtils.pm</code> muss folgende Routine hinzugefügt werden, die die Daten bereitstellt:<br />
<syntaxhighlight lang="perl"><br />
#---------------------------------------<br />
# Proplanta LogProxy-Funktion<br />
#---------------------------------------<br />
sub logProxy_proplanta2Plot($$$$;$$) {<br />
my ($device, $fcValue, $from, $to, $fcHour, $expMode) = @_;<br />
my $regex;<br />
my @rl;<br />
<br />
return undef if(!$device);<br />
<br />
if($fcValue =~ s/_$//) {<br />
$regex = "^fc[\\d]+_".$fcValue."[\\d]{2}\$";<br />
}<br />
else {<br />
$regex = "^fc[\\d]+_".$fcValue."\$";<br />
}<br />
<br />
$fcHour = 12 if(!defined $fcHour);<br />
$expMode = "point" if(!defined $expMode);<br />
<br />
if( defined($defs{$device}) ) {<br />
if( $defs{$device}{TYPE} eq "PROPLANTA" ) {<br />
@rl = sort{<br />
my ($an) = ($a =~ m/fc(\d+)_.*/);<br />
my ($bn) = ($b =~ m/fc(\d+)_.*/);<br />
$an <=> $bn or $a cmp $b;<br />
}( grep /${regex}/,keys %{$defs{$device}{READINGS}} );<br />
return undef if( !@rl );<br />
} else {<br />
Log3 undef, 2, "logProxy_proplanta2Plot: $device is not a PROPLANTA device";<br />
return undef;<br />
}<br />
}<br />
<br />
my $fromsec = SVG_time_to_sec($from);<br />
my $tosec = SVG_time_to_sec($to);<br />
my $sec = $fromsec;<br />
my ($h,$fcDay,$mday,$mon,$year);<br />
my $timestamp;<br />
<br />
my $reading;<br />
my $value;<br />
my $prev_value;<br />
my $min = 999999;<br />
my $max = -999999;<br />
my $ret = "";<br />
<br />
# while not end of plot range reached<br />
while(($sec < $tosec) && @rl) {<br />
#remember previous value for start of plot range<br />
$prev_value = $value;<br />
<br />
$reading = shift @rl;<br />
($fcDay) = $reading =~ m/^fc(\d+).*/;<br />
$h = ($reading =~ m/.*(\d\d)$/)?$1:$fcHour;<br />
$value = ReadingsVal($device,$reading,undef);<br />
<br />
($mday,$mon,$year) = split('\.',ReadingsVal($device,"fc".$fcDay."_date",undef));<br />
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, $h, 0, 0);<br />
$sec = SVG_time_to_sec($timestamp);<br />
<br />
# skip all values before start of plot range<br />
next if( SVG_time_to_sec($timestamp) < $fromsec );<br />
<br />
# add first value at start of plot range<br />
if( !$ret && $prev_value ) {<br />
$min = $prev_value if( $prev_value < $min );<br />
$max = $prev_value if( $prev_value > $max );<br />
$ret .= "$from $prev_value\n";<br />
}<br />
<br />
# done if after end of plot range<br />
last if($sec > $tosec);<br />
<br />
$min = $value if( $value < $min );<br />
$max = $value if( $value > $max );<br />
<br />
# add actual controll point<br />
$ret .= "$timestamp $value\n";<br />
<br />
# Log 1, "$timestamp $value -0- $reading";<br />
}<br />
if(($sec < $tosec) && !@rl && ($expMode eq "day")) {<br />
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, 23, 59, 59);<br />
if(SVG_time_to_sec($timestamp) < $tosec) {<br />
$ret .= "$timestamp $value\n";<br />
}<br />
else {<br />
$ret .= "$to $value\n";<br />
}<br />
}<br />
elsif(($sec > $tosec) && ($expMode eq "day")) {<br />
$value = $prev_value + ($value - $prev_value)*(86400 + ($tosec - $sec))/86400;<br />
$ret .= "$to $value\n";<br />
}<br />
return ($ret,$min,$max,$prev_value);<br />
}<br />
</syntaxhighlight><br />
<br />
Anschließend können die Daten im Chart-Widget angezeigt werden. Der Device-Name von Proplanta heißt hier im Beispiel <code>AU.xx.WE.Proplanta</code>.<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
data-style='[<br />
"ftui l6fill",<br />
"ftui l5fill",<br />
"ftui l1fill"<br />
]'<br />
data-ptype='[<br />
"steps",<br />
"quadraticSmooth",<br />
"quadraticSmooth"<br />
]'<br />
data-uaxis='[<br />
"primary",<br />
"secondary",<br />
"secondary"<br />
]'<br />
data-legend='[<br />
"Regen",<br />
"Regenwahrscheinlichkeit",<br />
"Wolken"<br />
]'<br />
data-yunit="mm"<br />
data-ytext="Regen"<br />
data-yunit_sec="%"<br />
data-ytext_sec="Chance auf Regen / Wolken"<br />
data-timeformat="eeee"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-daysago_start = "0"<br />
data-daysago_end = "-7"<br />
data-xticks="1440"<br />
data-yticks="auto"<br />
data-title="7-Tage-Wettervorhersage"<br />
data-showlegend="true"<br />
class="nobuttons fullsize"><br />
</div><br />
</syntaxhighlight><br />
<br />
'''Hilfreiche Links und Quellen zu diesem Beispiel:'''<br />
*[[LogProxy|LogProxy im FHEM-Wiki]]<br />
*{{Link2Forum|Topic=22967|Message=246973|LinkText=Stundengenaue Wettervorhersage (#1) im FHEM-Forum}}<br />
*{{Link2Forum|Topic=22967|Message=334713|LinkText=Stundengenaue Wettervorhersage (#2) im FHEM-Forum}}<br />
<br />
===Darstellung der Wetter Icons im Diagramm===<br />
<br />
[[File:Wetterchart2.png]]<br />
<br />
Wie oben bereits beschrieben, gibt es beim Chart grundsätzlich die Möglichkeit, Icons, welche in Form von URLs in den Logs abgelegt sind oder welche per logProxy generiert werden, darzustellen. Die Icons werden auf genau dem gleichen Weg von FHEM gelesen, wie alle anderen Datenpunkte. Im Folgenden wird ein Beispiel gezeigt, mit dem die im Proplanta Modul als Readings abgelegten Icons per logProxy Funktion gelesen und in ein Chart eingebaut werden könnnen.<br />
Da es beim Proplanta Modul für die ersten 7 Tage nicht das Reading <code>fc#_weatherIcon</code> gibt, sondern mehrere Readings für unterschiedliche Tageszeiten wogegen für die zweiten 7 Tage ausschließlich das Reading <code>fc#_weatherIcon</code> vorhanden ist, sollte per <code>attr device userReading</code> mit folgendem Eintrag dafür gesorgt werden, dass für alle Tage ein Reading <code>fc#_weatherIcon</code> vorhanden ist (alternativ könnten auch 2 Graphen gezeichnet werden, wobei der erste dann nur die ersten 7 Tage enthält und der zweite die letzen 7 Tage, will man nur die ersten 7 Tage darstellen braucht man das userReading nicht unbedingt).<br />
<syntaxhighlight lang="perl"><br />
fc0_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc0_weatherDayIcon","");},<br />
fc1_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc1_weatherDayIcon","");},<br />
fc2_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc2_weatherDayIcon","");},<br />
fc3_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc3_weatherDayIcon","");},<br />
fc4_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc4_weatherDayIcon","");},<br />
fc5_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc5_weatherDayIcon","");},<br />
fc6_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc6_weatherDayIcon","");}<br />
</syntaxhighlight><br />
Um die Icons darzustellen muss ein zusätzlicher Graph definiert werden. Dieser nutzt neben der Columnspec, die die URLs abruft den Parameter <code>data-ptype="icons:#"</code> (# ist eine Zahl und steht für die Nummer, beginnend bei 0 des Graphen, welcher für die y-Position der Icons verwendet werden soll) und den Stil <code>sym</code>. Der Wert für die Symbolgröße sollte z.B. durch eine zusätzliche Definition im File fhem-tablet-ui-user.css in der Form:<br />
<syntaxhighlight lang="css"><br />
/* icon lines */<br />
.ftui.l99icon { stroke:#DDA400; stroke-width:48px; fill:none; }<br />
</syntaxhighlight><br />
angepasst werden.<br />
<br />
Im folgenden ein Beispiel, welches eine Linie für die Maximale Tagestemperatur zeichnet und auf dieser Linie die Wetter Icons darstellt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22tempMax\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
data-style='[<br />
"ftui l99icon",<br />
"ftui l1fill"<br />
]'<br />
data-ptype='[<br />
"icons:1",<br />
"quadraticSmooth"<br />
]'<br />
data-uaxis='[<br />
"primary",<br />
"primary"<br />
]'<br />
data-legend='[<br />
"Wetterbedingung",<br />
"Max. Temperature"<br />
]'<br />
data-yunit="°C"<br />
data-ytext="Temperature (°C)"<br />
data-timeformat="ee\LF\dd.MM"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-daysago_start="-1w"<br />
data-y_margin="20"<br />
data-daysago_end="-3w"<br />
data-xticks="1440"<br />
data-yticks="auto"<br />
data-title="14-Tage-Wettervorhersage"<br />
data-showlegend="true"<br />
class="nobuttons fullsize"><br />
</div><br />
</syntaxhighlight><br />
<br />
===Kuchendiagramme===<br />
In folgendem Beispiel wird gezeigt, wie man ein "Kuchendiagramm" darstellen kann.<br />
<br />
[[File:PieChart.png]]<br />
<br />
Ähnlich wie bei den Beispielen für die Wetter Darstellungen wird hierzu auch wieder logProxy benötigt. Zunächst muss die folgende zusätzliche Funktion in <code>99_myUtils.pm</code> einfügen.<br />
<syntaxhighlight lang="perl"><br />
#---------------------------------------<br />
# Funktion zum Erzeugen der Inputs für Kuchendiagramme<br />
#---------------------------------------<br />
sub logProxy_values2PieChart($$$$;$$) {<br />
my ($device, $reading, $angle_start, $angle_dif, $inner_rad, $show_text) = @_;<br />
Log3 undef, 1, "$device, $reading, $angle_start, $angle_dif, $inner_rad, $show_text\n";<br />
<br />
use constant PI => 4 * atan2(1,1);<br />
<br />
my $value=ReadingsVal($device,$reading,0);<br />
<br />
my $angle_delta = $value/100*360;<br />
$angle_start = $angle_start/100*360;<br />
<br />
my $rad=10;<br />
my $irad=0;<br />
if ($inner_rad) {<br />
$irad = $rad*$inner_rad;<br />
}<br />
my $angle=$angle_start/360*2.0*PI;<br />
my $x=$irad*sin($angle);<br />
my $y=$irad*cos($angle);<br />
my $ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle<br />
<br />
for (my $i=$angle_start; $i<=$angle_start+$angle_delta; $i+=$angle_dif) {<br />
$angle = $i/360*2.0*PI;<br />
$x = $rad*sin($angle);<br />
$y = $rad*cos($angle);<br />
$ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle<br />
}<br />
<br />
$angle = ($angle_start+$angle_delta)/360*2.0*PI; # add last segment <br />
$ret .= ";p ".$rad*sin($angle)." ".$rad*cos($angle)."\n";<br />
<br />
if ($inner_rad) {<br />
for (my $i=$angle_start; $i<$angle_start+$angle_delta; $i+=$angle_dif) {<br />
$angle = ($angle_start+$angle_start+$angle_delta-$i)/360*2.0*PI;<br />
$x = $irad*sin($angle);<br />
$y = $irad*cos($angle);<br />
$ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle<br />
}<br />
}<br />
<br />
$angle = ($angle_start)/360*2.0*PI; # add last segment <br />
$ret .= ";p ".$irad*sin($angle)." ".$irad*cos($angle)."\n";<br />
<br />
if ($show_text) { # show text values<br />
$x = ($rad+$irad)/2*sin((2*$angle_start+$angle_delta)/2/360*2.0*PI);<br />
$y = ($rad+$irad)/2*cos((2*$angle_start+$angle_delta)/2/360*2.0*PI);<br />
<br />
$ret .= ";t ".$x." ".$y." middle ".$show_text.":".$value."%\n";<br />
}<br />
<br />
return($ret);<br />
}<br />
</syntaxhighlight><br />
In FHEM braucht man Readings, welche eine Zahl enthalten, die als Prozentwert interpretiert wird. Für jeden Prozentwert (also für jedes Reading) generiert die o.a. Funktion nun den Chart Input für ein Kuchenstück und liefert diesen als Antwort auf das GET, welches das Chart Widget auslöst. Dazu braucht die Funktion folgende Parameter: (Name des FHEM Devices, Name des Readings, Start Winkel des Kuchenstücks (Mathematisch gegen den Uhrzeigersinn in Grad), Delta Winkel zum Zeichnen (legt fest in welchen Schritten der Teilkreis des Kuchenstücks gezeichnet wird), Skalierungsfaktor für inneren Ring wenn ein Ring gezeichtnet werden soll (0 bedeutet komplette Kuchenstücke), optionaler Text der ins Kuchenstück vor die Prozentzahl geschrieben wird).<br />
Im Folgenden eine Beispielkonfiguration für die Darstellung als Kuchendiagramm, die Readings heißen hier dPer1 bis dPer4. Der Startwinkel wird duch Aufsummierung der jeweils vorher schon gezeichneten Kuchenstücke gebildet, dadurch entstehen aneinander hängende Stücke.<br />
<syntaxhighlight lang="html"><br />
[[Datei:[[Datei:Beispiel.jpg]]]]<div class="normal noaxes nobuttons"<br />
data-type="chart"<br />
data-logdevice='["lp"]'<br />
data-logfile="CURRENT"<br />
data-columnspec='[<br />
"Func:logProxy_values2PieChart(\"dPer1\",\"state\",ReadingsVal(\"dPer4\",\"state\",0)+ReadingsVal(\"dPer3\",\"state\",0),5,0,\"first\")",<br />
"Func:logProxy_values2PieChart(\"dPer2\",\"state\",ReadingsVal(\"dPer4\",\"state\",0)+ReadingsVal(\"dPer3\",\"state\",0)+ReadingsVal(\"dPer1\",\"state\",0),5,0,\"second\")",<br />
"Func:logProxy_values2PieChart(\"dPer3\",\"state\",ReadingsVal(\"dPer4\",\"state\",0),5,0,\"third\")",<br />
"Func:logProxy_values2PieChart(\"dPer4\",\"state\",0,5,0,\"fourth\")"<br />
]'<br />
data-style='["ftui l0fill","ftui l1fill","ftui l2fill","ftui l3fill"]'<br />
data-ptype='["lines"]'<br />
data-uaxis='["primary"]'<br />
data-legend='["First","Second","Third","Fourth"]'<br />
data-legendpos='["left","top"]'<br />
data-yunit=""<br />
data-height="300"<br />
data-width="300"<br />
data-ddd='["-40","0","0"]'<br />
data-dddspace='["-10"]'<br />
data-dddwidth='["10"]'<br />
data-showlegend="true"<br />
data-legend_horiz="true"<br />
data-xticks="auto"><br />
</div><br />
</syntaxhighlight><br />
<br />
===Fensterstatus offen/geschlossen===<br />
Dieses Beispiel zeigt, wie ein Fensterkontakt, dessen Reading die Werte <code>closed</code> und <code>open</code> einnimmt, als Graph gezeichnet werden kann. Technisch gesehen werden hier die Werte <code>0</code> und <code>1</code> gezeichnet, indem über das Attribut '''data-columnspec''' dem Zustand <code>open</code> der Wert <code>1</code> und allen anderen Zuständen der Wert <code>0</code> zugeordnet wird. Über das Attribut '''data-yticks''' wird die Beschriftung an der Y-Achse (<code>0</code> und <code>1</code>) gegen einen frei definierbaren Text ausgetauscht.<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="chart"<br />
data-device="wz_fensterstatus"<br />
data-logdevice='["myDbLog"]'<br />
data-logfile='["HISTORY"]'<br />
data-columnspec='["wz_fensterstatus:state:0::$val=($val=~\\x22open\\x22?1:0)"]'<br />
data-style='["ftui l4fill"]'<br />
data-ptype='["steps"]'<br />
data-height="290"<br />
data-yticks='[[0,"geschlossen"],[1,"offen"]]'<br />
data-minvalue="0"<br />
data-maxvalue="1.1"<br />
data-nofulldays="true"<br />
data-daysago_start="1"<br />
data-daysago_end="-1"<br />
data-cursorgroup="1"<br />
data-scrollgroup="1"><br />
</div><br />
</syntaxhighlight><br />
<br />
'''Hinweis:''' Das Beispiel funktioniert nur mit DbLog. Falls Logfiles verwendet werden muss statt '$val' '$fld[''num'']' verwendet werden. Hierbei steht ''num'' für die Spalte (beginnend bei 0) in der die Daten stehen.<br />
<br />
==Links==<br />
{{Link2Forum|Topic= 48450 |Message=401006|LinkText=Thread im FHEM-Forum}}<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_eigene_Widgets&diff=22813FTUI eigene Widgets2017-10-03T11:10:35Z<p>Standarduser: Links zur Kategorie und FTUI eingefügt</p>
<hr />
<div>Eigene Widgets für [[FHEM Tablet UI]] zu erstellen ist relativ einfach. Dafür muss nur eine widget_mywidget.js im js-Folder neben den anderen Widgets angelegt werden.<br />
<br />
Eine Minimalvariante einer widget_mywidget.js-Datei könnte so aussehen:<br />
<br />
<syntaxhighlight lang="javascript"><br />
var Modul_mywidget = function () {<br />
<br />
function init() {<br />
alert('init called');<br />
}<br />
<br />
function update(device, reading) {<br />
alert('update called for' + device + ':' + reading );<br />
}<br />
<br />
var me = $.extend(new Modul_widget(), {<br />
widgetname: 'mywidget',<br />
init: init,<br />
update: update,<br />
});<br />
<br />
return me;<br />
};<br />
</syntaxhighlight><br />
<br />
Am Ende der Datei steht die Definition der Public-Parameter. Neben dem Namen müssen mindestens die beiden Funktionen '''init()''' und '''update()''' implementiert sein.<br />
<br />
'''init()''' wird einmal gleich nach dem Laden des Plugins aufgerufen, '''update()''' jedesmal, wenn Änderungen von Readings passieren. <br />
<br />
Dieses FTUI-Plugin kann man jetzt so einbinden:<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="mywidget"></div><br />
</syntaxhighlight><br />
<br />
<br />
Wenn das Plugin für ein UI-Control sein soll, das mehrfach auf der Seite vorkommt, kann man im '''init()''' per '''each()''' durch alle Elemente iterieren:<br />
<br />
<syntaxhighlight lang="javascript"><br />
function init() {<br />
me.elements = $('[data-type="' + me.widgetname + '"]');<br />
me.elements.each(function (index) {<br />
alert('init #' + index + ' called');<br />
});<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
Updates werden aber nur gerufen, wenn man die entsprechenden Readings beim '''init()''' abonniert. Das passiert mit '''addReading();''' (Funktion ist enthalten im Base-Widget: Modul_widget) <br />
<br />
In diesem Beispiel fügen wir das Reading hinzu, das im Attribut '''data-get''' angegeben ist. Wir legen gleich noch als Default das Reading 'STATE' fest, für den Fall, dass data-get im HTML Code fehlt. Das passiert mit '''elem.initData();'''<br />
<br />
<syntaxhighlight lang="javascript"><br />
function init() {<br />
<br />
me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);<br />
me.elements.each(function (index) {<br />
<br />
var elem = $(this); <br />
elem.initData('get', 'STATE');<br />
<br />
me.addReading(elem, 'get');<br />
});<br />
}<br />
</syntaxhighlight><br />
<br />
Dann können wir unter '''update()''' auf die Notifizierungen warten. Wir filtern mit '''elements.filterDeviceReading()''' die Elemente heraus, die unter '''data-get''' das aktualisierte Reading haben und holen mit '''elem.getReading().val''' den aktuell bekannten Wert aus dem lokalen Cache. <br />
<br />
'''elem.getReading().date''' würde den Zeitstempel des Readings liefern.<br />
<br />
<syntaxhighlight lang="javascript"><br />
function update(device, reading) {<br />
me.elements.filterDeviceReading('get', device, reading)<br />
.each(function (index) {<br />
var elem = $(this);<br />
var value = elem.getReading('get').val;<br />
if (value) {<br />
elem.html(value);<br />
}<br />
});<br />
}<br />
</syntaxhighlight><br />
<br />
Zusammengefasst sieht unser FTUI Plugin jetzt so aus:<br />
<br />
<syntaxhighlight lang="javascript"><br />
var Modul_mywidget = function () {<br />
<br />
function init() {<br />
<br />
me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);<br />
me.elements.each(function (index) {<br />
<br />
var elem = $(this); <br />
elem.initData('get', 'STATE');<br />
<br />
me.addReading(elem, 'get');<br />
});<br />
}<br />
<br />
function update(device, reading) {<br />
me.elements.filterDeviceReading('get', device, reading)<br />
.each(function (index) {<br />
var elem = $(this);<br />
var value = elem.getReading('get').val;<br />
if (value) {<br />
elem.html(value);<br />
}<br />
});<br />
<br />
}<br />
<br />
var me = $.extend(new Modul_widget(), {<br />
widgetname: 'mywidget',<br />
init: init,<br />
update: update,<br />
});<br />
<br />
return me;<br />
};<br />
</syntaxhighlight><br />
<br />
Im HTML würde man das jetzt so nutzen können.<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="mywidget" data-device='AvReceiver' data-get='volume'></div><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_eigene_Widgets&diff=22812FTUI eigene Widgets2017-10-03T11:09:09Z<p>Standarduser: Typo & Styling</p>
<hr />
<div>Eigene Widgets für FTUI zu erstellen ist relativ einfach. Dafür muss nur eine widget_mywidget.js im js-Folder neben den anderen Widgets angelegt werden.<br />
<br />
Eine Minimalvariante einer widget_mywidget.js-Datei könnte so aussehen:<br />
<br />
<syntaxhighlight lang="javascript"><br />
var Modul_mywidget = function () {<br />
<br />
function init() {<br />
alert('init called');<br />
}<br />
<br />
function update(device, reading) {<br />
alert('update called for' + device + ':' + reading );<br />
}<br />
<br />
var me = $.extend(new Modul_widget(), {<br />
widgetname: 'mywidget',<br />
init: init,<br />
update: update,<br />
});<br />
<br />
return me;<br />
};<br />
</syntaxhighlight><br />
<br />
Am Ende der Datei steht die Definition der Public-Parameter. Neben dem Namen müssen mindestens die beiden Funktionen '''init()''' und '''update()''' implementiert sein.<br />
<br />
'''init()''' wird einmal gleich nach dem Laden des Plugins aufgerufen, '''update()''' jedesmal, wenn Änderungen von Readings passieren. <br />
<br />
Dieses FTUI-Plugin kann man jetzt so einbinden:<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="mywidget"></div><br />
</syntaxhighlight><br />
<br />
<br />
Wenn das Plugin für ein UI-Control sein soll, das mehrfach auf der Seite vorkommt, kann man im '''init()''' per '''each()''' durch alle Elemente iterieren:<br />
<br />
<syntaxhighlight lang="javascript"><br />
function init() {<br />
me.elements = $('[data-type="' + me.widgetname + '"]');<br />
me.elements.each(function (index) {<br />
alert('init #' + index + ' called');<br />
});<br />
}<br />
</syntaxhighlight><br />
<br />
<br />
Updates werden aber nur gerufen, wenn man die entsprechenden Readings beim '''init()''' abonniert. Das passiert mit '''addReading();''' (Funktion ist enthalten im Base-Widget: Modul_widget) <br />
<br />
In diesem Beispiel fügen wir das Reading hinzu, das im Attribut '''data-get''' angegeben ist. Wir legen gleich noch als Default das Reading 'STATE' fest, für den Fall, dass data-get im HTML Code fehlt. Das passiert mit '''elem.initData();'''<br />
<br />
<syntaxhighlight lang="javascript"><br />
function init() {<br />
<br />
me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);<br />
me.elements.each(function (index) {<br />
<br />
var elem = $(this); <br />
elem.initData('get', 'STATE');<br />
<br />
me.addReading(elem, 'get');<br />
});<br />
}<br />
</syntaxhighlight><br />
<br />
Dann können wir unter '''update()''' auf die Notifizierungen warten. Wir filtern mit '''elements.filterDeviceReading()''' die Elemente heraus, die unter '''data-get''' das aktualisierte Reading haben und holen mit '''elem.getReading().val''' den aktuell bekannten Wert aus dem lokalen Cache. <br />
<br />
'''elem.getReading().date''' würde den Zeitstempel des Readings liefern.<br />
<br />
<syntaxhighlight lang="javascript"><br />
function update(device, reading) {<br />
me.elements.filterDeviceReading('get', device, reading)<br />
.each(function (index) {<br />
var elem = $(this);<br />
var value = elem.getReading('get').val;<br />
if (value) {<br />
elem.html(value);<br />
}<br />
});<br />
}<br />
</syntaxhighlight><br />
<br />
Zusammengefasst sieht unser FTUI Plugin jetzt so aus:<br />
<br />
<syntaxhighlight lang="javascript"><br />
var Modul_mywidget = function () {<br />
<br />
function init() {<br />
<br />
me.elements = $('div[data-type="' + me.widgetname + '"]', me.area);<br />
me.elements.each(function (index) {<br />
<br />
var elem = $(this); <br />
elem.initData('get', 'STATE');<br />
<br />
me.addReading(elem, 'get');<br />
});<br />
}<br />
<br />
function update(device, reading) {<br />
me.elements.filterDeviceReading('get', device, reading)<br />
.each(function (index) {<br />
var elem = $(this);<br />
var value = elem.getReading('get').val;<br />
if (value) {<br />
elem.html(value);<br />
}<br />
});<br />
<br />
}<br />
<br />
var me = $.extend(new Modul_widget(), {<br />
widgetname: 'mywidget',<br />
init: init,<br />
update: update,<br />
});<br />
<br />
return me;<br />
};<br />
</syntaxhighlight><br />
<br />
Im HTML würde man das jetzt so nutzen können.<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="mywidget" data-device='AvReceiver' data-get='volume'></div><br />
</syntaxhighlight></div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Switch&diff=22776FTUI Widget Switch2017-09-29T18:12:22Z<p>Standarduser: Attribut data-timeout hinzugefügt</p>
<hr />
<div>Das [[{{PAGENAME}}|Switch Widget]] ist ein Widget für [[FHEM Tablet UI]]. Dabei handelt es sich um einen Ein-/Ausschalter in Form eines runden Druckknopfes. Er dient zum Ausführen beliebiger Schaltbefehle und kann auch für FTUI-interne Steuerungen genutzt werden. Zusätzlich kann der Schalter in Abhängigkeit eines Readings sein Aussehen verändern und so zwei oder mehr Zustände optisch darstellen. Beispielsweise können Farbe und/oder das Symbol die Zuständen an/aus anzeigen. Kann das Status-Reading mehr als zwei Zustände einnehmen, kann auch dies dargestellt werden. Dabei sind beliebige Kombinationen von Vorder-/Hintergrundfarben und Symbolen möglich.<br />
<br />
<gallery><br />
File:Switch.png<br />
File:Switch4.png<br />
File:FTUI_Switch-Homestatus2.png<br />
</gallery><br />
<br />
==Attribute==<br />
===Standard-Attribute===<br />
{| class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, dessen Reading gesetzt werden soll (<command> '''<device>''' <reading> <value>)||||<br />
|-<br />
|'''data-get'''||Reading, dessen Inhalt den aktuellen Wert wiedergibt||'STATE'||<br />
|-<br />
|'''data-set'''||Reading, das gesetzt werden soll (<command> <device> '''<reading>''' <value>)||||<br />
|-<br />
|'''data-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||<br />
|-<br />
|'''data-doubleclick'''||Zeit, die vergehen muss, bis das Element ein zweites mal betätigt werden kann. '0' schaltet dieses Verhalten ab.||0||<br />
|-<br />
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Gütige Werte sind 'true', '1' oder 'on' ||||<br />
|-<br />
|'''data-icon'''||Name des Icons im Vordergrund||'fa-lightbulb-o'||<br />
|-<br />
|'''data-background-icon'''||Name des Icons, das als Hintergrund verwendet werden soll||'fa-circle'||<br />
|-<br />
|'''data-color'''||Farbe des Icon (RGB-Angabe oder Farbname)||#2A2A2A||data-color="#c0c0c0"<br />
|-<br />
|'''data-background-color'''||Hintergrundfarbe des Widgets||#505050||data-background-color="none"<br />
|-<br />
|'''data-warn'''||Reading, dessen Inhalt als rotes Kennzeichen angezeigt wird. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||<br />
|-<br />
|'''data-warn-on'''||Werte von '''data-warn''', bei denen das Kennzeichen angezeigt wird||<nowiki>'true|on|[1-9]{1}[0-9]*'</nowiki>||<br />
|-<br />
|'''data-warn-off'''||Werte von '''data-warn''', bei denen das Kennzeichen versteckt wird||<nowiki>'false|off|0'</nowiki>||<br />
|-<br />
|'''data-warn-color'''||Textfarbe des Kennzeichens||'#aaa'||<br />
|-<br />
|'''data-warn-background-color'''||Hintergrundfarbe des Kennzeichens||'#aa2200'||<br />
|-<br />
|'''data-hide'''||Reading zum Verstecken des Elementes. Das Element verschwindet, wenn der Wert mit '''data-hide-on''' übereinstimmt.||'STATE'||<br />
|-<br />
|'''data-hide-on'''||Zeichenkette, bei der das Element versteckt wird||<nowiki>'true|1|on'</nowiki>||<br />
|-<br />
|'''data-hide-off'''||Zeichenkette, bei der das Element angezeigt wird||'!on'||<br />
|-<br />
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"<br />
|-<br />
|'''data-reachable'''||Reading, dessen Inhalt angibt, ob das Device erreichbar ist, oder nicht. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||<br />
|-<br />
|'''data-timeout'''||Maximale Zeit, die der eingestellte Zustand nach einer Veränderung angezeigt wird, bis die echte Rückmeldung vom Device wieder angezeigt wird||2000ms||<br />
|}<br />
<br />
===Attribute für zwei Zustände===<br />
Zur Anzeige von zwei Zuständen können nachfolgende Attribute zusätzlich zu den Standard-Attributen genutzt werden.<br />
{| class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-get-on'''||Zeichenkette oder ein Array von Werten, die als Zustand ON interpretiert werden||'on'||<br />
|-<br />
|'''data-get-off'''||Zeichenkette oder ein Array von Werten, die als Zustand OFF interpretiert werden||'off'||<br />
|-<br />
|'''data-set-on'''||Wert, der beim Einschalten gesendet werden soll ||Wert von '''data-get-on'''||data-set-on="1"<br />
|-<br />
|'''data-set-off'''||Wert, der beim Ausschalten gesendet werden soll||Wert von '''data-get-off'''||data-set-off="0"<br />
|-<br />
|'''data-on-color'''||Iconfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#aa6900'||<br />
|-<br />
|'''data-off-color'''||Iconfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#505050'||<br />
|-<br />
|'''data-on-background-color'''||Hintergrundfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#aa6900'||<br />
|-<br />
|'''data-off-background-color'''||Hintergrundfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#505050'||<br />
|}<br />
<br />
'''data-get-on''' und '''data-get-off''' können auch RegEx enthalten:<br />
<code>data-get-on="[0-9]{1,3}|on"</code> bedeutet, dass der Schalter AN ist, wenn das Reading eine Zahl zwischen 0 und 100 ist, oder den Wert <code>on</code> enthält.<br />
<code>data-get-off="!on"</code> bedeutet, dass alle Werte, die nicht für <code>on</code> stehen, automatisch <code>off</code> bedeuten (Negation).<br />
<code>data-set-off=""</code> unterdrückt das Senden eines OFF-Befehls.<br />
'''data-[on|off]-color''' erwartet einen RGB-Wert, wenn dieser aus einen Reading gelesen wird (<code>rgb(0, 0, 0)</code> statt <code>#000000</code>)<br />
<br />
===Attribute für mehrere Zustände===<br />
Zur Anzeige von mehreren Zuständen können nachfolgende Attribute zusätzlich zu den Standard-Attributen genutzt werden.<br />
{| class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-states'''||Array von Werten, die das Reading einnehmen kann||||<br />
|-<br />
|'''data-set-states'''||Array von Werten, die in Abhängigkeit des Arrays von '''data-states''' geschaltet werden||||<br />
|-<br />
|'''data-icons'''||Array von Icons, die in Abhängigkeit des Arrays von '''data-states''' im Vordergrund angezeigt werden||||<br />
|-<br />
|'''data-background-icons'''||Array von Icons, die in Abhängigkeit des Arrays von '''data-states''' im Hintergrund angezeigt werden||||<br />
|-<br />
|'''data-colors'''||Array von Farben, die in Abhängigkeit des Arrays von '''data-states''' das Vordergrund-Icon einfärben||||<br />
|-<br />
|'''data-background-colors'''||Array von Farben, die in Abhängigkeit des Arrays von '''data-states''' das Hintergrund-Icon einfärben||||<br />
|}<br />
<br />
==CSS-Klassen==<br />
{|class="wikitable"<br />
!Klasse<br />
!Beschreibung<br />
{{FTUI Klasse|readonly}}{{FTUI Klasse|small}}{{FTUI Klasse|compressed}}{{FTUI Klasse|compressed-50}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|invert}}<br />
|}<br />
<br />
==Hinweise==<br />
Das Attribut '''data-timeout''' dient dazu, ein "Flackern" der Anzeige zu verhindern. Manche Devices benötigen einige Zeit, bis der gewünschte und eben eingestellte Zustand erreicht wird.<br />
Zitat aus dem Forum: "data-timeout gilt nur für die on-off (toggle) Funktion von Switch und Dimmer, nicht fürs Dimmen. Das Problem: Am Switch wird eingeschaltet, der Knopf wird hell und ON an FHEM gesendet. Aber die Hardware reagiert nicht, geht nicht auf ON.<br />
Wenn sie das machen würde, käme auch eine Bestätigung per Longpoll. Mit '''data-timeout''' wird die eingestellte Zeit gewartet und bei Ausbleiben der Bestätigung fällt der Switch zum ursprünglichen Status zurück, geht also wieder aus. Nur wenn innerhalb der x Sekunden das Longpoll-Event kommt, wird der Fallbacktimer gestoppt."<br />
<br />
==Beispiele==<br />
===An/Aus===<br />
Einfacher Schalter, der <code>on</code>/<code>off</code> sendet und diesen Status durch Farbumschlag anzeigt.<br />
<br />
[[File:Switch.png]]<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch" data-device="MyDevice"></div><br />
</syntaxhighlight><br />
<br />
===An/Aus (Farben invertiert)===<br />
Einfacher Schalter, der <code>on</code>/<code>off</code> sendet und diesen Status durch Farbumschlag anzeigt. Die Farben sind hier im Gegensatz zum vorherigen Beispiel invertiert.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch" data-device="MyDevice" class="invert"></div><br />
</syntaxhighlight><br />
<br />
===1/0 als Befehl===<br />
Einfacher Schalter, der <code>1</code>/<code>0</code> sendet und diesen Status durch Farbumschlag anzeigt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch"<br />
data-icon="fa-rss"<br />
data-device='MyDevice'<br />
data-get-on="1" <br />
data-get-off="0" <br />
data-set-on="1" <br />
data-set-off="0"<br />
class="green small invert"><br />
</div><br />
</syntaxhighlight><br />
<br />
===MILIGHT-Switch===<br />
Beispiel for einen MILIGHT-Schalter. Der <code>on</code>-Zustand wird per RegEx ermittelt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="switch"<br />
data-device="MILIGHT_Zone1_Wohnzimmer" <br />
data-get-on="on.*"<br />
data-get-off="off"><br />
</div><br />
</syntaxhighlight><br />
<br />
===4-fach-Schalter===<br />
Gruppe von 4 Schaltern, die den Status des selben Devices umschalten.<br />
<br />
[[File:Switch4.png]]<br />
<syntaxhighlight lang="html"><br />
<div><br />
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-home" data-get-on="Home"></div><br />
<div>Home</div><br />
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-bed" data-get-on="Sleep"></div><br />
<div>Sleep</div><br />
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-car" data-get-on="Away"></div><br />
<div>Away</div><br />
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-suitcase" data-get-on="Holiday"></div><br />
<div>Holiday</div><br />
</div><br />
</syntaxhighlight><br />
<br />
===Zwei Zustände umschalten===<br />
Großer Homestatus-Button, der zwischen zwei Zuständen umschaltet.<br />
<br />
[[File:FTUI_Switch-Homestatus2.png]]<br />
<syntaxhighlight lang="html"><br />
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2"><br />
<header>HOMESTATUS</header><br />
<div data-type="switch"<br />
data-device="dummy3"<br />
data-set-on="Anwesend"<br />
data-set-off="Abwesend"<br />
data-states='["Anwesend","Abwesend"]'<br />
data-icons='["fa-home", "fa-car"]'<br />
data-colors='["white", "white"]'<br />
data-background-colors='["green", "red"]'<br />
class="bigger top-space"><br />
</div><br />
</li><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Dimmer&diff=22775FTUI Widget Dimmer2017-09-29T18:10:40Z<p>Standarduser: /* Hinweise */ Erläuterung zu data-timeout korrigiert</p>
<hr />
<div>Das [[{{PAGENAME}}|Dimmer Widget]] ist ein Widget für [[FHEM Tablet UI]], das einen Ein-/Aus-Button mit inkludiertem Schieberegler erstellt.<br />
<br />
<gallery><br />
File:FTUI_Widget_Dimmer_01.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-get'''||Device-Reading, welches den Status-Wert enthält||STATE||<br />
|-<br />
|'''data-get-on'''||Wert für EIN||on||data-get-on="An"<br />
|-<br />
|'''data-get-off'''||Wert für AUS||off||data-get-off="Aus"<br />
|-<br />
|'''data-get-value'''||[[Regulärer Ausdruck|RegEx]] oder Position in einer leerzeichen-getrennten Auflistung, die den Wert repräsentiert||-1 (alles anzeigen)||data-get-value="2"<br />
|-<br />
|'''data-set'''||Reading, welches geändert werden soll||||<br />
|-<br />
|'''data-set-on'''||Wert für EIN, der gesetzt werden soll||data-get-on||<br />
|-<br />
|'''data-set-off'''||Wert für AUS, der gesetzt werden soll||data-get-off||<br />
|-<br />
|'''data-set-value'''||Wert für EIN, der gesetzt werden soll||$v - nur der Wert||<br />
|-<br />
|'''data-set-cmd'''||Name des Befehls zum Ändern des EIN-/AUS-Wertes, der mittels Schieberegler geändert wird||set||data-set-cmd="setreading"<br />
|-<br />
|'''data-cmd-value'''||Name des Befehls zum Ändern des Wertes, der mittels Schieberegler geändert wird||set||<br />
|-<br />
|'''data-dim'''||Name des Readings, das für den DIM-Wert zuständig ist||||data-dim="dim"<br />
|-<br />
|'''data-icon'''||Name des Icons für den Schieberegler||fa-lightbulb-o||<br />
|-<br />
|'''data-max'''||Maximalwert, der gesetzt werden kann||100||data-max="25"<br />
|-<br />
|'''data-min'''||Minimalwert, der gesetzt werden kann||0||data-min="10"<br />
|-<br />
|'''data-step'''||Größe der Änderungsschritte||1||data-step="5"<br />
|-<br />
|'''data-lock'''||Name des Readings, welches durch einen Boolean-Wert definiert, ob das Widget gesperrt (readonly) ist||||<br />
|-<br />
|'''data-timeout'''||Maximale Zeit, die der eingestellte Zustand nach einer Veränderung angezeigt wird, bis die echte Rückmeldung vom Device wieder angezeigt wird||2000ms||<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
{{FTUI Klasse|FS20}}<br />
|}<br />
<br />
==Hinweise==<br />
* Um den Dim-Wert zu ändern, muss der Button gedrückt und nach unten oder oben verschoben werden.<br />
* Im einfachen Modus (ohne ''data-dim''-Parameter) schaltet das Widget zwischen OFF und dem DIM-Wert.<br />
* Im erweiterten Modus (mit ''data-dim''-Parameter) wird der DIM-Wert vom definierten Reading empfangen bzw. gesendet und der Button wird nur für EIN/AUS verwendet.<br />
* ''$v'' ist ein Platzhalter für den numerischen Wert. Er wird zur Laufzeit durch den richtigen Wert ersetzt.<br />
* data-lock: Das Widget wird gesperrt (readonly), wenn das definierte Reading den Wert ''1'', ''on'' oder ''true'' hat.<br />
<br />
Das Attribut '''data-timeout''' dient dazu, ein "Flackern" der Anzeige zu verhindern. Manche Devices benötigen einige Zeit, bis der gewünschte und eben eingestellte Zustand erreicht wird.<br />
Zitat aus dem Forum: "data-timeout gilt nur für die on-off (toggle) Funktion von Switch und Dimmer, nicht fürs Dimmen. Das Problem: Am Switch wird eingeschaltet, der Knopf wird hell und ON an FHEM gesendet. Aber die Hardware reagiert nicht, geht nicht auf ON.<br />
Wenn sie das machen würde, käme auch eine Bestätigung per Longpoll. Mit '''data-timeout''' wird die eingestellte Zeit gewartet und bei Ausbleiben der Bestätigung fällt der Switch zum ursprünglichen Status zurück, geht also wieder aus. Nur wenn innerhalb der x Sekunden das Longpoll-Event kommt, wird der Fallbacktimer gestoppt."<br />
<br />
==Beispiele==<br />
===HUEDevice===<br />
Einfaches Beispiel:<br />
<syntaxhighlight lang="html"><br />
<div data-type="dimmer"<br />
data-device='HUEDevice1'<br />
data-set="pct"<br />
data-get-on="!off"<br />
data-get-off="off"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Dimmer_01.png]]<br />
<br />
Nun ein Beispiel mit einem eigenen Reading für den DIM-Wert. Es ist dasselbe HUEDevice wie oben, nur wird diesmal der pct-Wert getrennt von EIN/AUS geregelt:<br />
<syntaxhighlight lang="html"><br />
<div data-type="dimmer"<br />
data-device="HUEDevice1"<br />
data-get="onoff"<br />
data-get-on="1"<br />
data-get-off="0"<br />
data-set=""<br />
data-set-on="on"<br />
data-set-off="off"<br />
data-dim="pct"></div><br />
</syntaxhighlight><br />
<br />
===Homematic-Dimmer===<br />
So wird ein Homematic-Dimmer im erweiterten Modus eingebunden:<br />
<syntaxhighlight lang="html"><br />
<div data-type="dimmer" <br />
data-device="HomematicDevice1" <br />
data-get-on="on|^[1-9][0-9]?(?:\.5)?$" <br />
data-get-off="off" <br />
data-set-on="on" <br />
data-dim="pct"></div><br />
</syntaxhighlight><br />
<br />
===RegEx für On-Werte===<br />
Dieses Beispiel verwendet einen RegEx-Ausdruck, um alle möglichen Werte für "EIN" abzudecken.<br />
<syntaxhighlight lang="html"><br />
<div data-type="dimmer"<br />
data-device='Dimmer1'<br />
data-set="pct"<br />
data-get-on="[0-9]{1,3}|on"<br />
data-get-off="off"></div><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Dimmer&diff=22766FTUI Widget Dimmer2017-09-28T18:12:11Z<p>Standarduser: /* Hinweise */ Erläuterung zu data-timeout hinzugefügt</p>
<hr />
<div>Das [[{{PAGENAME}}|Dimmer Widget]] ist ein Widget für [[FHEM Tablet UI]], das einen Ein-/Aus-Button mit inkludiertem Schieberegler erstellt.<br />
<br />
<gallery><br />
File:FTUI_Widget_Dimmer_01.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-get'''||Device-Reading, welches den Status-Wert enthält||STATE||<br />
|-<br />
|'''data-get-on'''||Wert für EIN||on||data-get-on="An"<br />
|-<br />
|'''data-get-off'''||Wert für AUS||off||data-get-off="Aus"<br />
|-<br />
|'''data-get-value'''||[[Regulärer Ausdruck|RegEx]] oder Position in einer leerzeichen-getrennten Auflistung, die den Wert repräsentiert||-1 (alles anzeigen)||data-get-value="2"<br />
|-<br />
|'''data-set'''||Reading, welches geändert werden soll||||<br />
|-<br />
|'''data-set-on'''||Wert für EIN, der gesetzt werden soll||data-get-on||<br />
|-<br />
|'''data-set-off'''||Wert für AUS, der gesetzt werden soll||data-get-off||<br />
|-<br />
|'''data-set-value'''||Wert für EIN, der gesetzt werden soll||$v - nur der Wert||<br />
|-<br />
|'''data-set-cmd'''||Name des Befehls zum Ändern des EIN-/AUS-Wertes, der mittels Schieberegler geändert wird||set||data-set-cmd="setreading"<br />
|-<br />
|'''data-cmd-value'''||Name des Befehls zum Ändern des Wertes, der mittels Schieberegler geändert wird||set||<br />
|-<br />
|'''data-dim'''||Name des Readings, das für den DIM-Wert zuständig ist||||data-dim="dim"<br />
|-<br />
|'''data-icon'''||Name des Icons für den Schieberegler||fa-lightbulb-o||<br />
|-<br />
|'''data-max'''||Maximalwert, der gesetzt werden kann||100||data-max="25"<br />
|-<br />
|'''data-min'''||Minimalwert, der gesetzt werden kann||0||data-min="10"<br />
|-<br />
|'''data-step'''||Größe der Änderungsschritte||1||data-step="5"<br />
|-<br />
|'''data-lock'''||Name des Readings, welches durch einen Boolean-Wert definiert, ob das Widget gesperrt (readonly) ist||||<br />
|-<br />
|'''data-timeout'''||Maximale Zeit, die der eingestellte Zustand nach einer Veränderung angezeigt wird, bis die echte Rückmeldung vom Device wieder angezeigt wird||2000ms||<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
{{FTUI Klasse|FS20}}<br />
|}<br />
<br />
==Hinweise==<br />
* Um den Dim-Wert zu ändern, muss der Button gedrückt und nach unten oder oben verschoben werden.<br />
* Im einfachen Modus (ohne ''data-dim''-Parameter) schaltet das Widget zwischen OFF und dem DIM-Wert.<br />
* Im erweiterten Modus (mit ''data-dim''-Parameter) wird der DIM-Wert vom definierten Reading empfangen bzw. gesendet und der Button wird nur für EIN/AUS verwendet.<br />
* ''$v'' ist ein Platzhalter für den numerischen Wert. Er wird zur Laufzeit durch den richtigen Wert ersetzt.<br />
* data-lock: Das Widget wird gesperrt (readonly), wenn das definierte Reading den Wert ''1'', ''on'' oder ''true'' hat.<br />
<br />
Das Attribut '''data-timeout''' dient dazu, ein "Flackern" der Anzeige zu verhindern. Manche Devices benötigen einige Zeit, bis der gewünschte und eben eingestellte Zustand erreicht wird. So kann es dazu kommen, dass bei einer Veränderung des Einstellwertes von 20% nach 70% der Dimmer erst 70% anzeigt, nach einer Aktualisierung der Readings zurück auf 20% (oder irgendeinen Zwischenwert) springt und erst etwas verzögert die 70% - nämlich dann, wenn der Aktor sein Ziel erreicht hat. Über das Timeout kann eine Laufzeit festgelegt werden, die der Aktor Zeit bekommt, sein Ziel zu erreichen. Nach Ablauf der Zeit wird der tatsächlich aus dem Device gelesene Wert angezeigt.<br />
<br />
==Beispiele==<br />
===HUEDevice===<br />
Einfaches Beispiel:<br />
<syntaxhighlight lang="html"><br />
<div data-type="dimmer"<br />
data-device='HUEDevice1'<br />
data-set="pct"<br />
data-get-on="!off"<br />
data-get-off="off"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Dimmer_01.png]]<br />
<br />
Nun ein Beispiel mit einem eigenen Reading für den DIM-Wert. Es ist dasselbe HUEDevice wie oben, nur wird diesmal der pct-Wert getrennt von EIN/AUS geregelt:<br />
<syntaxhighlight lang="html"><br />
<div data-type="dimmer"<br />
data-device="HUEDevice1"<br />
data-get="onoff"<br />
data-get-on="1"<br />
data-get-off="0"<br />
data-set=""<br />
data-set-on="on"<br />
data-set-off="off"<br />
data-dim="pct"></div><br />
</syntaxhighlight><br />
<br />
===Homematic-Dimmer===<br />
So wird ein Homematic-Dimmer im erweiterten Modus eingebunden:<br />
<syntaxhighlight lang="html"><br />
<div data-type="dimmer" <br />
data-device="HomematicDevice1" <br />
data-get-on="on|^[1-9][0-9]?(?:\.5)?$" <br />
data-get-off="off" <br />
data-set-on="on" <br />
data-dim="pct"></div><br />
</syntaxhighlight><br />
<br />
===RegEx für On-Werte===<br />
Dieses Beispiel verwendet einen RegEx-Ausdruck, um alle möglichen Werte für "EIN" abzudecken.<br />
<syntaxhighlight lang="html"><br />
<div data-type="dimmer"<br />
data-device='Dimmer1'<br />
data-set="pct"<br />
data-get-on="[0-9]{1,3}|on"<br />
data-get-off="off"></div><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Dimmer&diff=22765FTUI Widget Dimmer2017-09-28T18:04:44Z<p>Standarduser: /* Attribute */ data-timeout hinzugefügt</p>
<hr />
<div>Das [[{{PAGENAME}}|Dimmer Widget]] ist ein Widget für [[FHEM Tablet UI]], das einen Ein-/Aus-Button mit inkludiertem Schieberegler erstellt.<br />
<br />
<gallery><br />
File:FTUI_Widget_Dimmer_01.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-get'''||Device-Reading, welches den Status-Wert enthält||STATE||<br />
|-<br />
|'''data-get-on'''||Wert für EIN||on||data-get-on="An"<br />
|-<br />
|'''data-get-off'''||Wert für AUS||off||data-get-off="Aus"<br />
|-<br />
|'''data-get-value'''||[[Regulärer Ausdruck|RegEx]] oder Position in einer leerzeichen-getrennten Auflistung, die den Wert repräsentiert||-1 (alles anzeigen)||data-get-value="2"<br />
|-<br />
|'''data-set'''||Reading, welches geändert werden soll||||<br />
|-<br />
|'''data-set-on'''||Wert für EIN, der gesetzt werden soll||data-get-on||<br />
|-<br />
|'''data-set-off'''||Wert für AUS, der gesetzt werden soll||data-get-off||<br />
|-<br />
|'''data-set-value'''||Wert für EIN, der gesetzt werden soll||$v - nur der Wert||<br />
|-<br />
|'''data-set-cmd'''||Name des Befehls zum Ändern des EIN-/AUS-Wertes, der mittels Schieberegler geändert wird||set||data-set-cmd="setreading"<br />
|-<br />
|'''data-cmd-value'''||Name des Befehls zum Ändern des Wertes, der mittels Schieberegler geändert wird||set||<br />
|-<br />
|'''data-dim'''||Name des Readings, das für den DIM-Wert zuständig ist||||data-dim="dim"<br />
|-<br />
|'''data-icon'''||Name des Icons für den Schieberegler||fa-lightbulb-o||<br />
|-<br />
|'''data-max'''||Maximalwert, der gesetzt werden kann||100||data-max="25"<br />
|-<br />
|'''data-min'''||Minimalwert, der gesetzt werden kann||0||data-min="10"<br />
|-<br />
|'''data-step'''||Größe der Änderungsschritte||1||data-step="5"<br />
|-<br />
|'''data-lock'''||Name des Readings, welches durch einen Boolean-Wert definiert, ob das Widget gesperrt (readonly) ist||||<br />
|-<br />
|'''data-timeout'''||Maximale Zeit, die der eingestellte Zustand nach einer Veränderung angezeigt wird, bis die echte Rückmeldung vom Device wieder angezeigt wird||2000ms||<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
{{FTUI Klasse|FS20}}<br />
|}<br />
<br />
==Hinweise==<br />
* Um den Dim-Wert zu ändern, muss der Button gedrückt und nach unten oder oben verschoben werden.<br />
* Im einfachen Modus (ohne ''data-dim''-Parameter) schaltet das Widget zwischen OFF und dem DIM-Wert.<br />
* Im erweiterten Modus (mit ''data-dim''-Parameter) wird der DIM-Wert vom definierten Reading empfangen bzw. gesendet und der Button wird nur für EIN/AUS verwendet.<br />
* ''$v'' ist ein Platzhalter für den numerischen Wert. Er wird zur Laufzeit durch den richtigen Wert ersetzt.<br />
* data-lock: Das Widget wird gesperrt (readonly), wenn das definierte Reading den Wert ''1'', ''on'' oder ''true'' hat.<br />
<br />
==Beispiele==<br />
===HUEDevice===<br />
Einfaches Beispiel:<br />
<syntaxhighlight lang="html"><br />
<div data-type="dimmer"<br />
data-device='HUEDevice1'<br />
data-set="pct"<br />
data-get-on="!off"<br />
data-get-off="off"></div><br />
</syntaxhighlight><br />
[[File:FTUI_Widget_Dimmer_01.png]]<br />
<br />
Nun ein Beispiel mit einem eigenen Reading für den DIM-Wert. Es ist dasselbe HUEDevice wie oben, nur wird diesmal der pct-Wert getrennt von EIN/AUS geregelt:<br />
<syntaxhighlight lang="html"><br />
<div data-type="dimmer"<br />
data-device="HUEDevice1"<br />
data-get="onoff"<br />
data-get-on="1"<br />
data-get-off="0"<br />
data-set=""<br />
data-set-on="on"<br />
data-set-off="off"<br />
data-dim="pct"></div><br />
</syntaxhighlight><br />
<br />
===Homematic-Dimmer===<br />
So wird ein Homematic-Dimmer im erweiterten Modus eingebunden:<br />
<syntaxhighlight lang="html"><br />
<div data-type="dimmer" <br />
data-device="HomematicDevice1" <br />
data-get-on="on|^[1-9][0-9]?(?:\.5)?$" <br />
data-get-off="off" <br />
data-set-on="on" <br />
data-dim="pct"></div><br />
</syntaxhighlight><br />
<br />
===RegEx für On-Werte===<br />
Dieses Beispiel verwendet einen RegEx-Ausdruck, um alle möglichen Werte für "EIN" abzudecken.<br />
<syntaxhighlight lang="html"><br />
<div data-type="dimmer"<br />
data-device='Dimmer1'<br />
data-set="pct"<br />
data-get-on="[0-9]{1,3}|on"<br />
data-get-off="off"></div><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FHEM_Tablet_UI&diff=22741FHEM Tablet UI2017-09-26T17:24:30Z<p>Standarduser: /* Templates */ Erläuterungen zu Variablennamen hinzugefügt.</p>
<hr />
<div>{{Infobox Modul<br />
|ModPurpose=Oberfläche für FHEM<br />
|ModType=x<br />
|ModFTopic=34233<br />
|ModForumArea=Frontends<br />
|ModTechName=n.a.<br />
|ModOwner=setstate ({{Link2FU|7023|Forum}})<br />
}}<br />
[[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.<br />
<br />
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.<br />
<br />
Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.<br />
<br />
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.<br />
<br />
[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]<br />
<br />
{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}} <br />
<br />
== Installation ==<br />
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:<br />
*Dateien aus dem GitHub-Repository herunterladen<br />
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)<br />
*Eine Beispieldatei anlegen<br />
<br />
<br />
{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.<br />
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}<br />
<br />
<br />
'''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.<br />
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code><br />
<br />
:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]<br />
<br />
<br />
'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.<br />
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code><br />
<br />
:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]<br />
<br />
<br />
'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.<br />
<br />
:<code>attr WEB longpoll websocket</code><br />
:bzw. bei Problemen mit ''websocket''<br />
:<code>attr WEB longpoll 1</code><br />
<br />
:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]<br />
<br />
<br />
'''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.<br />
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code><br />
<br />
:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]<br />
<br />
<br />
'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.<br />
<br />
<br />
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<br />
<br />
== Update ==<br />
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.<br />
<br />
'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:<br />
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
'''2.''' Update der geänderten Dateien durch Eingabe von:<br />
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
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.<br />
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
== Konfiguration ==<br />
===DOCTYPE===<br />
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.<br />
<br />
<syntaxhighlight lang="html"><br />
<!DOCTYPE html><br />
<html><br />
<head>...</head><br />
<body>...</body><br />
</html><br />
</syntaxhighlight><br />
<br />
===META-Parameter===<br />
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.<br />
<br />
Die Parameter sind immer nach diesem Schema aufgebaut:<br />
<meta name="[Parameter-Name]" content="[Parameter-Wert]"><br />
<br />
===Verbindung zu FHEM===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird<br />
|-<br />
|longpoll||1||0, 1||<br />
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)<br />
<br />
'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.<br />
|-<br />
|longpoll_type||websocket||websocket, ajax, 0||<br />
'''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.<br />
<br />
'''ajax''': Ajax wird für die Aktualisierung verwendet.<br />
<br />
'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.<br />
|-<br />
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.<br />
|-<br />
|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.<br />
|-<br />
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet<br />
|-<br />
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein<br />
|-<br />
|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. <br />
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. <br />
|}<br />
<br />
===Funktionalität===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|debug||0||0 - 5||Log-Level<br />
|-<br />
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.<br />
|-<br />
|toast_position||bottom-left||||Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.<br />
|-<br />
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)<br />
|-<br />
|username||||String||Benutzername für eine Basic-Authentifierung *<br />
|-<br />
|password||||String||Passwort für eine Basic-Authentifizierung *<br />
|}<br />
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.<br />
<br />
===Toast-Nachrichten===<br />
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]<br />
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.<br />
<br />
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.<br />
<br />
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:<br />
<pre><meta name='toast_position' content='top-center'></pre><br />
<br />
Möglich sind folgende Positionen:<br />
* <code>top-left</code><br />
* <code>top-right</code><br />
* <code>bottom-left</code><br />
* <code>bottom-right</code><br />
* <code>top-center</code><br />
* <code>bottom-center</code><br />
* <code>mid-center</code><br />
<br />
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:<br />
<pre><meta name='toast' content='2'></pre><br />
<br />
==Navigationsmethoden==<br />
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}} <br />
<br />
'''Unterschied zwischen Pagetab und Pagebutton:<br />
<br />
'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite<br />
[[FTUI_Widget_Pagetab]]<br />
<br />
'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite<br />
[[FTUI_Widget_Pagebutton]]<br />
<br />
==Gestaltung==<br />
===Layout-Optionen===<br />
* [[FTUI Layout Gridster|Gridster]]<br />
* [[FTUI Layout Flex|Flex]]<br />
* [[FTUI Layout Sheet|Tabelle]]<br />
* [[FTUI Layout Row|Reihen]]<br />
<br />
=== Farben ===<br />
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel: <br />
<br />
*HEX: #ADD8E6<br />
*RBG: rgb(173, 216, 230)<br />
*Namen: lightblue<br />
<br />
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.<br />
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.<br />
<br />
Empfohlene Farben sind z.B.:<br />
<br />
*Orange: <span style="color: #aa6900;">#aa6900</span><br />
*Rot: <span style="color: #ad3333;">#ad3333</span><br />
*Grün: <span style="color: #32a054;">#32a054</span><br />
*Blau: <span style="color: #6699FF;">#6699FF</span><br />
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span><br />
<br />
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/<br />
<br />
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.<br />
<br />
Hier am Beispiel eines blauen Farbschemas:<br />
<syntaxhighlight lang="html"><br />
<html><br />
<head><br />
[...]<br />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" /><br />
[...]<br />
</head><br />
</syntaxhighlight><br />
<br />
Diese Schema-Dateien ändern alle Widgets. Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.<br />
<br />
===CSS-Styles===<br />
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.<br />
<br />
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.<br />
<br />
=== CSS-Klassen ===<br />
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|row/col-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|hbox/vbox-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Vordergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Hintergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Rahmen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Größen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Schriftstil<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Sonstiges<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
=== Icons ===<br />
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.<br />
<br />
Verfügbare Icon-Schriftarten sind:<br />
* Eingebaute Icons ''ftui-windows'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code><br />
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code><br />
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code><br />
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code><br />
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi-'''. Beispiel: <code>data-icon="wi-day-rain-mix"</code><br />
<br />
Alternativ können auch Bilder Icons (bspw. png) über CSS verwendet werden. Bspw:<br />
<syntaxhighlight lang="html5"><br />
<head><br />
<style type="text/css"><br />
.logo-fhem {<br />
background: url(https://wiki.fhem.de/fhemlogo.png) no-repeat;<br />
width: 120px;<br />
height: 132px;<br />
background-size: contain;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div data-type="symbol" data-icon="logo-fhem"></div><br />
</body><br />
</syntaxhighlight><br />
<br />
== Widgets ==<br />
===Allgemeine Attribute===<br />
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:<br />
<br />
{| class="wikitable"<br />
|+allgemeine Attribute<br />
|-<br />
!align="right" |data-type<br />
|Widget-Typ<br />
|-<br />
!align="right" |data-device<br />
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)<br />
|-<br />
!align="right" |class<br />
|CSS-Klassen für Aussehen und Formatierung des Widgets<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Empfangen<br />
|-<br />
!align="right" |data-get<br />
|Reading Name<br />
|-<br />
!align="right" |data-get-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-get-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Senden<br />
|-<br />
!align="right" |data-set<br />
|Reading Name<br />
|-<br />
!align="right" |data-set-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-set-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
=== Integrierte Widgets ===<br />
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.<br />
<br />
* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.<br />
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen<br />
* [[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 <br />
* [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.<br />
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben<br />
* [[FTUI Widget Controlbutton|controlbutton]]: iOS-ähnlicher Button um zwischen zwei Zuständen zu schalten (z.B. on / off)<br />
* [[FTUI Widget Controller|controller]]: iOS-ähnlicher vertikaler Schieberegler um einen Wert einzustellen<br />
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit<br />
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel<br />
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert<br />
* [[FTUI Widget Eventmonitor|eventmonitor]]:<br />
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)<br />
* [[FTUI Widget Html|html]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe. <br />
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.<br />
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld<br />
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt. <br />
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn<br />
* [[FTUI Widget Label|label]]: Reading als Text anzeigen<br />
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert<br />
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM<br />
* [[FTUI Widget Medialist|medialist]]:<br />
* [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.<br />
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein<br />
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation<br />
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.<br />
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button<br />
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element <br />
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste<br />
* [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.<br />
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen<br />
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde<br />
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position<br />
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit.<br />
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird<br />
* [[FTUI Widget Slideout|slideout]]:<br />
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen<br />
* [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern<br />
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln<br />
* [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)<br />
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)<br />
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann<br />
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes<br />
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen<br />
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose<br />
<br />
===3rd Party Widgets===<br />
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.<br />
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an<br />
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an<br />
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots<br />
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices<br />
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.<br />
* [[FTUI Widget Filelog|filelog]]:<br />
* [[FTUI Widget Fullcalview|fullcalview]]:<br />
* [[FTUI Widget Gds|gds]]:<br />
* [[FTUI Widget Highchart|highchart]]:<br />
* [[FTUI Widget Highchart3d|highchart3d]]:<br />
* [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. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.<br />
* [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.<br />
* [[FTUI Widget Loading|loading]]:<br />
* [[FTUI Widget Meteogram|meteogram]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads<br />
* [[FTUI Widget Screensaver|screensaver]]:<br />
* [[FTUI Widget Svgplot|svgplot]]:<br />
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.<br />
* [[FTUI Widget UWZ|uwz]]: Anzeige der Warnungen der Unwetterzentrale<br />
* [[FTUI Widget Wakeup|wakeup]]:<br />
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul<br />
* [[FTUI Widget Weekprofile|weekprofile]]: Visualisierung des [[weekprofile]] Moduls<br />
<br />
==Templates==<br />
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, Variablen zu verwenden.<br />
<br />
Die Variablennamen sollten möglichst eindeutig und unverwechselbar gewählt werden, da bei der Verwendung von Templates im Prinzip Suchen & Ersetzen angewendet wird. Verwendet man beispielsweise die Variablen '''dev:Thermostat_Kueche''' und '''dev_temp:temperatue''', so kann es passieren, dass die Ergebnisse im erzeugten Code dann '''Thermostat_Kueche''' und '''Thermostat_Kueche_temp''' lauten, statt wie gewünscht '''Thermostat_Kueche''' und '''temperature'''. Um dies zu vermeiden, sollten die Variablen besser '''device:Thermostat_Kueche''' und '''temp:temperatue''' lauten.<br />
<br />
Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.<br />
<br />
===Einzelnes Widget===<br />
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.<br />
<br />
;Template-Seite<br />
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="symbol"<br />
data-device="dummy1"><br />
</syntaxhighlight><br />
<br />
;Haupt-Seite<br />
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.<br />
<syntaxhighlight lang="html" highlight="6"><br />
[...]<br />
<body><br />
<div class="gridster"><br />
<ul><br />
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1"><br />
<div data-template="template_symbol.html"></div><br />
</li><br />
</ul><br />
</div><br />
</body><br />
[...]<br />
</syntaxhighlight><br />
<br />
===Gridster-Element===<br />
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.<br />
<syntaxhighlight lang="html"><br />
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li><br />
</syntaxhighlight><br />
<br />
=== Widget-Gruppen ===<br />
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.<br />
<br />
=== Verwendung von Variablen ===<br />
==== Einfaches Beispiel ====<br />
Oft wird ein und dasselbe 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.<br />
<br />
In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.<br />
<br />
;Template-Seite<br />
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.<br />
<syntaxhighlight lang="html" highlight="2"><br />
<div data-type="label"<br />
data-device="par01"<br />
data-get="measured-temp"></div><br />
</syntaxhighlight><br />
<br />
;Haupt-Seite<br />
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.<br />
<syntaxhighlight lang="html"><br />
[...]<br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div><br />
[...]<br />
</syntaxhighlight><br />
<br />
==== Wetter-Slider mit Template ====<br />
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.<br />
<br />
;Template-Seite<br />
<syntaxhighlight lang="html"><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="&deg;C"></div><br />
<div class="inline"><br />
<div data-type="label" data-device="AgroWeather" data-get="par02"></div><br />
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div><br />
min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="&deg;C"></div><br />
</div><br />
</div><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div><br />
</div><br />
</syntaxhighlight><br />
<br />
;Haupt-Seite<br />
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.<br />
<syntaxhighlight lang="html"><br />
[...]<br />
<div data-type="swiper"><br />
<ul><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li><br />
</ul><br />
</div><br />
[...]<br />
</syntaxhighlight><br />
<br />
== JavaScript-Funktionen ==<br />
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.<br />
<br />
<br />
Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):<br />
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></syntaxhighlight><br />
<br />
<br />
Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):<br />
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown(&quot;WZ.Thermostat_Climate&quot;,&quot;up&quot;)}')">+</div></syntaxhighlight><br />
<br />
<br />
Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" data-device="dummy1" data-get="temperature"></div><br />
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div><br />
</syntaxhighlight><br />
<br />
== FAQ ==<br />
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.<br />
<br />
== Links ==<br />
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]<br />
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}<br />
* [[FTUI_Snippets|Snippets]]<br />
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]<br />
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}<br />
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Controller&diff=22686FTUI Widget Controller2017-09-23T16:05:23Z<p>Standarduser: Typo</p>
<hr />
<div>Das [[{{PAGENAME}}|Controller Widget]] ist ein Widget für [[FHEM Tablet UI]] in Form eines iOS-ähnlichen Schiebereglers, mit dem ein beliebiger Wert zwischen zwei festgelegten Grenzwerten auswählen lässt. Es eignet sich zum Beispiel zum Einstellen der Lautstärke eines Audio-Gerätes oder der Helligkeit einer Lampe.<br />
<br />
<gallery><br />
File:FTUI controller1.png<br />
</gallery><br />
<br />
Das Widget kann sehr gut mit weiteren Widgets der Typen [[FTUI Widget Controlbutton|Controlbutton]] und [[FTUI Widget Switch|Switch]] kombiniert werden, um ein iOS-ähnliches Controlcenter zu erstellen.<br />
<br />
[[Datei:FTUI controlbutton controller.png|200px]]<br />
<br />
==Attribute==<br />
{| class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, dessen Reading gesetzt werden soll (<command> '''<device>''' <reading> <value>)||||<br />
|-<br />
|'''data-get'''||Reading, dessen Inhalt den aktuellen Wert wiedergibt||'STATE'||<br />
|-<br />
|'''data-set'''||Reading, das gesetzt werden soll (<command> <device> '''<reading>''' <value>)||||<br />
|-<br />
|'''data-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||<br />
|-<br />
|'''data-min'''||Minimaler Wert, der eingestellt werden kann||0||<br />
|-<br />
|'''data-max'''||Maximaler Wert, der eingestellt werden kann||100||<br />
|-<br />
|'''data-step'''||Schrittweite beim Schieben des Sliders||1||<br />
|-<br />
|'''data-on'''||Wert, bei dem der Slider zum maximalen Ausschlag springt||'on'||<br />
|-<br />
|'''data-off'''||Wert, bei dem der Slider minimalen Ausschlag springt||'off'||<br />
|-<br />
|'''data-width'''||Breite des Sliders, wenn er horizontal ausgerichtet ist||'4em'||<br />
|-<br />
|'''data-height'''||Höhe des Sliders, wenn er vertikal ausgerichtet ist||'11em'||<br />
|-<br />
|'''data-color'''||Farbe des Sliders für den Bereich 0...<eingestellter Wert>||'#fff'||<br />
|-<br />
|'''data-background-color'''||Farbe des Sliders für den Bereich <eingestellter Wert>...<Maximaler Wert>||'rgba(40,40,40,0.5)'||<br />
|-<br />
|'''data-icon'''||Name des Icons, das im Slider angezeigt werden soll||'fa-lightbulb-o'||<br />
|-<br />
|'''data-icon-color'''||Farbe des Icons im Slider||'#aaa'||<br />
|}<br />
<br />
==Beispiele==<br />
=== Schieberegler ===<br />
Schieberegler zur Änderung der Lautstärke im Bereich 0 bis 60 mit transparentem Hintergrund.<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="controller" <br />
data-device="AvReceiver" <br />
data-get="volume" <br />
data-background-color="transparent" <br />
data-set="volume" <br />
data-icon="fa-volume-up" <br />
data-max="60"<br />
class="fullsize"><br />
</div><br />
</syntaxhighlight><br />
<br />
===Controlcenter===<br />
Dieses Beispiel zeigt den kompletten Code für die Kombination aus Controlbutton, Controller und Switch, um ein iOS-ähnliches Controlcenter zu erstellen.<br />
<br />
[[Datei:FTUI controlbutton controller.png|200px]]<br />
<br />
<syntaxhighlight lang="html"><br />
<!DOCTYPE html><br />
<html><br />
<br />
<head><br />
<!--<br />
/* FHEM tablet ui */<br />
/*<br />
* UI builder framework for FHEM<br />
*<br />
* Version: 2.6.*<br />
* URL: https://github.com/knowthelist/fhem-tablet-ui<br />
*<br />
* Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de><br />
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)<br />
*/<br />
--><br />
<link rel="icon" href="favicon.ico" type="image/x-icon" /><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><br />
<meta name="mobile-web-app-capable" content="yes"><br />
<meta name="apple-mobile-web-app-capable" content="yes"><br />
<meta name="gridster_base_width" content="70"><br />
<meta name="gridster_base_height" content="70"><br />
<meta name="gridster_margin" content="5"><br />
<br />
<script src="js/fhem-tablet-ui.js" defer></script><br />
<br />
<title>FTUI-Control</title><br />
</head><br />
<br />
<body style="background-image:url(bgimage-tablet.jpg)"><br />
<div class="gridster bg-transparent"><br />
<ul><br />
<br />
<!-- ROW 1-2 Left --><br />
<br />
<li data-row="1" data-col="1" data-sizey="2" data-sizex="2" class="bg-gray-trans round"><br />
<div class="row-5"></div><br />
<div class="row-45"><br />
<div class="col-5"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy1" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-wifi"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy2" data-color="white" data-size="130" data-on-background-color="green" data-icon="fa-lock"></div><br />
<div class="col-5"></div><br />
</div><br />
<div class="row-45"><br />
<div class="col-5"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy1" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-bluetooth-b"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy3" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-podcast"></div><br />
<div class="col-5"></div><br />
</div><br />
<div class="row-5"></div><br />
</li><br />
<br />
<!-- ROW 1-2 Right --><br />
<br />
<li data-row="1" data-col="3" data-sizey="2" data-sizex="2" class="bg-gray-trans round"><br />
<div class="row-10"></div><br />
<div class="row-20"><br />
<div class="bold center " data-type="label" data-device="MPD1" data-get="Artist"></div><br />
</div><br />
<div class="row-20"><br />
<div class="center" data-type="label" data-device="MPD1" data-get="Title"></div><br />
</div><br />
<div class="row-50"><br />
<div class="col center" data-type="push" data-device="MPD1" data-icon="fa-step-backward" data-background-icon="-" data-set-on="previous" data-off-color="#000" data-on-color="white"><br />
</div><br />
<div class="col center" data-type="switch" data-device="MPD1" data-states='["play","pause","stop"]' data-set-states='["pause","play","play"]' data-background-icon="none" data-colors='["#000","#ddd","#ddd"]' data-icons='["fa-pause","fa-play","fa-play"]'><br />
</div><br />
<div class="col center" data-type="push" data-device="MPD1" data-icon="fa-step-forward" data-background-icon="-" data-set-on="next" data-off-color="#000" data-on-color="white"><br />
</div><br />
</div><br />
</li><br />
<br />
<!-- ROW 3--><br />
<br />
<li data-row="3" data-col="3" data-sizey="2" data-sizex="1" class="bg-gray-trans round"><br />
<div class="row-100"><br />
<div class="fullsize" data-type="controller" data-device="EsstischLampe" data-background-color="transparent" data-get="state" data-set="value"></div><br />
</div><br />
</li><br />
<li data-row="3" data-col="4" data-sizey="2" data-sizex="1" class="bg-gray-trans round"><br />
<div class="row-100"><br />
<div class="fullsize" data-type="controller" data-device="AvReceiver" data-get="volume" data-background-color="transparent" data-set="volume" data-icon="fa-volume-up" data-max="60"></div><br />
</div><br />
</li><br />
<li data-row="3" data-col="1" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="SchrankLicht_Sw" data-icon="fa-book"></div><br />
</li><br />
<li data-row="3" data-col="2" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="KuechenArbeitsLicht" data-icon="fa-beer"></div><br />
</li><br />
<li data-row="4" data-col="1" data-sizey="1" data-sizex="2" class="bg-gray-trans round"><br />
<div class="row"><br />
<div class="col-30 center fa fa-2x fa-sign-in"></div><br />
<div class="col-70 center" data-type="label" data-device="AvReceiver" data-get="input"></div><br />
</div><br />
</li><br />
<br />
<!-- ROW 5 --><br />
<br />
<li data-row="5" data-col="1" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="BadWandlicht" data-icon="fa-shower"></div><br />
</li><br />
<li data-row="5" data-col="2" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="SchlafzimmerLicht" data-icon="fa-bed"></div><br />
</li><br />
<li data-row="5" data-col="3" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="WohnenDeckenLicht" data-icon="fa-tv"></div><br />
</li><br />
<li data-row="5" data-col="4" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="GartenLicht" data-icon="fa-envira"></div><br />
</li><br />
</ul><br />
</div><br />
</body><br />
<br />
</html><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Controller&diff=22685FTUI Widget Controller2017-09-23T16:05:07Z<p>Standarduser: Typo</p>
<hr />
<div>Das [[{{PAGENAME}}|Controller Widget]] ist ein Widget für [[FHEM Tablet UI]] in Form eines iOS-ähnlichen Schiebereglers, mit dem ein beliebiger Wert zwischen zwei festgelegten Grenzwerten auswählen lässt. Es eignet sich zum Beispiel zum Einstellen der Lautstärke eines Audio-Gerätes oder der Helligkeit einer Lampe.<br />
<br />
<gallery><br />
File:FTUI controller1.png<br />
</gallery><br />
<br />
Das Widget kann sehr gut mit weiteren Widgets der Typen [[FTUI Widget Controlbutton|Controllbutton]] und [[FTUI Widget Switch|Switch]] kombiniert werden, um ein iOS-ähnliches Controlcenter zu erstellen.<br />
<br />
[[Datei:FTUI controlbutton controller.png|200px]]<br />
<br />
==Attribute==<br />
{| class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, dessen Reading gesetzt werden soll (<command> '''<device>''' <reading> <value>)||||<br />
|-<br />
|'''data-get'''||Reading, dessen Inhalt den aktuellen Wert wiedergibt||'STATE'||<br />
|-<br />
|'''data-set'''||Reading, das gesetzt werden soll (<command> <device> '''<reading>''' <value>)||||<br />
|-<br />
|'''data-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||<br />
|-<br />
|'''data-min'''||Minimaler Wert, der eingestellt werden kann||0||<br />
|-<br />
|'''data-max'''||Maximaler Wert, der eingestellt werden kann||100||<br />
|-<br />
|'''data-step'''||Schrittweite beim Schieben des Sliders||1||<br />
|-<br />
|'''data-on'''||Wert, bei dem der Slider zum maximalen Ausschlag springt||'on'||<br />
|-<br />
|'''data-off'''||Wert, bei dem der Slider minimalen Ausschlag springt||'off'||<br />
|-<br />
|'''data-width'''||Breite des Sliders, wenn er horizontal ausgerichtet ist||'4em'||<br />
|-<br />
|'''data-height'''||Höhe des Sliders, wenn er vertikal ausgerichtet ist||'11em'||<br />
|-<br />
|'''data-color'''||Farbe des Sliders für den Bereich 0...<eingestellter Wert>||'#fff'||<br />
|-<br />
|'''data-background-color'''||Farbe des Sliders für den Bereich <eingestellter Wert>...<Maximaler Wert>||'rgba(40,40,40,0.5)'||<br />
|-<br />
|'''data-icon'''||Name des Icons, das im Slider angezeigt werden soll||'fa-lightbulb-o'||<br />
|-<br />
|'''data-icon-color'''||Farbe des Icons im Slider||'#aaa'||<br />
|}<br />
<br />
==Beispiele==<br />
=== Schieberegler ===<br />
Schieberegler zur Änderung der Lautstärke im Bereich 0 bis 60 mit transparentem Hintergrund.<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="controller" <br />
data-device="AvReceiver" <br />
data-get="volume" <br />
data-background-color="transparent" <br />
data-set="volume" <br />
data-icon="fa-volume-up" <br />
data-max="60"<br />
class="fullsize"><br />
</div><br />
</syntaxhighlight><br />
<br />
===Controlcenter===<br />
Dieses Beispiel zeigt den kompletten Code für die Kombination aus Controlbutton, Controller und Switch, um ein iOS-ähnliches Controlcenter zu erstellen.<br />
<br />
[[Datei:FTUI controlbutton controller.png|200px]]<br />
<br />
<syntaxhighlight lang="html"><br />
<!DOCTYPE html><br />
<html><br />
<br />
<head><br />
<!--<br />
/* FHEM tablet ui */<br />
/*<br />
* UI builder framework for FHEM<br />
*<br />
* Version: 2.6.*<br />
* URL: https://github.com/knowthelist/fhem-tablet-ui<br />
*<br />
* Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de><br />
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)<br />
*/<br />
--><br />
<link rel="icon" href="favicon.ico" type="image/x-icon" /><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><br />
<meta name="mobile-web-app-capable" content="yes"><br />
<meta name="apple-mobile-web-app-capable" content="yes"><br />
<meta name="gridster_base_width" content="70"><br />
<meta name="gridster_base_height" content="70"><br />
<meta name="gridster_margin" content="5"><br />
<br />
<script src="js/fhem-tablet-ui.js" defer></script><br />
<br />
<title>FTUI-Control</title><br />
</head><br />
<br />
<body style="background-image:url(bgimage-tablet.jpg)"><br />
<div class="gridster bg-transparent"><br />
<ul><br />
<br />
<!-- ROW 1-2 Left --><br />
<br />
<li data-row="1" data-col="1" data-sizey="2" data-sizex="2" class="bg-gray-trans round"><br />
<div class="row-5"></div><br />
<div class="row-45"><br />
<div class="col-5"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy1" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-wifi"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy2" data-color="white" data-size="130" data-on-background-color="green" data-icon="fa-lock"></div><br />
<div class="col-5"></div><br />
</div><br />
<div class="row-45"><br />
<div class="col-5"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy1" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-bluetooth-b"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy3" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-podcast"></div><br />
<div class="col-5"></div><br />
</div><br />
<div class="row-5"></div><br />
</li><br />
<br />
<!-- ROW 1-2 Right --><br />
<br />
<li data-row="1" data-col="3" data-sizey="2" data-sizex="2" class="bg-gray-trans round"><br />
<div class="row-10"></div><br />
<div class="row-20"><br />
<div class="bold center " data-type="label" data-device="MPD1" data-get="Artist"></div><br />
</div><br />
<div class="row-20"><br />
<div class="center" data-type="label" data-device="MPD1" data-get="Title"></div><br />
</div><br />
<div class="row-50"><br />
<div class="col center" data-type="push" data-device="MPD1" data-icon="fa-step-backward" data-background-icon="-" data-set-on="previous" data-off-color="#000" data-on-color="white"><br />
</div><br />
<div class="col center" data-type="switch" data-device="MPD1" data-states='["play","pause","stop"]' data-set-states='["pause","play","play"]' data-background-icon="none" data-colors='["#000","#ddd","#ddd"]' data-icons='["fa-pause","fa-play","fa-play"]'><br />
</div><br />
<div class="col center" data-type="push" data-device="MPD1" data-icon="fa-step-forward" data-background-icon="-" data-set-on="next" data-off-color="#000" data-on-color="white"><br />
</div><br />
</div><br />
</li><br />
<br />
<!-- ROW 3--><br />
<br />
<li data-row="3" data-col="3" data-sizey="2" data-sizex="1" class="bg-gray-trans round"><br />
<div class="row-100"><br />
<div class="fullsize" data-type="controller" data-device="EsstischLampe" data-background-color="transparent" data-get="state" data-set="value"></div><br />
</div><br />
</li><br />
<li data-row="3" data-col="4" data-sizey="2" data-sizex="1" class="bg-gray-trans round"><br />
<div class="row-100"><br />
<div class="fullsize" data-type="controller" data-device="AvReceiver" data-get="volume" data-background-color="transparent" data-set="volume" data-icon="fa-volume-up" data-max="60"></div><br />
</div><br />
</li><br />
<li data-row="3" data-col="1" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="SchrankLicht_Sw" data-icon="fa-book"></div><br />
</li><br />
<li data-row="3" data-col="2" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="KuechenArbeitsLicht" data-icon="fa-beer"></div><br />
</li><br />
<li data-row="4" data-col="1" data-sizey="1" data-sizex="2" class="bg-gray-trans round"><br />
<div class="row"><br />
<div class="col-30 center fa fa-2x fa-sign-in"></div><br />
<div class="col-70 center" data-type="label" data-device="AvReceiver" data-get="input"></div><br />
</div><br />
</li><br />
<br />
<!-- ROW 5 --><br />
<br />
<li data-row="5" data-col="1" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="BadWandlicht" data-icon="fa-shower"></div><br />
</li><br />
<li data-row="5" data-col="2" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="SchlafzimmerLicht" data-icon="fa-bed"></div><br />
</li><br />
<li data-row="5" data-col="3" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="WohnenDeckenLicht" data-icon="fa-tv"></div><br />
</li><br />
<li data-row="5" data-col="4" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="GartenLicht" data-icon="fa-envira"></div><br />
</li><br />
</ul><br />
</div><br />
</body><br />
<br />
</html><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Controller&diff=22684FTUI Widget Controller2017-09-23T16:04:43Z<p>Standarduser: initiale Erstellung der Seite</p>
<hr />
<div>Das [[{{PAGENAME}}|Controller Widget]] ist ein Widget für [[FHEM Tablet UI]] in Form eines iOS-ähnlichen Schiebereglers, mit dem ein beliebiger Wert zwischen zwei festgelegten Grenzwerten auswählen lässt. Es eignet sich zum Beispiel zum Einstellen der Lautstärke eines Audio-Gerätes oder der Helligkeit einer Lampe.<br />
<br />
<gallery><br />
File:FTUI controller1.png<br />
</gallery><br />
<br />
Das Widget kann sehr gut mit weiteren Widgets der Typen [[FTUI Widget Controlbutton|Controllerbutton]] und [[FTUI Widget Switch|Switch]] kombiniert werden, um ein iOS-ähnliches Controlcenter zu erstellen.<br />
<br />
[[Datei:FTUI controlbutton controller.png|200px]]<br />
<br />
==Attribute==<br />
{| class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, dessen Reading gesetzt werden soll (<command> '''<device>''' <reading> <value>)||||<br />
|-<br />
|'''data-get'''||Reading, dessen Inhalt den aktuellen Wert wiedergibt||'STATE'||<br />
|-<br />
|'''data-set'''||Reading, das gesetzt werden soll (<command> <device> '''<reading>''' <value>)||||<br />
|-<br />
|'''data-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||<br />
|-<br />
|'''data-min'''||Minimaler Wert, der eingestellt werden kann||0||<br />
|-<br />
|'''data-max'''||Maximaler Wert, der eingestellt werden kann||100||<br />
|-<br />
|'''data-step'''||Schrittweite beim Schieben des Sliders||1||<br />
|-<br />
|'''data-on'''||Wert, bei dem der Slider zum maximalen Ausschlag springt||'on'||<br />
|-<br />
|'''data-off'''||Wert, bei dem der Slider minimalen Ausschlag springt||'off'||<br />
|-<br />
|'''data-width'''||Breite des Sliders, wenn er horizontal ausgerichtet ist||'4em'||<br />
|-<br />
|'''data-height'''||Höhe des Sliders, wenn er vertikal ausgerichtet ist||'11em'||<br />
|-<br />
|'''data-color'''||Farbe des Sliders für den Bereich 0...<eingestellter Wert>||'#fff'||<br />
|-<br />
|'''data-background-color'''||Farbe des Sliders für den Bereich <eingestellter Wert>...<Maximaler Wert>||'rgba(40,40,40,0.5)'||<br />
|-<br />
|'''data-icon'''||Name des Icons, das im Slider angezeigt werden soll||'fa-lightbulb-o'||<br />
|-<br />
|'''data-icon-color'''||Farbe des Icons im Slider||'#aaa'||<br />
|}<br />
<br />
==Beispiele==<br />
=== Schieberegler ===<br />
Schieberegler zur Änderung der Lautstärke im Bereich 0 bis 60 mit transparentem Hintergrund.<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="controller" <br />
data-device="AvReceiver" <br />
data-get="volume" <br />
data-background-color="transparent" <br />
data-set="volume" <br />
data-icon="fa-volume-up" <br />
data-max="60"<br />
class="fullsize"><br />
</div><br />
</syntaxhighlight><br />
<br />
===Controlcenter===<br />
Dieses Beispiel zeigt den kompletten Code für die Kombination aus Controlbutton, Controller und Switch, um ein iOS-ähnliches Controlcenter zu erstellen.<br />
<br />
[[Datei:FTUI controlbutton controller.png|200px]]<br />
<br />
<syntaxhighlight lang="html"><br />
<!DOCTYPE html><br />
<html><br />
<br />
<head><br />
<!--<br />
/* FHEM tablet ui */<br />
/*<br />
* UI builder framework for FHEM<br />
*<br />
* Version: 2.6.*<br />
* URL: https://github.com/knowthelist/fhem-tablet-ui<br />
*<br />
* Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de><br />
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)<br />
*/<br />
--><br />
<link rel="icon" href="favicon.ico" type="image/x-icon" /><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><br />
<meta name="mobile-web-app-capable" content="yes"><br />
<meta name="apple-mobile-web-app-capable" content="yes"><br />
<meta name="gridster_base_width" content="70"><br />
<meta name="gridster_base_height" content="70"><br />
<meta name="gridster_margin" content="5"><br />
<br />
<script src="js/fhem-tablet-ui.js" defer></script><br />
<br />
<title>FTUI-Control</title><br />
</head><br />
<br />
<body style="background-image:url(bgimage-tablet.jpg)"><br />
<div class="gridster bg-transparent"><br />
<ul><br />
<br />
<!-- ROW 1-2 Left --><br />
<br />
<li data-row="1" data-col="1" data-sizey="2" data-sizex="2" class="bg-gray-trans round"><br />
<div class="row-5"></div><br />
<div class="row-45"><br />
<div class="col-5"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy1" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-wifi"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy2" data-color="white" data-size="130" data-on-background-color="green" data-icon="fa-lock"></div><br />
<div class="col-5"></div><br />
</div><br />
<div class="row-45"><br />
<div class="col-5"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy1" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-bluetooth-b"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy3" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-podcast"></div><br />
<div class="col-5"></div><br />
</div><br />
<div class="row-5"></div><br />
</li><br />
<br />
<!-- ROW 1-2 Right --><br />
<br />
<li data-row="1" data-col="3" data-sizey="2" data-sizex="2" class="bg-gray-trans round"><br />
<div class="row-10"></div><br />
<div class="row-20"><br />
<div class="bold center " data-type="label" data-device="MPD1" data-get="Artist"></div><br />
</div><br />
<div class="row-20"><br />
<div class="center" data-type="label" data-device="MPD1" data-get="Title"></div><br />
</div><br />
<div class="row-50"><br />
<div class="col center" data-type="push" data-device="MPD1" data-icon="fa-step-backward" data-background-icon="-" data-set-on="previous" data-off-color="#000" data-on-color="white"><br />
</div><br />
<div class="col center" data-type="switch" data-device="MPD1" data-states='["play","pause","stop"]' data-set-states='["pause","play","play"]' data-background-icon="none" data-colors='["#000","#ddd","#ddd"]' data-icons='["fa-pause","fa-play","fa-play"]'><br />
</div><br />
<div class="col center" data-type="push" data-device="MPD1" data-icon="fa-step-forward" data-background-icon="-" data-set-on="next" data-off-color="#000" data-on-color="white"><br />
</div><br />
</div><br />
</li><br />
<br />
<!-- ROW 3--><br />
<br />
<li data-row="3" data-col="3" data-sizey="2" data-sizex="1" class="bg-gray-trans round"><br />
<div class="row-100"><br />
<div class="fullsize" data-type="controller" data-device="EsstischLampe" data-background-color="transparent" data-get="state" data-set="value"></div><br />
</div><br />
</li><br />
<li data-row="3" data-col="4" data-sizey="2" data-sizex="1" class="bg-gray-trans round"><br />
<div class="row-100"><br />
<div class="fullsize" data-type="controller" data-device="AvReceiver" data-get="volume" data-background-color="transparent" data-set="volume" data-icon="fa-volume-up" data-max="60"></div><br />
</div><br />
</li><br />
<li data-row="3" data-col="1" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="SchrankLicht_Sw" data-icon="fa-book"></div><br />
</li><br />
<li data-row="3" data-col="2" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="KuechenArbeitsLicht" data-icon="fa-beer"></div><br />
</li><br />
<li data-row="4" data-col="1" data-sizey="1" data-sizex="2" class="bg-gray-trans round"><br />
<div class="row"><br />
<div class="col-30 center fa fa-2x fa-sign-in"></div><br />
<div class="col-70 center" data-type="label" data-device="AvReceiver" data-get="input"></div><br />
</div><br />
</li><br />
<br />
<!-- ROW 5 --><br />
<br />
<li data-row="5" data-col="1" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="BadWandlicht" data-icon="fa-shower"></div><br />
</li><br />
<li data-row="5" data-col="2" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="SchlafzimmerLicht" data-icon="fa-bed"></div><br />
</li><br />
<li data-row="5" data-col="3" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="WohnenDeckenLicht" data-icon="fa-tv"></div><br />
</li><br />
<li data-row="5" data-col="4" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="GartenLicht" data-icon="fa-envira"></div><br />
</li><br />
</ul><br />
</div><br />
</body><br />
<br />
</html><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=Datei:FTUI_controller1.png&diff=22683Datei:FTUI controller1.png2017-09-23T15:49:33Z<p>Standarduser: </p>
<hr />
<div></div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Controlbutton&diff=22682FTUI Widget Controlbutton2017-09-23T15:41:00Z<p>Standarduser: initiale Erstellung der Seite</p>
<hr />
<div>Das [[{{PAGENAME}}|Controlbutton Widget]] ist ein Widget für [[FHEM Tablet UI]]. Dabei handelt es sich um einen Ein-/Ausschalter in Form eines Druckknopfes im Design von iOS (11). Er dient zum Ausführen beliebiger Schaltbefehle und kann auch für FTUI-interne Steuerungen genutzt werden. Zusätzlich kann der Schalter in Abhängigkeit eines Readings sein Aussehen verändern und so zwei oder mehr Zustände optisch darstellen. Beispielsweise können Farbe und/oder das Symbol die Zuständen an/aus anzeigen. Kann das Status-Reading mehr als zwei Zustände einnehmen, kann auch dies dargestellt werden. Dabei sind beliebige Kombinationen von Vorder-/Hintergrundfarben und Symbolen möglich.<br />
<br />
<gallery><br />
File:FTUI controlbutton1.png<br />
</gallery><br />
<br />
Das Widget kann sehr gut mit weiteren Widgets der Typen [[FTUI Widget Controller|Controller]] und [[FTUI Widget Switch|Switch]] kombiniert werden, um ein iOS-ähnliches Controlcenter zu erstellen.<br />
<br />
[[Datei:FTUI controlbutton controller.png|200px]]<br />
<br />
==Attribute==<br />
{| class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, dessen Reading gesetzt werden soll (<command> '''<device>''' <reading> <value>)||||<br />
|-<br />
|'''data-get'''||Reading, dessen Inhalt den aktuellen Wert wiedergibt||'STATE'||<br />
|-<br />
|'''data-set'''||Reading, das gesetzt werden soll (<command> <device> '''<reading>''' <value>)||||<br />
|-<br />
|'''data-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||<br />
|-<br />
|'''data-get'''||Reading, dessen Inhalt zur Zustandsanzeige (ON/OFF) wird||keiner (muss explizit angegeben werden)||<br />
|-<br />
|'''data-get-on'''||Zeichenkette, die als Zustand ON interpretiert wird||||<br />
|-<br />
|'''data-get-off'''||Zeichenkette, die als Zustand OFF interpretiert wird||||<br />
|-<br />
|'''data-set-on'''||Zeichenkette, die zum Einschalten gesendet wird||||<br />
|-<br />
|'''data-set-off'''||Zeichenkette, die zum Ausschalten gesendet wird||||<br />
|-<br />
|'''data-icon'''||Name des Icons im Vordergrund||'fa-lightbulb-o'||<br />
|-<br />
|'''data-background-icon'''||Name des Icons, das als Hintergrund verwendet werden soll||'fa-circle'||<br />
|-<br />
|'''data-on-color'''||Farbe des Widgets, wenn das Device eingeschaltet ist||#aa6900||<br />
|-<br />
|'''data-off-color'''||Farbe des Widgets, wenn das Device ausgeschaltet ist||#505050||<br />
|-<br />
|'''data-on-background-color'''||Hintergrundfarbe des Widgets, wenn das Device eingeschaltet ist||#aa6900||<br />
|-<br />
|'''data-off-background-color'''||Hintergrundfarbe des Widgets, wenn das Device ausgeschaltet ist||#505050||<br />
|-<br />
|}<br />
<br />
==Beispiele==<br />
===An/Aus===<br />
Einfacher Schalter, der <code>on</code>/<code>off</code> sendet und diesen Status durch Farbumschlag anzeigt.<br />
<br />
<syntaxhighlight lang="html"><br />
<div data-type="controlbutton"<br />
data-device="BadWandlicht"<br />
data-icon="fa-shower"<br />
class="fullsize"><br />
</div><br />
</syntaxhighlight><br />
<br />
===Controlcenter===<br />
Dieses Beispiel zeigt den kompletten Code für die Kombination aus Controlbutton, Controller und Switch, um ein iOS-ähnliches Controlcenter zu erstellen.<br />
<br />
[[Datei:FTUI controlbutton controller.png|200px]]<br />
<br />
<syntaxhighlight lang="html"><br />
<!DOCTYPE html><br />
<html><br />
<br />
<head><br />
<!--<br />
/* FHEM tablet ui */<br />
/*<br />
* UI builder framework for FHEM<br />
*<br />
* Version: 2.6.*<br />
* URL: https://github.com/knowthelist/fhem-tablet-ui<br />
*<br />
* Copyright (c) 2015-2017 Mario Stephan <mstephan@shared-files.de><br />
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)<br />
*/<br />
--><br />
<link rel="icon" href="favicon.ico" type="image/x-icon" /><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><br />
<meta name="mobile-web-app-capable" content="yes"><br />
<meta name="apple-mobile-web-app-capable" content="yes"><br />
<meta name="gridster_base_width" content="70"><br />
<meta name="gridster_base_height" content="70"><br />
<meta name="gridster_margin" content="5"><br />
<br />
<script src="js/fhem-tablet-ui.js" defer></script><br />
<br />
<title>FTUI-Control</title><br />
</head><br />
<br />
<body style="background-image:url(bgimage-tablet.jpg)"><br />
<div class="gridster bg-transparent"><br />
<ul><br />
<br />
<!-- ROW 1-2 Left --><br />
<br />
<li data-row="1" data-col="1" data-sizey="2" data-sizex="2" class="bg-gray-trans round"><br />
<div class="row-5"></div><br />
<div class="row-45"><br />
<div class="col-5"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy1" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-wifi"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy2" data-color="white" data-size="130" data-on-background-color="green" data-icon="fa-lock"></div><br />
<div class="col-5"></div><br />
</div><br />
<div class="row-45"><br />
<div class="col-5"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy1" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-bluetooth-b"></div><br />
<div class="col-45 center" data-type="switch" data-device="dummy3" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-podcast"></div><br />
<div class="col-5"></div><br />
</div><br />
<div class="row-5"></div><br />
</li><br />
<br />
<!-- ROW 1-2 Right --><br />
<br />
<li data-row="1" data-col="3" data-sizey="2" data-sizex="2" class="bg-gray-trans round"><br />
<div class="row-10"></div><br />
<div class="row-20"><br />
<div class="bold center " data-type="label" data-device="MPD1" data-get="Artist"></div><br />
</div><br />
<div class="row-20"><br />
<div class="center" data-type="label" data-device="MPD1" data-get="Title"></div><br />
</div><br />
<div class="row-50"><br />
<div class="col center" data-type="push" data-device="MPD1" data-icon="fa-step-backward" data-background-icon="-" data-set-on="previous" data-off-color="#000" data-on-color="white"><br />
</div><br />
<div class="col center" data-type="switch" data-device="MPD1" data-states='["play","pause","stop"]' data-set-states='["pause","play","play"]' data-background-icon="none" data-colors='["#000","#ddd","#ddd"]' data-icons='["fa-pause","fa-play","fa-play"]'><br />
</div><br />
<div class="col center" data-type="push" data-device="MPD1" data-icon="fa-step-forward" data-background-icon="-" data-set-on="next" data-off-color="#000" data-on-color="white"><br />
</div><br />
</div><br />
</li><br />
<br />
<!-- ROW 3--><br />
<br />
<li data-row="3" data-col="3" data-sizey="2" data-sizex="1" class="bg-gray-trans round"><br />
<div class="row-100"><br />
<div class="fullsize" data-type="controller" data-device="EsstischLampe" data-background-color="transparent" data-get="state" data-set="value"></div><br />
</div><br />
</li><br />
<li data-row="3" data-col="4" data-sizey="2" data-sizex="1" class="bg-gray-trans round"><br />
<div class="row-100"><br />
<div class="fullsize" data-type="controller" data-device="AvReceiver" data-get="volume" data-background-color="transparent" data-set="volume" data-icon="fa-volume-up" data-max="60"></div><br />
</div><br />
</li><br />
<li data-row="3" data-col="1" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="SchrankLicht_Sw" data-icon="fa-book"></div><br />
</li><br />
<li data-row="3" data-col="2" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="KuechenArbeitsLicht" data-icon="fa-beer"></div><br />
</li><br />
<li data-row="4" data-col="1" data-sizey="1" data-sizex="2" class="bg-gray-trans round"><br />
<div class="row"><br />
<div class="col-30 center fa fa-2x fa-sign-in"></div><br />
<div class="col-70 center" data-type="label" data-device="AvReceiver" data-get="input"></div><br />
</div><br />
</li><br />
<br />
<!-- ROW 5 --><br />
<br />
<li data-row="5" data-col="1" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="BadWandlicht" data-icon="fa-shower"></div><br />
</li><br />
<li data-row="5" data-col="2" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="SchlafzimmerLicht" data-icon="fa-bed"></div><br />
</li><br />
<li data-row="5" data-col="3" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="WohnenDeckenLicht" data-icon="fa-tv"></div><br />
</li><br />
<li data-row="5" data-col="4" data-sizey="1" data-sizex="1" class="bg-gray-trans round"><br />
<div class="fullsize" data-type="controlbutton" data-device="GartenLicht" data-icon="fa-envira"></div><br />
</li><br />
</ul><br />
</div><br />
</body><br />
<br />
</html><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=Datei:FTUI_controlbutton_controller.png&diff=22681Datei:FTUI controlbutton controller.png2017-09-23T15:33:22Z<p>Standarduser: </p>
<hr />
<div></div>Standarduserhttp://wiki.fhem.de/w/index.php?title=Datei:FTUI_controlbutton1.png&diff=22680Datei:FTUI controlbutton1.png2017-09-23T15:19:50Z<p>Standarduser: </p>
<hr />
<div></div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FHEM_Tablet_UI&diff=22679FHEM Tablet UI2017-09-23T15:16:53Z<p>Standarduser: Widgets "controlbutton" und "controller" eingefügt</p>
<hr />
<div>{{Infobox Modul<br />
|ModPurpose=Oberfläche für FHEM<br />
|ModType=x<br />
|ModFTopic=34233<br />
|ModForumArea=Frontends<br />
|ModTechName=n.a.<br />
|ModOwner=setstate ({{Link2FU|7023|Forum}})<br />
}}<br />
[[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.<br />
<br />
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.<br />
<br />
Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.<br />
<br />
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.<br />
<br />
[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]<br />
<br />
{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}} <br />
<br />
== Installation ==<br />
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:<br />
*Dateien aus dem GitHub-Repository herunterladen<br />
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)<br />
*Eine Beispieldatei anlegen<br />
<br />
<br />
{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.<br />
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}<br />
<br />
<br />
'''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.<br />
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code><br />
<br />
:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]<br />
<br />
<br />
'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.<br />
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code><br />
<br />
:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]<br />
<br />
<br />
'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.<br />
<br />
:<code>attr WEB longpoll websocket</code><br />
:bzw. bei Problemen mit ''websocket''<br />
:<code>attr WEB longpoll 1</code><br />
<br />
:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]<br />
<br />
<br />
'''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.<br />
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code><br />
<br />
:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]<br />
<br />
<br />
'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.<br />
<br />
<br />
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<br />
<br />
== Update ==<br />
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.<br />
<br />
'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:<br />
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
'''2.''' Update der geänderten Dateien durch Eingabe von:<br />
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
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.<br />
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
== Konfiguration ==<br />
===DOCTYPE===<br />
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.<br />
<br />
<syntaxhighlight lang="html"><br />
<!DOCTYPE html><br />
<html><br />
<head>...</head><br />
<body>...</body><br />
</html><br />
</syntaxhighlight><br />
<br />
===META-Parameter===<br />
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.<br />
<br />
Die Parameter sind immer nach diesem Schema aufgebaut:<br />
<meta name="[Parameter-Name]" content="[Parameter-Wert]"><br />
<br />
===Verbindung zu FHEM===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird<br />
|-<br />
|longpoll||1||0, 1||<br />
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)<br />
<br />
'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.<br />
|-<br />
|longpoll_type||websocket||websocket, ajax, 0||<br />
'''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.<br />
<br />
'''ajax''': Ajax wird für die Aktualisierung verwendet.<br />
<br />
'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.<br />
|-<br />
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.<br />
|-<br />
|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.<br />
|-<br />
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet<br />
|-<br />
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein<br />
|-<br />
|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. <br />
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. <br />
|}<br />
<br />
===Funktionalität===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|debug||0||0 - 5||Log-Level<br />
|-<br />
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.<br />
|-<br />
|toast_position||bottom-left||||Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.<br />
|-<br />
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)<br />
|-<br />
|username||||String||Benutzername für eine Basic-Authentifierung *<br />
|-<br />
|password||||String||Passwort für eine Basic-Authentifizierung *<br />
|}<br />
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.<br />
<br />
===Toast-Nachrichten===<br />
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]<br />
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.<br />
<br />
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.<br />
<br />
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:<br />
<pre><meta name='toast_position' content='top-center'></pre><br />
<br />
Möglich sind folgende Positionen:<br />
* <code>top-left</code><br />
* <code>top-right</code><br />
* <code>bottom-left</code><br />
* <code>bottom-right</code><br />
* <code>top-center</code><br />
* <code>bottom-center</code><br />
* <code>mid-center</code><br />
<br />
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:<br />
<pre><meta name='toast' content='2'></pre><br />
<br />
==Navigationsmethoden==<br />
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}} <br />
<br />
'''Unterschied zwischen Pagetab und Pagebutton:<br />
<br />
'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite<br />
[[FTUI_Widget_Pagetab]]<br />
<br />
'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite<br />
[[FTUI_Widget_Pagebutton]]<br />
<br />
==Gestaltung==<br />
===Layout-Optionen===<br />
* [[FTUI Layout Gridster|Gridster]]<br />
* [[FTUI Layout Flex|Flex]]<br />
* [[FTUI Layout Sheet|Tabelle]]<br />
* [[FTUI Layout Row|Reihen]]<br />
<br />
=== Farben ===<br />
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel: <br />
<br />
*HEX: #ADD8E6<br />
*RBG: rgb(173, 216, 230)<br />
*Namen: lightblue<br />
<br />
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.<br />
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.<br />
<br />
Empfohlene Farben sind z.B.:<br />
<br />
*Orange: <span style="color: #aa6900;">#aa6900</span><br />
*Rot: <span style="color: #ad3333;">#ad3333</span><br />
*Grün: <span style="color: #32a054;">#32a054</span><br />
*Blau: <span style="color: #6699FF;">#6699FF</span><br />
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span><br />
<br />
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/<br />
<br />
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.<br />
<br />
Hier am Beispiel eines blauen Farbschemas:<br />
<syntaxhighlight lang="html"><br />
<html><br />
<head><br />
[...]<br />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" /><br />
[...]<br />
</head><br />
</syntaxhighlight><br />
<br />
Diese Schema-Dateien ändern alle Widgets. Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.<br />
<br />
===CSS-Styles===<br />
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.<br />
<br />
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.<br />
<br />
=== CSS-Klassen ===<br />
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|row/col-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|hbox/vbox-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Vordergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Hintergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Rahmen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Größen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Schriftstil<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Sonstiges<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
=== Icons ===<br />
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.<br />
<br />
Verfügbare Icon-Schriftarten sind:<br />
* Eingebaute Icons ''ftui-windows'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code><br />
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code><br />
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code><br />
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code><br />
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi-'''. Beispiel: <code>data-icon="wi-day-rain-mix"</code><br />
<br />
Alternativ können auch Bilder Icons (bspw. png) über CSS verwendet werden. Bspw:<br />
<syntaxhighlight lang="html5"><br />
<head><br />
<style type="text/css"><br />
.logo-fhem {<br />
background: url(https://wiki.fhem.de/fhemlogo.png) no-repeat;<br />
width: 120px;<br />
height: 132px;<br />
background-size: contain;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div data-type="symbol" data-icon="logo-fhem"></div><br />
</body><br />
</syntaxhighlight><br />
<br />
== Widgets ==<br />
===Allgemeine Attribute===<br />
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:<br />
<br />
{| class="wikitable"<br />
|+allgemeine Attribute<br />
|-<br />
!align="right" |data-type<br />
|Widget-Typ<br />
|-<br />
!align="right" |data-device<br />
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)<br />
|-<br />
!align="right" |class<br />
|CSS-Klassen für Aussehen und Formatierung des Widgets<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Empfangen<br />
|-<br />
!align="right" |data-get<br />
|Reading Name<br />
|-<br />
!align="right" |data-get-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-get-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Senden<br />
|-<br />
!align="right" |data-set<br />
|Reading Name<br />
|-<br />
!align="right" |data-set-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-set-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
=== Integrierte Widgets ===<br />
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.<br />
<br />
* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.<br />
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen<br />
* [[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 <br />
* [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.<br />
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben<br />
* [[FTUI Widget Controlbutton|controlbutton]]: iOS-ähnlicher Button um zwischen zwei Zuständen zu schalten (z.B. on / off)<br />
* [[FTUI Widget Controller|controller]]: iOS-ähnlicher vertikaler Schieberegler um einen Wert einzustellen<br />
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit<br />
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel<br />
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert<br />
* [[FTUI Widget Eventmonitor|eventmonitor]]:<br />
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)<br />
* [[FTUI Widget Html|html]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe. <br />
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.<br />
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld<br />
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt. <br />
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn<br />
* [[FTUI Widget Label|label]]: Reading als Text anzeigen<br />
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert<br />
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM<br />
* [[FTUI Widget Medialist|medialist]]:<br />
* [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.<br />
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein<br />
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation<br />
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.<br />
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button<br />
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element <br />
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste<br />
* [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.<br />
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen<br />
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde<br />
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position<br />
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit.<br />
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird<br />
* [[FTUI Widget Slideout|slideout]]:<br />
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen<br />
* [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern<br />
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln<br />
* [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)<br />
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)<br />
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann<br />
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes<br />
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen<br />
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose<br />
<br />
===3rd Party Widgets===<br />
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.<br />
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an<br />
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an<br />
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots<br />
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices<br />
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.<br />
* [[FTUI Widget Filelog|filelog]]:<br />
* [[FTUI Widget Fullcalview|fullcalview]]:<br />
* [[FTUI Widget Gds|gds]]:<br />
* [[FTUI Widget Highchart|highchart]]:<br />
* [[FTUI Widget Highchart3d|highchart3d]]:<br />
* [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. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.<br />
* [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.<br />
* [[FTUI Widget Loading|loading]]:<br />
* [[FTUI Widget Meteogram|meteogram]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads<br />
* [[FTUI Widget Screensaver|screensaver]]:<br />
* [[FTUI Widget Svgplot|svgplot]]:<br />
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.<br />
* [[FTUI Widget UWZ|uwz]]: Anzeige der Warnungen der Unwetterzentrale<br />
* [[FTUI Widget Wakeup|wakeup]]:<br />
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul<br />
* [[FTUI Widget Weekprofile|weekprofile]]: Visualisierung des [[weekprofile]] Moduls<br />
<br />
==Templates==<br />
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.<br />
<br />
Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.<br />
<br />
===Einzelnes Widget===<br />
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.<br />
<br />
;Template-Seite<br />
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="symbol"<br />
data-device="dummy1"><br />
</syntaxhighlight><br />
<br />
;Haupt-Seite<br />
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.<br />
<syntaxhighlight lang="html" highlight="6"><br />
[...]<br />
<body><br />
<div class="gridster"><br />
<ul><br />
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1"><br />
<div data-template="template_symbol.html"></div><br />
</li><br />
</ul><br />
</div><br />
</body><br />
[...]<br />
</syntaxhighlight><br />
<br />
===Gridster-Element===<br />
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.<br />
<syntaxhighlight lang="html"><br />
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li><br />
</syntaxhighlight><br />
<br />
=== Widget-Gruppen ===<br />
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.<br />
<br />
=== Verwendung von Parametern ===<br />
==== Einfaches Beispiel ====<br />
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.<br />
<br />
In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.<br />
<br />
;Template-Seite<br />
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.<br />
<syntaxhighlight lang="html" highlight="2"><br />
<div data-type="label"<br />
data-device="par01"<br />
data-get="measured-temp"></div><br />
</syntaxhighlight><br />
<br />
;Haupt-Seite<br />
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.<br />
<syntaxhighlight lang="html"><br />
[...]<br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div><br />
[...]<br />
</syntaxhighlight><br />
<br />
==== Wetter-Slider mit Template ====<br />
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.<br />
<br />
;Template-Seite<br />
<syntaxhighlight lang="html"><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="&deg;C"></div><br />
<div class="inline"><br />
<div data-type="label" data-device="AgroWeather" data-get="par02"></div><br />
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div><br />
min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="&deg;C"></div><br />
</div><br />
</div><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div><br />
</div><br />
</syntaxhighlight><br />
<br />
;Haupt-Seite<br />
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.<br />
<syntaxhighlight lang="html"><br />
[...]<br />
<div data-type="swiper"><br />
<ul><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li><br />
</ul><br />
</div><br />
[...]<br />
</syntaxhighlight><br />
<br />
== JavaScript-Funktionen ==<br />
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.<br />
<br />
<br />
Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):<br />
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></syntaxhighlight><br />
<br />
<br />
Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):<br />
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown(&quot;WZ.Thermostat_Climate&quot;,&quot;up&quot;)}')">+</div></syntaxhighlight><br />
<br />
<br />
Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" data-device="dummy1" data-get="temperature"></div><br />
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div><br />
</syntaxhighlight><br />
<br />
== FAQ ==<br />
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.<br />
<br />
== Links ==<br />
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]<br />
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}<br />
* [[FTUI_Snippets|Snippets]]<br />
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]<br />
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}<br />
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_WindDirection&diff=22490FTUI Widget WindDirection2017-09-05T17:38:43Z<p>Standarduser: Beschreibung für data-lang korrigiert</p>
<hr />
<div>{{Todo|Die Attribute data-speed und data-calm erzeugen nicht das erwartete Ergebnis. Dies muss noch geklärt werden.}}<br />
<br />
Das [[{{PAGENAME}}|Widget wind_direction]] ist ein Widget für [[FHEM Tablet UI]], welches die Windrichtung auf einer Windrose anzeigt. Die Daten stammen aus einem Reading mit einer Textdarstellung der Windrichtung in der Form "N", "NNW" etc. oder mit der Gradzahl der Windrichtung (0-360).<br />
<br />
<gallery><br />
File:FTUI_Widget_Wind_direction_01.png<br />
</gallery><br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, welches die Wetterdaten bereitstellt.||||data-device="Proplanta"<br />
|-<br />
|'''data-direction'''||Reading mit der Windrichtung. Kann numerisch (0-360) oder in Textform ("NO") angegeben sein.||wind_direction||data-direction="windDir"<br />
|-<br />
|'''data-speed'''||Reading mit der Windgeschwindigkeit. Wird nur verwendet, um Windstille zu erkennen und entsprechend anzuzeigen.||wind_speed||data-speed="wind"<br />
|-<br />
|'''data-calm'''||Anzeigewert für Windstille||"-"||data-calm="~"<br />
|-<br />
|'''data-tickstep'''||Abstand der Teilstriche in Grad auf der Windrose. Sinnvoll sind nur Teiler von 360. Aus dem Abstand ergibt sich die Anzahl der Teilstriche.||45||data-tickstep="22.5"<br />
|-<br />
|'''data-angleoffset'''||Drehung der Windrose in Grad||0||data-angleoffset="90"<br />
|-<br />
|'''data-inputcolor'''||Farbe des Zeigers||#a86817||data-inputcolor="#ffffff"<br />
|-<br />
|'''data-lang'''||Sprache, in der die Werte für die Windrichtung in Textform übergeben werden (de/en)||de||data-lang="en"<br />
|-<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}<br />
|}<br />
Die beschränkte Anzahl der Größenklassen kann kompensiert werden durch direkte Eingabe der Größe (Höhe=Breite) in Pixeln; Standard: data-size=“150“.<br />
<br />
==Hinweise==<br />
Die Windrichtung wird meist in Verbindung mit der Windgeschwindigkeit (mittels [[FTUI Widget Label]]) dargestellt.<br />
<br />
==Beispiel==<br />
===Windrichtung und -geschwindigkeit===<br />
[[Datei:FTUI_Widget_Wind_direction_02.png|100px]]<br />
<syntaxhighlight lang="html"><br />
<div data-type="wind_direction"<br />
data-device="Proplanta"<br />
data-direction="windDir"<br />
data-speed="wind"<br />
data-calm="~"<br />
data-tickstep="22.5"<br />
class="mini"><br />
</div><br />
<br />
<div class="cell big" <br />
data-type="label" <br />
data-device="Proplanta" <br />
data-get="wind" <br />
data-unit="km/h" <br />
data-fix="0"><br />
</div><br />
</syntaxhighlight><br />
<br />
== Links ==<br />
* Icons für Wetterlagen: [[FTUI Widget Weather ]]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_WindDirection&diff=22489FTUI Widget WindDirection2017-09-05T15:41:04Z<p>Standarduser: Attribute data-inputcolor und data-lang hinzugefügt</p>
<hr />
<div>{{Todo|Die Attribute data-speed und data-calm erzeugen nicht das erwartete Ergebnis. Dies muss noch geklärt werden.}}<br />
<br />
Das [[{{PAGENAME}}|Widget wind_direction]] ist ein Widget für [[FHEM Tablet UI]], welches die Windrichtung auf einer Windrose anzeigt. Die Daten stammen aus einem Reading mit einer Textdarstellung der Windrichtung in der Form "N", "NNW" etc. oder mit der Gradzahl der Windrichtung (0-360).<br />
<br />
<gallery><br />
File:FTUI_Widget_Wind_direction_01.png<br />
</gallery><br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, welches die Wetterdaten bereitstellt.||||data-device="Proplanta"<br />
|-<br />
|'''data-direction'''||Reading mit der Windrichtung. Kann numerisch (0-360) oder in Textform ("NO") angegeben sein.||wind_direction||data-direction="windDir"<br />
|-<br />
|'''data-speed'''||Reading mit der Windgeschwindigkeit. Wird nur verwendet, um Windstille zu erkennen und entsprechend anzuzeigen.||wind_speed||data-speed="wind"<br />
|-<br />
|'''data-calm'''||Anzeigewert für Windstille||"-"||data-calm="~"<br />
|-<br />
|'''data-tickstep'''||Abstand der Teilstriche in Grad auf der Windrose. Sinnvoll sind nur Teiler von 360. Aus dem Abstand ergibt sich die Anzahl der Teilstriche.||45||data-tickstep="22.5"<br />
|-<br />
|'''data-angleoffset'''||Drehung der Windrose in Grad||0||data-angleoffset="90"<br />
|-<br />
|'''data-inputcolor'''||Farbe des Zeigers||#a86817||data-inputcolor="#ffffff"<br />
|-<br />
|'''data-lang'''||Sprache, in der die Windrose beschriftet ist (de/en)||de||data-lang="en"<br />
|-<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}<br />
|}<br />
Die beschränkte Anzahl der Größenklassen kann kompensiert werden durch direkte Eingabe der Größe (Höhe=Breite) in Pixeln; Standard: data-size=“150“.<br />
<br />
==Hinweise==<br />
Die Windrichtung wird meist in Verbindung mit der Windgeschwindigkeit (mittels [[FTUI Widget Label]]) dargestellt.<br />
<br />
==Beispiel==<br />
===Windrichtung und -geschwindigkeit===<br />
[[Datei:FTUI_Widget_Wind_direction_02.png|100px]]<br />
<syntaxhighlight lang="html"><br />
<div data-type="wind_direction"<br />
data-device="Proplanta"<br />
data-direction="windDir"<br />
data-speed="wind"<br />
data-calm="~"<br />
data-tickstep="22.5"<br />
class="mini"><br />
</div><br />
<br />
<div class="cell big" <br />
data-type="label" <br />
data-device="Proplanta" <br />
data-get="wind" <br />
data-unit="km/h" <br />
data-fix="0"><br />
</div><br />
</syntaxhighlight><br />
<br />
== Links ==<br />
* Icons für Wetterlagen: [[FTUI Widget Weather ]]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=TRAFFIC&diff=22477TRAFFIC2017-09-03T14:58:23Z<p>Standarduser: Attribut "GoogleMapsStroke" korrigiert und um Hinweis zu Hin-/Rückweg ergänzt</p>
<hr />
<div>{{Infobox Modul<br />
|ModPurpose=Verkehrsdaten zu fest definierten Routen ermitteln<br />
|ModType=d<br />
|ModForumArea=Unterstützende Dienste<br />
|ModTechName=98_TRAFFIC.pm<br />
|ModOwner=jmike <br />({{Link2Forum|Topic=56045|LinkText=Forum}} / [[Benutzer:Jmike|Wiki]])<br />
}}<br />
<br />
Dieses Modul erfasst Fahrzeiten in aktueller Verkehrslage mittels Google Maps Directions API.<br />
<br />
== Features / Funktionen ==<br />
* Distanz einer Route<br />
* Fahrzeit ohne Verkehr<br />
* Fahrzeit mit Verkehr<br />
* Verzögerung der geplanten Route<br />
* Waypoints definieren<br />
* Ausgabesprache festlegen <br />
* Outputs in Sekunden / Meter (raw)<br />
* Ausgabe als Text, in Minuten, Sekunden oder als Durchschnitt<br />
* Device STATE frei wählbar<br />
* einstellbares Update Interval<br />
* update-burst für Stosszeiten<br />
* Strecke kann zusätzlich in gegengesetzte Richtung ausgelesen werden<br />
* Ankunfszeit bei Abfahrt zum Update-Zeitpunkt<br />
* verschiedene Travel Modes (driving, walking, bicycling und transit)<br />
* flexibler Update Schedule für Stosszeiten<br />
* integrierte, konfigurierbare Google Map zum Visualisieren der konfigurierten Route<br />
<br />
== Voraussetzungen ==<br />
Erstmal muss ein eigener API Key angefordert werden. <br />
Das geht über Googles [https://console.developers.google.com/apis/ API Manager]<br><br />
Dort "Google Maps Directions API" suchen und ein neues Projekt erstellen, anschliessend API aktivieren.<br />
Für die Karte ist zusätzlich der "Google Maps JavaScript API" notwendig und sollte an dieser Stelle auch aktiviert werden.<br />
<br />
Je nach FHEM Installation zusätzlich die Perl Module LWP::Simple, JSON und MIME::Base64 nach installieren:<br><br />
<code>sudo apt-get install libwww-perl</code><br><br />
<code>sudo apt-get install libjson-perl</code><br><br />
oder<br><br />
<code>sudo cpan -i LWP::Simple</code><br><br />
<code>sudo cpan -i JSON</code><br><br />
<code>sudo cpan -i MIME::Base64</code><br />
<br />
== Definition ==<br />
<code> define <devicename> TRAFFIC <API-KEY> [update-interval] </code><br />
<br />
'''Beispiel:'''<br><br />
<code>define muc2berlin TRAFFIC ABCDEFGHIJKLMNOPQRSTVWYZ 600</code><br />
<br />
Der API Key muss selbstverständlich mit dem eigenen Key aus dem API Manager ersetzt werden.<br><br />
Das Intervall in Sekunden ist optional, der default beträgt 3600 (1 Stunde).<br><br />
Attribute start_address und end_address definieren.<br />
<br />
== Readings ==<br />
* average_delay_min<br />
* average_duration_in_traffic_min<br />
* average_duration_min<br />
* delay<br />
* delay_min<br />
* distance<br />
* duration<br />
* duration_in_traffic<br />
* duration_in_traffic_min<br />
* duration_in_traffic_sec<br />
* duration_min<br />
* duration_sec<br />
* [error_message]<br />
* eta<br />
* state<br />
* status<br />
<br />
== Befehle ==<br />
<br />
==== update [burst-update-count] [burst-update-interval] ====<br />
Readings manuell aktualisieren, der optionale Burst kann wie folgt genutzt werden:<br><br />
- erster Wert gibt an wie viele Updates abgearbeitet werden<br><br />
- zweiter Wert gibt an wie viele Sekunden zwischen den Updates gewartet wird<br><br />
<br />
Beispiel um für 1 Stunde alle 5 Minuten zu aktualisieren:<br><br />
<code>set <device> update 12 300</code><br />
<br />
<br />
== STATE ==<br />
* Initialized - modul initialisiert<br />
* OK - update war erfolgreich<br />
* incomplete configuration - Konfigurationsfehler (start_address oder end_address leer)<br />
* <APIRETURN> - Fehlermeldung von Google Maps, falls vorhanden (siehe Reading error_message)<br />
* <Reading> - der Wert des Readings welches mit Attribut stateReading ausgewählt wurde<br />
* disabled - das Device wurde über das Attribut disable deaktiviert<br />
<br />
== Attribute ==<br />
<br />
{| class="wikitable"<br />
!Attribut<br />
!Default Wert<br />
!mögliche Werte<br />
!Beschreibung<br />
!Beispiel<br />
|-<br />
!align="right" |start_address<br />
|<br />
|<text><br />
|die vollständige Startadresse (erforderlich!)<br />
|Startstr 1, 12345 Startcity<br />
|-<br />
!align="right" |end_address<br />
|<br />
|<text><br />
|die vollständige Zieladresse (erforderlich!)<br />
|Zielstr 99, 99099 Zielstadt<br />
|-<br />
!align="right" |raw_data<br />
|0<br />
|0:1<br />
|legt Readings an mit allen unbearbeiteten Werten <br />
|<br />
|-<br />
!align="right" |language<br />
|<br />
|de, en, etc.<br />
|Google ermittelt die Sprache automatisch, falls nicht fest definiert<br />
|de<br />
|-<br />
!align="right" |waypoints<br />
|<br />
|lat, long<nowiki>|</nowiki>lat, long<br />
|fixe Wegpunkte auf der Strecke, mehrere Werte per pipe <nowiki>(|)</nowiki> trennen, LAT, LONG Koordinaten angeben<br />
|48.187918, 11.590514<br />
|-<br />
!align="right" |returnWaypoints<br />
|<br />
|lat, long<nowiki>|</nowiki>lat, long<br />
|fixe Wegpunkte für den Rückweg, mehrere Werte per pipe <nowiki>(|)</nowiki> trennen, LAT, LONG Koordinaten angeben, wenn leer werden "waypoints" in umgekehrter Reihenfolge verwendet<br />
|48.187918, 11.590514<br />
|-<br />
!align="right" |disable<br />
|0<br />
|0:1<br />
|Modul deaktivieren<br />
|1<br />
|-<br />
!align="right" |stateReading<br />
|<br />
|<beliebiges-Reading><br />
|Name eines Readings, dessen Wert in den STATE des Devices geschrieben wird<br />
|delay_min<br />
|-<br />
!align="right" |outputReadings<br />
|text<br />
|text,min,sec,average<br />
|Konfiguration, welche Readings erstellt werden sollen, eine oder mehrere möglich<br />
|text min<br />
|-<br />
!align="right" |includeReturn<br />
|0<br />
|0:1<br />
|aktiviert/deaktiviert, ob die gleiche Strecke in umgekehrter Richtung hinzugefügt werden soll<br>Readings werden mit return_* angegeben<br />
|1<br />
|-<br />
!align="right" |verbose<br />
|1<br />
|0:1:2:3:4:5<br />
|gibt vor, wie ausführlich geloggt wird<br />
|5<br />
|-<br />
!align="right" |travelMode<br />
|driving<br />
|driving:walking:bicycling:transit<br />
|Fortbewegungsmethode für Kalkulation<br />
|walking<br />
|-<br />
!align="right" |updateSchedule<br />
|<br />
|<Beginn-volle-Stunde>-<Ende-volle-Stunde> [<Tag>] <update-Intervall-in-Sekunden><br />
|definiert einen flexiblen Zeitraum für feinere Updates, Tag als Zahl (Sonntag 0, Montag 1 etc.), mehrere Definitionen per <nowiki>(|)</nowiki> getrennt<br />
| 6-8 1 60|6-8 2 60|6-8 3 60|6-8 4 60|6-8 5 60<br />
|-<br />
!align="right" |GoogleMapsStyle<br />
|default<br />
|default,silver,dark,night<br />
|definiert einen der vorgegebenen Map Styles<br />
|<i>dropdown</i><br />
|-<br />
!align="right" |GoogleMapsSize<br />
|800,600<br />
|<Breite>,<Höhe><br />
|definiert die Breite und Höhe der Karte<br />
| 600,300<br />
|-<br />
!align="right" |GoogleMapsCenter<br />
|<i>auto-generiert</i><br />
|<lat>,<lang><br />
|definiert den Mittelpunkt der Karte<br />
| 48.2322157,11.6867434 <br />
|-<br />
!align="right" |GoogleMapsZoom<br />
|10<br />
|<Zoom wert><br />
|definiert den Zoom Wert der Karte<br />
| 14<br />
|-<br />
!align="right" |GoogleMapsStroke<br />
|#4cde44,6,100,#FF0000,1,100<br />
|<#-6-digit-hex-code>,[<weight>[,<opacity>],]<#-6-digit-hex-code>,[<weight>,[<opacity>]]<br />
|definiert die Farbe der Wegstrecken im HEX Format, Dicke der Linie und Transparenz. Getrennte Angabe von Hin- und Rückweg sind möglich.<br />
| #019cdf,#ffeb19<br>#019cdf,15,50,#ffeb19,15,50<br>#019cdf,20,80,#ffeb19<br />
|-<br />
!align="right" |GoogleMapsTrafficLayer<br />
|0<br />
|0:1<br />
|schaltet den Standard Google Maps Traffic Overlay ein/aus<br />
| 1<br />
|-<br />
!align="right" |GoogleMapsDisableUI<br />
|0<br />
|0:1<br />
|Dropdown um die Map Controls zu deaktivieren<br />
| 1<br />
|-<br />
|}<br />
<br />
<br />
== Integrierte Karte ==<br />
* Zum Überprüfen der verwendeten Wegstrecke können der Hin- und Rückweg für ein TRAFFIC-Device auf einer Karte angezeigt werden.<br />
* Um die Karte anzuzeigen einfach oben auf "toggle Map" klicken<br />
* Für Einbindung in andere Anwendungen (TabletUI z.b) kann die Karte zusätzlich über den eingeblendeten Link erreicht werden: <nowiki>http://fhem-ip:port/fhem/TRAFFIC?name=<TRAFFIC-DEVICE></nowiki><br />
* Karte anpassen:<br />
** Die Karte lässt sich über folgende Attribute anpassen:<br />
** GoogleMapsStyle, GoogleMapsSize, GoogleMapsCenter, GoogleMapsZoom, GoogleMapsStroke und GoogleMapsTrafficLayer<br />
** GoogleMapsZoom und GoogleMapsCenter können direkt in der Kartenansicht gespeichert werden. Dazu die Karte verschieben/zoomen und anschliessend auf die Buttons "save Zoom" bzw. "save Center" klicken<br />
** weitere Beispiele bitte dem Forum entnehmen<br />
<br />
== Bekannte Probleme ==<br />
* STATE: "REQUEST DENIED"<br />
* Reading error_message: "This API project is not authorized to use this API"<br />
** => API Key ist nicht aktiviert. Google API > API Manager > Google Maps Directions API > AKTIVIEREN <br />
<br />
* STATE: "UNKNOWN_ERROR"<br />
** => Es liegt ein Fehler bei Google vor.<br />
** => "UNKNOWN_ERROR indicates a directions request could not be processed due to a server error. The request may succeed if you try again." [https://developers.google.com/maps/documentation/javascript/directions?hl=de]<br />
<br />
* STATE: "OVER_QUERY_LIMIT"<br />
** Es wurden mehr als 2500 requests pro Tag abgesetzt. Abhilfe: Update Intervalle der TRAFFIC Devices erhöhen und "burst" zu den Stosszeiten nutzen.<br />
<br />
* STATE: "ZERO_RESULTS"<br />
** Die Waypoint Definition kann Google nicht realisieren. Statt Städtenamen besser exakte Koordinaten verwenden.<br />
<br />
* Karte zeigt nur ein graues Bild "Ops..."<br />
** checkt eure Javascript Konsole nach dem exakten Fehler<br />
** Google Maps API error: ApiNotActivatedMapError https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error<br />
** => Google Maps JavaScript API aktivieren<br />
<br />
== Tips ==<br />
* täglicher Burst Update zum Feierabend, 1 Stunde alle 5 Minuten updaten:<br />
** <code>define FeierabendCheck AT *17:00 set <device> update 12 300</code><br />
<br />
* komplette Reisezeit, also Hin- und Rückweg, im STATE anzeigen:<br />
** <code>attr <device> stateFormat {int(ReadingsVal($name,"delay_min",0)) + int(ReadingsVal($name,"return_delay_min",0))}</code><br />
<br />
* updateSchedule einsetzen um default update Intervall zu verfeinern<br />
** Montag bis Freitag von 6 bis 8 Uhr alle 60 Sekunden<br />
** <code>attr <device> updateSchedule 6-8 1 60|6-8 2 60|6-8 3 60|6-8 4 60|6-8 5 60</code><br />
** jeden Tag von 17 bis 19 Uhr alle 2 Minuten<br />
** <code>attr <device> updateSchedule 17-19 120</code><br />
<br />
* Waypoints definieren (Tip von erdo_king)<br />
** In Google-Maps die gewünschte Route auswählen (am PC)<br />
** Auf eine signifikante Stelle der Route klicken - hierbei auf die Fahrtrichtung achten!<br />
** Hier auf die Koordinaten klicken, diese können dann aus dem Suchfeld kopiert werden<br />
** Im Browser zurückgehen, bis die Route wieder sichtbar ist (zum späteren Datenabgleich)<br />
** Waypoints in FHEM deklarieren, Daten aktualisieren (set <device> update)<br />
** distance + duration mit den Daten von Google-Maps am PC abgleichen<br />
<br />
== to Do ==<br />
* Reading error_message löschen wenn update erfolgreich<br />
* deutsche Commandref<br />
<br />
== Weblinks ==<br />
* {{Link2Forum|Topic=56045|LinkText=Modul Vorstellung und Diskussionen}}<br />
* [http://fhem.de/commandref.html#TRAFFIC Commandref]<br />
* [https://console.developers.google.com/apis Google API Manager]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Circlemenu&diff=22472FTUI Widget Circlemenu2017-09-03T10:58:08Z<p>Standarduser: Mögliche Werte für data-direction ergänzt.</p>
<hr />
<div>Das [[{{PAGENAME}}|Circlemenu Widget]] ist ein Widget für [[FHEM Tablet UI]], das mehrere Widgets nach einem Klick auf ein einziges anzeigen kann.<br />
<br />
<gallery><br />
File:Circlemenu tabletUI.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-item-diameter'''||Durchmesser der einzelnen Objekte||52||data-item-diameter="100"<br />
|-<br />
|'''data-circle-radius'''||Radius des Kreises, in dem die Objekte angeordnet werden||70||data-circle-radius="200"<br />
|-<br />
|'''data-border'''||Stil der Objekte (''round'', ''square'')||round||data-border="square"<br />
|-<br />
|'''data-item-width'''||Fixer Wert für die Breite des Widgets in px||data-item-diameter||data-item-width="120"<br />
|-<br />
|'''data-item-height'''||Fixer Wert für die Höhe des Widgets in px||data-item-diameter||data-item-height="100"<br />
|-<br />
|'''data-direction'''||Position der Objekte in Relation zur Mitte||full||data-direction="right-half"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
{{FTUI Klasse|keepopen}}{{FTUI Klasse|noshade}}<br />
|}<br />
<br />
==Hinweise==<br />
Mögliche Werte für '''data-direction''' sind:<br />
* '''vertical'''<br />
* '''vertical-top'''<br />
* '''horizontal'''<br />
* '''bottom-left'''<br />
* '''bottom'''<br />
* '''right'''<br />
* '''left'''<br />
* '''top'''<br />
* '''bottom-half'''<br />
* '''right-half'''<br />
* '''left-half'''<br />
* '''top-half'''<br />
* '''top-left'''<br />
* '''top-right'''<br />
* '''full'''<br />
* '''bottom-right'''<br />
<br />
==Beispiele==<br />
===Einfaches Beispiel===<br />
Dieses Beispiel zeigt nach einem Klick auf einen Button mehrere Buttons zur Auswahl von Werten.<br />
<syntaxhighlight lang="html"><br />
<div class="col-1-2"><br />
<div data-type="circlemenu" class=""><br />
<ul><br />
<li><div data-type="push" data-icon="fa-wrench"></div></li><br />
<li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level -6" data-icon="">-6</div></li><br />
<li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level -2" data-icon="">-2</div></li><br />
<li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 0" data-icon="">0</div></li><br />
<li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 3" data-icon="">2</div></li><br />
<li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 9" data-icon="">9</div></li><br />
<li><div data-type="push" data-device="AvReceiver" data-set-on="subwoofer-temporary-level 12" data-icon="">12</div></li><br />
</ul><br />
</div><br />
<div class="">Woofer</div><br />
</div><br />
</syntaxhighlight><br />
[[File:Circlemenu tabletUI.png]]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Chart&diff=21605FTUI Widget Chart2017-05-25T14:13:31Z<p>Standarduser: Sprungmarken von Attribute-Tabelle zu Hinweisen hinzugefügt.</p>
<hr />
<div>Das [[{{PAGENAME}}|Chart Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem sich verschiedenste Diagramme darstellen lassen. Die Aneinanderreihung mehrerer Werte eines Device-Readings zu einem zeitlichen Verlauf wird dabei als Graph bezeichnet.<br />
<br />
Es können beliebige Werte dargestellt und entsprechend der Sinnhaftigkeit, oder persönlichem Geschmack, formatiert werden. Farbe und Form der Linien sind je Graph einstellbar, auch wenn mehrere gleichzeitig in einem Diagramm angezeigt werden.<br />
<br />
Jedes Diagramm kann zwei Y-Achsen besitzen. Die primäre Y-Achse (primary) wird auf der linken Seite angezeigt, die sekundäre Y-Achse (secondary) auf der rechten Seite. Beide Achsen können unterschiedlich formatiert werden.<br />
<br />
<gallery><br />
File:Chart_tabletUI.png<br />
Datei:FTUI Widget Chart Stacked.png<br />
Datei:FTUI Widget Chart-fc-Proplanta.png<br />
Datei:Wetterchart2.png<br />
Datei:PieChart.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
! style="width:150px"|Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||Name des FHEM-Device, das die Aktualisierung des Charts triggert||||data-device="WohnzimmerHeizung"<br />
|-<br />
|'''data-get'''||Reading, das das Update des Diagramms triggert||'STATE'||<br />
|-<br />
|'''data-logdevice'''||Name des Log-Device, das dargestellt werden soll, oder ein Array, um mehrere Werte in einem Diagramm darzustellen||||data-logdevice="FileLog_WohnzimmerHeizung"<br />
|-<br />
|'''data-logfile'''|| Name des Log-Files, aus dem die Daten entnommen werden sollen (oder Array)||'-' = aktuelle Datei||data-logfile="WohnzimmerHeizung-2015.log"<br />
|-<br />
|'''data-columnspec'''||Ermittelt den Wert aus dem Log-File, der angezeigt werden soll (oder Array)||||data-columnspec="4:meas.*"<br />
|-<br />
|'''data-style'''||Stil, wie die Graph-Linien dargestellt werden sollen (z.B. 'SVGplot l0' oder 'ftui l0dash'), oder ein Array, wenn mehrere Linien unterschiedlich dargestellt werden sollen (siehe [[#Aussehen_der_Linien|Hinweise]])||||<br />
|-<br />
|'''data-ptype'''||Form, wie die Graphen dargestellt werden sollen (z.B. 'lines', 'cubic' oder 'fa-cog'), oder ein Array (siehe [[#Form_der_Linien|Hinweise]])||'lines'||<br />
|-<br />
|'''data-uaxis'''||Name der Achse, die verwendet werden soll ('primary' = links, oder 'secondary' = rechts), oder ein Array||'primary'||<br />
|-<br />
|'''data-legend'''||Bezeichnung des Graphen (wird in Legende und am Cursor angezeigt), oder ein Array||||<br />
|-<br />
|'''data-minvalue'''||Minimaler Wert, der auf der linken Y-Achse ('primary') angezeigt werden soll. 'auto' = automatische Berechnung||'10'||<br />
|-<br />
|'''data-maxvalue'''||Maximaler Wert, der auf der linken Y-Achse ('primary') angezeigt werden soll. 'auto' = automatische Berechnung||'30'||<br />
|-<br />
|'''data-minvalue_sec'''||Minimaler Wert, der auf der rechten Y-Achse ('secondary') angezeigt werden soll. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-maxvalue_sec'''||Maximaler Wert, der auf der rechten Y-Achse ('secondary') angezeigt werden soll. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-xticks'''||Abstand zwischen den vertikalen Hilfslinien (bezogen auf die X-Achse) in Minuten. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-yticks'''||Abstand zwischen den horizontalen Hilfslinien (bezogen auf die linke Y-Achse). Kann auch ein Array mit Werte-Paaren enthalten, um die Linien mit Text zu beschriften.||'auto'||data-yticks='[[0,"open"],[1,"closed"]]'<br />
|-<br />
|'''data-yticks_sec'''||Abstand zwischen den horizontalen Hilfslinien (bezogen auf die rechte Y-Achse). Kann auch ein Array mit Werte-Paaren enthalten, um die Linien mit Text zu beschriften.||'auto'||data-yticks='[[0,"open"],[1,"closed"]]'<br />
|-<br />
|'''data-yticks_prio'''||Legt fest, ob die horizontalen Hilfslinien der linken (primary) oder der rechten (secondary) Y-Achse zugeordnet werden sollen||||data-yticks_prio='secondary'<br />
|-<br />
|'''data-ytype'''||Legt fest, ob die primäre y Achse logarithmisch sein soll (wert "log")||||data-ytype="log"<br />
|-<br />
|'''data-ytype_sec'''||Legt fest, ob die sekundäre y Achse logarithmisch sein soll (wert "log")||||data-ytype_sec="log"<br />
|-<br />
|'''data-daysago_start'''||Anzahl der vergangenen Tage, wo das Diagramm beginnen soll. '0' = Beginn heute 0:00 Uhr. (siehe [[#Zeitstrahl_.2F_Start_.26_Ende_auf_der_X-Achse|Hinweise]])||'0'||<br />
|-<br />
|'''data-daysago_end'''||Anzahl der vergangenen Tage, wo das Diagramm enden soll. '-1' = Ende heute 24:00 Uhr. (siehe [[#Zeitstrahl_.2F_Start_.26_Ende_auf_der_X-Achse|Hinweise]])||'-1'||<br />
|-<br />
|'''data-nofulldays'''||Aktiviert/deaktiviert die Rundung der X-Achse auf ganze Tage. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-timeformat'''||Zeitformat für die Anzeige an der X-Achse (siehe [[#Zeitformat_der_X-Achse|Hinweise]])||||<br />
|-<br />
|'''data-ytext'''||Text, der neben der linken Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-ytext_sec'''||Text, der neben der rechten Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-yunit'''||Einheit, die an der linken Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-yunit_sec'''||Einheit, die an der rechten Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-crosshair'''||Aktiviert/deaktiviert den Fadenkreuz-Cursor. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-cursorgroup'''||Zahl zur Gruppierung der Werte am Fadenkreuz-Cursor ([[#Fadenkreuz-Cursor|Hinweise]])||||<br />
|-<br />
|'''data-scrollgroup'''||Zahl zur Gruppierung der Graphen beim Bewegen und Zoomen. Alle Linien mit der selben Zahl werden miteinander gekoppelt und bewegen sich gemeinsam.||||<br />
|-<br />
|'''data-showlegend'''||Aktiviert/deaktiviert die Anzeige der Legene. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-legendpos'''||Array von zwei Werten, die die horizontale und vertikale Position der Legende festlegen ([[#Legende|Hinweise]])||'["top","right"]'||<br />
|-<br />
|'''data-legend_horiz'''||legt fest, dass die Legendeneinträge horizontal angeordnet sind (anstatt vertikal wie im default Fall)||false||data-legend_horiz="true"<br />
|-<br />
|'''data-width'''||Breite des Diagramms (in % oder px)||||<br />
|-<br />
|'''data-height'''||Höhe des Diagramms (in % oder px)||||<br />
|-<br />
|'''data-graphsshown'''||Aktiviert/deaktiviert die initiale Anzeige von Graphen. Binärwert ('true' oder 'false'). Array, wenn mehrere Linien angezeigt werden sollen.||||<br />
|-<br />
|'''data-ddd'''||Einstellung für die 3D-Drehung ([[#3-dimensionale_Drehung|Hinweise]])||||data-ddd='["40","60","0"]'<br />
|-<br />
|'''data-dddspace'''||Abstand zwischen zwei Graphen, wenn die 3D-Anzeige aktiviert wurde (px)||'15'||<br />
|-<br />
|'''data-dddwidth'''||Breite, bzw. Tiefe der Graphen, wenn diese 3-dimensional angezeigt werden (px)||'10'||<br />
|-<br />
|'''data-title'''||Titel, der über dem Diagramm angezeigt werden soll. Der Inhalt kann auch dynamisch erzeugt werden ([[#Diagrammtitel|Hinweise]])||||<br />
|-<br />
|'''data-prefetch'''||Legt fest, ob zusätzliche Daten rechts und links des Plots im Hintergrund vom Server geholt werden sollen||false||data-prefetch="true"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|fullsize}}{{FTUI Klasse|noticks}}{{FTUI Klasse|nobuttons}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}<br />
|}<br />
<br />
<br />
Folgende Widget-spezifsche Klassen können zusätzlich in einer eigenen CSS-Datei definiert werden:<br />
<br />
{|class="wikitable"<br />
!Klasse<br />
!Beschreibung<br />
|-<br />
|'''chart-background'''||Hintergrundfarbe des Diagramms<br />
|-<br />
|'''buttons'''||Größe und Farbe der Buttons<br />
|-<br />
|'''text.axes'''||Generelle Schriftart und Farbe der Achsen<br />
|-<br />
|'''gridlines'''||Generelle Farbe und Größe der Gitternetzlinien<br />
|-<br />
|'''xaxis'''||Schriftart, Größe und Farbe der X-Achse<br />
|-<br />
|'''yaxis'''||Schriftart, Größe und Farbe der Y-Achse<br />
|-<br />
|'''xticks'''||Schriftart, Größe und Farbe der X-Achse (Zwischenlinien)<br />
|-<br />
|'''yticks'''||Schriftart, Größe und Farbe der Y-Achse (Zwischenlinien)<br />
|-<br />
|'''crosshair'''||Schriftart, Größe und Vordergrund/Hintergrundfarbe der Momentanwerte am Fadenkreuzcursor<br />
|-<br />
|'''caption'''||Schriftart, Größe und Farbe der Text-Buttons für Legende und Cursor<br />
|-<br />
|'''legend'''||Schriftart, Größe und Farbe der Legende<br />
|}<br />
<br />
Die Standardwerte sind in der Datei <code>css/ftui_chart.css</code> zu finden.<br />
<br />
==Datenquellen==<br />
Beim Chart-Widget können die gleichen Datenquellen genutzt werden, die auch für SVG-Plots verwendet werden können:<br />
# [[FileLog]]: Verlaufsdaten einer Textdatei entnehmen<br />
# [[DbLog]]: Verlaufsdaten einer Datenbank entnehmen<br />
# [[LogProxy]]: Daten dynamisch berechnet<br />
<br />
===FileLog===<br />
Um [[FileLog]] zu nutzen, wird als '''data-logdevice''' das FHEM-Device für das FileLog angegeben. In der Regel entstehen hier im Laufe der Zeit mehrere Log-Dateien. Name und Anzahl sind von der Definition abhängig - meist wird jeden Monat oder jedes Jahr eine neue Datei angelegt. Die gewünschte Datei kann mit '''data-logfile''' ausgewählt werden. Möchte man stets die aktuelle Datei verwenden (macht vor allem dann Sinn, wenn man die neusten Daten anzeigen will), kann das Attribut weggelassen, oder explizit <code>-</code> eingetragen werden. Zuletzt wird '''data-columnspec''' benötigt, um die gewünschten Daten zu in der Logdatei zu identifizieren. Hier wird die Spalte, in der die Daten stehen, gefolgt von Doppelpunkt und Readingname angegeben.<br />
<br />
Für ein Heizungsthermostat von Homematic mit dem Namen ''DG.wz.HZ.Heizungsventil'' ergibt sich somit beispielhaft folgende Definition, um gemessene Temperatur, Sollwert und Ventilstellung im Diagramm darzustellen:<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="FileLog_DG.wz.HZ.Heizungsventil"<br />
data-logfile="-"<br />
data-columnspec='["4:measured-temp","4:desired-temp","4:actuator"]'<br />
...><br />
</div><br />
</source><br />
<br />
Sollen Daten von unterschiedlichen Geräten in einem Diagramm angezeigt werden, muss '''data-logdevice''' als Array nach dem Schema <code>data-logdevice='["<Logdatei_1>","<Logdatei_2>","<Logdatei_3>"]'</code> definiert werden. Für jeden Eintrag in '''data-columnspec''' muss es auch den passenden Eintrag in '''data-logdevice''' geben (auch die Reihenfolge ist relevant).<br />
<br />
===DbLog===<br />
Um die Daten aus [[DbLog]] anzeigen zu können, werden die gleichen Attribute verwendet und mit für die Datenbank angepassten Werten beschrieben. Bei '''data-logdevice''' das FHEM-Device für die Datenbank angegeben. Im nachfolgenden Beispiel heißt diese <code>logdb</code> und besitzt wie üblich zwei Tabellen: <code>current</code> und <code>history</code> (der zeitliche Verlauf liegt in letzterer). Der Tabellenname wird bei '''data-logfile''' eingetragen. Da die Daten in der Datenbank etwas anders abgelegt werden, muss auch '''data-columnspec''' entsprechend angepasst werden. Statt der Spalte wird hier das FHEM-Device, gefolgt von Doppelpunkt und Readingname angegeben.<br />
<br />
Für das oben beschriebene Homematic-Heizungsthermostat ergibt sich dann folgende Definition, um die gleichen Daten aus einer Datenbank, statt einem LogFile zu lesen:<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="logdb"<br />
data-logfile="HISTORY"<br />
data-columnspec='["DG.wz.HZ.Heizungsventil:measured-temp","DG.wz.HZ.Heizungsventil:desired-temp","DG.wz.HZ.Heizungsventil:actuator"]'<br />
...><br />
</div><br />
</source><br />
<br />
Für die Anzeige von unterschiedlichen Geräten in einem Diagramm, muss nur '''data-columnspec''' entsprechend angepasst werden, solange sich alle Daten in der Datenbank befinden.<br />
<br />
===LogProxy===<br />
Um die Daten mittels [[LogProxy]] berechnen und anzeigen zu können, muss in FHEM ein LogProxy-Device definiert sein:<br />
<br />
<pre><br />
define myLogProxy logProxy<br />
</pre><br />
<br />
Weitere Einstellungen am LogProxy sind nicht nötig, die bloße Existenz reicht.<br />
<br />
Bei '''data-logdevice''' wird das FHEM-Device für den LogProxy angegeben. Im nachfolgenden Beispiel heißt dieses <code>myLogProxy</code>. Das Attribut '''data-logfile''' wird für LogProxy nicht benötigt. Befinden sich nur LogProxy-Werte im Diagramm kann das Attribut komplett entfallen. Sollen weitere Werte angezeigt werden, bleibt die Definition im Array einfach leer.<br />
<br />
Im Attribut '''data-columnspec''' wird eine Formel angegeben, wie die Werte berechnet werden sollen. Hier können die Formeln 1:1 von einem eventuell vorhandenen SVG-Plot übernommen werden. '''Dabei gibt es jedoch folgendes zu beachten:''' Befindet sich die Formel in einem Array, dürfen die Formeln keine Anführungszeichen (<code>"</code>) beinhalten. Stattdessen müssen sie als escapter Ascii-Code (<code>\\x22</code>) eingefügt werden.<br />
<br />
Das nachfolgende Beispiel zeigt, wie Vorhersagewerte aus einem FHEM-Device vom Typ Proplanta (Name hier <code>AU.xx.WE.Proplanta</code>) angezeigt werden können.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22temp_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
...><br />
</div><br />
</source><br />
<br />
'''Auch alle anderen Funktionen, die [[LogProxy]] bietet, können hier angewendet werden.'''<br />
<br />
==Hinweise==<br />
===Aktualisierung des Charts===<br />
Damit der Refresh des Charts funktioniert, muss auch ein Device angegeben werden, der das Refresh triggert. Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von '''data-get''' ändert.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="WohnzimmerHeizung"<br />
data-logdevice="FileLog_WohnzimmerHeizung"<br />
...><br />
</div><br />
</source><br />
<br />
===Aussehen der Linien===<br />
Mit dem Attribut '''data-style''' kann das Aussehen der Linien des jeweiligen Graphen verändert werden. Hierfür können die Standard-FHEM-Styles verwendet werden. Dazu wird das Attribut mit <code>SVGplot</code>, gefolgt von einem Leerzeichen und der gewünschten Farbe/Stil befüllt. Es existieren jedoch auch noch weitere, an FTUI angepasste Styles, zu finden in der CSS-Datei <code>css/ftui_chart.css</code>. Um diese zu verwenden, wird das Attribut mit <code>ftui</code>, gefolgt von einem Leerzeichen und der gewünschten Farbe/Stil befüllt. Eigene Styles können zum Beispiel in der Datei <code>css/fhem-table-ui-user.css</code> definiert werden.<br />
<br />
Folgende Übersicht zeigt die im Standard verfügbaren '''Farben''', alle Abbildungen sind mit im FTUI-Style entstanden:<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f0.png|thumb|none|150px|Farbe "l0"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f1.png|thumb|none|150px|Farbe "l1"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f2.png|thumb|none|150px|Farbe "l2"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f3.png|thumb|none|150px|Farbe "l3"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f4.png|thumb|none|150px|Farbe "l4"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f5.png|thumb|none|150px|Farbe "l5"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f6.png|thumb|none|150px|Farbe "l6"]] </li><br />
</ul></div><br />
<br />
Die Angabe zur Farbe kann dann mit der Linienart kombiniert werden. Dazu stehen folgende '''Stile''' zur Verfügung:<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-normal.png|thumb|none|225px|Darstellung in 2D: Stil "normal"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-dot.png|thumb|none|225px|Darstellung in 2D: Stil "dot"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-dash.png|thumb|none|225px|Darstellung in 2D: Stil "dash"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-fill.png|thumb|none|225px|Darstellung in 2D: Stil "fill"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-sym.png|thumb|none|225px|Darstellung in 2D: Stil "sym"]] </li><br />
</ul></div><br />
<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-normal.png|thumb|none|225px|Darstellung in 3D: Stil "normal"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-dot.png|thumb|none|225px|Darstellung in 3D: Stil "dot"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-dash.png|thumb|none|225px|Darstellung in 3D: Stil "dash"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-fill.png|thumb|none|225px|Darstellung in 3D: Stil "fill"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-sym.png|thumb|none|225px|Darstellung in 3D: Stil "sym"]] </li><br />
</ul></div><br />
<br />
Farbe und Stil werden kombiniert (zusammengeschrieben) beim Attribut '''data-style''' angegeben, sodass sich beispielsweise für eine graue Punktlinie folgendes ergibt: <code>data-style="ftui l1dot"</code>.<br />
Um die Darstellung als normale Linie zu erhalten, darf im Gegensatz zu den anderen Linienformen der Stil <code>normal</code> nicht angegeben werden. Für eine einfache graue Linie ist also die Angabe <code>data-style="ftui l1"</code> korrekt, wohingegen <code>data-style="ftui l1normal"</code> zu einer fehlerhaften Anzeige führt.<br />
<br />
'''Hinweis:''' Der Stil ''sym'' ist speziell dafür geeignet, Symbole statt Linien zu zeichnen. Dazu kann beim Attribut '''data-ptype''' als Linienform ein beliebiges Font-Awsome-, oder Open Automation-Icon angegeben werden. Alle in diesem Abschnitt enthaltenen Abbildungen sind mit <code>data-ptype="lines"</code> entstanden.<br />
<br />
===Form der Linien===<br />
Das Attribut '''data-ptype''' beeinflusst die Form der Linien. Hier sind folgende Werte möglich:<br />
<br />
* <code>lines</code><br />
* <code>steps</code><br />
* <code>fsteps</code><br />
* <code>histeps</code><br />
* <code>bars</code><br />
* <code>ibars</code><br />
* <code>cubic</code><br />
* <code>quadratic</code><br />
* <code>quadraticSmooth</code><br />
<br />
Zusätzlich ist es möglich, Symbole anzeigen zu lassen. Unterstützt werden Font-Awesome ('fa-...'), Open Automation ('oa-...') und FHEM-Symbole ('fs-...')). Damit die Symbole korrekt angezeigt werden, muss im Attribut '''data-style''' der Stil <code>sym</code> gewählt werden, da sonst nur Punkte, statt der Symbole gezeichnet werden.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="FileLog_DG.wz.HZ.Heizungsventil"<br />
...<br />
data-style="ftui l1sym"<br />
data-ptype="fa-cog"<br />
...><br />
</div><br />
</source><br />
<br />
Die Größe der Symbole ist in der Datei <code>css/ftui_chart.css</code> auf 12px festgelegt. Dieser Wert kann in einer eigenen CSS-Datei durch Anpassung von <code>stroke-width</code> überschrieben werden.<br />
<br />
<source lang="css"><br />
.ftui.l0sym { stroke:#DDA400; stroke-width:12px; fill:none; }<br />
.ftui.l1sym { stroke:#BBBBBB; stroke-width:12px; fill:none; }<br />
.ftui.l2sym { stroke:#CC0000; stroke-width:12px; fill:none; }<br />
.ftui.l3sym { stroke:#CCCC00; stroke-width:12px; fill:none; }<br />
.ftui.l4sym { stroke:#33CC33; stroke-width:12px; fill:none; }<br />
.ftui.l5sym { stroke:#33CCCC; stroke-width:12px; fill:none; }<br />
.ftui.l6sym { stroke:#3333CC; stroke-width:12px; fill:none; }<br />
</source><br />
<br />
'''data-ptype''' kann auch Inhalt im Format <code>'icon:1'</code> verarbeiten. Dann muss der zugehörige Wert in '''data-columnspec''' den Pfad zu einem Icon (z.B. für Wettervorhersagen) beinhalten. Der Y-Wert wird dann vom ersten Graphen übernommen. Weitere Ausführungen hierzu im Beispiel [[#Darstellung der Wetter Icons im Diagramm]]. <br />
<br />
===Stapeln von Linien===<br />
Über '''data-ptype''' kann zusätzlich festgelegt werden, ob Graphen übereinander gestapelt werden sollen. <code>data-ptype='lines:1'</code> bedeutet, dass der zugehörige Graph auf den Graph mit der Nummer 1 gestapelt werden soll. So etwas kann z.B. Sinn machen, wenn man den Stromverbrauch einzelner Devices darstellen und zusätzlich sehen will, wie hoch die Summe ist. Beispiel siehe unten.<br />
<br />
[[Datei:FTUI Widget Chart Stacked.png]]<br />
<br />
===Zeitstrahl / Start & Ende auf der X-Achse===<br />
Die Attribute '''data-daysago_start''' und '''data-daysago_end''' dienen der Definition von Anfang und Ende der X-Achse. Im einfachsten Fall wird eine Anzahl an Tagen eingegeben, die sich auf das aktuelle Datum beziehen. Dabei gilt es zu beachten, dass es sich um ''vergangene Tage'' handelt. Das bedeutet, dass Tage in der Vergangenheit als positive Zahl angegeben werden, Tage in der Zukunft hingegen als negative Zahl. Es kann jeweils auch ein fixes Datum (z.B. '2013-10-23') angegeben werden. Uhrzeitangaben werden nur berücksichtigt, wenn '''data-nofulldays='true' ''' verwendet wird.<br />
<br />
Ebenso ist es möglich, feste Zeiträume in Form von Stunden anzugeben. Dazu werden die absoluten Stunden des Tages, gefolgt von dem Großbuchstaben '''H''' genutzt.<br />
<br />
Um den Zeitbereich 5:00 Uhr bis 22:00 Uhr des heutigen Tages anzuzeigen, müssen die Attribute wie folgt gesetzt werden:<br />
<source lang="html"><br />
data-nofulldays="true"<br />
data-daysago_start="-5H"<br />
data-daysago_end="-22H"<br />
</source><br />
<br />
Die Zeit in Tagen kann auch als Gleitkommazahl angegeben werden. Damit ist es möglich, Tage und Uhrzeiten zu kombinieren. Die Werte sind dann als Teil eines ganzen Tages, bezogen auf heute 0:00 Uhr zu errechnen und mit <code>.</code> als Teiler anzugeben.<br />
<br />
Das nachfolgende Beispiel zeigt einen Zeitbereich von gestern 15:00 Uhr bis morgen 3:00 Uhr.<br />
<source lang="html"><br />
data-nofulldays="true"<br />
data-daysago_start="0.375"<br />
data-daysago_end="-1.125"<br />
</source><br />
<br />
Für die nachfolgenden Rechenwege sind die Einheiten nur zur Verdeutlichung angegeben. Die Einheiten werden im Attribut nicht angegeben.<br />
<br />
Der Wert für '''GESTERN''' wird wie folgt ermittelt:<br /><br />
Ausgangspunkt ist heute 0:00 Uhr, gestern 15:00 Uhr liegt also 9 Stunden davor. Diese 9 Stunden sind ein <code>9/24 Tag</code> und errechnen sich so:<br />
<pre><br />
1d / 24h = 0.0416666...d/h<br />
0.0416d/h * 9h = 0.375d<br />
</pre><br />
<br />
Der Wert für '''MORGEN''' wird wie folgt ermittelt:<br /><br />
Ausgangspunkt ist wieder heute 0:00 Uhr, morgen 3:00 Uhr liegt dann 27 Stunden dahinter. Der Einfachheit halber werden hier nur die 3 Stunden errechnet und dann ein ganzer Tag addiert:<br />
<pre><br />
1d / 24h = 0.0416666...d/h<br />
0.0416d/h * 3h = 0.125d<br />
<br />
0.125d + 1d = 1.125d<br />
</pre><br />
Da das Attribut Tage in der Vergangenheit erwartet, muss für einen Wert in der Zukunft wieder eine negative Zahl angegeben werden.<br />
<br />
===Zeitformat der X-Achse===<br />
Die Zeitanzeige auf der X-Achse kann sehr flexibel eingestellt werden. Dafür stehen verschiedene Platzhalter zur Verfügung, die durch spezielle Zeichen (<code>-</code>, <code>.</code>, <code>/</code>, <code> </code> (Leerzeichen), <code>:</code>, <code>,</code>, <code>\</code>) getrennt werden. Alle Zeichen werden trotz Escape-Zeichen (<code>\</code>) in der Ausgabe angezeigt.<br />
<br />
Folgende Platzhalter werden unterstützt:<br />
*<code>'mm'</code>: Minuten als zweistellige Zahl<br />
*<code>'hh'</code>: Stunden als zweistellige Zahl<br />
*<code>'dd'</code>: Tag als zweistellige Zahl (Kalenderdatum)<br />
*<code>'MM'</code>: Monat als zweistellige Zahl (z.B. 02 für Februar)<br />
*<code>'MMM'</code>: Monat als dreistellige Abkürzung (z.B. Dec für Dezember)<br />
*<code>'MMMM'</code>: Langname des Monats (z.B. March)<br />
*<code>'ee'</code>: Wochentag als zweistellige Zahl (z.B. 00 für Sonntag)<br />
*<code>'eee'</code>: Wochentag als dreistellige Abkürzung (z.B. Mon für Montag)<br />
*<code>'eeee'</code>: Langname des Wochentags (z.B. Tuesday)<br />
*<code>'yy'</code>: Jahr als zweistellige Zahl (z.B. 16 für 2016)<br />
*<code>'yyyy'</code>: Jahr als vierstellige Zahl (z.B. 2016)<br />
*<code>'LF'</code>: Fügt einen Zeilenumbruch hinzu<br />
<br />
Beispiel: Der String <code>'MMM\LF\yyyy'</code> zeigt <code>'Jan'</code> in der ersten, und <code>'2016'</code> in der zweiten Zeile. <code>'MM.dd 2016'</code> wird zu <code>'03.05 2016'</code>.<br />
<br />
===Fadenkreuz-Cursor===<br />
Der Fadenkreuz-Cursor zeigt die Momentanwerte, indem man ihn über die Graphen bewegt. In Desktop-Browsern reicht einfaches Bewegen des Maus. Unter iOS und Android kann der Cursor wird der Cursor durch einfaches Tippen auf die neue Position bewegt.<br />
<br />
Mit dem Attribut '''data-cursorgroup''' können Graphen gruppiert werden. Am Cursor werden dann die Momentanwerte aller Graphen gleichzeitig angezeigt, die die selbe Zahl besitzen, sobald man die Maus über einen aus der Gruppe bewegt.<br />
<br />
===Legende===<br />
Mit dem Attribut '''data-legendpos''' kann die Position der Legende innerhalb des Diagramms festgelegt werden. Die Position wird mit einem Array, bestehend aus zwei Werten im Format <code>'["<horizontal>","<vertikal>"]'</code> angegeben. Für die horizontale Positionierung sind <code>'left'</code>, <code>'right'</code>, <code>'before'</code>, und <code>'behind'</code>, die vertikale Positionierung <code>'top'</code>, <code>'bottom'</code>, <code>'above'</code>, <code>'below'</code> erlaubt (der Unterschied zwischen <code>'left'</code> und <code>'before'</code> liegt darin, dass im zweiten Fall die Legende nicht in den Zeichenbereich gesetzt wird sondern vor das ganze Chart (entsprechend für <code>'after'</code>, <code>'above'</code> und <code>'below'</code>). Alternativ können auch Zahlen verwendet werden, die die Position in Prozent angeben. Durch verschieben mit der Maus oder durch verschieben mit dem Finger oder Stift auf Touch Devices kann die Legende auch an eine andere Position verschoben werden.<br />
<br />
Wenn die Legende eingeblendet ist, kann mittels Klick auf einen Legendeneintrag der zugehörige Graph ein- und ausgeblendet werden.<br />
<br />
===3-dimensionale Drehung===<br />
'''data-ddd''' ermöglicht, den Graphen 3-dimensional zu drehen. Als Wert wird ein Array mit den 3 Winkeln für x, y und z erwartet, wobei z selbst bisher nicht unterstützt wird.<br />
<br />
Beispiel: <code>data-ddd='["40","60","0"]'</code>. <br />
<br />
Wenn der 3D Modus aktiv ist ('''data-ddd''' gesetzt) sind 2 zusätzliche Parameter verfügbar um das Aussehen der Graphen zu beeinflussen. '''data-dddspace''' gibt an, wie viele pixel der Raum zwischen den einzelnen in z-Richtung hintereinander angeordneten Graphen betragen soll.<br />
'''data-dddwidth''' legt fest, wie viele pixel die einzelnen Graphen tief (oder dick) sein sollen.<br />
<br />
Wenn das Array angegeben wird, erscheinen zwei zusätzliche Buttons im Diagramm, mit denen die Drehung in X- und Y-Richtung verändert werden kann.<br />
<br />
===Diagrammtitel===<br />
Mit dem Attribut '''data-title''' kann dem Diagramm, ähnlich wie in FHEM-SVG-Plots, ein Titel hinzugefügt werden.<br />
<br />
Folgende Platzhalter werden unterstützt:<br />
*<code>'min1'</code>: Minimaler Y-Wert des ersten Graphs<br />
*<code>'max1'</code>: Maximaler Y-Wert des ersten Graphs<br />
*<code>'avg1'</code>: Mittlerer Y-Wert des ersten Graphs<br />
*<code>'cnt1'</code>: Anzahl der dargestellten Einzelwerte im ersten Graph<br />
*<code>'currval1'</code>: Letzter, bzw. aktuellster Y-Wert des ersten Graphs<br />
*<code>'mindate1'</code>: Niedrigster Wert auf der X-Achse des ersten Graphs<br />
*<code>'maxdate1'</code>: Höchster Wert auf der X-Achse vom ersten Graphs<br />
*<code>'currdate1'</code>: Letzter, bzw. aktuellster Wert auf der X-Achse des ersten Graphs<br />
<br />
Durch Einsetzen einer anderen Zahl statt '1' können auch die Werte der anderen Graphen angezeigt werden. Das Weglassen der Zahl bewirkt, dass der jeweils zutreffende Wert automatisch ermittelt wird. Bedeutet: <code>max</code> führt dazu, dass der höchste Wert aller angezeigter Graphen verwendet wird.<br />
<br />
Beispiel: <code>data-title="Min: $data{mindate4}, Max: $data{maxdate4}, Last: $data{currdate4}"</code><br />
<br />
===Buttons im Diagramm===<br />
Es gibt mehrere Buttons, mit denen sich die Anzeige des Diagramms verändern lässt. <code><-</code> und <code>-></code> bewegen die Graphen nach links und rechts. <code>+</code> und <code>-</code> zoomen die Anzeige. <code>legend</code> und <code>cursor</code> schalten die zugehörigen Anzeigen ein und aus.<br />
<br />
==Beispiele==<br />
===Einfaches Diagramm===<br />
Das Beispiel zeigt ein einfaches Diagramm mit 4 unterschiedlich formatierten Graphen, Legende und Momentanwerten am Fadenkreuz-Cursor.<br />
<br />
[[File:Chart_tabletUI.png]]<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'<br />
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'<br />
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'<br />
data-ptype='["lines","histeps","histeps","cubic"]'<br />
data-uaxis='["primary","secondary","secondary","primary"]'<br />
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'<br />
data-yunit="°C"<br />
data-ytext="Temperature"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-yunit_sec="mm"<br />
data-ytext_sec="Rain (mm)"<br />
data-height="250"<br />
data-yticks="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-nofulldays="true"<br />
data-daysago_start="2013-08-13T00:00:00"<br />
data-daysago_end="2013-08-14T00:00:00"<br />
data-cursorgroup="1"<br />
data-scrollgroup="1"<br />
data-xticks="auto"><br />
</div><br />
</source><br />
<br />
===7-Tage-Wettervorhersage mit Proplanta===<br />
In diesem Beispiel wird gezeigt, wie die Vorhersagewerte von [[PROPLANTA]] in einem Diagramm dargestellt werden können. Da die Werte nicht in einer Datenbank oder einem FileLog vorliegen, müssen sie über [[LogProxy]] verarbeitet werden. Dafür sind einige Vorbereitungen in FHEM nötig.<br />
<br />
[[File:FTUI_Widget_Chart-fc-Proplanta.png|941px]]<br />
<br />
'''1.''' Ein LogProxy-Device muss vorhanden sein:<br />
<pre><br />
define myLogProxy logProxy<br />
</pre><br />
<br />
'''2.''' In der Datei <code>99_myUtils.pm</code> muss folgende Routine hinzugefügt werden, die die Daten bereitstellt:<br />
<source lang="perl"><br />
#---------------------------------------<br />
# Proplanta LogProxy-Funktion<br />
#---------------------------------------<br />
sub logProxy_proplanta2Plot($$$$;$$) {<br />
my ($device, $fcValue, $from, $to, $fcHour, $expMode) = @_;<br />
my $regex;<br />
my @rl;<br />
<br />
return undef if(!$device);<br />
<br />
if($fcValue =~ s/_$//) {<br />
$regex = "^fc[\\d]+_".$fcValue."[\\d]{2}\$";<br />
}<br />
else {<br />
$regex = "^fc[\\d]+_".$fcValue."\$";<br />
}<br />
<br />
$fcHour = 12 if(!defined $fcHour);<br />
$expMode = "point" if(!defined $expMode);<br />
<br />
if( defined($defs{$device}) ) {<br />
if( $defs{$device}{TYPE} eq "PROPLANTA" ) {<br />
@rl = sort{<br />
my ($an) = ($a =~ m/fc(\d+)_.*/);<br />
my ($bn) = ($b =~ m/fc(\d+)_.*/);<br />
$an <=> $bn or $a cmp $b;<br />
}( grep /${regex}/,keys %{$defs{$device}{READINGS}} );<br />
return undef if( !@rl );<br />
} else {<br />
Log3 undef, 2, "logProxy_proplanta2Plot: $device is not a PROPLANTA device";<br />
return undef;<br />
}<br />
}<br />
<br />
my $fromsec = SVG_time_to_sec($from);<br />
my $tosec = SVG_time_to_sec($to);<br />
my $sec = $fromsec;<br />
my ($h,$fcDay,$mday,$mon,$year);<br />
my $timestamp;<br />
<br />
my $reading;<br />
my $value;<br />
my $prev_value;<br />
my $min = 999999;<br />
my $max = -999999;<br />
my $ret = "";<br />
<br />
# while not end of plot range reached<br />
while(($sec < $tosec) && @rl) {<br />
#remember previous value for start of plot range<br />
$prev_value = $value;<br />
<br />
$reading = shift @rl;<br />
($fcDay) = $reading =~ m/^fc(\d+).*/;<br />
$h = ($reading =~ m/.*(\d\d)$/)?$1:$fcHour;<br />
$value = ReadingsVal($device,$reading,undef);<br />
<br />
($mday,$mon,$year) = split('\.',ReadingsVal($device,"fc".$fcDay."_date",undef));<br />
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, $h, 0, 0);<br />
$sec = SVG_time_to_sec($timestamp);<br />
<br />
# skip all values before start of plot range<br />
next if( SVG_time_to_sec($timestamp) < $fromsec );<br />
<br />
# add first value at start of plot range<br />
if( !$ret && $prev_value ) {<br />
$min = $prev_value if( $prev_value < $min );<br />
$max = $prev_value if( $prev_value > $max );<br />
$ret .= "$from $prev_value\n";<br />
}<br />
<br />
# done if after end of plot range<br />
last if($sec > $tosec);<br />
<br />
$min = $value if( $value < $min );<br />
$max = $value if( $value > $max );<br />
<br />
# add actual controll point<br />
$ret .= "$timestamp $value\n";<br />
<br />
# Log 1, "$timestamp $value -0- $reading";<br />
}<br />
if(($sec < $tosec) && !@rl && ($expMode eq "day")) {<br />
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, 23, 59, 59);<br />
if(SVG_time_to_sec($timestamp) < $tosec) {<br />
$ret .= "$timestamp $value\n";<br />
}<br />
else {<br />
$ret .= "$to $value\n";<br />
}<br />
}<br />
elsif(($sec > $tosec) && ($expMode eq "day")) {<br />
$value = $prev_value + ($value - $prev_value)*(86400 + ($tosec - $sec))/86400;<br />
$ret .= "$to $value\n";<br />
}<br />
return ($ret,$min,$max,$prev_value);<br />
}<br />
</source><br />
<br />
Anschließend können die Daten im Chart-Widget angezeigt werden. Der Device-Name von Proplanta heißt hier im Beispiel <code>AU.xx.WE.Proplanta</code>.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
data-style='[<br />
"ftui l6fill",<br />
"ftui l5fill",<br />
"ftui l1fill"<br />
]'<br />
data-ptype='[<br />
"steps",<br />
"quadraticSmooth",<br />
"quadraticSmooth"<br />
]'<br />
data-uaxis='[<br />
"primary",<br />
"secondary",<br />
"secondary"<br />
]'<br />
data-legend='[<br />
"Regen",<br />
"Regenwahrscheinlichkeit",<br />
"Wolken"<br />
]'<br />
data-yunit="mm"<br />
data-ytext="Regen"<br />
data-yunit_sec="%"<br />
data-ytext_sec="Chance auf Regen / Wolken"<br />
data-timeformat="eeee"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-daysago_start = "0"<br />
data-daysago_end = "-7"<br />
data-xticks="1440"<br />
data-yticks="auto"<br />
data-title="7-Tage-Wettervorhersage"<br />
data-showlegend="true"<br />
class="nobuttons fullsize"><br />
</div><br />
</source><br />
<br />
'''Hilfreiche Links und Quellen zu diesem Beispiel:'''<br />
*[[LogProxy|LogProxy im FHEM-Wiki]]<br />
*{{Link2Forum|Topic=22967|Message=246973|LinkText=Stundengenaue Wettervorhersage (#1) im FHEM-Forum}}<br />
*{{Link2Forum|Topic=22967|Message=334713|LinkText=Stundengenaue Wettervorhersage (#2) im FHEM-Forum}}<br />
<br />
===Darstellung der Wetter Icons im Diagramm===<br />
<br />
[[File:Wetterchart2.png]]<br />
<br />
Wie oben bereits beschrieben, gibt es beim Chart grundsätzlich die Möglichkeit, Icons, welche in Form von URLs in den Logs abgelegt sind oder welche per logProxy generiert werden, darzustellen. Die Icons werden auf genau dem gleichen Weg von FHEM gelesen, wie alle anderen Datenpunkte. Im Folgenden wird ein Beispiel gezeigt, mit dem die im Proplanta Modul als Readings abgelegten Icons per logProxy Funktion gelesen und in ein Chart eingebaut werden könnnen.<br />
Da es beim Proplanta Modul für die ersten 7 Tage nicht das Reading <code>fc#_weatherIcon</code> gibt, sondern mehrere Readings für unterschiedliche Tageszeiten wogegen für die zweiten 7 Tage ausschließlich das Reading <code>fc#_weatherIcon</code> vorhanden ist, sollte per <code>attr device userReading</code> mit folgendem Eintrag dafür gesorgt werden, dass für alle Tage ein Reading <code>fc#_weatherIcon</code> vorhanden ist (alternativ könnten auch 2 Graphen gezeichnet werden, wobei der erste dann nur die ersten 7 Tage enthält und der zweite die letzen 7 Tage, will man nur die ersten 7 Tage darstellen braucht man das userReading nicht unbedingt).<br />
<source lang="perl"><br />
fc0_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc0_weatherDayIcon","");},<br />
fc1_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc1_weatherDayIcon","");},<br />
fc2_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc2_weatherDayIcon","");},<br />
fc3_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc3_weatherDayIcon","");},<br />
fc4_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc4_weatherDayIcon","");},<br />
fc5_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc5_weatherDayIcon","");},<br />
fc6_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc6_weatherDayIcon","");}<br />
</source><br />
Um die Icons darzustellen muss ein zusätzlicher Graph definiert werden. Dieser nutzt neben der Columnspec, die die URLs abruft den Parameter <code>data-ptype="icons:#"</code> (# ist eine Zahl und steht für die Nummer, beginnend bei 0 des Graphen, welcher für die y-Position der Icons verwendet werden soll) und den Stil <code>sym</code>. Der Wert für die Symbolgröße sollte z.B. durch eine zusätzliche Definition im File fhem-tablet-ui-user.css in der Form:<br />
<source lang="css"><br />
/* icon lines */<br />
.ftui.l99icon { stroke:#DDA400; stroke-width:48px; fill:none; }<br />
</source><br />
angepasst werden.<br />
<br />
Im folgenden ein Beispiel, welches eine Linie für die Maximale Tagestemperatur zeichnet und auf dieser Linie die Wetter Icons darstellt.<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22tempMax\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
data-style='[<br />
"ftui l99icon",<br />
"ftui l1fill"<br />
]'<br />
data-ptype='[<br />
"icons:1",<br />
"quadraticSmooth"<br />
]'<br />
data-uaxis='[<br />
"primary",<br />
"primary"<br />
]'<br />
data-legend='[<br />
"Wetterbedingung",<br />
"Max. Temperature"<br />
]'<br />
data-yunit="°C"<br />
data-ytext="Temperature (°C)"<br />
data-timeformat="ee\LF\dd.MM"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-daysago_start="-1w"<br />
data-y_margin="20"<br />
data-daysago_end="-3w"<br />
data-xticks="1440"<br />
data-yticks="auto"<br />
data-title="14-Tage-Wettervorhersage"<br />
data-showlegend="true"<br />
class="nobuttons fullsize"><br />
</div><br />
</source><br />
<br />
===Kuchendiagramme===<br />
In folgendem Beispiel wird gezeigt, wie man ein "Kuchendiagramm" darstellen kann.<br />
<br />
[[File:PieChart.png]]<br />
<br />
Ähnlich wie bei den Beispielen für die Wetter Darstellungen wird hierzu auch wieder logProxy benötigt. Zunächst muss die folgende zusätzliche Funktion in <code>99_myUtils.pm</code> einfügen.<br />
<source lang="perl"><br />
#---------------------------------------<br />
# Funktion zum Erzeugen der Inputs für Kuchendiagramme<br />
#---------------------------------------<br />
sub logProxy_values2PieChart($$$$;$$) {<br />
my ($device, $reading, $angle_start, $angle_dif, $inner_rad, $show_text) = @_;<br />
Log3 undef, 1, "$device, $reading, $angle_start, $angle_dif, $inner_rad, $show_text\n";<br />
<br />
use constant PI => 4 * atan2(1,1);<br />
<br />
my $value=ReadingsVal($device,$reading,0);<br />
<br />
my $angle_delta = $value/100*360;<br />
$angle_start = $angle_start/100*360;<br />
<br />
my $rad=10;<br />
my $irad=0;<br />
if ($inner_rad) {<br />
$irad = $rad*$inner_rad;<br />
}<br />
my $angle=$angle_start/360*2.0*PI;<br />
my $x=$irad*sin($angle);<br />
my $y=$irad*cos($angle);<br />
my $ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle<br />
<br />
for (my $i=$angle_start; $i<=$angle_start+$angle_delta; $i+=$angle_dif) {<br />
$angle = $i/360*2.0*PI;<br />
$x = $rad*sin($angle);<br />
$y = $rad*cos($angle);<br />
$ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle<br />
}<br />
<br />
$angle = ($angle_start+$angle_delta)/360*2.0*PI; # add last segment <br />
$ret .= ";p ".$rad*sin($angle)." ".$rad*cos($angle)."\n";<br />
<br />
if ($inner_rad) {<br />
for (my $i=$angle_start; $i<$angle_start+$angle_delta; $i+=$angle_dif) {<br />
$angle = ($angle_start+$angle_start+$angle_delta-$i)/360*2.0*PI;<br />
$x = $irad*sin($angle);<br />
$y = $irad*cos($angle);<br />
$ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle<br />
}<br />
}<br />
<br />
$angle = ($angle_start)/360*2.0*PI; # add last segment <br />
$ret .= ";p ".$irad*sin($angle)." ".$irad*cos($angle)."\n";<br />
<br />
if ($show_text) { # show text values<br />
$x = ($rad+$irad)/2*sin((2*$angle_start+$angle_delta)/2/360*2.0*PI);<br />
$y = ($rad+$irad)/2*cos((2*$angle_start+$angle_delta)/2/360*2.0*PI);<br />
<br />
$ret .= ";t ".$x." ".$y." middle ".$show_text.":".$value."%\n";<br />
}<br />
<br />
return($ret);<br />
}<br />
</source><br />
In FHEM braucht man Readings, welche eine Zahl enthalten, die als Prozentwert interpretiert wird. Für jeden Prozentwert (also für jedes Reading) generiert die o.a. Funktion nun den Chart Input für ein Kuchenstück und liefert diesen als Antwort auf das GET, welches das Chart Widget auslöst. Dazu braucht die Funktion folgende Parameter: (Name des FHEM Devices, Name des Readings, Start Winkel des Kuchenstücks (Mathematisch gegen den Uhrzeigersinn in Grad), Delta Winkel zum Zeichnen (legt fest in welchen Schritten der Teilkreis des Kuchenstücks gezeichnet wird), Skalierungsfaktor für inneren Ring wenn ein Ring gezeichtnet werden soll (0 bedeutet komplette Kuchenstücke), optionaler Text der ins Kuchenstück vor die Prozentzahl geschrieben wird).<br />
Im Folgenden eine Beispielkonfiguration für die Darstellung als Kuchendiagramm, die Readings heißen hier dPer1 bis dPer4. Der Startwinkel wird duch Aufsummierung der jeweils vorher schon gezeichneten Kuchenstücke gebildet, dadurch entstehen aneinander hängende Stücke.<br />
<source lang="html"><br />
[[Datei:[[Datei:Beispiel.jpg]]]]<div class="normal noaxes nobuttons"<br />
data-type="chart"<br />
data-logdevice='["lp"]'<br />
data-logfile="CURRENT"<br />
data-columnspec='[<br />
"Func:logProxy_values2PieChart(\"dPer1\",\"state\",ReadingsVal(\"dPer4\",\"state\",0)+ReadingsVal(\"dPer3\",\"state\",0),5,0,\"first\")",<br />
"Func:logProxy_values2PieChart(\"dPer2\",\"state\",ReadingsVal(\"dPer4\",\"state\",0)+ReadingsVal(\"dPer3\",\"state\",0)+ReadingsVal(\"dPer1\",\"state\",0),5,0,\"second\")",<br />
"Func:logProxy_values2PieChart(\"dPer3\",\"state\",ReadingsVal(\"dPer4\",\"state\",0),5,0,\"third\")",<br />
"Func:logProxy_values2PieChart(\"dPer4\",\"state\",0,5,0,\"fourth\")"<br />
]'<br />
data-style='["ftui l0fill","ftui l1fill","ftui l2fill","ftui l3fill"]'<br />
data-ptype='["lines"]'<br />
data-uaxis='["primary"]'<br />
data-legend='["First","Second","Third","Fourth"]'<br />
data-legendpos='["left","top"]'<br />
data-yunit=""<br />
data-height="300"<br />
data-width="300"<br />
data-ddd='["-40","0","0"]'<br />
data-dddspace='["-10"]'<br />
data-dddwidth='["10"]'<br />
data-showlegend="true"<br />
data-legend_horiz="true"<br />
data-xticks="auto"><br />
</div><br />
</source><br />
<br />
===Fensterstatus offen/geschlossen===<br />
Dieses Beispiel zeigt, wie ein Fensterkontakt, dessen Reading die Werte <code>closed</code> und <code>open</code> einnimmt, als Graph gezeichnet werden kann. Technisch gesehen werden hier die Werte <code>0</code> und <code>1</code> gezeichnet, indem über das Attribut '''data-columnspec''' dem Zustand <code>open</code> der Wert <code>1</code> und allen anderen Zuständen der Wert <code>0</code> zugeordnet wird. Über das Attribut '''data-yticks''' wird die Beschriftung an der Y-Achse (<code>0</code> und <code>1</code>) gegen einen frei definierbaren Text ausgetauscht.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="wz_fensterstatus"<br />
data-logdevice='["myDbLog"]'<br />
data-logfile='["HISTORY"]'<br />
data-columnspec='["wz_fensterstatus:state:0::$val=($val=~\\x22open\\x22?1:0)"]'<br />
data-style='["ftui l4fill"]'<br />
data-ptype='["steps"]'<br />
data-height="290"<br />
data-yticks='[[0,"geschlossen"],[1,"offen"]]'<br />
data-minvalue="0"<br />
data-maxvalue="1.1"<br />
data-nofulldays="true"<br />
data-daysago_start="1"<br />
data-daysago_end="-1"<br />
data-cursorgroup="1"<br />
data-scrollgroup="1"><br />
</div><br />
</source><br />
<br />
==Links==<br />
{{Link2Forum|Topic= 48450 |Message=401006|LinkText=Thread im FHEM-Forum}}<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Chart&diff=21604FTUI Widget Chart2017-05-25T14:04:30Z<p>Standarduser: Erläuterungen für den Zeitbereich auf der X-Achse hinzugefügt</p>
<hr />
<div>Das [[{{PAGENAME}}|Chart Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem sich verschiedenste Diagramme darstellen lassen. Die Aneinanderreihung mehrerer Werte eines Device-Readings zu einem zeitlichen Verlauf wird dabei als Graph bezeichnet.<br />
<br />
Es können beliebige Werte dargestellt und entsprechend der Sinnhaftigkeit, oder persönlichem Geschmack, formatiert werden. Farbe und Form der Linien sind je Graph einstellbar, auch wenn mehrere gleichzeitig in einem Diagramm angezeigt werden.<br />
<br />
Jedes Diagramm kann zwei Y-Achsen besitzen. Die primäre Y-Achse (primary) wird auf der linken Seite angezeigt, die sekundäre Y-Achse (secondary) auf der rechten Seite. Beide Achsen können unterschiedlich formatiert werden.<br />
<br />
<gallery><br />
File:Chart_tabletUI.png<br />
Datei:FTUI Widget Chart Stacked.png<br />
Datei:FTUI Widget Chart-fc-Proplanta.png<br />
Datei:Wetterchart2.png<br />
Datei:PieChart.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
! style="width:150px"|Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||Name des FHEM-Device, das die Aktualisierung des Charts triggert||||data-device="WohnzimmerHeizung"<br />
|-<br />
|'''data-get'''||Reading, das das Update des Diagramms triggert||'STATE'||<br />
|-<br />
|'''data-logdevice'''||Name des Log-Device, das dargestellt werden soll, oder ein Array, um mehrere Werte in einem Diagramm darzustellen||||data-logdevice="FileLog_WohnzimmerHeizung"<br />
|-<br />
|'''data-logfile'''|| Name des Log-Files, aus dem die Daten entnommen werden sollen (oder Array)||'-' = aktuelle Datei||data-logfile="WohnzimmerHeizung-2015.log"<br />
|-<br />
|'''data-columnspec'''||Ermittelt den Wert aus dem Log-File, der angezeigt werden soll (oder Array)||||data-columnspec="4:meas.*"<br />
|-<br />
|'''data-style'''||Stil, wie die Graph-Linien dargestellt werden sollen (z.B. 'SVGplot l0' oder 'ftui l0dash'), oder ein Array, wenn mehrere Linien unterschiedlich dargestellt werden sollen||||<br />
|-<br />
|'''data-ptype'''||Form, wie die Graphen dargestellt werden sollen (z.B. 'lines', 'cubic' oder 'fa-cog'), oder ein Array||'lines'||<br />
|-<br />
|'''data-uaxis'''||Name der Achse, die verwendet werden soll ('primary' = links, oder 'secondary' = rechts), oder ein Array||'primary'||<br />
|-<br />
|'''data-legend'''||Bezeichnung des Graphen (wird in Legende und am Cursor angezeigt), oder ein Array||||<br />
|-<br />
|'''data-minvalue'''||Minimaler Wert, der auf der linken Y-Achse ('primary') angezeigt werden soll. 'auto' = automatische Berechnung||'10'||<br />
|-<br />
|'''data-maxvalue'''||Maximaler Wert, der auf der linken Y-Achse ('primary') angezeigt werden soll. 'auto' = automatische Berechnung||'30'||<br />
|-<br />
|'''data-minvalue_sec'''||Minimaler Wert, der auf der rechten Y-Achse ('secondary') angezeigt werden soll. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-maxvalue_sec'''||Maximaler Wert, der auf der rechten Y-Achse ('secondary') angezeigt werden soll. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-xticks'''||Abstand zwischen den vertikalen Hilfslinien (bezogen auf die X-Achse) in Minuten. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-yticks'''||Abstand zwischen den horizontalen Hilfslinien (bezogen auf die linke Y-Achse). Kann auch ein Array mit Werte-Paaren enthalten, um die Linien mit Text zu beschriften.||'auto'||data-yticks='[[0,"open"],[1,"closed"]]'<br />
|-<br />
|'''data-yticks_sec'''||Abstand zwischen den horizontalen Hilfslinien (bezogen auf die rechte Y-Achse). Kann auch ein Array mit Werte-Paaren enthalten, um die Linien mit Text zu beschriften.||'auto'||data-yticks='[[0,"open"],[1,"closed"]]'<br />
|-<br />
|'''data-yticks_prio'''||Legt fest, ob die horizontalen Hilfslinien der linken (primary) oder der rechten (secondary) Y-Achse zugeordnet werden sollen||||data-yticks_prio='secondary'<br />
|-<br />
|'''data-ytype'''||Legt fest, ob die primäre y Achse logarithmisch sein soll (wert "log")||||data-ytype="log"<br />
|-<br />
|'''data-ytype_sec'''||Legt fest, ob die sekundäre y Achse logarithmisch sein soll (wert "log")||||data-ytype_sec="log"<br />
|-<br />
|'''data-daysago_start'''||Anzahl der vergangenen Tage, wo das Diagramm beginnen soll. '0' = Beginn heute 0:00 Uhr. (siehe Hinweise)||'0'||<br />
|-<br />
|'''data-daysago_end'''||Anzahl der vergangenen Tage, wo das Diagramm enden soll. '-1' = Ende heute 24:00 Uhr. (siehe Hinweise)||'-1'||<br />
|-<br />
|'''data-nofulldays'''||Aktiviert/deaktiviert die Rundung der X-Achse auf ganze Tage. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-timeformat'''||Zeitformat für die Anzeige an der X-Achse (siehe Hinweise)||||<br />
|-<br />
|'''data-ytext'''||Text, der neben der linken Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-ytext_sec'''||Text, der neben der rechten Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-yunit'''||Einheit, die an der linken Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-yunit_sec'''||Einheit, die an der rechten Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-crosshair'''||Aktiviert/deaktiviert den Fadenkreuz-Cursor. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-cursorgroup'''||Zahl zur Gruppierung der Werte am Fadenkreuz-Cursor (siehe Hinweise)||||<br />
|-<br />
|'''data-scrollgroup'''||Zahl zur Gruppierung der Graphen beim Bewegen und Zoomen. Alle Linien mit der selben Zahl werden miteinander gekoppelt und bewegen sich gemeinsam.||||<br />
|-<br />
|'''data-showlegend'''||Aktiviert/deaktiviert die Anzeige der Legene. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-legendpos'''||Array von zwei Werten, die die horizontale und vertikale Position der Legende festlegen (siehe Hinweise)||'["top","right"]'||<br />
|-<br />
|'''data-legend_horiz'''||legt fest, dass die Legendeneinträge horizontal angeordnet sind (anstatt vertikal wie im default Fall)||false||data-legend_horiz="true"<br />
|-<br />
|'''data-width'''||Breite des Diagramms (in % oder px)||||<br />
|-<br />
|'''data-height'''||Höhe des Diagramms (in % oder px)||||<br />
|-<br />
|'''data-graphsshown'''||Aktiviert/deaktiviert die initiale Anzeige von Graphen. Binärwert ('true' oder 'false'). Array, wenn mehrere Linien angezeigt werden sollen.||||<br />
|-<br />
|'''data-ddd'''||Einstellung für die 3D-Drehung (siehe Hinweise)||||data-ddd='["40","60","0"]'<br />
|-<br />
|'''data-dddspace'''||Abstand zwischen zwei Graphen, wenn die 3D-Anzeige aktiviert wurde (px)||'15'||<br />
|-<br />
|'''data-dddwidth'''||Breite, bzw. Tiefe der Graphen, wenn diese 3-dimensional angezeigt werden (px)||'10'||<br />
|-<br />
|'''data-title'''||Titel, der über dem Diagramm angezeigt werden soll. Der Inhalt kann auch dynamisch erzeugt werden (siehe Hinweise)||||<br />
|-<br />
|'''data-prefetch'''||Legt fest, ob zusätzliche Daten rechts und links des Plots im Hintergrund vom Server geholt werden sollen||false||data-prefetch="true"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|fullsize}}{{FTUI Klasse|noticks}}{{FTUI Klasse|nobuttons}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}<br />
|}<br />
<br />
<br />
Folgende Widget-spezifsche Klassen können zusätzlich in einer eigenen CSS-Datei definiert werden:<br />
<br />
{|class="wikitable"<br />
!Klasse<br />
!Beschreibung<br />
|-<br />
|'''chart-background'''||Hintergrundfarbe des Diagramms<br />
|-<br />
|'''buttons'''||Größe und Farbe der Buttons<br />
|-<br />
|'''text.axes'''||Generelle Schriftart und Farbe der Achsen<br />
|-<br />
|'''gridlines'''||Generelle Farbe und Größe der Gitternetzlinien<br />
|-<br />
|'''xaxis'''||Schriftart, Größe und Farbe der X-Achse<br />
|-<br />
|'''yaxis'''||Schriftart, Größe und Farbe der Y-Achse<br />
|-<br />
|'''xticks'''||Schriftart, Größe und Farbe der X-Achse (Zwischenlinien)<br />
|-<br />
|'''yticks'''||Schriftart, Größe und Farbe der Y-Achse (Zwischenlinien)<br />
|-<br />
|'''crosshair'''||Schriftart, Größe und Vordergrund/Hintergrundfarbe der Momentanwerte am Fadenkreuzcursor<br />
|-<br />
|'''caption'''||Schriftart, Größe und Farbe der Text-Buttons für Legende und Cursor<br />
|-<br />
|'''legend'''||Schriftart, Größe und Farbe der Legende<br />
|}<br />
<br />
Die Standardwerte sind in der Datei <code>css/ftui_chart.css</code> zu finden.<br />
<br />
==Datenquellen==<br />
Beim Chart-Widget können die gleichen Datenquellen genutzt werden, die auch für SVG-Plots verwendet werden können:<br />
# [[FileLog]]: Verlaufsdaten einer Textdatei entnehmen<br />
# [[DbLog]]: Verlaufsdaten einer Datenbank entnehmen<br />
# [[LogProxy]]: Daten dynamisch berechnet<br />
<br />
===FileLog===<br />
Um [[FileLog]] zu nutzen, wird als '''data-logdevice''' das FHEM-Device für das FileLog angegeben. In der Regel entstehen hier im Laufe der Zeit mehrere Log-Dateien. Name und Anzahl sind von der Definition abhängig - meist wird jeden Monat oder jedes Jahr eine neue Datei angelegt. Die gewünschte Datei kann mit '''data-logfile''' ausgewählt werden. Möchte man stets die aktuelle Datei verwenden (macht vor allem dann Sinn, wenn man die neusten Daten anzeigen will), kann das Attribut weggelassen, oder explizit <code>-</code> eingetragen werden. Zuletzt wird '''data-columnspec''' benötigt, um die gewünschten Daten zu in der Logdatei zu identifizieren. Hier wird die Spalte, in der die Daten stehen, gefolgt von Doppelpunkt und Readingname angegeben.<br />
<br />
Für ein Heizungsthermostat von Homematic mit dem Namen ''DG.wz.HZ.Heizungsventil'' ergibt sich somit beispielhaft folgende Definition, um gemessene Temperatur, Sollwert und Ventilstellung im Diagramm darzustellen:<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="FileLog_DG.wz.HZ.Heizungsventil"<br />
data-logfile="-"<br />
data-columnspec='["4:measured-temp","4:desired-temp","4:actuator"]'<br />
...><br />
</div><br />
</source><br />
<br />
Sollen Daten von unterschiedlichen Geräten in einem Diagramm angezeigt werden, muss '''data-logdevice''' als Array nach dem Schema <code>data-logdevice='["<Logdatei_1>","<Logdatei_2>","<Logdatei_3>"]'</code> definiert werden. Für jeden Eintrag in '''data-columnspec''' muss es auch den passenden Eintrag in '''data-logdevice''' geben (auch die Reihenfolge ist relevant).<br />
<br />
===DbLog===<br />
Um die Daten aus [[DbLog]] anzeigen zu können, werden die gleichen Attribute verwendet und mit für die Datenbank angepassten Werten beschrieben. Bei '''data-logdevice''' das FHEM-Device für die Datenbank angegeben. Im nachfolgenden Beispiel heißt diese <code>logdb</code> und besitzt wie üblich zwei Tabellen: <code>current</code> und <code>history</code> (der zeitliche Verlauf liegt in letzterer). Der Tabellenname wird bei '''data-logfile''' eingetragen. Da die Daten in der Datenbank etwas anders abgelegt werden, muss auch '''data-columnspec''' entsprechend angepasst werden. Statt der Spalte wird hier das FHEM-Device, gefolgt von Doppelpunkt und Readingname angegeben.<br />
<br />
Für das oben beschriebene Homematic-Heizungsthermostat ergibt sich dann folgende Definition, um die gleichen Daten aus einer Datenbank, statt einem LogFile zu lesen:<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="logdb"<br />
data-logfile="HISTORY"<br />
data-columnspec='["DG.wz.HZ.Heizungsventil:measured-temp","DG.wz.HZ.Heizungsventil:desired-temp","DG.wz.HZ.Heizungsventil:actuator"]'<br />
...><br />
</div><br />
</source><br />
<br />
Für die Anzeige von unterschiedlichen Geräten in einem Diagramm, muss nur '''data-columnspec''' entsprechend angepasst werden, solange sich alle Daten in der Datenbank befinden.<br />
<br />
===LogProxy===<br />
Um die Daten mittels [[LogProxy]] berechnen und anzeigen zu können, muss in FHEM ein LogProxy-Device definiert sein:<br />
<br />
<pre><br />
define myLogProxy logProxy<br />
</pre><br />
<br />
Weitere Einstellungen am LogProxy sind nicht nötig, die bloße Existenz reicht.<br />
<br />
Bei '''data-logdevice''' wird das FHEM-Device für den LogProxy angegeben. Im nachfolgenden Beispiel heißt dieses <code>myLogProxy</code>. Das Attribut '''data-logfile''' wird für LogProxy nicht benötigt. Befinden sich nur LogProxy-Werte im Diagramm kann das Attribut komplett entfallen. Sollen weitere Werte angezeigt werden, bleibt die Definition im Array einfach leer.<br />
<br />
Im Attribut '''data-columnspec''' wird eine Formel angegeben, wie die Werte berechnet werden sollen. Hier können die Formeln 1:1 von einem eventuell vorhandenen SVG-Plot übernommen werden. '''Dabei gibt es jedoch folgendes zu beachten:''' Befindet sich die Formel in einem Array, dürfen die Formeln keine Anführungszeichen (<code>"</code>) beinhalten. Stattdessen müssen sie als escapter Ascii-Code (<code>\\x22</code>) eingefügt werden.<br />
<br />
Das nachfolgende Beispiel zeigt, wie Vorhersagewerte aus einem FHEM-Device vom Typ Proplanta (Name hier <code>AU.xx.WE.Proplanta</code>) angezeigt werden können.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22temp_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
...><br />
</div><br />
</source><br />
<br />
'''Auch alle anderen Funktionen, die [[LogProxy]] bietet, können hier angewendet werden.'''<br />
<br />
==Hinweise==<br />
===Aktualisierung des Charts===<br />
Damit der Refresh des Charts funktioniert, muss auch ein Device angegeben werden, der das Refresh triggert. Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von '''data-get''' ändert.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="WohnzimmerHeizung"<br />
data-logdevice="FileLog_WohnzimmerHeizung"<br />
...><br />
</div><br />
</source><br />
<br />
===Aussehen der Linien===<br />
Mit dem Attribut '''data-style''' kann das Aussehen der Linien des jeweiligen Graphen verändert werden. Hierfür können die Standard-FHEM-Styles verwendet werden. Dazu wird das Attribut mit <code>SVGplot</code>, gefolgt von einem Leerzeichen und der gewünschten Farbe/Stil befüllt. Es existieren jedoch auch noch weitere, an FTUI angepasste Styles, zu finden in der CSS-Datei <code>css/ftui_chart.css</code>. Um diese zu verwenden, wird das Attribut mit <code>ftui</code>, gefolgt von einem Leerzeichen und der gewünschten Farbe/Stil befüllt. Eigene Styles können zum Beispiel in der Datei <code>css/fhem-table-ui-user.css</code> definiert werden.<br />
<br />
Folgende Übersicht zeigt die im Standard verfügbaren '''Farben''', alle Abbildungen sind mit im FTUI-Style entstanden:<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f0.png|thumb|none|150px|Farbe "l0"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f1.png|thumb|none|150px|Farbe "l1"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f2.png|thumb|none|150px|Farbe "l2"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f3.png|thumb|none|150px|Farbe "l3"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f4.png|thumb|none|150px|Farbe "l4"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f5.png|thumb|none|150px|Farbe "l5"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f6.png|thumb|none|150px|Farbe "l6"]] </li><br />
</ul></div><br />
<br />
Die Angabe zur Farbe kann dann mit der Linienart kombiniert werden. Dazu stehen folgende '''Stile''' zur Verfügung:<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-normal.png|thumb|none|225px|Darstellung in 2D: Stil "normal"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-dot.png|thumb|none|225px|Darstellung in 2D: Stil "dot"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-dash.png|thumb|none|225px|Darstellung in 2D: Stil "dash"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-fill.png|thumb|none|225px|Darstellung in 2D: Stil "fill"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-sym.png|thumb|none|225px|Darstellung in 2D: Stil "sym"]] </li><br />
</ul></div><br />
<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-normal.png|thumb|none|225px|Darstellung in 3D: Stil "normal"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-dot.png|thumb|none|225px|Darstellung in 3D: Stil "dot"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-dash.png|thumb|none|225px|Darstellung in 3D: Stil "dash"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-fill.png|thumb|none|225px|Darstellung in 3D: Stil "fill"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-sym.png|thumb|none|225px|Darstellung in 3D: Stil "sym"]] </li><br />
</ul></div><br />
<br />
Farbe und Stil werden kombiniert (zusammengeschrieben) beim Attribut '''data-style''' angegeben, sodass sich beispielsweise für eine graue Punktlinie folgendes ergibt: <code>data-style="ftui l1dot"</code>.<br />
Um die Darstellung als normale Linie zu erhalten, darf im Gegensatz zu den anderen Linienformen der Stil <code>normal</code> nicht angegeben werden. Für eine einfache graue Linie ist also die Angabe <code>data-style="ftui l1"</code> korrekt, wohingegen <code>data-style="ftui l1normal"</code> zu einer fehlerhaften Anzeige führt.<br />
<br />
'''Hinweis:''' Der Stil ''sym'' ist speziell dafür geeignet, Symbole statt Linien zu zeichnen. Dazu kann beim Attribut '''data-ptype''' als Linienform ein beliebiges Font-Awsome-, oder Open Automation-Icon angegeben werden. Alle in diesem Abschnitt enthaltenen Abbildungen sind mit <code>data-ptype="lines"</code> entstanden.<br />
<br />
===Form der Linien===<br />
Das Attribut '''data-ptype''' beeinflusst die Form der Linien. Hier sind folgende Werte möglich:<br />
<br />
* <code>lines</code><br />
* <code>steps</code><br />
* <code>fsteps</code><br />
* <code>histeps</code><br />
* <code>bars</code><br />
* <code>ibars</code><br />
* <code>cubic</code><br />
* <code>quadratic</code><br />
* <code>quadraticSmooth</code><br />
<br />
Zusätzlich ist es möglich, Symbole anzeigen zu lassen. Unterstützt werden Font-Awesome ('fa-...'), Open Automation ('oa-...') und FHEM-Symbole ('fs-...')). Damit die Symbole korrekt angezeigt werden, muss im Attribut '''data-style''' der Stil <code>sym</code> gewählt werden, da sonst nur Punkte, statt der Symbole gezeichnet werden.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="FileLog_DG.wz.HZ.Heizungsventil"<br />
...<br />
data-style="ftui l1sym"<br />
data-ptype="fa-cog"<br />
...><br />
</div><br />
</source><br />
<br />
Die Größe der Symbole ist in der Datei <code>css/ftui_chart.css</code> auf 12px festgelegt. Dieser Wert kann in einer eigenen CSS-Datei durch Anpassung von <code>stroke-width</code> überschrieben werden.<br />
<br />
<source lang="css"><br />
.ftui.l0sym { stroke:#DDA400; stroke-width:12px; fill:none; }<br />
.ftui.l1sym { stroke:#BBBBBB; stroke-width:12px; fill:none; }<br />
.ftui.l2sym { stroke:#CC0000; stroke-width:12px; fill:none; }<br />
.ftui.l3sym { stroke:#CCCC00; stroke-width:12px; fill:none; }<br />
.ftui.l4sym { stroke:#33CC33; stroke-width:12px; fill:none; }<br />
.ftui.l5sym { stroke:#33CCCC; stroke-width:12px; fill:none; }<br />
.ftui.l6sym { stroke:#3333CC; stroke-width:12px; fill:none; }<br />
</source><br />
<br />
'''data-ptype''' kann auch Inhalt im Format <code>'icon:1'</code> verarbeiten. Dann muss der zugehörige Wert in '''data-columnspec''' den Pfad zu einem Icon (z.B. für Wettervorhersagen) beinhalten. Der Y-Wert wird dann vom ersten Graphen übernommen. Weitere Ausführungen hierzu im Beispiel [[#Darstellung der Wetter Icons im Diagramm]]. <br />
<br />
===Stapeln von Linien===<br />
Über '''data-ptype''' kann zusätzlich festgelegt werden, ob Graphen übereinander gestapelt werden sollen. <code>data-ptype='lines:1'</code> bedeutet, dass der zugehörige Graph auf den Graph mit der Nummer 1 gestapelt werden soll. So etwas kann z.B. Sinn machen, wenn man den Stromverbrauch einzelner Devices darstellen und zusätzlich sehen will, wie hoch die Summe ist. Beispiel siehe unten.<br />
<br />
[[Datei:FTUI Widget Chart Stacked.png]]<br />
<br />
===Zeitstrahl / Start & Ende auf der X-Achse===<br />
Die Attribute '''data-daysago_start''' und '''data-daysago_end''' dienen der Definition von Anfang und Ende der X-Achse. Im einfachsten Fall wird eine Anzahl an Tagen eingegeben, die sich auf das aktuelle Datum beziehen. Dabei gilt es zu beachten, dass es sich um ''vergangene Tage'' handelt. Das bedeutet, dass Tage in der Vergangenheit als positive Zahl angegeben werden, Tage in der Zukunft hingegen als negative Zahl. Es kann jeweils auch ein fixes Datum (z.B. '2013-10-23') angegeben werden. Uhrzeitangaben werden nur berücksichtigt, wenn '''data-nofulldays='true' ''' verwendet wird.<br />
<br />
Ebenso ist es möglich, feste Zeiträume in Form von Stunden anzugeben. Dazu werden die absoluten Stunden des Tages, gefolgt von dem Großbuchstaben '''H''' genutzt.<br />
<br />
Um den Zeitbereich 5:00 Uhr bis 22:00 Uhr des heutigen Tages anzuzeigen, müssen die Attribute wie folgt gesetzt werden:<br />
<source lang="html"><br />
data-nofulldays="true"<br />
data-daysago_start="-5H"<br />
data-daysago_end="-22H"<br />
</source><br />
<br />
Die Zeit in Tagen kann auch als Gleitkommazahl angegeben werden. Damit ist es möglich, Tage und Uhrzeiten zu kombinieren. Die Werte sind dann als Teil eines ganzen Tages, bezogen auf heute 0:00 Uhr zu errechnen und mit <code>.</code> als Teiler anzugeben.<br />
<br />
Das nachfolgende Beispiel zeigt einen Zeitbereich von gestern 15:00 Uhr bis morgen 3:00 Uhr.<br />
<source lang="html"><br />
data-nofulldays="true"<br />
data-daysago_start="0.375"<br />
data-daysago_end="-1.125"<br />
</source><br />
<br />
Für die nachfolgenden Rechenwege sind die Einheiten nur zur Verdeutlichung angegeben. Die Einheiten werden im Attribut nicht angegeben.<br />
<br />
Der Wert für '''GESTERN''' wird wie folgt ermittelt:<br /><br />
Ausgangspunkt ist heute 0:00 Uhr, gestern 15:00 Uhr liegt also 9 Stunden davor. Diese 9 Stunden sind ein <code>9/24 Tag</code> und errechnen sich so:<br />
<pre><br />
1d / 24h = 0.0416666...d/h<br />
0.0416d/h * 9h = 0.375d<br />
</pre><br />
<br />
Der Wert für '''MORGEN''' wird wie folgt ermittelt:<br /><br />
Ausgangspunkt ist wieder heute 0:00 Uhr, morgen 3:00 Uhr liegt dann 27 Stunden dahinter. Der Einfachheit halber werden hier nur die 3 Stunden errechnet und dann ein ganzer Tag addiert:<br />
<pre><br />
1d / 24h = 0.0416666...d/h<br />
0.0416d/h * 3h = 0.125d<br />
<br />
0.125d + 1d = 1.125d<br />
</pre><br />
Da das Attribut Tage in der Vergangenheit erwartet, muss für einen Wert in der Zukunft wieder eine negative Zahl angegeben werden.<br />
<br />
===Zeitformat der X-Achse===<br />
Die Zeitanzeige auf der X-Achse kann sehr flexibel eingestellt werden. Dafür stehen verschiedene Platzhalter zur Verfügung, die durch spezielle Zeichen (<code>-</code>, <code>.</code>, <code>/</code>, <code> </code> (Leerzeichen), <code>:</code>, <code>,</code>, <code>\</code>) getrennt werden. Alle Zeichen werden trotz Escape-Zeichen (<code>\</code>) in der Ausgabe angezeigt.<br />
<br />
Folgende Platzhalter werden unterstützt:<br />
*<code>'mm'</code>: Minuten als zweistellige Zahl<br />
*<code>'hh'</code>: Stunden als zweistellige Zahl<br />
*<code>'dd'</code>: Tag als zweistellige Zahl (Kalenderdatum)<br />
*<code>'MM'</code>: Monat als zweistellige Zahl (z.B. 02 für Februar)<br />
*<code>'MMM'</code>: Monat als dreistellige Abkürzung (z.B. Dec für Dezember)<br />
*<code>'MMMM'</code>: Langname des Monats (z.B. March)<br />
*<code>'ee'</code>: Wochentag als zweistellige Zahl (z.B. 00 für Sonntag)<br />
*<code>'eee'</code>: Wochentag als dreistellige Abkürzung (z.B. Mon für Montag)<br />
*<code>'eeee'</code>: Langname des Wochentags (z.B. Tuesday)<br />
*<code>'yy'</code>: Jahr als zweistellige Zahl (z.B. 16 für 2016)<br />
*<code>'yyyy'</code>: Jahr als vierstellige Zahl (z.B. 2016)<br />
*<code>'LF'</code>: Fügt einen Zeilenumbruch hinzu<br />
<br />
Beispiel: Der String <code>'MMM\LF\yyyy'</code> zeigt <code>'Jan'</code> in der ersten, und <code>'2016'</code> in der zweiten Zeile. <code>'MM.dd 2016'</code> wird zu <code>'03.05 2016'</code>.<br />
<br />
===Fadenkreuz-Cursor===<br />
Der Fadenkreuz-Cursor zeigt die Momentanwerte, indem man ihn über die Graphen bewegt. In Desktop-Browsern reicht einfaches Bewegen des Maus. Unter iOS und Android kann der Cursor wird der Cursor durch einfaches Tippen auf die neue Position bewegt.<br />
<br />
Mit dem Attribut '''data-cursorgroup''' können Graphen gruppiert werden. Am Cursor werden dann die Momentanwerte aller Graphen gleichzeitig angezeigt, die die selbe Zahl besitzen, sobald man die Maus über einen aus der Gruppe bewegt.<br />
<br />
===Legende===<br />
Mit dem Attribut '''data-legendpos''' kann die Position der Legende innerhalb des Diagramms festgelegt werden. Die Position wird mit einem Array, bestehend aus zwei Werten im Format <code>'["<horizontal>","<vertikal>"]'</code> angegeben. Für die horizontale Positionierung sind <code>'left'</code>, <code>'right'</code>, <code>'before'</code>, und <code>'behind'</code>, die vertikale Positionierung <code>'top'</code>, <code>'bottom'</code>, <code>'above'</code>, <code>'below'</code> erlaubt (der Unterschied zwischen <code>'left'</code> und <code>'before'</code> liegt darin, dass im zweiten Fall die Legende nicht in den Zeichenbereich gesetzt wird sondern vor das ganze Chart (entsprechend für <code>'after'</code>, <code>'above'</code> und <code>'below'</code>). Alternativ können auch Zahlen verwendet werden, die die Position in Prozent angeben. Durch verschieben mit der Maus oder durch verschieben mit dem Finger oder Stift auf Touch Devices kann die Legende auch an eine andere Position verschoben werden.<br />
<br />
Wenn die Legende eingeblendet ist, kann mittels Klick auf einen Legendeneintrag der zugehörige Graph ein- und ausgeblendet werden.<br />
<br />
===3-dimensionale Drehung===<br />
'''data-ddd''' ermöglicht, den Graphen 3-dimensional zu drehen. Als Wert wird ein Array mit den 3 Winkeln für x, y und z erwartet, wobei z selbst bisher nicht unterstützt wird.<br />
<br />
Beispiel: <code>data-ddd='["40","60","0"]'</code>. <br />
<br />
Wenn der 3D Modus aktiv ist ('''data-ddd''' gesetzt) sind 2 zusätzliche Parameter verfügbar um das Aussehen der Graphen zu beeinflussen. '''data-dddspace''' gibt an, wie viele pixel der Raum zwischen den einzelnen in z-Richtung hintereinander angeordneten Graphen betragen soll.<br />
'''data-dddwidth''' legt fest, wie viele pixel die einzelnen Graphen tief (oder dick) sein sollen.<br />
<br />
Wenn das Array angegeben wird, erscheinen zwei zusätzliche Buttons im Diagramm, mit denen die Drehung in X- und Y-Richtung verändert werden kann.<br />
<br />
===Diagrammtitel===<br />
Mit dem Attribut '''data-title''' kann dem Diagramm, ähnlich wie in FHEM-SVG-Plots, ein Titel hinzugefügt werden.<br />
<br />
Folgende Platzhalter werden unterstützt:<br />
*<code>'min1'</code>: Minimaler Y-Wert des ersten Graphs<br />
*<code>'max1'</code>: Maximaler Y-Wert des ersten Graphs<br />
*<code>'avg1'</code>: Mittlerer Y-Wert des ersten Graphs<br />
*<code>'cnt1'</code>: Anzahl der dargestellten Einzelwerte im ersten Graph<br />
*<code>'currval1'</code>: Letzter, bzw. aktuellster Y-Wert des ersten Graphs<br />
*<code>'mindate1'</code>: Niedrigster Wert auf der X-Achse des ersten Graphs<br />
*<code>'maxdate1'</code>: Höchster Wert auf der X-Achse vom ersten Graphs<br />
*<code>'currdate1'</code>: Letzter, bzw. aktuellster Wert auf der X-Achse des ersten Graphs<br />
<br />
Durch Einsetzen einer anderen Zahl statt '1' können auch die Werte der anderen Graphen angezeigt werden. Das Weglassen der Zahl bewirkt, dass der jeweils zutreffende Wert automatisch ermittelt wird. Bedeutet: <code>max</code> führt dazu, dass der höchste Wert aller angezeigter Graphen verwendet wird.<br />
<br />
Beispiel: <code>data-title="Min: $data{mindate4}, Max: $data{maxdate4}, Last: $data{currdate4}"</code><br />
<br />
===Buttons im Diagramm===<br />
Es gibt mehrere Buttons, mit denen sich die Anzeige des Diagramms verändern lässt. <code><-</code> und <code>-></code> bewegen die Graphen nach links und rechts. <code>+</code> und <code>-</code> zoomen die Anzeige. <code>legend</code> und <code>cursor</code> schalten die zugehörigen Anzeigen ein und aus.<br />
<br />
==Beispiele==<br />
===Einfaches Diagramm===<br />
Das Beispiel zeigt ein einfaches Diagramm mit 4 unterschiedlich formatierten Graphen, Legende und Momentanwerten am Fadenkreuz-Cursor.<br />
<br />
[[File:Chart_tabletUI.png]]<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'<br />
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'<br />
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'<br />
data-ptype='["lines","histeps","histeps","cubic"]'<br />
data-uaxis='["primary","secondary","secondary","primary"]'<br />
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'<br />
data-yunit="°C"<br />
data-ytext="Temperature"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-yunit_sec="mm"<br />
data-ytext_sec="Rain (mm)"<br />
data-height="250"<br />
data-yticks="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-nofulldays="true"<br />
data-daysago_start="2013-08-13T00:00:00"<br />
data-daysago_end="2013-08-14T00:00:00"<br />
data-cursorgroup="1"<br />
data-scrollgroup="1"<br />
data-xticks="auto"><br />
</div><br />
</source><br />
<br />
===7-Tage-Wettervorhersage mit Proplanta===<br />
In diesem Beispiel wird gezeigt, wie die Vorhersagewerte von [[PROPLANTA]] in einem Diagramm dargestellt werden können. Da die Werte nicht in einer Datenbank oder einem FileLog vorliegen, müssen sie über [[LogProxy]] verarbeitet werden. Dafür sind einige Vorbereitungen in FHEM nötig.<br />
<br />
[[File:FTUI_Widget_Chart-fc-Proplanta.png|941px]]<br />
<br />
'''1.''' Ein LogProxy-Device muss vorhanden sein:<br />
<pre><br />
define myLogProxy logProxy<br />
</pre><br />
<br />
'''2.''' In der Datei <code>99_myUtils.pm</code> muss folgende Routine hinzugefügt werden, die die Daten bereitstellt:<br />
<source lang="perl"><br />
#---------------------------------------<br />
# Proplanta LogProxy-Funktion<br />
#---------------------------------------<br />
sub logProxy_proplanta2Plot($$$$;$$) {<br />
my ($device, $fcValue, $from, $to, $fcHour, $expMode) = @_;<br />
my $regex;<br />
my @rl;<br />
<br />
return undef if(!$device);<br />
<br />
if($fcValue =~ s/_$//) {<br />
$regex = "^fc[\\d]+_".$fcValue."[\\d]{2}\$";<br />
}<br />
else {<br />
$regex = "^fc[\\d]+_".$fcValue."\$";<br />
}<br />
<br />
$fcHour = 12 if(!defined $fcHour);<br />
$expMode = "point" if(!defined $expMode);<br />
<br />
if( defined($defs{$device}) ) {<br />
if( $defs{$device}{TYPE} eq "PROPLANTA" ) {<br />
@rl = sort{<br />
my ($an) = ($a =~ m/fc(\d+)_.*/);<br />
my ($bn) = ($b =~ m/fc(\d+)_.*/);<br />
$an <=> $bn or $a cmp $b;<br />
}( grep /${regex}/,keys %{$defs{$device}{READINGS}} );<br />
return undef if( !@rl );<br />
} else {<br />
Log3 undef, 2, "logProxy_proplanta2Plot: $device is not a PROPLANTA device";<br />
return undef;<br />
}<br />
}<br />
<br />
my $fromsec = SVG_time_to_sec($from);<br />
my $tosec = SVG_time_to_sec($to);<br />
my $sec = $fromsec;<br />
my ($h,$fcDay,$mday,$mon,$year);<br />
my $timestamp;<br />
<br />
my $reading;<br />
my $value;<br />
my $prev_value;<br />
my $min = 999999;<br />
my $max = -999999;<br />
my $ret = "";<br />
<br />
# while not end of plot range reached<br />
while(($sec < $tosec) && @rl) {<br />
#remember previous value for start of plot range<br />
$prev_value = $value;<br />
<br />
$reading = shift @rl;<br />
($fcDay) = $reading =~ m/^fc(\d+).*/;<br />
$h = ($reading =~ m/.*(\d\d)$/)?$1:$fcHour;<br />
$value = ReadingsVal($device,$reading,undef);<br />
<br />
($mday,$mon,$year) = split('\.',ReadingsVal($device,"fc".$fcDay."_date",undef));<br />
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, $h, 0, 0);<br />
$sec = SVG_time_to_sec($timestamp);<br />
<br />
# skip all values before start of plot range<br />
next if( SVG_time_to_sec($timestamp) < $fromsec );<br />
<br />
# add first value at start of plot range<br />
if( !$ret && $prev_value ) {<br />
$min = $prev_value if( $prev_value < $min );<br />
$max = $prev_value if( $prev_value > $max );<br />
$ret .= "$from $prev_value\n";<br />
}<br />
<br />
# done if after end of plot range<br />
last if($sec > $tosec);<br />
<br />
$min = $value if( $value < $min );<br />
$max = $value if( $value > $max );<br />
<br />
# add actual controll point<br />
$ret .= "$timestamp $value\n";<br />
<br />
# Log 1, "$timestamp $value -0- $reading";<br />
}<br />
if(($sec < $tosec) && !@rl && ($expMode eq "day")) {<br />
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, 23, 59, 59);<br />
if(SVG_time_to_sec($timestamp) < $tosec) {<br />
$ret .= "$timestamp $value\n";<br />
}<br />
else {<br />
$ret .= "$to $value\n";<br />
}<br />
}<br />
elsif(($sec > $tosec) && ($expMode eq "day")) {<br />
$value = $prev_value + ($value - $prev_value)*(86400 + ($tosec - $sec))/86400;<br />
$ret .= "$to $value\n";<br />
}<br />
return ($ret,$min,$max,$prev_value);<br />
}<br />
</source><br />
<br />
Anschließend können die Daten im Chart-Widget angezeigt werden. Der Device-Name von Proplanta heißt hier im Beispiel <code>AU.xx.WE.Proplanta</code>.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
data-style='[<br />
"ftui l6fill",<br />
"ftui l5fill",<br />
"ftui l1fill"<br />
]'<br />
data-ptype='[<br />
"steps",<br />
"quadraticSmooth",<br />
"quadraticSmooth"<br />
]'<br />
data-uaxis='[<br />
"primary",<br />
"secondary",<br />
"secondary"<br />
]'<br />
data-legend='[<br />
"Regen",<br />
"Regenwahrscheinlichkeit",<br />
"Wolken"<br />
]'<br />
data-yunit="mm"<br />
data-ytext="Regen"<br />
data-yunit_sec="%"<br />
data-ytext_sec="Chance auf Regen / Wolken"<br />
data-timeformat="eeee"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-daysago_start = "0"<br />
data-daysago_end = "-7"<br />
data-xticks="1440"<br />
data-yticks="auto"<br />
data-title="7-Tage-Wettervorhersage"<br />
data-showlegend="true"<br />
class="nobuttons fullsize"><br />
</div><br />
</source><br />
<br />
'''Hilfreiche Links und Quellen zu diesem Beispiel:'''<br />
*[[LogProxy|LogProxy im FHEM-Wiki]]<br />
*{{Link2Forum|Topic=22967|Message=246973|LinkText=Stundengenaue Wettervorhersage (#1) im FHEM-Forum}}<br />
*{{Link2Forum|Topic=22967|Message=334713|LinkText=Stundengenaue Wettervorhersage (#2) im FHEM-Forum}}<br />
<br />
===Darstellung der Wetter Icons im Diagramm===<br />
<br />
[[File:Wetterchart2.png]]<br />
<br />
Wie oben bereits beschrieben, gibt es beim Chart grundsätzlich die Möglichkeit, Icons, welche in Form von URLs in den Logs abgelegt sind oder welche per logProxy generiert werden, darzustellen. Die Icons werden auf genau dem gleichen Weg von FHEM gelesen, wie alle anderen Datenpunkte. Im Folgenden wird ein Beispiel gezeigt, mit dem die im Proplanta Modul als Readings abgelegten Icons per logProxy Funktion gelesen und in ein Chart eingebaut werden könnnen.<br />
Da es beim Proplanta Modul für die ersten 7 Tage nicht das Reading <code>fc#_weatherIcon</code> gibt, sondern mehrere Readings für unterschiedliche Tageszeiten wogegen für die zweiten 7 Tage ausschließlich das Reading <code>fc#_weatherIcon</code> vorhanden ist, sollte per <code>attr device userReading</code> mit folgendem Eintrag dafür gesorgt werden, dass für alle Tage ein Reading <code>fc#_weatherIcon</code> vorhanden ist (alternativ könnten auch 2 Graphen gezeichnet werden, wobei der erste dann nur die ersten 7 Tage enthält und der zweite die letzen 7 Tage, will man nur die ersten 7 Tage darstellen braucht man das userReading nicht unbedingt).<br />
<source lang="perl"><br />
fc0_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc0_weatherDayIcon","");},<br />
fc1_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc1_weatherDayIcon","");},<br />
fc2_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc2_weatherDayIcon","");},<br />
fc3_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc3_weatherDayIcon","");},<br />
fc4_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc4_weatherDayIcon","");},<br />
fc5_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc5_weatherDayIcon","");},<br />
fc6_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc6_weatherDayIcon","");}<br />
</source><br />
Um die Icons darzustellen muss ein zusätzlicher Graph definiert werden. Dieser nutzt neben der Columnspec, die die URLs abruft den Parameter <code>data-ptype="icons:#"</code> (# ist eine Zahl und steht für die Nummer, beginnend bei 0 des Graphen, welcher für die y-Position der Icons verwendet werden soll) und den Stil <code>sym</code>. Der Wert für die Symbolgröße sollte z.B. durch eine zusätzliche Definition im File fhem-tablet-ui-user.css in der Form:<br />
<source lang="css"><br />
/* icon lines */<br />
.ftui.l99icon { stroke:#DDA400; stroke-width:48px; fill:none; }<br />
</source><br />
angepasst werden.<br />
<br />
Im folgenden ein Beispiel, welches eine Linie für die Maximale Tagestemperatur zeichnet und auf dieser Linie die Wetter Icons darstellt.<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22tempMax\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
data-style='[<br />
"ftui l99icon",<br />
"ftui l1fill"<br />
]'<br />
data-ptype='[<br />
"icons:1",<br />
"quadraticSmooth"<br />
]'<br />
data-uaxis='[<br />
"primary",<br />
"primary"<br />
]'<br />
data-legend='[<br />
"Wetterbedingung",<br />
"Max. Temperature"<br />
]'<br />
data-yunit="°C"<br />
data-ytext="Temperature (°C)"<br />
data-timeformat="ee\LF\dd.MM"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-daysago_start="-1w"<br />
data-y_margin="20"<br />
data-daysago_end="-3w"<br />
data-xticks="1440"<br />
data-yticks="auto"<br />
data-title="14-Tage-Wettervorhersage"<br />
data-showlegend="true"<br />
class="nobuttons fullsize"><br />
</div><br />
</source><br />
<br />
===Kuchendiagramme===<br />
In folgendem Beispiel wird gezeigt, wie man ein "Kuchendiagramm" darstellen kann.<br />
<br />
[[File:PieChart.png]]<br />
<br />
Ähnlich wie bei den Beispielen für die Wetter Darstellungen wird hierzu auch wieder logProxy benötigt. Zunächst muss die folgende zusätzliche Funktion in <code>99_myUtils.pm</code> einfügen.<br />
<source lang="perl"><br />
#---------------------------------------<br />
# Funktion zum Erzeugen der Inputs für Kuchendiagramme<br />
#---------------------------------------<br />
sub logProxy_values2PieChart($$$$;$$) {<br />
my ($device, $reading, $angle_start, $angle_dif, $inner_rad, $show_text) = @_;<br />
Log3 undef, 1, "$device, $reading, $angle_start, $angle_dif, $inner_rad, $show_text\n";<br />
<br />
use constant PI => 4 * atan2(1,1);<br />
<br />
my $value=ReadingsVal($device,$reading,0);<br />
<br />
my $angle_delta = $value/100*360;<br />
$angle_start = $angle_start/100*360;<br />
<br />
my $rad=10;<br />
my $irad=0;<br />
if ($inner_rad) {<br />
$irad = $rad*$inner_rad;<br />
}<br />
my $angle=$angle_start/360*2.0*PI;<br />
my $x=$irad*sin($angle);<br />
my $y=$irad*cos($angle);<br />
my $ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle<br />
<br />
for (my $i=$angle_start; $i<=$angle_start+$angle_delta; $i+=$angle_dif) {<br />
$angle = $i/360*2.0*PI;<br />
$x = $rad*sin($angle);<br />
$y = $rad*cos($angle);<br />
$ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle<br />
}<br />
<br />
$angle = ($angle_start+$angle_delta)/360*2.0*PI; # add last segment <br />
$ret .= ";p ".$rad*sin($angle)." ".$rad*cos($angle)."\n";<br />
<br />
if ($inner_rad) {<br />
for (my $i=$angle_start; $i<$angle_start+$angle_delta; $i+=$angle_dif) {<br />
$angle = ($angle_start+$angle_start+$angle_delta-$i)/360*2.0*PI;<br />
$x = $irad*sin($angle);<br />
$y = $irad*cos($angle);<br />
$ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle<br />
}<br />
}<br />
<br />
$angle = ($angle_start)/360*2.0*PI; # add last segment <br />
$ret .= ";p ".$irad*sin($angle)." ".$irad*cos($angle)."\n";<br />
<br />
if ($show_text) { # show text values<br />
$x = ($rad+$irad)/2*sin((2*$angle_start+$angle_delta)/2/360*2.0*PI);<br />
$y = ($rad+$irad)/2*cos((2*$angle_start+$angle_delta)/2/360*2.0*PI);<br />
<br />
$ret .= ";t ".$x." ".$y." middle ".$show_text.":".$value."%\n";<br />
}<br />
<br />
return($ret);<br />
}<br />
</source><br />
In FHEM braucht man Readings, welche eine Zahl enthalten, die als Prozentwert interpretiert wird. Für jeden Prozentwert (also für jedes Reading) generiert die o.a. Funktion nun den Chart Input für ein Kuchenstück und liefert diesen als Antwort auf das GET, welches das Chart Widget auslöst. Dazu braucht die Funktion folgende Parameter: (Name des FHEM Devices, Name des Readings, Start Winkel des Kuchenstücks (Mathematisch gegen den Uhrzeigersinn in Grad), Delta Winkel zum Zeichnen (legt fest in welchen Schritten der Teilkreis des Kuchenstücks gezeichnet wird), Skalierungsfaktor für inneren Ring wenn ein Ring gezeichtnet werden soll (0 bedeutet komplette Kuchenstücke), optionaler Text der ins Kuchenstück vor die Prozentzahl geschrieben wird).<br />
Im Folgenden eine Beispielkonfiguration für die Darstellung als Kuchendiagramm, die Readings heißen hier dPer1 bis dPer4. Der Startwinkel wird duch Aufsummierung der jeweils vorher schon gezeichneten Kuchenstücke gebildet, dadurch entstehen aneinander hängende Stücke.<br />
<source lang="html"><br />
[[Datei:[[Datei:Beispiel.jpg]]]]<div class="normal noaxes nobuttons"<br />
data-type="chart"<br />
data-logdevice='["lp"]'<br />
data-logfile="CURRENT"<br />
data-columnspec='[<br />
"Func:logProxy_values2PieChart(\"dPer1\",\"state\",ReadingsVal(\"dPer4\",\"state\",0)+ReadingsVal(\"dPer3\",\"state\",0),5,0,\"first\")",<br />
"Func:logProxy_values2PieChart(\"dPer2\",\"state\",ReadingsVal(\"dPer4\",\"state\",0)+ReadingsVal(\"dPer3\",\"state\",0)+ReadingsVal(\"dPer1\",\"state\",0),5,0,\"second\")",<br />
"Func:logProxy_values2PieChart(\"dPer3\",\"state\",ReadingsVal(\"dPer4\",\"state\",0),5,0,\"third\")",<br />
"Func:logProxy_values2PieChart(\"dPer4\",\"state\",0,5,0,\"fourth\")"<br />
]'<br />
data-style='["ftui l0fill","ftui l1fill","ftui l2fill","ftui l3fill"]'<br />
data-ptype='["lines"]'<br />
data-uaxis='["primary"]'<br />
data-legend='["First","Second","Third","Fourth"]'<br />
data-legendpos='["left","top"]'<br />
data-yunit=""<br />
data-height="300"<br />
data-width="300"<br />
data-ddd='["-40","0","0"]'<br />
data-dddspace='["-10"]'<br />
data-dddwidth='["10"]'<br />
data-showlegend="true"<br />
data-legend_horiz="true"<br />
data-xticks="auto"><br />
</div><br />
</source><br />
<br />
===Fensterstatus offen/geschlossen===<br />
Dieses Beispiel zeigt, wie ein Fensterkontakt, dessen Reading die Werte <code>closed</code> und <code>open</code> einnimmt, als Graph gezeichnet werden kann. Technisch gesehen werden hier die Werte <code>0</code> und <code>1</code> gezeichnet, indem über das Attribut '''data-columnspec''' dem Zustand <code>open</code> der Wert <code>1</code> und allen anderen Zuständen der Wert <code>0</code> zugeordnet wird. Über das Attribut '''data-yticks''' wird die Beschriftung an der Y-Achse (<code>0</code> und <code>1</code>) gegen einen frei definierbaren Text ausgetauscht.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="wz_fensterstatus"<br />
data-logdevice='["myDbLog"]'<br />
data-logfile='["HISTORY"]'<br />
data-columnspec='["wz_fensterstatus:state:0::$val=($val=~\\x22open\\x22?1:0)"]'<br />
data-style='["ftui l4fill"]'<br />
data-ptype='["steps"]'<br />
data-height="290"<br />
data-yticks='[[0,"geschlossen"],[1,"offen"]]'<br />
data-minvalue="0"<br />
data-maxvalue="1.1"<br />
data-nofulldays="true"<br />
data-daysago_start="1"<br />
data-daysago_end="-1"<br />
data-cursorgroup="1"<br />
data-scrollgroup="1"><br />
</div><br />
</source><br />
<br />
==Links==<br />
{{Link2Forum|Topic= 48450 |Message=401006|LinkText=Thread im FHEM-Forum}}<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Chart&diff=21437FTUI Widget Chart2017-05-02T15:15:06Z<p>Standarduser: Möglichkeit zum Stapeln von Linien besser hervorgehoben</p>
<hr />
<div>Das [[{{PAGENAME}}|Chart Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem sich verschiedenste Diagramme darstellen lassen. Die Aneinanderreihung mehrerer Werte eines Device-Readings zu einem zeitlichen Verlauf wird dabei als Graph bezeichnet.<br />
<br />
Es können beliebige Werte dargestellt und entsprechend der Sinnhaftigkeit, oder persönlichem Geschmack, formatiert werden. Farbe und Form der Linien sind je Graph einstellbar, auch wenn mehrere gleichzeitig in einem Diagramm angezeigt werden.<br />
<br />
Jedes Diagramm kann zwei Y-Achsen besitzen. Die primäre Y-Achse (primary) wird auf der linken Seite angezeigt, die sekundäre Y-Achse (secondary) auf der rechten Seite. Beide Achsen können unterschiedlich formatiert werden.<br />
<br />
<gallery><br />
File:Chart_tabletUI.png<br />
Datei:FTUI Widget Chart Stacked.png<br />
Datei:FTUI Widget Chart-fc-Proplanta.png<br />
Datei:Wetterchart2.png<br />
Datei:PieChart.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
! style="width:150px"|Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||Name des FHEM-Device, das die Aktualisierung des Charts triggert||||data-device="WohnzimmerHeizung"<br />
|-<br />
|'''data-get'''||Reading, das das Update des Diagramms triggert||'STATE'||<br />
|-<br />
|'''data-logdevice'''||Name des Log-Device, das dargestellt werden soll, oder ein Array, um mehrere Werte in einem Diagramm darzustellen||||data-logdevice="FileLog_WohnzimmerHeizung"<br />
|-<br />
|'''data-logfile'''|| Name des Log-Files, aus dem die Daten entnommen werden sollen (oder Array)||'-' = aktuelle Datei||data-logfile="WohnzimmerHeizung-2015.log"<br />
|-<br />
|'''data-columnspec'''||Ermittelt den Wert aus dem Log-File, der angezeigt werden soll (oder Array)||||data-columnspec="4:meas.*"<br />
|-<br />
|'''data-style'''||Stil, wie die Graph-Linien dargestellt werden sollen (z.B. 'SVGplot l0' oder 'ftui l0dash'), oder ein Array, wenn mehrere Linien unterschiedlich dargestellt werden sollen||||<br />
|-<br />
|'''data-ptype'''||Form, wie die Graphen dargestellt werden sollen (z.B. 'lines', 'cubic' oder 'fa-cog'), oder ein Array||'lines'||<br />
|-<br />
|'''data-uaxis'''||Name der Achse, die verwendet werden soll ('primary' = links, oder 'secondary' = rechts), oder ein Array||'primary'||<br />
|-<br />
|'''data-legend'''||Bezeichnung des Graphen (wird in Legende und am Cursor angezeigt), oder ein Array||||<br />
|-<br />
|'''data-minvalue'''||Minimaler Wert, der auf der linken Y-Achse ('primary') angezeigt werden soll. 'auto' = automatische Berechnung||'10'||<br />
|-<br />
|'''data-maxvalue'''||Maximaler Wert, der auf der linken Y-Achse ('primary') angezeigt werden soll. 'auto' = automatische Berechnung||'30'||<br />
|-<br />
|'''data-minvalue_sec'''||Minimaler Wert, der auf der rechten Y-Achse ('secondary') angezeigt werden soll. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-maxvalue_sec'''||Maximaler Wert, der auf der rechten Y-Achse ('secondary') angezeigt werden soll. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-xticks'''||Abstand zwischen den vertikalen Hilfslinien (bezogen auf die X-Achse) in Minuten. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-yticks'''||Abstand zwischen den horizontalen Hilfslinien (bezogen auf die linke Y-Achse). Kann auch ein Array mit Werte-Paaren enthalten, um die Linien mit Text zu beschriften.||'auto'||data-yticks='[[0,"open"],[1,"closed"]]'<br />
|-<br />
|'''data-yticks_sec'''||Abstand zwischen den horizontalen Hilfslinien (bezogen auf die rechte Y-Achse). Kann auch ein Array mit Werte-Paaren enthalten, um die Linien mit Text zu beschriften.||'auto'||data-yticks='[[0,"open"],[1,"closed"]]'<br />
|-<br />
|'''data-yticks_prio'''||Legt fest, ob die horizontalen Hilfslinien der linken (primary) oder der rechten (secondary) Y-Achse zugeordnet werden sollen||||data-yticks_prio='secondary'<br />
|-<br />
|'''data-ytype'''||Legt fest, ob die primäre y Achse logarithmisch sein soll (wert "log")||||data-ytype="log"<br />
|-<br />
|'''data-ytype_sec'''||Legt fest, ob die sekundäre y Achse logarithmisch sein soll (wert "log")||||data-ytype_sec="log"<br />
|-<br />
|'''data-daysago_start'''||Anzahl der vergangenen Tage, wo das Diagramm beginnen soll. '0' = Beginn heute 0:00 Uhr. Es kann auch ein fixes Datum (z.B. '2013-10-23') angegeben werden. Uhrzeitangaben werden nur berücksichtigt, wenn '''data-nofulldays='true' ''' verwendet wird.||'0'||<br />
|-<br />
|'''data-daysago_end'''||Anzahl der vergangenen Tage, wo das Diagramm enden soll. '-1' = Ende heute 24:00 Uhr. Es kann auch ein fixes Datum (z.B. '2013-10-24') angegeben werden. Uhrzeitangaben werden nur berücksichtigt, wenn '''data-nofulldays='true' ''' verwendet wird.||'-1'||<br />
|-<br />
|'''data-nofulldays'''||Aktiviert/deaktiviert die Rundung der X-Achse auf ganze Tage. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-timeformat'''||Zeitformat für die Anzeige an der X-Achse (siehe Hinweise)||||<br />
|-<br />
|'''data-ytext'''||Text, der neben der linken Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-ytext_sec'''||Text, der neben der rechten Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-yunit'''||Einheit, die an der linken Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-yunit_sec'''||Einheit, die an der rechten Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-crosshair'''||Aktiviert/deaktiviert den Fadenkreuz-Cursor. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-cursorgroup'''||Zahl zur Gruppierung der Werte am Fadenkreuz-Cursor (siehe Hinweise)||||<br />
|-<br />
|'''data-scrollgroup'''||Zahl zur Gruppierung der Graphen beim Bewegen und Zoomen. Alle Linien mit der selben Zahl werden miteinander gekoppelt und bewegen sich gemeinsam.||||<br />
|-<br />
|'''data-showlegend'''||Aktiviert/deaktiviert die Anzeige der Legene. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-legendpos'''||Array von zwei Werten, die die horizontale und vertikale Position der Legende festlegen (siehe Hinweise)||'["top","right"]'||<br />
|-<br />
|'''data-legend_horiz'''||legt fest, dass die Legendeneinträge horizontal angeordnet sind (anstatt vertikal wie im default Fall)||false||data-legend_horiz="true"<br />
|-<br />
|'''data-width'''||Breite des Diagramms (in % oder px)||||<br />
|-<br />
|'''data-height'''||Höhe des Diagramms (in % oder px)||||<br />
|-<br />
|'''data-graphsshown'''||Aktiviert/deaktiviert die initiale Anzeige von Graphen. Binärwert ('true' oder 'false'). Array, wenn mehrere Linien angezeigt werden sollen.||||<br />
|-<br />
|'''data-ddd'''||Einstellung für die 3D-Drehung (siehe Hinweise)||||data-ddd='["40","60","0"]'<br />
|-<br />
|'''data-dddspace'''||Abstand zwischen zwei Graphen, wenn die 3D-Anzeige aktiviert wurde (px)||'15'||<br />
|-<br />
|'''data-dddwidth'''||Breite, bzw. Tiefe der Graphen, wenn diese 3-dimensional angezeigt werden (px)||'10'||<br />
|-<br />
|'''data-title'''||Titel, der über dem Diagramm angezeigt werden soll. Der Inhalt kann auch dynamisch erzeugt werden (siehe Hinweise)||||<br />
|-<br />
|'''data-prefetch'''||Legt fest, ob zusätzliche Daten rechts und links des Plots im Hintergrund vom Server geholt werden sollen||false||data-prefetch="true"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|fullsize}}{{FTUI Klasse|noticks}}{{FTUI Klasse|nobuttons}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}<br />
|}<br />
<br />
<br />
Folgende Widget-spezifsche Klassen können zusätzlich in einer eigenen CSS-Datei definiert werden:<br />
<br />
{|class="wikitable"<br />
!Klasse<br />
!Beschreibung<br />
|-<br />
|'''chart-background'''||Hintergrundfarbe des Diagramms<br />
|-<br />
|'''buttons'''||Größe und Farbe der Buttons<br />
|-<br />
|'''text.axes'''||Generelle Schriftart und Farbe der Achsen<br />
|-<br />
|'''gridlines'''||Generelle Farbe und Größe der Gitternetzlinien<br />
|-<br />
|'''xaxis'''||Schriftart, Größe und Farbe der X-Achse<br />
|-<br />
|'''yaxis'''||Schriftart, Größe und Farbe der Y-Achse<br />
|-<br />
|'''xticks'''||Schriftart, Größe und Farbe der X-Achse (Zwischenlinien)<br />
|-<br />
|'''yticks'''||Schriftart, Größe und Farbe der Y-Achse (Zwischenlinien)<br />
|-<br />
|'''crosshair'''||Schriftart, Größe und Vordergrund/Hintergrundfarbe der Momentanwerte am Fadenkreuzcursor<br />
|-<br />
|'''caption'''||Schriftart, Größe und Farbe der Text-Buttons für Legende und Cursor<br />
|-<br />
|'''legend'''||Schriftart, Größe und Farbe der Legende<br />
|}<br />
<br />
Die Standardwerte sind in der Datei <code>css/ftui_chart.css</code> zu finden.<br />
<br />
==Datenquellen==<br />
Beim Chart-Widget können die gleichen Datenquellen genutzt werden, die auch für SVG-Plots verwendet werden können:<br />
# [[FileLog]]: Verlaufsdaten einer Textdatei entnehmen<br />
# [[DbLog]]: Verlaufsdaten einer Datenbank entnehmen<br />
# [[LogProxy]]: Daten dynamisch berechnet<br />
<br />
===FileLog===<br />
Um [[FileLog]] zu nutzen, wird als '''data-logdevice''' das FHEM-Device für das FileLog angegeben. In der Regel entstehen hier im Laufe der Zeit mehrere Log-Dateien. Name und Anzahl sind von der Definition abhängig - meist wird jeden Monat oder jedes Jahr eine neue Datei angelegt. Die gewünschte Datei kann mit '''data-logfile''' ausgewählt werden. Möchte man stets die aktuelle Datei verwenden (macht vor allem dann Sinn, wenn man die neusten Daten anzeigen will), kann das Attribut weggelassen, oder explizit <code>-</code> eingetragen werden. Zuletzt wird '''data-columnspec''' benötigt, um die gewünschten Daten zu in der Logdatei zu identifizieren. Hier wird die Spalte, in der die Daten stehen, gefolgt von Doppelpunkt und Readingname angegeben.<br />
<br />
Für ein Heizungsthermostat von Homematic mit dem Namen ''DG.wz.HZ.Heizungsventil'' ergibt sich somit beispielhaft folgende Definition, um gemessene Temperatur, Sollwert und Ventilstellung im Diagramm darzustellen:<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="FileLog_DG.wz.HZ.Heizungsventil"<br />
data-logfile="-"<br />
data-columnspec='["4:measured-temp","4:desired-temp","4:actuator"]'<br />
...><br />
</div><br />
</source><br />
<br />
Sollen Daten von unterschiedlichen Geräten in einem Diagramm angezeigt werden, muss '''data-logdevice''' als Array nach dem Schema <code>data-logdevice='["<Logdatei_1>","<Logdatei_2>","<Logdatei_3>"]'</code> definiert werden. Für jeden Eintrag in '''data-columnspec''' muss es auch den passenden Eintrag in '''data-logdevice''' geben (auch die Reihenfolge ist relevant).<br />
<br />
===DbLog===<br />
Um die Daten aus [[DbLog]] anzeigen zu können, werden die gleichen Attribute verwendet und mit für die Datenbank angepassten Werten beschrieben. Bei '''data-logdevice''' das FHEM-Device für die Datenbank angegeben. Im nachfolgenden Beispiel heißt diese <code>logdb</code> und besitzt wie üblich zwei Tabellen: <code>current</code> und <code>history</code> (der zeitliche Verlauf liegt in letzterer). Der Tabellenname wird bei '''data-logfile''' eingetragen. Da die Daten in der Datenbank etwas anders abgelegt werden, muss auch '''data-columnspec''' entsprechend angepasst werden. Statt der Spalte wird hier das FHEM-Device, gefolgt von Doppelpunkt und Readingname angegeben.<br />
<br />
Für das oben beschriebene Homematic-Heizungsthermostat ergibt sich dann folgende Definition, um die gleichen Daten aus einer Datenbank, statt einem LogFile zu lesen:<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="logdb"<br />
data-logfile="HISTORY"<br />
data-columnspec='["DG.wz.HZ.Heizungsventil:measured-temp","DG.wz.HZ.Heizungsventil:desired-temp","DG.wz.HZ.Heizungsventil:actuator"]'<br />
...><br />
</div><br />
</source><br />
<br />
Für die Anzeige von unterschiedlichen Geräten in einem Diagramm, muss nur '''data-columnspec''' entsprechend angepasst werden, solange sich alle Daten in der Datenbank befinden.<br />
<br />
===LogProxy===<br />
Um die Daten mittels [[LogProxy]] berechnen und anzeigen zu können, muss in FHEM ein LogProxy-Device definiert sein:<br />
<br />
<pre><br />
define myLogProxy logProxy<br />
</pre><br />
<br />
Weitere Einstellungen am LogProxy sind nicht nötig, die bloße Existenz reicht.<br />
<br />
Bei '''data-logdevice''' wird das FHEM-Device für den LogProxy angegeben. Im nachfolgenden Beispiel heißt dieses <code>myLogProxy</code>. Das Attribut '''data-logfile''' wird für LogProxy nicht benötigt. Befinden sich nur LogProxy-Werte im Diagramm kann das Attribut komplett entfallen. Sollen weitere Werte angezeigt werden, bleibt die Definition im Array einfach leer.<br />
<br />
Im Attribut '''data-columnspec''' wird eine Formel angegeben, wie die Werte berechnet werden sollen. Hier können die Formeln 1:1 von einem eventuell vorhandenen SVG-Plot übernommen werden. '''Dabei gibt es jedoch folgendes zu beachten:''' Befindet sich die Formel in einem Array, dürfen die Formeln keine Anführungszeichen (<code>"</code>) beinhalten. Stattdessen müssen sie als escapter Ascii-Code (<code>\\x22</code>) eingefügt werden.<br />
<br />
Das nachfolgende Beispiel zeigt, wie Vorhersagewerte aus einem FHEM-Device vom Typ Proplanta (Name hier <code>AU.xx.WE.Proplanta</code>) angezeigt werden können.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22temp_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
...><br />
</div><br />
</source><br />
<br />
'''Auch alle anderen Funktionen, die [[LogProxy]] bietet, können hier angewendet werden.'''<br />
<br />
==Hinweise==<br />
===Aktualisierung des Charts===<br />
Damit der Refresh des Charts funktioniert, muss auch ein Device angegeben werden, der das Refresh triggert. Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von '''data-get''' ändert.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="WohnzimmerHeizung"<br />
data-logdevice="FileLog_WohnzimmerHeizung"<br />
...><br />
</div><br />
</source><br />
<br />
===Aussehen der Linien===<br />
Mit dem Attribut '''data-style''' kann das Aussehen der Linien des jeweiligen Graphen verändert werden. Hierfür können die Standard-FHEM-Styles verwendet werden. Dazu wird das Attribut mit <code>SVGplot</code>, gefolgt von einem Leerzeichen und der gewünschten Farbe/Stil befüllt. Es existieren jedoch auch noch weitere, an FTUI angepasste Styles, zu finden in der CSS-Datei <code>css/ftui_chart.css</code>. Um diese zu verwenden, wird das Attribut mit <code>ftui</code>, gefolgt von einem Leerzeichen und der gewünschten Farbe/Stil befüllt. Eigene Styles können zum Beispiel in der Datei <code>css/fhem-table-ui-user.css</code> definiert werden.<br />
<br />
Folgende Übersicht zeigt die im Standard verfügbaren '''Farben''', alle Abbildungen sind mit im FTUI-Style entstanden:<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f0.png|thumb|none|150px|Farbe "l0"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f1.png|thumb|none|150px|Farbe "l1"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f2.png|thumb|none|150px|Farbe "l2"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f3.png|thumb|none|150px|Farbe "l3"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f4.png|thumb|none|150px|Farbe "l4"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f5.png|thumb|none|150px|Farbe "l5"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f6.png|thumb|none|150px|Farbe "l6"]] </li><br />
</ul></div><br />
<br />
Die Angabe zur Farbe kann dann mit der Linienart kombiniert werden. Dazu stehen folgende '''Stile''' zur Verfügung:<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-normal.png|thumb|none|225px|Darstellung in 2D: Stil "normal"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-dot.png|thumb|none|225px|Darstellung in 2D: Stil "dot"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-dash.png|thumb|none|225px|Darstellung in 2D: Stil "dash"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-fill.png|thumb|none|225px|Darstellung in 2D: Stil "fill"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-sym.png|thumb|none|225px|Darstellung in 2D: Stil "sym"]] </li><br />
</ul></div><br />
<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-normal.png|thumb|none|225px|Darstellung in 3D: Stil "normal"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-dot.png|thumb|none|225px|Darstellung in 3D: Stil "dot"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-dash.png|thumb|none|225px|Darstellung in 3D: Stil "dash"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-fill.png|thumb|none|225px|Darstellung in 3D: Stil "fill"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-sym.png|thumb|none|225px|Darstellung in 3D: Stil "sym"]] </li><br />
</ul></div><br />
<br />
Farbe und Stil werden kombiniert (zusammengeschrieben) beim Attribut '''data-style''' angegeben, sodass sich beispielsweise für eine graue Punktlinie folgendes ergibt: <code>data-style="ftui l1dot"</code>.<br />
Um die Darstellung als normale Linie zu erhalten, darf im Gegensatz zu den anderen Linienformen der Stil <code>normal</code> nicht angegeben werden. Für eine einfache graue Linie ist also die Angabe <code>data-style="ftui l1"</code> korrekt, wohingegen <code>data-style="ftui l1normal"</code> zu einer fehlerhaften Anzeige führt.<br />
<br />
'''Hinweis:''' Der Stil ''sym'' ist speziell dafür geeignet, Symbole statt Linien zu zeichnen. Dazu kann beim Attribut '''data-ptype''' als Linienform ein beliebiges Font-Awsome-, oder Open Automation-Icon angegeben werden. Alle in diesem Abschnitt enthaltenen Abbildungen sind mit <code>data-ptype="lines"</code> entstanden.<br />
<br />
===Form der Linien===<br />
Das Attribut '''data-ptype''' beeinflusst die Form der Linien. Hier sind folgende Werte möglich:<br />
<br />
* <code>lines</code><br />
* <code>steps</code><br />
* <code>fsteps</code><br />
* <code>histeps</code><br />
* <code>bars</code><br />
* <code>ibars</code><br />
* <code>cubic</code><br />
* <code>quadratic</code><br />
* <code>quadraticSmooth</code><br />
<br />
Zusätzlich ist es möglich, Symbole anzeigen zu lassen. Unterstützt werden Font-Awesome ('fa-...'), Open Automation ('oa-...') und FHEM-Symbole ('fs-...')). Damit die Symbole korrekt angezeigt werden, muss im Attribut '''data-style''' der Stil <code>sym</code> gewählt werden, da sonst nur Punkte, statt der Symbole gezeichnet werden.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="FileLog_DG.wz.HZ.Heizungsventil"<br />
...<br />
data-style="ftui l1sym"<br />
data-ptype="fa-cog"<br />
...><br />
</div><br />
</source><br />
<br />
Die Größe der Symbole ist in der Datei <code>css/ftui_chart.css</code> auf 12px festgelegt. Dieser Wert kann in einer eigenen CSS-Datei durch Anpassung von <code>stroke-width</code> überschrieben werden.<br />
<br />
<source lang="css"><br />
.ftui.l0sym { stroke:#DDA400; stroke-width:12px; fill:none; }<br />
.ftui.l1sym { stroke:#BBBBBB; stroke-width:12px; fill:none; }<br />
.ftui.l2sym { stroke:#CC0000; stroke-width:12px; fill:none; }<br />
.ftui.l3sym { stroke:#CCCC00; stroke-width:12px; fill:none; }<br />
.ftui.l4sym { stroke:#33CC33; stroke-width:12px; fill:none; }<br />
.ftui.l5sym { stroke:#33CCCC; stroke-width:12px; fill:none; }<br />
.ftui.l6sym { stroke:#3333CC; stroke-width:12px; fill:none; }<br />
</source><br />
<br />
'''data-ptype''' kann auch Inhalt im Format <code>'icon:1'</code> verarbeiten. Dann muss der zugehörige Wert in '''data-columnspec''' den Pfad zu einem Icon (z.B. für Wettervorhersagen) beinhalten. Der Y-Wert wird dann vom ersten Graphen übernommen. Weitere Ausführungen hierzu im Beispiel [[#Darstellung der Wetter Icons im Diagramm]]. <br />
<br />
===Stapeln von Linien===<br />
Über '''data-ptype''' kann zusätzlich festgelegt werden, ob Graphen übereinander gestapelt werden sollen. <code>data-ptype='lines:1'</code> bedeutet, dass der zugehörige Graph auf den Graph mit der Nummer 1 gestapelt werden soll. So etwas kann z.B. Sinn machen, wenn man den Stromverbrauch einzelner Devices darstellen und zusätzlich sehen will, wie hoch die Summe ist. Beispiel siehe unten.<br />
<br />
[[Datei:FTUI Widget Chart Stacked.png]]<br />
<br />
===Zeitformat der X-Achse===<br />
Die Zeitanzeige auf der X-Achse kann sehr flexibel eingestellt werden. Dafür stehen verschiedene Platzhalter zur Verfügung, die durch spezielle Zeichen (<code>-</code>, <code>.</code>, <code>/</code>, <code> </code> (Leerzeichen), <code>:</code>, <code>,</code>, <code>\</code>) getrennt werden. Alle Zeichen werden trotz Escape-Zeichen (<code>\</code>) in der Ausgabe angezeigt.<br />
<br />
Folgende Platzhalter werden unterstützt:<br />
*<code>'mm'</code>: Minuten als zweistellige Zahl<br />
*<code>'hh'</code>: Stunden als zweistellige Zahl<br />
*<code>'dd'</code>: Tag als zweistellige Zahl (Kalenderdatum)<br />
*<code>'MM'</code>: Monat als zweistellige Zahl (z.B. 02 für Februar)<br />
*<code>'MMM'</code>: Monat als dreistellige Abkürzung (z.B. Dec für Dezember)<br />
*<code>'MMMM'</code>: Langname des Monats (z.B. March)<br />
*<code>'ee'</code>: Wochentag als zweistellige Zahl (z.B. 00 für Sonntag)<br />
*<code>'eee'</code>: Wochentag als dreistellige Abkürzung (z.B. Mon für Montag)<br />
*<code>'eeee'</code>: Langname des Wochentags (z.B. Tuesday)<br />
*<code>'yy'</code>: Jahr als zweistellige Zahl (z.B. 16 für 2016)<br />
*<code>'yyyy'</code>: Jahr als vierstellige Zahl (z.B. 2016)<br />
*<code>'LF'</code>: Fügt einen Zeilenumbruch hinzu<br />
<br />
Beispiel: Der String <code>'MMM\LF\yyyy'</code> zeigt <code>'Jan'</code> in der ersten, und <code>'2016'</code> in der zweiten Zeile. <code>'MM.dd 2016'</code> wird zu <code>'03.05 2016'</code>.<br />
<br />
===Fadenkreuz-Cursor===<br />
Der Fadenkreuz-Cursor zeigt die Momentanwerte, indem man ihn über die Graphen bewegt. In Desktop-Browsern reicht einfaches Bewegen des Maus. Unter iOS und Android kann der Cursor wird der Cursor durch einfaches Tippen auf die neue Position bewegt.<br />
<br />
Mit dem Attribut '''data-cursorgroup''' können Graphen gruppiert werden. Am Cursor werden dann die Momentanwerte aller Graphen gleichzeitig angezeigt, die die selbe Zahl besitzen, sobald man die Maus über einen aus der Gruppe bewegt.<br />
<br />
===Legende===<br />
Mit dem Attribut '''data-legendpos''' kann die Position der Legende innerhalb des Diagramms festgelegt werden. Die Position wird mit einem Array, bestehend aus zwei Werten im Format <code>'["<horizontal>","<vertikal>"]'</code> angegeben. Für die horizontale Positionierung sind <code>'left'</code>, <code>'right'</code>, <code>'before'</code>, und <code>'behind'</code>, die vertikale Positionierung <code>'top'</code>, <code>'bottom'</code>, <code>'above'</code>, <code>'below'</code> erlaubt (der Unterschied zwischen <code>'left'</code> und <code>'before'</code> liegt darin, dass im zweiten Fall die Legende nicht in den Zeichenbereich gesetzt wird sondern vor das ganze Chart (entsprechend für <code>'after'</code>, <code>'above'</code> und <code>'below'</code>). Alternativ können auch Zahlen verwendet werden, die die Position in Prozent angeben. Durch verschieben mit der Maus oder durch verschieben mit dem Finger oder Stift auf Touch Devices kann die Legende auch an eine andere Position verschoben werden.<br />
<br />
Wenn die Legende eingeblendet ist, kann mittels Klick auf einen Legendeneintrag der zugehörige Graph ein- und ausgeblendet werden.<br />
<br />
===3-dimensionale Drehung===<br />
'''data-ddd''' ermöglicht, den Graphen 3-dimensional zu drehen. Als Wert wird ein Array mit den 3 Winkeln für x, y und z erwartet, wobei z selbst bisher nicht unterstützt wird.<br />
<br />
Beispiel: <code>data-ddd='["40","60","0"]'</code>. <br />
<br />
Wenn der 3D Modus aktiv ist ('''data-ddd''' gesetzt) sind 2 zusätzliche Parameter verfügbar um das Aussehen der Graphen zu beeinflussen. '''data-dddspace''' gibt an, wie viele pixel der Raum zwischen den einzelnen in z-Richtung hintereinander angeordneten Graphen betragen soll.<br />
'''data-dddwidth''' legt fest, wie viele pixel die einzelnen Graphen tief (oder dick) sein sollen.<br />
<br />
Wenn das Array angegeben wird, erscheinen zwei zusätzliche Buttons im Diagramm, mit denen die Drehung in X- und Y-Richtung verändert werden kann.<br />
<br />
===Diagrammtitel===<br />
Mit dem Attribut '''data-title''' kann dem Diagramm, ähnlich wie in FHEM-SVG-Plots, ein Titel hinzugefügt werden.<br />
<br />
Folgende Platzhalter werden unterstützt:<br />
*<code>'min1'</code>: Minimaler Y-Wert des ersten Graphs<br />
*<code>'max1'</code>: Maximaler Y-Wert des ersten Graphs<br />
*<code>'avg1'</code>: Mittlerer Y-Wert des ersten Graphs<br />
*<code>'cnt1'</code>: Anzahl der dargestellten Einzelwerte im ersten Graph<br />
*<code>'currval1'</code>: Letzter, bzw. aktuellster Y-Wert des ersten Graphs<br />
*<code>'mindate1'</code>: Niedrigster Wert auf der X-Achse des ersten Graphs<br />
*<code>'maxdate1'</code>: Höchster Wert auf der X-Achse vom ersten Graphs<br />
*<code>'currdate1'</code>: Letzter, bzw. aktuellster Wert auf der X-Achse des ersten Graphs<br />
<br />
Durch Einsetzen einer anderen Zahl statt '1' können auch die Werte der anderen Graphen angezeigt werden. Das Weglassen der Zahl bewirkt, dass der jeweils zutreffende Wert automatisch ermittelt wird. Bedeutet: <code>max</code> führt dazu, dass der höchste Wert aller angezeigter Graphen verwendet wird.<br />
<br />
Beispiel: <code>data-title="Min: $data{mindate4}, Max: $data{maxdate4}, Last: $data{currdate4}"</code><br />
<br />
===Buttons im Diagramm===<br />
Es gibt mehrere Buttons, mit denen sich die Anzeige des Diagramms verändern lässt. <code><-</code> und <code>-></code> bewegen die Graphen nach links und rechts. <code>+</code> und <code>-</code> zoomen die Anzeige. <code>legend</code> und <code>cursor</code> schalten die zugehörigen Anzeigen ein und aus.<br />
<br />
==Beispiele==<br />
===Einfaches Diagramm===<br />
Das Beispiel zeigt ein einfaches Diagramm mit 4 unterschiedlich formatierten Graphen, Legende und Momentanwerten am Fadenkreuz-Cursor.<br />
<br />
[[File:Chart_tabletUI.png]]<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'<br />
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'<br />
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'<br />
data-ptype='["lines","histeps","histeps","cubic"]'<br />
data-uaxis='["primary","secondary","secondary","primary"]'<br />
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'<br />
data-yunit="°C"<br />
data-ytext="Temperature"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-yunit_sec="mm"<br />
data-ytext_sec="Rain (mm)"<br />
data-height="250"<br />
data-yticks="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-nofulldays="true"<br />
data-daysago_start="2013-08-13T00:00:00"<br />
data-daysago_end="2013-08-14T00:00:00"<br />
data-cursorgroup="1"<br />
data-scrollgroup="1"<br />
data-xticks="auto"><br />
</div><br />
</source><br />
<br />
===7-Tage-Wettervorhersage mit Proplanta===<br />
In diesem Beispiel wird gezeigt, wie die Vorhersagewerte von [[PROPLANTA]] in einem Diagramm dargestellt werden können. Da die Werte nicht in einer Datenbank oder einem FileLog vorliegen, müssen sie über [[LogProxy]] verarbeitet werden. Dafür sind einige Vorbereitungen in FHEM nötig.<br />
<br />
[[File:FTUI_Widget_Chart-fc-Proplanta.png|941px]]<br />
<br />
'''1.''' Ein LogProxy-Device muss vorhanden sein:<br />
<pre><br />
define myLogProxy logProxy<br />
</pre><br />
<br />
'''2.''' In der Datei <code>99_myUtils.pm</code> muss folgende Routine hinzugefügt werden, die die Daten bereitstellt:<br />
<source lang="perl"><br />
#---------------------------------------<br />
# Proplanta LogProxy-Funktion<br />
#---------------------------------------<br />
sub logProxy_proplanta2Plot($$$$;$$) {<br />
my ($device, $fcValue, $from, $to, $fcHour, $expMode) = @_;<br />
my $regex;<br />
my @rl;<br />
<br />
return undef if(!$device);<br />
<br />
if($fcValue =~ s/_$//) {<br />
$regex = "^fc[\\d]+_".$fcValue."[\\d]{2}\$";<br />
}<br />
else {<br />
$regex = "^fc[\\d]+_".$fcValue."\$";<br />
}<br />
<br />
$fcHour = 12 if(!defined $fcHour);<br />
$expMode = "point" if(!defined $expMode);<br />
<br />
if( defined($defs{$device}) ) {<br />
if( $defs{$device}{TYPE} eq "PROPLANTA" ) {<br />
@rl = sort{<br />
my ($an) = ($a =~ m/fc(\d+)_.*/);<br />
my ($bn) = ($b =~ m/fc(\d+)_.*/);<br />
$an <=> $bn or $a cmp $b;<br />
}( grep /${regex}/,keys %{$defs{$device}{READINGS}} );<br />
return undef if( !@rl );<br />
} else {<br />
Log3 undef, 2, "logProxy_proplanta2Plot: $device is not a PROPLANTA device";<br />
return undef;<br />
}<br />
}<br />
<br />
my $fromsec = SVG_time_to_sec($from);<br />
my $tosec = SVG_time_to_sec($to);<br />
my $sec = $fromsec;<br />
my ($h,$fcDay,$mday,$mon,$year);<br />
my $timestamp;<br />
<br />
my $reading;<br />
my $value;<br />
my $prev_value;<br />
my $min = 999999;<br />
my $max = -999999;<br />
my $ret = "";<br />
<br />
# while not end of plot range reached<br />
while(($sec < $tosec) && @rl) {<br />
#remember previous value for start of plot range<br />
$prev_value = $value;<br />
<br />
$reading = shift @rl;<br />
($fcDay) = $reading =~ m/^fc(\d+).*/;<br />
$h = ($reading =~ m/.*(\d\d)$/)?$1:$fcHour;<br />
$value = ReadingsVal($device,$reading,undef);<br />
<br />
($mday,$mon,$year) = split('\.',ReadingsVal($device,"fc".$fcDay."_date",undef));<br />
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, $h, 0, 0);<br />
$sec = SVG_time_to_sec($timestamp);<br />
<br />
# skip all values before start of plot range<br />
next if( SVG_time_to_sec($timestamp) < $fromsec );<br />
<br />
# add first value at start of plot range<br />
if( !$ret && $prev_value ) {<br />
$min = $prev_value if( $prev_value < $min );<br />
$max = $prev_value if( $prev_value > $max );<br />
$ret .= "$from $prev_value\n";<br />
}<br />
<br />
# done if after end of plot range<br />
last if($sec > $tosec);<br />
<br />
$min = $value if( $value < $min );<br />
$max = $value if( $value > $max );<br />
<br />
# add actual controll point<br />
$ret .= "$timestamp $value\n";<br />
<br />
# Log 1, "$timestamp $value -0- $reading";<br />
}<br />
if(($sec < $tosec) && !@rl && ($expMode eq "day")) {<br />
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, 23, 59, 59);<br />
if(SVG_time_to_sec($timestamp) < $tosec) {<br />
$ret .= "$timestamp $value\n";<br />
}<br />
else {<br />
$ret .= "$to $value\n";<br />
}<br />
}<br />
elsif(($sec > $tosec) && ($expMode eq "day")) {<br />
$value = $prev_value + ($value - $prev_value)*(86400 + ($tosec - $sec))/86400;<br />
$ret .= "$to $value\n";<br />
}<br />
return ($ret,$min,$max,$prev_value);<br />
}<br />
</source><br />
<br />
Anschließend können die Daten im Chart-Widget angezeigt werden. Der Device-Name von Proplanta heißt hier im Beispiel <code>AU.xx.WE.Proplanta</code>.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
data-style='[<br />
"ftui l6fill",<br />
"ftui l5fill",<br />
"ftui l1fill"<br />
]'<br />
data-ptype='[<br />
"steps",<br />
"quadraticSmooth",<br />
"quadraticSmooth"<br />
]'<br />
data-uaxis='[<br />
"primary",<br />
"secondary",<br />
"secondary"<br />
]'<br />
data-legend='[<br />
"Regen",<br />
"Regenwahrscheinlichkeit",<br />
"Wolken"<br />
]'<br />
data-yunit="mm"<br />
data-ytext="Regen"<br />
data-yunit_sec="%"<br />
data-ytext_sec="Chance auf Regen / Wolken"<br />
data-timeformat="eeee"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-daysago_start = "0"<br />
data-daysago_end = "-7"<br />
data-xticks="1440"<br />
data-yticks="auto"<br />
data-title="7-Tage-Wettervorhersage"<br />
data-showlegend="true"<br />
class="nobuttons fullsize"><br />
</div><br />
</source><br />
<br />
'''Hilfreiche Links und Quellen zu diesem Beispiel:'''<br />
*[[LogProxy|LogProxy im FHEM-Wiki]]<br />
*{{Link2Forum|Topic=22967|Message=246973|LinkText=Stundengenaue Wettervorhersage (#1) im FHEM-Forum}}<br />
*{{Link2Forum|Topic=22967|Message=334713|LinkText=Stundengenaue Wettervorhersage (#2) im FHEM-Forum}}<br />
<br />
===Darstellung der Wetter Icons im Diagramm===<br />
<br />
[[File:Wetterchart2.png]]<br />
<br />
Wie oben bereits beschrieben, gibt es beim Chart grundsätzlich die Möglichkeit, Icons, welche in Form von URLs in den Logs abgelegt sind oder welche per logProxy generiert werden, darzustellen. Die Icons werden auf genau dem gleichen Weg von FHEM gelesen, wie alle anderen Datenpunkte. Im Folgenden wird ein Beispiel gezeigt, mit dem die im Proplanta Modul als Readings abgelegten Icons per logProxy Funktion gelesen und in ein Chart eingebaut werden könnnen.<br />
Da es beim Proplanta Modul für die ersten 7 Tage nicht das Reading <code>fc#_weatherIcon</code> gibt, sondern mehrere Readings für unterschiedliche Tageszeiten wogegen für die zweiten 7 Tage ausschließlich das Reading <code>fc#_weatherIcon</code> vorhanden ist, sollte per <code>attr device userReading</code> mit folgendem Eintrag dafür gesorgt werden, dass für alle Tage ein Reading <code>fc#_weatherIcon</code> vorhanden ist (alternativ könnten auch 2 Graphen gezeichnet werden, wobei der erste dann nur die ersten 7 Tage enthält und der zweite die letzen 7 Tage, will man nur die ersten 7 Tage darstellen braucht man das userReading nicht unbedingt).<br />
<source lang="perl"><br />
fc0_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc0_weatherDayIcon","");},<br />
fc1_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc1_weatherDayIcon","");},<br />
fc2_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc2_weatherDayIcon","");},<br />
fc3_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc3_weatherDayIcon","");},<br />
fc4_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc4_weatherDayIcon","");},<br />
fc5_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc5_weatherDayIcon","");},<br />
fc6_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc6_weatherDayIcon","");}<br />
</source><br />
Um die Icons darzustellen muss ein zusätzlicher Graph definiert werden. Dieser nutzt neben der Columnspec, die die URLs abruft den Parameter <code>data-ptype="icons:#"</code> (# ist eine Zahl und steht für die Nummer, beginnend bei 0 des Graphen, welcher für die y-Position der Icons verwendet werden soll) und den Stil <code>sym</code>. Der Wert für die Symbolgröße sollte z.B. durch eine zusätzliche Definition im File fhem-tablet-ui-user.css in der Form:<br />
<source lang="css"><br />
/* icon lines */<br />
.ftui.l99icon { stroke:#DDA400; stroke-width:48px; fill:none; }<br />
</source><br />
angepasst werden.<br />
<br />
Im folgenden ein Beispiel, welches eine Linie für die Maximale Tagestemperatur zeichnet und auf dieser Linie die Wetter Icons darstellt.<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22tempMax\\x22,$from,$to,12,\\x22day\\x22)",<br />
]'<br />
data-style='[<br />
"ftui l99icon",<br />
"ftui l1fill"<br />
]'<br />
data-ptype='[<br />
"icons:1",<br />
"quadraticSmooth"<br />
]'<br />
data-uaxis='[<br />
"primary",<br />
"primary"<br />
]'<br />
data-legend='[<br />
"Wetterbedingung",<br />
"Max. Temperature"<br />
]'<br />
data-yunit="°C"<br />
data-ytext="Temperature (°C)"<br />
data-timeformat="ee\LF\dd.MM"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-daysago_start="-1w"<br />
data-y_margin="20"<br />
data-daysago_end="-3w"<br />
data-xticks="1440"<br />
data-yticks="auto"<br />
data-title="14-Tage-Wettervorhersage"<br />
data-showlegend="true"<br />
class="nobuttons fullsize"><br />
</div><br />
</source><br />
<br />
===Kuchendiagramme===<br />
In folgendem Beispiel wird gezeigt, wie man ein "Kuchendiagramm" darstellen kann.<br />
<br />
[[File:PieChart.png]]<br />
<br />
Ähnlich wie bei den Beispielen für die Wetter Darstellungen wird hierzu auch wieder logProxy benötigt. Zunächst muss die folgende zusätzliche Funktion in <code>99_myUtils.pm</code> einfügen.<br />
<source lang="perl"><br />
#---------------------------------------<br />
# Funktion zum Erzeugen der Inputs für Kuchendiagramme<br />
#---------------------------------------<br />
sub logProxy_values2PieChart($$$$;$) {<br />
my ($device, $reading, $angle_start, $angle_dif, $show_text) = @_;<br />
Log3 undef, 5, "$device, $reading, $angle_start, $angle_dif, $show_text\n";<br />
<br />
use constant PI => 4 * atan2(1,1);<br />
<br />
my $value=ReadingsVal($device,$reading,0);<br />
<br />
my $angle_delta = $value/100*360;<br />
$angle_start = $angle_start/100*360;<br />
<br />
my $rad=10;<br />
my $ret=";c 0\n;p 0 0\n";<br />
my $angle;<br />
my $x;<br />
my $y;<br />
<br />
for (my $i=$angle_start; $i<$angle_start+$angle_delta; $i+=$angle_dif) {<br />
$angle = $i/360*2.0*PI;<br />
$x = $rad*sin($angle);<br />
$y = $rad*cos($angle);<br />
$ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle<br />
}<br />
<br />
$angle = ($angle_start+$angle_delta)/360*2.0*PI; # add last segment <br />
$ret .= ";p ".$rad*sin($angle)." ".$rad*cos($angle)."\n";<br />
$ret .= ";p 0 0\n";<br />
<br />
if ($show_text) { # show text values<br />
$x = $rad/1.5*sin((2*$angle_start+$angle_delta)/2/360*2.0*PI);<br />
$y = $rad/1.5*cos((2*$angle_start+$angle_delta)/2/360*2.0*PI);<br />
<br />
$ret .= ";t ".$x." ".$y." middle ".$show_text.":".$value."%\n";<br />
}<br />
<br />
return($ret);<br />
}<br />
</source><br />
In FHEM braucht man Readings, welche eine Zahl enthalten, die als Prozentwert interpretiert wird. Für jeden Prozentwert (also für jedes Reading) generiert die o.a. Funktion nun den Chart Input für ein Kuchenstück und liefert diesen als Antwort auf das GET, welches das Chart Widget auslöst. Dazu braucht die Funktion folgende Parameter: (Name des FHEM Devices, Name des Readings, Start Winkel des Kuchenstücks (Mathematisch gegen den Uhrzeigersinn in Grad), Delta Winkel zum Zeichnen (legt fest in welchen Schritten der Teilkreis des Kuchenstücks gezeichnet wird), optionaler Text der ins Kuchenstück vor die Prozentzahl geschrieben wird).<br />
Im Folgenden eine Beispielkonfiguration für die Darstellung als Kuchendiagramm, die Readings heißen hier dPer1 bis dPer4. Der Startwinkel wird duch Aufsummierung der jeweils vorher schon gezeichneten Kuchenstücke gebildet, dadurch entstehen aneinander hängende Stücke.<br />
<source lang="html"><br />
[[Datei:[[Datei:Beispiel.jpg]]]]<div class="normal noaxes nobuttons"<br />
data-type="chart"<br />
data-logdevice='["lp"]'<br />
data-logfile="CURRENT"<br />
data-columnspec='[<br />
"Func:logProxy_values2PieChart(\"dPer1\",\"state\",ReadingsVal(\"dPer4\",\"state\",0)+ReadingsVal(\"dPer3\",\"state\",0),5,\"first\")",<br />
"Func:logProxy_values2PieChart(\"dPer2\",\"state\",ReadingsVal(\"dPer4\",\"state\",0)+ReadingsVal(\"dPer3\",\"state\",0)+ReadingsVal(\"dPer1\",\"state\",0),5,\"second\")",<br />
"Func:logProxy_values2PieChart(\"dPer3\",\"state\",ReadingsVal(\"dPer4\",\"state\",0),5,\"third\")",<br />
"Func:logProxy_values2PieChart(\"dPer4\",\"state\",0,5,\"fourth\")"<br />
]'<br />
data-style='["ftui l0fill","ftui l1fill","ftui l2fill","ftui l3fill"]'<br />
data-ptype='["lines"]'<br />
data-uaxis='["primary"]'<br />
data-legend='["First","Second","Third","Fourth"]'<br />
data-legendpos='["left","top"]'<br />
data-yunit=""<br />
data-height="300"<br />
data-width="300"<br />
data-ddd='["-40","0","0"]'<br />
data-dddspace='["-10"]'<br />
data-dddwidth='["10"]'<br />
data-showlegend="true"<br />
data-legend_horiz="true"<br />
data-xticks="auto"><br />
</div><br />
</source><br />
<br />
===Fensterstatus offen/geschlossen===<br />
Dieses Beispiel zeigt, wie ein Fensterkontakt, dessen Reading die Werte <code>closed</code> und <code>open</code> einnimmt, als Graph gezeichnet werden kann. Technisch gesehen werden hier die Werte <code>0</code> und <code>1</code> gezeichnet, indem über das Attribut '''data-columnspec''' dem Zustand <code>open</code> der Wert <code>1</code> und allen anderen Zuständen der Wert <code>0</code> zugeordnet wird. Über das Attribut '''data-yticks''' wird die Beschriftung an der Y-Achse (<code>0</code> und <code>1</code>) gegen einen frei definierbaren Text ausgetauscht.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="wz_fensterstatus"<br />
data-logdevice='["myDbLog"]'<br />
data-logfile='["HISTORY"]'<br />
data-columnspec='["wz_fensterstatus:state:0::$val=($val=~\\x22open\\x22?1:0)"]'<br />
data-style='["ftui l4fill"]'<br />
data-ptype='["steps"]'<br />
data-height="290"<br />
data-yticks='[[0,"geschlossen"],[1,"offen"]]'<br />
data-minvalue="0"<br />
data-maxvalue="1.1"<br />
data-nofulldays="true"<br />
data-daysago_start="1"<br />
data-daysago_end="-1"<br />
data-cursorgroup="1"<br />
data-scrollgroup="1"><br />
</div><br />
</source><br />
<br />
==Links==<br />
{{Link2Forum|Topic= 48450 |Message=401006|LinkText=Thread im FHEM-Forum}}<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=Datei:FTUI_Widget_Chart_Stacked.png&diff=21436Datei:FTUI Widget Chart Stacked.png2017-05-02T15:12:37Z<p>Standarduser: </p>
<hr />
<div></div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Chart&diff=21435FTUI Widget Chart2017-05-02T14:58:12Z<p>Standarduser: Weitere Chartvarianten in die Galerie eingefügt</p>
<hr />
<div>Das [[{{PAGENAME}}|Chart Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem sich verschiedenste Diagramme darstellen lassen. Die Aneinanderreihung mehrerer Werte eines Device-Readings zu einem zeitlichen Verlauf wird dabei als Graph bezeichnet.<br />
<br />
Es können beliebige Werte dargestellt und entsprechend der Sinnhaftigkeit, oder persönlichem Geschmack, formatiert werden. Farbe und Form der Linien sind je Graph einstellbar, auch wenn mehrere gleichzeitig in einem Diagramm angezeigt werden.<br />
<br />
Jedes Diagramm kann zwei Y-Achsen besitzen. Die primäre Y-Achse (primary) wird auf der linken Seite angezeigt, die sekundäre Y-Achse (secondary) auf der rechten Seite. Beide Achsen können unterschiedlich formatiert werden.<br />
<br />
<gallery><br />
File:Chart_tabletUI.png<br />
Datei:FTUI Widget Chart-fc-Proplanta.png<br />
Datei:Wetterchart2.png<br />
Datei:PieChart.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
! style="width:150px"|Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||Name des FHEM-Device, das die Aktualisierung des Charts triggert||||data-device="WohnzimmerHeizung"<br />
|-<br />
|'''data-get'''||Reading, das das Update des Diagramms triggert||'STATE'||<br />
|-<br />
|'''data-logdevice'''||Name des Log-Device, das dargestellt werden soll, oder ein Array, um mehrere Werte in einem Diagramm darzustellen||||data-logdevice="FileLog_WohnzimmerHeizung"<br />
|-<br />
|'''data-logfile'''|| Name des Log-Files, aus dem die Daten entnommen werden sollen (oder Array)||'-' = aktuelle Datei||data-logfile="WohnzimmerHeizung-2015.log"<br />
|-<br />
|'''data-columnspec'''||Ermittelt den Wert aus dem Log-File, der angezeigt werden soll (oder Array)||||data-columnspec="4:meas.*"<br />
|-<br />
|'''data-style'''||Stil, wie die Graph-Linien dargestellt werden sollen (z.B. 'SVGplot l0' oder 'ftui l0dash'), oder ein Array, wenn mehrere Linien unterschiedlich dargestellt werden sollen||||<br />
|-<br />
|'''data-ptype'''||Form, wie die Graphen dargestellt werden sollen (z.B. 'lines', 'cubic' oder 'fa-cog'), oder ein Array||'lines'||<br />
|-<br />
|'''data-uaxis'''||Name der Achse, die verwendet werden soll ('primary' = links, oder 'secondary' = rechts), oder ein Array||'primary'||<br />
|-<br />
|'''data-legend'''||Bezeichnung des Graphen (wird in Legende und am Cursor angezeigt), oder ein Array||||<br />
|-<br />
|'''data-minvalue'''||Minimaler Wert, der auf der linken Y-Achse ('primary') angezeigt werden soll. 'auto' = automatische Berechnung||'10'||<br />
|-<br />
|'''data-maxvalue'''||Maximaler Wert, der auf der linken Y-Achse ('primary') angezeigt werden soll. 'auto' = automatische Berechnung||'30'||<br />
|-<br />
|'''data-minvalue_sec'''||Minimaler Wert, der auf der rechten Y-Achse ('secondary') angezeigt werden soll. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-maxvalue_sec'''||Maximaler Wert, der auf der rechten Y-Achse ('secondary') angezeigt werden soll. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-xticks'''||Abstand zwischen den vertikalen Hilfslinien (bezogen auf die X-Achse) in Minuten. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-yticks'''||Abstand zwischen den horizontalen Hilfslinien (bezogen auf die linke Y-Achse). Kann auch ein Array mit Werte-Paaren enthalten, um die Linien mit Text zu beschriften.||'auto'||data-yticks='[[0,"open"],[1,"closed"]]'<br />
|-<br />
|'''data-yticks_sec'''||Abstand zwischen den horizontalen Hilfslinien (bezogen auf die rechte Y-Achse). Kann auch ein Array mit Werte-Paaren enthalten, um die Linien mit Text zu beschriften.||'auto'||data-yticks='[[0,"open"],[1,"closed"]]'<br />
|-<br />
|'''data-yticks_prio'''||Legt fest, ob die horizontalen Hilfslinien der linken (primary) oder der rechten (secondary) Y-Achse zugeordnet werden sollen||||data-yticks_prio='secondary'<br />
|-<br />
|'''data-ytype'''||Legt fest, ob die primäre y Achse logarithmisch sein soll (wert "log")||||data-ytype="log"<br />
|-<br />
|'''data-ytype_sec'''||Legt fest, ob die sekundäre y Achse logarithmisch sein soll (wert "log")||||data-ytype_sec="log"<br />
|-<br />
|'''data-daysago_start'''||Anzahl der vergangenen Tage, wo das Diagramm beginnen soll. '0' = Beginn heute 0:00 Uhr. Es kann auch ein fixes Datum (z.B. '2013-10-23') angegeben werden. Uhrzeitangaben werden nur berücksichtigt, wenn '''data-nofulldays='true' ''' verwendet wird.||'0'||<br />
|-<br />
|'''data-daysago_end'''||Anzahl der vergangenen Tage, wo das Diagramm enden soll. '-1' = Ende heute 24:00 Uhr. Es kann auch ein fixes Datum (z.B. '2013-10-24') angegeben werden. Uhrzeitangaben werden nur berücksichtigt, wenn '''data-nofulldays='true' ''' verwendet wird.||'-1'||<br />
|-<br />
|'''data-nofulldays'''||Aktiviert/deaktiviert die Rundung der X-Achse auf ganze Tage. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-timeformat'''||Zeitformat für die Anzeige an der X-Achse (siehe Hinweise)||||<br />
|-<br />
|'''data-ytext'''||Text, der neben der linken Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-ytext_sec'''||Text, der neben der rechten Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-yunit'''||Einheit, die an der linken Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-yunit_sec'''||Einheit, die an der rechten Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-crosshair'''||Aktiviert/deaktiviert den Fadenkreuz-Cursor. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-cursorgroup'''||Zahl zur Gruppierung der Werte am Fadenkreuz-Cursor (siehe Hinweise)||||<br />
|-<br />
|'''data-scrollgroup'''||Zahl zur Gruppierung der Graphen beim Bewegen und Zoomen. Alle Linien mit der selben Zahl werden miteinander gekoppelt und bewegen sich gemeinsam.||||<br />
|-<br />
|'''data-showlegend'''||Aktiviert/deaktiviert die Anzeige der Legene. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-legendpos'''||Array von zwei Werten, die die horizontale und vertikale Position der Legende festlegen (siehe Hinweise)||'["top","right"]'||<br />
|-<br />
|'''data-legend_horiz'''||legt fest, dass die Legendeneinträge horizontal angeordnet sind (anstatt vertikal wie im default Fall)||false||data-legend_horiz="true"<br />
|-<br />
|'''data-width'''||Breite des Diagramms (in % oder px)||||<br />
|-<br />
|'''data-height'''||Höhe des Diagramms (in % oder px)||||<br />
|-<br />
|'''data-graphsshown'''||Aktiviert/deaktiviert die initiale Anzeige von Graphen. Binärwert ('true' oder 'false'). Array, wenn mehrere Linien angezeigt werden sollen.||||<br />
|-<br />
|'''data-ddd'''||Einstellung für die 3D-Drehung (siehe Hinweise)||||data-ddd='["40","60","0"]'<br />
|-<br />
|'''data-dddspace'''||Abstand zwischen zwei Graphen, wenn die 3D-Anzeige aktiviert wurde (px)||'15'||<br />
|-<br />
|'''data-dddwidth'''||Breite, bzw. Tiefe der Graphen, wenn diese 3-dimensional angezeigt werden (px)||'10'||<br />
|-<br />
|'''data-title'''||Titel, der über dem Diagramm angezeigt werden soll. Der Inhalt kann auch dynamisch erzeugt werden (siehe Hinweise)||||<br />
|-<br />
|'''data-prefetch'''||Legt fest, ob zusätzliche Daten rechts und links des Plots im Hintergrund vom Server geholt werden sollen||false||data-prefetch="true"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|fullsize}}{{FTUI Klasse|noticks}}{{FTUI Klasse|nobuttons}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}<br />
|}<br />
<br />
<br />
Folgende Widget-spezifsche Klassen können zusätzlich in einer eigenen CSS-Datei definiert werden:<br />
<br />
{|class="wikitable"<br />
!Klasse<br />
!Beschreibung<br />
|-<br />
|'''chart-background'''||Hintergrundfarbe des Diagramms<br />
|-<br />
|'''buttons'''||Größe und Farbe der Buttons<br />
|-<br />
|'''text.axes'''||Generelle Schriftart und Farbe der Achsen<br />
|-<br />
|'''gridlines'''||Generelle Farbe und Größe der Gitternetzlinien<br />
|-<br />
|'''xaxis'''||Schriftart, Größe und Farbe der X-Achse<br />
|-<br />
|'''yaxis'''||Schriftart, Größe und Farbe der Y-Achse<br />
|-<br />
|'''xticks'''||Schriftart, Größe und Farbe der X-Achse (Zwischenlinien)<br />
|-<br />
|'''yticks'''||Schriftart, Größe und Farbe der Y-Achse (Zwischenlinien)<br />
|-<br />
|'''crosshair'''||Schriftart, Größe und Vordergrund/Hintergrundfarbe der Momentanwerte am Fadenkreuzcursor<br />
|-<br />
|'''caption'''||Schriftart, Größe und Farbe der Text-Buttons für Legende und Cursor<br />
|-<br />
|'''legend'''||Schriftart, Größe und Farbe der Legende<br />
|}<br />
<br />
Die Standardwerte sind in der Datei <code>css/ftui_chart.css</code> zu finden.<br />
<br />
==Datenquellen==<br />
Beim Chart-Widget können die gleichen Datenquellen genutzt werden, die auch für SVG-Plots verwendet werden können:<br />
# [[FileLog]]: Verlaufsdaten einer Textdatei entnehmen<br />
# [[DbLog]]: Verlaufsdaten einer Datenbank entnehmen<br />
# [[LogProxy]]: Daten dynamisch berechnet<br />
<br />
===FileLog===<br />
Um [[FileLog]] zu nutzen, wird als '''data-logdevice''' das FHEM-Device für das FileLog angegeben. In der Regel entstehen hier im Laufe der Zeit mehrere Log-Dateien. Name und Anzahl sind von der Definition abhängig - meist wird jeden Monat oder jedes Jahr eine neue Datei angelegt. Die gewünschte Datei kann mit '''data-logfile''' ausgewählt werden. Möchte man stets die aktuelle Datei verwenden (macht vor allem dann Sinn, wenn man die neusten Daten anzeigen will), kann das Attribut weggelassen, oder explizit <code>-</code> eingetragen werden. Zuletzt wird '''data-columnspec''' benötigt, um die gewünschten Daten zu in der Logdatei zu identifizieren. Hier wird die Spalte, in der die Daten stehen, gefolgt von Doppelpunkt und Readingname angegeben.<br />
<br />
Für ein Heizungsthermostat von Homematic mit dem Namen ''DG.wz.HZ.Heizungsventil'' ergibt sich somit beispielhaft folgende Definition, um gemessene Temperatur, Sollwert und Ventilstellung im Diagramm darzustellen:<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="FileLog_DG.wz.HZ.Heizungsventil"<br />
data-logfile="-"<br />
data-columnspec='["4:measured-temp","4:desired-temp","4:actuator"]'<br />
...><br />
</div><br />
</source><br />
<br />
Sollen Daten von unterschiedlichen Geräten in einem Diagramm angezeigt werden, muss '''data-logdevice''' als Array nach dem Schema <code>data-logdevice='["<Logdatei_1>","<Logdatei_2>","<Logdatei_3>"]'</code> definiert werden. Für jeden Eintrag in '''data-columnspec''' muss es auch den passenden Eintrag in '''data-logdevice''' geben (auch die Reihenfolge ist relevant).<br />
<br />
===DbLog===<br />
Um die Daten aus [[DbLog]] anzeigen zu können, werden die gleichen Attribute verwendet und mit für die Datenbank angepassten Werten beschrieben. Bei '''data-logdevice''' das FHEM-Device für die Datenbank angegeben. Im nachfolgenden Beispiel heißt diese <code>logdb</code> und besitzt wie üblich zwei Tabellen: <code>current</code> und <code>history</code> (der zeitliche Verlauf liegt in letzterer). Der Tabellenname wird bei '''data-logfile''' eingetragen. Da die Daten in der Datenbank etwas anders abgelegt werden, muss auch '''data-columnspec''' entsprechend angepasst werden. Statt der Spalte wird hier das FHEM-Device, gefolgt von Doppelpunkt und Readingname angegeben.<br />
<br />
Für das oben beschriebene Homematic-Heizungsthermostat ergibt sich dann folgende Definition, um die gleichen Daten aus einer Datenbank, statt einem LogFile zu lesen:<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="logdb"<br />
data-logfile="HISTORY"<br />
data-columnspec='["DG.wz.HZ.Heizungsventil:measured-temp","DG.wz.HZ.Heizungsventil:desired-temp","DG.wz.HZ.Heizungsventil:actuator"]'<br />
...><br />
</div><br />
</source><br />
<br />
Für die Anzeige von unterschiedlichen Geräten in einem Diagramm, muss nur '''data-columnspec''' entsprechend angepasst werden, solange sich alle Daten in der Datenbank befinden.<br />
<br />
===LogProxy===<br />
Um die Daten mittels [[LogProxy]] berechnen und anzeigen zu können, muss in FHEM ein LogProxy-Device definiert sein:<br />
<br />
<pre><br />
define myLogProxy logProxy<br />
</pre><br />
<br />
Weitere Einstellungen am LogProxy sind nicht nötig, die bloße Existenz reicht.<br />
<br />
Bei '''data-logdevice''' wird das FHEM-Device für den LogProxy angegeben. Im nachfolgenden Beispiel heißt dieses <code>myLogProxy</code>. Das Attribut '''data-logfile''' wird für LogProxy nicht benötigt. Befinden sich nur LogProxy-Werte im Diagramm kann das Attribut komplett entfallen. Sollen weitere Werte angezeigt werden, bleibt die Definition im Array einfach leer.<br />
<br />
Im Attribut '''data-columnspec''' wird eine Formel angegeben, wie die Werte berechnet werden sollen. Hier können die Formeln 1:1 von einem eventuell vorhandenen SVG-Plot übernommen werden. '''Dabei gibt es jedoch folgendes zu beachten:''' Befindet sich die Formel in einem Array, dürfen die Formeln keine Anführungszeichen (<code>"</code>) beinhalten. Stattdessen müssen sie als escapter Ascii-Code (<code>\\x22</code>) eingefügt werden.<br />
<br />
Das nachfolgende Beispiel zeigt, wie Vorhersagewerte aus einem FHEM-Device vom Typ Proplanta (Name hier <code>AU.xx.WE.Proplanta</code>) angezeigt werden können.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22temp_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
...><br />
</div><br />
</source><br />
<br />
'''Auch alle anderen Funktionen, die [[LogProxy]] bietet, können hier angewendet werden.'''<br />
<br />
==Hinweise==<br />
===Aktualisierung des Charts===<br />
Damit der Refresh des Charts funktioniert, muss auch ein Device angegeben werden, der das Refresh triggert. Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von '''data-get''' ändert.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="WohnzimmerHeizung"<br />
data-logdevice="FileLog_WohnzimmerHeizung"<br />
...><br />
</div><br />
</source><br />
<br />
===Aussehen der Linien===<br />
Mit dem Attribut '''data-style''' kann das Aussehen der Linien des jeweiligen Graphen verändert werden. Hierfür können die Standard-FHEM-Styles verwendet werden. Dazu wird das Attribut mit <code>SVGplot</code>, gefolgt von einem Leerzeichen und der gewünschten Farbe/Stil befüllt. Es existieren jedoch auch noch weitere, an FTUI angepasste Styles, zu finden in der CSS-Datei <code>css/ftui_chart.css</code>. Um diese zu verwenden, wird das Attribut mit <code>ftui</code>, gefolgt von einem Leerzeichen und der gewünschten Farbe/Stil befüllt. Eigene Styles können zum Beispiel in der Datei <code>css/fhem-table-ui-user.css</code> definiert werden.<br />
<br />
Folgende Übersicht zeigt die im Standard verfügbaren '''Farben''', alle Abbildungen sind mit im FTUI-Style entstanden:<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f0.png|thumb|none|150px|Farbe "l0"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f1.png|thumb|none|150px|Farbe "l1"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f2.png|thumb|none|150px|Farbe "l2"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f3.png|thumb|none|150px|Farbe "l3"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f4.png|thumb|none|150px|Farbe "l4"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f5.png|thumb|none|150px|Farbe "l5"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f6.png|thumb|none|150px|Farbe "l6"]] </li><br />
</ul></div><br />
<br />
Die Angabe zur Farbe kann dann mit der Linienart kombiniert werden. Dazu stehen folgende '''Stile''' zur Verfügung:<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-normal.png|thumb|none|225px|Darstellung in 2D: Stil "normal"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-dot.png|thumb|none|225px|Darstellung in 2D: Stil "dot"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-dash.png|thumb|none|225px|Darstellung in 2D: Stil "dash"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-fill.png|thumb|none|225px|Darstellung in 2D: Stil "fill"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-sym.png|thumb|none|225px|Darstellung in 2D: Stil "sym"]] </li><br />
</ul></div><br />
<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-normal.png|thumb|none|225px|Darstellung in 3D: Stil "normal"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-dot.png|thumb|none|225px|Darstellung in 3D: Stil "dot"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-dash.png|thumb|none|225px|Darstellung in 3D: Stil "dash"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-fill.png|thumb|none|225px|Darstellung in 3D: Stil "fill"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-sym.png|thumb|none|225px|Darstellung in 3D: Stil "sym"]] </li><br />
</ul></div><br />
<br />
Farbe und Stil werden kombiniert (zusammengeschrieben) beim Attribut '''data-style''' angegeben, sodass sich beispielsweise für eine graue Punktlinie folgendes ergibt: <code>data-style="ftui l1dot"</code>.<br />
Um die Darstellung als normale Linie zu erhalten, darf im Gegensatz zu den anderen Linienformen der Stil <code>normal</code> nicht angegeben werden. Für eine einfache graue Linie ist also die Angabe <code>data-style="ftui l1"</code> korrekt, wohingegen <code>data-style="ftui l1normal"</code> zu einer fehlerhaften Anzeige führt.<br />
<br />
'''Hinweis:''' Der Stil ''sym'' ist speziell dafür geeignet, Symbole statt Linien zu zeichnen. Dazu kann beim Attribut '''data-ptype''' als Linienform ein beliebiges Font-Awsome-, oder Open Automation-Icon angegeben werden. Alle in diesem Abschnitt enthaltenen Abbildungen sind mit <code>data-ptype="lines"</code> entstanden.<br />
<br />
===Form der Linien===<br />
Das Attribut '''data-ptype''' beeinflusst die Form der Linien. Hier sind folgende Werte möglich:<br />
<br />
* <code>lines</code><br />
* <code>steps</code><br />
* <code>fsteps</code><br />
* <code>histeps</code><br />
* <code>bars</code><br />
* <code>ibars</code><br />
* <code>cubic</code><br />
* <code>quadratic</code><br />
* <code>quadraticSmooth</code><br />
<br />
Zusätzlich ist es möglich, Symbole anzeigen zu lassen. Unterstützt werden Font-Awesome ('fa-...'), Open Automation ('oa-...') und FHEM-Symbole ('fs-...')). Damit die Symbole korrekt angezeigt werden, muss im Attribut '''data-style''' der Stil <code>sym</code> gewählt werden, da sonst nur Punkte, statt der Symbole gezeichnet werden.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="FileLog_DG.wz.HZ.Heizungsventil"<br />
...<br />
data-style="ftui l1sym"<br />
data-ptype="fa-cog"<br />
...><br />
</div><br />
</source><br />
<br />
Die Größe der Symbole ist in der Datei <code>css/ftui_chart.css</code> auf 12px festgelegt. Dieser Wert kann in einer eigenen CSS-Datei durch Anpassung von <code>stroke-width</code> überschrieben werden.<br />
<br />
<source lang="css"><br />
.ftui.l0sym { stroke:#DDA400; stroke-width:12px; fill:none; }<br />
.ftui.l1sym { stroke:#BBBBBB; stroke-width:12px; fill:none; }<br />
.ftui.l2sym { stroke:#CC0000; stroke-width:12px; fill:none; }<br />
.ftui.l3sym { stroke:#CCCC00; stroke-width:12px; fill:none; }<br />
.ftui.l4sym { stroke:#33CC33; stroke-width:12px; fill:none; }<br />
.ftui.l5sym { stroke:#33CCCC; stroke-width:12px; fill:none; }<br />
.ftui.l6sym { stroke:#3333CC; stroke-width:12px; fill:none; }<br />
</source><br />
<br />
'''data-ptype''' kann auch Inhalt im Format <code>'icon:1'</code> verarbeiten. Dann muss der zugehörige Wert in '''data-columnspec''' den Pfad zu einem Icon (z.B. für Wettervorhersagen) beinhalten. Der Y-Wert wird dann vom ersten Graphen übernommen. Weitere Ausführungen hierzu im Beispiel [[#Darstellung der Wetter Icons im Diagramm]]. Zusätzlich kann hier festgelegt werden, ob Graphen übereinander gestapelt werden sollen <code>'lines:1'</code> bedeutet, dass der zugehörige Graph auf den Graph mit der Nummer 1 gestapelt werden soll.<br />
<br />
===Zeitformat der X-Achse===<br />
Die Zeitanzeige auf der X-Achse kann sehr flexibel eingestellt werden. Dafür stehen verschiedene Platzhalter zur Verfügung, die durch spezielle Zeichen (<code>-</code>, <code>.</code>, <code>/</code>, <code> </code> (Leerzeichen), <code>:</code>, <code>,</code>, <code>\</code>) getrennt werden. Alle Zeichen werden trotz Escape-Zeichen (<code>\</code>) in der Ausgabe angezeigt.<br />
<br />
Folgende Platzhalter werden unterstützt:<br />
*<code>'mm'</code>: Minuten als zweistellige Zahl<br />
*<code>'hh'</code>: Stunden als zweistellige Zahl<br />
*<code>'dd'</code>: Tag als zweistellige Zahl (Kalenderdatum)<br />
*<code>'MM'</code>: Monat als zweistellige Zahl (z.B. 02 für Februar)<br />
*<code>'MMM'</code>: Monat als dreistellige Abkürzung (z.B. Dec für Dezember)<br />
*<code>'MMMM'</code>: Langname des Monats (z.B. March)<br />
*<code>'ee'</code>: Wochentag als zweistellige Zahl (z.B. 00 für Sonntag)<br />
*<code>'eee'</code>: Wochentag als dreistellige Abkürzung (z.B. Mon für Montag)<br />
*<code>'eeee'</code>: Langname des Wochentags (z.B. Tuesday)<br />
*<code>'yy'</code>: Jahr als zweistellige Zahl (z.B. 16 für 2016)<br />
*<code>'yyyy'</code>: Jahr als vierstellige Zahl (z.B. 2016)<br />
*<code>'LF'</code>: Fügt einen Zeilenumbruch hinzu<br />
<br />
Beispiel: Der String <code>'MMM\LF\yyyy'</code> zeigt <code>'Jan'</code> in der ersten, und <code>'2016'</code> in der zweiten Zeile. <code>'MM.dd 2016'</code> wird zu <code>'03.05 2016'</code>.<br />
<br />
===Fadenkreuz-Cursor===<br />
Der Fadenkreuz-Cursor zeigt die Momentanwerte, indem man ihn über die Graphen bewegt. In Desktop-Browsern reicht einfaches Bewegen des Maus. Unter iOS und Android kann der Cursor wird der Cursor durch einfaches Tippen auf die neue Position bewegt.<br />
<br />
Mit dem Attribut '''data-cursorgroup''' können Graphen gruppiert werden. Am Cursor werden dann die Momentanwerte aller Graphen gleichzeitig angezeigt, die die selbe Zahl besitzen, sobald man die Maus über einen aus der Gruppe bewegt.<br />
<br />
===Legende===<br />
Mit dem Attribut '''data-legendpos''' kann die Position der Legende innerhalb des Diagramms festgelegt werden. Die Position wird mit einem Array, bestehend aus zwei Werten im Format <code>'["<horizontal>","<vertikal>"]'</code> angegeben. Für die horizontale Positionierung sind <code>'left'</code>, <code>'right'</code>, <code>'before'</code>, und <code>'behind'</code>, die vertikale Positionierung <code>'top'</code>, <code>'bottom'</code>, <code>'above'</code>, <code>'below'</code> erlaubt (der Unterschied zwischen <code>'left'</code> und <code>'before'</code> liegt darin, dass im zweiten Fall die Legende nicht in den Zeichenbereich gesetzt wird sondern vor das ganze Chart (entsprechend für <code>'after'</code>, <code>'above'</code> und <code>'below'</code>). Alternativ können auch Zahlen verwendet werden, die die Position in Prozent angeben. Durch verschieben mit der Maus oder durch verschieben mit dem Finger oder Stift auf Touch Devices kann die Legende auch an eine andere Position verschoben werden.<br />
<br />
Wenn die Legende eingeblendet ist, kann mittels Klick auf einen Legendeneintrag der zugehörige Graph ein- und ausgeblendet werden.<br />
<br />
===3-dimensionale Drehung===<br />
'''data-ddd''' ermöglicht, den Graphen 3-dimensional zu drehen. Als Wert wird ein Array mit den 3 Winkeln für x, y und z erwartet, wobei z selbst bisher nicht unterstützt wird.<br />
<br />
Beispiel: <code>data-ddd='["40","60","0"]'</code>. <br />
<br />
Wenn der 3D Modus aktiv ist ('''data-ddd''' gesetzt) sind 2 zusätzliche Parameter verfügbar um das Aussehen der Graphen zu beeinflussen. '''data-dddspace''' gibt an, wie viele pixel der Raum zwischen den einzelnen in z-Richtung hintereinander angeordneten Graphen betragen soll.<br />
'''data-dddwidth''' legt fest, wie viele pixel die einzelnen Graphen tief (oder dick) sein sollen.<br />
<br />
Wenn das Array angegeben wird, erscheinen zwei zusätzliche Buttons im Diagramm, mit denen die Drehung in X- und Y-Richtung verändert werden kann.<br />
<br />
===Diagrammtitel===<br />
Mit dem Attribut '''data-title''' kann dem Diagramm, ähnlich wie in FHEM-SVG-Plots, ein Titel hinzugefügt werden.<br />
<br />
Folgende Platzhalter werden unterstützt:<br />
*<code>'min1'</code>: Minimaler Y-Wert des ersten Graphs<br />
*<code>'max1'</code>: Maximaler Y-Wert des ersten Graphs<br />
*<code>'avg1'</code>: Mittlerer Y-Wert des ersten Graphs<br />
*<code>'cnt1'</code>: Anzahl der dargestellten Einzelwerte im ersten Graph<br />
*<code>'currval1'</code>: Letzter, bzw. aktuellster Y-Wert des ersten Graphs<br />
*<code>'mindate1'</code>: Niedrigster Wert auf der X-Achse des ersten Graphs<br />
*<code>'maxdate1'</code>: Höchster Wert auf der X-Achse vom ersten Graphs<br />
*<code>'currdate1'</code>: Letzter, bzw. aktuellster Wert auf der X-Achse des ersten Graphs<br />
<br />
Durch Einsetzen einer anderen Zahl statt '1' können auch die Werte der anderen Graphen angezeigt werden. Das Weglassen der Zahl bewirkt, dass der jeweils zutreffende Wert automatisch ermittelt wird. Bedeutet: <code>max</code> führt dazu, dass der höchste Wert aller angezeigter Graphen verwendet wird.<br />
<br />
Beispiel: <code>data-title="Min: $data{mindate4}, Max: $data{maxdate4}, Last: $data{currdate4}"</code><br />
<br />
===Buttons im Diagramm===<br />
Es gibt mehrere Buttons, mit denen sich die Anzeige des Diagramms verändern lässt. <code><-</code> und <code>-></code> bewegen die Graphen nach links und rechts. <code>+</code> und <code>-</code> zoomen die Anzeige. <code>legend</code> und <code>cursor</code> schalten die zugehörigen Anzeigen ein und aus.<br />
<br />
==Beispiele==<br />
===Einfaches Diagramm===<br />
Das Beispiel zeigt ein einfaches Diagramm mit 4 unterschiedlich formatierten Graphen, Legende und Momentanwerten am Fadenkreuz-Cursor.<br />
<br />
[[File:Chart_tabletUI.png]]<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'<br />
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'<br />
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'<br />
data-ptype='["lines","histeps","histeps","cubic"]'<br />
data-uaxis='["primary","secondary","secondary","primary"]'<br />
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'<br />
data-yunit="°C"<br />
data-ytext="Temperature"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-yunit_sec="mm"<br />
data-ytext_sec="Rain (mm)"<br />
data-height="250"<br />
data-yticks="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-nofulldays="true"<br />
data-daysago_start="2013-08-13T00:00:00"<br />
data-daysago_end="2013-08-14T00:00:00"<br />
data-cursorgroup="1"<br />
data-scrollgroup="1"<br />
data-xticks="auto"><br />
</div><br />
</source><br />
<br />
===7-Tage-Wettervorhersage mit Proplanta===<br />
In diesem Beispiel wird gezeigt, wie die Vorhersagewerte von [[PROPLANTA]] in einem Diagramm dargestellt werden können. Da die Werte nicht in einer Datenbank oder einem FileLog vorliegen, müssen sie über [[LogProxy]] verarbeitet werden. Dafür sind einige Vorbereitungen in FHEM nötig.<br />
<br />
[[File:FTUI_Widget_Chart-fc-Proplanta.png|941px]]<br />
<br />
'''1.''' Ein LogProxy-Device muss vorhanden sein:<br />
<pre><br />
define myLogProxy logProxy<br />
</pre><br />
<br />
'''2.''' In der Datei <code>99_myUtils.pm</code> muss folgende Routine hinzugefügt werden, die die Daten bereitstellt:<br />
<source lang="perl"><br />
#---------------------------------------<br />
# Proplanta LogProxy-Funktion<br />
#---------------------------------------<br />
sub logProxy_proplanta2Plot($$$$;$$) {<br />
my ($device, $fcValue, $from, $to, $fcHour, $expMode) = @_;<br />
my $regex;<br />
my @rl;<br />
<br />
return undef if(!$device);<br />
<br />
if($fcValue =~ s/_$//) {<br />
$regex = "^fc[\\d]+_".$fcValue."[\\d]{2}\$";<br />
}<br />
else {<br />
$regex = "^fc[\\d]+_".$fcValue."\$";<br />
}<br />
<br />
$fcHour = 12 if(!defined $fcHour);<br />
$expMode = "point" if(!defined $expMode);<br />
<br />
if( defined($defs{$device}) ) {<br />
if( $defs{$device}{TYPE} eq "PROPLANTA" ) {<br />
@rl = sort{<br />
my ($an) = ($a =~ m/fc(\d+)_.*/);<br />
my ($bn) = ($b =~ m/fc(\d+)_.*/);<br />
$an <=> $bn or $a cmp $b;<br />
}( grep /${regex}/,keys %{$defs{$device}{READINGS}} );<br />
return undef if( !@rl );<br />
} else {<br />
Log3 undef, 2, "logProxy_proplanta2Plot: $device is not a PROPLANTA device";<br />
return undef;<br />
}<br />
}<br />
<br />
my $fromsec = SVG_time_to_sec($from);<br />
my $tosec = SVG_time_to_sec($to);<br />
my $sec = $fromsec;<br />
my ($h,$fcDay,$mday,$mon,$year);<br />
my $timestamp;<br />
<br />
my $reading;<br />
my $value;<br />
my $prev_value;<br />
my $min = 999999;<br />
my $max = -999999;<br />
my $ret = "";<br />
<br />
# while not end of plot range reached<br />
while(($sec < $tosec) && @rl) {<br />
#remember previous value for start of plot range<br />
$prev_value = $value;<br />
<br />
$reading = shift @rl;<br />
($fcDay) = $reading =~ m/^fc(\d+).*/;<br />
$h = ($reading =~ m/.*(\d\d)$/)?$1:$fcHour;<br />
$value = ReadingsVal($device,$reading,undef);<br />
<br />
($mday,$mon,$year) = split('\.',ReadingsVal($device,"fc".$fcDay."_date",undef));<br />
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, $h, 0, 0);<br />
$sec = SVG_time_to_sec($timestamp);<br />
<br />
# skip all values before start of plot range<br />
next if( SVG_time_to_sec($timestamp) < $fromsec );<br />
<br />
# add first value at start of plot range<br />
if( !$ret && $prev_value ) {<br />
$min = $prev_value if( $prev_value < $min );<br />
$max = $prev_value if( $prev_value > $max );<br />
$ret .= "$from $prev_value\n";<br />
}<br />
<br />
# done if after end of plot range<br />
last if($sec > $tosec);<br />
<br />
$min = $value if( $value < $min );<br />
$max = $value if( $value > $max );<br />
<br />
# add actual controll point<br />
$ret .= "$timestamp $value\n";<br />
<br />
# Log 1, "$timestamp $value -0- $reading";<br />
}<br />
if(($sec < $tosec) && !@rl && ($expMode eq "day")) {<br />
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, 23, 59, 59);<br />
if(SVG_time_to_sec($timestamp) < $tosec) {<br />
$ret .= "$timestamp $value\n";<br />
}<br />
else {<br />
$ret .= "$to $value\n";<br />
}<br />
}<br />
elsif(($sec > $tosec) && ($expMode eq "day")) {<br />
$value = $prev_value + ($value - $prev_value)*(86400 + ($tosec - $sec))/86400;<br />
$ret .= "$to $value\n";<br />
}<br />
return ($ret,$min,$max,$prev_value);<br />
}<br />
</source><br />
<br />
Anschließend können die Daten im Chart-Widget angezeigt werden. Der Device-Name von Proplanta heißt hier im Beispiel <code>AU.xx.WE.Proplanta</code>.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
data-style='[<br />
"ftui l6fill",<br />
"ftui l5fill",<br />
"ftui l1fill"<br />
]'<br />
data-ptype='[<br />
"steps",<br />
"quadraticSmooth",<br />
"quadraticSmooth"<br />
]'<br />
data-uaxis='[<br />
"primary",<br />
"secondary",<br />
"secondary"<br />
]'<br />
data-legend='[<br />
"Regen",<br />
"Regenwahrscheinlichkeit",<br />
"Wolken"<br />
]'<br />
data-yunit="mm"<br />
data-ytext="Regen"<br />
data-yunit_sec="%"<br />
data-ytext_sec="Chance auf Regen / Wolken"<br />
data-timeformat="eeee"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-daysago_start = "0"<br />
data-daysago_end = "-7"<br />
data-xticks="1440"<br />
data-yticks="auto"<br />
data-title="7-Tage-Wettervorhersage"<br />
data-showlegend="true"<br />
class="nobuttons fullsize"><br />
</div><br />
</source><br />
<br />
'''Hilfreiche Links und Quellen zu diesem Beispiel:'''<br />
*[[LogProxy|LogProxy im FHEM-Wiki]]<br />
*{{Link2Forum|Topic=22967|Message=246973|LinkText=Stundengenaue Wettervorhersage (#1) im FHEM-Forum}}<br />
*{{Link2Forum|Topic=22967|Message=334713|LinkText=Stundengenaue Wettervorhersage (#2) im FHEM-Forum}}<br />
<br />
===Darstellung der Wetter Icons im Diagramm===<br />
<br />
[[File:Wetterchart2.png]]<br />
<br />
Wie oben bereits beschrieben, gibt es beim Chart grundsätzlich die Möglichkeit, Icons, welche in Form von URLs in den Logs abgelegt sind oder welche per logProxy generiert werden, darzustellen. Die Icons werden auf genau dem gleichen Weg von FHEM gelesen, wie alle anderen Datenpunkte. Im Folgenden wird ein Beispiel gezeigt, mit dem die im Proplanta Modul als Readings abgelegten Icons per logProxy Funktion gelesen und in ein Chart eingebaut werden könnnen.<br />
Da es beim Proplanta Modul für die ersten 7 Tage nicht das Reading <code>fc#_weatherIcon</code> gibt, sondern mehrere Readings für unterschiedliche Tageszeiten wogegen für die zweiten 7 Tage ausschließlich das Reading <code>fc#_weatherIcon</code> vorhanden ist, sollte per <code>attr device userReading</code> mit folgendem Eintrag dafür gesorgt werden, dass für alle Tage ein Reading <code>fc#_weatherIcon</code> vorhanden ist (alternativ könnten auch 2 Graphen gezeichnet werden, wobei der erste dann nur die ersten 7 Tage enthält und der zweite die letzen 7 Tage, will man nur die ersten 7 Tage darstellen braucht man das userReading nicht unbedingt).<br />
<source lang="perl"><br />
fc0_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc0_weatherDayIcon","");},<br />
fc1_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc1_weatherDayIcon","");},<br />
fc2_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc2_weatherDayIcon","");},<br />
fc3_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc3_weatherDayIcon","");},<br />
fc4_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc4_weatherDayIcon","");},<br />
fc5_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc5_weatherDayIcon","");},<br />
fc6_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc6_weatherDayIcon","");}<br />
</source><br />
Um die Icons darzustellen muss ein zusätzlicher Graph definiert werden. Dieser nutzt neben der Columnspec, die die URLs abruft den Parameter <code>data-ptype="icons:#"</code> (# ist eine Zahl und steht für die Nummer, beginnend bei 0 des Graphen, welcher für die y-Position der Icons verwendet werden soll) und den Stil <code>sym</code>. Der Wert für die Symbolgröße sollte z.B. durch eine zusätzliche Definition im File fhem-tablet-ui-user.css in der Form:<br />
<source lang="css"><br />
/* icon lines */<br />
.ftui.l99icon { stroke:#DDA400; stroke-width:48px; fill:none; }<br />
</source><br />
angepasst werden.<br />
<br />
Im folgenden ein Beispiel, welches eine Linie für die Maximale Tagestemperatur zeichnet und auf dieser Linie die Wetter Icons darstellt.<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22tempMax\\x22,$from,$to,12,\\x22day\\x22)",<br />
]'<br />
data-style='[<br />
"ftui l99icon",<br />
"ftui l1fill"<br />
]'<br />
data-ptype='[<br />
"icons:1",<br />
"quadraticSmooth"<br />
]'<br />
data-uaxis='[<br />
"primary",<br />
"primary"<br />
]'<br />
data-legend='[<br />
"Wetterbedingung",<br />
"Max. Temperature"<br />
]'<br />
data-yunit="°C"<br />
data-ytext="Temperature (°C)"<br />
data-timeformat="ee\LF\dd.MM"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-daysago_start="-1w"<br />
data-y_margin="20"<br />
data-daysago_end="-3w"<br />
data-xticks="1440"<br />
data-yticks="auto"<br />
data-title="14-Tage-Wettervorhersage"<br />
data-showlegend="true"<br />
class="nobuttons fullsize"><br />
</div><br />
</source><br />
<br />
===Kuchendiagramme===<br />
In folgendem Beispiel wird gezeigt, wie man ein "Kuchendiagramm" darstellen kann.<br />
<br />
[[File:PieChart.png]]<br />
<br />
Ähnlich wie bei den Beispielen für die Wetter Darstellungen wird hierzu auch wieder logProxy benötigt. Zunächst muss die folgende zusätzliche Funktion in <code>99_myUtils.pm</code> einfügen.<br />
<source lang="perl"><br />
#---------------------------------------<br />
# Funktion zum Erzeugen der Inputs für Kuchendiagramme<br />
#---------------------------------------<br />
sub logProxy_values2PieChart($$$$;$) {<br />
my ($device, $reading, $angle_start, $angle_dif, $show_text) = @_;<br />
Log3 undef, 5, "$device, $reading, $angle_start, $angle_dif, $show_text\n";<br />
<br />
use constant PI => 4 * atan2(1,1);<br />
<br />
my $value=ReadingsVal($device,$reading,0);<br />
<br />
my $angle_delta = $value/100*360;<br />
$angle_start = $angle_start/100*360;<br />
<br />
my $rad=10;<br />
my $ret=";c 0\n;p 0 0\n";<br />
my $angle;<br />
my $x;<br />
my $y;<br />
<br />
for (my $i=$angle_start; $i<$angle_start+$angle_delta; $i+=$angle_dif) {<br />
$angle = $i/360*2.0*PI;<br />
$x = $rad*sin($angle);<br />
$y = $rad*cos($angle);<br />
$ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle<br />
}<br />
<br />
$angle = ($angle_start+$angle_delta)/360*2.0*PI; # add last segment <br />
$ret .= ";p ".$rad*sin($angle)." ".$rad*cos($angle)."\n";<br />
$ret .= ";p 0 0\n";<br />
<br />
if ($show_text) { # show text values<br />
$x = $rad/1.5*sin((2*$angle_start+$angle_delta)/2/360*2.0*PI);<br />
$y = $rad/1.5*cos((2*$angle_start+$angle_delta)/2/360*2.0*PI);<br />
<br />
$ret .= ";t ".$x." ".$y." middle ".$show_text.":".$value."%\n";<br />
}<br />
<br />
return($ret);<br />
}<br />
</source><br />
In FHEM braucht man Readings, welche eine Zahl enthalten, die als Prozentwert interpretiert wird. Für jeden Prozentwert (also für jedes Reading) generiert die o.a. Funktion nun den Chart Input für ein Kuchenstück und liefert diesen als Antwort auf das GET, welches das Chart Widget auslöst. Dazu braucht die Funktion folgende Parameter: (Name des FHEM Devices, Name des Readings, Start Winkel des Kuchenstücks (Mathematisch gegen den Uhrzeigersinn in Grad), Delta Winkel zum Zeichnen (legt fest in welchen Schritten der Teilkreis des Kuchenstücks gezeichnet wird), optionaler Text der ins Kuchenstück vor die Prozentzahl geschrieben wird).<br />
Im Folgenden eine Beispielkonfiguration für die Darstellung als Kuchendiagramm, die Readings heißen hier dPer1 bis dPer4. Der Startwinkel wird duch Aufsummierung der jeweils vorher schon gezeichneten Kuchenstücke gebildet, dadurch entstehen aneinander hängende Stücke.<br />
<source lang="html"><br />
[[Datei:[[Datei:Beispiel.jpg]]]]<div class="normal noaxes nobuttons"<br />
data-type="chart"<br />
data-logdevice='["lp"]'<br />
data-logfile="CURRENT"<br />
data-columnspec='[<br />
"Func:logProxy_values2PieChart(\"dPer1\",\"state\",ReadingsVal(\"dPer4\",\"state\",0)+ReadingsVal(\"dPer3\",\"state\",0),5,\"first\")",<br />
"Func:logProxy_values2PieChart(\"dPer2\",\"state\",ReadingsVal(\"dPer4\",\"state\",0)+ReadingsVal(\"dPer3\",\"state\",0)+ReadingsVal(\"dPer1\",\"state\",0),5,\"second\")",<br />
"Func:logProxy_values2PieChart(\"dPer3\",\"state\",ReadingsVal(\"dPer4\",\"state\",0),5,\"third\")",<br />
"Func:logProxy_values2PieChart(\"dPer4\",\"state\",0,5,\"fourth\")"<br />
]'<br />
data-style='["ftui l0fill","ftui l1fill","ftui l2fill","ftui l3fill"]'<br />
data-ptype='["lines"]'<br />
data-uaxis='["primary"]'<br />
data-legend='["First","Second","Third","Fourth"]'<br />
data-legendpos='["left","top"]'<br />
data-yunit=""<br />
data-height="300"<br />
data-width="300"<br />
data-ddd='["-40","0","0"]'<br />
data-dddspace='["-10"]'<br />
data-dddwidth='["10"]'<br />
data-showlegend="true"<br />
data-legend_horiz="true"<br />
data-xticks="auto"><br />
</div><br />
</source><br />
<br />
===Fensterstatus offen/geschlossen===<br />
Dieses Beispiel zeigt, wie ein Fensterkontakt, dessen Reading die Werte <code>closed</code> und <code>open</code> einnimmt, als Graph gezeichnet werden kann. Technisch gesehen werden hier die Werte <code>0</code> und <code>1</code> gezeichnet, indem über das Attribut '''data-columnspec''' dem Zustand <code>open</code> der Wert <code>1</code> und allen anderen Zuständen der Wert <code>0</code> zugeordnet wird. Über das Attribut '''data-yticks''' wird die Beschriftung an der Y-Achse (<code>0</code> und <code>1</code>) gegen einen frei definierbaren Text ausgetauscht.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="wz_fensterstatus"<br />
data-logdevice='["myDbLog"]'<br />
data-logfile='["HISTORY"]'<br />
data-columnspec='["wz_fensterstatus:state:0::$val=($val=~\\x22open\\x22?1:0)"]'<br />
data-style='["ftui l4fill"]'<br />
data-ptype='["steps"]'<br />
data-height="290"<br />
data-yticks='[[0,"geschlossen"],[1,"offen"]]'<br />
data-minvalue="0"<br />
data-maxvalue="1.1"<br />
data-nofulldays="true"<br />
data-daysago_start="1"<br />
data-daysago_end="-1"<br />
data-cursorgroup="1"<br />
data-scrollgroup="1"><br />
</div><br />
</source><br />
<br />
==Links==<br />
{{Link2Forum|Topic= 48450 |Message=401006|LinkText=Thread im FHEM-Forum}}<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FHEM_Tablet_UI&diff=21324FHEM Tablet UI2017-04-16T12:17:14Z<p>Standarduser: /* DOCTYPE */</p>
<hr />
<div>{{Infobox Modul<br />
|ModPurpose=Oberfläche für FHEM<br />
|ModType=x<br />
|ModFTopic=34233<br />
|ModForumArea=Frontends<br />
|ModTechName=n.a.<br />
|ModOwner=setstate ({{Link2FU|7023|Forum}})<br />
}}<br />
[[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.<br />
<br />
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.<br />
<br />
Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.<br />
<br />
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.<br />
<br />
[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]<br />
<br />
{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}} <br />
<br />
== Installation ==<br />
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:<br />
*Dateien aus dem GitHub-Repository herunterladen<br />
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)<br />
*Eine Beispieldatei anlegen<br />
<br />
<br />
{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.<br />
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}<br />
<br />
<br />
'''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.<br />
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code><br />
<br />
:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]<br />
<br />
<br />
'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.<br />
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code><br />
<br />
:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]<br />
<br />
<br />
'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.<br />
<br />
:<code>attr WEB longpoll websocket</code><br />
:bzw. bei Problemen mit ''websocket''<br />
:<code>attr WEB longpoll 1</code><br />
<br />
:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]<br />
<br />
<br />
'''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.<br />
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code><br />
<br />
:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]<br />
<br />
<br />
'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.<br />
<br />
<br />
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<br />
<br />
== Update ==<br />
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.<br />
<br />
'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:<br />
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
'''2.''' Update der geänderten Dateien durch Eingabe von:<br />
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
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.<br />
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
== Konfiguration ==<br />
===DOCTYPE===<br />
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.<br />
<br />
<source lang="html"><br />
<!DOCTYPE html><br />
<html><br />
<head>...</head><br />
<body>...</body><br />
</html><br />
</source><br />
<br />
===META-Parameter===<br />
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.<br />
<br />
Die Parameter sind immer nach diesem Schema aufgebaut:<br />
<meta name="[Parameter-Name]" content="[Parameter-Wert]"><br />
<br />
===Verbindung zu FHEM===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird<br />
|-<br />
|longpoll||1||0, 1||<br />
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)<br />
<br />
'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.<br />
|-<br />
|longpoll_type||websocket||websocket, ajax, 0||<br />
'''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.<br />
<br />
'''ajax''': Ajax wird für die Aktualisierung verwendet.<br />
<br />
'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.<br />
|-<br />
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.<br />
|-<br />
|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.<br />
|-<br />
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet<br />
|-<br />
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein<br />
|-<br />
|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.<br />
|}<br />
<br />
===Funktionalität===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|debug||0||0 - 5||Log-Level<br />
|-<br />
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.<br />
|-<br />
|toast_position||bottom-left||||Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.<br />
|-<br />
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)<br />
|-<br />
|username||||String||Benutzername für eine Basic-Authentifierung *<br />
|-<br />
|password||||String||Passwort für eine Basic-Authentifizierung *<br />
|}<br />
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.<br />
<br />
===Toast-Nachrichten===<br />
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]<br />
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.<br />
<br />
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.<br />
<br />
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:<br />
<pre><meta name='toast_position' content='top-center'></pre><br />
<br />
Möglich sind folgende Positionen:<br />
* <code>top-left</code><br />
* <code>top-right</code><br />
* <code>bottom-left</code><br />
* <code>bottom-right</code><br />
* <code>top-center</code><br />
* <code>bottom-center</code><br />
* <code>mid-center</code><br />
<br />
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:<br />
<pre><meta name='toast' content='2'></pre><br />
<br />
==Navigationsmethoden==<br />
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}} <br />
<br />
'''Unterschied zwischen Pagetab und Pagebutton:<br />
<br />
'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite<br />
[[FTUI_Widget_Pagetab]]<br />
<br />
'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite<br />
[[FTUI_Widget_Pagebutton]]<br />
<br />
==Gestaltung==<br />
===Layout-Optionen===<br />
* [[FTUI Layout Gridster|Gridster]]<br />
* [[FTUI Layout Flex|Flex]]<br />
* [[FTUI Layout Sheet|Tabelle]]<br />
* [[FTUI Layout Row|Reihen]]<br />
<br />
=== Farben ===<br />
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel: <br />
<br />
*HEX: #ADD8E6<br />
*RBG: rgb(173, 216, 230)<br />
*Namen: lightblue<br />
<br />
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.<br />
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.<br />
<br />
Empfohlene Farben sind z.B.:<br />
<br />
*Orange: <span style="color: #aa6900;">#aa6900</span><br />
*Rot: <span style="color: #ad3333;">#ad3333</span><br />
*Grün: <span style="color: #32a054;">#32a054</span><br />
*Blau: <span style="color: #6699FF;">#6699FF</span><br />
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span><br />
<br />
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/<br />
<br />
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.<br />
<br />
Hier am Beispiel eines blauen Farbschemas:<br />
<source lang="html"><br />
<html><br />
<head><br />
[...]<br />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" /><br />
[...]<br />
</head><br />
</source><br />
<br />
Diese Schema-Dateien ändern alle Widgets. Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.<br />
<br />
===CSS-Styles===<br />
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.<br />
<br />
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.<br />
<br />
=== CSS-Klassen ===<br />
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|row/col-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|hbox/vbox-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Vordergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Hintergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Rahmen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Größen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Schriftstil<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Sonstiges<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
=== Icons ===<br />
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.<br />
<br />
Verfügbare Icon-Schriftarten sind:<br />
* Eingebaute Icons ''ftui-windows'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code><br />
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code><br />
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code><br />
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code><br />
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi-'''. Beispiel: <code>data-icon="wi-day-rain-mix"</code><br />
<br />
== Widgets ==<br />
===Allgemeine Attribute===<br />
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:<br />
<br />
{| class="wikitable"<br />
|+allgemeine Attribute<br />
|-<br />
!align="right" |data-type<br />
|Widget-Typ<br />
|-<br />
!align="right" |data-device<br />
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)<br />
|-<br />
!align="right" |class<br />
|CSS-Klassen für Aussehen und Formatierung des Widgets<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Empfangen<br />
|-<br />
!align="right" |data-get<br />
|Reading Name<br />
|-<br />
!align="right" |data-get-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-get-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Senden<br />
|-<br />
!align="right" |data-set<br />
|Reading Name<br />
|-<br />
!align="right" |data-set-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-set-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
=== Integrierte Widgets ===<br />
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.<br />
<br />
* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.<br />
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen<br />
* [[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 <br />
* [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.<br />
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben<br />
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit<br />
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel<br />
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert<br />
* [[FTUI Widget Eventmonitor|eventmonitor]]:<br />
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)<br />
* [[FTUI Widget Html|html]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe. <br />
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.<br />
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld<br />
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt. <br />
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn<br />
* [[FTUI Widget Label|label]]: Reading als Text anzeigen<br />
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert<br />
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM<br />
* [[FTUI Widget Medialist|medialist]]:<br />
* [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.<br />
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein<br />
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation<br />
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.<br />
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button<br />
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element <br />
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste<br />
* [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.<br />
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen<br />
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde<br />
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position<br />
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit.<br />
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird<br />
* [[FTUI Widget Slideout|slideout]]:<br />
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen<br />
* [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern<br />
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln<br />
* [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)<br />
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)<br />
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann<br />
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes<br />
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen<br />
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose<br />
<br />
===3rd Party Widgets===<br />
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.<br />
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an<br />
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an<br />
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots<br />
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices<br />
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.<br />
* [[FTUI Widget Filelog|filelog]]:<br />
* [[FTUI Widget Fullcalview|fullcalview]]:<br />
* [[FTUI Widget Gds|gds]]:<br />
* [[FTUI Widget Highchart|highchart]]:<br />
* [[FTUI Widget Highchart3d|highchart3d]]:<br />
* [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. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.<br />
* [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.<br />
* [[FTUI Widget Loading|loading]]:<br />
* [[FTUI Widget Meteogram|meteogram]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads<br />
* [[FTUI Widget Screensaver|screensaver]]:<br />
* [[FTUI Widget Svgplot|svgplot]]:<br />
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.<br />
* [[FTUI Widget Uwz|uwz]]:<br />
* [[FTUI Widget Wakeup|wakeup]]:<br />
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul<br />
* [[FTUI Widget Weekprofile|weekprofile]]:<br />
<br />
==Templates==<br />
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.<br />
<br />
Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.<br />
<br />
===Einzelnes Widget===<br />
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.<br />
<br />
;Template-Seite<br />
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.<br />
<source lang="html"><br />
<div data-type="symbol"<br />
data-device="dummy1"><br />
</source><br />
<br />
;Haupt-Seite<br />
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.<br />
<source lang="html" highlight="6"><br />
[...]<br />
<body><br />
<div class="gridster"><br />
<ul><br />
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1"><br />
<div data-template="template_symbol.html"></div><br />
</li><br />
</ul><br />
</div><br />
</body><br />
[...]<br />
</source><br />
<br />
===Gridster-Element===<br />
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.<br />
<source lang="html"><br />
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li><br />
</source><br />
<br />
=== Widget-Gruppen ===<br />
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.<br />
<br />
=== Verwendung von Parametern ===<br />
==== Einfaches Beispiel ====<br />
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.<br />
<br />
In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.<br />
<br />
;Template-Seite<br />
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.<br />
<source lang="html" highlight="2"><br />
<div data-type="label"<br />
data-device="par01"<br />
data-get="measured-temp"></div><br />
</source><br />
<br />
;Haupt-Seite<br />
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.<br />
<source lang="html"><br />
[...]<br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div><br />
[...]<br />
</source><br />
<br />
==== Wetter-Slider mit Template ====<br />
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.<br />
<br />
;Template-Seite<br />
<source lang="html"><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="&deg;C"></div><br />
<div class="inline"><br />
<div data-type="label" data-device="AgroWeather" data-get="par02"></div><br />
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div><br />
min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="&deg;C"></div><br />
</div><br />
</div><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div><br />
</div><br />
</source><br />
<br />
;Haupt-Seite<br />
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.<br />
<source lang="html"><br />
[...]<br />
<div data-type="swiper"><br />
<ul><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li><br />
</ul><br />
</div><br />
[...]<br />
</source><br />
<br />
== JavaScript-Funktionen ==<br />
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.<br />
<br />
<br />
Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):<br />
<source lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></source><br />
<br />
<br />
Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):<br />
<source lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown(&quot;WZ.Thermostat_Climate&quot;,&quot;up&quot;)}')">+</div></source><br />
<br />
<br />
Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:<br />
<source lang="html"><br />
<div data-type="label" data-device="dummy1" data-get="temperature"></div><br />
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div><br />
</source><br />
<br />
== FAQ ==<br />
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.<br />
<br />
== Links ==<br />
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]<br />
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}<br />
* [[FTUI_Snippets|Snippets]]<br />
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]<br />
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}<br />
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FHEM_Tablet_UI&diff=21323FHEM Tablet UI2017-04-16T12:15:41Z<p>Standarduser: /* Konfiguration */ DOCTYPE hinzugefügt</p>
<hr />
<div>{{Infobox Modul<br />
|ModPurpose=Oberfläche für FHEM<br />
|ModType=x<br />
|ModFTopic=34233<br />
|ModForumArea=Frontends<br />
|ModTechName=n.a.<br />
|ModOwner=setstate ({{Link2FU|7023|Forum}})<br />
}}<br />
[[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.<br />
<br />
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.<br />
<br />
Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.<br />
<br />
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.<br />
<br />
[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]<br />
<br />
{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}} <br />
<br />
== Installation ==<br />
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:<br />
*Dateien aus dem GitHub-Repository herunterladen<br />
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)<br />
*Eine Beispieldatei anlegen<br />
<br />
<br />
{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.<br />
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}<br />
<br />
<br />
'''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.<br />
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code><br />
<br />
:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]<br />
<br />
<br />
'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.<br />
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code><br />
<br />
:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]<br />
<br />
<br />
'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.<br />
<br />
:<code>attr WEB longpoll websocket</code><br />
:bzw. bei Problemen mit ''websocket''<br />
:<code>attr WEB longpoll 1</code><br />
<br />
:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]<br />
<br />
<br />
'''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.<br />
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code><br />
<br />
:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]<br />
<br />
<br />
'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.<br />
<br />
<br />
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<br />
<br />
== Update ==<br />
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.<br />
<br />
'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:<br />
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
'''2.''' Update der geänderten Dateien durch Eingabe von:<br />
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
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.<br />
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
== Konfiguration ==<br />
===DOCTYPE===<br />
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.<br />
<br />
<source lang="html"><br />
<!DOCTYPE html><br />
<html><br />
<head>...</head><br />
<body>...</body><br />
</html><br />
</source><br />
<br />
===META-Parameter===<br />
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.<br />
<br />
Die Parameter sind immer nach diesem Schema aufgebaut:<br />
<meta name="[Parameter-Name]" content="[Parameter-Wert]"><br />
<br />
===Verbindung zu FHEM===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird<br />
|-<br />
|longpoll||1||0, 1||<br />
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)<br />
<br />
'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.<br />
|-<br />
|longpoll_type||websocket||websocket, ajax, 0||<br />
'''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.<br />
<br />
'''ajax''': Ajax wird für die Aktualisierung verwendet.<br />
<br />
'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.<br />
|-<br />
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.<br />
|-<br />
|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.<br />
|-<br />
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet<br />
|-<br />
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein<br />
|-<br />
|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.<br />
|}<br />
<br />
===Funktionalität===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|debug||0||0 - 5||Log-Level<br />
|-<br />
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.<br />
|-<br />
|toast_position||bottom-left||||Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.<br />
|-<br />
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)<br />
|-<br />
|username||||String||Benutzername für eine Basic-Authentifierung *<br />
|-<br />
|password||||String||Passwort für eine Basic-Authentifizierung *<br />
|}<br />
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.<br />
<br />
===Toast-Nachrichten===<br />
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]<br />
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.<br />
<br />
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.<br />
<br />
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:<br />
<pre><meta name='toast_position' content='top-center'></pre><br />
<br />
Möglich sind folgende Positionen:<br />
* <code>top-left</code><br />
* <code>top-right</code><br />
* <code>bottom-left</code><br />
* <code>bottom-right</code><br />
* <code>top-center</code><br />
* <code>bottom-center</code><br />
* <code>mid-center</code><br />
<br />
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:<br />
<pre><meta name='toast' content='2'></pre><br />
<br />
==Navigationsmethoden==<br />
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}} <br />
<br />
'''Unterschied zwischen Pagetab und Pagebutton:<br />
<br />
'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite<br />
[[FTUI_Widget_Pagetab]]<br />
<br />
'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite<br />
[[FTUI_Widget_Pagebutton]]<br />
<br />
==Gestaltung==<br />
===Layout-Optionen===<br />
* [[FTUI Layout Gridster|Gridster]]<br />
* [[FTUI Layout Flex|Flex]]<br />
* [[FTUI Layout Sheet|Tabelle]]<br />
* [[FTUI Layout Row|Reihen]]<br />
<br />
=== Farben ===<br />
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel: <br />
<br />
*HEX: #ADD8E6<br />
*RBG: rgb(173, 216, 230)<br />
*Namen: lightblue<br />
<br />
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.<br />
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.<br />
<br />
Empfohlene Farben sind z.B.:<br />
<br />
*Orange: <span style="color: #aa6900;">#aa6900</span><br />
*Rot: <span style="color: #ad3333;">#ad3333</span><br />
*Grün: <span style="color: #32a054;">#32a054</span><br />
*Blau: <span style="color: #6699FF;">#6699FF</span><br />
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span><br />
<br />
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/<br />
<br />
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.<br />
<br />
Hier am Beispiel eines blauen Farbschemas:<br />
<source lang="html"><br />
<html><br />
<head><br />
[...]<br />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" /><br />
[...]<br />
</head><br />
</source><br />
<br />
Diese Schema-Dateien ändern alle Widgets. Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.<br />
<br />
===CSS-Styles===<br />
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.<br />
<br />
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.<br />
<br />
=== CSS-Klassen ===<br />
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|row/col-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|hbox/vbox-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Vordergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Hintergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Rahmen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Größen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Schriftstil<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Sonstiges<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
=== Icons ===<br />
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.<br />
<br />
Verfügbare Icon-Schriftarten sind:<br />
* Eingebaute Icons ''ftui-windows'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code><br />
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code><br />
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code><br />
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code><br />
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi-'''. Beispiel: <code>data-icon="wi-day-rain-mix"</code><br />
<br />
== Widgets ==<br />
===Allgemeine Attribute===<br />
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:<br />
<br />
{| class="wikitable"<br />
|+allgemeine Attribute<br />
|-<br />
!align="right" |data-type<br />
|Widget-Typ<br />
|-<br />
!align="right" |data-device<br />
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)<br />
|-<br />
!align="right" |class<br />
|CSS-Klassen für Aussehen und Formatierung des Widgets<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Empfangen<br />
|-<br />
!align="right" |data-get<br />
|Reading Name<br />
|-<br />
!align="right" |data-get-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-get-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Senden<br />
|-<br />
!align="right" |data-set<br />
|Reading Name<br />
|-<br />
!align="right" |data-set-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-set-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
=== Integrierte Widgets ===<br />
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.<br />
<br />
* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.<br />
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen<br />
* [[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 <br />
* [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.<br />
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben<br />
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit<br />
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel<br />
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert<br />
* [[FTUI Widget Eventmonitor|eventmonitor]]:<br />
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)<br />
* [[FTUI Widget Html|html]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe. <br />
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.<br />
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld<br />
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt. <br />
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn<br />
* [[FTUI Widget Label|label]]: Reading als Text anzeigen<br />
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert<br />
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM<br />
* [[FTUI Widget Medialist|medialist]]:<br />
* [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.<br />
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein<br />
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation<br />
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.<br />
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button<br />
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element <br />
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste<br />
* [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.<br />
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen<br />
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde<br />
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position<br />
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit.<br />
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird<br />
* [[FTUI Widget Slideout|slideout]]:<br />
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen<br />
* [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern<br />
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln<br />
* [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)<br />
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)<br />
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann<br />
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes<br />
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen<br />
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose<br />
<br />
===3rd Party Widgets===<br />
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.<br />
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an<br />
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an<br />
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots<br />
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices<br />
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.<br />
* [[FTUI Widget Filelog|filelog]]:<br />
* [[FTUI Widget Fullcalview|fullcalview]]:<br />
* [[FTUI Widget Gds|gds]]:<br />
* [[FTUI Widget Highchart|highchart]]:<br />
* [[FTUI Widget Highchart3d|highchart3d]]:<br />
* [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. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.<br />
* [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.<br />
* [[FTUI Widget Loading|loading]]:<br />
* [[FTUI Widget Meteogram|meteogram]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads<br />
* [[FTUI Widget Screensaver|screensaver]]:<br />
* [[FTUI Widget Svgplot|svgplot]]:<br />
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.<br />
* [[FTUI Widget Uwz|uwz]]:<br />
* [[FTUI Widget Wakeup|wakeup]]:<br />
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul<br />
* [[FTUI Widget Weekprofile|weekprofile]]:<br />
<br />
==Templates==<br />
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.<br />
<br />
Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.<br />
<br />
===Einzelnes Widget===<br />
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.<br />
<br />
;Template-Seite<br />
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.<br />
<source lang="html"><br />
<div data-type="symbol"<br />
data-device="dummy1"><br />
</source><br />
<br />
;Haupt-Seite<br />
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.<br />
<source lang="html" highlight="6"><br />
[...]<br />
<body><br />
<div class="gridster"><br />
<ul><br />
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1"><br />
<div data-template="template_symbol.html"></div><br />
</li><br />
</ul><br />
</div><br />
</body><br />
[...]<br />
</source><br />
<br />
===Gridster-Element===<br />
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.<br />
<source lang="html"><br />
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li><br />
</source><br />
<br />
=== Widget-Gruppen ===<br />
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.<br />
<br />
=== Verwendung von Parametern ===<br />
==== Einfaches Beispiel ====<br />
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.<br />
<br />
In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.<br />
<br />
;Template-Seite<br />
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.<br />
<source lang="html" highlight="2"><br />
<div data-type="label"<br />
data-device="par01"<br />
data-get="measured-temp"></div><br />
</source><br />
<br />
;Haupt-Seite<br />
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.<br />
<source lang="html"><br />
[...]<br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div><br />
[...]<br />
</source><br />
<br />
==== Wetter-Slider mit Template ====<br />
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.<br />
<br />
;Template-Seite<br />
<source lang="html"><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="&deg;C"></div><br />
<div class="inline"><br />
<div data-type="label" data-device="AgroWeather" data-get="par02"></div><br />
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div><br />
min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="&deg;C"></div><br />
</div><br />
</div><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div><br />
</div><br />
</source><br />
<br />
;Haupt-Seite<br />
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.<br />
<source lang="html"><br />
[...]<br />
<div data-type="swiper"><br />
<ul><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li><br />
</ul><br />
</div><br />
[...]<br />
</source><br />
<br />
== JavaScript-Funktionen ==<br />
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.<br />
<br />
<br />
Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):<br />
<source lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></source><br />
<br />
<br />
Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):<br />
<source lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown(&quot;WZ.Thermostat_Climate&quot;,&quot;up&quot;)}')">+</div></source><br />
<br />
<br />
Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:<br />
<source lang="html"><br />
<div data-type="label" data-device="dummy1" data-get="temperature"></div><br />
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div><br />
</source><br />
<br />
== FAQ ==<br />
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.<br />
<br />
== Links ==<br />
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]<br />
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}<br />
* [[FTUI_Snippets|Snippets]]<br />
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]<br />
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}<br />
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FHEM_Tablet_UI&diff=21037FHEM Tablet UI2017-03-26T17:23:41Z<p>Standarduser: /* Funktionalität */ toast_position hinzugefügt.</p>
<hr />
<div>{{Infobox Modul<br />
|ModPurpose=Oberfläche für FHEM<br />
|ModType=x<br />
|ModFTopic=34233<br />
|ModForumArea=Frontends<br />
|ModTechName=n.a.<br />
|ModOwner=setstate ({{Link2FU|7023|Forum}})<br />
}}<br />
[[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.<br />
<br />
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.<br />
<br />
Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.<br />
<br />
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.<br />
<br />
[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]<br />
<br />
{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}} <br />
<br />
== Installation ==<br />
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:<br />
*Dateien aus dem GitHub-Repository herunterladen<br />
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)<br />
*Eine Beispieldatei anlegen<br />
<br />
<br />
{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.<br />
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}<br />
<br />
<br />
'''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.<br />
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code><br />
<br />
:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]<br />
<br />
<br />
'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.<br />
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code><br />
<br />
:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]<br />
<br />
<br />
'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.<br />
<br />
:<code>attr WEB longpoll websocket</code><br />
:bzw. bei Problemen mit ''websocket''<br />
:<code>attr WEB longpoll 1</code><br />
<br />
:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]<br />
<br />
<br />
'''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.<br />
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code><br />
<br />
:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]<br />
<br />
<br />
'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.<br />
<br />
<br />
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<br />
<br />
== Update ==<br />
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.<br />
<br />
'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:<br />
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
'''2.''' Update der geänderten Dateien durch Eingabe von:<br />
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
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.<br />
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
== Konfiguration ==<br />
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.<br />
<br />
Die Parameter sind immer nach diesem Schema aufgebaut:<br />
<meta name="[Parameter-Name]" content="[Parameter-Wert]"><br />
<br />
===Verbindung zu FHEM===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird<br />
|-<br />
|longpoll||1||0, 1||<br />
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)<br />
<br />
'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.<br />
|-<br />
|longpoll_type||websocket||websocket, ajax, 0||<br />
'''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.<br />
<br />
'''ajax''': Ajax wird für die Aktualisierung verwendet.<br />
<br />
'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.<br />
|-<br />
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.<br />
|-<br />
|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.<br />
|-<br />
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet<br />
|-<br />
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein<br />
|-<br />
|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.<br />
|}<br />
<br />
===Funktionalität===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|debug||0||0 - 5||Log-Level<br />
|-<br />
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.<br />
|-<br />
|toast_position||bottom-left||||Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.<br />
|-<br />
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)<br />
|-<br />
|username||||String||Benutzername für eine Basic-Authentifierung *<br />
|-<br />
|password||||String||Passwort für eine Basic-Authentifizierung *<br />
|}<br />
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.<br />
<br />
===Toast-Nachrichten===<br />
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]<br />
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.<br />
<br />
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.<br />
<br />
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:<br />
<pre><meta name='toast_position' content='top-center'></pre><br />
<br />
Möglich sind folgende Positionen:<br />
* <code>top-left</code><br />
* <code>top-right</code><br />
* <code>bottom-left</code><br />
* <code>bottom-right</code><br />
* <code>top-center</code><br />
* <code>bottom-center</code><br />
* <code>mid-center</code><br />
<br />
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:<br />
<pre><meta name='toast' content='2'></pre><br />
<br />
==Navigationsmethoden==<br />
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}} <br />
<br />
'''Unterschied zwischen Pagetab und Pagebutton:<br />
<br />
'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite<br />
[[FTUI_Widget_Pagetab]]<br />
<br />
'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite<br />
[[FTUI_Widget_Pagebutton]]<br />
<br />
==Gestaltung==<br />
===Layout-Optionen===<br />
* [[FTUI Layout Gridster|Gridster]]<br />
* [[FTUI Layout Flex|Flex]]<br />
* [[FTUI Layout Sheet|Tabelle]]<br />
* [[FTUI Layout Row|Reihen]]<br />
<br />
=== Farben ===<br />
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel: <br />
<br />
*HEX: #ADD8E6<br />
*RBG: rgb(173, 216, 230)<br />
*Namen: lightblue<br />
<br />
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.<br />
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.<br />
<br />
Empfohlene Farben sind z.B.:<br />
<br />
*Orange: <span style="color: #aa6900;">#aa6900</span><br />
*Rot: <span style="color: #ad3333;">#ad3333</span><br />
*Grün: <span style="color: #32a054;">#32a054</span><br />
*Blau: <span style="color: #6699FF;">#6699FF</span><br />
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span><br />
<br />
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/<br />
<br />
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.<br />
<br />
Hier am Beispiel eines blauen Farbschemas:<br />
<source lang="html"><br />
<html><br />
<head><br />
[...]<br />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" /><br />
[...]<br />
</head><br />
</source><br />
<br />
Diese Schema-Dateien ändern alle Widgets. Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.<br />
<br />
===CSS-Styles===<br />
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.<br />
<br />
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.<br />
<br />
=== CSS-Klassen ===<br />
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|row/col-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|hbox/vbox-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Vordergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Hintergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Rahmen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Größen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Schriftstil<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Sonstiges<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
=== Icons ===<br />
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.<br />
<br />
Verfügbare Icon-Schriftarten sind:<br />
* Eingebaute Icons ''ftui-windows'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code><br />
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code><br />
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code><br />
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code><br />
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi-'''. Beispiel: <code>data-icon="wi-day-rain-mix"</code><br />
<br />
== Widgets ==<br />
===Allgemeine Attribute===<br />
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:<br />
<br />
{| class="wikitable"<br />
|+allgemeine Attribute<br />
|-<br />
!align="right" |data-type<br />
|Widget-Typ<br />
|-<br />
!align="right" |data-device<br />
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)<br />
|-<br />
!align="right" |class<br />
|CSS-Klassen für Aussehen und Formatierung des Widgets<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Empfangen<br />
|-<br />
!align="right" |data-get<br />
|Reading Name<br />
|-<br />
!align="right" |data-get-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-get-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Senden<br />
|-<br />
!align="right" |data-set<br />
|Reading Name<br />
|-<br />
!align="right" |data-set-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-set-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
=== Integrierte Widgets ===<br />
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.<br />
<br />
* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.<br />
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen<br />
* [[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 <br />
* [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.<br />
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben<br />
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit<br />
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel<br />
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert<br />
* [[FTUI Widget Eventmonitor|eventmonitor]]:<br />
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)<br />
* [[FTUI Widget Html|html]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe. <br />
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.<br />
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld<br />
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt. <br />
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn<br />
* [[FTUI Widget Label|label]]: Reading als Text anzeigen<br />
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert<br />
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM<br />
* [[FTUI Widget Medialist|medialist]]:<br />
* [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.<br />
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein<br />
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation<br />
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.<br />
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button<br />
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element <br />
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste<br />
* [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.<br />
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen<br />
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde<br />
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position<br />
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit.<br />
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird<br />
* [[FTUI Widget Slideout|slideout]]:<br />
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen<br />
* [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern<br />
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln<br />
* [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)<br />
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)<br />
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann<br />
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes<br />
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen<br />
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose<br />
<br />
===3rd Party Widgets===<br />
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.<br />
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an<br />
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an<br />
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots<br />
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices<br />
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.<br />
* [[FTUI Widget Filelog|filelog]]:<br />
* [[FTUI Widget Fullcalview|fullcalview]]:<br />
* [[FTUI Widget Gds|gds]]:<br />
* [[FTUI Widget Highchart|highchart]]:<br />
* [[FTUI Widget Highchart3d|highchart3d]]:<br />
* [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. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.<br />
* [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.<br />
* [[FTUI Widget Loading|loading]]:<br />
* [[FTUI Widget Meteogram|meteogram]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads<br />
* [[FTUI Widget Screensaver|screensaver]]:<br />
* [[FTUI Widget Svgplot|svgplot]]:<br />
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.<br />
* [[FTUI Widget Uwz|uwz]]:<br />
* [[FTUI Widget Wakeup|wakeup]]:<br />
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul<br />
* [[FTUI Widget Weekprofile|weekprofile]]:<br />
<br />
==Templates==<br />
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.<br />
<br />
Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.<br />
<br />
===Einzelnes Widget===<br />
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.<br />
<br />
;Template-Seite<br />
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.<br />
<source lang="html"><br />
<div data-type="symbol"<br />
data-device="dummy1"><br />
</source><br />
<br />
;Haupt-Seite<br />
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.<br />
<source lang="html" highlight="6"><br />
[...]<br />
<body><br />
<div class="gridster"><br />
<ul><br />
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1"><br />
<div data-template="template_symbol.html"></div><br />
</li><br />
</ul><br />
</div><br />
</body><br />
[...]<br />
</source><br />
<br />
===Gridster-Element===<br />
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.<br />
<source lang="html"><br />
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li><br />
</source><br />
<br />
=== Widget-Gruppen ===<br />
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.<br />
<br />
=== Verwendung von Parametern ===<br />
==== Einfaches Beispiel ====<br />
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.<br />
<br />
In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.<br />
<br />
;Template-Seite<br />
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.<br />
<source lang="html" highlight="2"><br />
<div data-type="label"<br />
data-device="par01"<br />
data-get="measured-temp"></div><br />
</source><br />
<br />
;Haupt-Seite<br />
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.<br />
<source lang="html"><br />
[...]<br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div><br />
[...]<br />
</source><br />
<br />
==== Wetter-Slider mit Template ====<br />
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.<br />
<br />
;Template-Seite<br />
<source lang="html"><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="&deg;C"></div><br />
<div class="inline"><br />
<div data-type="label" data-device="AgroWeather" data-get="par02"></div><br />
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div><br />
min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="&deg;C"></div><br />
</div><br />
</div><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div><br />
</div><br />
</source><br />
<br />
;Haupt-Seite<br />
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.<br />
<source lang="html"><br />
[...]<br />
<div data-type="swiper"><br />
<ul><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li><br />
</ul><br />
</div><br />
[...]<br />
</source><br />
<br />
== JavaScript-Funktionen ==<br />
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.<br />
<br />
<br />
Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):<br />
<source lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></source><br />
<br />
<br />
Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):<br />
<source lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown(&quot;WZ.Thermostat_Climate&quot;,&quot;up&quot;)}')">+</div></source><br />
<br />
<br />
Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:<br />
<source lang="html"><br />
<div data-type="label" data-device="dummy1" data-get="temperature"></div><br />
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div><br />
</source><br />
<br />
== FAQ ==<br />
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.<br />
<br />
== Links ==<br />
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]<br />
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}<br />
* [[FTUI_Snippets|Snippets]]<br />
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]<br />
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}<br />
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FHEM_Tablet_UI&diff=21036FHEM Tablet UI2017-03-26T17:22:05Z<p>Standarduser: /* Toast-Nachrichten */ Weitere Informationen hinzugefügt</p>
<hr />
<div>{{Infobox Modul<br />
|ModPurpose=Oberfläche für FHEM<br />
|ModType=x<br />
|ModFTopic=34233<br />
|ModForumArea=Frontends<br />
|ModTechName=n.a.<br />
|ModOwner=setstate ({{Link2FU|7023|Forum}})<br />
}}<br />
[[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.<br />
<br />
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.<br />
<br />
Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.<br />
<br />
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.<br />
<br />
[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]<br />
<br />
{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}} <br />
<br />
== Installation ==<br />
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:<br />
*Dateien aus dem GitHub-Repository herunterladen<br />
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)<br />
*Eine Beispieldatei anlegen<br />
<br />
<br />
{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.<br />
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}<br />
<br />
<br />
'''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.<br />
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code><br />
<br />
:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]<br />
<br />
<br />
'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.<br />
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code><br />
<br />
:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]<br />
<br />
<br />
'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.<br />
<br />
:<code>attr WEB longpoll websocket</code><br />
:bzw. bei Problemen mit ''websocket''<br />
:<code>attr WEB longpoll 1</code><br />
<br />
:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]<br />
<br />
<br />
'''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.<br />
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code><br />
<br />
:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]<br />
<br />
<br />
'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.<br />
<br />
<br />
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<br />
<br />
== Update ==<br />
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.<br />
<br />
'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:<br />
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
'''2.''' Update der geänderten Dateien durch Eingabe von:<br />
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
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.<br />
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
== Konfiguration ==<br />
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.<br />
<br />
Die Parameter sind immer nach diesem Schema aufgebaut:<br />
<meta name="[Parameter-Name]" content="[Parameter-Wert]"><br />
<br />
===Verbindung zu FHEM===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird<br />
|-<br />
|longpoll||1||0, 1||<br />
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)<br />
<br />
'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.<br />
|-<br />
|longpoll_type||websocket||websocket, ajax, 0||<br />
'''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.<br />
<br />
'''ajax''': Ajax wird für die Aktualisierung verwendet.<br />
<br />
'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.<br />
|-<br />
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.<br />
|-<br />
|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.<br />
|-<br />
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet<br />
|-<br />
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein<br />
|-<br />
|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.<br />
|}<br />
<br />
===Funktionalität===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|debug||0||0 - 5||Log-Level<br />
|-<br />
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.<br />
|-<br />
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)<br />
|-<br />
|username||||String||Benutzername für eine Basic-Authentifierung *<br />
|-<br />
|password||||String||Passwort für eine Basic-Authentifizierung *<br />
|}<br />
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.<br />
<br />
===Toast-Nachrichten===<br />
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]<br />
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.<br />
<br />
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.<br />
<br />
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:<br />
<pre><meta name='toast_position' content='top-center'></pre><br />
<br />
Möglich sind folgende Positionen:<br />
* <code>top-left</code><br />
* <code>top-right</code><br />
* <code>bottom-left</code><br />
* <code>bottom-right</code><br />
* <code>top-center</code><br />
* <code>bottom-center</code><br />
* <code>mid-center</code><br />
<br />
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:<br />
<pre><meta name='toast' content='2'></pre><br />
<br />
==Navigationsmethoden==<br />
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}} <br />
<br />
'''Unterschied zwischen Pagetab und Pagebutton:<br />
<br />
'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite<br />
[[FTUI_Widget_Pagetab]]<br />
<br />
'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite<br />
[[FTUI_Widget_Pagebutton]]<br />
<br />
==Gestaltung==<br />
===Layout-Optionen===<br />
* [[FTUI Layout Gridster|Gridster]]<br />
* [[FTUI Layout Flex|Flex]]<br />
* [[FTUI Layout Sheet|Tabelle]]<br />
* [[FTUI Layout Row|Reihen]]<br />
<br />
=== Farben ===<br />
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel: <br />
<br />
*HEX: #ADD8E6<br />
*RBG: rgb(173, 216, 230)<br />
*Namen: lightblue<br />
<br />
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.<br />
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.<br />
<br />
Empfohlene Farben sind z.B.:<br />
<br />
*Orange: <span style="color: #aa6900;">#aa6900</span><br />
*Rot: <span style="color: #ad3333;">#ad3333</span><br />
*Grün: <span style="color: #32a054;">#32a054</span><br />
*Blau: <span style="color: #6699FF;">#6699FF</span><br />
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span><br />
<br />
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/<br />
<br />
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.<br />
<br />
Hier am Beispiel eines blauen Farbschemas:<br />
<source lang="html"><br />
<html><br />
<head><br />
[...]<br />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" /><br />
[...]<br />
</head><br />
</source><br />
<br />
Diese Schema-Dateien ändern alle Widgets. Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.<br />
<br />
===CSS-Styles===<br />
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.<br />
<br />
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.<br />
<br />
=== CSS-Klassen ===<br />
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|row/col-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|hbox/vbox-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Vordergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Hintergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Rahmen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Größen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Schriftstil<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Sonstiges<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
=== Icons ===<br />
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.<br />
<br />
Verfügbare Icon-Schriftarten sind:<br />
* Eingebaute Icons ''ftui-windows'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code><br />
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code><br />
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code><br />
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code><br />
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi-'''. Beispiel: <code>data-icon="wi-day-rain-mix"</code><br />
<br />
== Widgets ==<br />
===Allgemeine Attribute===<br />
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:<br />
<br />
{| class="wikitable"<br />
|+allgemeine Attribute<br />
|-<br />
!align="right" |data-type<br />
|Widget-Typ<br />
|-<br />
!align="right" |data-device<br />
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)<br />
|-<br />
!align="right" |class<br />
|CSS-Klassen für Aussehen und Formatierung des Widgets<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Empfangen<br />
|-<br />
!align="right" |data-get<br />
|Reading Name<br />
|-<br />
!align="right" |data-get-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-get-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Senden<br />
|-<br />
!align="right" |data-set<br />
|Reading Name<br />
|-<br />
!align="right" |data-set-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-set-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
=== Integrierte Widgets ===<br />
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.<br />
<br />
* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.<br />
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen<br />
* [[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 <br />
* [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.<br />
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben<br />
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit<br />
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel<br />
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert<br />
* [[FTUI Widget Eventmonitor|eventmonitor]]:<br />
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)<br />
* [[FTUI Widget Html|html]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe. <br />
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.<br />
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld<br />
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt. <br />
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn<br />
* [[FTUI Widget Label|label]]: Reading als Text anzeigen<br />
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert<br />
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM<br />
* [[FTUI Widget Medialist|medialist]]:<br />
* [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.<br />
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein<br />
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation<br />
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.<br />
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button<br />
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element <br />
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste<br />
* [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.<br />
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen<br />
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde<br />
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position<br />
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit.<br />
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird<br />
* [[FTUI Widget Slideout|slideout]]:<br />
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen<br />
* [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern<br />
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln<br />
* [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)<br />
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)<br />
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann<br />
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes<br />
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen<br />
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose<br />
<br />
===3rd Party Widgets===<br />
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.<br />
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an<br />
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an<br />
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots<br />
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices<br />
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.<br />
* [[FTUI Widget Filelog|filelog]]:<br />
* [[FTUI Widget Fullcalview|fullcalview]]:<br />
* [[FTUI Widget Gds|gds]]:<br />
* [[FTUI Widget Highchart|highchart]]:<br />
* [[FTUI Widget Highchart3d|highchart3d]]:<br />
* [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. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.<br />
* [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.<br />
* [[FTUI Widget Loading|loading]]:<br />
* [[FTUI Widget Meteogram|meteogram]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads<br />
* [[FTUI Widget Screensaver|screensaver]]:<br />
* [[FTUI Widget Svgplot|svgplot]]:<br />
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.<br />
* [[FTUI Widget Uwz|uwz]]:<br />
* [[FTUI Widget Wakeup|wakeup]]:<br />
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul<br />
* [[FTUI Widget Weekprofile|weekprofile]]:<br />
<br />
==Templates==<br />
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.<br />
<br />
Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.<br />
<br />
===Einzelnes Widget===<br />
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.<br />
<br />
;Template-Seite<br />
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.<br />
<source lang="html"><br />
<div data-type="symbol"<br />
data-device="dummy1"><br />
</source><br />
<br />
;Haupt-Seite<br />
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.<br />
<source lang="html" highlight="6"><br />
[...]<br />
<body><br />
<div class="gridster"><br />
<ul><br />
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1"><br />
<div data-template="template_symbol.html"></div><br />
</li><br />
</ul><br />
</div><br />
</body><br />
[...]<br />
</source><br />
<br />
===Gridster-Element===<br />
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.<br />
<source lang="html"><br />
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li><br />
</source><br />
<br />
=== Widget-Gruppen ===<br />
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.<br />
<br />
=== Verwendung von Parametern ===<br />
==== Einfaches Beispiel ====<br />
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.<br />
<br />
In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.<br />
<br />
;Template-Seite<br />
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.<br />
<source lang="html" highlight="2"><br />
<div data-type="label"<br />
data-device="par01"<br />
data-get="measured-temp"></div><br />
</source><br />
<br />
;Haupt-Seite<br />
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.<br />
<source lang="html"><br />
[...]<br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div><br />
[...]<br />
</source><br />
<br />
==== Wetter-Slider mit Template ====<br />
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.<br />
<br />
;Template-Seite<br />
<source lang="html"><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="&deg;C"></div><br />
<div class="inline"><br />
<div data-type="label" data-device="AgroWeather" data-get="par02"></div><br />
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div><br />
min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="&deg;C"></div><br />
</div><br />
</div><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div><br />
</div><br />
</source><br />
<br />
;Haupt-Seite<br />
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.<br />
<source lang="html"><br />
[...]<br />
<div data-type="swiper"><br />
<ul><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li><br />
</ul><br />
</div><br />
[...]<br />
</source><br />
<br />
== JavaScript-Funktionen ==<br />
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.<br />
<br />
<br />
Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):<br />
<source lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></source><br />
<br />
<br />
Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):<br />
<source lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown(&quot;WZ.Thermostat_Climate&quot;,&quot;up&quot;)}')">+</div></source><br />
<br />
<br />
Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:<br />
<source lang="html"><br />
<div data-type="label" data-device="dummy1" data-get="temperature"></div><br />
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div><br />
</source><br />
<br />
== FAQ ==<br />
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.<br />
<br />
== Links ==<br />
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]<br />
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}<br />
* [[FTUI_Snippets|Snippets]]<br />
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]<br />
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}<br />
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FHEM_Tablet_UI&diff=21035FHEM Tablet UI2017-03-26T17:14:42Z<p>Standarduser: /* Konfiguration */ Toast-Nachrichten hinzugefügt.</p>
<hr />
<div>{{Infobox Modul<br />
|ModPurpose=Oberfläche für FHEM<br />
|ModType=x<br />
|ModFTopic=34233<br />
|ModForumArea=Frontends<br />
|ModTechName=n.a.<br />
|ModOwner=setstate ({{Link2FU|7023|Forum}})<br />
}}<br />
[[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.<br />
<br />
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.<br />
<br />
Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.<br />
<br />
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.<br />
<br />
[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]<br />
<br />
{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}} <br />
<br />
== Installation ==<br />
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:<br />
*Dateien aus dem GitHub-Repository herunterladen<br />
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)<br />
*Eine Beispieldatei anlegen<br />
<br />
<br />
{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.<br />
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}<br />
<br />
<br />
'''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.<br />
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code><br />
<br />
:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]<br />
<br />
<br />
'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.<br />
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code><br />
<br />
:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]<br />
<br />
<br />
'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.<br />
<br />
:<code>attr WEB longpoll websocket</code><br />
:bzw. bei Problemen mit ''websocket''<br />
:<code>attr WEB longpoll 1</code><br />
<br />
:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]<br />
<br />
<br />
'''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.<br />
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code><br />
<br />
:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]<br />
<br />
<br />
'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.<br />
<br />
<br />
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<br />
<br />
== Update ==<br />
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.<br />
<br />
'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:<br />
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
'''2.''' Update der geänderten Dateien durch Eingabe von:<br />
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
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.<br />
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
== Konfiguration ==<br />
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.<br />
<br />
Die Parameter sind immer nach diesem Schema aufgebaut:<br />
<meta name="[Parameter-Name]" content="[Parameter-Wert]"><br />
<br />
===Verbindung zu FHEM===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird<br />
|-<br />
|longpoll||1||0, 1||<br />
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)<br />
<br />
'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.<br />
|-<br />
|longpoll_type||websocket||websocket, ajax, 0||<br />
'''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.<br />
<br />
'''ajax''': Ajax wird für die Aktualisierung verwendet.<br />
<br />
'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.<br />
|-<br />
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.<br />
|-<br />
|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.<br />
|-<br />
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet<br />
|-<br />
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein<br />
|-<br />
|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.<br />
|}<br />
<br />
===Funktionalität===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|debug||0||0 - 5||Log-Level<br />
|-<br />
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.<br />
|-<br />
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)<br />
|-<br />
|username||||String||Benutzername für eine Basic-Authentifierung *<br />
|-<br />
|password||||String||Passwort für eine Basic-Authentifizierung *<br />
|}<br />
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.<br />
<br />
===Toast-Nachrichten===<br />
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]<br />
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.<br />
<br />
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.<br />
<br />
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:<br />
<pre><meta name='toast_position' content='top-center'></pre><br />
<br />
==Navigationsmethoden==<br />
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}} <br />
<br />
'''Unterschied zwischen Pagetab und Pagebutton:<br />
<br />
'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite<br />
[[FTUI_Widget_Pagetab]]<br />
<br />
'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite<br />
[[FTUI_Widget_Pagebutton]]<br />
<br />
==Gestaltung==<br />
===Layout-Optionen===<br />
* [[FTUI Layout Gridster|Gridster]]<br />
* [[FTUI Layout Flex|Flex]]<br />
* [[FTUI Layout Sheet|Tabelle]]<br />
* [[FTUI Layout Row|Reihen]]<br />
<br />
=== Farben ===<br />
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel: <br />
<br />
*HEX: #ADD8E6<br />
*RBG: rgb(173, 216, 230)<br />
*Namen: lightblue<br />
<br />
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.<br />
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.<br />
<br />
Empfohlene Farben sind z.B.:<br />
<br />
*Orange: <span style="color: #aa6900;">#aa6900</span><br />
*Rot: <span style="color: #ad3333;">#ad3333</span><br />
*Grün: <span style="color: #32a054;">#32a054</span><br />
*Blau: <span style="color: #6699FF;">#6699FF</span><br />
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span><br />
<br />
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/<br />
<br />
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.<br />
<br />
Hier am Beispiel eines blauen Farbschemas:<br />
<source lang="html"><br />
<html><br />
<head><br />
[...]<br />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" /><br />
[...]<br />
</head><br />
</source><br />
<br />
Diese Schema-Dateien ändern alle Widgets. Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.<br />
<br />
===CSS-Styles===<br />
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.<br />
<br />
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.<br />
<br />
=== CSS-Klassen ===<br />
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|row/col-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|hbox/vbox-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Vordergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Hintergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Rahmen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Größen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Schriftstil<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Sonstiges<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
=== Icons ===<br />
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.<br />
<br />
Verfügbare Icon-Schriftarten sind:<br />
* Eingebaute Icons ''ftui-windows'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code><br />
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code><br />
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code><br />
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code><br />
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi-'''. Beispiel: <code>data-icon="wi-day-rain-mix"</code><br />
<br />
== Widgets ==<br />
===Allgemeine Attribute===<br />
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:<br />
<br />
{| class="wikitable"<br />
|+allgemeine Attribute<br />
|-<br />
!align="right" |data-type<br />
|Widget-Typ<br />
|-<br />
!align="right" |data-device<br />
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)<br />
|-<br />
!align="right" |class<br />
|CSS-Klassen für Aussehen und Formatierung des Widgets<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Empfangen<br />
|-<br />
!align="right" |data-get<br />
|Reading Name<br />
|-<br />
!align="right" |data-get-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-get-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Senden<br />
|-<br />
!align="right" |data-set<br />
|Reading Name<br />
|-<br />
!align="right" |data-set-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-set-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
=== Integrierte Widgets ===<br />
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.<br />
<br />
* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.<br />
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen<br />
* [[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 <br />
* [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.<br />
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben<br />
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit<br />
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel<br />
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert<br />
* [[FTUI Widget Eventmonitor|eventmonitor]]:<br />
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)<br />
* [[FTUI Widget Html|html]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe. <br />
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.<br />
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld<br />
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt. <br />
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn<br />
* [[FTUI Widget Label|label]]: Reading als Text anzeigen<br />
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert<br />
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM<br />
* [[FTUI Widget Medialist|medialist]]:<br />
* [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.<br />
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein<br />
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation<br />
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.<br />
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button<br />
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element <br />
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste<br />
* [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.<br />
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen<br />
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde<br />
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position<br />
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit.<br />
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird<br />
* [[FTUI Widget Slideout|slideout]]:<br />
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen<br />
* [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern<br />
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln<br />
* [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)<br />
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)<br />
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann<br />
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes<br />
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen<br />
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose<br />
<br />
===3rd Party Widgets===<br />
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.<br />
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an<br />
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an<br />
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots<br />
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices<br />
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.<br />
* [[FTUI Widget Filelog|filelog]]:<br />
* [[FTUI Widget Fullcalview|fullcalview]]:<br />
* [[FTUI Widget Gds|gds]]:<br />
* [[FTUI Widget Highchart|highchart]]:<br />
* [[FTUI Widget Highchart3d|highchart3d]]:<br />
* [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. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.<br />
* [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.<br />
* [[FTUI Widget Loading|loading]]:<br />
* [[FTUI Widget Meteogram|meteogram]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads<br />
* [[FTUI Widget Screensaver|screensaver]]:<br />
* [[FTUI Widget Svgplot|svgplot]]:<br />
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.<br />
* [[FTUI Widget Uwz|uwz]]:<br />
* [[FTUI Widget Wakeup|wakeup]]:<br />
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul<br />
* [[FTUI Widget Weekprofile|weekprofile]]:<br />
<br />
==Templates==<br />
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.<br />
<br />
Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.<br />
<br />
===Einzelnes Widget===<br />
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.<br />
<br />
;Template-Seite<br />
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.<br />
<source lang="html"><br />
<div data-type="symbol"<br />
data-device="dummy1"><br />
</source><br />
<br />
;Haupt-Seite<br />
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.<br />
<source lang="html" highlight="6"><br />
[...]<br />
<body><br />
<div class="gridster"><br />
<ul><br />
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1"><br />
<div data-template="template_symbol.html"></div><br />
</li><br />
</ul><br />
</div><br />
</body><br />
[...]<br />
</source><br />
<br />
===Gridster-Element===<br />
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.<br />
<source lang="html"><br />
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li><br />
</source><br />
<br />
=== Widget-Gruppen ===<br />
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.<br />
<br />
=== Verwendung von Parametern ===<br />
==== Einfaches Beispiel ====<br />
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.<br />
<br />
In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.<br />
<br />
;Template-Seite<br />
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.<br />
<source lang="html" highlight="2"><br />
<div data-type="label"<br />
data-device="par01"<br />
data-get="measured-temp"></div><br />
</source><br />
<br />
;Haupt-Seite<br />
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.<br />
<source lang="html"><br />
[...]<br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div><br />
[...]<br />
</source><br />
<br />
==== Wetter-Slider mit Template ====<br />
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.<br />
<br />
;Template-Seite<br />
<source lang="html"><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="&deg;C"></div><br />
<div class="inline"><br />
<div data-type="label" data-device="AgroWeather" data-get="par02"></div><br />
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div><br />
min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="&deg;C"></div><br />
</div><br />
</div><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div><br />
</div><br />
</source><br />
<br />
;Haupt-Seite<br />
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.<br />
<source lang="html"><br />
[...]<br />
<div data-type="swiper"><br />
<ul><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li><br />
</ul><br />
</div><br />
[...]<br />
</source><br />
<br />
== JavaScript-Funktionen ==<br />
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.<br />
<br />
<br />
Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):<br />
<source lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></source><br />
<br />
<br />
Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):<br />
<source lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown(&quot;WZ.Thermostat_Climate&quot;,&quot;up&quot;)}')">+</div></source><br />
<br />
<br />
Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:<br />
<source lang="html"><br />
<div data-type="label" data-device="dummy1" data-get="temperature"></div><br />
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div><br />
</source><br />
<br />
== FAQ ==<br />
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.<br />
<br />
== Links ==<br />
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]<br />
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}<br />
* [[FTUI_Snippets|Snippets]]<br />
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]<br />
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}<br />
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=Datei:Ftui_toast.png&diff=21034Datei:Ftui toast.png2017-03-26T17:08:53Z<p>Standarduser: </p>
<hr />
<div></div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Symbol&diff=20997FTUI Widget Symbol2017-03-21T16:17:50Z<p>Standarduser: /* Attribute */</p>
<hr />
<div>Das [[{{PAGENAME}}|Widget Symbol]] ist ein Widget für [[FHEM Tablet UI]], mit dem - ggf. gesteuert durch ein reading - ein Symbol dargestellt wird. Dieses Widget generiert nur eine Anzeige; es besitzt keine Möglichkeit zur Interaktion.<br />
<br />
<gallery widths="600" height="200"><br />
File:FTUI_Widget_Symbol_01.png<br />
</gallery><br />
<br />
==Attribute==<br />
Neben den '''allgemeinen Attributen''' besitzt das SYMBOL-Widget die nachfolgenden Attribute.<br />
<br />
{| class="wikitable"<br />
! HTML Attribut !! Beschreibung !! Default Wert<br />
|-<br />
| data-get || Name des Readings, welches ausgelesen wird || STATE<br />
|}<br />
<br />
Einstellung bei zwei Werten<br />
{| class="wikitable"<br />
!Attribut !! Beschreibung !! Default-Wert<br />
|-<br />
|'''data-get-on''' ||Wert für on ||<nowiki>true|1|on|open</nowiki><br />
|-<br />
|'''data-get-off''' ||Wert für off ||<nowiki>false|0|off|closed</nowiki><br />
|-<br />
|'''data-get-warn''' ||Wert für Warnmeldung (Rote Zahl am Rand) ||-1 (=aus)<br />
|-<br />
|'''data-icon''' ||Name des Symbols||ftui-window<br />
|-<br />
|'''data-background-icon''' ||Hintergrundsymbol ||<br />
|-<br />
|'''data-on-background-color''' ||Hintergrundfarbe für ON-Zustand. ||#aa6900<br />
|-<br />
|'''data-off-background-color''' ||Hintergrundfarbe für OFF-Zustand. ||#505050<br />
|-<br />
|'''data-on-color''' ||Farbe für ON-Zustand. ||#aa6900<br />
|-<br />
|'''data-off-color''' ||Farbe für OFF-Zustand. ||#505050<br />
|-<br />
|}<br />
<br />
Einstellung bei mehreren Werten<br />
{| class="wikitable"<br />
!Attribut !! Beschreibung !!Default Wert<br />
|-<br />
|'''data-states''' ||Array für states ||<br />
|-<br />
|'''data-icons''' ||Array mit Icons zu data-states Array ||<br />
|-<br />
|'''data-background-icons''' ||Array mit Icons zu data-states Array ||<br />
|-<br />
|'''data-colors''' ||Array mit Farben zu data-states Array ||<br />
|-<br />
|'''data-background-colors''' ||Array mit Hintergrundfarben zu data-states Array ||<br />
|-<br />
|}<br />
<br />
data-get-on, data-get-off and data-states akzeptieren auch reguläre Ausdrücke (RegEx). Möglich sind auch Animationen, z.B. Blinken.<br />
<br />
==CSS-Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{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|grande}}{{FTUI Klasse|gigantic}}{{FTUI Klasse|compressed}}{{FTUI Klasse|compressed-50}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|hide}}{{FTUI Klasse|warn}}<br />
|}<br />
<br />
==Beispiele==<br />
===Einfaches Symbol===<br />
[[File:FTUI_Widget_Symbol_02.png]]<br />
<source lang="html"><br />
<div data-type="symbol" data-device="Web-Status" class=""></div><br />
</source><br />
(Das device "Web-Status" liefert in diesem Fall den Wert "fa-rss-square")<br />
<br />
<br />
===Symbol mit vier Zuständen und Animation===<br />
[[File:FTUI_Widget_Symbol_03.png|800px]]<br />
<source lang="html"><br />
<div class="" <br />
data-type="symbol" <br />
data-device="Garage" <br />
data-states='["oben","unten","lauf","angehalten","Fehler"]' <br />
data-icons='["oa-fts_garage_door_10","oa-fts_garage_door_100","fa-cog fa-spin","oa-fts_garage_door_40","fa-bug"]' <br />
data-colors='["GoldenRod","SeaGreen","Crimson","Crimson","Crimson"]'></div><br />
</source><br />
<br />
==Weitere Beispiele==<br />
===Batterieüberwachung mit Regulärem Ausdruck (0.0 - 3.9)===<br />
<source lang="html"><br />
<div data-type="symbol" <br />
data-device="WohnzimmerHeizung" <br />
data-get="batteryLevel"<br />
data-states='["3.[0-9]","2.[789]","2.[456]","2.[123]","((2.0)|([01].[0-9]))"]'<br />
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'<br />
data-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'><br />
</div><br />
</source><br />
<br />
===Batterieüberwachung mit Regulärem Ausdruck (0 - 100)===<br />
<source lang="html"><br />
<div data-type="symbol"<br />
data-device="dDummy3"<br />
data-get-on="[\d]+"<br />
data-get-off="!on"<br />
data-states='["100","([7][5-9])|([8-9][0-9])","([5-6][0-9])|([7][0-4])","([2][5-9])|([3-5][0-9])","([0-9])|([1][0-9])|([2][0-4])"]'<br />
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'></div><br />
</source><br />
[[Datei:FTUI_Widget_Symbol_04.png]]<br />
<br />
===Batterieüberwachung mit Größenvergleich und gedrehten Symbolen===<br />
<source lang="html"><br />
<div data-type="symbol" <br />
data-device="BadHeizung"<br />
data-get="batteryLevel"<br />
data-states='["0","2","2.4","2.7","3.0"]'<br />
data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'<br />
data-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'><br />
</div><br />
</source><br />
<br />
===Türsymbol mit Warnung bei geöffneter Tür===<br />
<source lang="html"><br />
<div data-type="symbol" data-device="Eingangstuer" <br />
data-states='["open","closed"]' <br />
data-icons='["ftui-door warn","ftui-door"]' <br />
data-colors='["#999","#555"]' ><br />
</div><br />
</source><br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Symbol&diff=20996FTUI Widget Symbol2017-03-21T16:17:36Z<p>Standarduser: /* Attribute */ Formatierung angeglichen</p>
<hr />
<div>Das [[{{PAGENAME}}|Widget Symbol]] ist ein Widget für [[FHEM Tablet UI]], mit dem - ggf. gesteuert durch ein reading - ein Symbol dargestellt wird. Dieses Widget generiert nur eine Anzeige; es besitzt keine Möglichkeit zur Interaktion.<br />
<br />
<gallery widths="600" height="200"><br />
File:FTUI_Widget_Symbol_01.png<br />
</gallery><br />
<br />
==Attribute==<br />
Neben den '''allgemeinen Attributen''' besitzt das SYMBOL-Widget die nachfolgenden Attribute.<br />
<br />
{| class="wikitable"<br />
! HTML Attribut !! Beschreibung !! Default Wert<br />
|-<br />
| data-get || Name des Readings, welches ausgelesen wird || STATE<br />
|}<br />
<br />
Einstellung bei zwei Werten<br />
{| class="wikitable"<br />
!Attribut !! Beschreibung !! Default-Wert<br />
|-<br />
|'''data-get-on''' ||Wert für on ||<nowiki>true|1|on|open</nowiki><br />
|-<br />
|'''data-get-off''' ||Wert für off ||<nowiki>false|0|off|closed</nowiki><br />
|-<br />
|'''data-get-warn''' ||Wert für Warnmeldung (Rote Zahl am Rand) ||-1 (=aus)<br />
|-<br />
|'''data-icon''' ||Name des Symbols||ftui-window<br />
|-<br />
|'''data-background-icon''' ||Hintergrundsymbol ||<br />
|-<br />
|'''data-on-background-color''' ||Hintergrundfarbe für ON-Zustand. ||#aa6900<br />
|-<br />
|'''data-off-background-color''' ||Hintergrundfarbe für OFF-Zustand. ||#505050<br />
|-<br />
|'''data-on-color''' ||Farbe für ON-Zustand. ||#aa6900<br />
|-<br />
|'''data-off-color''' ||Farbe für OFF-Zustand. ||#505050<br />
|-<br />
|}<br />
<br />
Einstellung bei mehreren Werten<br />
{| class="wikitable"<br />
!Attribut !! Beschreibung !!Default Wert<br />
|-<br />
|'''data-states''' ||Array für states ||<br />
|-<br />
|'''data-icons''' ||Array mit Icons zu data-states Array ||<br />
|-<br />
|'''data-background-icons''' ||Array mit Icons zu data-states Array ||<br />
|-<br />
|'''data-colors''' ||Array mit Farben zu data-states Array ||<br />
|-<br />
|'''data-background-colors'' ||Array mit Hintergrundfarben zu data-states Array ||<br />
|-<br />
|}<br />
<br />
data-get-on, data-get-off and data-states akzeptieren auch reguläre Ausdrücke (RegEx). Möglich sind auch Animationen, z.B. Blinken.<br />
<br />
==CSS-Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{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|grande}}{{FTUI Klasse|gigantic}}{{FTUI Klasse|compressed}}{{FTUI Klasse|compressed-50}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|hide}}{{FTUI Klasse|warn}}<br />
|}<br />
<br />
==Beispiele==<br />
===Einfaches Symbol===<br />
[[File:FTUI_Widget_Symbol_02.png]]<br />
<source lang="html"><br />
<div data-type="symbol" data-device="Web-Status" class=""></div><br />
</source><br />
(Das device "Web-Status" liefert in diesem Fall den Wert "fa-rss-square")<br />
<br />
<br />
===Symbol mit vier Zuständen und Animation===<br />
[[File:FTUI_Widget_Symbol_03.png|800px]]<br />
<source lang="html"><br />
<div class="" <br />
data-type="symbol" <br />
data-device="Garage" <br />
data-states='["oben","unten","lauf","angehalten","Fehler"]' <br />
data-icons='["oa-fts_garage_door_10","oa-fts_garage_door_100","fa-cog fa-spin","oa-fts_garage_door_40","fa-bug"]' <br />
data-colors='["GoldenRod","SeaGreen","Crimson","Crimson","Crimson"]'></div><br />
</source><br />
<br />
==Weitere Beispiele==<br />
===Batterieüberwachung mit Regulärem Ausdruck (0.0 - 3.9)===<br />
<source lang="html"><br />
<div data-type="symbol" <br />
data-device="WohnzimmerHeizung" <br />
data-get="batteryLevel"<br />
data-states='["3.[0-9]","2.[789]","2.[456]","2.[123]","((2.0)|([01].[0-9]))"]'<br />
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'<br />
data-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'><br />
</div><br />
</source><br />
<br />
===Batterieüberwachung mit Regulärem Ausdruck (0 - 100)===<br />
<source lang="html"><br />
<div data-type="symbol"<br />
data-device="dDummy3"<br />
data-get-on="[\d]+"<br />
data-get-off="!on"<br />
data-states='["100","([7][5-9])|([8-9][0-9])","([5-6][0-9])|([7][0-4])","([2][5-9])|([3-5][0-9])","([0-9])|([1][0-9])|([2][0-4])"]'<br />
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'></div><br />
</source><br />
[[Datei:FTUI_Widget_Symbol_04.png]]<br />
<br />
===Batterieüberwachung mit Größenvergleich und gedrehten Symbolen===<br />
<source lang="html"><br />
<div data-type="symbol" <br />
data-device="BadHeizung"<br />
data-get="batteryLevel"<br />
data-states='["0","2","2.4","2.7","3.0"]'<br />
data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'<br />
data-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'><br />
</div><br />
</source><br />
<br />
===Türsymbol mit Warnung bei geöffneter Tür===<br />
<source lang="html"><br />
<div data-type="symbol" data-device="Eingangstuer" <br />
data-states='["open","closed"]' <br />
data-icons='["ftui-door warn","ftui-door"]' <br />
data-colors='["#999","#555"]' ><br />
</div><br />
</source><br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Push&diff=20979FTUI Widget Push2017-03-20T19:07:53Z<p>Standarduser: /* Attribute */ Standardwert von data-background-icon korrigiert</p>
<hr />
<div>Das [[{{PAGENAME}}|Push Widget]] ist ein Widget für [[FHEM Tablet UI]] in Form eines Button-förmigen Knopfes, der, ähnlich einem Taster, einen einfachen Befehl an FHEM sendet (zum Beispiel hoch/runter, Play/Pause, Nächster/vorheriger Titel, usw.). Der Befehl kann beim Drücken, beim Loslassen, oder beide Male ausgeführt werden.<br />
<br />
<gallery><br />
File:Ftui_widget_push.PNG<br />
File:Push1.png<br />
File:Push2.png<br />
File:Ftui_widget_push_on-for-timer.png<br />
</gallery><br />
<br />
==Attribute==<br />
{| class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, dessen Reading gesetzt werden soll (<command> '''<device>''' <reading> <value>)||||<br />
|-<br />
|'''data-set'''||Reading, das gesetzt werden soll (<command> <device> '''<reading>''' <value>)||||<br />
|-<br />
|'''data-set-on'''||Wert, der beim Drücken gesendet werden soll. Kann auch ein Array sein, um verschiedene Werte abwechselnd zu schalten||on||data-set-on="1"<br />
|-<br />
|'''data-set-off'''||Wert, der nach dem Loslassen gesendet werden soll||||data-set-off="0"<br />
|-<br />
|'''data-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||<br />
|-<br />
|'''data-doubleclick'''||Zeit, die vergehen muss, bis das Element ein zweites mal betätigt werden kann. '0' schaltet dieses Verhalten ab.||0||<br />
|-<br />
|'''data-countdown'''||Sekunden für Fortschrittsanzeige (progress control / 'on-for-timer')||Automatische Erkennung von 'on-for-timer' bei '''data-set-on'''||<br />
|-<br />
|'''data-warn'''||Reading, dessen Inhalt als rotes Kennzeichen angezeigt wird. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||<br />
|-<br />
|'''data-get'''||Reading, dessen Inhalt zur Zustandsanzeige (ON/OFF) wird||keiner (muss explizit angegeben werden)||<br />
|-<br />
|'''data-get-on'''||Zeichenkette, die als Zustand ON interpretiert wird||||<br />
|-<br />
|'''data-get-off'''||Zeichenkette, die als Zustand OFF interpretiert wird||||<br />
|-<br />
|'''data-hide'''||Reading zum Verstecken des Push-Elementes. Das Element verschwindet, wenn der Wert mit '''data-hide-on''' übereinstimmt.||STATE||<br />
|-<br />
|'''data-hide-on'''||Zeichenkette, bei der das Element versteckt wird||true,1,on||<br />
|-<br />
|'''data-hide-off'''||Zeichenkette, bei der das Element angezeigt wird||!on||<br />
|-<br />
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"<br />
|-<br />
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Gültige Werte sind ''true'', ''1'' oder ''on''||||<br />
|-<br />
|'''data-reachable'''||Reading, dessen Inhalt angibt, ob das Device erreichbar ist, oder nicht. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||<br />
|-<br />
|'''data-icon'''||Name des Icons im Vordergrund||fa-power-off||<br />
|-<br />
|'''data-background-icon'''||Name des Icons, das als Hintergrund verwendet werden soll||fa-circle-thin||<br />
|-<br />
|'''data-on-color'''||Feste Iconfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||#aa6900||<br />
|-<br />
|'''data-on-background-color'''||Feste Hintergrundfarbe für den Zustand ON, oder '''<device>:<reading>'''||#aa6900||<br />
|-<br />
|'''data-off-color'''||Feste Iconfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||#505050||<br />
|-<br />
|'''data-off-background-color'''||Feste Hintergrundfarbe für den Zustand OFF, oder '''<device>:<reading>'''||#505050||<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
|-<br />
{{FTUI Klasse|height-narrow}}<br />
|}<br />
<br />
==Weitere Möglichkeiten==<br />
Das Push-Widget kann auch dazu verwendet werden, Readings darzustellen. Über '''data-get''' und '''data-get-on''' wird beispielsweise der Kreis (Hintergrund-Icon) eingefärbt. Der Wert des Readings selbst wird dann per [[FTUI_Widget_Label|Label]] angezeigt, welches innerhalb des Push-Widgets platziert wird. Siehe hierzu auch den {{Link2Forum|Topic=66800|LinkText=Hinweis im Forum}}.<br />
<br />
<source lang="html"><br />
<div data-type="push" ...><br />
<div data-type="label" ...></div><br />
</div><br />
</source><br />
<br />
==Beispiele==<br />
===Alle Lampen einschalten===<br />
<br />
<source lang="html"><br />
<div data-type="push" <br />
data-device="LightAll" <br />
data-cmd="trigger" <br />
data-set-on="on"><br />
</div><br />
</source><br />
<br />
===Steuerung hoch/runter (horizontal)===<br />
[[File:Push1.png]]<br />
<br />
<source lang="html"><br />
<div><br />
<div class="doublebox-h"><br />
<div data-type="push" data-device="Rollo" <br />
data-icon="fa-angle-up" data-background-icon="fa-square-o" <br />
data-set-on="up"><br />
</div><br />
<div data-type="push" data-device="Rollo" <br />
data-icon="fa-angle-down" data-background-icon="fa-square-o" <br />
data-set-on="down"><br />
</div><br />
</div><br />
</div><br />
</source><br />
<br />
===Steuerung hoch/runter (vertikal)===<br />
[[File:Push2.png]]<br />
<br />
<source lang="html"><br />
<div><br />
<div class="doublebox-v"><br />
<div data-type="push" data-device="Rollo" <br />
data-icon="fa-chevron-up" data-background-icon="fa-square-o" <br />
data-set-on="up"><br />
</div><br />
<div data-type="push" data-device="Rollo" <br />
data-icon="fa-chevron-down" data-background-icon="fa-square-o" <br />
data-set-on="down"><br />
</div><br />
</div><br />
</div><br />
</source><br />
<br />
===Lampe für 5 Minuten einschalten===<br />
Das Push-Widget zeigt einen einen abnehmenden Kreis, solange der Countdown läuft. Die Dauer wird automatisch aus dem '''on-for-timer'''-Befehl erkannt. Mit '''data-countdown''' kann jedoch auch auch ein eigener Wert angegeben werden.<br />
Wenn das Device ein Dummy ist, muss in diesem das FHEM-Attribut <code>useSetExtensions 1</code> gesetzt werden. Weitere Beispiele für Timer sind [[FTUI_Zeitschaltung|hier]] zu finden.<br />
<br />
[[File:Ftui_widget_push_on-for-timer.png]]<br />
<br />
<source lang="html"><br />
<div data-type="push" data-device="MyLamp" data-set-on="on-for-timer 300" ></div><br />
</source><br />
<br />
===Push-Widget verstecken===<br />
<br />
<source lang="html"><br />
<div class="hbox"><br />
<div class="vbox"><br />
<div data-type="push" data-device="ftuitest" data-set-on="1"></div><br />
<div>on</div><br />
</div><br />
<div class="vbox"><br />
<div data-type="push" data-device="ftuitest" data-set-on="0"></div><br />
<div>off</div><br />
</div><br />
<div class="vbox"><br />
<div data-type="push" data-device="dummy1" data-get="STATE" data-get-on="on" data-hide="ftuitest:STATE" data-hide-on="1" class=""></div><br />
</div><br />
</div><br />
<br />
</source><br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Chart&diff=20978FTUI Widget Chart2017-03-20T16:54:44Z<p>Standarduser: Link zum Forenthread und Attribut data-yticks_prio hinzugefügt</p>
<hr />
<div>Das [[{{PAGENAME}}|Chart Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem sich verschiedenste Diagramme darstellen lassen. Die Aneinanderreihung mehrerer Werte eines Device-Readings zu einem zeitlichen Verlauf wird dabei als Graph bezeichnet.<br />
<br />
Es können beliebige Werte dargestellt und entsprechend der Sinnhaftigkeit, oder persönlichem Geschmack, formatiert werden. Farbe und Form der Linien sind je Graph einstellbar, auch wenn mehrere gleichzeitig in einem Diagramm angezeigt werden.<br />
<br />
Jedes Diagramm kann zwei Y-Achsen besitzen. Die primäre Y-Achse (primary) wird auf der linken Seite angezeigt, die sekundäre Y-Achse (secondary) auf der rechten Seite. Beide Achsen können unterschiedlich formatiert werden.<br />
<br />
<gallery><br />
File:Chart_tabletUI.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
! style="width:150px"|Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||Name des FHEM-Device, das die Aktualisierung des Charts triggert||||data-device="WohnzimmerHeizung"<br />
|-<br />
|'''data-get'''||Reading, das das Update des Diagramms triggert||'STATE'||<br />
|-<br />
|'''data-logdevice'''||Name des Log-Device, das dargestellt werden soll, oder ein Array, um mehrere Werte in einem Diagramm darzustellen||||data-logdevice="FileLog_WohnzimmerHeizung"<br />
|-<br />
|'''data-logfile'''|| Name des Log-Files, aus dem die Daten entnommen werden sollen (oder Array)||'-' = aktuelle Datei||data-logfine="WohnzimmerHeizung-2015.log"<br />
|-<br />
|'''data-columnspec'''||Ermittelt den Wert aus dem Log-File, der angezeigt werden soll (oder Array)||||data-columnspec="4:meas.*"<br />
|-<br />
|'''data-style'''||Stil, wie die Graph-Linien dargestellt werden sollen (z.B. 'SVGplot l0' oder 'ftui l0dash'), oder ein Array, wenn mehrere Linien unterschiedlich dargestellt werden sollen||||<br />
|-<br />
|'''data-ptype'''||Form, wie die Graphen dargestellt werden sollen (z.B. 'lines', 'cubic' oder 'fa-cog'), oder ein Array||'lines'||<br />
|-<br />
|'''data-uaxis'''||Name der Achse, die verwendet werden soll ('primary' = links, oder 'secondary' = rechts), oder ein Array||'primary'||<br />
|-<br />
|'''data-legend'''||Bezeichnung des Graphen (wird in Legende und am Cursor angezeigt), oder ein Array||||<br />
|-<br />
|'''data-minvalue'''||Minimaler Wert, der auf der linken Y-Achse ('primary') angezeigt werden soll. 'auto' = automatische Berechnung||'10'||<br />
|-<br />
|'''data-maxvalue'''||Maximaler Wert, der auf der linken Y-Achse ('primary') angezeigt werden soll. 'auto' = automatische Berechnung||'30'||<br />
|-<br />
|'''data-minvalue_sec'''||Minimaler Wert, der auf der rechten Y-Achse ('secondary') angezeigt werden soll. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-maxvalue_sec'''||Maximaler Wert, der auf der rechten Y-Achse ('secondary') angezeigt werden soll. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-xticks'''||Abstand zwischen den vertikalen Hilfslinien (bezogen auf die X-Achse) in Minuten. 'auto' = automatische Berechnung||'auto'||<br />
|-<br />
|'''data-yticks'''||Abstand zwischen den horizontalen Hilfslinien (bezogen auf die linke Y-Achse). Kann auch ein Array mit Werte-Paaren enthalten, um die Linien mit Text zu beschriften.||'auto'||data-yticks='[[0,"open"],[1,"closed"]]'<br />
|-<br />
|'''data-yticks_sec'''||Abstand zwischen den horizontalen Hilfslinien (bezogen auf die rechte Y-Achse). Kann auch ein Array mit Werte-Paaren enthalten, um die Linien mit Text zu beschriften.||'auto'||data-yticks='[[0,"open"],[1,"closed"]]'<br />
|-<br />
|'''data-yticks_prio'''||Legt fest, ob die horizontalen Hilfslinien der linken (primary) oder der rechten (secondary) Y-Achse zugeordnet werden sollen||||data-yticks='secondary'<br />
|-<br />
|'''data-daysago_start'''||Anzahl der vergangenen Tage, wo das Diagramm beginnen soll. '0' = Beginn heute 0:00 Uhr. Es kann auch ein fixes Datum (z.B. '2013-10-23') angegeben werden. Uhrzeitangaben werden nur berücksichtigt, wenn '''data-nofulldays='true' ''' verwendet wird.||'0'||<br />
|-<br />
|'''data-daysago_end'''||Anzahl der vergangenen Tage, wo das Diagramm enden soll. '-1' = Ende heute 24:00 Uhr. Es kann auch ein fixes Datum (z.B. '2013-10-24') angegeben werden. Uhrzeitangaben werden nur berücksichtigt, wenn '''data-nofulldays='true' ''' verwendet wird.||'-1'||<br />
|-<br />
|'''data-nofulldays'''||Aktiviert/deaktiviert die Rundung der X-Achse auf ganze Tage. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-timeformat'''||Zeitformat für die Anzeige an der X-Achse (siehe Hinweise)||||<br />
|-<br />
|'''data-ytext'''||Text, der neben der linken Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-ytext_sec'''||Text, der neben der rechten Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-yunit'''||Einheit, die an der linken Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-yunit_sec'''||Einheit, die an der rechten Y-Achse angezeigt wird||||<br />
|-<br />
|'''data-crosshair'''||Aktiviert/deaktiviert den Fadenkreuz-Cursor. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-cursorgroup'''||Zahl zur Gruppierung der Werte am Fadenkreuz-Cursor (siehe Hinweise)||||<br />
|-<br />
|'''data-scrollgroup'''||Zahl zur Gruppierung der Graphen beim Bewegen und Zoomen. Alle Linien mit der selben Zahl werden miteinander gekoppelt und bewegen sich gemeinsam.||||<br />
|-<br />
|'''data-showlegend'''||Aktiviert/deaktiviert die Anzeige der Legene. Binärwert ('true' oder 'false')||'false'||<br />
|-<br />
|'''data-legendpos'''||Array von zwei Werten, die die horizontale und vertikale Position der Legende festlegen (siehe Hinweise)||'["top","right"]'||<br />
|-<br />
|'''data-width'''||Breite des Diagramms (in % oder px)||||<br />
|-<br />
|'''data-height'''||Höhe des Diagramms (in % oder px)||||<br />
|-<br />
|'''data-graphsshown'''||Aktiviert/deaktiviert die initiale Anzeige von Graphen. Binärwert ('true' oder 'false'). Array, wenn mehrere Linien angezeigt werden sollen.||||<br />
|-<br />
|'''data-ddd'''||Einstellung für die 3D-Drehung (siehe Hinweise)||||data-ddd='["40","60","0"]'<br />
|-<br />
|'''data-dddspace'''||Abstand zwischen zwei Graphen, wenn die 3D-Anzeige aktiviert wurde (px)||'15'||<br />
|-<br />
|'''data-dddwidth'''||Breite, bzw. Tiefe der Graphen, wenn diese 3-dimensional angezeigt werden (px)||'10'||<br />
|-<br />
|'''data-title'''||Titel, der über dem Diagramm angezeigt werden soll. Der Inhalt kann auch dynamisch erzeugt werden (siehe Hinweise)||||<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|fullsize}}{{FTUI Klasse|noticks}}{{FTUI Klasse|nobuttons}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}<br />
|}<br />
<br />
<br />
Folgende Widget-spezifsche Klassen können zusätzlich in einer eigenen CSS-Datei definiert werden:<br />
<br />
{|class="wikitable"<br />
!Klasse<br />
!Beschreibung<br />
|-<br />
|'''chart-background'''||Hintergrundfarbe des Diagramms<br />
|-<br />
|'''buttons'''||Größe und Farbe der Buttons<br />
|-<br />
|'''text.axes'''||Generelle Schriftart und Farbe der Achsen<br />
|-<br />
|'''gridlines'''||Generelle Farbe und Größe der Gitternetzlinien<br />
|-<br />
|'''xaxis'''||Schriftart, Größe und Farbe der X-Achse<br />
|-<br />
|'''yaxis'''||Schriftart, Größe und Farbe der Y-Achse<br />
|-<br />
|'''xticks'''||Schriftart, Größe und Farbe der X-Achse (Zwischenlinien)<br />
|-<br />
|'''yticks'''||Schriftart, Größe und Farbe der Y-Achse (Zwischenlinien)<br />
|-<br />
|'''crosshair'''||Schriftart, Größe und Vordergrund/Hintergrundfarbe der Momentanwerte am Fadenkreuzcursor<br />
|-<br />
|'''caption'''||Schriftart, Größe und Farbe der Text-Buttons für Legende und Cursor<br />
|-<br />
|'''legend'''||Schriftart, Größe und Farbe der Legende<br />
|}<br />
<br />
Die Standardwerte sind in der Datei <code>css/ftui_chart.css</code> zu finden.<br />
<br />
==Datenquellen==<br />
Beim Chart-Widget können die gleichen Datenquellen genutzt werden, die auch für SVG-Plots verwendet werden können:<br />
# [[FileLog]]: Verlaufsdaten einer Textdatei entnehmen<br />
# [[DbLog]]: Verlaufsdaten einer Datenbank entnehmen<br />
# [[LogProxy]]: Daten dynamisch berechnet<br />
<br />
===FileLog===<br />
Um [[FileLog]] zu nutzen, wird als '''data-logdevice''' das FHEM-Device für das FileLog angegeben. In der Regel entstehen hier im Laufe der Zeit mehrere Log-Dateien. Name und Anzahl sind von der Definition abhängig - meist wird jeden Monat oder jedes Jahr eine neue Datei angelegt. Die gewünschte Datei kann mit '''data-logfile''' ausgewählt werden. Möchte man stets die aktuelle Datei verwenden (macht vor allem dann Sinn, wenn man die neusten Daten anzeigen will), kann das Attribut weggelassen, oder explizit <code>-</code> eingetragen werden. Zuletzt wird '''data-columnspec''' benötigt, um die gewünschten Daten zu in der Logdatei zu identifizieren. Hier wird die Spalte, in der die Daten stehen, gefolgt von Doppelpunkt und Readingname angegeben.<br />
<br />
Für ein Heizungsthermostat von Homematic mit dem Namen ''DG.wz.HZ.Heizungsventil'' ergibt sich somit beispielhaft folgende Definition, um gemessene Temperatur, Sollwert und Ventilstellung im Diagramm darzustellen:<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="FileLog_DG.wz.HZ.Heizungsventil"<br />
data-logfile="-"<br />
data-columnspec='["4:measured-temp","4:desired-temp","4:actuator"]'<br />
...><br />
</div><br />
</source><br />
<br />
Sollen Daten von unterschiedlichen Geräten in einem Diagramm angezeigt werden, muss '''data-logdevice''' als Array nach dem Schema <code>data-logdevice='["<Logdatei_1>","<Logdatei_2>","<Logdatei_3>"]'</code> definiert werden. Für jeden Eintrag in '''data-columnspec''' muss es auch den passenden Eintrag in '''data-logdevice''' geben (auch die Reihenfolge ist relevant).<br />
<br />
===DbLog===<br />
Um die Daten aus [[DbLog]] anzeigen zu können, werden die gleichen Attribute verwendet und mit für die Datenbank angepassten Werten beschrieben. Bei '''data-logdevice''' das FHEM-Device für die Datenbank angegeben. Im nachfolgenden Beispiel heißt diese <code>logdb</code> und besitzt wie üblich zwei Tabellen: <code>current</code> und <code>history</code> (der zeitliche Verlauf liegt in letzterer). Der Tabellenname wird bei '''data-logfile''' eingetragen. Da die Daten in der Datenbank etwas anders abgelegt werden, muss auch '''data-columnspec''' entsprechend angepasst werden. Statt der Spalte wird hier das FHEM-Device, gefolgt von Doppelpunkt und Readingname angegeben.<br />
<br />
Für das oben beschriebene Homematic-Heizungsthermostat ergibt sich dann folgende Definition, um die gleichen Daten aus einer Datenbank, statt einem LogFile zu lesen:<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="logdb"<br />
data-logfile="HISTORY"<br />
data-columnspec='["DG.wz.HZ.Heizungsventil:measured-temp","DG.wz.HZ.Heizungsventil:desired-temp","DG.wz.HZ.Heizungsventil:actuator"]'<br />
...><br />
</div><br />
</source><br />
<br />
Für die Anzeige von unterschiedlichen Geräten in einem Diagramm, muss nur '''data-columnspec''' entsprechend angepasst werden, solange sich alle Daten in der Datenbank befinden.<br />
<br />
===LogProxy===<br />
Um die Daten mittels [[LogProxy]] berechnen und anzeigen zu können, muss in FHEM ein LogProxy-Device definiert sein:<br />
<br />
<pre><br />
define myLogProxy logProxy<br />
</pre><br />
<br />
Weitere Einstellungen am LogProxy sind nicht nötig, die bloße Existenz reicht.<br />
<br />
Bei '''data-logdevice''' wird das FHEM-Device für den LogProxy angegeben. Im nachfolgenden Beispiel heißt dieses <code>myLogProxy</code>. Das Attribut '''data-logfile''' wird für LogProxy nicht benötigt. Befinden sich nur LogProxy-Werte im Diagramm kann das Attribut komplett entfallen. Sollen weitere Werte angezeigt werden, bleibt die Definition im Array einfach leer.<br />
<br />
Im Attribut '''data-columnspec''' wird eine Formel angegeben, wie die Werte berechnet werden sollen. Hier können die Formeln 1:1 von einem eventuell vorhandenen SVG-Plot übernommen werden. '''Dabei gibt es jedoch folgendes zu beachten:''' Befindet sich die Formel in einem Array, dürfen die Formeln keine Anführungszeichen (<code>"</code>) beinhalten. Stattdessen müssen sie als escapter Ascii-Code (<code>\\x22</code>) eingefügt werden.<br />
<br />
Das nachfolgende Beispiel zeigt, wie Vorhersagewerte aus einem FHEM-Device vom Typ Proplanta (Name hier <code>AU.xx.WE.Proplanta</code>) angezeigt werden können.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22temp_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
...><br />
</div><br />
</source><br />
<br />
'''Auch alle anderen Funktionen, die [[LogProxy]] bietet, können hier angewendet werden.'''<br />
<br />
==Hinweise==<br />
===Aktualisierung des Charts===<br />
Damit der Refresh des Charts funktioniert, muss auch ein Device angegeben werden, der das Refresh triggert. Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von '''data-get''' ändert.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="WohnzimmerHeizung"<br />
data-logdevice="FileLog_WohnzimmerHeizung"<br />
...><br />
</div><br />
</source><br />
<br />
===Aussehen der Linien===<br />
Mit dem Attribut '''data-style''' kann das Aussehen der Linien des jeweiligen Graphen verändert werden. Hierfür können die Standard-FHEM-Styles verwendet werden. Dazu wird das Attribut mit <code>SVGplot</code>, gefolgt von einem Leerzeichen und der gewünschten Farbe/Stil befüllt. Es existieren jedoch auch noch weitere, an FTUI angepasste Styles, zu finden in der CSS-Datei <code>css/ftui_chart.css</code>. Um diese zu verwenden, wird das Attribut mit <code>ftui</code>, gefolgt von einem Leerzeichen und der gewünschten Farbe/Stil befüllt. Eigene Styles können zum Beispiel in der Datei <code>css/fhem-table-ui-user.css</code> definiert werden.<br />
<br />
Folgende Übersicht zeigt die im Standard verfügbaren '''Farben''', alle Abbildungen sind mit im FTUI-Style entstanden:<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f0.png|thumb|none|150px|Farbe "l0"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f1.png|thumb|none|150px|Farbe "l1"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f2.png|thumb|none|150px|Farbe "l2"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f3.png|thumb|none|150px|Farbe "l3"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f4.png|thumb|none|150px|Farbe "l4"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f5.png|thumb|none|150px|Farbe "l5"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f6.png|thumb|none|150px|Farbe "l6"]] </li><br />
</ul></div><br />
<br />
Die Angabe zur Farbe kann dann mit der Linienart kombiniert werden. Dazu stehen folgende '''Stile''' zur Verfügung:<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-normal.png|thumb|none|225px|Darstellung in 2D: Stil "normal"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-dot.png|thumb|none|225px|Darstellung in 2D: Stil "dot"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-dash.png|thumb|none|225px|Darstellung in 2D: Stil "dash"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-fill.png|thumb|none|225px|Darstellung in 2D: Stil "fill"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-sym.png|thumb|none|225px|Darstellung in 2D: Stil "sym"]] </li><br />
</ul></div><br />
<br />
<div><ul> <br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-normal.png|thumb|none|225px|Darstellung in 3D: Stil "normal"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-dot.png|thumb|none|225px|Darstellung in 3D: Stil "dot"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-dash.png|thumb|none|225px|Darstellung in 3D: Stil "dash"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-fill.png|thumb|none|225px|Darstellung in 3D: Stil "fill"]] </li><br />
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-sym.png|thumb|none|225px|Darstellung in 3D: Stil "sym"]] </li><br />
</ul></div><br />
<br />
Farbe und Stil werden kombiniert (zusammengeschrieben) beim Attribut '''data-style''' angegeben, sodass sich beispielsweise für eine graue Punktlinie folgendes ergibt: <code>data-style="ftui l1dot"</code>.<br />
Um die Darstellung als normale Linie zu erhalten, darf im Gegensatz zu den anderen Linienformen der Stil <code>normal</code> nicht angegeben werden. Für eine einfache graue Linie ist also die Angabe <code>data-style="ftui l1"</code> korrekt, wohingegen <code>data-style="ftui l1normal"</code> zu einer fehlerhaften Anzeige führt.<br />
<br />
'''Hinweis:''' Der Stil ''sym'' ist speziell dafür geeignet, Symbole statt Linien zu zeichnen. Dazu kann beim Attribut '''data-ptype''' als Linienform ein beliebiges Font-Awsome-, oder Open Automation-Icon angegeben werden. Alle in diesem Abschnitt enthaltenen Abbildungen sind mit <code>data-ptype="lines"</code> entstanden.<br />
<br />
===Form der Linien===<br />
Das Attribut '''data-ptype''' beeinflusst die Form der Linien. Hier sind folgende Werte möglich:<br />
<br />
* <code>lines</code><br />
* <code>steps</code><br />
* <code>fsteps</code><br />
* <code>histeps</code><br />
* <code>bars</code><br />
* <code>ibars</code><br />
* <code>cubic</code><br />
* <code>quadratic</code><br />
* <code>quadraticSmooth</code><br />
<br />
Zusätzlich ist es möglich, Symbole anzeigen zu lassen. Unterstützt werden Font-Awesome ('fa-...'), Open Automation ('oa-...') und FHEM-Symbole ('fs-...')). Damit die Symbole korrekt angezeigt werden, muss im Attribut '''data-style''' der Stil <code>sym</code> gewählt werden, da sonst nur Punkte, statt der Symbole gezeichnet werden.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="DG.wz.HZ.Heizungsventil"<br />
data-logdevice="FileLog_DG.wz.HZ.Heizungsventil"<br />
...<br />
data-style="ftui l1sym"<br />
data-ptype="fa-cog"<br />
...><br />
</div><br />
</source><br />
<br />
Die Größe der Symbole ist in der Datei <code>css/ftui_chart.css</code> auf 12px festgelegt. Dieser Wert kann in einer eigenen CSS-Datei durch Anpassung von <code>stroke-width</code> überschrieben werden.<br />
<br />
<source lang="css"><br />
.ftui.l0sym { stroke:#DDA400; stroke-width:12px; fill:none; }<br />
.ftui.l1sym { stroke:#BBBBBB; stroke-width:12px; fill:none; }<br />
.ftui.l2sym { stroke:#CC0000; stroke-width:12px; fill:none; }<br />
.ftui.l3sym { stroke:#CCCC00; stroke-width:12px; fill:none; }<br />
.ftui.l4sym { stroke:#33CC33; stroke-width:12px; fill:none; }<br />
.ftui.l5sym { stroke:#33CCCC; stroke-width:12px; fill:none; }<br />
.ftui.l6sym { stroke:#3333CC; stroke-width:12px; fill:none; }<br />
</source><br />
<br />
'''data-ptype''' kann auch Inhalt im Format <code>'icon:1'</code> verarbeiten. Dann muss der zugehörige Wert in '''data-columnspec''' den Pfad zu einem Icon (z.B. für Wettervorhersagen) beinhalten. Der Y-Wert wird dann vom ersten Graphen übernommen. Weitere Ausführungen hierzu im Beispiel [[#Darstellung der Wetter Icons im Diagramm]]<br />
<br />
===Zeitformat der X-Achse===<br />
Die Zeitanzeige auf der X-Achse kann sehr flexibel eingestellt werden. Dafür stehen verschiedene Platzhalter zur Verfügung, die durch spezielle Zeichen (<code>-</code>, <code>.</code>, <code>/</code>, <code> </code> (Leerzeichen), <code>:</code>, <code>,</code>, <code>\</code>) getrennt werden. Alle Zeichen werden trotz Escape-Zeichen (<code>\</code>) in der Ausgabe angezeigt.<br />
<br />
Folgende Platzhalter werden unterstützt:<br />
*<code>'mm'</code>: Minuten als zweistellige Zahl<br />
*<code>'hh'</code>: Stunden als zweistellige Zahl<br />
*<code>'dd'</code>: Tag als zweistellige Zahl (Kalenderdatum)<br />
*<code>'MM'</code>: Monat als zweistellige Zahl (z.B. 02 für Februar)<br />
*<code>'MMM'</code>: Monat als dreistellige Abkürzung (z.B. Dec für Dezember)<br />
*<code>'MMMM'</code>: Langname des Monats (z.B. March)<br />
*<code>'ee'</code>: Wochentag als zweistellige Zahl (z.B. 00 für Sonntag)<br />
*<code>'eee'</code>: Wochentag als dreistellige Abkürzung (z.B. Mon für Montag)<br />
*<code>'eeee'</code>: Langname des Wochentags (z.B. Tuesday)<br />
*<code>'yy'</code>: Jahr als zweistellige Zahl (z.B. 16 für 2016)<br />
*<code>'yyyy'</code>: Jahr als vierstellige Zahl (z.B. 2016)<br />
*<code>'LF'</code>: Fügt einen Zeilenumbruch hinzu<br />
<br />
Beispiel: Der String <code>'MMM\LF\yyyy'</code> zeigt <code>'Jan'</code> in der ersten, und <code>'2016'</code> in der zweiten Zeile. <code>'MM.dd 2016'</code> wird zu <code>'03.05 2016'</code>.<br />
<br />
===Fadenkreuz-Cursor===<br />
Der Fadenkreuz-Cursor zeigt die Momentanwerte, indem man ihn über die Graphen bewegt. In Desktop-Browsern reicht einfaches Bewegen des Maus. Unter iOS und Android kann der Cursor wird der Cursor durch einfaches Tippen auf die neue Position bewegt.<br />
<br />
Mit dem Attribut '''data-cursorgroup''' können Graphen gruppiert werden. Am Cursor werden dann die Momentanwerte aller Graphen gleichzeitig angezeigt, die die selbe Zahl besitzen, sobald man die Maus über einen aus der Gruppe bewegt.<br />
<br />
===Legende===<br />
Mit dem Attribut '''data-legendpos''' kann die Position der Legende innerhalb des Diagramms festgelegt werden. Die Position wird mit einem Array, bestehend aus zwei Werten im Format <code>'["<horizontal>","<vertikal>"]'</code> angegeben. Für die horizontale Positionierung sind <code>'left'</code> und <code>'right'</code>, die vertikale Positionierung <code>'top'</code> und <code>'bottom'</code> erlaubt. Alternativ können auch Zahlen verwendet werden, die die Position in Prozent angeben. Durch verschieben mit der Maus oder durch verschieben mit dem Finger oder Stift auf Touch Devices kann die Legende auch an eine andere Position verschoben werden.<br />
<br />
Wenn die Legende eingeblendet ist, kann mittels Klick auf einen Legendeneintrag der zugehörige Graph ein- und ausgeblendet werden.<br />
<br />
===3-dimensionale Drehung===<br />
'''data-ddd''' ermöglicht, den Graphen 3-dimensional zu drehen. Als Wert wird ein Array mit den 3 Winkeln für x, y und z erwartet, wobei z selbst bisher nicht unterstützt wird.<br />
<br />
Beispiel: <code>data-ddd='["40","60","0"]'</code>. <br />
<br />
Wenn der 3D Modus aktiv ist ('''data-ddd''' gesetzt) sind 2 zusätzliche Parameter verfügbar um das Aussehen der Graphen zu beeinflussen. '''data-dddspace''' gibt an, wie viele pixel der Raum zwischen den einzelnen in z-Richtung hintereinander angeordneten Graphen betragen soll.<br />
'''data-dddwidth''' legt fest, wie viele pixel die einzelnen Graphen tief (oder dick) sein sollen.<br />
<br />
Wenn das Array angegeben wird, erscheinen zwei zusätzliche Buttons im Diagramm, mit denen die Drehung in X- und Y-Richtung verändert werden kann.<br />
<br />
===Diagrammtitel===<br />
Mit dem Attribut '''data-title''' kann dem Diagramm, ähnlich wie in FHEM-SVG-Plots, ein Titel hinzugefügt werden.<br />
<br />
Folgende Platzhalter werden unterstützt:<br />
*<code>'min1'</code>: Minimaler Y-Wert des ersten Graphs<br />
*<code>'max1'</code>: Maximaler Y-Wert des ersten Graphs<br />
*<code>'avg1'</code>: Mittlerer Y-Wert des ersten Graphs<br />
*<code>'cnt1'</code>: Anzahl der dargestellten Einzelwerte im ersten Graph<br />
*<code>'currval1'</code>: Letzter, bzw. aktuellster Y-Wert des ersten Graphs<br />
*<code>'mindate1'</code>: Niedrigster Wert auf der X-Achse des ersten Graphs<br />
*<code>'maxdate1'</code>: Höchster Wert auf der X-Achse vom ersten Graphs<br />
*<code>'currdate1'</code>: Letzter, bzw. aktuellster Wert auf der X-Achse des ersten Graphs<br />
<br />
Durch Einsetzen einer anderen Zahl statt '1' können auch die Werte der anderen Graphen angezeigt werden. Das Weglassen der Zahl bewirkt, dass der jeweils zutreffende Wert automatisch ermittelt wird. Bedeutet: <code>max</code> führt dazu, dass der höchste Wert aller angezeigter Graphen verwendet wird.<br />
<br />
Beispiel: <code>data-title="Min: $data{mindate4}, Max: $data{maxdate4}, Last: $data{currdate4}"</code><br />
<br />
===Buttons im Diagramm===<br />
Es gibt mehrere Buttons, mit denen sich die Anzeige des Diagramms verändern lässt. <code><-</code> und <code>-></code> bewegen die Graphen nach links und rechts. <code>+</code> und <code>-</code> zoomen die Anzeige. <code>legend</code> und <code>cursor</code> schalten die zugehörigen Anzeigen ein und aus.<br />
<br />
==Beispiele==<br />
===Einfaches Diagramm===<br />
Das Beispiel zeigt ein einfaches Diagramm mit 4 unterschiedlich formatierten Graphen, Legende und Momentanwerten am Fadenkreuz-Cursor.<br />
<br />
[[File:Chart_tabletUI.png]]<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'<br />
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'<br />
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'<br />
data-ptype='["lines","histeps","histeps","cubic"]'<br />
data-uaxis='["primary","secondary","secondary","primary"]'<br />
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'<br />
data-yunit="°C"<br />
data-ytext="Temperature"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-yunit_sec="mm"<br />
data-ytext_sec="Rain (mm)"<br />
data-height="250"<br />
data-yticks="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-nofulldays="true"<br />
data-daysago_start="2013-08-13T00:00:00"<br />
data-daysago_end="2013-08-14T00:00:00"<br />
data-cursorgroup="1"<br />
data-scrollgroup="1"<br />
data-xticks="auto"><br />
</div><br />
</source><br />
<br />
===7-Tage-Wettervorhersage mit Proplanta===<br />
In diesem Beispiel wird gezeigt, wie die Vorhersagewerte von [[PROPLANTA]] in einem Diagramm dargestellt werden können. Da die Werte nicht in einer Datenbank oder einem FileLog vorliegen, müssen sie über [[LogProxy]] verarbeitet werden. Dafür sind einige Vorbereitungen in FHEM nötig.<br />
<br />
[[File:FTUI_Widget_Chart-fc-Proplanta.png|941px]]<br />
<br />
'''1.''' Ein LogProxy-Device muss vorhanden sein:<br />
<pre><br />
define myLogProxy logProxy<br />
</pre><br />
<br />
'''2.''' In der Datei <code>99_myUtils.pm</code> muss folgende Routine hinzugefügt werden, die die Daten bereitstellt:<br />
<source lang="perl"><br />
#---------------------------------------<br />
# Proplanta LogProxy-Funktion<br />
#---------------------------------------<br />
sub logProxy_proplanta2Plot($$$$;$$) {<br />
my ($device, $fcValue, $from, $to, $fcHour, $expMode) = @_;<br />
my $regex;<br />
my @rl;<br />
<br />
return undef if(!$device);<br />
<br />
if($fcValue =~ s/_$//) {<br />
$regex = "^fc[\\d]+_".$fcValue."[\\d]{2}\$";<br />
}<br />
else {<br />
$regex = "^fc[\\d]+_".$fcValue."\$";<br />
}<br />
<br />
$fcHour = 12 if(!defined $fcHour);<br />
$expMode = "point" if(!defined $expMode);<br />
<br />
if( defined($defs{$device}) ) {<br />
if( $defs{$device}{TYPE} eq "PROPLANTA" ) {<br />
@rl = sort{<br />
my ($an) = ($a =~ m/fc(\d+)_.*/);<br />
my ($bn) = ($b =~ m/fc(\d+)_.*/);<br />
$an <=> $bn or $a cmp $b;<br />
}( grep /${regex}/,keys %{$defs{$device}{READINGS}} );<br />
return undef if( !@rl );<br />
} else {<br />
Log3 undef, 2, "logProxy_proplanta2Plot: $device is not a PROPLANTA device";<br />
return undef;<br />
}<br />
}<br />
<br />
my $fromsec = SVG_time_to_sec($from);<br />
my $tosec = SVG_time_to_sec($to);<br />
my $sec = $fromsec;<br />
my ($h,$fcDay,$mday,$mon,$year);<br />
my $timestamp;<br />
<br />
my $reading;<br />
my $value;<br />
my $prev_value;<br />
my $min = 999999;<br />
my $max = -999999;<br />
my $ret = "";<br />
<br />
# while not end of plot range reached<br />
while(($sec < $tosec) && @rl) {<br />
#remember previous value for start of plot range<br />
$prev_value = $value;<br />
<br />
$reading = shift @rl;<br />
($fcDay) = $reading =~ m/^fc(\d+).*/;<br />
$h = ($reading =~ m/.*(\d\d)$/)?$1:$fcHour;<br />
$value = ReadingsVal($device,$reading,undef);<br />
<br />
($mday,$mon,$year) = split('\.',ReadingsVal($device,"fc".$fcDay."_date",undef));<br />
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, $h, 0, 0);<br />
$sec = SVG_time_to_sec($timestamp);<br />
<br />
# skip all values before start of plot range<br />
next if( SVG_time_to_sec($timestamp) < $fromsec );<br />
<br />
# add first value at start of plot range<br />
if( !$ret && $prev_value ) {<br />
$min = $prev_value if( $prev_value < $min );<br />
$max = $prev_value if( $prev_value > $max );<br />
$ret .= "$from $prev_value\n";<br />
}<br />
<br />
# done if after end of plot range<br />
last if($sec > $tosec);<br />
<br />
$min = $value if( $value < $min );<br />
$max = $value if( $value > $max );<br />
<br />
# add actual controll point<br />
$ret .= "$timestamp $value\n";<br />
<br />
# Log 1, "$timestamp $value -0- $reading";<br />
}<br />
if(($sec < $tosec) && !@rl && ($expMode eq "day")) {<br />
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, 23, 59, 59);<br />
if(SVG_time_to_sec($timestamp) < $tosec) {<br />
$ret .= "$timestamp $value\n";<br />
}<br />
else {<br />
$ret .= "$to $value\n";<br />
}<br />
}<br />
elsif(($sec > $tosec) && ($expMode eq "day")) {<br />
$value = $prev_value + ($value - $prev_value)*(86400 + ($tosec - $sec))/86400;<br />
$ret .= "$to $value\n";<br />
}<br />
return ($ret,$min,$max,$prev_value);<br />
}<br />
</source><br />
<br />
Anschließend können die Daten im Chart-Widget angezeigt werden. Der Device-Name von Proplanta heißt hier im Beispiel <code>AU.xx.WE.Proplanta</code>.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"<br />
]'<br />
data-style='[<br />
"ftui l6fill",<br />
"ftui l5fill",<br />
"ftui l1fill"<br />
]'<br />
data-ptype='[<br />
"steps",<br />
"quadraticSmooth",<br />
"quadraticSmooth"<br />
]'<br />
data-uaxis='[<br />
"primary",<br />
"secondary",<br />
"secondary"<br />
]'<br />
data-legend='[<br />
"Regen",<br />
"Regenwahrscheinlichkeit",<br />
"Wolken"<br />
]'<br />
data-yunit="mm"<br />
data-ytext="Regen"<br />
data-yunit_sec="%"<br />
data-ytext_sec="Chance auf Regen / Wolken"<br />
data-timeformat="eeee"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-daysago_start = "0"<br />
data-daysago_end = "-7"<br />
data-xticks="1440"<br />
data-yticks="auto"<br />
data-title="7-Tage-Wettervorhersage"<br />
data-showlegend="true"<br />
class="nobuttons fullsize"><br />
</div><br />
</source><br />
<br />
'''Hilfreiche Links und Quellen zu diesem Beispiel:'''<br />
*[[LogProxy|LogProxy im FHEM-Wiki]]<br />
*{{Link2Forum|Topic=22967|Message=246973|LinkText=Stundengenaue Wettervorhersage (#1) im FHEM-Forum}}<br />
*{{Link2Forum|Topic=22967|Message=334713|LinkText=Stundengenaue Wettervorhersage (#2) im FHEM-Forum}}<br />
<br />
===Darstellung der Wetter Icons im Diagramm===<br />
<br />
[[File:Wetterchart2.png]]<br />
<br />
Wie oben bereits beschrieben, gibt es beim Chart grundsätzlich die Möglichkeit, Icons, welche in Form von URLs in den Logs abgelegt sind oder welche per logProxy generiert werden, darzustellen. Die Icons werden auf genau dem gleichen Weg von FHEM gelesen, wie alle anderen Datenpunkte. Im Folgenden wird ein Beispiel gezeigt, mit dem die im Proplanta Modul als Readings abgelegten Icons per logProxy Funktion gelesen und in ein Chart eingebaut werden könnnen.<br />
Da es beim Proplanta Modul für die ersten 7 Tage nicht das Reading <code>fc#_weatherIcon</code> gibt, sondern mehrere Readings für unterschiedliche Tageszeiten wogegen für die zweiten 7 Tage ausschließlich das Reading <code>fc#_weatherIcon</code> vorhanden ist, sollte per <code>attr device userReading</code> mit folgendem Eintrag dafür gesorgt werden, dass für alle Tage ein Reading <code>fc#_weatherIcon</code> vorhanden ist (alternativ könnten auch 2 Graphen gezeichnet werden, wobei der erste dann nur die ersten 7 Tage enthält und der zweite die letzen 7 Tage, will man nur die ersten 7 Tage darstellen braucht man das userReading nicht unbedingt).<br />
<source lang="perl"><br />
fc0_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc0_weatherDayIcon","");},<br />
fc1_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc1_weatherDayIcon","");},<br />
fc2_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc2_weatherDayIcon","");},<br />
fc3_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc3_weatherDayIcon","");},<br />
fc4_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc4_weatherDayIcon","");},<br />
fc5_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc5_weatherDayIcon","");},<br />
fc6_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc6_weatherDayIcon","");}<br />
</source><br />
Um die Icons darzustellen muss ein zusätzlicher Graph definiert werden. Dieser nutzt neben der Columnspec, die die URLs abruft den Parameter <code>data-ptype="icons:#"</code> (# ist eine Zahl und steht für die Nummer, beginnend bei 0 des Graphen, welcher für die y-Position der Icons verwendet werden soll) und den Stil <code>sym</code>. Der Wert für die Symbolgröße sollte z.B. durch eine zusätzliche Definition im File fhem-tablet-ui-user.css in der Form:<br />
<source lang="css"><br />
/* icon lines */<br />
.ftui.l99icon { stroke:#DDA400; stroke-width:48px; fill:none; }<br />
</source><br />
angepasst werden.<br />
<br />
Im folgenden ein Beispiel, welches eine Linie für die Maximale Tagestemperatur zeichnet und auf dieser Linie die Wetter Icons darstellt.<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="AU.xx.WE.Proplanta"<br />
data-logdevice='[<br />
"myLogProxy",<br />
"myLogProxy"<br />
]'<br />
data-columnspec='[<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",<br />
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22tempMax\\x22,$from,$to,12,\\x22day\\x22)",<br />
]'<br />
data-style='[<br />
"ftui l99icon",<br />
"ftui l1fill"<br />
]'<br />
data-ptype='[<br />
"icons:1",<br />
"quadraticSmooth"<br />
]'<br />
data-uaxis='[<br />
"primary",<br />
"primary"<br />
]'<br />
data-legend='[<br />
"Wetterbedingung",<br />
"Max. Temperature"<br />
]'<br />
data-yunit="°C"<br />
data-ytext="Temperature (°C)"<br />
data-timeformat="ee\LF\dd.MM"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-daysago_start="-1w"<br />
data-y_margin="20"<br />
data-daysago_end="-3w"<br />
data-xticks="1440"<br />
data-yticks="auto"<br />
data-title="14-Tage-Wettervorhersage"<br />
data-showlegend="true"<br />
class="nobuttons fullsize"><br />
</div><br />
</source><br />
<br />
===Fensterstatus offen/geschlossen===<br />
Dieses Beispiel zeigt, wie ein Fensterkontakt, dessen Reading die Werte <code>closed</code> und <code>open</code> einnimmt, als Graph gezeichnet werden kann. Technisch gesehen werden hier die Werte <code>0</code> und <code>1</code> gezeichnet, indem über das Attribut '''data-columnspec''' dem Zustand <code>open</code> der Wert <code>1</code> und allen anderen Zuständen der Wert <code>0</code> zugeordnet wird. Über das Attribut '''data-yticks''' wird die Beschriftung an der Y-Achse (<code>0</code> und <code>1</code>) gegen einen frei definierbaren Text ausgetauscht.<br />
<br />
<source lang="html"><br />
<div data-type="chart"<br />
data-device="wz_fensterstatus"<br />
data-logdevice='["myDbLog"]'<br />
data-logfile='["HISTORY"]'<br />
data-columnspec='["wz_fensterstatus:state:0::$val=($val=~\\x22open\\x22?1:0)"]'<br />
data-style='["ftui l4fill"]'<br />
data-ptype='["steps"]'<br />
data-height="290"<br />
data-yticks='[[0,"geschlossen"],[1,"offen"]]'<br />
data-minvalue="0"<br />
data-maxvalue="1.1"<br />
data-nofulldays="true"<br />
data-daysago_start="1"<br />
data-daysago_end="-1"<br />
data-cursorgroup="1"<br />
data-scrollgroup="1"><br />
</div><br />
</source><br />
<br />
==Links==<br />
{{Link2Forum|Topic= 48450 |Message=401006|LinkText=Thread im FHEM-Forum}}<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Colorwheel&diff=20964FTUI Widget Colorwheel2017-03-19T21:23:24Z<p>Standarduser: /* Alternativen */</p>
<hr />
<div>Das [[{{PAGENAME}}|Colorwheel Widget]] ist ein Widget für [[FHEM Tablet UI]], welches eine Farbpalette für die Auswahl von Farben erstellt.<br />
<br />
<gallery><br />
File:FTUI_Widget_Colorwheel_01.png<br />
File:FTUI_Widget_Colorwheel_02.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, dessen Readings gelesen/geändert werden sollen||||<br />
|-<br />
|'''data-get'''||Name des Readings, das den darzustellenden RGB-Wert enthält||STATE||data-get="rgb"<br />
|-<br />
|'''data-set'''||Name des Reading, welches geändert werden soll||||data-set="rgb"<br />
|-<br />
|'''data-cmd'''||Name des Befehls, mit dem das Reading geändert wird (z.B. setstate, set, setreading, trigger)||set||<br />
|-<br />
|'''data-width'''||Breite des Widgets||150||data-width="200"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|lineIndicator}}{{FTUI Klasse|barIndicator}}{{FTUI Klasse|roundIndicator}}<br />
|}<br />
<br />
==Beispiele==<br />
===Einfache Palette===<br />
<source lang="html"><br />
<div data-type="colorwheel"<br />
data-device="HUEDevice3"<br />
data-get="rgb"<br />
data-set="rgb"></div><br />
</source><br />
[[File:FTUI_Widget_Colorwheel_01.png]]<br />
<br />
<br />
===Mit Farbindikatoren===<br />
Im Bild sind die Auswirkungen der unterschiedlichen "Indicator"-Klassen zu sehen. Von links nach rechts: ''lineIndicator'', ''barIndicator'', ''roundIndicator''.<br />
<source lang="html"><br />
<div data-type="colorwheel"<br />
data-device="HUEDevice3"<br />
data-get="rgb"<br />
data-set="rgb"<br />
class="lineIndicator"></div><br />
</source><br />
[[File:FTUI_Widget_Colorwheel_02.png]]<br />
<br />
==Alternativen==<br />
Das Colorwheel ist zwar ziemlich genau, was die Einstellmöglichkeiten betrifft, erfordert jedoch auch eine erhöhte Aufmerksamkeit des Nutzers. Für einfachere Anwendungen kann vielleicht auch ein [[FTUI_Widget_Volume|Volume-Widget]] zur Farbauswahl dienen.<br />
<br />
==Weblinks==<br />
*[https://knowthelist.github.io/fhem/tablet/demo_colorwheel.html Weitere Beispiele]<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Colorwheel&diff=20963FTUI Widget Colorwheel2017-03-19T21:23:05Z<p>Standarduser: Hinweis auf Volume-Widget als Alternative hinzugefügt.</p>
<hr />
<div>Das [[{{PAGENAME}}|Colorwheel Widget]] ist ein Widget für [[FHEM Tablet UI]], welches eine Farbpalette für die Auswahl von Farben erstellt.<br />
<br />
<gallery><br />
File:FTUI_Widget_Colorwheel_01.png<br />
File:FTUI_Widget_Colorwheel_02.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, dessen Readings gelesen/geändert werden sollen||||<br />
|-<br />
|'''data-get'''||Name des Readings, das den darzustellenden RGB-Wert enthält||STATE||data-get="rgb"<br />
|-<br />
|'''data-set'''||Name des Reading, welches geändert werden soll||||data-set="rgb"<br />
|-<br />
|'''data-cmd'''||Name des Befehls, mit dem das Reading geändert wird (z.B. setstate, set, setreading, trigger)||set||<br />
|-<br />
|'''data-width'''||Breite des Widgets||150||data-width="200"<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|lineIndicator}}{{FTUI Klasse|barIndicator}}{{FTUI Klasse|roundIndicator}}<br />
|}<br />
<br />
==Beispiele==<br />
===Einfache Palette===<br />
<source lang="html"><br />
<div data-type="colorwheel"<br />
data-device="HUEDevice3"<br />
data-get="rgb"<br />
data-set="rgb"></div><br />
</source><br />
[[File:FTUI_Widget_Colorwheel_01.png]]<br />
<br />
<br />
===Mit Farbindikatoren===<br />
Im Bild sind die Auswirkungen der unterschiedlichen "Indicator"-Klassen zu sehen. Von links nach rechts: ''lineIndicator'', ''barIndicator'', ''roundIndicator''.<br />
<source lang="html"><br />
<div data-type="colorwheel"<br />
data-device="HUEDevice3"<br />
data-get="rgb"<br />
data-set="rgb"<br />
class="lineIndicator"></div><br />
</source><br />
[[File:FTUI_Widget_Colorwheel_02.png]]<br />
<br />
==Alternativen==<br />
Das Colorwheel ist zwar zum Einen ziemlich genau, was die Einstellmöglichkeiten betrifft, erfordert jedoch auch eine erhöhte Aufmerksamkeit des Nutzers. Für einfachere Anwendungen kann vielleicht auch ein [[FTUI_Widget_Volume|Volume-Widget]] zur Farbauswahl dienen.<br />
<br />
==Weblinks==<br />
*[https://knowthelist.github.io/fhem/tablet/demo_colorwheel.html Weitere Beispiele]<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Volume&diff=20961FTUI Widget Volume2017-03-19T21:18:53Z<p>Standarduser: Beispiel Farbauswahl für Beleuchtung hinzugefügt</p>
<hr />
<div>Das [[{{PAGENAME}}|Volume Widget]] ist ein Widget für [[FHEM Tablet UI]], das eine Einstellscheibe zur Änderung eines einzelnen Wertes zur Verfügung stellt.<br />
<br />
<gallery><br />
File:FTUI_Widget_Volume_01.png<br />
File:FTUI_widget_volume-rgb.png<br />
</gallery><br />
<br />
==Attribute==<br />
Für das Volume-Widget gelten alle Attribute des [[FTUI Widget Knob|Knob-Widgets]]. Und zusätzlich die folgenden:<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-get'''||Name des Readings, das den darzustellenden Wert enthält||STATE||data-get="volume"<br />
|-<br />
|'''data-set'''||Name des Readings, dessen Wert geändert werden soll||||data-set="volume"<br />
|-<br />
|'''data-cmd'''||Name des Befehls, mit dem das Reading geändert wird (z.B. setstate, set, setreading, trigger)||set||<br />
|-<br />
|'''data-get-value'''||[[Regulärer Ausdruck|RegEx]] oder Position des Wertes in einer leerzeichen-getrennten Textzeile, mit der der Wert erhalten werden kann||-1 -> alles anzeigen||<br />
|-<br />
|'''data-set-value'''||Format des Wertes, wie er an FHEM gesendet werden soll||$v (nur der Wert)||<br />
|-<br />
|'''data-min'''||Mindestwert, der gesetzt werden kann||0||data-min="10"<br />
|-<br />
|'''data-max'''||Maximalwert, der gesetzt werden kann||70||data-max="100"<br />
|-<br />
|'''data-tickstep'''||Abstand zwischen den einzelnen Schritten||4/20||data-tickstep="1"<br />
|-<br />
|'''data-unit'''||Einheit zum gewünschten Wert hinzufügen||||<nowiki>data-unit="&deg"</nowiki><br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|hue-tick}}{{FTUI Klasse|hue-front}}{{FTUI Klasse|hue-back}}{{FTUI Klasse|dim-tick}}{{FTUI Klasse|dim-front}}{{FTUI Klasse|dim-back}}{{FTUI Klasse|readonly}}<br />
|}<br />
<br />
==Beispiele==<br />
===Lautstärke===<br />
<source lang="html"><br />
<div data-type="volume"<br />
data-device="AVReceiver"<br />
data-get="volume"<br />
data-set="volume"></div><br />
</source><br />
[[Datei:FTUI Widget Volume 01.png]]<br />
<br />
===Farbauswahl für Beleuchtung===<br />
<source lang="html"><br />
<div data-type="volume"<br />
data-device="WZ.Deckenlampe"<br />
data-get="hue"<br />
data-set="hue"<br />
data-min="0"<br />
data-max="65353"<br />
class="hue-tick hue-front small top-space-2x"><br />
</div><br />
</source><br />
[[Datei:FTUI_widget_volume-rgb.png]]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=Datei:FTUI_widget_volume-rgb.png&diff=20960Datei:FTUI widget volume-rgb.png2017-03-19T21:16:21Z<p>Standarduser: </p>
<hr />
<div></div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Thermostat&diff=20662FTUI Widget Thermostat2017-03-09T18:57:32Z<p>Standarduser: /* Attribute */</p>
<hr />
<div>Das [[{{PAGENAME}}|Thermostat Widget]] ist ein Widget für [[FHEM Tablet UI]] welches ähnlich wie das [[FTUI Widget Knob|Knob-Widget]] ist, aber für Heizungsthermostate optimiert wurde. Es zeigt eine Skala, um die gewünschte Temperatur einzustellen, sowie die aktuelle Temperatur an.<br />
<br />
<gallery><br />
File:FTUI_Widget_Thermostat_01.png<br />
File:FTUI_Widget_Thermostat_02.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-get'''||Name des Readings, welches die gewünschte Temperatur enthält||desired-temp||<br />
|-<br />
|'''data-set'''||Name des Readings, mit dem die gewünschte Temperatur gesetzt wird||desired-temp||<br />
|-<br />
|'''data-temp'''||Name des Readings, welches die aktuelle Temperatur enthält||measured-temp||<br />
|-<br />
|'''data-valve'''||Name des Readings, das die Ventilstellung des Thermostates anzeigt||||data-valve="ValvePosition"<br />
|-<br />
|'''data-get-value'''||[[Regulärer Ausdruck|RegEx]] oder Stelle der Ventilposition in einer leerstellen-getrennten Zeile||-1 -> alles anzeigen||data-get-value="2"<br />
|-<br />
|'''data-mode'''||Name des Readings für die Modi (auto, manual, etc.) des Thermostates||||data-mode="controlMode"<br />
|-<br />
|'''data-min'''||Mindesttemperatur, die gesetzt werden kann||10||data-min="5"<br />
|-<br />
|'''data-max'''||Höchsttemperatur, die gesetzt werden kann||30||data-max="25"<br />
|-<br />
|'''data-step'''||Abstufung, in der die Temperatur gesetzt werden kann||1||data-step="0.5"<br />
|-<br />
|'''data-off'''||Wert, der gesendet werden muss, um das Thermostat abzuschalten||||data-off="5"<br />
|-<br />
|'''data-boost'''||Wert, der gesendet werden muss, um das Thermostat in den Boost-Modus zu bringen||||data-boost="30.5"<br />
|-<br />
|'''data-height'''||Höhe des Widgets||100||data-height="80"<br />
|-<br />
|'''data-width'''||Breite des Widgets||100||data-width="120"<br />
|-<br />
|'''data-touch-height'''||Höhe des Widgets während Änderungen||data-height||data-touch-height="200"<br />
|-<br />
|'''data-touch-width'''||Breite des Widgets während Änderungen||data-width||data-touch-width="200"<br />
|-<br />
|'''data-touch-position'''||Position des Wertes während Änderungen||left||data-touch-position="left"<br />
|-<br />
|'''data-hdcolor'''||Farbe des Einstellhebels||#666||data-hdcolor="green"<br />
|-<br />
|'''data-fgcolor'''||Farbe des geriffelten Hintergrundes (Teilstriche)||#666||<br />
|-<br />
|'''data-bgcolor'''||Farbe des geriffelten Hintergrundes (Flächen zwischen den Teilstrichen)||keine||<br />
|-<br />
|'''data-mincolor'''||Farbe am unteren Ende des Einstellbereiches||#4477ff||<br />
|-<br />
|'''data-maxcolor'''||Farbe am oberen Ende des Einstellbereiches||#ff0000||<br />
|-<br />
|'''data-thickness'''||Dicke des Einstellbereiches||0.25||<br />
|-<br />
|'''data-anglearc'''||Reichweite der Anzeige auf einem Kreis in Grad||240||data-anglearc="360"<br />
|-<br />
|'''data-angleoffset'''||Bestimmt die Position auf der Kreisform, auf dem die Statusanzeige beginnen soll||-120||data-angleoffset="0"<br />
|-<br />
|'''data-font'''||Schriftart des Wertes||||<br />
|-<br />
|'''data-font-weight'''||Dicke der Schrift||||<br />
|-<br />
|'''data-unit'''||Einheit, die zum Wert hinzugefügt werden soll||||<nowiki>data-unit="&deg;"</nowiki><br />
|-<br />
|'''data-lock'''||Reading, welches den booleanschen Wert (1,true,on) enthält um das Widget auf readonly zu setzen||||<br />
|}<br />
<br />
==Hinweise==<br />
* Wenn beim MAX! Wand-Thermostat der Wert ''auto'' für ''data-mode'' empfangen wird, wird folgender Befehl generiert: <code>set wz_WandThermostat desiredTemperature auto</code>. Andere Werte erzeugen Befehle wie <code>set wz_WandThermostat desiredTemperature</code><br />
* Als ''data-device'' muss das Device angegeben werden, welches gewünschte und aktuelle Temperatur liefert. Bei HomeMatic Thermostaten ist das z.B. HM_XXXXXX_Clima<br />
* Das Widget zeigt die Ventilposition nur an, wenn ''data-valve'' explizit definiert wurde.<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|readonly}}<br />
|}<br />
<br />
==Beispiele==<br />
===HomeMatic HM-CC-RT-DN===<br />
Da die Standardwerte für ''data-get'', ''data-temp'' und ''data-set'' schon den benötigten Werten für ein [[HM-CC-RT-DN Funk-Heizkörperthermostat]] entsprechen, reicht eine ganz einfache Code-Zeile.<br />
<source lang="html"><br />
<div data-type="thermostat" data-device="HM_302111_Clima"></div><br />
</source><br />
<br />
Das entspricht in diesem Fall der längeren Version:<br />
<source lang="html"><br />
<div data-type="thermostat" <br />
data-device="HM_302111_Clima" <br />
data-get="desired-temp" <br />
data-temp="measured-temp"><br />
</div><br />
</source><br />
[[File:FTUI_Widget_Thermostat_01.png]]<br />
<br />
===MAX! Thermostat===<br />
<source lang="html"><br />
<div data-type="thermostat"<br />
data-device="HZ_Tuer" <br />
data-valve="valveposition" <br />
data-get="desiredTemperature" <br />
data-temp="temperature" <br />
data-set="desiredTemperature"><br />
</div><br />
</source><br />
[[File:FTUI_Widget_Thermostat_01.png]]<br />
<br />
===Mit Off- und Boost-Funktion===<br />
Hier ein Beispiel, mit dem das Thermostat aus-, oder die Boost-Funktion eingeschaltet werden kann. Um Auszuschalten muss der Zeiger auf die Mindestposition gezogen werden. Um die Boost-Funktion zu aktivieren, auf die Maxmimalposition.<br />
<source lang="html"><br />
<div data-type="thermostat"<br />
data-device="HM_302111_Clima"<br />
data-valve="ValvePosition"<br />
data-min="5"<br />
data-off="off" <br />
data-max="31"<br />
data-boost="31"><br />
</div><br />
</source><br />
[[File:FTUI_Widget_Thermostat_02.png]]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Thermostat&diff=20661FTUI Widget Thermostat2017-03-09T18:47:05Z<p>Standarduser: /* Attribute */ Einige Attribute ergänzt</p>
<hr />
<div>Das [[{{PAGENAME}}|Thermostat Widget]] ist ein Widget für [[FHEM Tablet UI]] welches ähnlich wie das [[FTUI Widget Knob|Knob-Widget]] ist, aber für Heizungsthermostate optimiert wurde. Es zeigt eine Skala, um die gewünschte Temperatur einzustellen, sowie die aktuelle Temperatur an.<br />
<br />
<gallery><br />
File:FTUI_Widget_Thermostat_01.png<br />
File:FTUI_Widget_Thermostat_02.png<br />
</gallery><br />
<br />
==Attribute==<br />
Für das Thermostat-Widget gelten dieselben Attribute, wie für das [[FTUI Widget Knob|Knob-Widget]]. Und zusätzlich noch die folgenden:<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-get'''||Name des Readings, welches die gewünschte Temperatur enthält||desired-temp||<br />
|-<br />
|'''data-set'''||Name des Readings, mit dem die gewünschte Temperatur gesetzt wird||desired-temp||<br />
|-<br />
|'''data-temp'''||Name des Readings, welches die aktuelle Temperatur enthält||measured-temp||<br />
|-<br />
|'''data-valve'''||Name des Readings, das die Ventilstellung des Thermostates anzeigt||||data-valve="ValvePosition"<br />
|-<br />
|'''data-get-value'''||[[Regulärer Ausdruck|RegEx]] oder Stelle der Ventilposition in einer leerstellen-getrennten Zeile||-1 -> alles anzeigen||data-get-value="2"<br />
|-<br />
|'''data-mode'''||Name des Readings für die Modi (auto, manual, etc.) des Thermostates||||data-mode="controlMode"<br />
|-<br />
|'''data-min'''||Mindesttemperatur, die gesetzt werden kann||10||data-min="5"<br />
|-<br />
|'''data-max'''||Höchsttemperatur, die gesetzt werden kann||30||data-max="25"<br />
|-<br />
|'''data-step'''||Abstufung, in der die Temperatur gesetzt werden kann||1||data-step="0.5"<br />
|-<br />
|'''data-off'''||Wert, der gesendet werden muss, um das Thermostat abzuschalten||||data-off="5"<br />
|-<br />
|'''data-boost'''||Wert, der gesendet werden muss, um das Thermostat in den Boost-Modus zu bringen||||data-boost="30.5"<br />
|-<br />
|'''data-height'''||Höhe des Widgets||100||data-height="80"<br />
|-<br />
|'''data-width'''||Breite des Widgets||100||data-width="120"<br />
|-<br />
|'''data-touch-height'''||Höhe des Widgets während Änderungen||data-height||data-touch-height="200"<br />
|-<br />
|'''data-touch-width'''||Breite des Widgets während Änderungen||data-width||data-touch-width="200"<br />
|-<br />
|'''data-touch-position'''||Position des Wertes während Änderungen||left||data-touch-position="left"<br />
|-<br />
|'''data-hdcolor'''||Farbe des Einstellhebels||#666||data-hdcolor="green"<br />
|-<br />
|'''data-fgcolor'''||Farbe des geriffelten Hintergrundes (Teilstriche)||#666||<br />
|-<br />
|'''data-bgcolor'''||Farbe des geriffelten Hintergrundes (Flächen zwischen den Teilstrichen)||keine||<br />
|-<br />
|'''data-mincolor'''||Farbe am unteren Ende des Einstellbereiches||#4477ff||<br />
|-<br />
|'''data-maxcolor'''||Farbe am oberen Ende des Einstellbereiches||#ff0000||<br />
|-<br />
|'''data-thickness'''||Dicke des Einstellbereiches||0.25||<br />
|-<br />
|'''data-anglearc'''||Reichweite der Anzeige auf einem Kreis in Grad||240||data-anglearc="360"<br />
|-<br />
|'''data-angleoffset'''||Bestimmt die Position auf der Kreisform, auf dem die Statusanzeige beginnen soll||-120||data-angleoffset="0"<br />
|-<br />
|'''data-font'''||Schriftart des Wertes||||<br />
|-<br />
|'''data-font-weight'''||Dicke der Schrift||||<br />
|-<br />
|'''data-unit'''||Einheit, die zum Wert hinzugefügt werden soll||||<nowiki>data-unit="&deg;"</nowiki><br />
|-<br />
|'''data-lock'''||Reading, welches den booleanschen Wert (1,true,on) enthält um das Widget auf readonly zu setzen||||<br />
|}<br />
<br />
==Hinweise==<br />
* Wenn beim MAX! Wand-Thermostat der Wert ''auto'' für ''data-mode'' empfangen wird, wird folgender Befehl generiert: <code>set wz_WandThermostat desiredTemperature auto</code>. Andere Werte erzeugen Befehle wie <code>set wz_WandThermostat desiredTemperature</code><br />
* Als ''data-device'' muss das Device angegeben werden, welches gewünschte und aktuelle Temperatur liefert. Bei HomeMatic Thermostaten ist das z.B. HM_XXXXXX_Clima<br />
* Das Widget zeigt die Ventilposition nur an, wenn ''data-valve'' explizit definiert wurde.<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
!Klasse!!Beschreibung<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|readonly}}<br />
|}<br />
<br />
==Beispiele==<br />
===HomeMatic HM-CC-RT-DN===<br />
Da die Standardwerte für ''data-get'', ''data-temp'' und ''data-set'' schon den benötigten Werten für ein [[HM-CC-RT-DN Funk-Heizkörperthermostat]] entsprechen, reicht eine ganz einfache Code-Zeile.<br />
<source lang="html"><br />
<div data-type="thermostat" data-device="HM_302111_Clima"></div><br />
</source><br />
<br />
Das entspricht in diesem Fall der längeren Version:<br />
<source lang="html"><br />
<div data-type="thermostat" <br />
data-device="HM_302111_Clima" <br />
data-get="desired-temp" <br />
data-temp="measured-temp"><br />
</div><br />
</source><br />
[[File:FTUI_Widget_Thermostat_01.png]]<br />
<br />
===MAX! Thermostat===<br />
<source lang="html"><br />
<div data-type="thermostat"<br />
data-device="HZ_Tuer" <br />
data-valve="valveposition" <br />
data-get="desiredTemperature" <br />
data-temp="temperature" <br />
data-set="desiredTemperature"><br />
</div><br />
</source><br />
[[File:FTUI_Widget_Thermostat_01.png]]<br />
<br />
===Mit Off- und Boost-Funktion===<br />
Hier ein Beispiel, mit dem das Thermostat aus-, oder die Boost-Funktion eingeschaltet werden kann. Um Auszuschalten muss der Zeiger auf die Mindestposition gezogen werden. Um die Boost-Funktion zu aktivieren, auf die Maxmimalposition.<br />
<source lang="html"><br />
<div data-type="thermostat"<br />
data-device="HM_302111_Clima"<br />
data-valve="ValvePosition"<br />
data-min="5"<br />
data-off="off" <br />
data-max="31"<br />
data-boost="31"><br />
</div><br />
</source><br />
[[File:FTUI_Widget_Thermostat_02.png]]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduserhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Knob&diff=20660FTUI Widget Knob2017-03-09T18:28:06Z<p>Standarduser: /* Attribute */ data-thickness hinzugefügt</p>
<hr />
<div>Das [[{{PAGENAME}}|Knob Widget]] ist ein Widget für [[FHEM Tablet UI]], das einen verschiebbaren Statusbalken auf einer Kreisbahn erstellt. Optisch wird ein „Drehknopf“ symbolisiert, mit dem man eine Einstellung vornimmt.<br />
<br />
<gallery><br />
File:FTUI_Widget_Knob_01.png<br />
File:FTUI_Widget_Knob_02.png<br />
File:FTUI_Widget_Knob_03.png<br />
</gallery><br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-device'''||FHEM-Device, dessen Readings gelesen/geändert werden sollen||||<br />
|-<br />
|'''data-get'''||Name des Readings, das den darzustellenden Wert enthält||STATE||<br />
|-<br />
|'''data-set'''||Name des Reading, welches geändert werden soll||||<br />
|-<br />
|'''data-cmd'''||Name des Befehls, mit dem das Reading geändert wird (z.B. setstate, set, setreading, trigger)||set||<br />
|-<br />
|'''data-get-value'''||[[Regulärer Ausdruck|RegEx]] oder Position des Wertes in einer leerzeichen-getrennten Textzeile, mit der der Wert erhalten werden kann||||<br />
|-<br />
|'''data-set-value'''||Format des Wertes, wie er an FHEM gesendet werden soll||$v (nur der Wert)||<br />
|-<br />
|'''data-min'''||Mindestwert, der gesetzt werden kann||0||data-min="10"<br />
|-<br />
|'''data-max'''||Maximalwert, der gesetzt werden kann||70||data-max="100"<br />
|-<br />
|'''data-initvalue'''||Startwert||10||data-initvalue="20"<br />
|-<br />
|'''data-step'''||Schrittgröße||1||data-step="0.5"<br />
|-<br />
|'''data-angleoffset'''||Bestimmt die Position auf der Kreisform, auf dem die Statusanzeige beginnen soll||-120||data-angleoffset="0"<br />
|-<br />
|'''data-anglearc'''||Reichweite der Anzeige auf einem Kreis in Grad||240||data-anglearc="360"<br />
|-<br />
|'''<s>data-width</s>'''||<s>Breite des Widgets</s>||<s>120</s>||<s></s><br />
|-<br />
|'''data-height'''||Höhe des Widgets||120||<br />
|-<br />
|'''data-bgcolor'''||Hintergrundfarbe des Steuerungsbalkens||#505050||data-bgcolor="white"<br />
|-<br />
|'''data-fgcolor'''||Farbe der Statusanzeige||#666||data-fgcolor="red"<br />
|-<br />
|'''data-inputcolor'''||Textfarbe des Wertes||#ffffff||data-inputcolor="#00ff00"<br />
|-<br />
|'''data-displayInput'''||Wert anzeigen||true||data-displayInput="false"<br />
|-<br />
|'''data-font'''||Schriftart des Wertes||||<br />
|-<br />
|'''data-font-weight'''||Dicke der Schrift||||<br />
|-<br />
|'''data-thickness'''||Dicke des Steuerungsbalkens||0.25||<br />
|-<br />
|'''data-unit'''||Einheit, die zum Wert hinzugefügt werden soll||||<nowiki>data-unit="&deg;"</nowiki><br />
|-<br />
|'''data-lock'''||Reading, welches den booleanschen Wert (1,true,on) enthält um das Widget auf readonly zu setzen||||<br />
|-<br />
|'''data-reachable'''||Reading, dessen Inhalt angibt, ob das Device erreichbar ist, oder nicht||||<br />
|}<br />
<br />
==CSS Klassen==<br />
{|class="wikitable"<br />
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|readonly}}<br />
|}<br />
<br />
==Beispiele==<br />
===Einfache Lautstärkeregelung===<br />
<source lang="html"><br />
<div data-type="knob"<br />
data-device="RXV777"<br />
data-get="volumeStraight"<br />
data-set="volumeStraight"<br />
data-min="-60"<br />
data-max="-24"<br />
data-step="0.5"<br />
data-unit="db"></div><br />
</source><br />
[[File:FTUI_Widget_Knob_01.png]]<br />
<br />
<br />
===Steuerung HUEDevice===<br />
In diesem Beispiel ist das gewünschte HUEDevice nicht erreichbar und das Widget wird somit auf ''readonly'' gesetzt.<br />
<source lang="html"><br />
<div data-type="knob"<br />
data-device="HUEDevice12"<br />
data-get="pct"<br />
data-set="pct"<br />
data-min="0"<br />
data-max="100"<br />
data-step="1"<br />
data-unit="%"<br />
data-reachable="reachable"></div><br />
</source><br />
[[File:FTUI_Widget_Knob_02.png]]<br />
<br />
<br />
===Verändertes Aussehen===<br />
Um zu zeigen, wie das Aussehen verändert werden könnte, hier ein etwas übertriebenes Beispiel.<br />
<source lang="html"><br />
<div data-type="knob"<br />
data-device="HUEDevice12"<br />
data-get="pct"<br />
data-set="pct"<br />
data-min="0"<br />
data-max="100"<br />
data-step="5"<br />
data-unit="%"<br />
data-bgcolor="lightblue"<br />
data-fgcolor="blue"<br />
data-inputcolor="yellow"<br />
data-anglearc="360"<br />
data-angleoffset="0"<br />
data-height="100"<br />
data-font="courier"<br />
data-font-weight="bold"<br />
data-reachable="reachable"></div><br />
</source><br />
[[File:FTUI_Widget_Knob_03.png]]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Standarduser