|
|
| (324 dazwischenliegende Versionen von 44 Benutzern werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| [[Datei:tablet_ui.png|200px|thumb|right|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: <code>define tablet_ui HTTPSRV tablet ./www/tablet Tablet Frontend</code>
| |
|
| |
| 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
| |
| :<code><meta name="longpoll" content="1"></code>
| |
|
| |
| Drag&Drop deaktivieren
| |
| :<code><meta name='gridster_disable' content='1'></code>
| |
|
| |
| Toast messages deaktivieren
| |
| :<code><meta name='toast' content='1'></code>
| |
|
| |
| Größe des Basis-Rasters (data-sizey=1/data-sizex=1)
| |
| :<code><meta name="widget_base_width" content="116"></code>
| |
| :<code><meta name="widget_base_height" content="131"></code>
| |
|
| |
| 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:
| |
|
| |
| <pre>
| |
| <div data-type="switch" class="cell"
| |
| data-device="MILIGHT_Zone1_Wohnzimmer"
| |
| data-get-on="on.*"
| |
| data-get-off="off"></div>
| |
| </pre>
| |
|
| |
| Beispiel für eine Gruppe von Schaltern, um zwischen vier verschiedenen Werten eines device umzuschalten:
| |
|
| |
| <pre>
| |
| <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>
| |
| </pre>
| |
|
| |
| '''Slider'''
| |
| Slider mit einstellbaren Werten von 10 bis 90:
| |
|
| |
| <pre>
| |
| <div data-type="slider"
| |
| data-device='Dummy1'
| |
| data-min="10"
| |
| data-max="90"
| |
| class="cell" >
| |
| </div>
| |
| <div data-type="label" class="cell">Light1</div>
| |
| </pre>
| |
|
| |
| '''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:
| |
| <pre>
| |
| <div data-type="weather"
| |
| data-device="Weather"
| |
| data-get="fc0_weatherDay"
| |
| class="cell big">
| |
| </div>
| |
| </pre>
| |
|
| |
|
| |
| '''Playstream'''
| |
| Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.
| |
|
| |
| <pre>
| |
| <div data-type="playstream" data-url="http://radioeins.de/stream"></div>
| |
| <div data-type="label" class="darker">Radio eins</div>
| |
| </pre>
| |
|
| |
| == Spezial ==
| |
| Folgender Befehl setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
| |
| <pre>
| |
| <div onclick="setFhemStatus('set dummy1 off')">All off!</div>
| |
| </pre>
| |
|
| |
| == FAQ ==
| |
| Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM_Tablet_UI/FAQ|FHEM Tablet UI FAQ]] zusammengestellt.
| |
|
| |
| == Links ==
| |
| * [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
| |
| [[Kategorie:FHEM Frontends]]
| |
