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


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:

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

FAQ

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

Links