FHEM Tablet UI: Unterschied zwischen den Versionen

Aus FHEMWiki
Keine Bearbeitungszusammenfassung
(Die Seite wurde geleert.)
Markierung: Geleert
 
(321 dazwischenliegende Versionen von 44 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
[[Datei:tablet_ui.png|200px|thumb|right|FHEM Tablet UI]]
FHEM Tablet UI ist ein leichtgewichtiges aber funktionsreiches Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Zahlreiche Widgets können sehr flexibel und leicht per HTML Code konfiguriert werden.


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:
{| class="wikitable"
|+allgemeine Attribute
|-
!align="right" |data-type
|Widget-Typ
|-
!align="right" |data-device
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)
|-
!align="right" |class
|CSS-Klassen für Aussehen und Formatierung des Widgets
|}
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'''
{| class="wikitable"
!HTML Attribut
!Bschreibung
!Default Wert
|-
!align="right" |data-get
|Name des Reading, was gelesen werden soll
|'STATE'
|-
!align="right" |data-get-on
|Wert, bei dem zum Status ON geschaltet werden soll.
|'on'
|-
!align="right" |data-get-off
|Wert, bei dem zum Status OFF geschaltet werden soll.
|'off'
|-
!align="right" |data-set-on
|Wert, der zu FHEM gesendet werden soll, wenn das Widget auf ON geschaltet wurde 
|Wert von data-get-on
|-
!align="right" |data-set-off
|Wert, der zu FHEM gesendet werden soll, wenn das Widget auf OFF geschaltet wurde
|Wert von data-get-off
|-
!align="right" |data-cmd
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger)
|'set'
|-
!align="right" |data-icon
|Name des Font-Awesome Icon.
|'fa-lightbulb-o'
|-
!align="right" |data-background-icon
|Name des Font-Awesome Hintergrund Icon.
|'fa-circle'
|-
!align="right" |data-on-color
|Widget Farbe beim Status ON
|'#aa6900'
|-
!align="right" |data-off-color
|Widget Farbe beim Status OFF
|'#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]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
[[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“