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:
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
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
Widgets
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.