FHEM Tablet UI: Unterschied zwischen den Versionen

Aus FHEMWiki
(Die Seite wurde geleert.)
Markierung: Geleert
 
(322 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 ==
Dieses User Interface für Tablets benötigt <u>keine</u> 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: <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 -- 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. <code>data-icon="fa-volume-up"</code>
'''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')
<code>data-get-on</code> and <code>data-get-off</code> 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 (<code>set <device> <command> <value></code>) (default '' )
;data-version
:name of the special dummy device to represent
<code>data-version=''</code> (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 (<code>set <device> <command> <value></code>) (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 (<code>set <device> <command> <value></code>) (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:
<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]]

Aktuelle Version vom 3. August 2024, 09:53 Uhr

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