FHEM Tablet UI: Unterschied zwischen den Versionen

Aus FHEMWiki
(→‎Widgets -- Konfiguration: Erweiterung circlemenu)
K (Tote Links "entwikifiziert", Todo entfernt, da keine Weiterentwicklung zu erwarten ist)
 
(250 dazwischenliegende Versionen von 40 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{Infobox Modul
{{Infobox Modul
|ModPurpose=Oberfläche für Fhem
|ModPurpose=Oberfläche für FHEM
|ModType=x
|ModType=x
|ModFTopic=34233
|ModFTopic=34233
|ModForumArea=Frontends
|ModForumArea=TabletUI
|ModTechName=n.a.
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
}}
[[Datei:tablet_ui.png|200px|thumb|right|Fhem Tablet UI]]
Diese Version der Tablet UI wird nicht weiterentwickelt (siehe {{Link2Forum|Topic=115259|Message=1095261|LinkText=diesen Forenbeitrag}}).
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in Fhem integrierten Geräten. Zahlreiche Widgets können sehr flexibel und leicht per HTML Code konfiguriert werden.


In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben.
Es gibt eine neue Version 3 hier: [[FHEM Tablet UI v3]]


{{Todo|alle Widgets hier übernehmen, Übersetzung, weitere Beispiele aus dem Forum einfügen (evtl. mit Link!?)}}
Achtung: Version 3 ist nicht mit Version 2 kompatibel. Ein Umstieg auf FTUI3 hat eine Neu-Programmierung der Oberfläche zur Folge.
FHEM Tablet UI v2 (FTUI2) ist ein leichtgewichtiges aber funktionsreiches Frontend-Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Es basiert auf HTML/CSS/JavaScript und stellt somit keine zusätzlichen Anforderungen an den FHEM-Server.


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


== Voraussetzungen ==
Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.
Dieses User Interface für Tablets benötigt <u>keine</u> zusätzliche Frameworks, wie PHP, MySQL oder SmartVisu.


Voraussetzungen ist nur ein Standard-Fhem mit HTTPSRV Modul und ein beliebiger Standard-Browser  mit Javascript auf einem beliebigen Betriebssystem oder Webviewcontrol.
Mit wenigen Anpassungen ist es auch möglich, das UI auf anderen Webservern (Apache, u.a.) zu betreiben. Somit können FHEM und FHEM Tablet UI auch auf getrennten Systemen ausgeführt werden.
 
[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]


== Installation ==
== Installation ==
* Im Befehls-Eingabefeld eingeben: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
Die Installation von FHEM Tablet UI v2 erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:
* Im Befehls-Eingabefeld eingeben: <code>define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI</code>
*Dateien aus dem GitHub-Repository herunterladen
* Im Verzeichnis ./fhem/www/tablet die Datei index-example.html in index.html umbenennen oder eine neue index.html erzeugen und diese index.html wie nachfolgend beschrieben editieren.
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)
*Eine Beispieldatei anlegen


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


Hinweise zu einer manuellen Installation und weitere Infos sind auf der Projektseite https://github.com/knowthelist/fhem-tablet-ui zu finden.
{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}


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


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


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


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


Näheres zur Installation unter [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/Installation Wiki: Installation].
'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code>


Die Dokumentation der einzelnen Widgets befindet sich ebenfalls [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki im Github-Wiki].
:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]


== Konfiguration ==
{{Hinweis|Dieser Schritt kann ausgelassen werden, wenn die Funktionalitäten von [[FHEMWEB]] ausreichend sind. Dann muss FTUI aber in weiterer Folge unter der URL '''<nowiki>http(s)://<fhem-server>:8083/fhem/tablet/index.html</nowiki>''' aufgerufen werden und es wird kein Link auf FTUI in der FHEM GUI erstellt. Vorteil ist aber, dass das FHEMWEB-Caching verwendet werden kann. Siehe dieser {{Link2Forum|Topic=86362|Message=788258}}.}}
Die Konfiguration der angezeigten Widgets erfolgt in der Datei '''index.html''' im Hauptordner 'tablet'.


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


Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh
:<code>attr WEB longpoll websocket</code>
:<code><meta name="longpoll" content="1"></code>
:bzw. bei Problemen mit ''websocket''
:<code>attr WEB longpoll 1</code>


Drag&Drop deaktivieren
:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]
:<code><meta name='gridster_disable' content='1'></code>


Toast messages deaktivieren
:<code><meta name='toast' content='1'></code>


Größe des Basis-Rasters (data-sizey=1/data-sizex=1)
'''4.''' Weil FTUI noch nichts anzuzeigen hat, wird die Datei '''/opt/fhem/www/tablet/index-example.html''' nach '''/opt/fhem/www/tablet/index.html''' kopiert.
:<code><meta name="widget_base_width" content="116"></code>
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code>
:<code><meta name="widget_base_height" content="131"></code>


Abstände der Gridsterelemente verkleinern:
:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]
:<code><meta name="widget_margin" content="3"></code>




Das Layout und das Aussehen des UI kann durch die Klassen-Attribute beeinflusst werden. Verfügbare Klassen sind:
'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.


container, left, right, cell, narrow, darker, big, bigger, small


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


Knallige Farben wie #ff0000 für Rot oder #00ff00 für Grün sollten vermieden werden. Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.
== Update ==
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.


Hilfreich bei der Suche nach den Farbwerten ist der color picker: http://www.w3schools.com/tags/ref_colorpicker.asp
'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>




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


Not all widgets support all classes


* readonly : changing of state is not allowed
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.
* wider : 25px extra space for the widget to the top
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
* narrow : shorter distant to the widget above
* w1x, w2x, w3x : set the widget to a fix width: 1x, 2x, 3x width
* small : font 80% size (label), small diameter for volume widget
* mini : lowest diameter for volume widget
* large : font 150% size
* big : font 200% size
* bigger : font 320% size
* thin : font thin
* darker : forecolor in gray
* hue-tick : draw ticks in color range
* hue-front : draw handle in color range
* hue-back : draw background in color range
* dim-tick : draw ticks in brightness range
* dim-front : draw handle in brightness range
* dim-back : draw background in brightness range
* red : foreground color red
* green : foreground color green
* blue : foreground color blue
* doublebox-v : container to place 2 small widgets (e.g. switch) one above the other
* doublebox-h : container to place 2 small widgets (e.g. switch) side by side
* timestamp : deliver the date time for the reading instead the value
* inline : positioning elements in a row, no line break
* top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)
* left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)
* right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)
* blink : blink animatation for label or symbol widget


Beachte: Das Ergebnis des o.g. Befehls wird in FHEM/controls.txt eingetragen, siehe auch [[Update#update_add]]


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


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


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


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


Für alle Widgets gilt:
===Verbindung zu FHEM===
{| class="wikitable"
{| class="wikitable"
|+allgemeine Attribute
|-
|-
!align="right" |data-type
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|Widget-Typ
|-
|-
!align="right" |data-device
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird
|Fhem-Name des Gerätes (mit dem Befehl 'list' bekommt man im Fhem die kpl. Liste)
|-
|-
!align="right" |class
|longpoll||1||0, 1||
|CSS-Klassen für Aussehen und Formatierung des Widgets
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)
|}


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


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


<div id="circlemenu">'''CIRCLEMENU'''</div>
'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.
 
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
|-
!align="right" |data-item-diameter
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.
|diameter of the circle
|52
|-
|-
!align="right" |data-circle-radius
|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.
|radius of each item, in pixel
|70
|-
|-
!align="right" |data-direction
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet
|position of the items in relation to the center
|'full'
|-
|-
!align="right" |data-close-after
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein
|closing time of the circle-menu
|(item-count + 1s) or a minimum of 4s
|-
!align="right" |class
|keepopen
|
|-
|-
|fhemweb_url||/fhem/||Integer||URL zu FHEM. Wird benötigt wenn FTUI auf einem anderen als dem FHEM Server läuft oder nicht im Standard-Pfad installiert ist.
Hinweis: Wenn FHEM auf einem anderem Server/Domain läuft muss man das "CORS" Attribut im FHEMWEB Modul (s.o.) auf 1 setzen, sonst bekommt man Cross Origin Fehler.
|}
|}


Optionen für data-direction: top | right | bottom | left | top-right | top-left | bottom-right | bottom-left | top-half | right-half | bottom-half | left-half | full | vertical | horizontal
===Funktionalität===
 
[[#Beispiel_circlemenu|Link zu einem Beispiel]]
 
 
<div id="dimmer">'''DIMMER'''</div>
 
{| class="wikitable"
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-get-on
|value for ON status to get
|'on'
|-
!align="right" |data-get-off
|value for OFF status to get
|'off'
|-
|-
!align="right" |data-set
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|(<command> <device> <reading> <value>)
|
|-
|-
!align="right" |data-set-on
|debug||0||0 - 5||Log-Level
|value for ON status to set
|value of data-get-on
|-
|-
!align="right" |data-set-off
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.
|value for OFF status to set
|value of data-get-off
|-
|-
!align="right" |data-cmd
|toast_position||bottom-left||||Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
|-
!align="right" |data-dim
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)
|name of the reading responsible for dim (<command> <device> <reading> <value>)  
|value of data-get-on
|-
|-
!align="right" |data-icon
|username||||String||Benutzername für eine Basic-Authentifierung *
|name of the font-awesome icon
|fa-lightbulb-o
|-
|-
|password||||String||Passwort für eine Basic-Authentifizierung *
|}
|}
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.


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


<div id="homestatus">'''HOMESTATUS'''</div>
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.


{| class="wikitable"
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:
!HTML Attribut
<pre><meta name='toast_position' content='top-center'></pre>
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-alias
|array of fix names to show only in the UI as an alias to the real states
|''
|-
!align="right" |data-icons
|array of icons related to the data-get-on array
|''
|-
!align="right" |data-version
|name of the status model e.g. 'residents','roommate','guest'
|(default NULL)
|-
|}


The default version has 4 states: '1','2','3','4' The default aliases are 'Home','Night','Away','Holiday'; data-version='residents' or 'roommate' or 'guest' has 5 states ('home','asleep','absent','gone','gotosleep') They have these aliases 'Home','Night','Away','Holiday','Retire'
Möglich sind folgende Positionen:
* <code>top-left</code>
* <code>top-right</code>
* <code>bottom-left</code>
* <code>bottom-right</code>
* <code>top-center</code>
* <code>bottom-center</code>
* <code>mid-center</code>


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


==Navigationsmethoden==
'''Unterschied zwischen Pagetab und Pagebutton:'''


<div id="image">'''IMAGE'''</div>
'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite
[[FTUI_Widget_Pagetab]]


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


[[#Beispiel_image|Link zu einem Beispiel]]
'''Pagelink:''' damit kann man beliebige Widgets kapseln und vorhandene Pagebutton-Seiten ansteuern
[[FTUI Widget Link]]


<div id="label">'''LABEL'''</div>
==Gestaltung==
===Layout-Optionen===
* [[FTUI Layout Gridster|Gridster]]
* [[FTUI Layout Flex|Flex]]
* [[FTUI Layout Sheet|Tabelle]]
* Reihen


{| class="wikitable"
=== Farben ===
!HTML Attribut
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel:  
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|
|-
!align="right" |data-fix
|keeping a specified number of decimals.
|'-1' -> non-numeric
|-
!align="right" |data-part
|split position of the space separated value to show or an RegEx
|
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits-get
|name of the DEVICE:Reading to colorize the label
|data-device:data-get
|-
!align="right" |data-limits
|an array of numeric values to affect the colour of the Label
|
|-
!align="right" |data-limits-part
|part number of the space separated value to show or a RegEx
|'-1' -> all
|-
!align="right" |data-unit
|add a unit after a numeric value. use encoded strings e.g. "%B0C%0A"
|
|-
!align="right" |data-substitution
|regex-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected
|
|-
!align="right" |class
|small, large, big, bigger, thin, red, green, blue, darker, timestamp, w1x, w2x, w3x, fixedlabel
|
|}


mit der Class 'fixedlabel' kann man Label einbauen, die einen festen Text (direkt im HTML) haben, aber trotzdem die Farbe per Reading Value beeinflusst werden könnte.
*HEX: #ADD8E6
*RBG: rgb(173, 216, 230)
*Namen: lightblue


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


<div id="level">'''LEVEL'''</div>
Empfohlene Farben sind z.B.:


{| class="wikitable"
*Orange: <span style="color: #aa6900;">#aa6900</span>
!HTML Attribut
*Rot: <span style="color: #ad3333;">#ad3333</span>
!Beschreibung
*Grün: <span style="color: #32a054;">#32a054</span>
!Default Wert
*Blau: <span style="color: #6699FF;">#6699FF</span>
|-
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span>
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-min
|minimal value to set
|'0'
|-
!align="right" |data-max
|maximal value to set
|'100'
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-colors
|a array of color values to affect the colour of the label according to the limit value
|
|-
!align="right" |data-limits
|a array of numeric or RegEx values to affect the colour of the label
|
|-
!align="right" |class
|mini, horizontal
|
|-
|}


[[#Beispiel_level|Link zu einem Beispiel]] (fehlt noch)
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/


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


{| class="wikitable"
Hier am Beispiel eines blauen Farbschemas:
!HTML Attribut
<syntaxhighlight lang="html">
!Beschreibung
<html>
!Default Wert
<head>
|-
  [...]
!align="right" |data-url
  <link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" />
|URL of the new page to show
  [...]
|
</head>
|-
</syntaxhighlight>
!align="right" |data-icon
|name of the font-awesome icon
|'fa-power-off'
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|''
|-
!align="right" |data-on-background-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-background-color
|color of OFF state
|'#505050'
|-
!align="right" |data-on-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-color
|color of Off state
|'#505050'
|-
!align="right" |data-get-on
|array of status to assign a special icon-list from data-icons
|
|-
!align="right" |data-icons
|array of icons related to the a data-get-on array
|
|-
!align="right" |class
|warn, activate (as additionals for data-icons)
|
|-
|}


[[#Beispiel_pagetab|Link zu einem Beispiel]]
Diese Schema-Dateien ändern alle Widgets.
<gallery>
File:Theme_default.png|default
File:Theme_blue.png|fhem-blue-ui.css
File:Theme_green.png|fhem-green-ui.css
File:Theme_mobile.png|fhem-mobile-ui.css
File:Theme_darkblue.png|fhem-darkblue-ui.css
File:Theme_darkgreen.png|fhem-darkgreen-ui.css
</gallery>


<div id="playstream">'''PLAYSTREAM'''</div>
Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.


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


[[#Beispiel_playstream|Link zu einem Beispiel]]
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.


<div id="popup">'''POPUP'''</div>
=== CSS-Klassen ===
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.


{| class="wikitable"
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!HTML Attribut
! colspan="2" style="text-align: left;" |sheet/row/cell-Layout
!Beschreibung
!Default Wert
|-
|-
!align="right" |data-get
!class="mw-collapsible-content"|Klasse!!Beschreibung
|name of the reading where to get the alert value from
{{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}}
|'STATE'
|}
|-
 
!align="right" |data-get-on
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
|value which trigger to open the dialog
! colspan="2" style="text-align: left;" |row/col-Layout
|'on'
|-
!align="right" |data-off
|value which trigger to close the dialog
|'off'
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}
|}
|}


[[#Beispiel_popup|Link zu einem Beispiel]]
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
 
! colspan="2" style="text-align: left;" |hbox/vbox-Layout
<div id="progress">'''PROGRESS'''</div>
 
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-max
|maximal value to set or name of the reading which helds the max value
|100
|-
!align="right" |class
|novalue, percent
|
|-
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|vbox}}{{FTUI Klasse|hbox}}{{FTUI Klasse|card}}{{FTUI Klasse|phone-width}}{{FTUI Klasse|full-height}}{{FTUI Klasse|full-width}}{{FTUI Klasse|grow-0}}{{FTUI Klasse|grow-1}}{{FTUI Klasse|grow-2}}{{FTUI Klasse|grow-x}}{{FTUI Klasse|items-top}}{{FTUI Klasse|items-center}}{{FTUI Klasse|items-bottom}}{{FTUI Klasse|items-space-between}}{{FTUI Klasse|items-space-around}}
|}
|}


[[#Beispiel_progress|Link zu einem Beispiel]] (fehlt noch)
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
 
! colspan="2" style="text-align: left;" |Generelle Klassen für die Positionierung
<div id="push">'''PUSH'''</div>
 
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-set
|value to send to Fhem (<command> <device> <value>)
|
|-
!align="right" |data-set-on
|value to send when the the button get pressed oder ein Array zwischen dessen Werten umgeschaltet werden kann
|
|-
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|inline}}{{FTUI Klasse|newline}}{{FTUI Klasse|top-space}}{{FTUI Klasse|top-space-2x}}{{FTUI Klasse|top-space-3x}}{{FTUI Klasse|left-space}}{{FTUI Klasse|left-space-2x}}{{FTUI Klasse|left-space-3x}}{{FTUI Klasse|right-space}}{{FTUI Klasse|right-space-2x}}{{FTUI Klasse|right-space-3x}}{{FTUI Klasse|top-narrow}}{{FTUI Klasse|top-narrow-2x}}{{FTUI Klasse|top-narrow-10}}{{FTUI Klasse|left-narrow}}{{FTUI Klasse|left-narrow-2x}}{{FTUI Klasse|left-narrow-3x}}{{FTUI Klasse|right-narrow}}{{FTUI Klasse|right-narrow-2x}}{{FTUI Klasse|right-narrow-3x}}{{FTUI Klasse|centered}}{{FTUI Klasse|wider}}{{FTUI Klasse|narrow}}{{FTUI Klasse|fullsize}}{{FTUI Klasse|compressed}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|maxw40}}{{FTUI Klasse|doublebox-v}}{{FTUI Klasse|doublebox-h}}{{FTUI Klasse|triplebox-v}}{{FTUI Klasse|right}}
|}


!align="right" |data-icon
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
|name of the font-awesome icon
! colspan="2" style="text-align: left;" |Vordergrundfarben
|
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|'fa-circle'
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-doubleclick
|timeout to wait for a second click or touch. '0' disables the doubleclick feature.
|0
|-
!align="right" |data-countdown
|secondes for the countdown progress control
|autodetect from 'on-for-timer' command
|-
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|lightblue}}{{FTUI Klasse|orange}}{{FTUI Klasse|gray}}{{FTUI Klasse|lightgray}}{{FTUI Klasse|white}}{{FTUI Klasse|black}}{{FTUI Klasse|mint}}{{FTUI Klasse|yellow}}
|}
|}


[[#Beispiel_push|Link zu einem Beispiel]]
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
 
! colspan="2" style="text-align: left;" |Hintergrundfarben
 
<div id="rotor">'''ROTOR'''</div>
 
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" | data-delay
|time in millisecondes to wait until next list item get shown
|3500
|-
!align="right" |class
|fade, rotate
|''
|-
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|bg-red}}{{FTUI Klasse|bg-green}}{{FTUI Klasse|bg-blue}}{{FTUI Klasse|bg-lightblue}}{{FTUI Klasse|bg-orange}}{{FTUI Klasse|bg-gray}}{{FTUI Klasse|bg-lightgray}}{{FTUI Klasse|bg-white}}{{FTUI Klasse|bg-black}}{{FTUI Klasse|bg-mint}}{{FTUI Klasse|bg-yellow}}
|}
|}
Ohne Angabe von class erfolgt keine Animation.
[[#Beispiel_rotor|Link zu einem Beispiel]]


<div id="select">'''SELECT'''</div>
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
 
! colspan="2" style="text-align: left;" |Rahmen
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
|-
!align="right" |data-get
!class="mw-collapsible-content"|Klasse!!Beschreibung
|name of the reading that get the selected item of the list
{{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}}
|
|}
|-
!align="right" |data-set
|name of the reading to set on Fhem (<command> <device> <reading> <value>)
|''
|-
!align="right" |data-list
|name of the reading to get a :-separated list from Fhem
|''
|-
!align="right" |data-items
|an array of fix items to show in the selection box (alternative if data-list is empty)
|
|-
!align="right" |data-alias
|an array of fix names to show only in the selection box as an alias to the real items
|
|-
!align="right" |data-cmd
|name of the command to send to Fhem (<command> <device> <reading> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-quote
|characters to enclose the send value
|
|-
!align="right" |class
|wider, w1x, w2x, w3x, large, big
|
|-
|}  
 
[[#Beispiel_select|Link zu einem Beispiel]]
 
<div id="simplechart">'''SIMPLECHART'''</div>


{| class="wikitable"
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!HTML Attribut
! colspan="2" style="text-align: left;" |Größen
!Beschreibung
!Default Wert
|-
|-
!align="right" |data-logdevice
!class="mw-collapsible-content"|Klasse!!Beschreibung
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung)
{{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}}
|
|}
|-
!align="right" |data-logfile
|name of the logfile (e.g. WohnzimmerHeizung-2015.log)
|'-' means current logfile
|-
!align="right" |data-columnspec
|definition for how to find the values (e.g. "4:meas.*:1:int")
|''
|-
!align="right" |data-minvalue
|min Y value to Show or an array of values for dynamic minY
|10
|-
!align="right" |data-maxvalue
|max Y value to Show or an array of values for dynamic maxY
|30
|-
!align="right" |data-yticks
|value distance between Y tick lines
|5
|-
!align="right" |data-xticks
|time range between each X tick line (in Minuten)
|360 minutes
|-
!align="right" |data-daysago
|number of days back from now
|0
|-
!align="right" |data-caption
|name of the chart to show as text
|
|-
!align="right" |data-yunit
|unit of the value to show beside of each Y ticks
|
|-
!align="right" |data-width
|fixe size for width (in % or px)
|
|-
!align="right" |data-height
|fixe size for height (in % or px)
|
|-
!align="right" |class
|fullsize, noticks
|
|-
|}  
 
[[#Beispiel_simplechart|Link zu einem Beispiel]] (fehlt noch)
 
<code>data-logfile</code> kann man auch weglassen, dann greift der Defaultwert "-". Damit wird das neuste Logfile gelesen.


 
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
<div id="slider">'''SLIDER'''</div>
! colspan="2" style="text-align: left;" |Schriftstil
 
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|100
|-
!align="right" |data-on
|value where the slider moves to max
|'on'
|-
!align="right" |data-off
|value where the slider moves to min
|'off'
|-
!align="right" |data-value
|wenn true wird beim sliden der Wert angezeigt
|
|-
!align="right" |data-width
|width for horizontal sliders
|'120px', for mini '60px'
|-
!align="right" |data-height
|height for vertical sliders
|'120px', for mini '60px'
|-
!align="right" |class
|Aussehen/Ausrichtung
|
|-
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}
|}
|}


Für class steht mini, horizontal und negated (0 liegt oben) zur Verfügung.
{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
 
! colspan="2" style="text-align: left;" |Sonstiges
[[#Beispiel_slider|Link zu einem Beispiel]]
 
<div id="switch">'''SWITCH'''</div>
 
{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-get-on
|Wert, bei dem zum Status ON geschaltet werden soll.
|'on'
|-
!align="right" |data-get-off
|Wert, bei dem zum Status OFF geschaltet werden soll.
|'off'
|-
!align="right" |data-set-on
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf ON geschaltet wurde 
|Wert von data-get-on
|-
!align="right" |data-set-off
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf OFF geschaltet wurde
|Wert von data-get-off
|-
!align="right" |data-cmd
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-icon
|Name des Font-Awesome Icon.
|'fa-lightbulb-o'
|-
!align="right" |data-background-icon
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
|-
!align="right" |data-on-color
!class="mw-collapsible-content"|Klasse!!Beschreibung
|Widget Farbe beim Status ON
{{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|tap}}{{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}}
|'#aa6900'
|-
!align="right" |data-off-color
|Widget Farbe beim Status OFF
|'#505050'
|}
|}


<code>data-get-on</code> and <code>data-get-off</code> accept also RegEx values. e.g. data-get-on="[0-9]{1,3}|on" means set switch on if STATE is a numeric value or 'on'. data-get-off="!on" means accept all but the data-get-on value (negation)
=== Überlagerung von Text und Bild ===
[[Datei:FTUI_Text_auf_Bild.png||thumb|right]]
Texte können auf Bildern positioniert werden:
<syntaxhighlight lang="html5">
<li data-row="1" data-col="4" data-sizey="4" data-sizex="6">
    <div class="display">
        <div data-type="image" data-url="https://picsum.photos/200/125/?random" data-size="100%"></div>
        <div class="display-center bigger" data-type="label">Text1</div>
        <div class="display-topright bigger right-space top-space" data-type="label">Text2</div>
        <div class="ontop bigger" style="left: 120px; top: 50px">Text3</div>
    </div>
</li>
</syntaxhighlight>


[[#Beispiel_switch|Link zu einem Beispiel]]
Zur Verfügung stehen folgende Grundpositionen:
* <code>display-topleft</code>
* <code>display-topcenter</code>
* <code>display-topright</code>
* <code>display-centerleft</code>
* <code>display-left</code>
* <code>display-centerright</code>
* <code>display-right</code>
* <code>display-bottomleft</code>
* <code>display-bottomcenter</code>
* <code>display-bottomright</code>


Feinjustage ist möglich über


<div id="symbol">'''SYMBOL'''</div>
* <code>right-space</code>
* <code>top-space</code>
* <code>left-space</code>
* <code>bottom-space</code>
* <code>right-space-2</code>
* <code>top-space-2</code>
* <code>left-space-2</code>
* <code>bottom-space-2</code>
* <code>right-space-3</code>
* <code>top-space-3</code>
* <code>left-space-3</code>
* <code>bottom-space-3</code>


{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-get-on
|value for ON status to get or an array of states.
|'open'
|-
!align="right" |data-get-off
|value for OFF status to get.
|'closed'
|-
!align="right" |data-icon
|Name des font-awesome-Symbols 
|'ftui-window'
|-
!align="right" |data-background-icon
|Hintergrundsymbol
|''
|-
!align="right" |data-on-background-color
|Farbe für ON-Zustand.
|'#aa6900'
|-
!align="right" |data-off-background-color
|Farbe für ON-Zustand.
|'#505050'
|-
!align="right" |data-on-color
|Farbe für ON-Zustand.
|'#aa6900'
|-
!align="right" |data-off-color
|Farbe für ON-Zustand.
|'#505050'
|-
!align="right" |data-icons
|Array mit Icons zu data-get-on Array
|
|-
!align="right" |data-on-colors
|array of colors related to the data-get-on array
|''
|-
!align="right" |data-on-background-colors
|array of background-colors related to the data-get-on array
|''
|-
|}


To use multiple icons, data-get-on, data-icons and data-on-colors have to be an array with the same size. The value for one icon can also contain an additional animatation CSS name, e.g. "fa-exclamation-triangle fa-blink" for a blinking symbol. data-get-on and data-get-off accept also RegEx values. The value for one icon can also contain an additional animatation CSS name, e.g. "fa-exclamation-triangle fa-blink" for a blinking symbol
[[Datei:FTUI_Beispiel_Positionierung.png|200px|thumb|right]]
Verallgemeinert lassen sich auf diese Weise '''Objekte frei im Elternelement positionieren''':
<syntaxhighlight lang="html5">
    <div class="display" data-type="html">
        <div class="display-topcenter top-space big">Fenster</div>
        <div class="display-center fa fa-4x ftui-window"></div>
        <div class="display-bottomleft bottom-space left-space" data-type="label">Text</div>
    </div>
</syntaxhighlight>
=== Icons ===
FTUI bringt einige Icons-"Schriftarten" mit, die für die Darstellung genützt werden können. Diese werden automatisch beim Start des UI eingebunden, sobald ein entsprechendes Icon-Präfix im Code der Seite vorkommt.


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


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


<div id="thermostat">'''THERMOSTAT'''</div>
== Widgets ==
===Allgemeine Attribute===
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:


{| class="wikitable"
{| class="wikitable"
!HTML Attribut
|+allgemeine Attribute
!Beschreibung
!Default Wert
|-
|-
!align="right" |data-get
! align="right" |data-type
|name of the reading to get from Fhem
|Widget-Typ
|'desired-temp'
|-
|-
!align="right" |data-temp
! align="right" |data-device
|reading for measured temperature of thermostates
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)
|'measured-temp'
|-
|-
!align="right" |data-set
! align="right" |class
|command to send to Fhem (set <device> <command> <value>)
|CSS-Klassen für Aussehen und Formatierung des Widgets
|'desired-temp'
|-
!align="right" |data-valve
|reading for valve position of thermostates
|
|-
!align="right" |data-min
|minimal value to set
| 10
|-
!align="right" |data-max
|maximal value to set
| 30
|-
!align="right" |data-minColor
|Farbe des Keises für Min
| #4477FF
|-
!align="right" |data-maxColor
|Farbe des Kreises für Max, zwischen Min und Max wird linear interpoliert
| #FF0000
|-
!align="right" |data-step
|step size for value adjustment e.g. 0.5
|1
|-
!align="right" |data-bgColor
|Die Farbe der Kreises zwischen den ticks
|'transparent'
|-
!align="right" |data-fgColor
|Die Farbe der zahl im Kreismittelpunkt
|#bbbbbb
|-
!align="right" |data-tkColor
|Die Farbe der ticks
|#696969
|-
|-
!align="right" |data-angleOffset
|Start der ticks im Kreis (in Winkelgraden, 0 = oben)
| -120
|-
!align="right" |data-angleArc
|Bereich der ticks im Kreis (in Winkelgraden)
|240
|-
!align="right" |class
|big, readonly
|
|-
|-
|}
|}
[[#Beispiel_thermostat|Link zu einem Beispiel]]
<div id="volume">'''VOLUME'''</div>


{| class="wikitable"
{| class="wikitable"
!HTML Attribut
|+Daten Empfangen
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from Fhem
|'STATE'
|-
!align="right" |data-set
|command to send to Fhem (set <device> <command> <value>)
|''
|-
!align="rigth" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
|-
!align="right" |data-min
! align="right" |data-get
|minimal value to set
|Reading Name
|0
|-
|-
!align="right" |data-max
! align="right" |data-get-on
|maximal value to set
|Wert für den Status on
|70
|-
|-
!align="right" |class
! align="right" |data-get-off
|small, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back
|Wert für den Status off
|
|-
|-
|}
|}
[[#Beispiel_volume|Link zu einem Beispiel]] (fehlt noch)
<div id="weather">'''WEATHER'''</div>


{| class="wikitable"
{| class="wikitable"
!HTML Attribut
|+Daten Senden
!Beschreibung
!Default Wert
|-
|-
!align="right" |data-get
! align="right" |data-set
|name of the reading to get the weather literal from Fhem
|Reading Name
|'STATE'
|-
|-
!align="right" |data-imageset
! align="right" |data-set-on
|collection of images to display current weather situation. Possible values: 'meteocons', 'kleinklima'
|Wert für den Status on
|'meteocons'
|-
|-
!align="right" |data-image-path
! align="right" |data-set-off
|path to the images of the selected imageset
|Wert für den Status off
|/images/weather/
|-
|-
|}
|}


[[#Beispiel_weather|Link zu einem Beispiel]]
Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.


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


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


Cover a lot of other button behind one single button
===3rd Party Widgets===
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.
* agenda: Zeigt Kalendereinträge in einer Listenform an
* [[FTUI_Widget_Analogclock|analogclock]]: Analoguhr
* [[AutomowerConnect#Tablet-UI%2FFTUI_Version_2|automowerconnect]]: Für das Modul AutomowerConnect
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices
* clicksound: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [[FTUI Widget Dwdweblink|dwdweblink]]: Grafische Anzeige DWD-Wetter-Weblink
* [[FTUI Widget Filelog|filelog]]: Teile aus einem FHEM Logfile anzeigen
* fullcalview:
* gds:
* [[FTUI Widget Maps|maps]]: Kartendarstellung mit Google Maps API
* highchart:
* highchart3d:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* loading:
* meteogram:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
* [https://forum.fhem.de/index.php/topic,79283.msg712855.html#msg712855 pinpad]: Pinpad für z.B. eine Alarmanlage
* [https://forum.fhem.de/index.php/topic,76643.msg685472.html#msg685472 postme]: Liste des PostMe-Devices anzeigen
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads
* screensaver:
* [[SolarForecast FTUI Widget|solarforecast]]: Anzeige der SolarForecast-Grafik im FHEM Tablet UI
* [[FTUI Widget für SSCam Streaming Devices (SSCamSTRM)|sscamstrm]]: Integration von SSCam Streaming-Devices (Synology Surveillance Station Kameras) im FHEM Tablet UI
* [https://forum.fhem.de/index.php/topic,73497.0.html scrolllabel]: Texte in Laufschrift darstellen
* [[FTUI Widget Svgplot|svgplot]]: Unveränderte Übernahme eine bestehenden SVG-Plots
* [https://forum.fhem.de/index.php?topic=82883.msg750237#msg750237 todoist]: einfaches widget für todoist
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.
* [[FTUI Widget UWZ|uwz]]: Anzeige der Warnungen der Unwetterzentrale
* wakeup:
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul
* [[FTUI Widget Weekprofile|weekprofile]]: Visualisierung des [[weekprofile]] Moduls
* [[FTUI Widget Weatherdetail|weatherdetail]]: Detaillierte Wettervorhersage über 4 Tage (Nutzt das Proplanta Modul)
* [[FTUI Widget Video|videodetail]]: Video Widget für die FTUI


<pre>
===Anwendungsbeispiele===
<div class="left">
Durch die Verbindung von Widgets mit dem FHEM-Umfeld entstehen Lösungen für typische Anwendungen.
<div data-type="circlemenu" class="cell circlemenu">
* [[FTUI_Beispiel_Datetimepicker_für_Timer|Datetimepicker für Timer]]: Oberfläche für Timereinstellungen
    <ul class="menu">
* [[FTUI_Beispiel_Mondphase|Mondphase]]: Visuelle Darstellung der Mondphase
      <li><div data-type="push" data-icon="fa-wrench"></div></li>
* [[FTUI_Beispiel_Webradio|Webradio]]
      <li><div data-type="push" data-device="AvReceiver"
* [[FTUI Beispiel Zeitschaltung|Verschiedene Zeitschaltungen]]
              data-set="remoteControl subwoofer-temporary-level -6"
              data-icon="">-6</div></li>
      <li><div data-type="push" data-device="AvReceiver"
              data-set="remoteControl subwoofer-temporary-level -2"
              data-icon="">-2</div></li>
      <li><div data-type="push" data-device="AvReceiver"
              data-set="remoteControl subwoofer-temporary-level 0"
              data-icon="">0</div></li>
      <li><div data-type="push" data-device="AvReceiver"
              data-set="remoteControl subwoofer-temporary-level +3"
              data-icon="">2</div></li>
      <li><div data-type="push" data-device="AvReceiver"
              data-set="remoteControl subwoofer-temporary-level +9"
              data-icon="">9</div></li>
      <li><div data-type="push" data-device="AvReceiver"
              data-set="remoteControl subwoofer-temporary-level +C"
              data-icon="">12</div></li>
    </ul>
</div>
<div data-type="label" class="cell">Woofer</div>
</div>
</pre>


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


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:temperature''' lauten.


<div id="Beispiel_dimmer">'''Dimmer'''</div>
Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.


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


Minimalvariante
;Template-Seite
<pre>  
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.
<div data-type="dimmer" data-device="HUEDevice1"
<syntaxhighlight lang="html">
        data-get-on="!off" data-get-off="off"
<div data-type="symbol"
        data-set="pct"</div>
    data-device="dummy1">
</pre>
</syntaxhighlight>


Mit Anzeige der Dimstufe
;Haupt-Seite
<pre>
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.
<div data-type="dimmer" data-device="HUEDevice1"
<syntaxhighlight lang="html" highlight="6">
      data-get="onoff"
[...]
      data-get-on="1" data-get-off="0"
<body>
      data-set=""
<div class="gridster">
      data-set-on="on" data-set-off="off"
  <ul>
      data-dim="pct">
      <li data-row="1" data-col="1" data-sizey="1" data-sizex="1">
        <div data-template="template_symbol.html"></div>
      </li>
  </ul>
</div>
</div>
</pre>
Dimmer Widget für MilightDevice
<pre>
<div data-type="dimmer"
  data-device="SonstWas"
  data-get="brightness"
  data-get-off="0"
  data-get-on="[1-9][0-9]*"
  data-set-on="on"
  data-set-off="off"
  data-dim="dim"
  data-min="0"
  data-max="100"
></div>
</pre>
<div id="Beispiel_homestatus">'''Homestatus'''</div>
Beispiel rechts im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
      data-get-on='["1","2","3","4"]'
      data-alias='["Home","Night","Away","Holiday"]'
      data-icons='["fa-home","fa-bed","fa-car","fa-suitcase"]'>
</div>
</pre>
Beispiel links im Bild:
<pre>
<div data-type="homestatus" data-device='dummy1'
        data-get-on='["home","asleep","absent","gone","gotosleep"]'
        data-alias='["Home","Night","Away","Holiday","Retire"]'
        data-icons='["fa-fire","fa-film","fa-plus","fa-car","fa-tint"]'
        data-version='residents'>
</div>
</pre>
[[Datei:homestatus_tabletUI.png]]
<div id="Beispiel_image">'''Image'''</div>
Erzeugt ein Widget mit einem Bild aus dem www, das alle 5 Sekunden aktualisiert wird (hier eine Wetterkarte vom DWD).
<pre>
<div data-type="image"
    data-size="80%"
    data-url="http://www.dwd.de/wundk/wetter/de/Deutschland.jpg"
</div>
</pre>
[[Datei:image_tabletUI.jpg]]
Example for how to add an image to the dashboard which its URL is delivered by a Fhem module like PROPLANTA:
<pre>
<div data-type="image" data-device="Wetter1"
    data-get="fc0_weatherDayIcon"
    data-size="40px"
    class="cell">
</div>
</pre>
<div id="Beispiel_label">'''Label'''</div>
Example for HM-WDS40-TH-I Funk-Temperatur-/Feuchtesensor innen
<pre>
STATE  T: 20.0 H: 61
</pre>
<pre>
<div data-type="label" data-device="THSensorWZ"
    data-part="2" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ" data-part="4"
    data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>
But the same result can reached by getting single readings:
<pre>
humidity    58
temperature 20.1
</pre>
<pre>
<div data-type="label" data-device="THSensorWZ"
    data-get="temperature" data-unit="%B0C%0A" class="cell big"></div>
<div data-type="label" class="cell">Temperatur</div>
<div data-type="label" data-device="THSensorWZ"
    data-get="humidity" data-unit="%" class="cell big"></div>
<div data-type="label" class="cell">Luftfeuchte</div>
</pre>
Example for how to influence the color of the label according to value limits
<pre>
<div data-type="label"
    data-device="OutTemp"
    data-limits='[-73,10,23]'
    data-colors='["#6699FF","#AA6900","#FF0000"]'
    data-unit="%B0C%0A"
    class="cell big">
</div>
</pre>
Example for how to create a widget for shutter via push: show state and set up/down
<pre>
<div data-type="switch"
    data-device="wzRollo"
    data-get-on="up"
    data-get-off="down"
    data-icon="fa-bars"
    class="cell" >
</div>
<div data-type="label"
    class="cell">Rollo</div>
</pre>
Example for how to create a label for a time value in short format with usage of RegEx.
<pre>
<div data-type="label"
    data-device="dummy1"
    data-part="(\d\d\.\d\d\.).*"
    class="cell">
</div>
</pre>
Example for how to show two labels in one line.
<pre>
<div class="">
  <div type="label" device="OnSunrise" class="inline"></div>bis
  <div type="label" device="OnSunset" class="inline"></div>
</div>
</pre>
Beispiel für die Anzeige des UV-Indexes und der Abhängigkeit der anzuzeigenden Farbe.
<pre>
  <div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
        data-get="fc0_uv"
        data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
  <div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc0_date"></div>
  <div data-type="label" class="wider cell bigger" data-device="ProVorhersage"
        data-get="fc1_uv"
data-limits="[-2, 2, 5, 7, 10]"
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div>
  <div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc1_date"></div>
</pre>
[[Datei:label_tabletUI.jpg]]
<div id="Beispiel_pagetab">'''Pagetab'''</div>
Example for a tab menu to switch smoothly between multiple pages. Multiple pagetabs in a template file: menu.html
<pre>
<html>
<body>
    <header>MENU</header>
    <div class="cell">
        <div data-type="pagetab" data-url="index.html"  data-icon="fa-home" class="cell"></div>
        <div data-type="pagetab" data-url="index_2.html" data-icon="fa-sliders" class="cell"></div>
        <div data-type="pagetab" data-url="index_3.html" data-icon="fa-music" class="cell"></div>
        <div data-type="pagetab" data-url="index_4.html" data-icon="fa-hotel" class="cell"></div>
        <div data-type="pagetab" data-url="index_5.html" data-icon="fa-music" class="cell"></div>
        <div data-type="pagetab" data-url="index_6.html" data-icon="fa-database" class="cell"></div>
        <div data-type="pagetab" data-url="index_7.html" data-icon="fa-fax" class="cell"></div>
    </div>
</body>
</body>
</html>
[...]
</pre>
</syntaxhighlight>


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


<div id="Beispiel_playstream">'''Playstream'''</div>
=== Widget-Gruppen ===
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.


Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.
=== Verwendung von Variablen ===
==== Einfaches Beispiel ====
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.


<pre>
In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.
    <div data-type="playstream" data-url="http://radioeins.de/stream"></div>
    <div data-type="label" class="darker">Radio eins</div>
</pre>


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


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


Example for how to create a push button widget to trigger all devices on:
==== Wetter-Slider mit Template ====
In diesem Beispiel wird ein [[FTUI Widget Slider|Slider-Widget]] erstellt, welches die verschiedenen Tage eines Wetterberichtes anzeigt. Dabei wird für den Wetterbericht des jeweiligen Tages immer dasselbe Template verwendet um nicht für jeden Tag ein eigenes Widget schreiben zu müssen.


<pre>
;Template-Seite
<div data-type="push"  
<syntaxhighlight lang="html">
    data-device="LightAll"  
<div class="left">
    data-cmd="trigger"  
  <div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="&deg;C"></div>
    data-set="on"  
  <div class="inline">
    class="cell">
      <div data-type="label" data-device="AgroWeather" data-get="par02"></div>
      <div data-type="weather" data-device="AgroWeather" data-get="par02"></div>
      min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="&deg;C"></div>
  </div>
</div>
</div>
</pre>
<div class="left">
 
  <div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div>
 
  <div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div>
Beispiel für zwei horizontale Buttons:
 
<pre>
<div class="cell">
    <div class="doublebox-h">
        <div data-type="push" data-device="Rollo"
            data-icon="fa-angle-up" data-background-icon="fa-square-o"
            data-set="up">
        </div>
        <div data-type="push" data-device="Rollo"
            data-icon="fa-angle-down" data-background-icon="fa-square-o"
            data-set="down">
        </div>
    </div>
</div>
</pre>
 
[[Datei:push1.png]]
 
 
Beispiel für zwei quadratische vertikale Buttons:
 
<pre>
<div class="cell">
    <div class="doublebox-v">
        <div data-type="push" data-device="Rollo"
            data-icon="fa-chevron-up" data-background-icon="fa-square-o"
            data-set="up">
        </div>
        <div data-type="push" data-device="Rollo"
            data-icon="fa-chevron-down" data-background-icon="fa-square-o"
            data-set="down">
        </div>
    </div>
</div>
</pre>
 
[[Datei:push2.png]]
 
 
<div id="Beispiel_rotor">'''Rotor'''</div>
 
Example for a rotor widget, which switches between to days of weather forecast
 
<pre>
<div data-type="rotor" class="fade">
<ul>
  <li>
    <div data-type="label" class="darker">Heute</div>
    <div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="big"></div>
    <div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class=""></div>
    <div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="large"></div>
  </li>
  <li>
    <div data-type="label" class="darker">Morgen</div>
    <div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="big"></div>
    <div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class=""></div>
    <div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="large"></div>
  </li>
</ul>
</div>
</pre>
 
 
 
<div id="Beispiel_select">'''Select'''</div>
 
Erzeugt zwei Comboboxen zur Auswahl des Eingang eines 2-Zonen-AV-Receivers. Die Liste für Zone2 ist fest, die Liste für Zone1 wird von Fhem übergeben.
 
<pre>
<div class="cell wider">
          <div data-type="label" class="inline wider">Zone2</div>
          <div data-type="select" data-device="AvReceiverZ2" data-items='["Airplay","Webradio","BD/DVD","PHONO"]' data-get="input" data-set="input" class="cell w2x" ></div>
          <div></div>
          <div data-type="label" class="inline">Zone1</div>
          <div data-type="select" data-device="AvReceiver" data-list="inputs" data-get="input" data-set="input" class="cell w2x" ></div>
</div>
</pre>
 
[[Datei:select_tabeltUI.png]]
 
 
<div id="Beispiel_slider">'''Slider'''</div>
 
 
Slider mit einstellbaren Werten von 10 bis 90:
 
<pre>
<div data-type="slider"
    data-device='Dummy1'
    data-min="10"
    data-max="90"
    class="cell" >
</div>
</div>
<div data-type="label" class="cell">Light1</div>
</syntaxhighlight>
</pre>
 
[[Datei:slider_tabletUI.png]]


 
;Haupt-Seite
Horizontal angeordneter Slider:
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.
 
<syntaxhighlight lang="html">
<pre>
[...]
<div data-type="slider"
<div data-type="swiper">
    data-device='Dummy1'  
<ul>
    data-min="0"  
  <li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li>
    data-max="100"  
  <li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li>
    class="horizontal"  
  <li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li>
  <li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li>
</ul>
</div>
</div>
</pre>
[...]
</syntaxhighlight>


[[Datei:slider_tabletUI2.jpg]]
== JavaScript-Funktionen ==
 
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.
 
<div id="Beispiel_switch">'''Switch'''</div>
 
Schalter. Usage of RegEx pattern for state request:
 
<pre>
<div data-type="switch" class="cell"
            data-device="MILIGHT_Zone1_Wohnzimmer"
            data-get-on="on.*"
            data-get-off="off"></div>
</pre>
 
[[Datei:switch.png]]
 
Beispiel für eine Gruppe von Schaltern, um zwischen vier verschiedenen Werten eines device umzuschalten:
 
<pre>
<div class="cell left">
<div data-type="switch" data-device="dummy1"
      data-get-off="((?!Wert1).)*"
      data-get-on="Wert1" class="cell" ></div>
<div data-type="label" class="cell">Wert1</div>
<div data-type="switch" data-device="dummy1"
      data-get-off="((?!Wert2).)*"
      data-get-on="Wert2" class="cell" ></div>
<div data-type="label" class="cell">Wert2</div>
<div data-type="switch" data-device="dummy1"
      data-get-off="((?!Wert3).)*"
      data-get-on="Wert3" class="cell" ></div>
<div data-type="label" class="cell">Wert3</div>
<div data-type="switch" data-device="dummy1"
      data-get-off="((?!Wert4).)*"
      data-get-on="Wert4" class="cell" ></div>
<div data-type="label" class="cell">Wert4</div>
</div>
</pre>
 
[[Datei:switch4.png]]
 
 
<div id="Beispiel_symbol">'''Symbol'''</div>
 
Example for a tristate icon
 
<pre>
<div data-type="symbol" data-device="dummy1"
    data-get-on='["wert1","wert2","wert3"]'
    data-icons='["fa-arrow-up","fa-user","fa-arrow-down"]'
    data-on-colors='["SeaGreen","SlateBlue","IndianRed"]'
    class="cell big">
</div>
</pre>
 
 
Example for a tristate icon with blink and spin animation
 
<pre>
<div data-type="symbol" data-device="dummy1"
    data-icons='["fa-exclamation-triangle fa-blink","fa-exclamation-circle","fa-cog fa-spin"]'
    data-on-colors='["Crimson","GoldenRod","SeaGreen"]'
    data-get-on='["Wert1","Wert2","Wert3"]' >
</div>
</pre>
 
 
Example for a battery level control with RegEx
 
<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
    data-icons='["oa-measure_battery_100","oa-measure_battery_75","oa-measure_battery_50","oa-measure_battery_25","oa-measure_battery_0"]'
    data-get-on='["3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]'
    data-on-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'>
</div>
</pre>
 
 
 
Example for a battery level control with greater-equal compare and 90° rotated symbols
 
<pre>
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
    data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'
    data-get-on='["0","2","2.4","2.7","3.0"]'
    data-on-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'>
</div>
</pre>
 
 
<div id="Beispiel_thermostat">'''Thermostat'''</div>
 
Configure as data-device='...' that item which delivers temp and desired-temp as reading.
 
Default parameters are:
<pre>
data-get="desired-temp" data-temp="measured-temp" data-set="desired-temp"
</pre>
 
Therefor for HomaMatic HM-CC-RT-DN this is sufficient.
 
<pre>
<div data-type="thermostat" data-device='KH_Clima' class="cell"></div>
</pre>
 
The long format looks like this:
 
<pre>
<div data-type="thermostat"
    data-device="KH_Clima"
    data-get="desired-temp"
    data-temp="measured-temp"
    class="cell">
</div>
</pre>
 
 
Example for MAX!:
<pre>
<div data-type="thermostat" data-device="HZ_Tuer"
    data-valve="valveposition"
    data-get="desiredTemperature"
    data-temp="temperature"
    data-set="desiredTemperature"
    class="cell">
</div>
</pre>
 
The wigets will show the valve value only in case of a valid data-valve attribute. The default for data-valve ist null. That means, a empty data-valve attribute hides the valve label for the widget.
 
[[Datei:thermostat.png]]
 
 
<div id="Beispiel_weather">'''Weather'''</div>
 
Das Widget fügt ein dem Wetter entsprechendes Bild ein. Die Daten können durch Fhem-Module wie PROLANTA, OPENWEATHER und Weather bereitgestellt werden.
Add 'big' or 'bigger' to CSS class to get a bigger weather icon.
 
Beispiel:
<pre>
<div data-type="weather"
    data-device="Weather"
    data-get="fc0_weatherDay"
    class="cell big">
</div>
</pre>
 
[[Datei:weather.png]]
 
== Icon-Konfiguration ==
 
* Eingebaute Icons: Diese haben das ftui-Präfix. Zurzeit sind folgende verfügbar: ftui-window, ftui-door
 
* Mehr als 500 Icons von "http://fortawesome.github.io/Font-Awesome/icons" verfügbar. Einfach den Icon-Namen angeben (Suffix "fa-" nicht vergessen, Z.B. <code>data-icon="fa-volume-up"</code>
 
* Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.
<pre>
  <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
  <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
</pre>
 
Diese font icons haben das Präfix 'fs-' bzw. 'oa-'.
 
Beispiel bei einem Schalter:
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>
 
 
Und so als großes Symbol:
<pre>
<div data-type="symbol" data-device='dummy1'
        data-icon="oa-status_frost"
        data-on-color="#bb3232"
        data-get-on="on"
        data-get-off="!on"
        class="bigger">
</div>
</pre>




Die Icons kann man auch etwas dicker darstellen mit den Zusatz bold: <code>data-icon="oa-secur_locked bold"</code>
Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></syntaxhighlight>




Die Namen der verfügbaren Icons findet man auch in den CSS Files (openautomation.css / fhemSVG.css)
Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown(&quot;WZ.Thermostat_Climate&quot;,&quot;up&quot;)}')">+</div></syntaxhighlight>




== Spezial ==
Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:
Folgender Befehl setzt einen direkten Befehl an Fhem ab (<code>set dummy1 off</code>):
<syntaxhighlight lang="html">
<pre>
<div data-type="label" data-device="dummy1" data-get="temperature"></div>
    <div onclick="setFhemStatus('set dummy1 off')">All off!</div>
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div>
</pre>
</syntaxhighlight>


== Eigene Widgets erstellen ==
Wie eigenen Widgets für FTUI erstellt werden können, ist auf der Seite [[FTUI eigene Widgets]] beschrieben.


Eine Schritt für Schritt Anleitung für das erste eigene Widget gibts hier [[FTUI eigene Widgets - Beispiel]]


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


== Links ==
== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* [http://forum.fhem.de/index.php/topic,37378.0.html User-Demos]
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}
* [[FTUI_Snippets|Snippets]]
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]
* [https://waschto.eu/fhem-und-tabletui-livedemo/ FHEM und TabletUI Live-Demo]
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]


[[Kategorie:FHEM Frontends]]
[[Kategorie:FHEM Tablet UI|!]]

Aktuelle Version vom 6. Dezember 2023, 20:22 Uhr

FHEM Tablet UI
Zweck / Funktion
Oberfläche für FHEM
Allgemein
Typ Inoffiziell
Details
Dokumentation Thema
Support (Forum) TabletUI
Modulname n.a.
Ersteller setstate (Forum )
Wichtig: sofern vorhanden, gilt im Zweifel immer die (englische) Beschreibung in der commandref!

Diese Version der Tablet UI wird nicht weiterentwickelt (siehe diesen Forenbeitrag).

Es gibt eine neue Version 3 hier: FHEM Tablet UI v3

Achtung: Version 3 ist nicht mit Version 2 kompatibel. Ein Umstieg auf FTUI3 hat eine Neu-Programmierung der Oberfläche zur Folge. FHEM Tablet UI v2 (FTUI2) ist ein leichtgewichtiges aber funktionsreiches Frontend-Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Es basiert auf HTML/CSS/JavaScript und stellt somit keine zusätzlichen Anforderungen an den FHEM-Server.

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

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

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

Beispiel für ein mit FHEM Tablet UI erstelltes User-Interface

Installation

Die Installation von FHEM Tablet UI v2 erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:

  • Dateien aus dem GitHub-Repository herunterladen
  • FHEM konfigurieren (HTTPSRV-Device erstellen, FHEMWEB-Attribut longpoll einstellen)
  • Eine Beispieldatei anlegen


Info blue.png
Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung Stable build using apt installiert wurde. Ist dies nicht der Fall, muss der Pfad /opt/fhem dementsprechend angepasst werden.



1. Zuerst müssen alle Dateien von FHEM Tablet UI in das FHEM-Verzeichnis /opt/fhem/www kopiert werden. Das geht mit folgendem update-Befehl über die FHEM-Befehlszeile.

update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
Schritt 1: Dateien kopieren


2. Anschließend ist ein neues HTTPSRV-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.

define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI
Schritt 2: HTTPSRV-Device anlegen


Info blue.png
Dieser Schritt kann ausgelassen werden, wenn die Funktionalitäten von FHEMWEB ausreichend sind. Dann muss FTUI aber in weiterer Folge unter der URL http(s)://<fhem-server>:8083/fhem/tablet/index.html aufgerufen werden und es wird kein Link auf FTUI in der FHEM GUI erstellt. Vorteil ist aber, dass das FHEMWEB-Caching verwendet werden kann. Siehe dieser Beitrag.


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

attr WEB longpoll websocket
bzw. bei Problemen mit websocket
attr WEB longpoll 1
Schritt 3: longpoll einstellen


4. Weil FTUI noch nichts anzuzeigen hat, wird die Datei /opt/fhem/www/tablet/index-example.html nach /opt/fhem/www/tablet/index.html kopiert.

sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html
Schritt 4: index.html erstellen


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


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

Update

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

1. Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:

update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt


2. Update der geänderten Dateien durch Eingabe von:

update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt


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.

update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt

Beachte: Das Ergebnis des o.g. Befehls wird in FHEM/controls.txt eingetragen, siehe auch Update#update_add

Konfiguration

DOCTYPE

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

<!DOCTYPE html>
<html>
    <head>...</head>
    <body>...</body>
</html>

META-Parameter

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

Die Parameter sind immer nach diesem Schema aufgebaut: 

<meta name="[Parameter-Name]" content="[Parameter-Wert]">

Verbindung zu FHEM

Parameter-Name Standard-Wert Mögliche Werte Beschreibung
web_device WEB String FHEM-Device, welches für das Polling verwendet wird
longpoll 1 0, 1

0: Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)

1: Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.

longpoll_type websocket websocket, ajax, 0

websocket: Für die Aktualisierung der Daten wird das Websocket-Protokoll verwendet. Werden vom Browser keine Websockets unterstützt, gibt es einen automatischen Fallback auf Ajax.

ajax: Ajax wird für die Aktualisierung verwendet.

0: Longpoll deaktiviert, Shortpoll wird verwendet.

longpoll_filter .* RegEx Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.
longpoll_maxage 240 Integer Kommen in diesem Zeitraum (Sekunden) keine Longpoll-Events bei FTUI an, wird die Verbindung als "disconnected" angesehen und ein neuer Verbindungsversuch wird gestartet.
shortpoll_interval 900 Integer Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet
shortpoll_only_interval 30 Integer Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein
fhemweb_url /fhem/ Integer URL zu FHEM. Wird benötigt wenn FTUI auf einem anderen als dem FHEM Server läuft oder nicht im Standard-Pfad installiert ist.

Hinweis: Wenn FHEM auf einem anderem Server/Domain läuft muss man das "CORS" Attribut im FHEMWEB Modul (s.o.) auf 1 setzen, sonst bekommt man Cross Origin Fehler.

Funktionalität

Parameter-Name Standard-Wert Mögliche Werte Beschreibung
debug 0 0 - 5 Log-Level
toast 5 Integer Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.
toast_position bottom-left Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.
lang de de Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)
username String Benutzername für eine Basic-Authentifierung *
password String Passwort für eine Basic-Authentifizierung *

* Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von longpoll=1 (ajax) ist daher notwendig.

Toast-Nachrichten

Toast-Nachrichten

Tablet-UI liefert Informationen darüber, was im Moment gerade passiert. Das geschieht über Toast-Nachrichten, die in der Standardeinstellung unten links im Browser auftauchen.

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

Die Position der Toast-Nachrichten kann über den Meta-Tag meta name='toast_position' festgelegt werden. Für oben-mittig müsste folgender Code eingefügt werden: 

<meta name='toast_position' content='top-center'>

Möglich sind folgende Positionen:

  • top-left
  • top-right
  • bottom-left
  • bottom-right
  • top-center
  • bottom-center
  • mid-center

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

<meta name='toast' content='2'>

Navigationsmethoden

Unterschied zwischen Pagetab und Pagebutton:

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

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

Pagelink: damit kann man beliebige Widgets kapseln und vorhandene Pagebutton-Seiten ansteuern FTUI Widget Link

Gestaltung

Layout-Optionen

Farben

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

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

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

Empfohlene Farben sind z.B.:

  • Orange: #aa6900
  • Rot: #ad3333
  • Grün: #32a054
  • Blau: #6699FF
  • Grau: #8C8C8C

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

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

Hier am Beispiel eines blauen Farbschemas: 

<html>
<head>
   [...]
   <link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" />
   [...]
</head>

Diese Schema-Dateien ändern alle Widgets.

  • default

    default

  • fhem-blue-ui.css

    fhem-blue-ui.css

  • fhem-green-ui.css

    fhem-green-ui.css

  • fhem-mobile-ui.css

    fhem-mobile-ui.css

  • fhem-darkblue-ui.css

    fhem-darkblue-ui.css

  • fhem-darkgreen-ui.css

    fhem-darkgreen-ui.css

Einzelne Widgets können durch Hinzufügen der jeweiligen CSS-Klasse geändert werden.

CSS-Styles

Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt CSS-Klassen aufgeführt.

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

CSS-Klassen

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

sheet/row/cell-Layout
Klasse Beschreibung
sheet Startet eine neue Tabelle
row Neue Reihe in der aktuellen Tabelle
cell Neue Zelle (bzw. Spalte) in der aktuellen Reihe
cell-1-x Neue Zelle in der aktuellen Reihe mit einer festen Breite von X (z.B.: cell-1-3 (33%), cell-1-4 (25%))
cell-x Neue Zelle in der aktuellen Reihe mit einer festen Breite von X in Prozent (z.B.: cell-20 (20%), cell-40 (40%))
left-align Inhalt der Zelle linksbündig
right-align Inhalt der Zelle rechtsbündig
bottom-align Inhalt der Zelle am unteren Rand
top-align Inhalt der Zelle am oberen Rand
center-align Inhalt der Zelle zentriert
row/col-Layout
Klasse Beschreibung
col Neue Spalte in der aktuellen Zeile. Breite automatisch.
col-1-x Neue Spalte in der aktuellen Zeile. Feste Breite von X (z.B.: col-1-3 (33%), col-1-4 (25%))
col-x Neue Spalte in der aktuellen Zeile. Feste Breite von X Prozent (z.B.: col-20 (20%), col-40 (40%))
hbox/vbox-Layout
Klasse Beschreibung
vbox Vertikale Box - Inhalte übereinander
hbox Horizontale Box - Inhalte nebeneinander
card Eine "Haupt"-Box
phone-width Breite darf nicht unter die Display-Breite des Gerätes sinken
full-height Inhalt geht über die gesamte Höhe des Browser-Fensters (100% viewport height)
full-width Inhalt geht über die gesamte Breite des Browser-Fensters (100% width)
grow-0 Box darf nicht wachsen
grow-1 Standardgröße der Box
grow-2 Box darf um das doppelte wachsen
grow-x Box darf um das X-fache wachsen
items-top Inhalte der Box werden oben ausgerichtet
items-center Inhalte der Box werden zentriert
items-bottom Inhalte der Box werden unten ausgerichtet
items-space-between Übriger Platz zwischen den Elementen in der Box
items-space-around Übriger Platz um die Elemente in der Box
Generelle Klassen für die Positionierung
Klasse Beschreibung
inline Positioniert Elemente in einer Reihe, kein Zeilenumbruch
newline Positioniert Elemente jeweils in einer neuen Zeile, Zeilenumbruch
top-space 15px zusätzlicher Platz oben
top-space-2x 30px zusätzlicher Platz oben
top-space-3x 45px zusätzlicher Platz oben
left-space 15px zusätzlicher Platz links
left-space-2x 30px zusätzlicher Platz links
left-space-3x 45px zusätzlicher Platz links
right-space 15px zusätzlicher Platz rechts
right-space-2x 30px zusätzlicher Platz rechts
right-space-3x 45px zusätzlicher Platz rechts
top-narrow -15px näher am oberen Rand
top-narrow-2x -30px näher am oberen Rand
top-narrow-10 -10px näher am oberen Rand
left-narrow 15px weiter links
left-narrow-2x 30px weiter links
left-narrow-3x 45px weiter links
right-narrow 15px weiter rechts
right-narrow-2x 30px weiter rechts
right-narrow-3x 45px weiter rechts
centered Horizontal zentriert (muss im Eltern-<div> gesetzt werden)
wider 15px Abstand rund um das Element
narrow Weniger Abstand zum Element darüber
fullsize 100% Breite und Höhe
compressed Switches und Symbole bekommen Breite und Höhe von 1em statt 2em, damit weniger Platz rundum das Icon benötigt wird
height-narrow Widgets bekommen eine fest definierte Höhe und Zeilenhöhe, um sie leichter nebeneinander anordnen zu können
w1x Einfache fixe Breite
w2x Doppelte fixe Breite
w3x Dreifache fixe Breite
maxw40 Maximale Breite 40px
doublebox-v Container, in dem zwei kleine Elemente (z.B. Switches) übereinander platziert werden können
doublebox-h Container, in dem zwei kleine Elemente (z.B. Switches) nebeneinander platziert werden können
triplebox-v Container, in dem drei kleine Elemente (z.B. Switches) übereinander platziert werden können
right Element wird rechtsbündig angeordnet
Vordergrundfarben
Klasse Beschreibung
red Vordergrundfarbe rot
green Vordergrundfarbe grün
blue Vordergrundfarbe blau
lightblue Vordergrundfarbe hellblau
orange Vordergrundfarbe orange
gray Vordergrundfarbe grau
lightgray Vordergrundfarbe hellgrau
white Vordergrundfarbe weiß
black Vordergrundfarbe schwarz
mint Vordergrundfarbe minzgrün
yellow Vordergrundfarbe gelb
Hintergrundfarben
Klasse Beschreibung
bg-red Hintergrundfarbe rot
bg-green Hintergrundfarbe grün
bg-blue Hintergrundfarbe blau
bg-lightblue Hintergrundfarbe hellblau
bg-orange Hintergrundfarbe orange
bg-gray Hintergrundfarbe grau
bg-lightgray Hintergrundfarbe hellgrau
bg-white Hintergrundfarbe weiß
bg-black Hintergrundfarbe schwarz
bg-mint Hintergrundfarbe minzgrün
bg-yellow Hintergrundfarbe gelb
Rahmen
Klasse Beschreibung
verticalLine Grauer Linie am rechten Rand des Elements
border-black Schwarzer Rahmen um das Element
border-white Weißer Rahmen um das Element
border-orange Oranger Rahmen um das Element
border-red Roter Rahmen um das Element
border-green Grüner Rahmen um das Element
border-mint Minzgrüner Rahmen um das Element
border-lightblue Hellblauer Rahmen um das Element
border-blue Blauer Rahmen um das Element
border-gray Grauer Rahmen um das Element
border-yellow Gelber Rahmen um das Element
border-lightgray Hellgrauer Rahmen um das Element
Größen
Klasse Beschreibung
mini Setzt die Größe des Elementes auf 50%
tiny Setzt die Größe des Elementes auf 60%
small Setzt die Größe des Elementes auf 80%
normal Setzt die Größe des Elementes auf 100%
large Setzt die Größe des Elementes auf 125%
big Setzt die Größe des Elementes auf 150%
bigger Setzt die Größe des Elementes auf 200%
tall Setzt die Größe des Elementes auf 350%
great Setzt die Größe des Elementes auf 450%
grande Setzt die Größe des Elementes auf 600%
gigantic Setzt die Größe des Elementes auf 144px
Schriftstil
Klasse Beschreibung
thin dünne Schrift
bold fette Schrift
darker Schriftfarbe grau
truncate Text wird - wenn nötig - abgeschnitten und mit "..." ergänzt
Sonstiges
Klasse Beschreibung
blank Öffnet die angegebene URL in einem neuen Fenster
transparent Element erscheint komplett durchscheinend (somit nicht sichtbar; opacity: 0)
half-transparent Element ist halb durchscheinend (opacity: 0.5)
blurry Element wird in einen stark verschwommen, grauen Schatten umgewandelt
shake Element zittert stark für einen unendlichen Zeitraum. Kann z.B. für eine Alarmglocke verwendet werden.
fail-shake Element wackelt kurz hin und her und bleibt dann stehen
marquee Element wandert wiederholt von rechts nach links
icon round Erzeugt einen Hintergrund mit abgerundeten Kanten
icon square Erzeugt einen Hintergrund mit eckigen Kanten
readonly Manuelle Änderung des Device-Zustandes nicht möglich
blink Blinkende Animation für Label- oder Switch-Widget
rotate-90 Element (z.B. Bild) um 90° rotieren
horizontal Element horizontal ausrichten
circleborder Runder Rahmen um ein Label-Widget
autohide Versteckt das Element, wenn das angegebene Reading ungültig ist
notransmit Verhindert den Versand von Befehlen an FHEM
tap Durch einfaches Antippen zum gewünschten Wert springen
FS20 Konvertiert den Wertebereich 0...100 in das von FS20-Dimmern erwartete Format
value Zeigt ein Label am Element, das den aktuellen Wert enthält
novalue Zeigt den Wert nicht als Text, nur als Grafik an
timestamp Zeigt den Timestamp eines Readings statt dessen Inhalt
percent Zeigt nicht den ausgelesenen Wert an, sondern rechnet ihn in eine Prozentangabe zw. dem angegebenem Mindest- und Maximalwert um.
nocache Erzwingt das Neuladen eines Elementes (z.B. Bild, Seite, ...) bei jedem Aufruf statt der Zwischenspeicherung im Browser-Cache
fade Element wird aus-, das nächste in der Liste eingeblendet
rotate Vertikaler Rotationseffekt
nolabels Beschriftungen werden ausgeblendet
default Seite, die standardmäßig geladen wird bzw. Button, der standardmäßig "EIN" sein soll
prefetch Browser lädt den Inhalt im Hintergrund bevor er angezeigt wird um Ladezeit zu sparen
circulate Anzeige startet bei Überschreiten des "max"-Wertes wieder beim "min"-Wert
valueonly Zeigt den Wert in Textform statt eines Balkens
positiononly Stellt nur die aktuelle Position dar, nicht einen ganzen Balken vom Startpunkt bis zur aktuellen Position
lineIndicator Erzeugt eine vertikale Linie zur Anzeige der ausgewählten Farbe
barIndicator Erzeugt eine horizontale Linie zur Anzeige der ausgewählten Farbe
roundIndicator Erzeugt einen Kreis zur Anzeige der ausgewählten Farbe
dim-tick Färbt die Skalenstriche in einer Farbe aus einem Helligkeitsbereich ein
dim-front Färbt den Einstellhebel in einer Farbe aus einem Helligkeitsbereich ein
dim-back Färbt die Skalenhintergrund in einer Farbe aus einem Helligkeitsbereich ein
hue-tick Färbt die Skalenstriche in einer Farbe aus einem Farbbereich ein
hue-front Färbt den Einstellhebel in einer Farbe aus einem Farbbereich ein
hue-back Färbt den Skalenhintergrund in einer Farbe aus einem Farbbereich ein
warn Erzeugt einen Benachrichtigungsicon über einem Icon
activate Lädt die verlinkte Seite eines Pagetab-Widgets automatisch, wenn der Status eines Devices einem Wert aus dem Attribut data-get-on entspricht.
labelright Platziert die Beschreibung rechts unter dem Icon statt zentriert
interlock Verhindert, dass Popup-Elemente manuell geschlossen werden
keepopen Verhindert, dass sich das Circle-Menü nach Klick auf ein Objekt schließt
noshade Hintergrund wird beim Öffnen eines Circle-Menüs nicht abgedunkelt

Überlagerung von Text und Bild

FTUI Text auf Bild.png

Texte können auf Bildern positioniert werden: 

<li data-row="1" data-col="4" data-sizey="4" data-sizex="6">
    <div class="display">
        <div data-type="image" data-url="https://picsum.photos/200/125/?random" data-size="100%"></div>
        <div class="display-center bigger" data-type="label">Text1</div>
        <div class="display-topright bigger right-space top-space" data-type="label">Text2</div>
        <div class="ontop bigger" style="left: 120px; top: 50px">Text3</div>
    </div>
</li>

Zur Verfügung stehen folgende Grundpositionen:

  • display-topleft
  • display-topcenter
  • display-topright
  • display-centerleft
  • display-left
  • display-centerright
  • display-right
  • display-bottomleft
  • display-bottomcenter
  • display-bottomright

Feinjustage ist möglich über

  • right-space
  • top-space
  • left-space
  • bottom-space
  • right-space-2
  • top-space-2
  • left-space-2
  • bottom-space-2
  • right-space-3
  • top-space-3
  • left-space-3
  • bottom-space-3


FTUI Beispiel Positionierung.png

Verallgemeinert lassen sich auf diese Weise Objekte frei im Elternelement positionieren: 

    <div class="display" data-type="html">
        <div class="display-topcenter top-space big">Fenster</div>
        <div class="display-center fa fa-4x ftui-window"></div>
        <div class="display-bottomleft bottom-space left-space" data-type="label">Text</div>
    </div>

Icons

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

Verfügbare Icon-Schriftarten sind:

  • Eingebaute Icons ftui-window und ftui-door. Präfix ftui-. Beispiel: data-icon="ftui-door"
  • Font-Awesome: Mehr als 500 Icons zur Auswahl. Präfix fa-. Beispiel: data-icon="fa-volume-up"
  • Material Icons: Mehr als 900 Icons zur Auswahl. Präfix mi-. Beispiel: data-icon="mi-local_gas_station"
  • FHEM und OpenAutomation Icons: Präfix fs- und oa-. Beispiel: data-icon="oa-secur_locked"
  • Weather-Icons: Präfix wi . Beispiel: data-icon="wi wi-day-rain-mix"

Alternativ können auch Bilder Icons (bspw. png) über CSS verwendet werden. Bspw: 

<head>
  <style type="text/css">
        .logo-fhem {
            background: url(https://wiki.fhem.de/fhemlogo.png) no-repeat;
            width: 120px;
            height: 132px;
            background-size: contain;
        }
  </style>
</head>
<body>
  <div data-type="symbol" data-icon="logo-fhem"></div>
</body>

Widgets

Allgemeine Attribute

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

allgemeine Attribute
data-type Widget-Typ
data-device FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)
class CSS-Klassen für Aussehen und Formatierung des Widgets
Daten Empfangen
data-get Reading Name
data-get-on Wert für den Status on
data-get-off Wert für den Status off
Daten Senden
data-set Reading Name
data-set-on Wert für den Status on
data-set-off Wert für den Status off

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

Integrierte Widgets

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

  • button: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann
  • checkbox: Umschalter zwischen zwei definierten Zuständen
  • circlemenu: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
  • clock: Stellt eine einfache Uhr zur Verfügung
  • colorwheel: Farbpalette zur Auswahl von Farben
  • controlbutton: iOS-ähnlicher Button zum Schalten zwischen zwei Zuständen (z.B. on / off)
  • controller: iOS-ähnlicher vertikaler Schieberegler zum Einstellen eines Wertes
  • datetimepicker: Erstellt eine Auswahl für Datum/Uhrzeit
  • departure: Abfahrtszeiten öffentlicher Verkehrsmittel
  • dimmer: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert
  • eventmonitor:
  • homestatus: Auswahl für vier oder fünf definierte Zustände eines Objects (z.B.: FHEM Residents)
  • html:
  • iframe: Widget zum Einbinden externer Inhalte in einem Iframe
  • image: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann
  • input: Erstellen eines Texteingabefeldes
  • joinedlabel: verbindet mehrere Readings zu einem Feld
  • klimatrend: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt
  • knob: Erstellt einen Statusbalken auf einer Kreisbahn
  • label: Reading als Text anzeigen
  • level: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert
  • link: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM
  • Medialist:
  • multistatebutton: Variante des push-Widgets, welches den set-Befehl abhängig vom gelesenen Status ändert
  • notify: Blendet ein Hinweisfenster im Browser ein
  • pagebutton: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation
  • pagetab: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü
  • playstream: Abspielen eines Webradio-Streams per Button
  • popup: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element
  • progress: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste
  • push: Button, mit dem ein Befehl an FHEM gesendet werden kann
  • range: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen
  • readingsgroup: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde
  • rotor: Animiertes Umschalten von zwei oder mehr Widgets an einer Position
  • scale: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert
  • select: Combobox, die eine Liste an Werten zur Auswahl anzeigt
  • settimer: Zum Anzeigen und Einstellen einer Uhrzeit
  • simplechart: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird
  • slideout:
  • slider: Vertikaler Schieberegler zum Einstellen eines Wertes
  • spinner: Element, um Werte durch Drücken auf Plus-/Minus- oder Höher-/Tiefer-Icons zu ändern
  • swiper: Bietet die Möglichkeit, durch Wischen zwischen verschiedenen Seiten zu wechseln
  • switch: Button, um zwischen zwei Zuständen zu schalten (z.B. on / off)
  • symbol: Status eines Devices als Symbol darstellen (z.B. Fenster offen)
  • theme: Kontextspezifisches Design
  • thermostat: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann
  • volume: Einstellscheibe zur Änderung eines einzelnen Wertes
  • weather: Wettersymbol anzeigen
  • wind_direction: Anzeige der Windrichtung auf einer Windrose

3rd Party Widgets

Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.

  • agenda: Zeigt Kalendereinträge in einer Listenform an
  • analogclock: Analoguhr
  • automowerconnect: Für das Modul AutomowerConnect
  • calview: Zeigt Einträge aus einem CALVIEW-Device an
  • chart: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots
  • classchanger: Ändert seine CSS-Klassen je nach Status eines Devices
  • clicksound: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
  • dwdweblink: Grafische Anzeige DWD-Wetter-Weblink
  • filelog: Teile aus einem FHEM Logfile anzeigen
  • fullcalview:
  • gds:
  • maps: Kartendarstellung mit Google Maps API
  • highchart:
  • highchart3d:
  • itunes_artwork: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
  • javascript: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
  • kodinowplaying: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
  • loading:
  • meteogram:
  • mpdnowplaying: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
  • pinpad: Pinpad für z.B. eine Alarmanlage
  • postme: Liste des PostMe-Devices anzeigen
  • reload: auslösen eine Pagereloads
  • screensaver:
  • solarforecast: Anzeige der SolarForecast-Grafik im FHEM Tablet UI
  • sscamstrm: Integration von SSCam Streaming-Devices (Synology Surveillance Station Kameras) im FHEM Tablet UI
  • scrolllabel: Texte in Laufschrift darstellen
  • svgplot: Unveränderte Übernahme eine bestehenden SVG-Plots
  • todoist: einfaches widget für todoist
  • tts: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.
  • uwz: Anzeige der Warnungen der Unwetterzentrale
  • wakeup:
  • wdtimer: Visualisierung des WeekdayTimer Modul
  • weekprofile: Visualisierung des weekprofile Moduls
  • weatherdetail: Detaillierte Wettervorhersage über 4 Tage (Nutzt das Proplanta Modul)
  • videodetail: Video Widget für die FTUI

Anwendungsbeispiele

Durch die Verbindung von Widgets mit dem FHEM-Umfeld entstehen Lösungen für typische Anwendungen.

Templates

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

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:temperature lauten.

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

Einzelnes Widget

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

Template-Seite

Die Template-Seite soll in diesem Beispiel template_symbol.html genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt. 

<div data-type="symbol"
     data-device="dummy1">
Haupt-Seite

Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden. 

[...]
<body>
<div class="gridster">
   <ul>
      <li data-row="1" data-col="1" data-sizey="1" data-sizex="1">
         <div data-template="template_symbol.html"></div>
      </li>
   </ul>
</div>
</body>
[...]

Gridster-Element

Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden. 

<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li>

Widget-Gruppen

Die Template-Datei des ersten Beispiels kann natürlich auch mehrere Widgets auf einmal enthalten.

Verwendung von Variablen

Einfaches Beispiel

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.

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

Template-Seite

Die Template-Seite enthält nur ein einfaches Label-Widget und wird in diesem Beispiel template_label.html genannt. Um sie für mehrere Devices verwenden zu können, wird im Attribut data-device der Name des eigentlichen Devices durch den Parameter par01 ersetzt. 

<div data-type="label"
     data-device="par01"
     data-get="measured-temp"></div>
Haupt-Seite

Auf der Haupt-Seite wird die Template-Seite mit dem Attribut data-template eingebunden und ihr via Attribut data-parameter das jeweils gewünschte Device übergeben. 

[...]
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div>
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div>
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div>
[...]

Wetter-Slider mit Template

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

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

In der Haupt-Seite wird das Template dann für jede Slider-Seite eingebunden und das Reading für den jeweiligen Tag via Parameter übergeben. 

[...]
<div data-type="swiper">
<ul>
   <li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li>
   <li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li>
   <li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li>
   <li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li>
</ul>
</div>
[...]

JavaScript-Funktionen

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


Folgende Zeile setzt einen direkten Befehl an FHEM ab (set dummy1 off): 

<div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div>


Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")): 

<div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown(&quot;WZ.Thermostat_Climate&quot;,&quot;up&quot;)}')">+</div>


Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann: 

<div data-type="label" data-device="dummy1" data-get="temperature"></div>
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div>

Eigene Widgets erstellen

Wie eigenen Widgets für FTUI erstellt werden können, ist auf der Seite FTUI eigene Widgets beschrieben.

Eine Schritt für Schritt Anleitung für das erste eigene Widget gibts hier FTUI eigene Widgets - Beispiel

FAQ

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

Links

Abgerufen von „http://wiki.fhem.de/w/index.php?title=FHEM_Tablet_UI&oldid=38755“