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

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=10895“