Sollte man nicht die Widgets alphabetisch sortieren ?

Ich kann das gerne machen... bzw. mache das, wenn ich keinen Widerspruch höre --[[Benutzer:Nobby1805|Nobby1805]] ([[Benutzer Diskussion:Nobby1805|Diskussion]]) 13:05, 6. Mai 2015 (CEST)

Ich habe die Reihenfolge von github übernommen. Aber klar, eine alphabetische Sortierung ist durchaus sinnvoll. Dann aber auch die Beispiele entsprechend sortieren.

Datei:Label tabletUI.jpg

2015-05-07T13:26:17Z

Mw fhem: Mw fhem lud eine neue Version von Datei:Label tabletUI.jpg hoch

Datei:Label tabletUI.jpg

2015-05-07T13:25:48Z

Mw fhem: Mw fhem lud eine neue Version von Datei:Label tabletUI.jpg hoch

FHEM Tablet UI

2015-05-07T13:25:21Z

Mw fhem:

[[Datei:tablet_ui.png|200px|thumb|right|FHEM Tablet UI]]
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Zahlreiche Widgets können sehr flexibel und leicht per HTML Code konfiguriert werden.

In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben. Beitrag im FHEM-Forum: http://forum.fhem.de/index.php/topic,34233.0.html

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

== Voraussetzungen ==
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.

Alle nötigen Files sind im Zip-File inklusive, die einfach nur in einem bestimmten Unterordner der FHEM Installation kopiert werden müssen.

== Installation ==
* Dateien herunterladen: https://github.com/knowthelist/fhem-tablet-ui
* einen neuen Ordner 'tablet' im Verzeichnis /<fhem-Pfad>/www erstellen
* alle Dateien und Unterordner nach /<fhem-Pfad>/www/tablet kopieren
* in fhem.cfg folgende Zeile einfügen: <code>define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend</code>
* index-example.html in index.html umbenennen oder eine neue index.html erzeugen

Das UI ist über "http://<fhem-url>:8083/fhem/tablet" zu erreichen.

Weitere verfügbare Plugins: https://github.com/nesges/Widgets-for-fhem-tablet-ui

Alle Widgets (widget_xxx.js) in den js-Ordner kopieren.

== Update ==
Zum Update des UI in der FHEM-Befehlszeile eingeben: <code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>

== Konfiguration ==
Die Konfiguration der angezeigten Widgets erfolgt in der Datei '''index.html''' im Hauptordner 'tablet'.

'''Metadaten-Konfiguration'''

Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh
:<code><meta name="longpoll" content="1"></code>

Drag&Drop deaktivieren
:<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)
:<code><meta name="widget_base_width" content="116"></code>
:<code><meta name="widget_base_height" content="131"></code>

Das Layout und das Aussehen des UI kann durch die Klassen-Attribute beeinflusst werden. Verfügbare Klassen sind:

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

== CSS Class description ==

Not all widgets support all classes

* readonly : changing of state is not allowed
* wider : 25px extra space for the widget to the top
* narrow : shorter distant to the widget above
* w1x, w2x, w3x : set the widget to a fix width: 1x, 2x, 3x width
* 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

== Widgets -- Konfiguration ==

Zurzeit stehen 16 Widgets zur Verfügung:
* thermostat: dial for heater thermostates to set desired value and show current value
* switch: Toggle any command to FHEM (e.g. on / off)
* label: show state as text (colourable)
* symbol: show state as an icon (e.g. window open)
* push: send any command to FHEM e.g. up / down
* volume: dial to set a single value (e.g. 0-60)
* homestatus: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
* dimmer: toogle button with a setter for on value
* slider: vertical slider to select between min/max value
* image: insert an image, the URL is given by a reading
* weather: insert an icon or image, represending a weather literal
* circlemenu: Cover multiple widgets behind a single widget
* playstream: simple button to play a webradio stream
* select: Combobox to provide a list for selection
* pagetab : Element to smoothly exchange the whole page with another page
* level: vertical/horizontal bar to show values between min/max value

----------------------------------

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

'''Icon-Konfiguration'''

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>

Beispiel bei einem Schalter:
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>

Und so als großes Symbol:
<pre>
<div data-type="symbol" data-device='dummy1'
data-icon="oa-status_frost"
data-on-color="#bb3232"
data-get-on="on"
data-get-off="!on"
class="bigger">
</div>
</pre>

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

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

'''SWITCH'''
{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-get-on
|Wert, bei dem zum Status ON geschaltet werden soll.
|'on'
|-
!align="right" |data-get-off
|Wert, bei dem zum Status OFF geschaltet werden soll.
|'off'
|-
!align="right" |data-set-on
|Wert, der zu FHEM gesendet werden soll, wenn das Widget auf ON geschaltet wurde
|Wert von data-get-on
|-
!align="right" |data-set-off
|Wert, der zu FHEM gesendet werden soll, wenn das Widget auf OFF geschaltet wurde
|Wert von data-get-off
|-
!align="right" |data-cmd
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-icon
|Name des Font-Awesome Icon.
|'fa-lightbulb-o'
|-
!align="right" |data-background-icon
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-color
|Widget Farbe beim Status ON
|'#aa6900'
|-
!align="right" |data-off-color
|Widget Farbe beim Status OFF
|'#505050'
|}

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

'''SYMBOL'''
{| 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" |icon
|Name des font-awesome-Symbols
|
|-
!align="right" |data-background-icon
|Hintergrundsymbol
|''
|-
!align="right" |data-on-color
|Farbe für ON-Zustand.
|'#aa6900'
|-
!align="right" |data-off-color
|Farbe für OFF-Zustand.
|'#505050'
|-
!align="right" |data-on-colors
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-color
|array of 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.

'''LABEL'''
{| class="wikitable"
!HTML Attribut
!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
|a array of numeric values to affect the colour of the Label
|
|-
!align="right" |data-unit
|add a unit after a numeric value. use encoded strings e.g. "%B0C%0A"
|
|-
!align="right" |class
|small, large, big, bigger, thin, red, green, blue, darker
|
|}

'''PUSH'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-set
|value to send to FHEM (<command> <device> <value>)
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|'fa-circle'
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
|}

'''THERMOSTAT'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from FHEM
|'desired-temp'
|-
!align="right" |data-temp
|reading for measured temperature of thermostates
|'measured-temp'
|-
!align="right" |data-set
|command to send to FHEM (set <device> <command> <value>)
|'desired-temp'
|-
!align="right" |data-valve
|reading for valve position of thermostates
|
|-
!align="right" |data-min
|minimal value to set
| 10
|-
!align="right" |data-max
|maximal value to set
| 30
|-
!align="right" |data-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
|
|-
|}

'''VOLUME'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from FHEM
|'STATE'
|-
!align="right" |data-set
|command to send to FHEM (set <device> <command> <value>)
|''
|-
!align="rigth" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|70
|-
!align="right" |class
|small, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back
|
|-
|}

'''HOMESTATUS'''
{| 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="righ" |data-version
|name of the special dummy device to represent
|
|-
|}

<code>data-version=''</code> (default) 4 states are valid: 1,2,3 or 4 (1=home, 2=night, 3=away, 4=holiday) data-version='residents' or 'roomate' or 'guest' residents states are valid (absent,gone,asleep,home)

'''SLIDER'''
{| 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" |class
|Aussehen/Ausrichtung
|
|-
|}

Für class steht mini und horizontal zur Verfügung.

'''DIMMER'''
{| 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-off
|value for OFF status to set
|value of data-get-off
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-set
|command to send to FHEM (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-icon
|name of the font-awesome icon
|fa-lightbulb-o
|-
|}

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

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

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

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

'''PLAYSTREAM'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL des Radio-Streams
|-
|}

'''SELECT'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading that get the selected item of the list
|
|-
!align="right" |data-set
|name of the reading to set on FHEM (<command> <device> <reading> <value>)
|''
|-
!align="right" |data-list
|name of the reading to get a :-separated list from FHEM
|''
|-
!align="right" |data-items
|a array of fix items to show in the selection box (alternative if data-list is empty)
|
|-
!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" |class
|wider, w1x, w2x, w3x
|
|-
|}

'''PAGETAB'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL of the new page to show
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|'fa-power-off'
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|''
|-
!align="right" |data-on-background-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-background-color
|color of OFF state
|'#505050'
|-
!align="right" |data-on-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-color
|color of Off state
|'#505050'
|-
|}

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

== Widgets -- Beispiele ==
'''Thermostat'''

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

'''Label'''

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

'''Switch'''

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

'''Symbol'''

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>

'''Slider'''

Slider mit einstellbaren Werten von 10 bis 90:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</pre>

[[Datei:slider_tabletUI.png]]

Horizontal angeordneter Slider:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="0"
data-max="100"
class="horizontal"
</div>
</pre>

[[Datei:slider_tabletUI2.jpg]]

'''Image'''

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

'''Weather'''

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

'''Circle Menu'''

Cover a lot of other button behind one single button

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

[[Datei:circlemenu_tabletUI.png]]

'''Playstream'''

Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.

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

'''Select'''

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

'''Push'''

Example for how to create a push button widget to trigger all devices on:

<pre>
<div data-type="push"
data-device="LightAll"
data-cmd="trigger"
data-set="on"
class="cell">
</div>
</pre>

Beispiel für zwei horizontale Buttons:

<pre>
<div class="cell">
<div class="doublebox-h">
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push1.png]]

Beispiel für zwei quadratische vertikale Buttons:

<pre>
<div class="cell">
<div class="doublebox-v">
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push2.png]]

'''Image'''

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>

'''Pagetab'''

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

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

== Spezial ==
Folgender Befehl setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
<pre>
<div onclick="setFhemStatus('set dummy1 off')">All off!</div>
</pre>

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

== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]

[[Kategorie:FHEM Frontends]]

2015-05-07T12:21:37Z

Mw fhem:

FHEM Tablet UI

2015-05-07T12:19:50Z

Mw fhem:

[[Datei:tablet_ui.png|200px|thumb|right|FHEM Tablet UI]]
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Zahlreiche Widgets können sehr flexibel und leicht per HTML Code konfiguriert werden.

In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben. Beitrag im FHEM-Forum: http://forum.fhem.de/index.php/topic,34233.0.html

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

== Voraussetzungen ==
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.

Alle nötigen Files sind im Zip-File inklusive, die einfach nur in einem bestimmten Unterordner der FHEM Installation kopiert werden müssen.

== Installation ==
* Dateien herunterladen: https://github.com/knowthelist/fhem-tablet-ui
* einen neuen Ordner 'tablet' im Verzeichnis /<fhem-Pfad>/www erstellen
* alle Dateien und Unterordner nach /<fhem-Pfad>/www/tablet kopieren
* in fhem.cfg folgende Zeile einfügen: <code>define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend</code>
* index-example.html in index.html umbenennen oder eine neue index.html erzeugen

Das UI ist über "http://<fhem-url>:8083/fhem/tablet" zu erreichen.

Weitere verfügbare Plugins: https://github.com/nesges/Widgets-for-fhem-tablet-ui

Alle Widgets (widget_xxx.js) in den js-Ordner kopieren.

== Update ==
Zum Update des UI in der FHEM-Befehlszeile eingeben: <code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>

== Konfiguration ==
Die Konfiguration der angezeigten Widgets erfolgt in der Datei '''index.html''' im Hauptordner 'tablet'.

'''Metadaten-Konfiguration'''

Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh
:<code><meta name="longpoll" content="1"></code>

Drag&Drop deaktivieren
:<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)
:<code><meta name="widget_base_width" content="116"></code>
:<code><meta name="widget_base_height" content="131"></code>

Das Layout und das Aussehen des UI kann durch die Klassen-Attribute beeinflusst werden. Verfügbare Klassen sind:

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

== CSS Class description ==

Not all widgets support all classes

* readonly : changing of state is not allowed
* wider : 25px extra space for the widget to the top
* narrow : shorter distant to the widget above
* w1x, w2x, w3x : set the widget to a fix width: 1x, 2x, 3x width
* 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

== Widgets -- Konfiguration ==

Zurzeit stehen 16 Widgets zur Verfügung:
* thermostat: dial for heater thermostates to set desired value and show current value
* switch: Toggle any command to FHEM (e.g. on / off)
* label: show state as text (colourable)
* symbol: show state as an icon (e.g. window open)
* push: send any command to FHEM e.g. up / down
* volume: dial to set a single value (e.g. 0-60)
* homestatus: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
* dimmer: toogle button with a setter for on value
* slider: vertical slider to select between min/max value
* image: insert an image, the URL is given by a reading
* weather: insert an icon or image, represending a weather literal
* circlemenu: Cover multiple widgets behind a single widget
* playstream: simple button to play a webradio stream
* select: Combobox to provide a list for selection
* pagetab : Element to smoothly exchange the whole page with another page
* level: vertical/horizontal bar to show values between min/max value

----------------------------------

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

'''Icon-Konfiguration'''

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>

Beispiel bei einem Schalter:
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>

Und so als großes Symbol:
<pre>
<div data-type="symbol" data-device='dummy1'
data-icon="oa-status_frost"
data-on-color="#bb3232"
data-get-on="on"
data-get-off="!on"
class="bigger">
</div>
</pre>

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

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

'''SWITCH'''
{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-get-on
|Wert, bei dem zum Status ON geschaltet werden soll.
|'on'
|-
!align="right" |data-get-off
|Wert, bei dem zum Status OFF geschaltet werden soll.
|'off'
|-
!align="right" |data-set-on
|Wert, der zu FHEM gesendet werden soll, wenn das Widget auf ON geschaltet wurde
|Wert von data-get-on
|-
!align="right" |data-set-off
|Wert, der zu FHEM gesendet werden soll, wenn das Widget auf OFF geschaltet wurde
|Wert von data-get-off
|-
!align="right" |data-cmd
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-icon
|Name des Font-Awesome Icon.
|'fa-lightbulb-o'
|-
!align="right" |data-background-icon
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-color
|Widget Farbe beim Status ON
|'#aa6900'
|-
!align="right" |data-off-color
|Widget Farbe beim Status OFF
|'#505050'
|}

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

'''SYMBOL'''
{| 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" |icon
|Name des font-awesome-Symbols
|
|-
!align="right" |data-background-icon
|Hintergrundsymbol
|''
|-
!align="right" |data-on-color
|Farbe für ON-Zustand.
|'#aa6900'
|-
!align="right" |data-off-color
|Farbe für OFF-Zustand.
|'#505050'
|-
!align="right" |data-on-colors
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-color
|array of 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.

'''LABEL'''
{| class="wikitable"
!HTML Attribut
!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
|a array of numeric values to affect the colour of the Label
|
|-
!align="right" |data-unit
|add a unit after a numeric value. use encoded strings e.g. "%B0C%0A"
|
|-
!align="right" |class
|small, large, big, bigger, thin, red, green, blue, darker
|
|}

'''PUSH'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-set
|value to send to FHEM (<command> <device> <value>)
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|'fa-circle'
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
|}

'''THERMOSTAT'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from FHEM
|'desired-temp'
|-
!align="right" |data-temp
|reading for measured temperature of thermostates
|'measured-temp'
|-
!align="right" |data-set
|command to send to FHEM (set <device> <command> <value>)
|'desired-temp'
|-
!align="right" |data-valve
|reading for valve position of thermostates
|
|-
!align="right" |data-min
|minimal value to set
| 10
|-
!align="right" |data-max
|maximal value to set
| 30
|-
!align="right" |data-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
|
|-
|}

'''VOLUME'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from FHEM
|'STATE'
|-
!align="right" |data-set
|command to send to FHEM (set <device> <command> <value>)
|''
|-
!align="rigth" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|70
|-
!align="right" |class
|small, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back
|
|-
|}

'''HOMESTATUS'''
{| 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="righ" |data-version
|name of the special dummy device to represent
|
|-
|}

<code>data-version=''</code> (default) 4 states are valid: 1,2,3 or 4 (1=home, 2=night, 3=away, 4=holiday) data-version='residents' or 'roomate' or 'guest' residents states are valid (absent,gone,asleep,home)

'''SLIDER'''
{| 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" |class
|Aussehen/Ausrichtung
|
|-
|}

Für class steht mini und horizontal zur Verfügung.

'''DIMMER'''
{| 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-off
|value for OFF status to set
|value of data-get-off
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-set
|command to send to FHEM (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-icon
|name of the font-awesome icon
|fa-lightbulb-o
|-
|}

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

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

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

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

'''PLAYSTREAM'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL des Radio-Streams
|-
|}

'''SELECT'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading that get the selected item of the list
|
|-
!align="right" |data-set
|name of the reading to set on FHEM (<command> <device> <reading> <value>)
|''
|-
!align="right" |data-list
|name of the reading to get a :-separated list from FHEM
|''
|-
!align="right" |data-items
|a array of fix items to show in the selection box (alternative if data-list is empty)
|
|-
!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" |class
|wider, w1x, w2x, w3x
|
|-
|}

'''PAGETAB'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL of the new page to show
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|'fa-power-off'
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|''
|-
!align="right" |data-on-background-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-background-color
|color of OFF state
|'#505050'
|-
!align="right" |data-on-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-color
|color of Off state
|'#505050'
|-
|}

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

== Widgets -- Beispiele ==
'''Thermostat'''

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

'''Label'''

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>

'''Switch'''

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

'''Symbol'''

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>

'''Slider'''

Slider mit einstellbaren Werten von 10 bis 90:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</pre>

[[Datei:slider_tabletUI.png]]

Horizontal angeordneter Slider:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="0"
data-max="100"
class="horizontal"
</div>
</pre>

[[Datei:slider_tabletUI2.png]]

'''Weather'''

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

'''Circle Menu'''

Cover a lot of other button behind one single button

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

[[Datei:circlemenu_tabletUI.png]]

'''Playstream'''

Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.

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

'''Select'''

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

'''Push'''

Example for how to create a push button widget to trigger all devices on:

<pre>
<div data-type="push"
data-device="LightAll"
data-cmd="trigger"
data-set="on"
class="cell">
</div>
</pre>

Beispiel für zwei horizontale Buttons:

<pre>
<div class="cell">
<div class="doublebox-h">
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push1.png]]

Beispiel für zwei quadratische vertikale Buttons:

<pre>
<div class="cell">
<div class="doublebox-v">
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push2.png]]

'''Image'''

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>

'''Pagetab'''

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

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

== Spezial ==
Folgender Befehl setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
<pre>
<div onclick="setFhemStatus('set dummy1 off')">All off!</div>
</pre>

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

== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]

[[Kategorie:FHEM Frontends]]

FHEM Tablet UI

2015-05-07T11:07:28Z

Mw fhem:

[[Datei:tablet_ui.png|200px|thumb|right|FHEM Tablet UI]]
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Zahlreiche Widgets können sehr flexibel und leicht per HTML Code konfiguriert werden.

In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben. Beitrag im FHEM-Forum: http://forum.fhem.de/index.php/topic,34233.0.html

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

== Voraussetzungen ==
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.

Alle nötigen Files sind im Zip-File inklusive, die einfach nur in einem bestimmten Unterordner der FHEM Installation kopiert werden müssen.

== Installation ==
* Dateien herunterladen: https://github.com/knowthelist/fhem-tablet-ui
* einen neuen Ordner 'tablet' im Verzeichnis /<fhem-Pfad>/www erstellen
* alle Dateien und Unterordner nach /<fhem-Pfad>/www/tablet kopieren
* in fhem.cfg folgende Zeile einfügen: <code>define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend</code>
* index-example.html in index.html umbenennen oder eine neue index.html erzeugen

Das UI ist über "http://<fhem-url>:8083/fhem/tablet" zu erreichen.

Weitere verfügbare Plugins: https://github.com/nesges/Widgets-for-fhem-tablet-ui

Alle Widgets (widget_xxx.js) in den js-Ordner kopieren.

== Update ==
Zum Update des UI in der FHEM-Befehlszeile eingeben: <code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>

== Konfiguration ==
Die Konfiguration der angezeigten Widgets erfolgt in der Datei '''index.html''' im Hauptordner 'tablet'.

'''Metadaten-Konfiguration'''

Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh
:<code><meta name="longpoll" content="1"></code>

Drag&Drop deaktivieren
:<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)
:<code><meta name="widget_base_width" content="116"></code>
:<code><meta name="widget_base_height" content="131"></code>

Das Layout und das Aussehen des UI kann durch die Klassen-Attribute beeinflusst werden. Verfügbare Klassen sind:

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

== CSS Class description ==

Not all widgets support all classes

* readonly : changing of state is not allowed
* wider : 25px extra space for the widget to the top
* narrow : shorter distant to the widget above
* w1x, w2x, w3x : set the widget to a fix width: 1x, 2x, 3x width
* 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

== Widgets -- Konfiguration ==

Zurzeit stehen 16 Widgets zur Verfügung:
* thermostat: dial for heater thermostates to set desired value and show current value
* switch: Toggle any command to FHEM (e.g. on / off)
* label: show state as text (colourable)
* symbol: show state as an icon (e.g. window open)
* push: send any command to FHEM e.g. up / down
* volume: dial to set a single value (e.g. 0-60)
* homestatus: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
* dimmer: toogle button with a setter for on value
* slider: vertical slider to select between min/max value
* image: insert an image, the URL is given by a reading
* weather: insert an icon or image, represending a weather literal
* circlemenu: Cover multiple widgets behind a single widget
* playstream: simple button to play a webradio stream
* select: Combobox to provide a list for selection
* pagetab : Element to smoothly exchange the whole page with another page
* level: vertical/horizontal bar to show values between min/max value

----------------------------------

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

'''Icon-Konfiguration'''

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>

Beispiel bei einem Schalter:
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>

Und so als großes Symbol:
<pre>
<div data-type="symbol" data-device='dummy1'
data-icon="oa-status_frost"
data-on-color="#bb3232"
data-get-on="on"
data-get-off="!on"
class="bigger">
</div>
</pre>

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

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

'''SWITCH'''
{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-get-on
|Wert, bei dem zum Status ON geschaltet werden soll.
|'on'
|-
!align="right" |data-get-off
|Wert, bei dem zum Status OFF geschaltet werden soll.
|'off'
|-
!align="right" |data-set-on
|Wert, der zu FHEM gesendet werden soll, wenn das Widget auf ON geschaltet wurde
|Wert von data-get-on
|-
!align="right" |data-set-off
|Wert, der zu FHEM gesendet werden soll, wenn das Widget auf OFF geschaltet wurde
|Wert von data-get-off
|-
!align="right" |data-cmd
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-icon
|Name des Font-Awesome Icon.
|'fa-lightbulb-o'
|-
!align="right" |data-background-icon
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-color
|Widget Farbe beim Status ON
|'#aa6900'
|-
!align="right" |data-off-color
|Widget Farbe beim Status OFF
|'#505050'
|}

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

'''SYMBOL'''
{| 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" |icon
|Name des font-awesome-Symbols
|
|-
!align="right" |data-background-icon
|Hintergrundsymbol
|''
|-
!align="right" |data-on-color
|Farbe für ON-Zustand.
|'#aa6900'
|-
!align="right" |data-off-color
|Farbe für OFF-Zustand.
|'#505050'
|-
!align="right" |data-on-colors
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-color
|array of 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.

'''LABEL'''
{| class="wikitable"
!HTML Attribut
!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
|a array of numeric values to affect the colour of the Label
|
|-
!align="right" |data-unit
|add a unit after a numeric value. use encoded strings e.g. "%B0C%0A"
|
|-
!align="right" |class
|small, large, big, bigger, thin, red, green, blue, darker
|
|}

'''PUSH'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-set
|value to send to FHEM (<command> <device> <value>)
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|'fa-circle'
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
|}

'''THERMOSTAT'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from FHEM
|'desired-temp'
|-
!align="right" |data-temp
|reading for measured temperature of thermostates
|'measured-temp'
|-
!align="right" |data-set
|command to send to FHEM (set <device> <command> <value>)
|'desired-temp'
|-
!align="right" |data-valve
|reading for valve position of thermostates
|
|-
!align="right" |data-min
|minimal value to set
| 10
|-
!align="right" |data-max
|maximal value to set
| 30
|-
!align="right" |data-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
|
|-
|}

'''VOLUME'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from FHEM
|'STATE'
|-
!align="right" |data-set
|command to send to FHEM (set <device> <command> <value>)
|''
|-
!align="rigth" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|70
|-
!align="right" |class
|small, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back
|
|-
|}

'''HOMESTATUS'''
{| 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="righ" |data-version
|name of the special dummy device to represent
|
|-
|}

<code>data-version=''</code> (default) 4 states are valid: 1,2,3 or 4 (1=home, 2=night, 3=away, 4=holiday) data-version='residents' or 'roomate' or 'guest' residents states are valid (absent,gone,asleep,home)

'''SLIDER (zurzeit nur vertikal)'''
{| 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
|-
|}

'''DIMMER'''
{| 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-off
|value for OFF status to set
|value of data-get-off
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-set
|command to send to FHEM (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-icon
|name of the font-awesome icon
|fa-lightbulb-o
|-
|}

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

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

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

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

'''PLAYSTREAM'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL des Radio-Streams
|-
|}

'''SELECT'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading that get the selected item of the list
|
|-
!align="right" |data-set
|name of the reading to set on FHEM (<command> <device> <reading> <value>)
|''
|-
!align="right" |data-list
|name of the reading to get a :-separated list from FHEM
|''
|-
!align="right" |data-items
|a array of fix items to show in the selection box (alternative if data-list is empty)
|
|-
!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" |class
|wider, w1x, w2x, w3x
|
|-
|}

'''PAGETAB'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL of the new page to show
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|'fa-power-off'
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|''
|-
!align="right" |data-on-background-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-background-color
|color of OFF state
|'#505050'
|-
!align="right" |data-on-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-color
|color of Off state
|'#505050'
|-
|}

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

== Widgets -- Beispiele ==
'''Thermostat'''

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

'''Label'''

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>

'''Switch'''

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

'''Symbol'''

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>

'''Slider'''

Slider mit einstellbaren Werten von 10 bis 90:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</pre>

[[Datei:slider_tabletUI.png]]

'''Weather'''

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

'''Circle Menu'''

Cover a lot of other button behind one single button

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

[[Datei:circlemenu_tabletUI.png]]

'''Playstream'''

Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.

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

'''Select'''

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

'''Push'''

Example for how to create a push button widget to trigger all devices on:

<pre>
<div data-type="push"
data-device="LightAll"
data-cmd="trigger"
data-set="on"
class="cell">
</div>
</pre>

Beispiel für zwei horizontale Buttons:

<pre>
<div class="cell">
<div class="doublebox-h">
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push1.png]]

Beispiel für zwei quadratische vertikale Buttons:

<pre>
<div class="cell">
<div class="doublebox-v">
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push2.png]]

'''Image'''

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>

'''Pagetab'''

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

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

== Spezial ==
Folgender Befehl setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
<pre>
<div onclick="setFhemStatus('set dummy1 off')">All off!</div>
</pre>

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

== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]

[[Kategorie:FHEM Frontends]]

FHEM Tablet UI

2015-05-07T11:04:08Z

Mw fhem:

[[Datei:tablet_ui.png|200px|thumb|right|FHEM Tablet UI]]
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Zahlreiche Widgets können sehr flexibel und leicht per HTML Code konfiguriert werden.

In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben. Beitrag im FHEM-Forum: http://forum.fhem.de/index.php/topic,34233.0.html

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

== Voraussetzungen ==
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.

Alle nötigen Files sind im Zip-File inklusive, die einfach nur in einem bestimmten Unterordner der FHEM Installation kopiert werden müssen.

== Installation ==
* Dateien herunterladen: https://github.com/knowthelist/fhem-tablet-ui
* einen neuen Ordner 'tablet' im Verzeichnis /<fhem-Pfad>/www erstellen
* alle Dateien und Unterordner nach /<fhem-Pfad>/www/tablet kopieren
* in fhem.cfg folgende Zeile einfügen: <code>define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend</code>
* index-example.html in index.html umbenennen oder eine neue index.html erzeugen

Das UI ist über "http://<fhem-url>:8083/fhem/tablet" zu erreichen.

Weitere verfügbare Plugins: https://github.com/nesges/Widgets-for-fhem-tablet-ui

Alle Widgets (widget_xxx.js) in den js-Ordner kopieren.

== Update ==
Zum Update des UI in der FHEM-Befehlszeile eingeben: <code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>

== Konfiguration ==
Die Konfiguration der angezeigten Widgets erfolgt in der Datei '''index.html''' im Hauptordner 'tablet'.

'''Metadaten-Konfiguration'''

Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh
:<code><meta name="longpoll" content="1"></code>

Drag&Drop deaktivieren
:<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)
:<code><meta name="widget_base_width" content="116"></code>
:<code><meta name="widget_base_height" content="131"></code>

Das Layout und das Aussehen des UI kann durch die Klassen-Attribute beeinflusst werden. Verfügbare Klassen sind:

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

== CSS Class description ==

Not all widgets support all classes

* readonly : changing of state is not allowed
* wider : 25px extra space for the widget to the top
* narrow : shorter distant to the widget above
* w1x, w2x, w3x : set the widget to a fix width: 1x, 2x, 3x width
* 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

== Widgets -- Konfiguration ==

Zurzeit stehen 16 Widgets zur Verfügung:
* thermostat: dial for heater thermostates to set desired value and show current value
* switch: Toggle any command to FHEM (e.g. on / off)
* label: show state as text (colourable)
* symbol: show state as an icon (e.g. window open)
* push: send any command to FHEM e.g. up / down
* volume: dial to set a single value (e.g. 0-60)
* homestatus: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
* dimmer: toogle button with a setter for on value
* slider: vertical slider to select between min/max value
* image: insert an image, the URL is given by a reading
* weather: insert an icon or image, represending a weather literal
* circlemenu: Cover multiple widgets behind a single widget
* playstream: simple button to play a webradio stream
* select: Combobox to provide a list for selection
* pagetab : Element to smoothly exchange the whole page with another page
* level: vertical/horizontal bar to show values between min/max value

----------------------------------

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

'''Icon-Konfiguration'''

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>

Beispiel bei einem Schalter:
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>

Und so als großes Symbol:
<pre>
<div data-type="symbol" data-device='dummy1'
data-icon="oa-status_frost"
data-on-color="#bb3232"
data-get-on="on"
data-get-off="!on"
class="bigger">
</div>
</pre>

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

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

'''SWITCH'''
{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-get-on
|Wert, bei dem zum Status ON geschaltet werden soll.
|'on'
|-
!align="right" |data-get-off
|Wert, bei dem zum Status OFF geschaltet werden soll.
|'off'
|-
!align="right" |data-set-on
|Wert, der zu FHEM gesendet werden soll, wenn das Widget auf ON geschaltet wurde
|Wert von data-get-on
|-
!align="right" |data-set-off
|Wert, der zu FHEM gesendet werden soll, wenn das Widget auf OFF geschaltet wurde
|Wert von data-get-off
|-
!align="right" |data-cmd
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-icon
|Name des Font-Awesome Icon.
|'fa-lightbulb-o'
|-
!align="right" |data-background-icon
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-color
|Widget Farbe beim Status ON
|'#aa6900'
|-
!align="right" |data-off-color
|Widget Farbe beim Status OFF
|'#505050'
|}

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

'''SYMBOL'''
{| 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" |icon
|Name des font-awesome-Symbols
|
|-
!align="right" |data-background-icon
|Hintergrundsymbol
|''
|-
!align="right" |data-on-color
|Farbe für ON-Zustand.
|'#aa6900'
|-
!align="right" |data-off-color
|Farbe für OFF-Zustand.
|'#505050'
|-
!align="right" |data-on-colors
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-color
|array of 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.

'''LABEL'''
{| class="wikitable"
!HTML Attribut
!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
|a array of numeric values to affect the colour of the Label
|
|-
!align="right" |data-unit
|add a unit after a numeric value. use encoded strings e.g. "%B0C%0A"
|
|-
!align="right" |class
|small, large, big, bigger, thin, red, green, blue, darker
|
|}

'''PUSH'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-set
|value to send to FHEM (<command> <device> <value>)
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|'fa-circle'
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
|}

'''THERMOSTAT'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from FHEM
|'desired-temp'
|-
!align="right" |data-temp
|reading for measured temperature of thermostates
|'measured-temp'
|-
!align="right" |data-set
|command to send to FHEM (set <device> <command> <value>)
|'desired-temp'
|-
!align="right" |data-valve
|reading for valve position of thermostates
|
|-
!align="right" |data-min
|minimal value to set
| 10
|-
!align="right" |data-max
|maximal value to set
| 30
|-
!align="right" |data-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
|
|-
|}

'''VOLUME'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from FHEM
|'STATE'
|-
!align="right" |data-set
|command to send to FHEM (set <device> <command> <value>)
|''
|-
!align="rigth" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|70
|-
!align="right" |class
|small, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back
|
|-
|}

'''HOMESTATUS'''
{| 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="righ" |data-version
|name of the special dummy device to represent
|
|-
|}

<code>data-version=''</code> (default) 4 states are valid: 1,2,3 or 4 (1=home, 2=night, 3=away, 4=holiday) data-version='residents' or 'roomate' or 'guest' residents states are valid (absent,gone,asleep,home)

'''SLIDER (zurzeit nur vertikal)'''
{| 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
|-
|}

'''DIMMER'''
{| 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-off
|value for OFF status to set
|value of data-get-off
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-set
|command to send to FHEM (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-icon
|name of the font-awesome icon
|fa-lightbulb-o
|-
|}

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

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

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

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

'''PLAYSTREAM'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL des Radio-Streams
|-
|}

'''SELECT'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading that get the selected item of the list
|
|-
!align="right" |data-set
|name of the reading to set on FHEM (<command> <device> <reading> <value>)
|''
|-
!align="right" |data-list
|name of the reading to get a :-separated list from FHEM
|''
|-
!align="right" |data-items
|a array of fix items to show in the selection box (alternative if data-list is empty)
|
|-
!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" |class
|wider, w1x, w2x, w3x
|
|-
|}

'''PAGETAB'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL of the new page to show
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|'fa-power-off'
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|''
|-
!align="right" |data-on-background-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-background-color
|color of OFF state
|'#505050'
|-
!align="right" |data-on-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-color
|color of Off state
|'#505050'
|-
|}

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

== Widgets -- Beispiele ==
'''Thermostat'''

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

'''Label'''

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>

'''Switch'''

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

'''Symbol'''

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>

'''Slider'''

Slider mit einstellbaren Werten von 10 bis 90:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</pre>

[[Datei:slider_tabletUI.png]]

'''Weather'''

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

'''Circle Menu'''

Cover a lot of other button behind one single button

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

[[Datei:circlemenu_tabletUI.png]]

'''Playstream'''

Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.

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

'''Select'''

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_tabletUI.png]]

'''Push'''

Example for how to create a push button widget to trigger all devices on:

<pre>
<div data-type="push"
data-device="LightAll"
data-cmd="trigger"
data-set="on"
class="cell">
</div>
</pre>

Beispiel für zwei horizontale Buttons:

<pre>
<div class="cell">
<div class="doublebox-h">
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push1.png]]

Beispiel für zwei quadratische vertikale Buttons:

<pre>
<div class="cell">
<div class="doublebox-v">
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push2.png]]

'''Image'''

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>

'''Pagetab'''

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

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

== Spezial ==
Folgender Befehl setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
<pre>
<div onclick="setFhemStatus('set dummy1 off')">All off!</div>
</pre>

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

== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]

[[Kategorie:FHEM Frontends]]

Datei:Circlemenu tabletUI.png

2015-05-07T11:04:02Z

Mw fhem:

Datei:Select tabeltUI.png

2015-05-07T09:50:50Z

Mw fhem:

Datei:Slider tabletUI.png

2015-05-07T08:59:21Z

Mw fhem:

FHEM Tablet UI

2015-05-07T08:59:03Z

Mw fhem:

[[Datei:tablet_ui.png|200px|thumb|right|FHEM Tablet UI]]
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Zahlreiche Widgets können sehr flexibel und leicht per HTML Code konfiguriert werden.

In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben. Beitrag im FHEM-Forum: http://forum.fhem.de/index.php/topic,34233.0.html

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

== Voraussetzungen ==
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.

Alle nötigen Files sind im Zip-File inklusive, die einfach nur in einem bestimmten Unterordner der FHEM Installation kopiert werden müssen.

== Installation ==
* Dateien herunterladen: https://github.com/knowthelist/fhem-tablet-ui
* einen neuen Ordner 'tablet' im Verzeichnis /<fhem-Pfad>/www erstellen
* alle Dateien und Unterordner nach /<fhem-Pfad>/www/tablet kopieren
* in fhem.cfg folgende Zeile einfügen: <code>define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend</code>
* index-example.html in index.html umbenennen oder eine neue index.html erzeugen

Das UI ist über "http://<fhem-url>:8083/fhem/tablet" zu erreichen.

Weitere verfügbare Plugins: https://github.com/nesges/Widgets-for-fhem-tablet-ui

Alle Widgets (widget_xxx.js) in den js-Ordner kopieren.

== Update ==
Zum Update des UI in der FHEM-Befehlszeile eingeben: <code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>

== Konfiguration ==
Die Konfiguration der angezeigten Widgets erfolgt in der Datei '''index.html''' im Hauptordner 'tablet'.

'''Metadaten-Konfiguration'''

Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh
:<code><meta name="longpoll" content="1"></code>

Drag&Drop deaktivieren
:<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)
:<code><meta name="widget_base_width" content="116"></code>
:<code><meta name="widget_base_height" content="131"></code>

Das Layout und das Aussehen des UI kann durch die Klassen-Attribute beeinflusst werden. Verfügbare Klassen sind:

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

== CSS Class description ==

Not all widgets support all classes

* readonly : changing of state is not allowed
* wider : 25px extra space for the widget to the top
* narrow : shorter distant to the widget above
* w1x, w2x, w3x : set the widget to a fix width: 1x, 2x, 3x width
* 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

== Widgets -- Konfiguration ==

Zurzeit stehen 16 Widgets zur Verfügung:
* thermostat: dial for heater thermostates to set desired value and show current value
* switch: Toggle any command to FHEM (e.g. on / off)
* label: show state as text (colourable)
* symbol: show state as an icon (e.g. window open)
* push: send any command to FHEM e.g. up / down
* volume: dial to set a single value (e.g. 0-60)
* homestatus: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
* dimmer: toogle button with a setter for on value
* slider: vertical slider to select between min/max value
* image: insert an image, the URL is given by a reading
* weather: insert an icon or image, represending a weather literal
* circlemenu: Cover multiple widgets behind a single widget
* playstream: simple button to play a webradio stream
* select: Combobox to provide a list for selection
* pagetab : Element to smoothly exchange the whole page with another page
* level: vertical/horizontal bar to show values between min/max value

----------------------------------

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

'''Icon-Konfiguration'''

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>

Beispiel bei einem Schalter:
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>

Und so als großes Symbol:
<pre>
<div data-type="symbol" data-device='dummy1'
data-icon="oa-status_frost"
data-on-color="#bb3232"
data-get-on="on"
data-get-off="!on"
class="bigger">
</div>
</pre>

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

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

'''SWITCH'''
{| class="wikitable"
!HTML-Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-get-on
|Wert, bei dem zum Status ON geschaltet werden soll.
|'on'
|-
!align="right" |data-get-off
|Wert, bei dem zum Status OFF geschaltet werden soll.
|'off'
|-
!align="right" |data-set-on
|Wert, der zu FHEM gesendet werden soll, wenn das Widget auf ON geschaltet wurde
|Wert von data-get-on
|-
!align="right" |data-set-off
|Wert, der zu FHEM gesendet werden soll, wenn das Widget auf OFF geschaltet wurde
|Wert von data-get-off
|-
!align="right" |data-cmd
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-icon
|Name des Font-Awesome Icon.
|'fa-lightbulb-o'
|-
!align="right" |data-background-icon
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-color
|Widget Farbe beim Status ON
|'#aa6900'
|-
!align="right" |data-off-color
|Widget Farbe beim Status OFF
|'#505050'
|}

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

'''SYMBOL'''
{| 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" |icon
|Name des font-awesome-Symbols
|
|-
!align="right" |data-background-icon
|Hintergrundsymbol
|''
|-
!align="right" |data-on-color
|Farbe für ON-Zustand.
|'#aa6900'
|-
!align="right" |data-off-color
|Farbe für OFF-Zustand.
|'#505050'
|-
!align="right" |data-on-colors
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-color
|array of 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.

'''LABEL'''
{| class="wikitable"
!HTML Attribut
!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
|a array of numeric values to affect the colour of the Label
|
|-
!align="right" |data-unit
|add a unit after a numeric value. use encoded strings e.g. "%B0C%0A"
|
|-
!align="right" |class
|small, large, big, bigger, thin, red, green, blue, darker
|
|}

'''PUSH'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default-Wert
|-
!align="right" |data-set
|value to send to FHEM (<command> <device> <value>)
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|'fa-circle'
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
|}

'''THERMOSTAT'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from FHEM
|'desired-temp'
|-
!align="right" |data-temp
|reading for measured temperature of thermostates
|'measured-temp'
|-
!align="right" |data-set
|command to send to FHEM (set <device> <command> <value>)
|'desired-temp'
|-
!align="right" |data-valve
|reading for valve position of thermostates
|
|-
!align="right" |data-min
|minimal value to set
| 10
|-
!align="right" |data-max
|maximal value to set
| 30
|-
!align="right" |data-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
|
|-
|}

'''VOLUME'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading to get from FHEM
|'STATE'
|-
!align="right" |data-set
|command to send to FHEM (set <device> <command> <value>)
|''
|-
!align="rigth" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-min
|minimal value to set
|0
|-
!align="right" |data-max
|maximal value to set
|70
|-
!align="right" |class
|small, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back
|
|-
|}

'''HOMESTATUS'''
{| 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="righ" |data-version
|name of the special dummy device to represent
|
|-
|}

<code>data-version=''</code> (default) 4 states are valid: 1,2,3 or 4 (1=home, 2=night, 3=away, 4=holiday) data-version='residents' or 'roomate' or 'guest' residents states are valid (absent,gone,asleep,home)

'''SLIDER (zurzeit nur vertikal)'''
{| 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
|-
|}

'''DIMMER'''
{| 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-off
|value for OFF status to set
|value of data-get-off
|-
!align="right" |data-cmd
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-set
|command to send to FHEM (<code>set <device> <command> <value></code>)
|''
|-
!align="right" |data-icon
|name of the font-awesome icon
|fa-lightbulb-o
|-
|}

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

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

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

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

'''PLAYSTREAM'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL des Radio-Streams
|-
|}

'''SELECT'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-get
|name of the reading that get the selected item of the list
|
|-
!align="right" |data-set
|name of the reading to set on FHEM (<command> <device> <reading> <value>)
|''
|-
!align="right" |data-list
|name of the reading to get a :-separated list from FHEM
|''
|-
!align="right" |data-items
|a array of fix items to show in the selection box (alternative if data-list is empty)
|
|-
!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" |class
|wider, w1x, w2x, w3x
|
|-
|}

'''PAGETAB'''
{| class="wikitable"
!HTML Attribut
!Beschreibung
!Default Wert
|-
!align="right" |data-url
|URL of the new page to show
|
|-
!align="right" |data-icon
|name of the font-awesome icon
|'fa-power-off'
|-
!align="right" |data-background-icon
|name of the font-awesome icon for background
|''
|-
!align="right" |data-on-background-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-background-color
|color of OFF state
|'#505050'
|-
!align="right" |data-on-color
|color of ON state
|'#aa6900'
|-
!align="right" |data-off-color
|color of Off state
|'#505050'
|-
|}

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

== Widgets -- Beispiele ==
'''Thermostat'''

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

'''Label'''

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>

'''Switch'''

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

'''Symbol'''

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>

'''Slider'''

Slider mit einstellbaren Werten von 10 bis 90:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</pre>

[[Datei:slider_tabletUI.png]]

'''Weather'''

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

'''Playstream'''

Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.

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

'''Select'''

Erzeugt zwei Comcoboxen 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>

'''Push'''

Example for how to create a push button widget to trigger all devices on:

<pre>
<div data-type="push"
data-device="LightAll"
data-cmd="trigger"
data-set="on"
class="cell">
</div>
</pre>

Beispiel für zwei horizontale Buttons:

<pre>
<div class="cell">
<div class="doublebox-h">
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push1.png]]

Beispiel für zwei quadratische vertikale Buttons:

<pre>
<div class="cell">
<div class="doublebox-v">
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set="down">
</div>
</div>
</div>
</pre>

[[Datei:push2.png]]

'''Image'''

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>

'''Pagetab'''

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

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

== Spezial ==
Folgender Befehl setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
<pre>
<div onclick="setFhemStatus('set dummy1 off')">All off!</div>
</pre>

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

== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]

[[Kategorie:FHEM Frontends]]

Datei:Push2.png

2015-05-07T08:56:45Z

Mw fhem:

Datei:Push1.png

2015-05-07T08:56:24Z

Mw fhem:

Datei:Switch.png

2015-05-07T08:55:16Z

Mw fhem:

2015-04-07T13:15:02Z

Mw fhem:

[[Datei:tablet_ui.png|200px|thumb|right|FHEM Tablet UI]]
In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben. Beitrag im FHEM-Forum: http://forum.fhem.de/index.php/topic,34233.0.html

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

== Voraussetzungen ==
* jQuery v1.7+
* font-awesome http://fortawesome.github.io/Font-Awesome
* jquery.gridster http://gridster.net
* jquery.toast

== Installation ==
* Dateien herunterladen: https://github.com/knowthelist/fhem-tablet-ui
* einen neuen Ordner 'tablet' im Verzeichnis /<fhem-Pfad>/www erstellen
* alle Dateien und Unterordner nach /<fhem-Pfad>/www/tablet kopieren
* in fhem.cfg folgende Zeile einfügen: <code>define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend</code>

Das UI ist über "http://<fhem-url>:8083/fhem/tablet" zu erreichen.

Weitere verfügbare Plugins: https://github.com/nesges/Widgets-for-fhem-tablet-ui

Alle Widgets (widget_xxx.js) in den js-Ordner kopieren.

== Konfiguration ==
Die Konfiguration der angezeigten Widgets erfolgt in der Datei '''index.html''' im Hauptordner 'tablet'.

'''Metadaten-Konfiguration'''

Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh
:<code><meta name="longpoll" content="1"></code>

Drag&Drop deaktivieren
:<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)
:<code><meta name="widget_base_width" content="116"></code>
:<code><meta name="widget_base_height" content="131"></code>

Das Layout und das Aussehen des UI kann durch die Klassen-Attribute beeinflusst werden. Verfügbare Klassen sind:

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

== Widgets -- Konfiguration ==

Zurzeit stehen 13 Widgets zur Verfügung:
* thermostat: dial for heater thermostates to set desired value and show current value
* switch: Toggle any command to FHEM (e.g. on / off)
* label: show state as text (colourable)
* symbol: show state as an icon (e.g. window open)
* push: send any command to FHEM e.g. up / down
* volume: dial to set a single value (e.g. 0-60)
* homestatus: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
* dimmer: toogle button with a setter for on value
* slider: vertical slider to select between min/max value
* image: insert an image, the URL is given by a reading
* weather: insert an icon or image, represending a weather literal
* circlemenu: Cover multiple widgets behind a single widget
* playstream: simple button to play a webradio stream

----------------------------------

Für alle Widgets gilt:
;data-type
:Widget-Typ
;data-device
:FHEM-Name (call FHEM's 'list' command to get names)
;class
:css-Klassen für Aussehen und Formatierung des Wdgets

Icon-Konfiguration:

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>

'''SWITCH'''
;data-get
:name of the reading to get from FHEM (default 'STATE')
;data-get-on
:value for ON status to get. (default 'on')
;data-get-off
:value for OFF status to get. (default 'off')
;data-set-on
:value for ON status to set. (default: value of data-get-on)
;data-set-off
:value for OFF status to set. (default: value of data-get-off)
;data-cmd
:name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger) default: 'set'
;data-icon
:name of the font-awesome icon. (default: fa-lightbulb-o)
;data-background-icon
:name of the font-awesome icon for background (default 'fa-circle')
;data-on-color
:color of ON state (default '#aa6900')
;data-off-color
:color of Off state (default '#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)

'''SYMBOL'''
;data-get
:name of the reading to get from FHEM (default 'STATE')
;data-get-on
:value for ON status to get or an array of states (default 'open')
;data-get-off
:value for OFF status to get. (default 'closed')
;data-icon
:name of the font-awesome icon.
;data-background-icon
:name of the font-awesome icon for background (default '')
;data-on-color
:color of ON state (default '#aa6900')
;data-off-color
:color of Off state (default '#505050')
;data-on-colors
:array of 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.

'''LABEL'''
;data-get
:name of the reading to get from FHEM
;data-fix
:keeping a specified number of decimals. (default '-1' -> non-numeric)
;data-part
:split position of the space separated value to show or an RegEx
;data-colors
:a array of color values to affect the colour of the label according to the limit value
;data-limits
:a array of numeric values to affect the colour of the label
;data-unit
:add a unit after a numeric value. use encoded strings e.g. "%B0C%0A"
;class
:small, large, big, bigger, thin, red, green, blue, darker

'''PUSH'''
;data-set
:value to send to FHEM (<command> <device> <value>)
;data-icon
:name of the font-awesome icon.
;data-background-icon
:name of the font-awesome icon for background (default 'fa-circle')
;data-cmd
:name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger) default: 'set'

'''THERMOSTAT'''
;data-get
:name of the reading to get from FHEM (default 'desired-temp')
;data-temp
:reading for measured temperature of thermostates (default 'measured-temp')
;data-set
:command to send to FHEM (set <device> <command> <value>) (default 'desired-temp')
;data-valve
:reading for valve position of thermostates
;data-min
:minimal value to set (default 10)
;data-max
:maximal value to set (default 30)
;data-step
:step size for value adjustment e.g. 0.5 (default 1)
;class
:big, readonly

'''VOLUME'''
;data-get
:name of the reading to get from FHEM (default 'STATE')
;data-set
:command to send to FHEM (set <device> <command> <value>) (default '')
;data-cmd
:name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger) default: 'set'
;data-min
:minimal value to set (default 0)
;data-max
:maximal value to set (default 70)
;class
:small, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back

'''HOMESTATUS'''
;data-get
:name of the reading to get from FHEM (default 'STATE')
;data-set
:command to send to FHEM (<code>set <device> <command> <value></code>) (default '' )
;data-version
:name of the special dummy device to represent

<code>data-version=''</code> (default) 4 states are valid: 1,2,3 or 4 (1=home, 2=night, 3=away, 4=holiday) data-version='residents' or 'roomate' or 'guest' residents states are valid (absent,gone,asleep,home)

'''SLIDER (zurzeit nur vertikal)'''
;data-get
:name of the reading to get from FHEM (default 'STATE')
;data-set
:command to send to FHEM (<code>set <device> <command> <value></code>) (default '')
;data-cmd
:name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger) default: 'set'
;data-min
:minimal value to set (default 0)
;data-max
:maximal value to set (default 100)

'''DIMMER'''
;data-get
:name of the reading to get from FHEM (default 'STATE')
;data-get-on
:value for ON status to get. (default 'on')
;data-get-off
:value for OFF status to get. (default 'off')
;data-set-off
:value for OFF status to set. (default: value of data-get-off)
;data-cmd
:name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger) default: 'set'
;data-set
:command to send to FHEM (<code>set <device> <command> <value></code>) (default '')
;data-icon
:name of the font-awesome icon. (default: fa-lightbulb-o)

'''IMAGE'''
;data-get
:name of the reading to get an URL from FHEM (default 'STATE')
;data-size
:width of the image in px or %, the height scales proportionally. (default: 50%)
;data-url
:URL of the image to show (use data-url or data-device + data-get, not both)

'''WEATHER'''
;data-get
:name of the reading to get the weather literal from FHEM (default 'STATE')

'''CIRCLE-MENÜ'''
;class :

'''PLAYSTREAM'''
;data-url
:URL of the Radio stream

== Widgets -- Beispiele ==
'''Switch'''
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>

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>

'''Slider'''
Slider mit einstellbaren Werten von 10 bis 90:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</pre>

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

'''Playstream'''
Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.

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

== Spezial ==
Folgender Befehl setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
<pre>
<div onclick="setFhemStatus('set dummy1 off')">All off!</div>
</pre>

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

== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
[[Kategorie:FHEM Frontends]]

FHEM Tablet UI

2015-04-04T09:55:19Z

Mw fhem:

FHEM Tablet UI

2015-04-02T12:47:49Z

Mw fhem:

FHEM Tablet UI

2015-04-02T12:44:19Z

Mw fhem: Die Seite wurde neu angelegt: „FHEM Tablet UI In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben. Beitrag im…“

[[Datei:tablet_ui.png|200px|thumb|right|FHEM Tablet UI]]
In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben. Beitrag im FHEM-Forum: http://forum.fhem.de/index.php/topic,34233.0.html

== Voraussetzungen ==
* jQuery v1.7+
* font-awesome http://fortawesome.github.io/Font-Awesome
* jquery.gridster http://gridster.net
* jquery.toast

== Installation ==
* Dateien herunterladen: https://github.com/knowthelist/fhem-tablet-ui
* einen neuen Ordner 'tablet' im Verzeichnis /<fhem-Pfad>/www erstellen
* alle Dateien und Unterordner nach /<fhem-Pfad>/www/tablet kopieren
* in fhem.cfg folgende Zeile einfügen: <code>define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend</code>

Das UI ist über "http://<fhem-url>:8083/fhem/tablet" zu erreichen.

Weitere verfügbare Plugins: https://github.com/nesges/Widgets-for-fhem-tablet-ui

Alle Widgets (widget_xxx.js) in den js-Ordner kopieren.

== Konfiguration ==
Die Konfiguration der angezeigten Widgets erfolgt in der Datei '''index.html''' im Hauptordner 'tablet'.

'''Metadaten-Konfiguration'''

Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh
:<code><meta name="longpoll" content="1"></code>

Drag&Drop deaktivieren
:<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)
:<code><meta name="widget_base_width" content="116"></code>
:<code><meta name="widget_base_height" content="131"></code>

'''Widgets'''

Zurzeit stehen 10 Widgets zur Verfügung:
* thermostat: dial for heater thermostates to set desired value and show current value
* switch: Toggle any command to FHEM (e.g. on / off)
* label: show state as text (colourable)
* symbol: show state as an icon (e.g. window open)
* push: send any command to FHEM e.g. up / down
* volume: dial to set a single value (e.g. 0-60)
* homestatus: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
* dimmer: toogle button with a setter for on value
* slider: vertical slider to select between min/max value
* image: insert an image, the URL is given by a reading
* weather: insert an icon or image, represending a weather literal

Für alle Widgets gilt:
;data-type
:Widget-Typ
;data-device
:FHEM-Name (call FHEM's 'list' command to get names)
;class
:css-Klassen für Aussehen und Formatierung des Wdgets

== Widgets==
'''Switch'''
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>

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>

'''Slider'''
Slider mit einstellbaren Werten von 10 bis 90:

<pre>
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</pre>

== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
[[Kategorie:FHEM Frontends]]

Datei:Tablet ui.png

2015-04-02T12:14:26Z

Mw fhem: