FHEM Tablet UI

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

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.

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


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


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

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

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


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>

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

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