|
|
| (153 dazwischenliegende Versionen von 27 Benutzern werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| {{Infobox Modul
| |
| |ModPurpose=Oberfläche für FHEM
| |
| |ModType=x
| |
| |ModFTopic=34233
| |
| |ModForumArea=Frontends
| |
| |ModTechName=n.a.
| |
| |ModOwner=setstate ({{Link2FU|7023|Forum}})
| |
| }}
| |
| [[FHEM Tablet UI]] (FTUI) ist ein leichtgewichtiges aber funktionsreiches Frontend-Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Es basiert auf HTML/CSS/JavaScript und stellt somit keine zusätzlichen Anforderungen an den FHEM-Server.
| |
|
| |
|
| Mit Hilfe zahlreicher Widgets, die sehr leicht mit HTML Code konfiguriert werden können, ist es möglich, innerhalb kurzer Zeit ein den eigenen Wünschen entsprechendes User-Interface aufzubauen.
| |
|
| |
| Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.
| |
|
| |
| Mit wenigen Anpassungen ist es auch möglich das UI auf anderen Webservern (Apache, u.a.) zu betreiben. Somit können FHEM und FHEM Tablet UI auch auf getrennten Systemen ausgeführt werden.
| |
|
| |
| [[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]
| |
|
| |
| {{Todo|alle Widgets hier übernehmen, Übersetzung, weitere Beispiele aus dem Forum einfügen (evtl. mit Link!?)}}
| |
|
| |
| ==Getting started==
| |
| === Installation ===
| |
| * Im Befehls-Eingabefeld eingeben: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
| |
| * Im Befehls-Eingabefeld eingeben: <code>define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI</code>
| |
| * Im Verzeichnis ./fhem/www/tablet die Datei index-example.html in index.html umbenennen oder eine neue index.html erzeugen und diese index.html wie nachfolgend beschrieben editieren.
| |
|
| |
| Das UI ist über den Link "Tablet-UI" auf der FHEM-Hauptseite oder durch Direktaufruf der URL "<nowiki>http://<Fhem-url>:8083/fhem/tablet/index.html</nowiki>" zu erreichen.
| |
|
| |
| Hinweise zu einer manuellen Installation und weitere Infos sind auf der Projektseite https://github.com/knowthelist/fhem-tablet-ui zu finden.
| |
|
| |
| === Update ===
| |
| * Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von: <code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
| |
| * Update des UI durch Eingabe von: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
| |
|
| |
| Über
| |
| <code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
| |
| kann seit dem 24.12.2015 die URL zum normalen Updatebefehl von FHEM hinzugefügt werden. Mit einen "update check" sieht man dann gleich alle Updates aus beiden "Welten".
| |
|
| |
| === Konfiguration ===
| |
| '''META-Parameter'''
| |
|
| |
| Das Tablet UI lässt sich über die META-Parameter konfigurieren. Mit den meisten META-Parametern kann das verhalten des UI beeinflusst werden. Diese Parameter befinden sich in der jeweiligen '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>'''. Nachfolgend sind die verschiedenen Konfigurationsparameter aufgeführt. Die Parameter sind immer gleich aufgebaut.
| |
|
| |
| :<code><meta name="<META-Parameter>" content="<Wert>"></code>
| |
|
| |
| {| class="wikitable"
| |
| |-
| |
| ! META-Parameter !! Wert / Beispiel !! Erklärung
| |
| |-
| |
| | longpoll || 1 oder 0 || Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh.
| |
| |-
| |
| | gridster_disable || 1 oder 0 || Drag&Drop der Gridster-Elemente auf der Seite deaktivieren.
| |
| |-
| |
| | toast || 1 oder 0 || Toast messages deaktivieren
| |
| |-
| |
| | fhemweb_url || <nowiki>http://meinFhemServer:8083/fhem</nowiki> || Wird benötigt wenn der Webserver des TabletUI nicht auf dem FHEM Server läuft.Default: "/fhem/"
| |
| |-
| |
| | widget_margin || 1 bis 9999 || Abstände der Gridsterelemente verändern.
| |
| |-
| |
| | widget_base_width || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.
| |
| |-
| |
| | widget_base_height || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.
| |
| |-
| |
| | gridster_cols || 1 bis 9999 || Anzahl der Spalten.
| |
| |-
| |
| | gridster_rows || 1 bis 9999 || Anzahl der Reihen.
| |
| |-
| |
| | lang || de || Sprache der Visualisierung (derzeit nur DE vorhanden).
| |
| |}
| |
|
| |
| '''Layout'''
| |
|
| |
| Seit Version 2.5 werden die Gridster Kachel-Grössen, die Anzahl der Spalten und die Anzahl der Reihen dynamisch anhand der Bildschirmgrösse berechnet.
| |
|
| |
| Möchte man die Anzahl der Spalten und Reihen fest vorgeben:
| |
|
| |
| <pre><meta name="gridster_cols" content="12">
| |
| <meta name="gridster_rows" content="9"></pre>
| |
|
| |
| Mit folgendem Code kann man die Kachelgrössen fix definieren:
| |
|
| |
| <pre><meta name="widget_base_width" content="116">
| |
| <meta name="widget_base_height" content="131"></pre>
| |
|
| |
| '''Zoom auf mobilen Endgeräten'''
| |
|
| |
| Um automatische Skalierung und Zoom-Gesten auf mobilen Endgeräten zu unterbinden, kann folgender Meta-Tag im Kopf der Seite eingebunden werden:
| |
| <pre><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /></pre>
| |
|
| |
| '''FHEM URL'''
| |
|
| |
| Werden die FTUI Seiten von einem anderen Server als FHEM-HTTPSRV bereitgestellt, muss man die URL, unter der FHEM angesprochen wird, anpassen:
| |
|
| |
| <pre><meta name="fhemweb_url" content="/fhem/"></pre>
| |
|
| |
| ==Styling==
| |
| === Farbe ===
| |
| Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form oder als RGB-Wert anzugeben. Zum Beispiel: Hex: #A3CFA3 RBG: rgb(163, 207, 163). Knallige Farben wie #ff0000 für Rot oder #00ff00 für Grün sollten vermieden werden. Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben. Hilfreich bei der Suche nach den Farbwerten ist der color picker: http://www.w3schools.com/tags/ref_colorpicker.asp oder diese Quelle: https://flatuicolors.com
| |
|
| |
| ===CSS-Styles===
| |
| Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt [[#CSS Class description|CSS Class description]] oder [[#Positioning|Positioning]] aufgeführt. Es besteht auch die Möglichkeit eine eigene CSS Datei zu erstellen und darüber Änderungen am Aussehen des UI vorzunehmen. Die eigene CSS Datei würde bei einem Update unverändert bleiben. Daher ist abzuraten eine CSS Datei, die mit dem UI Update verteilt wird zu modifizieren. Die eigene CSS Datei ist unter '''/fhem/tablet/css''' mit dem Namen '''fhem-tablet-ui-user.css''' zu finden. Sollte diese nicht vorhanden sein kann die Datei manuell erstellt werden.
| |
| Wird keine eigene CSS-Datei verwendet empfiehlt es sich den folgenden Eintrag im <head> der jeweiligen .html Datei zu entfernen, bzw. in Kommentar zu setzen um Probleme beim Laden der Seite zu verhindern.
| |
| <code><link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /></code>
| |
|
| |
| === CSS-Klassen ===
| |
| Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.
| |
|
| |
| {|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
| |
| !colspan="2" style="text-align: left;"|sheet/row/cell-Layout
| |
| |-
| |
| !class="mw-collapsible-content"|Klasse!!Beschreibung
| |
| {{FTUI Klasse|sheet}}{{FTUI Klasse|row}}{{FTUI Klasse|cell}}{{FTUI Klasse|cell-1-x}}{{FTUI Klasse|cell-x}}{{FTUI Klasse|left-align}}{{FTUI Klasse|right-align}}{{FTUI Klasse|bottom-align}}{{FTUI Klasse|top-align}}{{FTUI Klasse|center-align}}
| |
| |}
| |
|
| |
| {|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
| |
| !colspan="2" style="text-align: left;"|row/col-Layout
| |
| |-
| |
| !class="mw-collapsible-content"|Klasse!!Beschreibung
| |
| {{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}
| |
| |}
| |
|
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''hbox/vbox-Layout'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|vbox}}{{FTUI Klasse|hbox}}{{FTUI Klasse|card}}{{FTUI Klasse|phone-width}}{{FTUI Klasse|full-height}}{{FTUI Klasse|full-width}}{{FTUI Klasse|grow-0}}{{FTUI Klasse|grow-1}}{{FTUI Klasse|grow-2}}{{FTUI Klasse|grow-x}}{{FTUI Klasse|items-top}}{{FTUI Klasse|items-center}}{{FTUI Klasse|items-bottom}}{{FTUI Klasse|items-space-between}}{{FTUI Klasse|items-space-around}}
| |
| |}</div>
| |
| </div>
| |
|
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''Generelle Klassen für die Positionierung'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|inline}}{{FTUI Klasse|newline}}{{FTUI Klasse|top-space}}{{FTUI Klasse|top-space-2x}}{{FTUI Klasse|top-space-3x}}{{FTUI Klasse|left-space}}{{FTUI Klasse|left-space-2x}}{{FTUI Klasse|left-space-3x}}{{FTUI Klasse|right-space}}{{FTUI Klasse|right-space-2x}}{{FTUI Klasse|right-space-3x}}{{FTUI Klasse|top-narrow}}{{FTUI Klasse|top-narrow-2x}}{{FTUI Klasse|top-narrow-10}}{{FTUI Klasse|left-narrow}}{{FTUI Klasse|left-narrow-2x}}{{FTUI Klasse|left-narrow-3x}}{{FTUI Klasse|right-narrow}}{{FTUI Klasse|right-narrow-2x}}{{FTUI Klasse|right-narrow-3x}}{{FTUI Klasse|centered}}{{FTUI Klasse|wider}}{{FTUI Klasse|narrow}}{{FTUI Klasse|fullsize}}{{FTUI Klasse|compressed}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|maxw40}}{{FTUI Klasse|doublebox-v}}{{FTUI Klasse|doublebox-h}}{{FTUI Klasse|triplebox-v}}
| |
| |}</div>
| |
| </div>
| |
|
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''Vordergrundfarben'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|lightblue}}{{FTUI Klasse|orange}}{{FTUI Klasse|gray}}{{FTUI Klasse|lightgray}}{{FTUI Klasse|white}}{{FTUI Klasse|black}}{{FTUI Klasse|mint}}{{FTUI Klasse|yellow}}
| |
| |}</div>
| |
| </div>
| |
|
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''Hintergrundfarben'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|bg-red}}{{FTUI Klasse|bg-green}}{{FTUI Klasse|bg-blue}}{{FTUI Klasse|bg-lightblue}}{{FTUI Klasse|bg-orange}}{{FTUI Klasse|bg-gray}}{{FTUI Klasse|bg-lightgray}}{{FTUI Klasse|bg-white}}{{FTUI Klasse|bg-black}}{{FTUI Klasse|bg-mint}}{{FTUI Klasse|bg-yellow}}
| |
| |}</div>
| |
| </div>
| |
|
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''Rahmen'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|verticalLine}}{{FTUI Klasse|border-black}}{{FTUI Klasse|border-white}}{{FTUI Klasse|border-orange}}{{FTUI Klasse|border-red}}{{FTUI Klasse|border-green}}{{FTUI Klasse|border-mint}}{{FTUI Klasse|border-lightblue}}{{FTUI Klasse|border-blue}}{{FTUI Klasse|border-gray}}{{FTUI Klasse|border-yellow}}{{FTUI Klasse|border-lightgray}}
| |
| |}</div>
| |
| </div>
| |
|
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''Größen'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|mini}}{{FTUI Klasse|tiny}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|tall}}{{FTUI Klasse|great}}{{FTUI Klasse|grande}}{{FTUI Klasse|gigantic}}
| |
| |}</div>
| |
| </div>
| |
|
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''Schriftstil'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}
| |
| |}</div>
| |
| </div>
| |
|
| |
|
| |
| <div class="toccolours mw-collapsible mw-collapsed">'''Sonstiges'''<div class="mw-collapsible-content">
| |
| {|class="wikitable" style="width: 100%;"
| |
| {{FTUI Klasse|blank}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}{{FTUI Klasse|fail-shake}}{{FTUI Klasse|marquee}}{{FTUI Klasse|icon round}}{{FTUI Klasse|icon square}}{{FTUI Klasse|readonly}}{{FTUI Klasse|blink}}{{FTUI Klasse|rotate-90}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|autohide}}{{FTUI Klasse|notransmit}}{{FTUI Klasse|tab}}{{FTUI Klasse|FS20}}{{FTUI Klasse|value}}{{FTUI Klasse|novalue}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|percent}}{{FTUI Klasse|nocache}}
| |
| |}</div>
| |
| </div>
| |
|
| |
| == Widgets ==
| |
| === Integrierte Widgets ===
| |
| Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.
| |
|
| |
| * [[FTUI Widget Agenda|agenda]]:
| |
| * [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.
| |
| * [[FTUI Widget Calview|calview]]:
| |
| * [[FTUI Widget Chart|chart]]: chart with similar capabilities as the FHEM plots
| |
| * [[FTUI Widget Checkbox|checkbox]]:
| |
| * [[#Circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
| |
| * [[FTUI Widget Classchanger|classchanger]]:
| |
| * [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
| |
| * [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.
| |
| * [[FTUI Widget Colorwheel|colorwheel]]:
| |
| * [[FTUI Widget Datetimepicker|datetimepicker]]:
| |
| * [[#Departure|departure]]: show timetable of public transport provider
| |
| * [[#Dimmer|dimmer]]: toogle button with a setter for on value
| |
| * [[FTUI Widget Eventmonitor|eventmonitor]]:
| |
| * [[FTUI Widget Fullcalview|fullcalview]]:
| |
| * [[FTUI Widget Gds|gds]]:
| |
| * [[FTUI Widget Highchart|highchart]]:
| |
| * [[FTUI Widget Highchart3d|highchart3d]]:
| |
| * [[#Homestatus|homestatus]]: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
| |
| * [[FTUI Widget Html|html]]:
| |
| * [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe.
| |
| * [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.
| |
| * [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes
| |
| * [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
| |
| * [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
| |
| * [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
| |
| * [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/klimatrend klimatrend]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt.
| |
| * [[FTUI Widget Knob|knob]]:
| |
| * [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
| |
| * [[FTUI Widget Label|label]]: Reading als Text anzeigen
| |
| * [[FTUI Widget Level|level]]: vertical/horizontal bar to show values between min/max value
| |
| * [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM
| |
| * [[FTUI Widget Loading|loading]]:
| |
| * [[FTUI Widget Medialist|medialist]]:
| |
| * [[FTUI Widget Meteogram|meteogram]]:
| |
| * [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
| |
| * [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/multistatebutton multistatebutton]: Variante des push-Widgets das den set-Befehl abhängig vom gelesenen Status ändert.
| |
| * [[FTUI Widget Notify|notify]]:
| |
| * [[FTUI Widget Pagebutton|pagebutton]]:
| |
| * [[#Pagetab|pagetab]]: Element to smoothly exchange the whole page with another page
| |
| * [[#Playstream|playstream]]: Abspielen eines Webradio-Streams per Button
| |
| * [[#Popup|popup]]: a popup dialog which open on click on another widget
| |
| * [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste
| |
| * [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.
| |
| * [[FTUI Widget Range|range]]:
| |
| * [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde
| |
| * [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads
| |
| * [[#Rotor|rotor]]: Umschalten von zwei oder mehr Widgets an einer Position
| |
| * [[FTUI Widget Screensaver|screensaver]]:
| |
| * [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt
| |
| * [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: zum anzeigen und einstellen einer Uhrzeit.
| |
| * [[FTUI Widget Simplechart|simplechart]]: simple XY line chart for one value (reads directly from FHEM log file)
| |
| * [[FTUI Widget Slideout|slideout]]:
| |
| * [[FTUI Widget Slider|slider]]: vertical slider to select between min/max value
| |
| * [[FTUI Widget Spinner|spinner]]:
| |
| * [[FTUI Widget Svgplot|svgplot]]:
| |
| * [[FTUI Widget Swiper|swiper]]:
| |
| * [[FTUI Widget Switch|switch]]: Toggle any command to FHEM (e.g. on / off)
| |
| * [[#Symbol|symbol]]: State als Symbol darstellen (z.B. Fenster offen)
| |
| * [[#Thermostat|thermostat]]: dial for heater thermostates to set desired value and show current value
| |
| * [[FTUI Widget Tts|tts]]:
| |
| * [[FTUI Widget Uwz|uwz]]:
| |
| * [[#Volume|volume]]: dial to set a single value (e.g. 0-60)
| |
| * [[FTUI Widget Wakeup|wakeup]]:
| |
| * [[FTUI Widget Wdtimer|wdtimer]]:
| |
| * [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen
| |
| * [[FTUI Widget Weekprofile|weekprofile]]:
| |
| * [[FTUI Widget Wind_direction|Wind_direction]]: Anzeige der Windrichtung auf einer Windrose
| |
|
| |
| ===3rd Party Widgets===
| |
| * [https://github.com/svenson08/ftui-weekdaytimer-widget weekdaytimer]: Visualisierung des [[WeekdayTimer]] Modul
| |
|
| |
| ==Attribute==
| |
|
| |
| Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:
| |
|
| |
| {| 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
| |
| |-
| |
| |}
| |
|
| |
| {| class="wikitable"
| |
| |+Daten Empfangen
| |
| |-
| |
| !align="right" |data-get
| |
| |Reading Name
| |
| |-
| |
| !align="right" |data-get-on
| |
| |Wert für den Status on
| |
| |-
| |
| !align="right" |data-get-off
| |
| |Wert für den Status off
| |
| |-
| |
| |}
| |
|
| |
| {| class="wikitable"
| |
| |+Daten Senden
| |
| |-
| |
| !align="right" |data-set
| |
| |Reading Name
| |
| |-
| |
| !align="right" |data-set-on
| |
| |Wert für den Status on
| |
| |-
| |
| !align="right" |data-set-off
| |
| |Wert für den Status off
| |
| |-
| |
| |}
| |
|
| |
| Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.
| |
|
| |
|
| |
| ==Attribute einiger Widgets==
| |
|
| |
| ===Circlemenu===
| |
|
| |
| {| class="wikitable"
| |
| !HTML Attribut
| |
| !Beschreibung
| |
| !Default Wert
| |
| |-
| |
| !align="right" |data-item-diameter
| |
| |diameter of the circle
| |
| |52
| |
| |-
| |
| !align="right" |data-circle-radius
| |
| |radius of each item, in pixel
| |
| |70
| |
| |-
| |
| !align="right" |data-direction
| |
| |position of the items in relation to the center
| |
| |'full'
| |
| |-
| |
| !align="right" |data-close-after
| |
| |closing time of the circle-menu
| |
| |(item-count + 1s) or a minimum of 4s
| |
| |-
| |
| !align="right" |class
| |
| |keepopen
| |
| |
| |
| |-
| |
| |}
| |
|
| |
| Optionen für data-direction: top | right | bottom | left | top-right | top-left | bottom-right | bottom-left | top-half | right-half | bottom-half | left-half | full | vertical | horizontal
| |
|
| |
| [[#Beispiel_circlemenu|Link zu einem Beispiel]]
| |
|
| |
|
| |
| ===Departure===
| |
|
| |
| {| class="wikitable"
| |
| !HTML Attribut
| |
| !Beschreibung
| |
| !Default Wert
| |
| |-
| |
| !align="right" |data-type
| |
| |widget-type; must be departure
| |
| |
| |
| |-
| |
| !align="right" |data-device
| |
| |name of the device to get data from
| |
| |
| |
| |-
| |
| !align="right" |data-get
| |
| |name of the reading of device to get data from
| |
| |
| |
| |-
| |
| !align="right" |data-icon
| |
| |define icon for widget
| |
| |
| |
| |-
| |
| !align="right" |data-interval
| |
| |interval to reload automatically
| |
| |
| |
| |-
| |
| !align="right" |class
| |
| |choose style of widget; see example
| |
| |
| |
| |-
| |
| |}
| |
|
| |
| [[#Beispiel_departure|Link zu einem Beispiel]]
| |
|
| |
|
| |
| ===Dimmer===
| |
|
| |
| {| class="wikitable"
| |
| !HTML Attribut
| |
| !Beschreibung
| |
| !Default Wert
| |
| |-
| |
| !align="right" |data-get
| |
| |name of the reading to get from FHEM
| |
| |'STATE'
| |
| |-
| |
| !align="right" |data-get-on
| |
| |value for ON status to get
| |
| |'on'
| |
| |-
| |
| !align="right" |data-get-off
| |
| |value for OFF status to get
| |
| |'off'
| |
| |-
| |
| !align="right" |data-set
| |
| |(<command> <device> <reading> <value>)
| |
| |
| |
| |-
| |
| !align="right" |data-set-on
| |
| |value for ON status to set
| |
| |value of data-get-on
| |
| |-
| |
| !align="right" |data-set-off
| |
| |value for OFF status to set
| |
| |value of data-get-off
| |
| |-
| |
| !align="right" |data-cmd
| |
| |name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
| |
| |'set'
| |
| |-
| |
| !align="right" |data-dim
| |
| |name of the reading responsible for dim (<command> <device> <reading> <value>)
| |
| |value of data-get-on
| |
| |-
| |
| !align="right" |data-icon
| |
| |name of the font-awesome icon
| |
| |fa-lightbulb-o
| |
| |-
| |
| |}
| |
|
| |
| [[#Beispiel_dimmer|Link zu einem Beispiel]]
| |
|
| |
| ===Homestatus===
| |
|
| |
| {| class="wikitable"
| |
| !HTML Attribut
| |
| !Beschreibung
| |
| !Default Wert
| |
| |-
| |
| !align="right" |data-get
| |
| |name of the reading to get from FHEM
| |
| |'STATE'
| |
| |-
| |
| !align="right" |data-set
| |
| |command to send to FHEM (<code>set <device> <command> <value></code>)
| |
| |''
| |
| |-
| |
| !align="right" |data-get-on
| |
| |array of states using for get
| |
| |['1','2','3','4']
| |
| |-
| |
| !align="right" |data-set-on
| |
| |array of states using for set.
| |
| |value of data-get-on
| |
| |-
| |
| !align="right" |data-alias
| |
| |array of fix names to show only in the UI as an alias to the real states
| |
| |''
| |
| |-
| |
| !align="right" |data-icons
| |
| |array of icons related to the data-get-on array
| |
| |''
| |
| |-
| |
| !align="right" |data-version
| |
| |name of the status model e.g. 'residents','roommate','guest'
| |
| |(default NULL)
| |
| |-
| |
| |}
| |
|
| |
| The default version has 4 states: '1','2','3','4' The default aliases are 'Home','Night','Away','Holiday'; data-version='residents' or 'roommate' or 'guest' has 5 states ('home','asleep','absent','gone','gotosleep') They have these aliases 'Home','Night','Away','Holiday','Retire'
| |
|
| |
| [[#Beispiel_homestatus|Link zu einem Beispiel]]
| |
|
| |
|
| |
| ===Pagetab===
| |
|
| |
| {| class="wikitable"
| |
| !HTML Attribut
| |
| !Beschreibung
| |
| !Default Wert
| |
| |-
| |
| !align="right" |data-url
| |
| |URL of the new page to show
| |
| |
| |
| |-
| |
| !align="right" |data-icon
| |
| |name of the font-awesome icon
| |
| |'fa-power-off'
| |
| |-
| |
| !align="right" |data-background-icon
| |
| |name of the font-awesome icon for background
| |
| |''
| |
| |-
| |
| !align="right" |data-on-background-color
| |
| |color of ON state
| |
| |'#aa6900'
| |
| |-
| |
| !align="right" |data-off-background-color
| |
| |color of OFF state
| |
| |'#505050'
| |
| |-
| |
| !align="right" |data-on-color
| |
| |color of ON state
| |
| |'#aa6900'
| |
| |-
| |
| !align="right" |data-off-color
| |
| |color of Off state
| |
| |'#505050'
| |
| |-
| |
| !align="right" |data-get-on
| |
| |array of status to assign a special icon-list from data-icons
| |
| |
| |
| |-
| |
| !align="right" |data-icons
| |
| |array of icons related to the a data-get-on array
| |
| |
| |
| |-
| |
| !align="right" |class
| |
| |warn, activate (as additionals for data-icons)
| |
| |
| |
| |-
| |
| |}
| |
|
| |
| [[#Beispiel_pagetab|Link zu einem Beispiel]]
| |
|
| |
| ===Playstream===
| |
|
| |
| {| class="wikitable"
| |
| !HTML Attribut
| |
| !Beschreibung
| |
| !Default Wert
| |
| |-
| |
| !align="right" |data-url
| |
| |URL des Radio-Streams
| |
| |-
| |
| !align="right" |data-get
| |
| |name of the reading to get the control state from FHEM
| |
| |'STATE'
| |
| |-
| |
| !align="right" |data-get-on
| |
| |value for PLAY status to get.
| |
| |'on'
| |
| |-
| |
| !align="right" |data-get-off
| |
| |value for STOP status to get.
| |
| |'off'
| |
| |-
| |
| !align="right" |data-volume
| |
| |name of the reading to get the volume value (0-100)
| |
| |volume
| |
| |-
| |
| |}
| |
|
| |
| [[#Beispiel_playstream|Link zu einem Beispiel]]
| |
|
| |
| ===Popup===
| |
|
| |
| {| class="wikitable"
| |
| !HTML Attribut
| |
| !Beschreibung
| |
| !Default Wert
| |
| |-
| |
| !align="right" |data-get
| |
| |name of the reading where to get the alert value from
| |
| |'STATE'
| |
| |-
| |
| !align="right" |data-get-on
| |
| |value which trigger to open the dialog
| |
| |'on'
| |
| |-
| |
| !align="right" |data-off
| |
| |value which trigger to close the dialog
| |
| |'off'
| |
| |-
| |
| !align="right" |data-width
| |
| |fixe size for width (in % or px)
| |
| |
| |
| |-
| |
| !align="right" |data-height
| |
| |fixe size for height (in % or px)
| |
| |
| |
| |-
| |
| |}
| |
|
| |
| [[#Beispiel_popup|Link zu einem Beispiel]]
| |
|
| |
| ===Rotor===
| |
|
| |
| {| class="wikitable"
| |
| !HTML Attribut
| |
| !Beschreibung
| |
| !Default Wert
| |
| |-
| |
| !align="right" | data-delay
| |
| |time in millisecondes to wait until next list item get shown
| |
| |3500
| |
| |-
| |
| !align="right" |class
| |
| |fade, rotate
| |
| |''
| |
| |-
| |
| |}
| |
| Ohne Angabe von class erfolgt keine Animation.
| |
|
| |
| [[#Beispiel_rotor|Link zu einem Beispiel]]
| |
|
| |
|
| |
| ===Symbol===
| |
|
| |
| Mit dem SYMBOL Widget kann der STATUS eines Device dargestellt werden. Dabei kann das angezeigte Symbol und dessen Farbe bestimmt werden. Wie bei anderen Widgets kann das Symbol und die Farbe vom State abhängig konfiguriert werden. Das SYMBOL-Widget dient nur zur Anzeige eines STATUS, es besitzt kein Möglichkeit der Interaktion.
| |
|
| |
| Neben den '''allgemeine Attribute''' besitzt das SYMBOL-Widget die nachfolgenden Attribute.
| |
|
| |
| dual state notation
| |
| {| class="wikitable"
| |
| ! HTML Attribut !! Beschreibung !! Default Wert
| |
| |-
| |
| | data-get || Name des Reading, was gelesen werden soll || 'STATE'
| |
| |}
| |
|
| |
| Einstellung bei zwei Werten
| |
| {| class="wikitable"
| |
| !HTML-Attribut !! Beschreibung !! Default-Wert
| |
| |-
| |
| |'''data-get-on''' ||Wert für on ||'open'
| |
| |-
| |
| |'''data-get-off''' ||Wert für off ||'closed'
| |
| |-
| |
| |'''data-get-warn''' ||?????? ||'-1'
| |
| |-
| |
| |'''data-icon''' ||Name des Symbols ||'ftui-window'
| |
| |-
| |
| |'''data-background-icon''' ||Hintergrundsymbol ||'''leer'''
| |
| |-
| |
| |'''data-on-background-color''' ||Farbe für ON-Zustand. ||'#aa6900'
| |
| |-
| |
| |'''data-off-background-color''' ||Farbe für OFF-Zustand. ||'#505050'
| |
| |-
| |
| |'''data-on-color''' ||Farbe für ON-Zustand. ||'#aa6900'
| |
| |-
| |
| |'''data-off-color''' ||Farbe für OFF-Zustand. ||'#505050'
| |
| |-
| |
| |}
| |
|
| |
| Einstellung bei mehreren Werten
| |
|
| |
| {| class="wikitable"
| |
| !HTML Attribut
| |
| !Beschreibung
| |
| !Default Wert
| |
| |-
| |
| !align="right" |data-states
| |
| |Array für states.
| |
| |
| |
| |-
| |
| !align="right" |data-icons
| |
| |Array mit Icons zu data-states Array
| |
| |
| |
| |-
| |
| !align="right" |data-background-icons
| |
| |Array mit Icons zu data-states Array
| |
| |
| |
| |-
| |
| !align="right" |data-colors
| |
| |Array mit Farben zu data-states aArray
| |
| |''
| |
| |-
| |
| !align="right" |data-background-colors
| |
| |Array mit Hintergrundfarben zu data-states array
| |
| |''
| |
| |-
| |
| |}
| |
|
| |
| data-get-on,data-get-off and data-states accept also RegEx values. The value for one icon can also contain an additional animatation CSS name, e.g. "fa-exclamation-triangle fa-blink" for a blinking Symbol
| |
|
| |
| [[#Beispiel_symbol|Link zu einem Beispiel]]
| |
|
| |
| ===Thermostat===
| |
|
| |
| {| class="wikitable"
| |
| !HTML Attribut
| |
| !Beschreibung
| |
| !Default Wert
| |
| |-
| |
| !align="right" |data-get
| |
| |name of the reading to get from FHEM
| |
| |'desired-temp'
| |
| |-
| |
| !align="right" |data-temp
| |
| |reading for measured temperature of thermostates
| |
| |'measured-temp'
| |
| |-
| |
| !align="right" |data-set
| |
| |command to send to FHEM (set <device> <command> <value>)
| |
| |'desired-temp'
| |
| |-
| |
| !align="right" |data-valve
| |
| |reading for valve position of thermostates
| |
| |
| |
| |-
| |
| !align="right" |data-min
| |
| |minimal value to set
| |
| | 10
| |
| |-
| |
| !align="right" |data-max
| |
| |maximal value to set
| |
| | 30
| |
| |-
| |
| !align="right" |data-minColor
| |
| |Farbe des Keises für Min
| |
| | #4477FF
| |
| |-
| |
| !align="right" |data-maxColor
| |
| |Farbe des Kreises für Max, zwischen Min und Max wird linear interpoliert
| |
| | #FF0000
| |
| |-
| |
| !align="right" |data-step
| |
| |step size for value adjustment e.g. 0.5
| |
| |1
| |
| |-
| |
| !align="right" |data-bgColor
| |
| |Die Farbe der Kreises zwischen den ticks
| |
| |'transparent'
| |
| |-
| |
| !align="right" |data-fgColor
| |
| |Die Farbe der zahl im Kreismittelpunkt
| |
| |#bbbbbb
| |
| |-
| |
| !align="right" |data-tkColor
| |
| |Die Farbe der ticks
| |
| |#696969
| |
| |-
| |
| |-
| |
| !align="right" |data-angleOffset
| |
| |Start der ticks im Kreis (in Winkelgraden, 0 = oben)
| |
| | -120
| |
| |-
| |
| !align="right" |data-angleArc
| |
| |Bereich der ticks im Kreis (in Winkelgraden)
| |
| |240
| |
| |-
| |
| !align="right" |class
| |
| |big, readonly
| |
| |
| |
| |-
| |
| |}
| |
|
| |
| [[#Beispiel_thermostat|Link zu einem Beispiel]]
| |
|
| |
|
| |
| ===Volume===
| |
|
| |
| {| class="wikitable"
| |
| !HTML Attribut
| |
| !Beschreibung
| |
| !Default Wert
| |
| |-
| |
| !align="right" |data-get
| |
| |name of the reading to get from FHEM
| |
| |'STATE'
| |
| |-
| |
| !align="right" |data-set
| |
| |command to send to FHEM (set <device> <command> <value>)
| |
| |''
| |
| |-
| |
| !align="rigth" |data-cmd
| |
| |name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
| |
| |'set'
| |
| |-
| |
| !align="right" |data-min
| |
| |minimal value to set
| |
| |0
| |
| |-
| |
| !align="right" |data-max
| |
| |maximal value to set
| |
| |70
| |
| |-
| |
| !align="right" |data-get-value
| |
| |RegEx to retrieve the value or part number of the space separated input to get the value
| |
| |'-1': all of the input
| |
| |-
| |
| !align="right" |data-set-value
| |
| |Format of the value to send to FHEM
| |
| |'$v': the value only
| |
| |-
| |
| !align="right" |data-tickstep
| |
| |distance between ticks
| |
| |4|20
| |
| |-
| |
| !align="right" |data-unit
| |
| |add a unit after the desired value.
| |
| |
| |
| |-
| |
| !align="right" |class
| |
| |mini, small, big, bigger, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back, readonly
| |
| |
| |
| |-
| |
| |}
| |
|
| |
| [[#Beispiel_volume|Link zu einem Beispiel]] (fehlt noch)
| |
|
| |
| == Widgets -- Beispiele ==
| |
|
| |
| <div id="Beispiel_circlemenu">'''Circlemenu'''</div>
| |
|
| |
| Cover a lot of other button behind one single button
| |
|
| |
| <pre>
| |
| <div class="left">
| |
| <div data-type="circlemenu" class="cell circlemenu">
| |
| <ul class="menu">
| |
| <li><div data-type="push" data-icon="fa-wrench"></div></li>
| |
| <li><div data-type="push" data-device="AvReceiver"
| |
| data-set="remoteControl subwoofer-temporary-level -6"
| |
| data-icon="">-6</div></li>
| |
| <li><div data-type="push" data-device="AvReceiver"
| |
| data-set="remoteControl subwoofer-temporary-level -2"
| |
| data-icon="">-2</div></li>
| |
| <li><div data-type="push" data-device="AvReceiver"
| |
| data-set="remoteControl subwoofer-temporary-level 0"
| |
| data-icon="">0</div></li>
| |
| <li><div data-type="push" data-device="AvReceiver"
| |
| data-set="remoteControl subwoofer-temporary-level +3"
| |
| data-icon="">2</div></li>
| |
| <li><div data-type="push" data-device="AvReceiver"
| |
| data-set="remoteControl subwoofer-temporary-level +9"
| |
| data-icon="">9</div></li>
| |
| <li><div data-type="push" data-device="AvReceiver"
| |
| data-set="remoteControl subwoofer-temporary-level +C"
| |
| data-icon="">12</div></li>
| |
| </ul>
| |
| </div>
| |
| <div data-type="label" class="cell">Woofer</div>
| |
| </div>
| |
| </pre>
| |
|
| |
| [[Datei:circlemenu_tabletUI.png]]
| |
|
| |
|
| |
| <div id="Beispiel_departure">'''Departure'''</div>
| |
|
| |
| Departure Widget Beispiel
| |
|
| |
| Minimalvariante
| |
| <pre>
| |
| <div data-type="departure"
| |
| data-device="vvs"
| |
| data-get="SSB-Zentrum"
| |
| data-icon="fa-train"
| |
| data-interval="0">
| |
| </div>
| |
| </pre>
| |
|
| |
| Optionen für class
| |
| <pre>
| |
| class="" : default Style (grau)
| |
| class="DVB" anderer Style (gelb)
| |
| class="VVO" : anderer Style (blau)
| |
| class="alternate" : alternierender Hintergrund
| |
| class="deptime" : Abfahrtszeit statt Minuten
| |
| </pre>
| |
|
| |
| weiteres Beispiel
| |
| <pre>
| |
| <div data-type="departure"
| |
| data-device="vvs"
| |
| data-get="SSB-Zentrum"
| |
| data-icon="fa-train"
| |
| data-interval="0"
| |
| class="DVB deptime alternate">
| |
| </div>
| |
| </pre>
| |
|
| |
|
| |
| <div id="Beispiel_dimmer">'''Dimmer'''</div>
| |
|
| |
| Dimmer Widget Beispiel für Philips Hue
| |
|
| |
| Minimalvariante
| |
| <pre>
| |
| <div data-type="dimmer" data-device="HUEDevice1"
| |
| data-get-on="!off" data-get-off="off"
| |
| data-set="pct"></div>
| |
| </pre>
| |
|
| |
| Mit Anzeige der Dimstufe
| |
| <pre>
| |
| <div data-type="dimmer" data-device="HUEDevice1"
| |
| data-get="onoff"
| |
| data-get-on="1" data-get-off="0"
| |
| data-set=""
| |
| data-set-on="on" data-set-off="off"
| |
| data-dim="pct">
| |
| </div>
| |
| </pre>
| |
|
| |
| Dimmer Widget für MilightDevice
| |
|
| |
| <pre>
| |
| <div data-type="dimmer"
| |
| data-device="SonstWas"
| |
| data-get="brightness"
| |
| data-get-off="0"
| |
| data-get-on="[1-9][0-9]*"
| |
| data-set-on="on"
| |
| data-set-off="off"
| |
| data-dim="dim"
| |
| data-min="0"
| |
| data-max="100"
| |
| ></div>
| |
| </pre>
| |
|
| |
|
| |
| <div id="Beispiel_homestatus">'''Homestatus'''</div>
| |
|
| |
| Beispiel rechts im Bild:
| |
| <pre>
| |
| <div data-type="homestatus" data-device='dummy1'
| |
| data-get-on='["1","2","3","4"]'
| |
| data-alias='["Home","Night","Away","Holiday"]'
| |
| data-icons='["fa-home","fa-bed","fa-car","fa-suitcase"]'>
| |
| </div>
| |
| </pre>
| |
|
| |
| Beispiel links im Bild:
| |
| <pre>
| |
| <div data-type="homestatus" data-device='dummy1'
| |
| data-get-on='["home","asleep","absent","gone","gotosleep"]'
| |
| data-alias='["Home","Night","Away","Holiday","Retire"]'
| |
| data-icons='["fa-fire","fa-film","fa-plus","fa-car","fa-tint"]'
| |
| data-version='residents'>
| |
| </div>
| |
| </pre>
| |
|
| |
| [[Datei:homestatus_tabletUI.png]]
| |
|
| |
|
| |
| <div id="Beispiel_pagetab">'''Pagetab'''</div>
| |
|
| |
| Example for a tab menu to switch smoothly between multiple pages. Multiple pagetabs in a template file: menu.html
| |
|
| |
| <pre>
| |
| <html>
| |
| <body>
| |
| <header>MENU</header>
| |
| <div class="cell">
| |
| <div data-type="pagetab" data-url="index.html" data-icon="fa-home" class="cell"></div>
| |
| <div data-type="pagetab" data-url="index_2.html" data-icon="fa-sliders" class="cell"></div>
| |
| <div data-type="pagetab" data-url="index_3.html" data-icon="fa-music" class="cell"></div>
| |
| <div data-type="pagetab" data-url="index_4.html" data-icon="fa-hotel" class="cell"></div>
| |
| <div data-type="pagetab" data-url="index_5.html" data-icon="fa-music" class="cell"></div>
| |
| <div data-type="pagetab" data-url="index_6.html" data-icon="fa-database" class="cell"></div>
| |
| <div data-type="pagetab" data-url="index_7.html" data-icon="fa-fax" class="cell"></div>
| |
| </div>
| |
| </body>
| |
| </html>
| |
| </pre>
| |
|
| |
|
| |
| <div id="Beispiel_playstream">'''Playstream'''</div>
| |
|
| |
| 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>
| |
|
| |
|
| |
| <div id="Beispiel_rotor">'''Rotor'''</div>
| |
|
| |
| Example for a rotor widget, which switches between to days of weather forecast
| |
|
| |
| <pre>
| |
| <div data-type="rotor" class="fade">
| |
| <ul>
| |
| <li>
| |
| <div data-type="label" class="darker">Heute</div>
| |
| <div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="big"></div>
| |
| <div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class=""></div>
| |
| <div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="large"></div>
| |
| </li>
| |
| <li>
| |
| <div data-type="label" class="darker">Morgen</div>
| |
| <div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="big"></div>
| |
| <div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class=""></div>
| |
| <div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="large"></div>
| |
| </li>
| |
| </ul>
| |
| </div>
| |
| </pre>
| |
|
| |
|
| |
| <div id="Beispiel_symbol">'''Symbol'''</div>
| |
|
| |
| Example for a tristate icon
| |
|
| |
| <pre>
| |
| <div data-type="symbol" data-device="dummy1"
| |
| data-get-on='["wert1","wert2","wert3"]'
| |
| data-icons='["fa-arrow-up","fa-user","fa-arrow-down"]'
| |
| data-on-colors='["SeaGreen","SlateBlue","IndianRed"]'
| |
| class="cell big">
| |
| </div>
| |
| </pre>
| |
|
| |
|
| |
| Example for a tristate icon with blink and spin animation
| |
|
| |
| <pre>
| |
| <div data-type="symbol" data-device="dummy1"
| |
| data-icons='["fa-exclamation-triangle fa-blink","fa-exclamation-circle","fa-cog fa-spin"]'
| |
| data-on-colors='["Crimson","GoldenRod","SeaGreen"]'
| |
| data-get-on='["Wert1","Wert2","Wert3"]' >
| |
| </div>
| |
| </pre>
| |
|
| |
|
| |
| Example for a battery level control with RegEx
| |
|
| |
| <pre>
| |
| <div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
| |
| data-icons='["oa-measure_battery_100","oa-measure_battery_75","oa-measure_battery_50","oa-measure_battery_25","oa-measure_battery_0"]'
| |
| data-get-on='["3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]'
| |
| data-on-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'>
| |
| </div>
| |
| </pre>
| |
|
| |
|
| |
|
| |
| Example for a battery level control with greater-equal compare and 90° rotated symbols
| |
|
| |
| <pre>
| |
| <div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"
| |
| data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]'
| |
| data-get-on='["0","2","2.4","2.7","3.0"]'
| |
| data-on-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'>
| |
| </div>
| |
| </pre>
| |
|
| |
|
| |
| <div id="Beispiel_thermostat">'''Thermostat'''</div>
| |
|
| |
| Configure as data-device='...' that item which delivers temp and desired-temp as reading.
| |
|
| |
| Default parameters are:
| |
| <pre>
| |
| data-get="desired-temp" data-temp="measured-temp" data-set="desired-temp"
| |
| </pre>
| |
|
| |
| Therefor for HomaMatic HM-CC-RT-DN this is sufficient.
| |
|
| |
| <pre>
| |
| <div data-type="thermostat" data-device='KH_Clima' class="cell"></div>
| |
| </pre>
| |
|
| |
| The long format looks like this:
| |
|
| |
| <pre>
| |
| <div data-type="thermostat"
| |
| data-device="KH_Clima"
| |
| data-valve="ValvePosition"
| |
| data-get="desired-temp"
| |
| data-temp="measured-temp"
| |
| class="cell">
| |
| </div>
| |
| </pre>
| |
|
| |
|
| |
| Example for MAX!:
| |
| <pre>
| |
| <div data-type="thermostat" data-device="HZ_Tuer"
| |
| data-valve="valveposition"
| |
| data-get="desiredTemperature"
| |
| data-temp="temperature"
| |
| data-set="desiredTemperature"
| |
| class="cell">
| |
| </div>
| |
| </pre>
| |
|
| |
| The wigets will show the valve value only in case of a valid data-valve attribute. The default for data-valve ist null. That means, a empty data-valve attribute hides the valve label for the widget.
| |
|
| |
| [[Datei:thermostat.png]]
| |
|
| |
| == Icon-Konfiguration ==
| |
|
| |
| * Eingebaute Icons: Diese haben das ftui-Präfix. Zurzeit sind folgende verfügbar: ftui-window, ftui-door
| |
|
| |
| * Mehr als 500 Icons von "http://fortawesome.github.io/Font-Awesome/icons" verfügbar. Einfach den Icon-Namen angeben (Präfix "fa-" nicht vergessen, Z.B. <code>data-icon="fa-volume-up"</code>
| |
|
| |
| * Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.
| |
| <pre>
| |
| <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
| |
| <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
| |
| </pre>
| |
|
| |
| Diese font icons haben das Präfix 'fs-' bzw. 'oa-'.
| |
|
| |
| Beispiel bei einem Schalter:
| |
| <pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>
| |
|
| |
|
| |
| Und so als großes Symbol:
| |
| <pre>
| |
| <div data-type="symbol" data-device='dummy1'
| |
| data-icon="oa-status_frost"
| |
| data-on-color="#bb3232"
| |
| data-get-on="on"
| |
| data-get-off="!on"
| |
| class="bigger">
| |
| </div>
| |
| </pre>
| |
|
| |
|
| |
| Die Icons kann man auch etwas dicker darstellen mit den Zusatz bold: <code>data-icon="oa-secur_locked bold"</code>
| |
|
| |
|
| |
| Die Namen der verfügbaren Icons findet man auch in den CSS Files (openautomation.css / fhemSVG.css)
| |
|
| |
| == Spezial ==
| |
| Folgender Befehl setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
| |
| <pre>
| |
| <div onclick="ftui.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]
| |
| * [http://forum.fhem.de/index.php/topic,37378.0.html User-Demos]
| |
| * [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]
| |
|
| |
| [[Kategorie:FHEM Tablet UI]]
| |
