FHEM Tablet UI

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 keine 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: define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend

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: update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt

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

<meta name="longpoll" content="1">

Drag&Drop deaktivieren

<meta name='gridster_disable' content='1'>

Toast messages deaktivieren

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

Größe des Basis-Rasters (data-sizey=1/data-sizex=1)

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

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

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

Widgets -- Konfiguration

Zurzeit stehen 14 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

---

Für alle Widgets gilt:

allgemeine Attribute

data-type	Widget-Typ
data-device	FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)
class	CSS-Klassen für Aussehen und Formatierung des Widgets

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. data-icon="fa-volume-up"

SWITCH

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

data-get-on and data-get-off 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

HTML Attribut	Beschreibung	Default Wert
data-get	Name des Reading, was gelesen werden soll	'STATE'
data-get-on	value for ON status to get or an array of states.	'open'
data-get-off	value for OFF status to get.	'closed'
icon	Name des font-awesome-Symbols
data-background-icon	Hintergrundsymbol
data-on-color	Farbe für ON-Zustand.	'#aa6900'
data-off-color	Farbe für OFF-Zustand.	'#505050'
data-on-colors	Name des Font-Awesome Hintergrund Icon.	'fa-circle'
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.

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 (set <device> <command> <value>) (default )

data-version

name of the special dummy device to represent

data-version= (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 (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 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 (set <device> <command> <value>) (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

SELECT

HTML Attribut	Beschreibung	Default Wert
data-get	name of the reading that get the selected item of the list
data-set	name of the reading to set on FHEM (<command> <device> <reading> <value>)
data-list	name of the reading to get a :-separated list from FHEM
data-items	a array of fix items to show in the selection box (alternative if data-list is empty)
data-cmd	name of the command to send to FHEM (<command> <device> <reading> <value>) (e.g. setstate, set, setreading, trigger)	'set'
class	wider, w1x, w2x, w3x

Widgets -- Beispiele

Switch Schalter. Usage of RegEx pattern for state request:

<div data-type="switch" class="cell" 
            data-device="MILIGHT_Zone1_Wohnzimmer" 
            data-get-on="on.*"
            data-get-off="off"></div>

Beispiel für eine Gruppe von Schaltern, um zwischen vier verschiedenen Werten eines device umzuschalten:

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

Slider Slider mit einstellbaren Werten von 10 bis 90:

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

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:

<div data-type="weather" 
     data-device="Weather" 
     data-get="fc0_weatherDay" 
     class="cell big">
</div>

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

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

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.

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

Spezial

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

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

FAQ

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

Links

• Forums-Beitrag
• Projekt auf Github