http://wiki.fhem.de/w/api.php?action=feedcontributions&user=Klausw&feedformat=atomFHEMWiki - Benutzerbeiträge [de]2024-03-29T10:02:34ZBenutzerbeiträgeMediaWiki 1.39.3http://wiki.fhem.de/w/index.php?title=FHEM_Tablet_UI&diff=22470FHEM Tablet UI2017-09-02T18:50:36Z<p>Klausw: /* 3rd Party Widgets */</p>
<hr />
<div>{{Infobox Modul<br />
|ModPurpose=Oberfläche für FHEM<br />
|ModType=x<br />
|ModFTopic=34233<br />
|ModForumArea=Frontends<br />
|ModTechName=n.a.<br />
|ModOwner=setstate ({{Link2FU|7023|Forum}})<br />
}}<br />
[[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.<br />
<br />
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.<br />
<br />
Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.<br />
<br />
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.<br />
<br />
[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]<br />
<br />
{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}} <br />
<br />
== Installation ==<br />
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:<br />
*Dateien aus dem GitHub-Repository herunterladen<br />
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)<br />
*Eine Beispieldatei anlegen<br />
<br />
<br />
{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.<br />
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}<br />
<br />
<br />
'''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.<br />
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code><br />
<br />
:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]<br />
<br />
<br />
'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.<br />
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code><br />
<br />
:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]<br />
<br />
<br />
'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.<br />
<br />
:<code>attr WEB longpoll websocket</code><br />
:bzw. bei Problemen mit ''websocket''<br />
:<code>attr WEB longpoll 1</code><br />
<br />
:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]<br />
<br />
<br />
'''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.<br />
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code><br />
<br />
:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]<br />
<br />
<br />
'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.<br />
<br />
<br />
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<br />
<br />
== Update ==<br />
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.<br />
<br />
'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:<br />
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
'''2.''' Update der geänderten Dateien durch Eingabe von:<br />
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
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.<br />
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
== Konfiguration ==<br />
===DOCTYPE===<br />
In allen HTML-Dateien, die im Browser geladen werden und das typische HTML-Gerüst besitzen (also alle Hauptseiten, jedoch keine Template-Dateien), sollte eine DOCTYPE-Deklaration eingefügt werden. Mit ihr wird festgelegt, in welcher Version der nachfolgende HTML-Code vom Browser interpretiert werden soll. Lässt man sie weg, oder definiert sie auf verschiedenen Seiten unterschiedlich, kann ein und der selbe HTML-Code zu unterschiedlichen Darstellungen führen. Die DOCTYPE-Deklaration erfolgt immer auch der ersten Zeile, noch vor dem <code><html></code>-Tag. Nachfolgend wird HTML5 verwendet.<br />
<br />
<syntaxhighlight lang="html"><br />
<!DOCTYPE html><br />
<html><br />
<head>...</head><br />
<body>...</body><br />
</html><br />
</syntaxhighlight><br />
<br />
===META-Parameter===<br />
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.<br />
<br />
Die Parameter sind immer nach diesem Schema aufgebaut:<br />
<meta name="[Parameter-Name]" content="[Parameter-Wert]"><br />
<br />
===Verbindung zu FHEM===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird<br />
|-<br />
|longpoll||1||0, 1||<br />
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)<br />
<br />
'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.<br />
|-<br />
|longpoll_type||websocket||websocket, ajax, 0||<br />
'''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.<br />
<br />
'''ajax''': Ajax wird für die Aktualisierung verwendet.<br />
<br />
'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.<br />
|-<br />
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.<br />
|-<br />
|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.<br />
|-<br />
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet<br />
|-<br />
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein<br />
|-<br />
|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. <br />
Hinweis: Wenn FHEM auf einem anderem Server/Domain läuft muss man das "CORS" Attribut im FHEMWEB Modul (s.o.) auf 1 setzen, sonst bekommt man Cross Origin Fehler. <br />
|}<br />
<br />
===Funktionalität===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|debug||0||0 - 5||Log-Level<br />
|-<br />
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.<br />
|-<br />
|toast_position||bottom-left||||Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.<br />
|-<br />
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)<br />
|-<br />
|username||||String||Benutzername für eine Basic-Authentifierung *<br />
|-<br />
|password||||String||Passwort für eine Basic-Authentifizierung *<br />
|}<br />
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.<br />
<br />
===Toast-Nachrichten===<br />
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]<br />
Tablet-UI liefert Informationen darüber, was im Moment gerade passiert. Das geschieht über Toast-Nachrichten, die in der Standardeinstellung unten links im Browser auftauchen.<br />
<br />
Wird beispielsweise ein Gerät eingeschaltet, so erscheint eine kleine Nachricht mit dem abgesetzten Befehl. Auch Fehlermeldungen und Statusinformationen werden angezeigt. Ob überhaupt und was konkret angezeigt wird, richtet sich nach dem eingestellten Debug-Level (siehe oben). Beim Debug-Level 5 werden alle Nachrichten angezeigt, bei 0 keine.<br />
<br />
Die Position der Toast-Nachrichten kann über den Meta-Tag <code>meta name='toast_position'</code> festgelegt werden. Für oben-mittig müsste folgender Code eingefügt werden:<br />
<pre><meta name='toast_position' content='top-center'></pre><br />
<br />
Möglich sind folgende Positionen:<br />
* <code>top-left</code><br />
* <code>top-right</code><br />
* <code>bottom-left</code><br />
* <code>bottom-right</code><br />
* <code>top-center</code><br />
* <code>bottom-center</code><br />
* <code>mid-center</code><br />
<br />
Die maximale Anzahl an Nachrichten, die gleichzeitig angezeigt werden können, lässt sich mit <code>meta name='toast'</code> Sind maximal 2 Nachrichten gewünscht, muss folgender Meta-Tag gesetzt werden:<br />
<pre><meta name='toast' content='2'></pre><br />
<br />
==Navigationsmethoden==<br />
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}} <br />
<br />
'''Unterschied zwischen Pagetab und Pagebutton:<br />
<br />
'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite<br />
[[FTUI_Widget_Pagetab]]<br />
<br />
'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite<br />
[[FTUI_Widget_Pagebutton]]<br />
<br />
==Gestaltung==<br />
===Layout-Optionen===<br />
* [[FTUI Layout Gridster|Gridster]]<br />
* [[FTUI Layout Flex|Flex]]<br />
* [[FTUI Layout Sheet|Tabelle]]<br />
* [[FTUI Layout Row|Reihen]]<br />
<br />
=== Farben ===<br />
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel: <br />
<br />
*HEX: #ADD8E6<br />
*RBG: rgb(173, 216, 230)<br />
*Namen: lightblue<br />
<br />
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.<br />
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.<br />
<br />
Empfohlene Farben sind z.B.:<br />
<br />
*Orange: <span style="color: #aa6900;">#aa6900</span><br />
*Rot: <span style="color: #ad3333;">#ad3333</span><br />
*Grün: <span style="color: #32a054;">#32a054</span><br />
*Blau: <span style="color: #6699FF;">#6699FF</span><br />
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span><br />
<br />
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/<br />
<br />
Im Ordner ''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.<br />
<br />
Hier am Beispiel eines blauen Farbschemas:<br />
<syntaxhighlight lang="html"><br />
<html><br />
<head><br />
[...]<br />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" /><br />
[...]<br />
</head><br />
</syntaxhighlight><br />
<br />
Diese Schema-Dateien ändern alle Widgets. Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.<br />
<br />
===CSS-Styles===<br />
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.<br />
<br />
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.<br />
<br />
=== CSS-Klassen ===<br />
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|row/col-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|hbox/vbox-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Vordergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Hintergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Rahmen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Größen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Schriftstil<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Sonstiges<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
=== Icons ===<br />
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.<br />
<br />
Verfügbare Icon-Schriftarten sind:<br />
* Eingebaute Icons ''ftui-windows'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code><br />
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code><br />
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code><br />
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code><br />
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi-'''. Beispiel: <code>data-icon="wi-day-rain-mix"</code><br />
<br />
Alternativ können auch Bilder Icons (bspw. png) über CSS verwendet werden. Bspw:<br />
<syntaxhighlight lang="html5"><br />
<head><br />
<style type="text/css"><br />
.logo-fhem {<br />
background: url(https://wiki.fhem.de/fhemlogo.png) no-repeat;<br />
width: 120px;<br />
height: 132px;<br />
background-size: contain;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div data-type="symbol" data-icon="logo-fhem"></div><br />
</body><br />
</syntaxhighlight><br />
<br />
== Widgets ==<br />
===Allgemeine Attribute===<br />
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:<br />
<br />
{| class="wikitable"<br />
|+allgemeine Attribute<br />
|-<br />
!align="right" |data-type<br />
|Widget-Typ<br />
|-<br />
!align="right" |data-device<br />
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)<br />
|-<br />
!align="right" |class<br />
|CSS-Klassen für Aussehen und Formatierung des Widgets<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Empfangen<br />
|-<br />
!align="right" |data-get<br />
|Reading Name<br />
|-<br />
!align="right" |data-get-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-get-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Senden<br />
|-<br />
!align="right" |data-set<br />
|Reading Name<br />
|-<br />
!align="right" |data-set-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-set-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
=== Integrierte Widgets ===<br />
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.<br />
<br />
* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.<br />
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen<br />
* [[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 <br />
* [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.<br />
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben<br />
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit<br />
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel<br />
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert<br />
* [[FTUI Widget Eventmonitor|eventmonitor]]:<br />
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)<br />
* [[FTUI Widget Html|html]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe. <br />
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.<br />
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld<br />
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt. <br />
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn<br />
* [[FTUI Widget Label|label]]: Reading als Text anzeigen<br />
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert<br />
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM<br />
* [[FTUI Widget Medialist|medialist]]:<br />
* [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.<br />
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein<br />
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation<br />
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.<br />
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button<br />
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element <br />
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste<br />
* [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.<br />
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen<br />
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde<br />
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position<br />
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit.<br />
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird<br />
* [[FTUI Widget Slideout|slideout]]:<br />
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen<br />
* [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern<br />
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln<br />
* [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)<br />
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)<br />
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann<br />
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes<br />
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen<br />
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose<br />
<br />
===3rd Party Widgets===<br />
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.<br />
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an<br />
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an<br />
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots<br />
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices<br />
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.<br />
* [[FTUI Widget Filelog|filelog]]:<br />
* [[FTUI Widget Fullcalview|fullcalview]]:<br />
* [[FTUI Widget Gds|gds]]:<br />
* [[FTUI Widget Highchart|highchart]]:<br />
* [[FTUI Widget Highchart3d|highchart3d]]:<br />
* [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. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.<br />
* [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.<br />
* [[FTUI Widget Loading|loading]]:<br />
* [[FTUI Widget Meteogram|meteogram]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads<br />
* [[FTUI Widget Screensaver|screensaver]]:<br />
* [[FTUI Widget Svgplot|svgplot]]:<br />
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.<br />
* [[FTUI Widget UWZ|uwz]]: Anzeige der Warnungen der Unwetterzentrale<br />
* [[FTUI Widget Wakeup|wakeup]]:<br />
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul<br />
* [[FTUI Widget Weekprofile|weekprofile]]: Visualisierung des [[weekprofile]] Moduls<br />
<br />
==Templates==<br />
Kommt ein bestimmtes "Code-Fragment" auf mehreren Seiten oder öfter pro Seite vor, bietet FTUI die Option, Templates zu erstellen. Diese werden einmal gebaut und können dann mit dem Attribut '''data-template''' nach Belieben in eine Seite eingefügt werden. Dabei besteht auch die Möglichkeit, Parameter zu verwenden.<br />
<br />
Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.<br />
<br />
===Einzelnes Widget===<br />
Soll ein Widget an mehreren Stellen in exakt der selben Ausführung eingebunden werden, kann diese Widget in einer eigenen Datei erstellt und diese dann auf den Zielseiten automatisch mitgeladen werden.<br />
<br />
;Template-Seite<br />
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="symbol"<br />
data-device="dummy1"><br />
</syntaxhighlight><br />
<br />
;Haupt-Seite<br />
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.<br />
<syntaxhighlight lang="html" highlight="6"><br />
[...]<br />
<body><br />
<div class="gridster"><br />
<ul><br />
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1"><br />
<div data-template="template_symbol.html"></div><br />
</li><br />
</ul><br />
</div><br />
</body><br />
[...]<br />
</syntaxhighlight><br />
<br />
===Gridster-Element===<br />
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.<br />
<syntaxhighlight lang="html"><br />
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li><br />
</syntaxhighlight><br />
<br />
=== Widget-Gruppen ===<br />
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.<br />
<br />
=== Verwendung von Parametern ===<br />
==== Einfaches Beispiel ====<br />
Oft wird ein und dasselbe, liebevoll gestaltete, Widget für verschiedenen Devices verwendet. Um nicht für jedes Device das Widget neu kopieren zu müssen (bzw. bei Änderungen alle Seiten ausbessern zu müssen), kann ein Template verwendet werden, dem einfach per Parameter mitgeteilt wird, von welchem Device es gerade die Daten empfangen soll.<br />
<br />
In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.<br />
<br />
;Template-Seite<br />
Die Template-Seite enthält nur ein einfaches Label-Widget und wird in diesem Beispiel ''template_label.html'' genannt. Um sie für mehrere Devices verwenden zu können, wird im Attribut '''data-device''' der Name des eigentlichen Devices durch den Parameter '''par01''' ersetzt.<br />
<syntaxhighlight lang="html" highlight="2"><br />
<div data-type="label"<br />
data-device="par01"<br />
data-get="measured-temp"></div><br />
</syntaxhighlight><br />
<br />
;Haupt-Seite<br />
Auf der Haupt-Seite wird die Template-Seite mit dem Attribut '''data-template''' eingebunden und ihr via Attribut '''data-parameter''' das jeweils gewünschte Device übergeben.<br />
<syntaxhighlight lang="html"><br />
[...]<br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div><br />
[...]<br />
</syntaxhighlight><br />
<br />
==== Wetter-Slider mit Template ====<br />
In diesem Beispiel wird ein [[FTUI Widget Slider|Slider-Widget]] erstellt, welches die verschiedenen Tage eines Wetterberichtes anzeigt. Dabei wird für den Wetterbericht des jeweiligen Tages immer dasselbe Template verwendet um nicht für jeden Tag ein eigenes Widget schreiben zu müssen.<br />
<br />
;Template-Seite<br />
<syntaxhighlight lang="html"><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="&deg;C"></div><br />
<div class="inline"><br />
<div data-type="label" data-device="AgroWeather" data-get="par02"></div><br />
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div><br />
min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="&deg;C"></div><br />
</div><br />
</div><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div><br />
</div><br />
</syntaxhighlight><br />
<br />
;Haupt-Seite<br />
In der Haupt-Seite wird das Template dann für jede Slider-Seite eingebunden und das Reading für den jeweiligen Tag via Parameter übergeben.<br />
<syntaxhighlight lang="html"><br />
[...]<br />
<div data-type="swiper"><br />
<ul><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li><br />
</ul><br />
</div><br />
[...]<br />
</syntaxhighlight><br />
<br />
== JavaScript-Funktionen ==<br />
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.<br />
<br />
<br />
Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):<br />
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></syntaxhighlight><br />
<br />
<br />
Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):<br />
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown(&quot;WZ.Thermostat_Climate&quot;,&quot;up&quot;)}')">+</div></syntaxhighlight><br />
<br />
<br />
Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" data-device="dummy1" data-get="temperature"></div><br />
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div><br />
</syntaxhighlight><br />
<br />
== FAQ ==<br />
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.<br />
<br />
== Links ==<br />
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]<br />
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}<br />
* [[FTUI_Snippets|Snippets]]<br />
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]<br />
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}<br />
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Klauswhttp://wiki.fhem.de/w/index.php?title=FHEM_Tablet_UI&diff=22469FHEM Tablet UI2017-09-02T18:49:52Z<p>Klausw: /* 3rd Party Widgets */</p>
<hr />
<div>{{Infobox Modul<br />
|ModPurpose=Oberfläche für FHEM<br />
|ModType=x<br />
|ModFTopic=34233<br />
|ModForumArea=Frontends<br />
|ModTechName=n.a.<br />
|ModOwner=setstate ({{Link2FU|7023|Forum}})<br />
}}<br />
[[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.<br />
<br />
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.<br />
<br />
Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.<br />
<br />
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.<br />
<br />
[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]<br />
<br />
{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}} <br />
<br />
== Installation ==<br />
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:<br />
*Dateien aus dem GitHub-Repository herunterladen<br />
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)<br />
*Eine Beispieldatei anlegen<br />
<br />
<br />
{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.<br />
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}<br />
<br />
<br />
'''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.<br />
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code><br />
<br />
:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]<br />
<br />
<br />
'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.<br />
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code><br />
<br />
:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]<br />
<br />
<br />
'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.<br />
<br />
:<code>attr WEB longpoll websocket</code><br />
:bzw. bei Problemen mit ''websocket''<br />
:<code>attr WEB longpoll 1</code><br />
<br />
:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]<br />
<br />
<br />
'''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.<br />
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code><br />
<br />
:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]<br />
<br />
<br />
'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.<br />
<br />
<br />
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<br />
<br />
== Update ==<br />
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.<br />
<br />
'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:<br />
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
'''2.''' Update der geänderten Dateien durch Eingabe von:<br />
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
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.<br />
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
== Konfiguration ==<br />
===DOCTYPE===<br />
In allen HTML-Dateien, die im Browser geladen werden und das typische HTML-Gerüst besitzen (also alle Hauptseiten, jedoch keine Template-Dateien), sollte eine DOCTYPE-Deklaration eingefügt werden. Mit ihr wird festgelegt, in welcher Version der nachfolgende HTML-Code vom Browser interpretiert werden soll. Lässt man sie weg, oder definiert sie auf verschiedenen Seiten unterschiedlich, kann ein und der selbe HTML-Code zu unterschiedlichen Darstellungen führen. Die DOCTYPE-Deklaration erfolgt immer auch der ersten Zeile, noch vor dem <code><html></code>-Tag. Nachfolgend wird HTML5 verwendet.<br />
<br />
<syntaxhighlight lang="html"><br />
<!DOCTYPE html><br />
<html><br />
<head>...</head><br />
<body>...</body><br />
</html><br />
</syntaxhighlight><br />
<br />
===META-Parameter===<br />
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.<br />
<br />
Die Parameter sind immer nach diesem Schema aufgebaut:<br />
<meta name="[Parameter-Name]" content="[Parameter-Wert]"><br />
<br />
===Verbindung zu FHEM===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird<br />
|-<br />
|longpoll||1||0, 1||<br />
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)<br />
<br />
'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.<br />
|-<br />
|longpoll_type||websocket||websocket, ajax, 0||<br />
'''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.<br />
<br />
'''ajax''': Ajax wird für die Aktualisierung verwendet.<br />
<br />
'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.<br />
|-<br />
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.<br />
|-<br />
|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.<br />
|-<br />
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet<br />
|-<br />
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein<br />
|-<br />
|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. <br />
Hinweis: Wenn FHEM auf einem anderem Server/Domain läuft muss man das "CORS" Attribut im FHEMWEB Modul (s.o.) auf 1 setzen, sonst bekommt man Cross Origin Fehler. <br />
|}<br />
<br />
===Funktionalität===<br />
{| class="wikitable"<br />
|-<br />
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung<br />
|-<br />
|debug||0||0 - 5||Log-Level<br />
|-<br />
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.<br />
|-<br />
|toast_position||bottom-left||||Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.<br />
|-<br />
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)<br />
|-<br />
|username||||String||Benutzername für eine Basic-Authentifierung *<br />
|-<br />
|password||||String||Passwort für eine Basic-Authentifizierung *<br />
|}<br />
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.<br />
<br />
===Toast-Nachrichten===<br />
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]<br />
Tablet-UI liefert Informationen darüber, was im Moment gerade passiert. Das geschieht über Toast-Nachrichten, die in der Standardeinstellung unten links im Browser auftauchen.<br />
<br />
Wird beispielsweise ein Gerät eingeschaltet, so erscheint eine kleine Nachricht mit dem abgesetzten Befehl. Auch Fehlermeldungen und Statusinformationen werden angezeigt. Ob überhaupt und was konkret angezeigt wird, richtet sich nach dem eingestellten Debug-Level (siehe oben). Beim Debug-Level 5 werden alle Nachrichten angezeigt, bei 0 keine.<br />
<br />
Die Position der Toast-Nachrichten kann über den Meta-Tag <code>meta name='toast_position'</code> festgelegt werden. Für oben-mittig müsste folgender Code eingefügt werden:<br />
<pre><meta name='toast_position' content='top-center'></pre><br />
<br />
Möglich sind folgende Positionen:<br />
* <code>top-left</code><br />
* <code>top-right</code><br />
* <code>bottom-left</code><br />
* <code>bottom-right</code><br />
* <code>top-center</code><br />
* <code>bottom-center</code><br />
* <code>mid-center</code><br />
<br />
Die maximale Anzahl an Nachrichten, die gleichzeitig angezeigt werden können, lässt sich mit <code>meta name='toast'</code> Sind maximal 2 Nachrichten gewünscht, muss folgender Meta-Tag gesetzt werden:<br />
<pre><meta name='toast' content='2'></pre><br />
<br />
==Navigationsmethoden==<br />
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}} <br />
<br />
'''Unterschied zwischen Pagetab und Pagebutton:<br />
<br />
'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite<br />
[[FTUI_Widget_Pagetab]]<br />
<br />
'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite<br />
[[FTUI_Widget_Pagebutton]]<br />
<br />
==Gestaltung==<br />
===Layout-Optionen===<br />
* [[FTUI Layout Gridster|Gridster]]<br />
* [[FTUI Layout Flex|Flex]]<br />
* [[FTUI Layout Sheet|Tabelle]]<br />
* [[FTUI Layout Row|Reihen]]<br />
<br />
=== Farben ===<br />
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel: <br />
<br />
*HEX: #ADD8E6<br />
*RBG: rgb(173, 216, 230)<br />
*Namen: lightblue<br />
<br />
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.<br />
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.<br />
<br />
Empfohlene Farben sind z.B.:<br />
<br />
*Orange: <span style="color: #aa6900;">#aa6900</span><br />
*Rot: <span style="color: #ad3333;">#ad3333</span><br />
*Grün: <span style="color: #32a054;">#32a054</span><br />
*Blau: <span style="color: #6699FF;">#6699FF</span><br />
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span><br />
<br />
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/<br />
<br />
Im Ordner ''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.<br />
<br />
Hier am Beispiel eines blauen Farbschemas:<br />
<syntaxhighlight lang="html"><br />
<html><br />
<head><br />
[...]<br />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" /><br />
[...]<br />
</head><br />
</syntaxhighlight><br />
<br />
Diese Schema-Dateien ändern alle Widgets. Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.<br />
<br />
===CSS-Styles===<br />
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.<br />
<br />
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.<br />
<br />
=== CSS-Klassen ===<br />
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|row/col-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|hbox/vbox-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Vordergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Hintergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Rahmen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Größen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Schriftstil<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Sonstiges<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
=== Icons ===<br />
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.<br />
<br />
Verfügbare Icon-Schriftarten sind:<br />
* Eingebaute Icons ''ftui-windows'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code><br />
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code><br />
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code><br />
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code><br />
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi-'''. Beispiel: <code>data-icon="wi-day-rain-mix"</code><br />
<br />
Alternativ können auch Bilder Icons (bspw. png) über CSS verwendet werden. Bspw:<br />
<syntaxhighlight lang="html5"><br />
<head><br />
<style type="text/css"><br />
.logo-fhem {<br />
background: url(https://wiki.fhem.de/fhemlogo.png) no-repeat;<br />
width: 120px;<br />
height: 132px;<br />
background-size: contain;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div data-type="symbol" data-icon="logo-fhem"></div><br />
</body><br />
</syntaxhighlight><br />
<br />
== Widgets ==<br />
===Allgemeine Attribute===<br />
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:<br />
<br />
{| class="wikitable"<br />
|+allgemeine Attribute<br />
|-<br />
!align="right" |data-type<br />
|Widget-Typ<br />
|-<br />
!align="right" |data-device<br />
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)<br />
|-<br />
!align="right" |class<br />
|CSS-Klassen für Aussehen und Formatierung des Widgets<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Empfangen<br />
|-<br />
!align="right" |data-get<br />
|Reading Name<br />
|-<br />
!align="right" |data-get-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-get-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Senden<br />
|-<br />
!align="right" |data-set<br />
|Reading Name<br />
|-<br />
!align="right" |data-set-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-set-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
=== Integrierte Widgets ===<br />
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.<br />
<br />
* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.<br />
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen<br />
* [[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 <br />
* [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.<br />
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben<br />
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit<br />
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel<br />
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert<br />
* [[FTUI Widget Eventmonitor|eventmonitor]]:<br />
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)<br />
* [[FTUI Widget Html|html]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe. <br />
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.<br />
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld<br />
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt. <br />
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn<br />
* [[FTUI Widget Label|label]]: Reading als Text anzeigen<br />
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert<br />
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM<br />
* [[FTUI Widget Medialist|medialist]]:<br />
* [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.<br />
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein<br />
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation<br />
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.<br />
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button<br />
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element <br />
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste<br />
* [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.<br />
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen<br />
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde<br />
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position<br />
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit.<br />
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird<br />
* [[FTUI Widget Slideout|slideout]]:<br />
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen<br />
* [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern<br />
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln<br />
* [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)<br />
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)<br />
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann<br />
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes<br />
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen<br />
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose<br />
<br />
===3rd Party Widgets===<br />
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.<br />
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an<br />
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an<br />
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots<br />
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices<br />
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.<br />
* [[FTUI Widget Filelog|filelog]]:<br />
* [[FTUI Widget Fullcalview|fullcalview]]:<br />
* [[FTUI Widget Gds|gds]]:<br />
* [[FTUI Widget Highchart|highchart]]:<br />
* [[FTUI Widget Highchart3d|highchart3d]]:<br />
* [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. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.<br />
* [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.<br />
* [[FTUI Widget Loading|loading]]:<br />
* [[FTUI Widget Meteogram|meteogram]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads<br />
* [[FTUI Widget Screensaver|screensaver]]:<br />
* [[FTUI Widget Svgplot|svgplot]]:<br />
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.<br />
* [[FTUI Widget UWZ|uwz]]: Anzeige der Warnungen der Unwetterzentrale<br />
* [[FTUI Widget Wakeup|wakeup]]:<br />
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul<br />
* [[FTUI Widget Weekprofile|weekprofile]]: Visualisierung des [[weekprofile]] Modul<br />
<br />
==Templates==<br />
Kommt ein bestimmtes "Code-Fragment" auf mehreren Seiten oder öfter pro Seite vor, bietet FTUI die Option, Templates zu erstellen. Diese werden einmal gebaut und können dann mit dem Attribut '''data-template''' nach Belieben in eine Seite eingefügt werden. Dabei besteht auch die Möglichkeit, Parameter zu verwenden.<br />
<br />
Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.<br />
<br />
===Einzelnes Widget===<br />
Soll ein Widget an mehreren Stellen in exakt der selben Ausführung eingebunden werden, kann diese Widget in einer eigenen Datei erstellt und diese dann auf den Zielseiten automatisch mitgeladen werden.<br />
<br />
;Template-Seite<br />
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.<br />
<syntaxhighlight lang="html"><br />
<div data-type="symbol"<br />
data-device="dummy1"><br />
</syntaxhighlight><br />
<br />
;Haupt-Seite<br />
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.<br />
<syntaxhighlight lang="html" highlight="6"><br />
[...]<br />
<body><br />
<div class="gridster"><br />
<ul><br />
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1"><br />
<div data-template="template_symbol.html"></div><br />
</li><br />
</ul><br />
</div><br />
</body><br />
[...]<br />
</syntaxhighlight><br />
<br />
===Gridster-Element===<br />
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.<br />
<syntaxhighlight lang="html"><br />
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li><br />
</syntaxhighlight><br />
<br />
=== Widget-Gruppen ===<br />
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.<br />
<br />
=== Verwendung von Parametern ===<br />
==== Einfaches Beispiel ====<br />
Oft wird ein und dasselbe, liebevoll gestaltete, Widget für verschiedenen Devices verwendet. Um nicht für jedes Device das Widget neu kopieren zu müssen (bzw. bei Änderungen alle Seiten ausbessern zu müssen), kann ein Template verwendet werden, dem einfach per Parameter mitgeteilt wird, von welchem Device es gerade die Daten empfangen soll.<br />
<br />
In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.<br />
<br />
;Template-Seite<br />
Die Template-Seite enthält nur ein einfaches Label-Widget und wird in diesem Beispiel ''template_label.html'' genannt. Um sie für mehrere Devices verwenden zu können, wird im Attribut '''data-device''' der Name des eigentlichen Devices durch den Parameter '''par01''' ersetzt.<br />
<syntaxhighlight lang="html" highlight="2"><br />
<div data-type="label"<br />
data-device="par01"<br />
data-get="measured-temp"></div><br />
</syntaxhighlight><br />
<br />
;Haupt-Seite<br />
Auf der Haupt-Seite wird die Template-Seite mit dem Attribut '''data-template''' eingebunden und ihr via Attribut '''data-parameter''' das jeweils gewünschte Device übergeben.<br />
<syntaxhighlight lang="html"><br />
[...]<br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div><br />
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div><br />
[...]<br />
</syntaxhighlight><br />
<br />
==== Wetter-Slider mit Template ====<br />
In diesem Beispiel wird ein [[FTUI Widget Slider|Slider-Widget]] erstellt, welches die verschiedenen Tage eines Wetterberichtes anzeigt. Dabei wird für den Wetterbericht des jeweiligen Tages immer dasselbe Template verwendet um nicht für jeden Tag ein eigenes Widget schreiben zu müssen.<br />
<br />
;Template-Seite<br />
<syntaxhighlight lang="html"><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="&deg;C"></div><br />
<div class="inline"><br />
<div data-type="label" data-device="AgroWeather" data-get="par02"></div><br />
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div><br />
min:&nbsp;<div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="&deg;C"></div><br />
</div><br />
</div><br />
<div class="left"><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div><br />
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div><br />
</div><br />
</syntaxhighlight><br />
<br />
;Haupt-Seite<br />
In der Haupt-Seite wird das Template dann für jede Slider-Seite eingebunden und das Reading für den jeweiligen Tag via Parameter übergeben.<br />
<syntaxhighlight lang="html"><br />
[...]<br />
<div data-type="swiper"><br />
<ul><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li><br />
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li><br />
</ul><br />
</div><br />
[...]<br />
</syntaxhighlight><br />
<br />
== JavaScript-Funktionen ==<br />
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.<br />
<br />
<br />
Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):<br />
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></syntaxhighlight><br />
<br />
<br />
Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):<br />
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown(&quot;WZ.Thermostat_Climate&quot;,&quot;up&quot;)}')">+</div></syntaxhighlight><br />
<br />
<br />
Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:<br />
<syntaxhighlight lang="html"><br />
<div data-type="label" data-device="dummy1" data-get="temperature"></div><br />
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div><br />
</syntaxhighlight><br />
<br />
== FAQ ==<br />
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.<br />
<br />
== Links ==<br />
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]<br />
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}<br />
* [[FTUI_Snippets|Snippets]]<br />
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]<br />
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}<br />
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Klauswhttp://wiki.fhem.de/w/index.php?title=FTUI_Widget_Weekprofile&diff=22468FTUI Widget Weekprofile2017-09-02T18:48:14Z<p>Klausw: Die Seite wurde neu angelegt: „Das weekprofile ist ein Widget für FHEM Tablet UI, welches ein oder mehrere weekprofile-Device steuern kann. ==Attribute== {|class="…“</p>
<hr />
<div>Das [[{{PAGENAME}}|weekprofile]] ist ein Widget für [[FHEM Tablet UI]], welches ein oder mehrere [[weekprofile]]-Device steuern kann.<br />
<br />
==Attribute==<br />
{|class="wikitable"<br />
!Attribut<br />
!Beschreibung<br />
!Standard-Wert<br />
!Beispiel<br />
|-<br />
|'''data-profile'''||Name des Profils das verwendet werden soll||default||data-profile="Bad"<br />
|-<br />
|'''data-todevice'''||Kommasaparierte Liste von Devices deren Profildaten beim Speichern mit aktualisiert werden sollen||keine||data-todevice='["Bad_Clima","Flur_Clima"]'<br />
|-<br />
|'''data-width'''||Breite des Dialogs||400||data-width="500"<br />
|-<br />
|'''data-height'''||Hoehe des Dialogs||auto||data-height="500"<br />
|-<br />
|'''data-title'''||Titel des Dialogs||data-device||data-title="Wohnzimmer"<br />
|-<br />
|'''data-icon'''||Dialog Titel Icon||fa-clock-o||data-icon="fa-clock-o"<br />
|-<br />
|'''data-theme'''||Angabe des Themes, mögich ist 'dark', 'light', oder beliebige eigene CSS-Klasse für individuelle Themes||light||data-theme="dark"<br />
|-<br />
|'''data-style'''||Angabe 'round' oder 'square'||square||data-style="round"<br />
|-<br />
|'''data-timesteps'''||Schrittweite (Minuten) in der Zeiteinstellung||15||data-timesteps="5"<br />
|-<br />
|'''data-trigger'''||Name des Readings das eine Aktualisierung antriggert. 'false' deaktiviert die update Funktion||profile_count||data-trigger="false"<br />
|}<br />
<br />
<br />
==Beispiel==<br />
<syntaxhighlight lang="html"><br />
<div id="weekprofile_ftui"<br />
data-type="weekprofile"<br />
data-device="Wochenprofile"<br />
data-profile="Bad" <br />
data-todevice="Bad_Clima" <br />
data-title="Heizung Bad"<br />
data-style="round" <br />
data-theme="green" <br />
data-height="400" <br />
data-width="auto"><br />
<div data-type="button" <br />
class="readonly"<br />
data-icon="fa-calendar" <br />
data-background-icon="fa-circle" <br />
data-on-background-color="green"<br />
><br />
</div><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Klauswhttp://wiki.fhem.de/w/index.php?title=G-Homa&diff=22467G-Homa2017-09-02T17:43:03Z<p>Klausw: /* Network Parameters settings */</p>
<hr />
<div>{{Infobox Modul<br />
|Name=GHoma<br />
|ModPurpose=Anbindung der WIFI Steckdose G-Homa<br />
|ModCmdRef=GHoma<br />
|ModType=d<br />
|ModForumArea=Sonstige Systeme<br />
|ModTechName=53_GHoma.pm<br />
|ModOwner=klausw<br />
}}<br />
<br />
Die G-Homa oder GHoma Steckdose ist eine per WLAN schaltbare Steckdose. Diese Steckdose wird in vielen Baumärkten und im Internet vertrieben. Das Modul unterstützt die "set extensions".<br><br />
Es gibt sowohl eine Indoor, als auch eine Outdoor Variante.<br />
<br />
==Vorbereitung der Steckdose==<br />
Standardmäßig verbindet sich die Dose zu einem Server in der Cloud. Damit sie mit FHEM funktoiniert, muss diese Konfiguration angepasst werden.<br />
===WLAN konfigurieren===<br />
* Gerät in den AP Modus bringen (Knopf für mehr als 3s drücken, diesen Schritt wiederholen bis die LED permanent leuchtet)<br />
* Nun einen Computer mit der SSID <code>G-Homa</code> verbinden.<br />
* Im Browser zu http://10.10.100.254 (username:passwort = admin:admin)<br />
* In STA Setting WLAN Einstellungen eintragen<br />
<br />
'''Hinweis:''' Ab einer Firmware >1.0.06 wird in diesen Geräten die Konfiguration über HTTP nicht mehr unterstützt. In diesem Fall muss die Konfiguration über die G-Homa App erfolgen.<br />
<br />
===Network Parameters settings===<br />
Other Setting -> Protocol auf TCP-Server (bei 1.0.06 kann es notwendig sein auf TCP-Client umzustellen)<br><br />
Other Setting -> Port ID (wird später für FHEM benötigt)<br><br />
Other Setting -> Server Address (IP Adresse des FHEM Servers)<br><br />
<br />
'''Hinweis:''' Für alle Firmware Versionen kann die Gerätekonfiguration alles Dosen auf einmal über ConfigAll im Server Device gesetzt werden.<br />
<br />
===Optional===<br />
Im Router alle ausgehenden Verbindungen für G-Homa blockieren.<br />
<br />
===Allgemeines===<br />
Die Dose erfordert eine dauerhafte Verbindung zum Server (fhem). Wenn die Verbindung wegen Timeouts, WLAN Ausfall, ... abbricht, beginnt die LED an der Steckdose zu blinken und Schaltvorgänge werden unterbunden. Erst wenn die Verbindung wieder steht, reagiert die Dose wieder wie gewohnt. Ist die Verbindung per WLAN zu schwach, kann das zu dauerhaften Reconnects führen.<br />
<br />
==Define==<br />
<br />
:<code>define <name> GHoma <port></code><br />
Legt ein GHoma Server device an.<br><br />
Neue Zwischenstecker werden beim ersten verbinden automatisch angelegt.<br><br />
Diese können aber auch manuell angelegt werden:<br />
:<code>define <name> GHoma <Id></code><br />
Die Id besteht aus den letzten 6 Stellen der MAC Adresse des Zwischensteckers.<br><br />
Beispiel: MAC= AC:CF:23:A5:E2:3B -> Id= A5E23B<br />
<br />
==Set==<br />
<br />
:<code>set <name> <value></code><br />
Gültige Werte für value:<br />
:off<br />
:on<br />
Die [http://fhem.de/commandref#setExtensions set extensions] werden auch unterstützt.<br />
<br />
==Attribute==<br />
<br />
Für Zwischenstecker devices:<br />
:restoreOnStartup<br />
Wiederherstellen der Portzustände nach Neustart<br />
Standard: last, gültige Werte: last, on, off<br />
<br />
:restoreOnReinit<br />
Wiederherstellen der Portzustände nach Neustart<br />
Standard: last, gültige Werte: last, on, off<br />
<br />
:blocklocal<br />
Wert im Reading State sofort nach Änderung über lokale Taste wiederherstellen<br />
Standard: no, gültige Werte: no, yes<br />
<br />
Für Server devices:<br />
:allowfrom<br />
Regexp der erlaubten IP-Adressen oder Hostnamen. Wenn dieses Attribut gesetzt wurde, werden ausschließlich Verbindungen von diesen Adressen akzeptiert.<br />
<br />
==Specs==<br />
* Herstellerseite: [http://www.g-homa.com http://www.g-homa.com]<br />
* [https://files.elv.com/Assets/Produkte/12/1218/121893/Downloads/121893_wifi_funkschaltsteckdose_um.pdf Bedienungsanleitung WiFi Smart Steckdose IP44]<br />
* Typ: EMW302WFO<br />
* Spannung: 230V<br />
* Stecker/Dose: Schuko Typ-F<br />
* Strom: max 16A<br />
* Leistung: max 3680W<br />
* Schutzklasse (nur Outdoor): IP44<br />
* WiFi: 802.11 b/g/n<br />
* Von EverFlourish Europe GmbH, Robert-Koch-Str. 4, D-66299 Friedrichsthal<br />
* Das Gerät wird mit einem [http://www.iotworkshop.com/hf-lpt100f HF-LPT100F] realisiert, dass durch eine Spannungsaufbereitung, ein Relais nebst Treiber, einen Taster und einer LED auf zwei weiteren PCBs erweitert wurde.<br />
:* Darauf ist als SoC ein [https://www.generationrobots.com/media/MediaTek_MT5931_Wi-Fi_Data_Sheet_v1_0.pdf MT5931] verbaut, weshalb das Gerät eine MAC von ''Hi-flying electronics technology Co.,Ltd'' an der WLAN-Schnittstelle verwendet.<br />
:* Für technisch interessierte, lässt sich das Modul HF-LPT100F über eine UART-Schnittstelle (unbelegte Pins 5 und 6) am Pfostenstecker neu programmieren. Die Funktionen des Geräts sind realisiert durch:<br />
::# einem Taster gegen Masse mit Pull-Up-Widerstand an GPIO 18<br />
::# eine LED mit Vorwiderstand an GPIO 11<br />
::# ein Relais mit Treiber an GPIO 12<br />
:* Die UART und damit bei Bedarf auch GPIO 5 und 6 sind unbelegt.<br />
<br />
[[Kategorie:IP Components]]<br />
[[Kategorie:Schalter (Empfänger)]]</div>Klauswhttp://wiki.fhem.de/w/index.php?title=FHEM_Tablet_UI&diff=20386FHEM Tablet UI2017-02-28T14:33:24Z<p>Klausw: longpoll_filter in Tabelle hinzugefügt</p>
<hr />
<div>{{Infobox Modul<br />
|ModPurpose=Oberfläche für FHEM<br />
|ModType=x<br />
|ModFTopic=34233<br />
|ModForumArea=Frontends<br />
|ModTechName=n.a.<br />
|ModOwner=setstate ({{Link2FU|7023|Forum}})<br />
}}<br />
[[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.<br />
<br />
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.<br />
<br />
Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.<br />
<br />
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.<br />
<br />
[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]<br />
<br />
{{Todo|Spezial ergänzen, Templates erklären, Navigationsmethoden ausformulieren, aufräumen + ausbauen}} <br />
<br />
== Installation ==<br />
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:<br />
*Dateien aus dem GitHub-Repository herunterladen<br />
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)<br />
*Eine Beispieldatei anlegen<br />
<br />
{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.<br />
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}<br />
<br />
<gallery><br />
Datei:FTUI_Installation_01.png|Dateien kopieren<br />
Datei:FTUI_Installation_02.png|HTTPSRV-Device anlegen<br />
Datei:FTUI_Installation_03.png|longpoll einstellen<br />
Datei:FTUI_Installation_04.png|index.html erstellen<br />
</gallery><br />
<br />
'''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.<br />
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code><br />
<br />
<br />
'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.<br />
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code><br />
<br />
<br />
'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.<br />
<br />
:<code>attr WEB longpoll websocket</code><br />
:bzw. bei Problemen mit ''websocket''<br />
:<code>attr WEB longpoll 1</code><br />
<br />
<br />
'''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.<br />
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code><br />
<br />
<br />
'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.<br />
<br />
<br />
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<br />
<br />
== Update ==<br />
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.<br />
<br />
'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:<br />
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
'''2.''' Update der geänderten Dateien durch Eingabe von:<br />
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
<br />
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.<br />
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
== Konfiguration ==<br />
'''META-Parameter'''<br />
<br />
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.<br />
<br />
:<code><meta name="<META-Parameter>" content="<Wert>"></code><br />
<br />
{| class="wikitable"<br />
|-<br />
! META-Parameter !! Wert / Beispiel !! Erklärung<br />
|-<br />
|web_device||WEB||Device, bei dem nachgesehen wird, ob "websocket" aktiviert ist<br />
|-<br />
| longpoll || 1 oder 0 || Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh. (bis V2.5)<br />
|-<br />
| longpoll_type || websocket oder ajax oder 0 || 0: Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) oder alle 30 Sekunden ein voller Refresh per ajax oder websocket. (ab V2.6)<br />
|-<br />
|longpoll_maxage||240||Legt die Zeit fest, nach der ausbleibende Longpoll-Events als "disconnected" zählen<br />
|-<br />
| gridster_disable || 1 oder 0 || Drag&Drop der Gridster-Elemente auf der Seite deaktivieren.<br />
|-<br />
| toast || 1 oder 0 || Toast messages deaktivieren<br />
|-<br />
| 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/"<br />
|-<br />
| widget_margin || 1 bis 9999 || Abstände der Gridsterelemente verändern.<br />
|-<br />
| widget_base_width || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.<br />
|-<br />
| widget_base_height || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.<br />
|-<br />
| gridster_cols || 1 bis 9999 || Anzahl der Spalten.<br />
|-<br />
| gridster_rows || 1 bis 9999 || Anzahl der Reihen.<br />
|-<br />
| lang || de || Sprache der Visualisierung (derzeit nur DE vorhanden).<br />
|-<br />
| longpoll_filter || ROOM=FTUI || Filterangabe, welche Device ihre Änderungen zu FTUI pushen sollen (default: .*) NAME=WERT[,NAME=WERT[...]]<br />
NAME kann ein Internal, Reading oder Attribut sein.<br />
Zum Eingrenzen kann man i: für Internals , r: für Readings und a: für Attribute vor NAME setzen.<br />
WERT ist ein regulärer Ausdruck. Um WERT zu negieren wird an NAME ein ! angehängt.<br />
Mehr Details in der Commandref unter devspec (Geräte-Spezifikation)<br />
|}<br />
<br />
'''Layout'''<br />
<br />
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.<br />
<br />
Möchte man die Anzahl der Spalten und Reihen fest vorgeben:<br />
<br />
<pre><meta name="gridster_cols" content="12"><br />
<meta name="gridster_rows" content="9"></pre><br />
<br />
Mit folgendem Code kann man die Kachelgrössen fix definieren:<br />
<br />
<pre><meta name="widget_base_width" content="116"><br />
<meta name="widget_base_height" content="131"></pre><br />
<br />
'''Zoom auf mobilen Endgeräten'''<br />
<br />
Um automatische Skalierung und Zoom-Gesten auf mobilen Endgeräten zu unterbinden, kann folgender Meta-Tag im Kopf der Seite eingebunden werden:<br />
<pre><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /></pre><br />
<br />
'''FHEM URL'''<br />
<br />
Werden die FTUI Seiten von einem anderen Server als FHEM-HTTPSRV bereitgestellt, muss man die URL, unter der FHEM angesprochen wird, anpassen:<br />
<br />
<pre><meta name="fhemweb_url" content="/fhem/"></pre><br />
<br />
==Navigationsmethoden==<br />
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}} <br />
<br />
'''Unterschied zwischen Pagetab und Pagebutton:<br />
<br />
'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite<br />
[[FTUI_Widget_Pagetab]]<br />
<br />
'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite<br />
[[FTUI_Widget_Pagebutton]]<br />
<br />
==Styling==<br />
=== Farbe ===<br />
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 zum Beispiel der Color-Picker auf dieser Seite: http://www.colorpicker.com.<br />
<br />
===CSS-Styles===<br />
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.<br />
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.<br />
<code><link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /></code><br />
<br />
=== CSS-Klassen ===<br />
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|row/col-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|hbox/vbox-Layout<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Vordergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Hintergrundfarben<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Rahmen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Größen<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Schriftstil<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}<br />
|}<br />
<br />
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"<br />
!colspan="2" style="text-align: left;"|Sonstiges<br />
|-<br />
!class="mw-collapsible-content"|Klasse!!Beschreibung<br />
{{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}}<br />
|}<br />
<br />
== Widgets ==<br />
===Allgemeine Attribute===<br />
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:<br />
<br />
{| class="wikitable"<br />
|+allgemeine Attribute<br />
|-<br />
!align="right" |data-type<br />
|Widget-Typ<br />
|-<br />
!align="right" |data-device<br />
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)<br />
|-<br />
!align="right" |class<br />
|CSS-Klassen für Aussehen und Formatierung des Widgets<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Empfangen<br />
|-<br />
!align="right" |data-get<br />
|Reading Name<br />
|-<br />
!align="right" |data-get-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-get-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Senden<br />
|-<br />
!align="right" |data-set<br />
|Reading Name<br />
|-<br />
!align="right" |data-set-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-set-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.<br />
<br />
=== Integrierte Widgets ===<br />
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.<br />
<br />
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an<br />
* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.<br />
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an<br />
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots<br />
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen<br />
* [[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 <br />
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices<br />
* [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.<br />
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben<br />
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit<br />
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel<br />
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert<br />
* [[FTUI Widget Eventmonitor|eventmonitor]]:<br />
* [[FTUI Widget Filelog|filelog]]:<br />
* [[FTUI Widget Fullcalview|fullcalview]]:<br />
* [[FTUI Widget Gds|gds]]:<br />
* [[FTUI Widget Highchart|highchart]]:<br />
* [[FTUI Widget Highchart3d|highchart3d]]:<br />
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)<br />
* [[FTUI Widget Html|html]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe. <br />
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.<br />
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes<br />
* [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. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld<br />
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt. <br />
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn<br />
* [[FTUI Widget Label|label]]: Reading als Text anzeigen<br />
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert<br />
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM<br />
* [[FTUI Widget Loading|loading]]:<br />
* [[FTUI Widget Medialist|medialist]]:<br />
* [[FTUI Widget Meteogram|meteogram]]:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an. <br />
* [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.<br />
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein<br />
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation<br />
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.<br />
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button<br />
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element <br />
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste<br />
* [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.<br />
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen<br />
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads<br />
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position<br />
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit.<br />
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird<br />
* [[FTUI Widget Slideout|slideout]]:<br />
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen<br />
* [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern<br />
* [[FTUI Widget Svgplot|svgplot]]:<br />
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln<br />
* [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)<br />
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)<br />
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann<br />
* [[FTUI Widget Tts|tts]]:<br />
* [[FTUI Widget Uwz|uwz]]:<br />
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes<br />
* [[FTUI Widget Wakeup|wakeup]]:<br />
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul<br />
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen<br />
* [[FTUI Widget Weekprofile|weekprofile]]:<br />
* [[FTUI Widget Wind_direction|Wind_direction]]: Anzeige der Windrichtung auf einer Windrose<br />
<br />
===3rd Party Widgets===<br />
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.<br />
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.<br />
* [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.<br />
* [[FTUI Widget Screensaver|screensaver]]:<br />
<br />
== Icon-Konfiguration ==<br />
<br />
* Eingebaute Icons: Diese haben das ftui-Präfix. Zurzeit sind folgende verfügbar: ftui-window, ftui-door<br />
<br />
* 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><br />
<br />
* Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.<br />
<pre><br />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" /><br />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" /><br />
</pre><br />
<br />
Diese font icons haben das Präfix 'fs-' bzw. 'oa-'.<br />
<br />
Beispiel bei einem Schalter:<br />
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre><br />
<br />
<br />
Und so als großes Symbol:<br />
<pre><br />
<div data-type="symbol" data-device='dummy1'<br />
data-icon="oa-status_frost"<br />
data-on-color="#bb3232"<br />
data-get-on="on"<br />
data-get-off="!on"<br />
class="bigger"><br />
</div><br />
</pre><br />
<br />
<br />
Die Icons kann man auch etwas dicker darstellen mit den Zusatz bold: <code>data-icon="oa-secur_locked bold"</code><br />
<br />
<br />
Die Namen der verfügbaren Icons findet man auch in den CSS Files (openautomation.css / fhemSVG.css)<br />
<br />
== Spezial ==<br />
Folgender Befehl setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):<br />
<pre><br />
<div onclick="ftui.setFhemStatus('set dummy1 off')">All off!</div><br />
</pre><br />
<br />
== FAQ ==<br />
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.<br />
<br />
== Links ==<br />
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]<br />
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]<br />
* [http://forum.fhem.de/index.php/topic,37378.0.html User-Demos]<br />
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]<br />
<br />
[[Kategorie:FHEM Tablet UI]]</div>Klauswhttp://wiki.fhem.de/w/index.php?title=Raspberry_Pi:_GPIOs_schalten&diff=16590Raspberry Pi: GPIOs schalten2016-10-10T09:27:36Z<p>Klausw: </p>
<hr />
<div>Mit FHEM lassen sich auch die '''GPIOs''' des [[Raspberry Pi]] steuern. Generell gibt es einige Möglichkeiten, eine entsprechende Steuerung zu verwirklichen. Als Informationsquelle empfiehlt sich hier die [http://elinux.org/RPi_Low-level_peripherals Low-Level Peripherals Seite des Embedded Linux Wiki]<br />
<br />
== Bash Script ==<br />
Zum schalten der GPIOs via Bash kann folgendes Script (fhem-gpio.sh) verwendet werden:<br />
<br />
<source lang="bash">#!/bin/bash<br />
PORT=$1;<br />
if ! [ -d /sys/class/gpio/gpio$PORT ]<br />
then<br />
echo "$PORT" > /sys/class/gpio/export<br />
echo "out" > /sys/class/gpio/gpio$PORT/direction<br />
fi<br />
STATE=$2;<br />
if [ $STATE -ge 1 ]<br />
then<br />
STATE=1<br />
fi<br />
echo "$STATE" > /sys/class/gpio/gpio$PORT/value<br />
</source><br />
<br />
Der Aufruf des Scripts erfolgt dann mit Angabe der Pinnummer sowie des Zustands des Pins, z.&nbsp;B.:<br />
<br />
<source lang="bash">fhem-gpio.sh 17 1 # Pin 17 in High-Zustand versetzen<br />
fhem-gpio.sh 17 0 # Pin 17 in Low-Zustand versetzen<br />
</source><br />
Wichtig: Das Script muss leider unter root (z.B. per sudo) aufgerufen werden.<br />
Der Einfachheithalber kann das Script unter /usr/sbin kopiert werden.<br />
<br />
== Perl-Modul ==<br />
Das Modul '''RPI_GPIO''' für den Zugriff auf die GPIO Pins des Raspberry wird bereits mit FHEM mitgeliefert. Die Ansteuerung der GPIOs erfolgt über das Filesystem (sysFs). Daher werden keine weiteren Programme/Treiber benötigt.<br><br />
Die [http://wiringpi.com/download-and-install/ WiringPi] Bibliothek wird nur benötigt, wenn die internen Pullups/Pulldowns genutzt werden sollen oder dem FHEM User keine direkten Zugriffsrechte auf das GPIO Verzeichnis gegeben werden können.<br><br />
Die GPIOs werden über die BCM GPIO Nummerierung angesprochen und '''NICHT''' über die WiringPi Nummerierung.<br><br />
Installationsschritte sind in der Commandref zu finden. [http://forum.fhem.de/index.php/topic,16519.0.html Diskussions Thread im Forum]<br />
<br />
'''Installation'''<br />
<br />
Der Benutzer „fhem“ muss der Gruppe „gpio“ hinzugefügt werden, damit FHEM später auch Zugriff auf die GPIO Ports hat.<br />
<br />
<code>sudo adduser fhem gpio</code><br />
<br />
'''WiringPi installieren: (normalerweise nicht notwendig)'''<br />
<br />
<code>sudo apt-get install git-core</code><br><br />
<code>git clone git://git.drogon.net/wiringPi</code><br><br />
<code>cd wiringPi</code><br><br />
<code>./build</code><br><br />
<code>sudo reboot</code><br />
<br />
'''FHEM - RPI_GPIO Device erstellen'''<br />
<br />
<code>define [Name] RPI_GPIO [port]</code> z.B.: <code>define GPIO17 RPI_GPIO 17</code><br />
<br />
Um den Port schalten zu könenn ist es nötig den RPI_GPIO als output zu definieren.<br />
<code>attr GPIO17 direction output</code><br />
<br />
<source lang="text">"set GPIO17 on" # Pin 17 in High-Zustand versetzen<br />
"set GPIO17 off" # Pin 17 in Low-Zustand versetzen<br />
</source><br />
<br />
== Dummy-Schalter ==<br />
Über einen Dummy-Schalter kann das Bash-Script dann getriggert werden. <br />
<br />
Im Fall von [[FS20 Allgemein|FS20]] sähe eine entsprechende Schalter-Definition beispielsweise so aus:<br />
<br />
<source lang="perl">define gpio_17 FS20 [Hauscode] [Devicecode]<br />
attr gpio_17 dummy 1<br />
define act_on_gpio_17 notify gpio_17 {\<br />
if ("$EVENT" ne "off") {\<br />
system("sudo fhem-gpio.sh 17 1 &")\<br />
} else {\<br />
system("sudo fhem-gpio.sh 17 0 &")\<br />
}\<br />
}<br />
</source><br />
<br />
== Externe Links ==<br />
* [http://elinux.org/RPi_Low-level_peripherals http://elinux.org/RPi_Low-level_peripherals]<br />
* [http://search.cpan.org/~mikem/Device-BCM2835-1.0/lib/Device/BCM2835.pm http://search.cpan.org/~mikem/Device-BCM2835-1.0/lib/Device/BCM2835.pm]<br />
* [http://wiringpi.com/download-and-install/ http://wiringpi.com/download-and-install/]<br />
<br />
{{SORTIERUNG:GPIOs schalten}}<br />
[[Kategorie:Raspberry Pi]]</div>Klauswhttp://wiki.fhem.de/w/index.php?title=FHEM_Tablet_UI&diff=15751FHEM Tablet UI2016-06-28T20:55:04Z<p>Klausw: /* Widget LEVEL */</p>
<hr />
<div>{{Infobox Modul<br />
|ModPurpose=Oberfläche für Fhem<br />
|ModType=x<br />
|ModFTopic=34233<br />
|ModForumArea=Frontends<br />
|ModTechName=n.a.<br />
|ModOwner=setstate ({{Link2FU|7023|Forum}})<br />
}}<br />
[[Datei:tablet_ui.png|200px|thumb|right|Fhem Tablet UI]]<br />
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.<br />
<br />
In dieser Anleitung wird die Installation und Konfiguration des FHEM Tablet UI beschrieben.<br />
<br />
{{Todo|alle Widgets hier übernehmen, Übersetzung, weitere Beispiele aus dem Forum einfügen (evtl. mit Link!?)}} <br />
<br />
<br />
== Voraussetzungen ==<br />
Das User Interface hat sehr wenige Anforderungen für den Betrieb. Es benötigt <u>keine</u> zusätzliche Frameworks, wie z.B. PHP oder MySQL.<br />
<br />
Voraussetzungen ist eine Fhem Installation mit HTTPSRV Modul. Das UI kann mit den gängigen Browsern Betriebssystem unabhängig genutzt werden oder mit dem Webviewcontrol.<br />
Das Interface wird dabei in dem FHEM eigenen Webserver ausgeführt. Mit wenigen Anpassungen ist es auch möglich das UI auf anderen Webservern (Apache, u.a.) zu betreiben, dann kann FHEM und UI auch auf getrennten Systemen ausgeführt werden.<br />
<br />
== Installation ==<br />
* Im Befehls-Eingabefeld eingeben: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
* Im Befehls-Eingabefeld eingeben: <code>define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI</code><br />
* 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.<br />
<br />
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.<br />
<br />
Hinweise zu einer manuellen Installation und weitere Infos sind auf der Projektseite https://github.com/knowthelist/fhem-tablet-ui zu finden.<br />
<br />
== Update ==<br />
* 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><br />
* Update des UI durch Eingabe von: <code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
<br />
Über <br />
<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code><br />
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".<br />
<br />
== Weitere Widgets ==<br />
<br />
=== Widgets for Fhem-tablet-ui ===<br />
Zusätzlich zu den bei der Installation des Tablet UI direkt zur Verfügung stehenden Widgets, gibt es eine weitere Widget-Quelle von nesges unter https://github.com/nesges/Widgets-for-fhem-tablet-ui. Die Widgets aus dieser Quelle müssen für eine Nutzung separat installiert werden.<br />
<br />
Dazu folgenden Befehl in die Fhem-Befehlszeile eingeben: <code><nowiki>update all https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt</nowiki></code>. <br />
<br />
Näheres zur Installation unter [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/Installation Wiki: Installation]. <br />
<br />
Die Dokumentation der einzelnen Widgets befindet sich ebenfalls [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki im Github-Wiki].<br />
<br />
== Konfiguration ==<br />
'''META-Parameter'''<br />
<br />
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.<br />
<br />
:<code><meta name="<META-Parameter>" content="<Wert>"></code><br />
<br />
{| class="wikitable"<br />
|-<br />
! META-Parameter !! Wert / Beispiel !! Erklärung<br />
|-<br />
| longpoll || 1 oder 0 || Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh.<br />
|-<br />
| gridster_disable || 1 oder 0 || Drag&Drop der Gridster-Elemente auf der Seite deaktivieren.<br />
|-<br />
| toast || 1 oder 0 || Toast messages deaktivieren<br />
|-<br />
| fhemweb_url || http://meinFhemServer:8083/fhem || Wird benötigt wenn der Webserver des TabletUI nicht auf dem FHEM Server läuft.<br />
|-<br />
| widget_margin || 1 bis 9999 || Abstände der Gridsterelemente verändern.<br />
|-<br />
| widget_base_width || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.<br />
|-<br />
| widget_base_height || 1 bis 9999 || Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern.<br />
|}<br />
<br />
<br />
'''CSS-Styles'''<br />
<br />
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 eigenen CSS Datei würde bei einem Update unverändert bleiben. Daher ist abzuraten ein 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.<br />
Wird keine eigene CSS-Datei verwendet empfiehlt es sich den folgenden Eintrag im <head> der jeweiligen .html Datei zu entfernen, bzw. in Kommentar gesetzt werden um Probleme beim Laden der Seite zu verhindern.<br />
<br />
:<code><link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" /></code><br />
<br />
== Farbe ==<br />
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form oder als RGB-Wert anzugeben. Zum Beispiel: Hex: #A3CFA3 RBG: rgb(163, 207, 163).<br />
<br />
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.<br />
<br />
Hilfreich bei der Suche nach den Farbwerten ist der color picker: http://www.w3schools.com/tags/ref_colorpicker.asp<br />
<br />
<br />
== CSS Class description ==<br />
<br />
Not all widgets support all classes<br />
<br />
* readonly : changing of state is not allowed<br />
* wider : 25px extra space for the widget to the top<br />
* narrow : shorter distant to the widget above<br />
* w1x, w2x, w3x : set the widget to a fix width: 1x, 2x, 3x width<br />
* mini : lowest diameter for volume widget<br />
* small : font 80% size (label), small diameter for volume widget<br />
* medium : font 120% size<br />
* large : font 150% size<br />
* big : font 200% size<br />
* bigplus : font 270% size<br />
* bigger : font 320% size<br />
* bigger.thin : font 450% size<br />
* grande : font 600% size<br />
* gigantic: font 144px size + 120px line-height<br />
* thin : font thin<br />
* darker : forecolor in gray<br />
* hue-tick : draw ticks in color range<br />
* hue-front : draw handle in color range<br />
* hue-back : draw background in color range<br />
* dim-tick : draw ticks in brightness range<br />
* dim-front : draw handle in brightness range<br />
* dim-back : draw background in brightness range<br />
* red : foreground color red<br />
* green : foreground color green<br />
* blue : foreground color blue<br />
* doublebox-v : container to place 2 small widgets (e.g. switch) one above the other<br />
* doublebox-h : container to place 2 small widgets (e.g. switch) side by side<br />
* timestamp : deliver the date time for the reading instead the value<br />
* inline : positioning elements in a row, no line break<br />
* top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)<br />
* left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)<br />
* right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)<br />
* blink : blink animatation for label or symbol widget<br />
* verticalLine : Vertikale Line am rechten Rand<br />
<br />
== Positioning ==<br />
<br />
*container : new box or new row<br />
*col-x-y : new column with x/y of width (col-1-3,col-2-3,col-1-2,col-1-4,col-1-8,col-1-5,col-2-5,col-3-5,col-4-5)<br />
*inline : positioning elements in a row, no line break<br />
*top-space : 15px extra on top (top-space-2x -> 30px; top-space-3x -> 45px)<br />
*left-space : 15px extra on left (left-space-2x -> 30px; left-space-3x -> 45px)<br />
*right-space : 15px extra on right (right-space-2x -> 30px; right-space-3x -> 45px)<br />
*top-narrow : -15px closer on top (top-narrow-2x -> -30px; top-narrow-10 -> -10px)<br />
*centered : horizontal centered<br />
*left-align : align text left<br />
*left : floating left<br />
*right-align : align text right<br />
*right : floating right<br />
*wider : 15px extra space for the widget all around<br />
*narrow : shorter distant to the widget above<br />
*fullsize : 100% in width and height<br />
<br />
== Widgets -- Konfiguration ==<br />
<br />
Teilweise dokumentierte Widgets:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/button button]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen Fhem-Befehl absetzen kann.<br />
* [[#chart|chart]]: chart with similar capabilities as the FHEM plots <br />
* checkbox:<br />
* [[#circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clicksound clicksound]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/clock clock]: Das Widget "clock" stellt eine einfach Uhr zur verfügung.<br />
* colorwheel:<br />
* daytimepicker:<br />
* departure:<br />
* [[#dimmer|dimmer]]: toogle button with a setter for on value<br />
* eventmonitor:<br />
* highchart:<br />
* [[#homestatus|homestatus]]: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]]: Widget zum Einbinden externer Inhalte in einem Iframe. <br />
* [[#image|image]]: insert an image, the URL is given by a reading<br />
* input:<br />
* [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. <br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld<br />
* [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. <br />
* Knob:<br />
* [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.<br />
* [[#label|label]]: STATE als Text anzeigen<br />
* [[#level|level]]: vertical/horizontal bar to show values between min/max value<br />
* link:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an. <br />
* [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.<br />
* [[#pagetab|pagetab]]: Element to smoothly exchange the whole page with another page<br />
* pagebutton:<br />
* [[#playstream|playstream]]: Abspielen eines Webradio-Streams per Button<br />
* [[#popup|popup]]: a popup dialog which open on click on another widget <br />
* [[#progress|progress]]: round symbolic display for percent values<br />
* [[#push|push]]: send any command to Fhem e.g. up / down<br />
* range:<br />
* readingsgroup:<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads<br />
* [[#rotor|rotor]]: Umschalten von zwei oder mehr Widgets an einer Position<br />
* [[#select|select]]: Combobox to provide a list for selection<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: zum anzeigen und einstellen einer Uhrzeit.<br />
* [[#simplechart|simplechart]]: simple XY line chart for one value (reads directly from Fhem log file) <br />
* [[#slider|slider]]: vertical slider to select between min/max value<br />
* spinner:<br />
* swiper:<br />
* [[#switch|switch]]: Toggle any command to Fhem (e.g. on / off)<br />
* [[#symbol|symbol]]: State als Symbol darstellen (z.B. Fenster offen)<br />
* [[#thermostat|thermostat]]: dial for heater thermostates to set desired value and show current value<br />
* [[#volume|volume]]: dial to set a single value (e.g. 0-60)<br />
* [[#weather|weather]]: insert an icon or image, represending a weather literal<br />
* [https://github.com/svenson08/ftui-weekdaytimer-widget weekdaytimer]: Visualisierung des [[WeekdayTimer]] Modul<br />
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/wind_direction wind_direction]: Zeigt die Windrichtung auf einer Windrose an. <br />
<br />
<br />
Ein Demo der Widgets findet ihr [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Hier].<br />
----------------------------------<br />
<br />
Für alle Widgets gilt:<br />
{| class="wikitable"<br />
|+allgemeine Attribute<br />
|-<br />
!align="right" |data-type<br />
|Widget-Typ<br />
|-<br />
!align="right" |data-device<br />
|Fhem-Name des Gerätes (mit dem Befehl 'list' bekommt man im Fhem die kpl. Liste)<br />
|-<br />
!align="right" |class<br />
|CSS-Klassen für Aussehen und Formatierung des Widgets<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Empfangen<br />
|-<br />
!align="right" |data-get<br />
|Reading Name<br />
|-<br />
!align="right" |data-get-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-get-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
{| class="wikitable"<br />
|+Daten Senden<br />
|-<br />
!align="right" |data-set<br />
|Reading Name<br />
|-<br />
!align="right" |data-set-on<br />
|Wert für den Status on<br />
|-<br />
!align="right" |data-set-off<br />
|Wert für den Status off<br />
|-<br />
|}<br />
<br />
<div id="chart">'''CHART'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-logdevice<br />
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung) or array of names if more than one graph shall be displayed<br />
|-<br />
|-<br />
!align="right" |data-logfile<br />
|name of the logfile (e.g. WohnzimmerHeizung-2015.log) or or array of names if more than one graph shall be displayed<br />
|'-' or omitting this data means current logfile<br />
|-<br />
!align="right" |data-columnspec<br />
|definition for how to find the values (e.g. "4:meas.*:1:int") or or array of columnspecs if more than one graph shall be displayed<br />
|-<br />
|-<br />
!align="right" |data-style<br />
|name of the graph style to be used (e.g. 'SVGplot l0' or 'ftui l0dash') or or array of styles if more than one graph shall be displayed using different stlyes. The standard fhem plot styles can be used furthermore there are some more predefined styles existing (details see css file). Own styles can be specified e.g. in the fhem-table-ui-user.css file.<br />
|-<br />
|-<br />
!align="right" |data-ptype<br />
|name of the plot type (e.g. 'lines' or 'fa-cog') or or array of plottypes if more than one graph shall be displayed. All fhem plot styles are supported. Additionally it is possible to specify symbols (currently supported are font awesome ('fa-...'), open automation ('oa-...') and fhem symbols ('fs-...'))<br />
|'lines'<br />
|-<br />
!align="right" |data-uaxis<br />
|name of the axis to be used ('primary' or 'secondary') or or array of axis' to be used if more than one graph shall be displayed. The 'primary' axis is labelled on the left side, the 'secondary' axis is labelled on the right side<br />
|'primary'<br />
|-<br />
!align="right" |data-legend<br />
|caption of the graph (used in the legend and at the cursor) or an array of legend texts if more than one graph shall be displayed.<br />
|-<br />
|-<br />
!align="right" |data-minvalue<br />
|min Y value to Show or an array of values for dynamic minY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically<br />
|10<br />
|-<br />
!align="right" |data-minvalue_sec<br />
|min Y value to Show or an array of values for dynamic minY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically<br />
|'auto'<br />
|-<br />
!align="right" |data-maxvalue<br />
|max Y value to Show or an array of values for dynamic maxY for primary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically<br />
|30<br />
|-<br />
!align="right" |data-maxvalue_sec<br />
|max Y value to Show or an array of values for dynamic maxY for secondary axis. A value of 'auto' means that the value is calculated from the data displayed dynamically<br />
|'auto'<br />
|-<br />
!align="right" |data-yticks<br />
|value distance between Y tick lines (related to primary axis). A value of 'auto' means that the value is calculated from the data displayed dynamically.<br />
|'auto'<br />
|-<br />
!align="right" |data-xticks<br />
|time range between each X tick lines (in minutes). A value of 'auto' means that the value is calculated from the data displayed dynamically<br />
|'auto'<br />
|-<br />
!align="right" |data-daysago_start<br />
|number of days back from now for the start of the plot (0 means the plot starts from today 0:00). Additionally the x-axis start value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'. If the setting ends with 'w', 'W', 'm', 'M', 'y', 'Y' the nuber given is interpreted as week, month or year respectively (capital letters mean rounding to full weeks, months years) (e.g. '2Y' means that, if current date is 3.6.2015, the graph will start 1.1.2013).<br />
|0<br />
|-<br />
!align="right" |data-daysago_end<br />
|number of days back from now for the end of the plot (-1 means the plot ends today 24:00). Additionally the x-axis end value can be set here unsing standard data formats like ('2013-10-23'), the time portion of the string is only used when <code>data-nofulldays</code> is 'true'. If the setting ends with 'w', 'W', 'm', 'M', 'y', 'Y' the nuber given is interpreted as week, month or year respectively (capital letters mean rounding to full weeks, months years) (e.g. '2Y' means that, if current date is 3.6.2015, the graph will end 31.12.2013).<br />
|-1<br />
|-<br />
!align="right" |data-timeformat<br />
|setting for the formatting of the x-tick text. The format can be configured in a quite flexible way. Several format classifiers are supported which are separated by special characters ('-', '.', '/', ' ', ':', ',', '\'). All characters despite '\' will be displayed in the final output.<br />
The following is a list of supported classifiers:<br />
* 'LF'enters a linefeed<br />
* 'mm' - displays minutes as 2 digits<br />
* 'hh' - displays hours as 2 digits<br />
* 'dd' - displays day of the month as 2 digits<br />
* 'MM' - displays months as 2 digits (e.g. 02 for February)<br />
* 'MMM' - displays months as 3 characters (e.g. Dec for December)<br />
* 'MMMM' - displays monhts as full names (e.g. March)<br />
* 'ee' - displays weekdays as 2 digits (e.g. 00 for Sunday)<br />
* 'eee' - displays weekdays as 3 characters (e.g. Mon for Monday)<br />
* 'eeee' - displays weekdays as full names (e.g. Tuesday)<br />
* 'yy' - displays years as 2 digits (e.g. 16 as 2016)<br />
* 'yyyy' - displays years as 4 digits<br />
For example a string given as 'MMM\LF\yyyy' will display 'Jan' in one line and '2016' in a second one. A string given as 'MM.dd 2016' will display '03.05 2016'.<br />
|-<br />
|-<br />
!align="right" |data-nofulldays<br />
|switch to activate/deactivate rounding of the xaxis start and end values to full days ('true' or 'false')<br />
|'false'<br />
|-<br />
!align="right" |data-ytext<br />
|text to be shown besides the primary y axis.<br />
|-<br />
|-<br />
!align="right" |data-ytext_sec<br />
|text to be shown besides the secondary y axis.<br />
|-<br />
|-<br />
!align="right" |data-yunit<br />
|unit of the value to show beside of each Y ticks for primary y axis.<br />
|-<br />
|-<br />
!align="right" |data-crosshair<br />
|switch to activate/deactivate the crosshair cursor ('true' or 'false')<br />
|'false'<br />
|-<br />
!align="right" |data-cursorgroup<br />
|number to define coupling of the crosshair cursor. The cursors of all charts having the same number are coupled and move together.<br />
|-<br />
|-<br />
!align="right" |data-scrollgroup<br />
|number to define coupling of the scrolling (shift and zoom). All charts having the same number are scrolled (shifted and zoomed) together.<br />
|-<br />
|-<br />
!align="right" |data-showlegend<br />
|switch to activate/deactivate the initial display of the legend window ('true' or 'false')<br />
|'false'<br />
|-<br />
!align="right" |data-legendpos<br />
|array of two values (horizontal and vertical) to set the initial position of the legend window. Allowed values are "left", "right" or a number giving the position in percent for the first parameter (horizontal position) and 'top', 'bottom' or a number giving the position in percent for the second parameter (vertical position). <br />
|'["top","right"]'<br />
|-<br />
!align="right" |data-yunit_sec<br />
|unit of the value to show beside of each Y ticks for secondary y axis.<br />
|-<br />
|-<br />
!align="right" |data-width<br />
|fixed size for width (in&nbsp;% or px)<br />
|-<br />
|-<br />
!align="right" |data-height<br />
|fixed size for height (in&nbsp;% or px)<br />
|-<br />
|-<br />
!align="right" |data-graphsshown<br />
|boolean to define if graphs are activated (shown) initially or an array of booleans if more than one graph shall be displayed.<br />
|-<br />
|-<br />
!align="right" |data-ddd<br />
|setting for 3D display. Array with 3 angles for rotation of the 3D chart in x, y, z (z not yet supported) (e.g. '["40","60","0"]'). If the array is existing, there will be 2 additional buttons on top for changing rotation in x and y.<br />
|-<br />
|-<br />
!align="right" |data-dddspace<br />
|setting for the space between different graphs in y direction if 3D is activated (space given in pixels).<br />
|15<br />
|-<br />
!align="right" |data-dddwidth<br />
|setting for the width of the graphs if 3D is activated (width given in pixels).<br />
|10<br />
|-<br />
!align="right" |class<br />
|fullsize, noticks, nobuttons, small, normal, big<br />
|-<br />
|-<br />
|}<br />
<br />
<code>data-logfile</code> can be omitted in this case the default value "-" will be used. This means that the current logfile is going to be used.<br />
<br />
There are several buttons that control the dynamic behaviour of the chart. The <-, ->, + and - buttons shift and zoom the displayed data. The "legend" and "cursor" buttons are switching on and off the display of the legend window and the crosshair cursor respectively. If 3D display is activated (see above) 2 more buttons control the rotation in x and y.<br />
<br />
When the legend window is displayed, a click on the legend text shows/hides the respective graph. The legend window can be dragged to other positions on desktop browsers (currently not yet working for iOS and Android).<br />
<br />
The crosshair cursor currently only works dynamically on desktop browsers. On iOS and Android you have to tap on the screen to set the cursor to a new position.<br />
<br />
Three classes define default values for the texts (small, normal, big). Additionally there is a number of css styles that control the visible appearance of the chart. The following classes are supported:<br />
<br />
{| class="wikitable"<br />
!CSS class name<br />
!Description<br />
|-<br />
!.chart-background<br />
|Color etc. for the chart background<br />
|-<br />
!.text.axes<br />
|Font and color for the chart axes<br />
|-<br />
!.buttons<br />
|Size and color for the buttons (shift etc.)<br />
|-<br />
!.gridlines<br />
|Size and color for gridlines generally<br />
|-<br />
!.xaxis<br />
|Font, size and color for xaxis<br />
|-<br />
!.yaxis<br />
|Font, size and color for yaxis<br />
|-<br />
!.xticks<br />
|Font, size and color for xticks<br />
|-<br />
!.yticks<br />
|Font, size and color for yticks<br />
|-<br />
!.crosshair<br />
|Font, size and color (foreground/background) for the crosshair cursor<br />
|-<br />
!.caption<br />
|Font, size and color for text buttons for legend and cursor switching<br />
|-<br />
!.legend<br />
|Font, size and background color for legend window<br />
|-<br />
|-<br />
|}<br />
<br />
[[#Beispiel_chart|Link zu einem Beispiel]]<br />
<br />
<br />
<div id="circlemenu">'''CIRCLEMENU'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-item-diameter<br />
|diameter of the circle<br />
|52<br />
|-<br />
!align="right" |data-circle-radius<br />
|radius of each item, in pixel<br />
|70<br />
|-<br />
!align="right" |data-direction<br />
|position of the items in relation to the center<br />
|'full'<br />
|-<br />
!align="right" |data-close-after<br />
|closing time of the circle-menu<br />
|(item-count + 1s) or a minimum of 4s<br />
|-<br />
!align="right" |class<br />
|keepopen<br />
|<br />
|-<br />
|}<br />
<br />
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<br />
<br />
[[#Beispiel_circlemenu|Link zu einem Beispiel]]<br />
<br />
<br />
<div id="dimmer">'''DIMMER'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-get<br />
|name of the reading to get from Fhem<br />
|'STATE'<br />
|-<br />
!align="right" |data-get-on<br />
|value for ON status to get<br />
|'on'<br />
|-<br />
!align="right" |data-get-off<br />
|value for OFF status to get<br />
|'off'<br />
|-<br />
!align="right" |data-set<br />
|(<command> <device> <reading> <value>) <br />
|<br />
|-<br />
!align="right" |data-set-on<br />
|value for ON status to set<br />
|value of data-get-on<br />
|-<br />
!align="right" |data-set-off<br />
|value for OFF status to set<br />
|value of data-get-off<br />
|-<br />
!align="right" |data-cmd<br />
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)<br />
|'set'<br />
|-<br />
!align="right" |data-dim<br />
|name of the reading responsible for dim (<command> <device> <reading> <value>) <br />
|value of data-get-on<br />
|-<br />
!align="right" |data-icon<br />
|name of the font-awesome icon<br />
|fa-lightbulb-o<br />
|-<br />
|}<br />
<br />
[[#Beispiel_dimmer|Link zu einem Beispiel]]<br />
<br />
<div id="homestatus">'''HOMESTATUS'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-get<br />
|name of the reading to get from Fhem<br />
|'STATE'<br />
|-<br />
!align="right" |data-set<br />
|command to send to Fhem (<code>set <device> <command> <value></code>)<br />
|''<br />
|-<br />
!align="right" |data-get-on<br />
|array of states using for get<br />
|['1','2','3','4']<br />
|-<br />
!align="right" |data-set-on<br />
|array of states using for set.<br />
|value of data-get-on<br />
|-<br />
!align="right" |data-alias<br />
|array of fix names to show only in the UI as an alias to the real states<br />
|''<br />
|-<br />
!align="right" |data-icons<br />
|array of icons related to the data-get-on array<br />
|''<br />
|-<br />
!align="right" |data-version<br />
|name of the status model e.g. 'residents','roommate','guest' <br />
|(default NULL)<br />
|-<br />
|}<br />
<br />
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'<br />
<br />
[[#Beispiel_homestatus|Link zu einem Beispiel]]<br />
<br />
<br />
<div id="image">'''IMAGE'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-get<br />
|name of the reading to get an URL from Fhem<br />
|'STATE'<br />
|-<br />
!align="right" |data-size<br />
|width of the image in px or %, the height scales proportionally<br />
|50%<br />
|-<br />
!align="right" |data-url<br />
|URL of the image to show (use data-url or data-device + data-get, not both)<br />
|<br />
|-<br />
!align="right" |data-refresh<br />
|Interval in seconds for image refresh for usage together with data-url<br />
|900<br />
|-<br />
|}<br />
<br />
[[#Beispiel_image|Link zu einem Beispiel]]<br />
<br />
=== Widget LABEL ===<br />
<div id="label">'''LABEL'''</div><br />
<br />
Mit dem LABEL Widget kann der STATUS eines Device in Textform angezeigt werden. Dabei kann das die Farbe des Anzeigetext abhängig von dessen Wert festgelegt werden. <br />
<br />
Neben den '''allgemeine Attribute''' besitzt das LABEL-Widget die nachfolgenden Attribute.<br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-get <br />
|Name des Readings in FHEM <br />
|<br />
|-<br />
!align="right" |data-fix <br />
|Eine bestimmte Anzahl an Dezimalstellen <br />
|'-1' -> non-numeric <br />
|-<br />
!align="right" |data-part <br />
|split position of the space separated value to show or an RegEx <br />
| <br />
|-<br />
!align="right" |data-color <br />
| fix color attribute or DEVICE:READING for dynamic setting of label color <br />
| ''<br />
|-<br />
!align="right" |data-colors <br />
|a array of color values to affect the colour of the label according to the limit value <br />
| <br />
|-<br />
!align="right" |data-limits-get <br />
|name of the DEVICE:Reading to colorize the label <br />
|data-device:data-get <br />
|-<br />
!align="right" |data-limits <br />
|an array of numeric values to affect the colour of the Label <br />
| <br />
|-<br />
!align="right" |data-limits-part <br />
|part number of the space separated value to show or a RegEx <br />
|'-1' -> all <br />
|-<br />
!align="right" |data-unit <br />
|add a unit after a numeric value. use encoded strings e.g. "%B0C%0A" <br />
| <br />
|-<br />
!align="right" |data-substitution <br />
|regex-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected <br />
| <br />
|-<br />
!align="right" |data-hide <br />
|string to compare with current value. hide element when it's value equals data-hide <br />
|<br />
|-<br />
!align="right" |data-hideparents <br />
|jquery selector to hide element's parents too <br />
|<br />
|-<br />
!align="right" |class <br />
|small, large, big, bigger, thin, red, green, blue, darker, timestamp, w1x, w2x, w3x, fixedlabel, icon, bg-limit <br />
| <br />
|}<br />
<br />
Mit der Class 'fixedlabel' kann man Label einbauen, die einen festen Text (direkt im HTML) haben, aber trotzdem die Farbe per Reading Value beeinflusst werden könnte.<br><br />
Mit der Class 'icon' kann man Label einbauen, die wie Icons aussehen. Als Hintergrund gibt es 'icon round' (rund), 'icon square' (Rechteck mit abgerundeten Ecken) und 'icon squareborder' (Rechteck mit abgerundeten Ecken und einem zusätzlichen Rand).<br><br />
Mit der Class 'bg-limit' wird der Hintergrund des Icon auf grün oder rot gesetzt, passend zum on/off Status des data-limits.<br />
Use data-color OR data-colors + data-limits, not both.<br />
<br />
With class="bg-limit" it changes the background color not the forecolor according data-limits<br />
<br />
class="icon square" or class="icon round" forces the label to a fix width and height in icon style<br />
<br />
Special layout can be achieved by overwriting of following classes in the fhem-tablet-ui-user.css:<br />
<br />
.label-precomma .label-comma .label-aftercomma .label-unit<br />
<br />
e.g.: .label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }<br />
<br />
Functions for data-substitution:<br />
<br />
Array of replacements<br />
RegEx-substitution to apply on the value. Standard regex notation (s/regex/subst/modifier) is expected<br />
data-substitution="weekdayshort"<br />
JS functions data-substitution="toDate().ddmm()" - convert to day:month<br />
data-substitution="toDate().hhmm()" - convert to hour:minutes<br />
<br />
data-substitution="toDate().hhmmss()" - convert to hour:minutes:secondes<br />
<br />
data-substitution="toDate().eeee()" - convert to name of the week day<br />
<br />
data-substitution="toDate().ago()" - convert to time span<br />
<br />
[[#Beispiel_label|Link zu einem Beispiel]]<br />
<br />
=== Widget LEVEL ===<br />
<div id="level">'''LEVEL'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-get<br />
|name of the reading to get from Fhem<br />
|'STATE'<br />
|-<br />
!align="right" |data-min<br />
|minimal value to set<br />
|'0'<br />
|-<br />
!align="right" |data-max<br />
|maximal value to set<br />
|'100'<br />
|-<br />
!align="right" |data-on<br />
|value where the slider moves to max<br />
|'on'<br />
|-<br />
!align="right" |data-off<br />
|value where the slider moves to min<br />
|'off'<br />
|-<br />
!align="right" |data-part<br />
|part number of the space separated value to show or an RegEx<br />
|<br />
|-<br />
!align="right" |data-colors<br />
|a array of color values to affect the colour of the label according to the limit value<br />
|<br />
|-<br />
!align="right" |data-limits<br />
|a array of numeric or RegEx values to affect the colour of the label<br />
|<br />
|-<br />
!align="right" |class<br />
|mini, horizontal<br />
|<br />
|-<br />
|}<br />
<br />
[[#Beispiel_level|Link zu einem Beispiel]] (fehlt noch)<br />
<br />
<div id="pagetab">'''PAGETAB'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-url<br />
|URL of the new page to show<br />
|<br />
|-<br />
!align="right" |data-icon<br />
|name of the font-awesome icon<br />
|'fa-power-off'<br />
|-<br />
!align="right" |data-background-icon<br />
|name of the font-awesome icon for background <br />
|''<br />
|-<br />
!align="right" |data-on-background-color<br />
|color of ON state<br />
|'#aa6900'<br />
|-<br />
!align="right" |data-off-background-color<br />
|color of OFF state<br />
|'#505050'<br />
|-<br />
!align="right" |data-on-color<br />
|color of ON state<br />
|'#aa6900'<br />
|-<br />
!align="right" |data-off-color<br />
|color of Off state<br />
|'#505050'<br />
|-<br />
!align="right" |data-get-on<br />
|array of status to assign a special icon-list from data-icons<br />
|<br />
|-<br />
!align="right" |data-icons<br />
|array of icons related to the a data-get-on array<br />
|<br />
|-<br />
!align="right" |class<br />
|warn, activate (as additionals for data-icons)<br />
|<br />
|-<br />
|}<br />
<br />
[[#Beispiel_pagetab|Link zu einem Beispiel]]<br />
<br />
<div id="playstream">'''PLAYSTREAM'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-url<br />
|URL des Radio-Streams<br />
|-<br />
!align="right" |data-get<br />
|name of the reading to get the control state from FHEM<br />
|'STATE'<br />
|-<br />
!align="right" |data-get-on<br />
|value for PLAY status to get. <br />
|'on'<br />
|-<br />
!align="right" |data-get-off<br />
|value for STOP status to get. <br />
|'off'<br />
|-<br />
!align="right" |data-volume<br />
|name of the reading to get the volume value (0-100) <br />
|volume<br />
|-<br />
|}<br />
<br />
[[#Beispiel_playstream|Link zu einem Beispiel]]<br />
<br />
<div id="popup">'''POPUP'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-get<br />
|name of the reading where to get the alert value from<br />
|'STATE'<br />
|-<br />
!align="right" |data-get-on<br />
|value which trigger to open the dialog<br />
|'on'<br />
|-<br />
!align="right" |data-off<br />
|value which trigger to close the dialog <br />
|'off'<br />
|-<br />
!align="right" |data-width<br />
|fixe size for width (in % or px)<br />
|<br />
|-<br />
!align="right" |data-height<br />
|fixe size for height (in % or px)<br />
|<br />
|-<br />
|}<br />
<br />
[[#Beispiel_popup|Link zu einem Beispiel]]<br />
<br />
<div id="progress">'''PROGRESS'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-get<br />
|name of the reading to get from Fhem<br />
|'STATE'<br />
|-<br />
!align="right" |data-max<br />
|maximal value to set or name of the reading which helds the max value<br />
|100<br />
|-<br />
!align="right" |class<br />
|novalue, percent<br />
|<br />
|-<br />
|}<br />
<br />
[[#Beispiel_progress|Link zu einem Beispiel]] (fehlt noch)<br />
<br />
<div id="push">'''PUSH'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default-Wert<br />
|-<br />
!align="right" |data-set<br />
| name of the reading to set on FHEM (<command> <device> <reading> <value>) <br />
|<br />
|-<br />
!align="right" |data-set-on<br />
|value to send when the the button get pressed oder ein Array zwischen dessen Werten umgeschaltet werden kann<br />
|<br />
|-<br />
!align="right" |data-icon<br />
|name of the font-awesome icon<br />
|<br />
|-<br />
!align="right" |data-background-icon<br />
|name of the font-awesome icon for background <br />
|'fa-circle'<br />
|-<br />
!align="right" |data-cmd<br />
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)<br />
|'set'<br />
|-<br />
!align="right" |data-doubleclick<br />
|timeout to wait for a second click or touch. '0' disables the doubleclick feature. <br />
|0<br />
|-<br />
!align="right" |data-countdown<br />
|secondes for the countdown progress control <br />
|autodetect from 'on-for-timer' command<br />
|-<br />
!align="right" |data-background-icon<br />
|name of the font-awesome icon for background <br />
|<br />
|-<br />
!align="right" |data-off-background-color<br />
|fix color attribute for OFF state or DEVICE:READING for dynamic setting <br />
|#505050<br />
|-<br />
!align="right" |data-off-color<br />
|fix color attribute for Off state or DEVICE:READING for dynamic setting<br />
|#505050<br />
|-<br />
|}<br />
<br />
'data-set-on' can also be an array of values to toggle between this values<br />
<br />
[[#Beispiel_push|Link zu einem Beispiel]]<br />
<br />
<br />
<div id="rotor">'''ROTOR'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" | data-delay<br />
|time in millisecondes to wait until next list item get shown<br />
|3500<br />
|-<br />
!align="right" |class<br />
|fade, rotate<br />
|'' <br />
|-<br />
|}<br />
Ohne Angabe von class erfolgt keine Animation.<br />
<br />
[[#Beispiel_rotor|Link zu einem Beispiel]]<br />
<br />
<br />
<div id="select">'''SELECT'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-get<br />
|name of the reading that get the selected item of the list<br />
|<br />
|-<br />
!align="right" |data-set<br />
|name of the reading to set on Fhem (<command> <device> <reading> <value>)<br />
|''<br />
|-<br />
!align="right" |data-list<br />
|name of the reading to get a :-separated list from Fhem<br />
|''<br />
|-<br />
!align="right" |data-items<br />
|an array of fix items to show in the selection box (alternative if data-list is empty)<br />
|<br />
|-<br />
!align="right" |data-alias<br />
|an array of fix names to show only in the selection box as an alias to the real items<br />
|<br />
|-<br />
!align="right" |data-cmd<br />
|name of the command to send to Fhem (<command> <device> <reading> <value>) (e.g. setstate, set, setreading, trigger)<br />
|'set'<br />
|-<br />
!align="right" |data-quote<br />
|characters to enclose the send value<br />
|<br />
|-<br />
!align="right" |class<br />
|wider, w1x, w2x, w3x, large, big<br />
|<br />
|-<br />
|} <br />
<br />
[[#Beispiel_select|Link zu einem Beispiel]]<br />
<br />
<div id="simplechart">'''SIMPLECHART'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-logdevice<br />
|name of the logdevice (e.g. FileLog_WohnzimmerHeizung)<br />
|<br />
|-<br />
!align="right" |data-logfile<br />
|name of the logfile (e.g. WohnzimmerHeizung-2015.log)<br />
|'-' means current logfile<br />
|-<br />
!align="right" |data-columnspec<br />
|definition for how to find the values (e.g. "4:meas.*:1:int")<br />
|''<br />
|-<br />
!align="right" |data-minvalue<br />
|min Y value to Show or an array of values for dynamic minY <br />
|10<br />
|-<br />
!align="right" |data-maxvalue<br />
|max Y value to Show or an array of values for dynamic maxY <br />
|30<br />
|-<br />
!align="right" |data-yticks<br />
|value distance between Y tick lines<br />
|5<br />
|-<br />
!align="right" |data-xticks<br />
|time range between each X tick line (in Minuten)<br />
|360 minutes<br />
|-<br />
!align="right" |data-daysago<br />
|number of days back from now <br />
|0<br />
|-<br />
!align="right" |data-caption<br />
|name of the chart to show as text <br />
|<br />
|-<br />
!align="right" |data-yunit<br />
|unit of the value to show beside of each Y ticks<br />
|<br />
|-<br />
!align="right" |data-width<br />
|fixe size for width (in % or px)<br />
|<br />
|-<br />
!align="right" |data-height<br />
|fixe size for height (in % or px)<br />
|<br />
|-<br />
!align="right" |class<br />
|fullsize, noticks<br />
|<br />
|-<br />
|} <br />
<br />
[[#Beispiel_simplechart|Link zu einem Beispiel]] (fehlt noch)<br />
<br />
<code>data-logfile</code> kann man auch weglassen, dann greift der Defaultwert "-". Damit wird das neuste Logfile gelesen.<br />
<br />
<br />
<div id="slider">'''SLIDER'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-get<br />
|name of the reading to get from Fhem<br />
|'STATE'<br />
|-<br />
!align="right" |data-set<br />
|command to send to Fhem (<code>set <device> <command> <value></code>)<br />
|''<br />
|-<br />
!align="right" |data-cmd<br />
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)<br />
|'set'<br />
|-<br />
!align="right" |data-min<br />
|minimal value to set<br />
|0<br />
|-<br />
!align="right" |data-max<br />
|maximal value to set<br />
|100<br />
|-<br />
!align="right" |data-step<br />
|step value<br />
|1<br />
|-<br />
!align="right" |data-on<br />
|value where the slider moves to max<br />
|'on'<br />
|-<br />
!align="right" |data-off<br />
|value where the slider moves to min<br />
|'off'<br />
|-<br />
!align="right" |data-get-value<br />
|RegEx to retrieve the value or part number of the space separated input to get the value<br />
|'-1': all of the input<br />
|-<br />
!align="right" |data-set-value<br />
|Format of the value to send to FHEM<br />
|'$v': the value only<br />
|-<br />
!align="right" |data-width<br />
|width for horizontal sliders<br />
|'120px', for mini '60px'<br />
|-<br />
!align="right" |data-height<br />
|height for vertical sliders <br />
|'120px', for mini '60px'<br />
|-<br />
!align="right" |data-color<br />
|color for quantity range<br />
|'#aa6900'<br />
|-<br />
!align="right" |data-background-color<br />
|color for range bar<br />
|#404040<br />
|-<br />
!align="right" |class<br />
|Aussehen/Ausrichtung<br />
|<br />
|-<br />
|}<br />
<br />
Für class steht mini, horizontal und negated (0 liegt oben) zur Verfügung.<br />
<br />
[[#Beispiel_slider|Link zu einem Beispiel]]<br />
<br />
<div id="switch">'''SWITCH'''</div><br />
<br />
{| class="wikitable"<br />
!HTML-Attribut<br />
!Beschreibung<br />
!Default-Wert<br />
|-<br />
!align="right" |data-get<br />
|Name des Reading, was gelesen werden soll<br />
|'STATE'<br />
|-<br />
!align="right" |data-set<br />
|Name des Reading, was gelesen werden soll<br />
|'STATE'<br />
|-<br />
!align="right" |data-cmd<br />
|Kommando Name (<command> <device> <value>) <br />(z.B setstate, set, setreading, trigger) <br />
|'set'<br />
|-<br />
!align="right" |data-doubleclick<br />
|timeout to wait for x millisecondes click or touch. '0' disables the doubleclick feature.<br />
|'0'<br />
|-<br />
|}<br />
Einstellung bei zwei Werten<br />
<br />
{| class="wikitable"<br />
!HTML-Attribut<br />
!Beschreibung<br />
!Default-Wert<br />
|-<br />
!align="right" |data-get-on<br />
|Wert, bei dem zum Status ON geschaltet werden soll. <br />
|'on'<br />
|-<br />
!align="right" |data-get-off<br />
|Wert, bei dem zum Status OFF geschaltet werden soll. <br />
|'off'<br />
|-<br />
!align="right" |data-set-on<br />
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf ON geschaltet wurde <br />
|Wert von data-get-on<br />
|-<br />
!align="right" |data-set-off<br />
|Wert, der zu Fhem gesendet werden soll, wenn das Widget auf OFF geschaltet wurde <br />
|Wert von data-get-off<br />
|-<br />
!align="right" |data-icon<br />
|Name des Font-Awesome Icon. <br />
|'fa-lightbulb-o'<br />
|-<br />
!align="right" |data-background-icon<br />
|Name des Font-Awesome Hintergrund Icon. <br />
|'fa-circle'<br />
|-<br />
!align="right" |data-on-background-color<br />
|Hintergrundfarbe beim Status on oder DEVICE:Reading bei dynamischen Einstellungen<br />
|'#aa6900'<br />
|-<br />
!align="right" |data-off-background-color<br />
|Hintergrundfarbe beim Status off oder DEVICE:Reading bei dynamischen Einstellungen<br />
|'#505050'<br />
|-<br />
!align="right" |data-on-color<br />
|Widget Farbe beim Status ON <br />
|'#aa6900'<br />
|-<br />
!align="right" |data-off-color<br />
|Widget Farbe beim Status OFF <br />
|'#505050'<br />
|-<br />
|}<br />
<br />
Einstellung bei mehreren Werten<br />
{| class="wikitable"<br />
!HTML-Attribut<br />
!Beschreibung<br />
!Default-Wert<br />
|-<br />
!align="right" |data-states<br />
|Array mit Status Angaben <br />
|<br />
|-<br />
!align="right" |data-set-states<br />
|Array mit Status Angaben, die gesetzt werden sollen<br />
|<br />
|-<br />
!align="right" |data-icons<br />
|Array Icons zum zuvor definierten Status<br />
|<br />
|-<br />
!align="right" |data-background-icons<br />
|Array mit Hintergrund Icons zum zuvor definierten Status <br />
|<br />
|-<br />
!align="right" |data-colors<br />
|Array mit Farben zum zuvor definierten Status <br />
|<br />
|-<br />
!align="right" |data-background-colors<br />
|Array mit Hintergrund Farben zum zuvor definierten Status <br />
|<br />
|-<br />
!align="right" |class : readonly<br />
|Es wird nur der Status angezeigt und kann nicht geändert werden<br />
|<br />
|-<br />
|}<br />
<br />
<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)<br />
<br />
[[#Beispiel_switch|Link zu einem Beispiel]]<br />
<br />
=== Widget SYMBOL ===<br />
<div id="symbol">'''SYMBOL'''</div><br />
<br />
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.<br />
<br />
Neben den '''allgemeine Attribute''' besitzt das SYMBOL-Widget die nachfolgenden Attribute.<br />
<br />
dual state notation<br />
{| class="wikitable"<br />
! HTML Attribut !! Beschreibung !! Default Wert<br />
|-<br />
| data-get || Name des Reading, was gelesen werden soll || 'STATE' <br />
|}<br />
<br />
Einstellung bei zwei Werten<br />
{| class="wikitable"<br />
!HTML-Attribut !! Beschreibung !! Default-Wert<br />
|-<br />
|'''data-get-on''' ||Wert für on ||'open'<br />
|-<br />
|'''data-get-off''' ||Wert für off ||'closed'<br />
|-<br />
|'''data-icon''' ||Name des Symbols ||'ftui-window'<br />
|-<br />
|'''data-background-icon''' ||Hintergrundsymbol ||'''leer'''<br />
|-<br />
|'''data-on-background-color''' ||Farbe für ON-Zustand. ||'#aa6900'<br />
|-<br />
|'''data-off-background-color''' ||Farbe für OFF-Zustand. ||'#505050'<br />
|-<br />
|'''data-on-color''' ||Farbe für ON-Zustand. ||'#aa6900'<br />
|-<br />
|'''data-off-color''' ||Farbe für OFF-Zustand. ||'#505050'<br />
|-<br />
|}<br />
<br />
Einstellung bei mehreren Werten<br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-states<br />
|Array für states. <br />
|<br />
|-<br />
!align="right" |data-icons<br />
|Array mit Icons zu data-states Array<br />
|<br />
|-<br />
!align="right" |data-background-icons<br />
|Array mit Icons zu data-states Array<br />
|<br />
|-<br />
!align="right" |data-colors<br />
|Array mit Farben zu data-states aArray<br />
|''<br />
|-<br />
!align="right" |data-background-colors<br />
|Array mit Hintergrundfarben zu data-states array<br />
|''<br />
|-<br />
|}<br />
<br />
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<br />
<br />
[[#Beispiel_symbol|Link zu einem Beispiel]]<br />
<br />
=== Widget THERMOSTAT===<br />
<div id="thermostat">'''THERMOSTAT'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-get<br />
|name of the reading to get from Fhem<br />
|'desired-temp'<br />
|-<br />
!align="right" |data-temp<br />
|reading for measured temperature of thermostates<br />
|'measured-temp'<br />
|-<br />
!align="right" |data-set<br />
|command to send to Fhem (set <device> <command> <value>)<br />
|'desired-temp'<br />
|-<br />
!align="right" |data-valve<br />
|reading for valve position of thermostates<br />
|<br />
|-<br />
!align="right" |data-min<br />
|minimal value to set<br />
| 10<br />
|-<br />
!align="right" |data-max<br />
|maximal value to set<br />
| 30<br />
|-<br />
!align="right" |data-minColor<br />
|Farbe des Keises für Min<br />
| #4477FF<br />
|-<br />
!align="right" |data-maxColor<br />
|Farbe des Kreises für Max, zwischen Min und Max wird linear interpoliert <br />
| #FF0000<br />
|-<br />
!align="right" |data-step<br />
|step size for value adjustment e.g. 0.5 <br />
|1<br />
|-<br />
!align="right" |data-bgColor<br />
|Die Farbe der Kreises zwischen den ticks<br />
|'transparent'<br />
|-<br />
!align="right" |data-fgColor<br />
|Die Farbe der zahl im Kreismittelpunkt<br />
|#bbbbbb<br />
|-<br />
!align="right" |data-tkColor<br />
|Die Farbe der ticks<br />
|#696969<br />
|-<br />
|-<br />
!align="right" |data-angleOffset<br />
|Start der ticks im Kreis (in Winkelgraden, 0 = oben)<br />
| -120<br />
|-<br />
!align="right" |data-angleArc<br />
|Bereich der ticks im Kreis (in Winkelgraden)<br />
|240<br />
|-<br />
!align="right" |class<br />
|big, readonly<br />
|<br />
|-<br />
|}<br />
<br />
[[#Beispiel_thermostat|Link zu einem Beispiel]]<br />
<br />
<br />
<div id="volume">'''VOLUME'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-get<br />
|name of the reading to get from Fhem <br />
|'STATE'<br />
|-<br />
!align="right" |data-set<br />
|command to send to Fhem (set <device> <command> <value>)<br />
|''<br />
|-<br />
!align="rigth" |data-cmd<br />
|name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger) <br />
|'set'<br />
|-<br />
!align="right" |data-min<br />
|minimal value to set<br />
|0<br />
|-<br />
!align="right" |data-max<br />
|maximal value to set<br />
|70<br />
|-<br />
!align="right" |data-get-value<br />
|RegEx to retrieve the value or part number of the space separated input to get the value<br />
|'-1': all of the input<br />
|-<br />
!align="right" |data-set-value<br />
|Format of the value to send to FHEM<br />
|'$v': the value only<br />
|-<br />
!align="right" |data-tickstep<br />
|distance between ticks<br />
|4|20<br />
|-<br />
!align="right" |data-unit<br />
|add a unit after the desired value.<br />
|<br />
|-<br />
!align="right" |class<br />
|mini, small, big, bigger, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back, readonly<br />
|<br />
|-<br />
|}<br />
<br />
[[#Beispiel_volume|Link zu einem Beispiel]] (fehlt noch)<br />
<br />
<br />
<div id="weather">'''WEATHER'''</div><br />
<br />
{| class="wikitable"<br />
!HTML Attribut<br />
!Beschreibung<br />
!Default Wert<br />
|-<br />
!align="right" |data-get<br />
|name of the reading to get the weather literal from Fhem<br />
|'STATE'<br />
|-<br />
!align="right" |data-imageset<br />
|collection of images to display current weather situation. Possible values: 'meteocons', 'kleinklima'<br />
|'meteocons'<br />
|-<br />
!align="right" |data-image-path<br />
|path to the images of the selected imageset<br />
|/images/weather/<br />
|-<br />
|}<br />
<br />
[[#Beispiel_weather|Link zu einem Beispiel]]<br />
<br />
== Widgets -- Beispiele ==<br />
<br />
<div id="Beispiel_chart">'''Chart'''</div><br />
<br />
Display a chart with similar capabilities as the FHEM plots<br />
<br />
<pre><br />
<div data-type="chart"<br />
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'<br />
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'<br />
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'<br />
data-ptype='["lines","histeps","histeps","cubic"]'<br />
data-uaxis='["primary","secondary","secondary","primary"]'<br />
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'<br />
data-yunit="°C"<br />
data-ytext="Temperature"<br />
data-minvalue="auto"<br />
data-maxvalue="auto"<br />
data-yunit_sec="mm"<br />
data-ytext_sec="Rain (mm)"<br />
data-height="250"<br />
data-yticks="auto"<br />
data-minvalue_sec="auto"<br />
data-maxvalue_sec="auto"<br />
data-nofulldays="true"<br />
data-daysago_start="2013-08-13T00:00:00"<br />
data-daysago_end="2013-08-14T00:00:00"<br />
data-cursorgroup="1"<br />
data-scrollgroup="1"<br />
data-xticks="auto"><br />
</div><br />
</pre><br />
<br />
[[Datei:chart_tabletUI.png]]<br />
<br />
<br />
<div id="Beispiel_circlemenu">'''Circlemenu'''</div><br />
<br />
Cover a lot of other button behind one single button<br />
<br />
<pre><br />
<div class="left"><br />
<div data-type="circlemenu" class="cell circlemenu"><br />
<ul class="menu"><br />
<li><div data-type="push" data-icon="fa-wrench"></div></li><br />
<li><div data-type="push" data-device="AvReceiver" <br />
data-set="remoteControl subwoofer-temporary-level -6" <br />
data-icon="">-6</div></li><br />
<li><div data-type="push" data-device="AvReceiver" <br />
data-set="remoteControl subwoofer-temporary-level -2" <br />
data-icon="">-2</div></li><br />
<li><div data-type="push" data-device="AvReceiver" <br />
data-set="remoteControl subwoofer-temporary-level 0" <br />
data-icon="">0</div></li><br />
<li><div data-type="push" data-device="AvReceiver" <br />
data-set="remoteControl subwoofer-temporary-level +3" <br />
data-icon="">2</div></li><br />
<li><div data-type="push" data-device="AvReceiver" <br />
data-set="remoteControl subwoofer-temporary-level +9" <br />
data-icon="">9</div></li><br />
<li><div data-type="push" data-device="AvReceiver" <br />
data-set="remoteControl subwoofer-temporary-level +C" <br />
data-icon="">12</div></li><br />
</ul><br />
</div><br />
<div data-type="label" class="cell">Woofer</div><br />
</div><br />
</pre><br />
<br />
[[Datei:circlemenu_tabletUI.png]]<br />
<br />
<br />
<div id="Beispiel_dimmer">'''Dimmer'''</div><br />
<br />
Dimmer Widget Beispiel für Philips Hue<br />
<br />
Minimalvariante<br />
<pre> <br />
<div data-type="dimmer" data-device="HUEDevice1"<br />
data-get-on="!off" data-get-off="off"<br />
data-set="pct"</div><br />
</pre><br />
<br />
Mit Anzeige der Dimstufe<br />
<pre><br />
<div data-type="dimmer" data-device="HUEDevice1"<br />
data-get="onoff"<br />
data-get-on="1" data-get-off="0"<br />
data-set=""<br />
data-set-on="on" data-set-off="off"<br />
data-dim="pct"><br />
</div><br />
</pre><br />
<br />
Dimmer Widget für MilightDevice<br />
<br />
<pre><br />
<div data-type="dimmer"<br />
data-device="SonstWas"<br />
data-get="brightness"<br />
data-get-off="0"<br />
data-get-on="[1-9][0-9]*"<br />
data-set-on="on"<br />
data-set-off="off"<br />
data-dim="dim"<br />
data-min="0"<br />
data-max="100"<br />
></div><br />
</pre><br />
<br />
<br />
<div id="Beispiel_homestatus">'''Homestatus'''</div><br />
<br />
Beispiel rechts im Bild:<br />
<pre><br />
<div data-type="homestatus" data-device='dummy1'<br />
data-get-on='["1","2","3","4"]'<br />
data-alias='["Home","Night","Away","Holiday"]'<br />
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase"]'><br />
</div><br />
</pre><br />
<br />
Beispiel links im Bild:<br />
<pre><br />
<div data-type="homestatus" data-device='dummy1'<br />
data-get-on='["home","asleep","absent","gone","gotosleep"]'<br />
data-alias='["Home","Night","Away","Holiday","Retire"]'<br />
data-icons='["fa-fire","fa-film","fa-plus","fa-car","fa-tint"]'<br />
data-version='residents'><br />
</div><br />
</pre><br />
<br />
[[Datei:homestatus_tabletUI.png]]<br />
<br />
<br />
<br />
<div id="Beispiel_image">'''Image'''</div><br />
<br />
<br />
Erzeugt ein Widget mit einem Bild aus dem www, das alle 5 Sekunden aktualisiert wird (hier eine Wetterkarte vom DWD).<br />
<br />
<pre><br />
<div data-type="image"<br />
data-size="80%"<br />
data-url="http://www.dwd.de/wundk/wetter/de/Deutschland.jpg"<br />
</div><br />
</pre><br />
<br />
[[Datei:image_tabletUI.jpg]]<br />
<br />
<br />
Example for how to add an image to the dashboard which its URL is delivered by a Fhem module like PROPLANTA:<br />
<br />
<pre><br />
<div data-type="image" data-device="Wetter1" <br />
data-get="fc0_weatherDayIcon" <br />
data-size="40px" <br />
class="cell"><br />
</div><br />
</pre><br />
<br />
<br />
<div id="Beispiel_label">'''Label'''</div><br />
<br />
Example for HM-WDS40-TH-I Funk-Temperatur-/Feuchtesensor innen<br />
<br />
<pre><br />
STATE T: 20.0 H: 61<br />
</pre><br />
<pre><br />
<div data-type="label" data-device="THSensorWZ" <br />
data-part="2" data-unit="%B0C%0A" class="cell big"></div><br />
<div data-type="label" class="cell">Temperatur</div><br />
<div data-type="label" data-device="THSensorWZ" data-part="4" <br />
data-unit="%" class="cell big"></div><br />
<div data-type="label" class="cell">Luftfeuchte</div><br />
</pre><br />
<br />
But the same result can reached by getting single readings:<br />
<pre><br />
humidity 58<br />
temperature 20.1<br />
</pre><br />
<br />
<pre><br />
<div data-type="label" data-device="THSensorWZ" <br />
data-get="temperature" data-unit="%B0C%0A" class="cell big"></div><br />
<div data-type="label" class="cell">Temperatur</div><br />
<div data-type="label" data-device="THSensorWZ" <br />
data-get="humidity" data-unit="%" class="cell big"></div><br />
<div data-type="label" class="cell">Luftfeuchte</div><br />
</pre><br />
<br />
Example for how to influence the color of the label according to value limits<br />
<pre><br />
<div data-type="label" <br />
data-device="OutTemp" <br />
data-limits='[-73,10,23]' <br />
data-colors='["#6699FF","#AA6900","#FF0000"]' <br />
data-unit="%B0C%0A" <br />
class="cell big"><br />
</div><br />
</pre><br />
<br />
Example for how to create a widget for shutter via push: show state and set up/down<br />
<pre><br />
<div data-type="switch" <br />
data-device="wzRollo" <br />
data-get-on="up" <br />
data-get-off="down" <br />
data-icon="fa-bars" <br />
class="cell" ><br />
</div><br />
<div data-type="label" <br />
class="cell">Rollo</div><br />
</pre><br />
<br />
Example for how to create a label for a time value in short format with usage of RegEx.<br />
<br />
<pre><br />
<div data-type="label" <br />
data-device="dummy1" <br />
data-part="(\d\d\.\d\d\.).*" <br />
class="cell"><br />
</div><br />
</pre><br />
<br />
Example for how to show two labels in one line.<br />
<br />
<pre><br />
<div class=""><br />
<div type="label" device="OnSunrise" class="inline"></div>bis<br />
<div type="label" device="OnSunset" class="inline"></div><br />
</div><br />
</pre><br />
<br />
Beispiel für die Anzeige des UV-Indexes und der Abhängigkeit der anzuzeigenden Farbe.<br />
<br />
<pre><br />
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"<br />
data-get="fc0_uv"<br />
data-limits="[-2, 2, 5, 7, 10]" <br />
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div><br />
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc0_date"></div><br />
<div data-type="label" class="wider cell bigger" data-device="ProVorhersage"<br />
data-get="fc1_uv"<br />
data-limits="[-2, 2, 5, 7, 10]"<br />
data-colors='["#66FF33","#FFFF00","#FF6600","#FF0000","#993399"]'></div><br />
<div data-type="label" class="cell" data-device="ProVorhersage" data-get="fc1_date"></div><br />
</pre><br />
<br />
[[Datei:label_tabletUI.jpg]]<br />
<br />
Beispiel für die Anzeige des Labels als Icon.<br />
<pre><br />
<div class="cell"><br />
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon round bg-red cell"></div><br />
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon square bg-blue cell"></div><br />
<div data-type="label" data-device="AvReceiver" data-get="input" class="icon squareborder cell"></div><br />
<div data-type="label" data-device="PowerAV_Sw" data-colors='["red","green"]' data-limits='["off","on"]' class="icon round bg-limit cell"></div><br />
</div><br />
</pre><br />
<br />
[[Datei:Label_tabletUI_icon.png]]<br />
<br />
<div id="Beispiel_pagetab">'''Pagetab'''</div><br />
<br />
Example for a tab menu to switch smoothly between multiple pages. Multiple pagetabs in a template file: menu.html<br />
<br />
<pre><br />
<html><br />
<body><br />
<header>MENU</header><br />
<div class="cell"><br />
<div data-type="pagetab" data-url="index.html" data-icon="fa-home" class="cell"></div><br />
<div data-type="pagetab" data-url="index_2.html" data-icon="fa-sliders" class="cell"></div><br />
<div data-type="pagetab" data-url="index_3.html" data-icon="fa-music" class="cell"></div><br />
<div data-type="pagetab" data-url="index_4.html" data-icon="fa-hotel" class="cell"></div><br />
<div data-type="pagetab" data-url="index_5.html" data-icon="fa-music" class="cell"></div><br />
<div data-type="pagetab" data-url="index_6.html" data-icon="fa-database" class="cell"></div><br />
<div data-type="pagetab" data-url="index_7.html" data-icon="fa-fax" class="cell"></div><br />
</div><br />
</body><br />
</html><br />
</pre><br />
<br />
<br />
<div id="Beispiel_playstream">'''Playstream'''</div><br />
<br />
Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.<br />
<br />
<pre><br />
<div data-type="playstream" data-url="http://radioeins.de/stream"></div><br />
<div data-type="label" class="darker">Radio eins</div><br />
</pre><br />
<br />
<br />
<div id="Beispiel_push">'''Push'''</div><br />
<br />
Example for how to create a push button widget to trigger all devices on:<br />
<br />
<pre><br />
<div data-type="push" <br />
data-device="LightAll" <br />
data-cmd="trigger" <br />
data-set="on" <br />
class="cell"><br />
</div><br />
</pre><br />
<br />
<br />
Beispiel für zwei horizontale Buttons:<br />
<br />
<pre><br />
<div class="cell"><br />
<div class="doublebox-h"><br />
<div data-type="push" data-device="Rollo" <br />
data-icon="fa-angle-up" data-background-icon="fa-square-o" <br />
data-set="up"><br />
</div><br />
<div data-type="push" data-device="Rollo" <br />
data-icon="fa-angle-down" data-background-icon="fa-square-o" <br />
data-set="down"><br />
</div><br />
</div><br />
</div><br />
</pre><br />
<br />
[[Datei:push1.png]]<br />
<br />
<br />
Beispiel für zwei quadratische vertikale Buttons:<br />
<br />
<pre><br />
<div class="cell"><br />
<div class="doublebox-v"><br />
<div data-type="push" data-device="Rollo" <br />
data-icon="fa-chevron-up" data-background-icon="fa-square-o" <br />
data-set="up"><br />
</div><br />
<div data-type="push" data-device="Rollo" <br />
data-icon="fa-chevron-down" data-background-icon="fa-square-o" <br />
data-set="down"><br />
</div><br />
</div><br />
</div><br />
</pre><br />
<br />
[[Datei:push2.png]]<br />
<br />
<br />
<div id="Beispiel_rotor">'''Rotor'''</div><br />
<br />
Example for a rotor widget, which switches between to days of weather forecast<br />
<br />
<pre><br />
<div data-type="rotor" class="fade"><br />
<ul><br />
<li><br />
<div data-type="label" class="darker">Heute</div><br />
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="big"></div><br />
<div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class=""></div><br />
<div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="large"></div><br />
</li><br />
<li><br />
<div data-type="label" class="darker">Morgen</div><br />
<div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="big"></div><br />
<div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class=""></div><br />
<div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="large"></div><br />
</li><br />
</ul><br />
</div><br />
</pre><br />
<br />
<br />
<br />
<div id="Beispiel_select">'''Select'''</div><br />
<br />
Erzeugt zwei Comboboxen zur Auswahl des Eingang eines 2-Zonen-AV-Receivers. Die Liste für Zone2 ist fest, die Liste für Zone1 wird von Fhem übergeben.<br />
<br />
<pre><br />
<div class="cell wider"><br />
<div data-type="label" class="inline wider">Zone2</div><br />
<div data-type="select" data-device="AvReceiverZ2" data-items='["Airplay","Webradio","BD/DVD","PHONO"]' data-get="input" data-set="input" class="cell w2x" ></div><br />
<div></div><br />
<div data-type="label" class="inline">Zone1</div><br />
<div data-type="select" data-device="AvReceiver" data-list="inputs" data-get="input" data-set="input" class="cell w2x" ></div><br />
</div><br />
</pre><br />
<br />
[[Datei:select_tabeltUI.png]]<br />
<br />
<br />
<div id="Beispiel_slider">'''Slider'''</div><br />
<br />
<br />
Slider mit einstellbaren Werten von 10 bis 90:<br />
<br />
<pre><br />
<div data-type="slider" <br />
data-device='Dummy1' <br />
data-min="10" <br />
data-max="90" <br />
class="cell" ><br />
</div><br />
<div data-type="label" class="cell">Light1</div><br />
</pre><br />
<br />
[[Datei:slider_tabletUI.png]]<br />
<br />
<br />
Horizontal angeordneter Slider:<br />
<br />
<pre><br />
<div data-type="slider"<br />
data-device='Dummy1' <br />
data-min="0" <br />
data-max="100" <br />
class="horizontal" <br />
</div><br />
</pre><br />
<br />
[[Datei:slider_tabletUI2.jpg]]<br />
<br />
<br />
<div id="Beispiel_switch">'''Switch'''</div><br />
<br />
Schalter. Usage of RegEx pattern for state request:<br />
<br />
<pre><br />
<div data-type="switch" class="cell" <br />
data-device="MILIGHT_Zone1_Wohnzimmer" <br />
data-get-on="on.*"<br />
data-get-off="off"></div><br />
</pre><br />
<br />
[[Datei:switch.png]]<br />
<br />
Beispiel für eine Gruppe von Schaltern, um zwischen vier verschiedenen Werten eines device umzuschalten:<br />
<br />
<pre><br />
<div class="cell left"><br />
<div data-type="switch" data-device="dummy1" <br />
data-get-off="((?!Wert1).)*" <br />
data-get-on="Wert1" class="cell" ></div><br />
<div data-type="label" class="cell">Wert1</div><br />
<div data-type="switch" data-device="dummy1" <br />
data-get-off="((?!Wert2).)*" <br />
data-get-on="Wert2" class="cell" ></div><br />
<div data-type="label" class="cell">Wert2</div><br />
<div data-type="switch" data-device="dummy1" <br />
data-get-off="((?!Wert3).)*" <br />
data-get-on="Wert3" class="cell" ></div><br />
<div data-type="label" class="cell">Wert3</div><br />
<div data-type="switch" data-device="dummy1" <br />
data-get-off="((?!Wert4).)*" <br />
data-get-on="Wert4" class="cell" ></div><br />
<div data-type="label" class="cell">Wert4</div><br />
</div><br />
</pre><br />
<br />
[[Datei:switch4.png]]<br />
<br />
<br />
<div id="Beispiel_symbol">'''Symbol'''</div><br />
<br />
Example for a tristate icon<br />
<br />
<pre><br />
<div data-type="symbol" data-device="dummy1" <br />
data-get-on='["wert1","wert2","wert3"]' <br />
data-icons='["fa-arrow-up","fa-user","fa-arrow-down"]' <br />
data-on-colors='["SeaGreen","SlateBlue","IndianRed"]' <br />
class="cell big"><br />
</div><br />
</pre><br />
<br />
<br />
Example for a tristate icon with blink and spin animation<br />
<br />
<pre><br />
<div data-type="symbol" data-device="dummy1" <br />
data-icons='["fa-exclamation-triangle fa-blink","fa-exclamation-circle","fa-cog fa-spin"]' <br />
data-on-colors='["Crimson","GoldenRod","SeaGreen"]' <br />
data-get-on='["Wert1","Wert2","Wert3"]' ><br />
</div><br />
</pre><br />
<br />
<br />
Example for a battery level control with RegEx<br />
<br />
<pre><br />
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"<br />
data-icons='["oa-measure_battery_100","oa-measure_battery_75","oa-measure_battery_50","oa-measure_battery_25","oa-measure_battery_0"]'<br />
data-get-on='["3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]'<br />
data-on-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'><br />
</div><br />
</pre><br />
<br />
<br />
<br />
Example for a battery level control with greater-equal compare and 90° rotated symbols<br />
<br />
<pre><br />
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel"<br />
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"]'<br />
data-get-on='["0","2","2.4","2.7","3.0"]'<br />
data-on-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'><br />
</div><br />
</pre><br />
<br />
<br />
<div id="Beispiel_thermostat">'''Thermostat'''</div><br />
<br />
Configure as data-device='...' that item which delivers temp and desired-temp as reading.<br />
<br />
Default parameters are:<br />
<pre><br />
data-get="desired-temp" data-temp="measured-temp" data-set="desired-temp"<br />
</pre><br />
<br />
Therefor for HomaMatic HM-CC-RT-DN this is sufficient.<br />
<br />
<pre><br />
<div data-type="thermostat" data-device='KH_Clima' class="cell"></div><br />
</pre><br />
<br />
The long format looks like this:<br />
<br />
<pre><br />
<div data-type="thermostat" <br />
data-device="KH_Clima" <br />
data-get="desired-temp" <br />
data-temp="measured-temp" <br />
class="cell"><br />
</div><br />
</pre><br />
<br />
<br />
Example for MAX!:<br />
<pre><br />
<div data-type="thermostat" data-device="HZ_Tuer" <br />
data-valve="valveposition" <br />
data-get="desiredTemperature" <br />
data-temp="temperature" <br />
data-set="desiredTemperature" <br />
class="cell"><br />
</div><br />
</pre><br />
<br />
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.<br />
<br />
[[Datei:thermostat.png]]<br />
<br />
<br />
<div id="Beispiel_weather">'''Weather'''</div><br />
<br />
Das Widget fügt ein dem Wetter entsprechendes Bild ein. Die Daten können durch Fhem-Module wie [[PROPLANTA]], [[OPENWEATHER]] und [[Weather]] bereitgestellt werden. <br />
Add 'big' or 'bigger' to CSS class to get a bigger weather icon.<br />
<br />
Beispiel:<br />
<pre><br />
<div data-type="weather" <br />
data-device="Weather" <br />
data-get="fc0_weatherDay" <br />
class="cell big"><br />
</div><br />
</pre><br />
<br />
[[Datei:weather.png]]<br />
<br />
== Icon-Konfiguration ==<br />
<br />
* Eingebaute Icons: Diese haben das ftui-Präfix. Zurzeit sind folgende verfügbar: ftui-window, ftui-door<br />
<br />
* 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><br />
<br />
* Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.<br />
<pre><br />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" /><br />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" /><br />
</pre><br />
<br />
Diese font icons haben das Präfix 'fs-' bzw. 'oa-'.<br />
<br />
Beispiel bei einem Schalter:<br />
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre><br />
<br />
<br />
Und so als großes Symbol:<br />
<pre><br />
<div data-type="symbol" data-device='dummy1'<br />
data-icon="oa-status_frost"<br />
data-on-color="#bb3232"<br />
data-get-on="on"<br />
data-get-off="!on"<br />
class="bigger"><br />
</div><br />
</pre><br />
<br />
<br />
Die Icons kann man auch etwas dicker darstellen mit den Zusatz bold: <code>data-icon="oa-secur_locked bold"</code><br />
<br />
<br />
Die Namen der verfügbaren Icons findet man auch in den CSS Files (openautomation.css / fhemSVG.css)<br />
<br />
== Spezial ==<br />
Folgender Befehl setzt einen direkten Befehl an Fhem ab (<code>set dummy1 off</code>):<br />
<pre><br />
<div onclick="setFhemStatus('set dummy1 off')">All off!</div><br />
</pre><br />
<br />
<br />
<br />
== FAQ ==<br />
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM_Tablet_UI/FAQ|FHEM Tablet UI FAQ]] zusammengestellt.<br />
<br />
== Links ==<br />
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]<br />
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]<br />
* [http://forum.fhem.de/index.php/topic,37378.0.html User-Demos]<br />
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]<br />
<br />
[[Kategorie:FHEM Frontends]]</div>Klauswhttp://wiki.fhem.de/w/index.php?title=Raspberry_Pi:_GPIOs_schalten&diff=4275Raspberry Pi: GPIOs schalten2014-01-06T17:44:04Z<p>Klausw: /* Externe Links */</p>
<hr />
<div>Mit FHEM lassen sich auch die '''GPIOs''' des [[Raspberry Pi]] steuern. Generell gibt es einige Möglichkeiten, eine entsprechende Steuerung zu verwirklichen. Als Informationsquelle empfiehlt sich hier die [http://elinux.org/RPi_Low-level_peripherals Low-Level Peripherals Seite des Embedded Linux Wiki]<br />
<br />
== Bash Script ==<br />
Zum schalten der GPIOs via Bash kann folgendes Script (fhem-gpio.sh) verwendet werden:<br />
<br />
<nowiki>#!/bin/bash<br />
PORT=$1;<br />
if&#160;! [ -d /sys/class/gpio/gpio$PORT ]<br />
then<br />
echo "$PORT" &gt; /sys/class/gpio/export<br />
echo "out" &gt; /sys/class/gpio/gpio$PORT/direction<br />
fi<br />
STATE=$2;<br />
if [ $STATE -gt 1 ]<br />
then<br />
STATE=1<br />
fi<br />
echo "$STATE" &gt; /sys/class/gpio/gpio$PORT/value</nowiki><br />
Der Aufruf des Scripts erfolgt dann mit Angabe der Pinnummer sowie des Zustands des Pins, z.&nbsp;B.:<br />
<br />
<nowiki>fhem-gpio.sh 17 1 # Pin 17 in High-Zustand versetzen<br />
fhem-gpio.sh 17 0 # Pin 17 in Low-Zustand versetzen</nowiki><br />
Wichtig: Das Script muss leider unter root (z.B. per sudo) aufgerufen werden.<br />
Der Einfachheithalber kann das Script unter /usr/sbin kopiert werden.<br />
<br />
== Perl-Modul ==<br />
Das Modul '''RPI_GPIO''' für den Zugriff auf die GPIO Pins des Raspberry wird bereits mit FHEM mitgeliefert.<br />
Es setzt die [http://wiringpi.com/download-and-install/ WiringPi] Bibliothek voraus.<br />
Installationsschritte sind in der Commandref zu finden. [http://forum.fhem.de/index.php/topic,16519.0.html Diskussions Thread im Forum]<br />
<br />
In Arbeit: Perl-Modul basierend auf [http://search.cpan.org/~mikem/Device-BCM2835-1.0/lib/Device/BCM2835.pm BCM2835-Modul]<br />
<br />
== Dummy-Schalter ==<br />
Über einen Dummy-Schalter kann das Bash-Script dann getriggert werden. <br />
<br />
Im Fall von [[FS20 Allgemein|FS20]] sähe eine entsprechende Schalter-Definition beispielsweise so aus:<br />
<br />
<nowiki>define gpio_17 FS20 [Hauscode] [Devicecode]<br />
attr gpio_17 dummy 1<br />
define act_on_gpio_17 notify gpio_17 {\<br />
if ("%" ne "off") {\<br />
system("sudo fhem-gpio.sh 17 1 &amp;")\<br />
} else {\<br />
system("sudo fhem-gpio.sh 17 0 &amp;")\<br />
}\<br />
}</nowiki><br />
== Externe Links ==<br />
* [http://elinux.org/RPi_Low-level_peripherals http://elinux.org/RPi_Low-level_peripherals]<br />
* [http://search.cpan.org/~mikem/Device-BCM2835-1.0/lib/Device/BCM2835.pm http://search.cpan.org/~mikem/Device-BCM2835-1.0/lib/Device/BCM2835.pm]<br />
* [http://wiringpi.com/download-and-install/ http://wiringpi.com/download-and-install/]<br />
<br />
{{SORTIERUNG:GPIOs schalten}}<br />
[[Kategorie:Raspberry Pi]]</div>Klauswhttp://wiki.fhem.de/w/index.php?title=Raspberry_Pi:_GPIOs_schalten&diff=4274Raspberry Pi: GPIOs schalten2014-01-06T17:43:25Z<p>Klausw: /* Perl-Modul */</p>
<hr />
<div>Mit FHEM lassen sich auch die '''GPIOs''' des [[Raspberry Pi]] steuern. Generell gibt es einige Möglichkeiten, eine entsprechende Steuerung zu verwirklichen. Als Informationsquelle empfiehlt sich hier die [http://elinux.org/RPi_Low-level_peripherals Low-Level Peripherals Seite des Embedded Linux Wiki]<br />
<br />
== Bash Script ==<br />
Zum schalten der GPIOs via Bash kann folgendes Script (fhem-gpio.sh) verwendet werden:<br />
<br />
<nowiki>#!/bin/bash<br />
PORT=$1;<br />
if&#160;! [ -d /sys/class/gpio/gpio$PORT ]<br />
then<br />
echo "$PORT" &gt; /sys/class/gpio/export<br />
echo "out" &gt; /sys/class/gpio/gpio$PORT/direction<br />
fi<br />
STATE=$2;<br />
if [ $STATE -gt 1 ]<br />
then<br />
STATE=1<br />
fi<br />
echo "$STATE" &gt; /sys/class/gpio/gpio$PORT/value</nowiki><br />
Der Aufruf des Scripts erfolgt dann mit Angabe der Pinnummer sowie des Zustands des Pins, z.&nbsp;B.:<br />
<br />
<nowiki>fhem-gpio.sh 17 1 # Pin 17 in High-Zustand versetzen<br />
fhem-gpio.sh 17 0 # Pin 17 in Low-Zustand versetzen</nowiki><br />
Wichtig: Das Script muss leider unter root (z.B. per sudo) aufgerufen werden.<br />
Der Einfachheithalber kann das Script unter /usr/sbin kopiert werden.<br />
<br />
== Perl-Modul ==<br />
Das Modul '''RPI_GPIO''' für den Zugriff auf die GPIO Pins des Raspberry wird bereits mit FHEM mitgeliefert.<br />
Es setzt die [http://wiringpi.com/download-and-install/ WiringPi] Bibliothek voraus.<br />
Installationsschritte sind in der Commandref zu finden. [http://forum.fhem.de/index.php/topic,16519.0.html Diskussions Thread im Forum]<br />
<br />
In Arbeit: Perl-Modul basierend auf [http://search.cpan.org/~mikem/Device-BCM2835-1.0/lib/Device/BCM2835.pm BCM2835-Modul]<br />
<br />
== Dummy-Schalter ==<br />
Über einen Dummy-Schalter kann das Bash-Script dann getriggert werden. <br />
<br />
Im Fall von [[FS20 Allgemein|FS20]] sähe eine entsprechende Schalter-Definition beispielsweise so aus:<br />
<br />
<nowiki>define gpio_17 FS20 [Hauscode] [Devicecode]<br />
attr gpio_17 dummy 1<br />
define act_on_gpio_17 notify gpio_17 {\<br />
if ("%" ne "off") {\<br />
system("sudo fhem-gpio.sh 17 1 &amp;")\<br />
} else {\<br />
system("sudo fhem-gpio.sh 17 0 &amp;")\<br />
}\<br />
}</nowiki><br />
== Externe Links ==<br />
* [http://elinux.org/RPi_Low-level_peripherals http://elinux.org/RPi_Low-level_peripherals]<br />
* [http://search.cpan.org/~mikem/Device-BCM2835-1.0/lib/Device/BCM2835.pm http://search.cpan.org/~mikem/Device-BCM2835-1.0/lib/Device/BCM2835.pm]<br />
<br />
{{SORTIERUNG:GPIOs schalten}}<br />
[[Kategorie:Raspberry Pi]]</div>Klausw