|
|
| (91 dazwischenliegende Versionen von 26 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|Spezial ergänzen, Templates erklären, Navigationsmethoden ausformulieren, aufräumen + ausbauen}}
| |
|
| |
| == Installation ==
| |
| Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:
| |
| *Dateien aus dem GitHub-Repository herunterladen
| |
| *FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)
| |
| *Eine Beispieldatei anlegen
| |
|
| |
|
| |
| {{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.
| |
| Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}
| |
|
| |
|
| |
| '''1.''' Zuerst müssen alle Dateien von FHEM Tablet UI in das FHEM-Verzeichnis '''/opt/fhem/www''' kopiert werden. Das geht mit folgendem '''update'''-Befehl über die FHEM-Befehlszeile.
| |
| :<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>
| |
|
| |
| :[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]
| |
|
| |
|
| |
| '''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.
| |
| :<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code>
| |
|
| |
| :[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]
| |
|
| |
|
| |
| '''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.
| |
|
| |
| :<code>attr WEB longpoll websocket</code>
| |
| :bzw. bei Problemen mit ''websocket''
| |
| :<code>attr WEB longpoll 1</code>
| |
|
| |
| :[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]
| |
|
| |
|
| |
| '''4.''' Weil FTUI noch nichts anzuzeigen hat, wird die Datei '''/opt/fhem/www/tablet/index-example.html''' nach '''/opt/fhem/www/tablet/index.html''' kopiert.
| |
| :<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code>
| |
|
| |
| :[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]
| |
|
| |
|
| |
| '''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.
| |
|
| |
|
| |
| Somit ist FHEM Tablet UI bereit zur Verwendung und kann durch Aufruf der URL '''<nowiki>http://<fhem-server>:8083/fhem/ftui</nowiki>''' oder den Link im FHEM-Menü geöffnet werden
| |
|
| |
| == Update ==
| |
| Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.
| |
|
| |
| '''1.''' 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>
| |
|
| |
|
| |
| '''2.''' Update der geänderten Dateien durch Eingabe von:
| |
| :<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
| |
|
| |
|
| |
| Eine weitere Option ist das Hinzufügen des FTUI-Git-Repositories zum allgemeinem Update-Vorgang von FHEM. Dabei wird dann bei einem FHEM-Update auch gleich FHEM Tablet UI aktualisiert, bzw. die Änderungen angezeigt.
| |
| :<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
| |
|
| |
| == Konfiguration ==
| |
| Das Tablet UI lässt sich über die META-Parameter konfigurieren. Diese Parameter sind in jeder '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>''' einzutragen. Ausgenommen davon sind Dateien, die als Template, Pagebutton-Zielseiten oder ähnliches eingebunden werden.
| |
|
| |
| Die Parameter sind immer nach diesem Schema aufgebaut:
| |
| <meta name="[Parameter-Name]" content="[Parameter-Wert]">
| |
|
| |
| ===Verbindung zu FHEM===
| |
| {| class="wikitable"
| |
| |-
| |
| !Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
| |
| |-
| |
| |web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird
| |
| |-
| |
| |longpoll||1||0, 1||
| |
| '''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)
| |
|
| |
| '''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.
| |
| |-
| |
| |longpoll_type||websocket||websocket, ajax, 0||
| |
| '''websocket''': Für die Aktualisierung der Daten wird das Websocket-Protokoll verwendet. Werden vom Browser keine Websockets unterstützt, gibt es einen automatischen Fallback auf Ajax.
| |
|
| |
| '''ajax''': Ajax wird für die Aktualisierung verwendet.
| |
|
| |
| '''0''': Longpoll deaktiviert, Shortpoll wird verwendet.
| |
| |-
| |
| |longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.
| |
| |-
| |
| |longpoll_maxage||240||Integer||Kommen in diesem Zeitraum (Sekunden) keine Longpoll-Events bei FTUI an, wird die Verbindung als "disconnected" angesehen und ein neuer Verbindungsversuch wird gestartet.
| |
| |-
| |
| |shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet
| |
| |-
| |
| |shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein
| |
| |-
| |
| |fhemweb_url||/fhem/||Integer||URL zu FHEM. Wird benötigt wenn FTUI auf einem anderen als dem FHEM Server läuft oder nicht im Standard-Pfad installiert ist.
| |
| |}
| |
|
| |
| ===Funktionalität===
| |
| {| class="wikitable"
| |
| |-
| |
| !Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
| |
| |-
| |
| |debug||0||0 - 5||Log-Level
| |
| |-
| |
| |toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.
| |
| |-
| |
| |lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)
| |
| |-
| |
| |username||||String||Benutzername für eine Basic-Authentifierung *
| |
| |-
| |
| |password||||String||Passwort für eine Basic-Authentifizierung *
| |
| |}
| |
| '''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.
| |
|
| |
| ===Layout===
| |
| {| class="wikitable"
| |
| |-
| |
| !Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
| |
| |-
| |
| |gridster_disable||0||0, 1||Verschieben der Gridster-Elemente deaktivieren.
| |
| |-
| |
| | widget_margin||||Integer||Abstand der Gridsterelemente zueinander
| |
| |-
| |
| | widget_base_width||||Integer||Fixe Breite des Basis-Rasters (data-sizex=1)
| |
| |-
| |
| | widget_base_heigth||||Integer||Fixe Höhe des Basis-Rasters (data-sizey=1).
| |
| |-
| |
| | gridster_cols||||Integer||Fixe Anzahl an Spalten (Spaltengröße wird automatisch an Bildschirmauflösung angepasst)
| |
| |-
| |
| | gridster_rows||||Integer||Fixe Anzahl der Reihen (Reihengröße wird automatisch an Bildschirmauflösung angepasst)
| |
| |}
| |
|
| |
| ==Navigationsmethoden==
| |
| {{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}}
| |
|
| |
| '''Unterschied zwischen Pagetab und Pagebutton:
| |
|
| |
| '''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite
| |
| [[FTUI_Widget_Pagetab]]
| |
|
| |
| '''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite
| |
| [[FTUI_Widget_Pagebutton]]
| |
|
| |
| ==Styling==
| |
| === Farben ===
| |
| Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel:
| |
|
| |
| *HEX: #ADD8E6
| |
| *RBG: rgb(173, 216, 230)
| |
| *Namen: lightblue
| |
|
| |
| Knallige Farben wie '''<span style="color: #ff0000;">#ff0000</span>''' für Rot oder '''<span style="color: #00ff00;">#00ff00</span>''' für Grün sollten vermieden werden.
| |
| Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.
| |
|
| |
| Empfohlene Farben sind z.B.:
| |
|
| |
| *Orange: <span style="color: #aa6900;">#aa6900</span>
| |
| *Rot: <span style="color: #ad3333;">#ad3333</span>
| |
| *Grün: <span style="color: #32a054;">#32a054</span>
| |
| *Blau: <span style="color: #6699FF;">#6699FF</span>
| |
| *Grau: <span style="color: #8C8C8C;">#8C8C8C</span>
| |
|
| |
| Hilfreich bei der Suche nach den Farbwerten ist zum Beispiel der Color-Picker auf dieser Seite: http://www.colorpicker.com. Für die Suche nach Farben, die einen guten Kontrast bilden, diese Webseite: http://vanisoft.pl/~lopuszanski/public/colors/
| |
|
| |
| Im Order ''css'' der FTUI Installation finden sich einige vorbereitete Farbschemas. Diese können mit einem zusätzlichen Eintrag im <nowiki><head></nowiki>-Bereich der FTUI-Seite(n) aktiviert werden.
| |
|
| |
| Hier am Beispiel eines blauen Farbschemas:
| |
| <source lang="html">
| |
| <html>
| |
| <head>
| |
| [...]
| |
| <link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" />
| |
| [...]
| |
| </head>
| |
| </source>
| |
|
| |
| Diese Schema-Dateien ändern alle Widgets. Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.
| |
|
| |
| ===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-Klassen|CSS-Klassen]] aufgeführt.
| |
|
| |
| Soll das Aussehen des UI durch eigene CSS-Klassen oder durch Überschreiben der vorhandenen verändert werden, kann eine eigene CSS-Datei erstellt werden, die dann bei einem eventuellen Update von FTUI nicht überschrieben wird. Diese Datei muss den Dateinamen '''fhem-tablet-ui-user.css''' haben und im Ordner '''/fhem/tablet/css''' abgelegt werden. Sie wird dann beim Aufruf von FTUI automatisch mitgeladen.
| |
|
| |
| === 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}}
| |
| |}
| |
|
| |
| {|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
| |
| !colspan="2" style="text-align: left;"|hbox/vbox-Layout
| |
| |-
| |
| !class="mw-collapsible-content"|Klasse!!Beschreibung
| |
| {{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}}
| |
| |}
| |
|
| |
| {|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
| |
| !colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung
| |
| |-
| |
| !class="mw-collapsible-content"|Klasse!!Beschreibung
| |
| {{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}}
| |
| |}
| |
|
| |
| {|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
| |
| !colspan="2" style="text-align: left;"|Vordergrundfarben
| |
| |-
| |
| !class="mw-collapsible-content"|Klasse!!Beschreibung
| |
| {{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}}
| |
| |}
| |
|
| |
| {|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
| |
| !colspan="2" style="text-align: left;"|Hintergrundfarben
| |
| |-
| |
| !class="mw-collapsible-content"|Klasse!!Beschreibung
| |
| {{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}}
| |
| |}
| |
|
| |
| {|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
| |
| !colspan="2" style="text-align: left;"|Rahmen
| |
| |-
| |
| !class="mw-collapsible-content"|Klasse!!Beschreibung
| |
| {{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}}
| |
| |}
| |
|
| |
| {|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
| |
| !colspan="2" style="text-align: left;"|Größen
| |
| |-
| |
| !class="mw-collapsible-content"|Klasse!!Beschreibung
| |
| {{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}}
| |
| |}
| |
|
| |
| {|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
| |
| !colspan="2" style="text-align: left;"|Schriftstil
| |
| |-
| |
| !class="mw-collapsible-content"|Klasse!!Beschreibung
| |
| {{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}
| |
| |}
| |
|
| |
| {|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
| |
| !colspan="2" style="text-align: left;"|Sonstiges
| |
| |-
| |
| !class="mw-collapsible-content"|Klasse!!Beschreibung
| |
| {{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}}{{FTUI Klasse|fade}}{{FTUI Klasse|rotate}}{{FTUI Klasse|nolabels}}{{FTUI Klasse|default}}{{FTUI Klasse|prefetch}}{{FTUI Klasse|circulate}}{{FTUI Klasse|valueonly}}{{FTUI Klasse|positiononly}}{{FTUI Klasse|lineIndicator}}{{FTUI Klasse|barIndicator}}{{FTUI Klasse|roundIndicator}}{{FTUI Klasse|dim-tick}}{{FTUI Klasse|dim-front}}{{FTUI Klasse|dim-back}}{{FTUI Klasse|hue-tick}}{{FTUI Klasse|hue-front}}{{FTUI Klasse|hue-back}}{{FTUI Klasse|warn}}{{FTUI Klasse|activate}}{{FTUI Klasse|labelright}}{{FTUI Klasse|interlock}}{{FTUI Klasse|keepopen}}{{FTUI Klasse|noshade}}
| |
| |}
| |
|
| |
| == Widgets ==
| |
| ===Allgemeine 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.
| |
|
| |
| === Integrierte Widgets ===
| |
| Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.
| |
|
| |
| * [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an
| |
| * [[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]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an
| |
| * [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots
| |
| * [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen
| |
| * [[FTUI Widget 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]]: Ändert seine CSS-Klassen je nach Status eines Devices
| |
| * [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.
| |
| * [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben
| |
| * [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit
| |
| * [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel
| |
| * [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert
| |
| * [[FTUI Widget Eventmonitor|eventmonitor]]:
| |
| * [[FTUI Widget Filelog|filelog]]:
| |
| * [[FTUI Widget Fullcalview|fullcalview]]:
| |
| * [[FTUI Widget Gds|gds]]:
| |
| * [[FTUI Widget Highchart|highchart]]:
| |
| * [[FTUI Widget Highchart3d|highchart3d]]:
| |
| * [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)
| |
| * [[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/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
| |
| * [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt.
| |
| * [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn
| |
| * [[FTUI Widget Label|label]]: Reading als Text anzeigen
| |
| * [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert
| |
| * [[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]]: Blendet ein Hinweisfenster im Browser ein
| |
| * [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation
| |
| * [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.
| |
| * [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button
| |
| * [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element
| |
| * [[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]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen
| |
| * [[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
| |
| * [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position
| |
| * [[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]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird
| |
| * [[FTUI Widget Slideout|slideout]]:
| |
| * [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen
| |
| * [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern
| |
| * [[FTUI Widget Svgplot|svgplot]]:
| |
| * [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln
| |
| * [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)
| |
| * [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)
| |
| * [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann
| |
| * [[FTUI Widget Tts|tts]]:
| |
| * [[FTUI Widget Uwz|uwz]]:
| |
| * [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes
| |
| * [[FTUI Widget Wakeup|wakeup]]:
| |
| * [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul
| |
| * [[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===
| |
| Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.
| |
| * [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
| |
| * [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/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
| |
| * [[FTUI Widget Screensaver|screensaver]]:
| |
|
| |
| == Icons ==
| |
| FTUI bringt einige Icons-"Schriftarten" mit, die für die Darstellung genützt werden können. Diese werden automatisch beim Start des UI eingebunden, sobald ein entsprechendes Icon-Präfix im Code der Seite vorkommt.
| |
|
| |
| Verfügbare Icon-Schriftarten sind:
| |
| * Eingebaute Icons ''ftui-windows'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code>
| |
| * [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code>
| |
| * [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code>
| |
| * FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code>
| |
| * [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi-'''. Beispiel: <code>data-icon="wi-day-rain-mix"</code>
| |
|
| |
| == 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]] zusammengestellt.
| |
|
| |
| == Links ==
| |
| * [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
| |
| * [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
| |
| * [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]
| |
| * [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]]
| |
