FHEM Tablet UI: Unterschied zwischen den Versionen

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

Version vom 13. Februar 2017, 10:35 Uhr

FHEM Tablet UI (FTUI) ist ein leichtgewichtiges aber funktionsreiches Frontend-Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Es basiert auf HTML/CSS/JavaScript und stellt somit keine zusätzlichen Anforderungen an den FHEM-Server.

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

Für den Betrieb ist nur eine FHEM-Installation mit HTTPSRV-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

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

Getting started

Installation

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

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

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

Update

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

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

Konfiguration

META-Parameter

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

<meta name="<META-Parameter>" content="<Wert>">

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

Layout

Seit Version 2.5 werden die Gridster Kachel-Grössen, die Anzahl der Spalten und die Anzahl der Reihen dynamisch anhand der Bildschirmgrösse berechnet.

Möchte man die Anzahl der Spalten und Reihen fest vorgeben:

<meta name="gridster_cols" content="12">
<meta name="gridster_rows" content="9">

Mit folgendem Code kann man die Kachelgrössen fix definieren:

<meta name="widget_base_width" content="116">
<meta name="widget_base_height" content="131">

Zoom auf mobilen Endgeräten

Um automatische Skalierung und Zoom-Gesten auf mobilen Endgeräten zu unterbinden, kann folgender Meta-Tag im Kopf der Seite eingebunden werden:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

FHEM URL

Werden die FTUI Seiten von einem anderen Server als FHEM-HTTPSRV bereitgestellt, muss man die URL, unter der FHEM angesprochen wird, anpassen:

<meta name="fhemweb_url" content="/fhem/">

Styling

Farbe

Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form oder als RGB-Wert anzugeben. Zum Beispiel: Hex: #A3CFA3 RBG: rgb(163, 207, 163). Knallige Farben wie #ff0000 für Rot oder #00ff00 für Grün sollten vermieden werden. Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben. Hilfreich bei der Suche nach den Farbwerten ist der color picker: http://www.w3schools.com/tags/ref_colorpicker.asp oder diese Quelle: https://flatuicolors.com

CSS-Styles

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

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

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
tab	Fehler: Klasse nicht vorhanden
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

Widgets

Integrierte Widgets

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

agenda:
button: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.
calview:
chart: chart with similar capabilities as the FHEM plots
checkbox:
circlemenu: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
classchanger:
clicksound: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
clock: Stellt eine einfach Uhr zur Verfügung.
colorwheel:
datetimepicker:
departure: show timetable of public transport provider
dimmer: toogle button with a setter for on value
eventmonitor:
fullcalview:
gds:
highchart:
highchart3d:
homestatus: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
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
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.
joinedlabel: verbindet mehrere Readings zu einem Feld
klimatrend: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt.
knob:
kodinowplaying: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
label: Reading als Text anzeigen
level: vertical/horizontal bar to show values between min/max value
link: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM
loading:
medialist:
meteogram:
mpdnowplaying: zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
multistatebutton: Variante des push-Widgets das den set-Befehl abhängig vom gelesenen Status ändert.
notify:
pagebutton:
pagetab: Element to smoothly exchange the whole page with another page
playstream: Abspielen eines Webradio-Streams per Button
popup: a popup dialog which open on click on another widget
progress: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste
push: Button, mir dem ein Befehl an FHEM gesendet werden kann.
range:
readingsgroup: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde
reload: auslösen eine Pagereloads
rotor: Umschalten von zwei oder mehr Widgets an einer Position
screensaver:
select: Combobox, die eine Liste an Werten zur Auswahl anzeigt
settimer: zum anzeigen und einstellen einer Uhrzeit.
simplechart: simple XY line chart for one value (reads directly from FHEM log file)
slideout:
slider: vertical slider to select between min/max value
spinner:
svgplot:
swiper:
switch: Toggle any command to FHEM (e.g. on / off)
symbol: State als Symbol darstellen (z.B. Fenster offen)
thermostat: dial for heater thermostates to set desired value and show current value
tts:
uwz:
volume: dial to set a single value (e.g. 0-60)
wakeup:
wdtimer:
weather: Wettersymbol anzeigen
weekprofile:
Wind_direction: Anzeige der Windrichtung auf einer Windrose

3rd Party Widgets

weekdaytimer: Visualisierung des WeekdayTimer Modul

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.

Attribute einiger Widgets

Circlemenu

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

Link zu einem Beispiel

Departure

HTML Attribut	Beschreibung	Default Wert
data-type	widget-type; must be departure
data-device	name of the device to get data from
data-get	name of the reading of device to get data from
data-icon	define icon for widget
data-interval	interval to reload automatically
class	choose style of widget; see example

Link zu einem Beispiel

Dimmer

HTML Attribut	Beschreibung	Default Wert
data-get	name of the reading to get from FHEM	'STATE'
data-get-on	value for ON status to get	'on'
data-get-off	value for OFF status to get	'off'
data-set	(<command> <device> <reading> <value>)
data-set-on	value for ON status to set	value of data-get-on
data-set-off	value for OFF status to set	value of data-get-off
data-cmd	name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)	'set'
data-dim	name of the reading responsible for dim (<command> <device> <reading> <value>)	value of data-get-on
data-icon	name of the font-awesome icon	fa-lightbulb-o

Link zu einem Beispiel

Homestatus

HTML Attribut	Beschreibung	Default Wert
data-get	name of the reading to get from FHEM	'STATE'
data-set	command to send to FHEM (`set <device> <command> <value>`)
data-get-on	array of states using for get	['1','2','3','4']
data-set-on	array of states using for set.	value of data-get-on
data-alias	array of fix names to show only in the UI as an alias to the real states
data-icons	array of icons related to the data-get-on array
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'

Link zu einem Beispiel

Pagetab

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

Link zu einem Beispiel

Playstream

HTML Attribut	Beschreibung	Default Wert
data-url	URL des Radio-Streams
data-get	name of the reading to get the control state from FHEM	'STATE'
data-get-on	value for PLAY status to get.	'on'
data-get-off	value for STOP status to get.	'off'
data-volume	name of the reading to get the volume value (0-100)	volume

Link zu einem Beispiel

Popup

HTML Attribut	Beschreibung	Default Wert
data-get	name of the reading where to get the alert value from	'STATE'
data-get-on	value which trigger to open the dialog	'on'
data-off	value which trigger to close the dialog	'off'
data-width	fixe size for width (in % or px)
data-height	fixe size for height (in % or px)

Link zu einem Beispiel

Rotor

HTML Attribut	Beschreibung	Default Wert
data-delay	time in millisecondes to wait until next list item get shown	3500
class	fade, rotate

Ohne Angabe von class erfolgt keine Animation.

Link zu einem Beispiel

Symbol

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

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

dual state notation

HTML Attribut	Beschreibung	Default Wert
data-get	Name des Reading, was gelesen werden soll	'STATE'

Einstellung bei zwei Werten

HTML-Attribut	Beschreibung	Default-Wert
data-get-on	Wert für on	'open'
data-get-off	Wert für off	'closed'
data-get-warn	??????	'-1'
data-icon	Name des Symbols	'ftui-window'
data-background-icon	Hintergrundsymbol	leer
data-on-background-color	Farbe für ON-Zustand.	'#aa6900'
data-off-background-color	Farbe für OFF-Zustand.	'#505050'
data-on-color	Farbe für ON-Zustand.	'#aa6900'
data-off-color	Farbe für OFF-Zustand.	'#505050'

Einstellung bei mehreren Werten

HTML Attribut	Beschreibung	Default Wert
data-states	Array für states.
data-icons	Array mit Icons zu data-states Array
data-background-icons	Array mit Icons zu data-states Array
data-colors	Array mit Farben zu data-states aArray
data-background-colors	Array mit Hintergrundfarben zu data-states array

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

Link zu einem Beispiel

Thermostat

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

Link zu einem Beispiel

Volume

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

Link zu einem Beispiel (fehlt noch)

Widgets -- Beispiele

Circlemenu

Cover a lot of other button behind one single button

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

Departure

Departure Widget Beispiel

Minimalvariante

 
<div data-type="departure"
	 data-device="vvs"
	 data-get="SSB-Zentrum"
	 data-icon="fa-train"
	 data-interval="0">
</div>

Optionen für class

class="" : default Style (grau)
class="DVB" anderer Style (gelb)
class="VVO" : anderer Style (blau)
class="alternate" : alternierender Hintergrund
class="deptime" : Abfahrtszeit statt Minuten

weiteres Beispiel

<div data-type="departure"
	 data-device="vvs"
	 data-get="SSB-Zentrum"
	 data-icon="fa-train"
	 data-interval="0"
	 class="DVB deptime alternate">
</div>

Dimmer

Dimmer Widget Beispiel für Philips Hue

Minimalvariante

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

Mit Anzeige der Dimstufe

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

Dimmer Widget für MilightDevice

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

Homestatus

Beispiel rechts im Bild:

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

Beispiel links im Bild:

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

Datei:Homestatus tabletUI.png

Pagetab

Example for a tab menu to switch smoothly between multiple pages. Multiple pagetabs in a template file: menu.html

<html>
<body>
    <header>MENU</header>
    <div class="cell">
        <div data-type="pagetab" data-url="index.html"  data-icon="fa-home" class="cell"></div>
        <div data-type="pagetab" data-url="index_2.html" data-icon="fa-sliders" class="cell"></div>
        <div data-type="pagetab" data-url="index_3.html" data-icon="fa-music" class="cell"></div>
        <div data-type="pagetab" data-url="index_4.html" data-icon="fa-hotel" class="cell"></div>
        <div data-type="pagetab" data-url="index_5.html" data-icon="fa-music" class="cell"></div>
        <div data-type="pagetab" data-url="index_6.html" data-icon="fa-database" class="cell"></div>
        <div data-type="pagetab" data-url="index_7.html" data-icon="fa-fax" class="cell"></div>
    </div>
</body>
</html>

Playstream

Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.

     <div data-type="playstream" data-url="http://radioeins.de/stream"></div>
     <div data-type="label" class="darker">Radio eins</div>

Rotor

Example for a rotor widget, which switches between to days of weather forecast

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

Symbol

Example for a tristate icon

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

Example for a tristate icon with blink and spin animation

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

Example for a battery level control with RegEx

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

Example for a battery level control with greater-equal compare and 90° rotated symbols

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

Thermostat

Configure as data-device='...' that item which delivers temp and desired-temp as reading.

Default parameters are:

data-get="desired-temp" data-temp="measured-temp" data-set="desired-temp"

Therefor for HomaMatic HM-CC-RT-DN this is sufficient.

<div data-type="thermostat" data-device='KH_Clima' class="cell"></div>

The long format looks like this:

<div data-type="thermostat" 
     data-device="KH_Clima" 
     data-valve="ValvePosition"
     data-get="desired-temp" 
     data-temp="measured-temp" 
     class="cell">
</div>

Example for MAX!:

<div data-type="thermostat" data-device="HZ_Tuer" 
    data-valve="valveposition" 
    data-get="desiredTemperature" 
    data-temp="temperature" 
    data-set="desiredTemperature" 
    class="cell">
</div>

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

Icon-Konfiguration

Eingebaute Icons: Diese haben das ftui-Präfix. Zurzeit sind folgende verfügbar: ftui-window, ftui-door

Mehr als 500 Icons von "http://fortawesome.github.io/Font-Awesome/icons" verfügbar. Einfach den Icon-Namen angeben (Präfix "fa-" nicht vergessen, Z.B. data-icon="fa-volume-up"

Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.

   <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
   <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />

Diese font icons haben das Präfix 'fs-' bzw. 'oa-'.

Beispiel bei einem Schalter:

<div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div>

Und so als großes Symbol:

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

Die Icons kann man auch etwas dicker darstellen mit den Zusatz bold: data-icon="oa-secur_locked bold"

Die Namen der verfügbaren Icons findet man auch in den CSS Files (openautomation.css / fhemSVG.css)

Spezial

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

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

FAQ

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

Links

@@ Zeile 120: / Zeile 120: @@
 |}
+{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
-<div class="toccolours mw-collapsible mw-collapsed">'''hbox/vbox-Layout'''<div class="mw-collapsible-content">
+!colspan="2" style="text-align: left;"|hbox/vbox-Layout
-{|class="wikitable" style="width: 100%;"
+|-
+!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}}
-|}</div>
+|}
-</div>
-<div class="toccolours mw-collapsible mw-collapsed">'''Generelle Klassen für die Positionierung'''<div class="mw-collapsible-content">
+{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
-{|class="wikitable" style="width: 100%;"
+!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung
+|-
+!class="mw-collapsible-content"|Klasse!!Beschreibung
 {{FTUI Klasse|inline}}{{FTUI Klasse|newline}}{{FTUI Klasse|top-space}}{{FTUI Klasse|top-space-2x}}{{FTUI Klasse|top-space-3x}}{{FTUI Klasse|left-space}}{{FTUI Klasse|left-space-2x}}{{FTUI Klasse|left-space-3x}}{{FTUI Klasse|right-space}}{{FTUI Klasse|right-space-2x}}{{FTUI Klasse|right-space-3x}}{{FTUI Klasse|top-narrow}}{{FTUI Klasse|top-narrow-2x}}{{FTUI Klasse|top-narrow-10}}{{FTUI Klasse|left-narrow}}{{FTUI Klasse|left-narrow-2x}}{{FTUI Klasse|left-narrow-3x}}{{FTUI Klasse|right-narrow}}{{FTUI Klasse|right-narrow-2x}}{{FTUI Klasse|right-narrow-3x}}{{FTUI Klasse|centered}}{{FTUI Klasse|wider}}{{FTUI Klasse|narrow}}{{FTUI Klasse|fullsize}}{{FTUI Klasse|compressed}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|maxw40}}{{FTUI Klasse|doublebox-v}}{{FTUI Klasse|doublebox-h}}{{FTUI Klasse|triplebox-v}}
-|}</div>
+|}
-</div>
-<div class="toccolours mw-collapsible mw-collapsed">'''Vordergrundfarben'''<div class="mw-collapsible-content">
+{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
-{|class="wikitable" style="width: 100%;"
+!colspan="2" style="text-align: left;"|Vordergrundfarben
+|-
+!class="mw-collapsible-content"|Klasse!!Beschreibung
 {{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|lightblue}}{{FTUI Klasse|orange}}{{FTUI Klasse|gray}}{{FTUI Klasse|lightgray}}{{FTUI Klasse|white}}{{FTUI Klasse|black}}{{FTUI Klasse|mint}}{{FTUI Klasse|yellow}}
-|}</div>
+|}
-</div>
-<div class="toccolours mw-collapsible mw-collapsed">'''Hintergrundfarben'''<div class="mw-collapsible-content">
+{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
-{|class="wikitable" style="width: 100%;"
+!colspan="2" style="text-align: left;"|Hintergrundfarben
+|-
+!class="mw-collapsible-content"|Klasse!!Beschreibung
 {{FTUI Klasse|bg-red}}{{FTUI Klasse|bg-green}}{{FTUI Klasse|bg-blue}}{{FTUI Klasse|bg-lightblue}}{{FTUI Klasse|bg-orange}}{{FTUI Klasse|bg-gray}}{{FTUI Klasse|bg-lightgray}}{{FTUI Klasse|bg-white}}{{FTUI Klasse|bg-black}}{{FTUI Klasse|bg-mint}}{{FTUI Klasse|bg-yellow}}
-|}</div>
+|}
-</div>
+{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
-<div class="toccolours mw-collapsible mw-collapsed">'''Rahmen'''<div class="mw-collapsible-content">
+!colspan="2" style="text-align: left;"|Rahmen
-{|class="wikitable" style="width: 100%;"
+|-
+!class="mw-collapsible-content"|Klasse!!Beschreibung
 {{FTUI Klasse|verticalLine}}{{FTUI Klasse|border-black}}{{FTUI Klasse|border-white}}{{FTUI Klasse|border-orange}}{{FTUI Klasse|border-red}}{{FTUI Klasse|border-green}}{{FTUI Klasse|border-mint}}{{FTUI Klasse|border-lightblue}}{{FTUI Klasse|border-blue}}{{FTUI Klasse|border-gray}}{{FTUI Klasse|border-yellow}}{{FTUI Klasse|border-lightgray}}
-|}</div>
+|}
-</div>
-<div class="toccolours mw-collapsible mw-collapsed">'''Größen'''<div class="mw-collapsible-content">
+{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
+!colspan="2" style="text-align: left;"|Größen
+|-
+!class="mw-collapsible-content"|Klasse!!Beschreibung
 {|class="wikitable" style="width: 100%;"
 {{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}}
-|}</div>
+|}
-</div>
+{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
-<div class="toccolours mw-collapsible mw-collapsed">'''Schriftstil'''<div class="mw-collapsible-content">
+!colspan="2" style="text-align: left;"|Schriftstil
-{|class="wikitable" style="width: 100%;"
+|-
+!class="mw-collapsible-content"|Klasse!!Beschreibung
 {{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}
-|}</div>
+|}
-</div>
+{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
-<div class="toccolours mw-collapsible mw-collapsed">'''Sonstiges'''<div class="mw-collapsible-content">
+!colspan="2" style="text-align: left;"|Sonstiges
-{|class="wikitable" style="width: 100%;"
+|-
+!class="mw-collapsible-content"|Klasse!!Beschreibung
 {{FTUI Klasse|blank}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}{{FTUI Klasse|fail-shake}}{{FTUI Klasse|marquee}}{{FTUI Klasse|icon round}}{{FTUI Klasse|icon square}}{{FTUI Klasse|readonly}}{{FTUI Klasse|blink}}{{FTUI Klasse|rotate-90}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|autohide}}{{FTUI Klasse|notransmit}}{{FTUI Klasse|tab}}{{FTUI Klasse|FS20}}{{FTUI Klasse|value}}{{FTUI Klasse|novalue}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|percent}}{{FTUI Klasse|nocache}}
-|}</div>
+|}
-</div>
 == Widgets ==