FHEM Tablet UI: Unterschied zwischen den Versionen

Aus FHEMWiki
(Die Seite wurde geleert.)
Markierung: Geleert
 
(95 dazwischenliegende Versionen von 26 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
{{Infobox Modul
|ModPurpose=Oberfläche für FHEM
|ModType=x
|ModFTopic=34233
|ModForumArea=Frontends
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
[[FHEM Tablet UI]] (FTUI) ist ein leichtgewichtiges aber funktionsreiches Frontend-Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Es basiert auf HTML/CSS/JavaScript und stellt somit keine zusätzlichen Anforderungen an den FHEM-Server.


Mit Hilfe zahlreicher Widgets, die sehr leicht mit HTML Code konfiguriert werden können, ist es möglich, innerhalb kurzer Zeit ein den eigenen Wünschen entsprechendes User-Interface aufzubauen.
Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.
Mit wenigen Anpassungen ist es auch möglich das UI auf anderen Webservern (Apache, u.a.) zu betreiben. Somit können FHEM und FHEM Tablet UI auch auf getrennten Systemen ausgeführt werden.
[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]
{{Todo|Spezial ergänzen, Templates erklären, Navigationsmethoden ausformulieren, aufräumen + ausbauen}}
== Installation ==
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:
*Dateien aus dem GitHub-Repository herunterladen
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)
*Eine Beispieldatei anlegen
{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}
'''1.''' Zuerst müssen alle Dateien von FHEM Tablet UI in das FHEM-Verzeichnis '''/opt/fhem/www''' kopiert werden. Das geht mit folgendem '''update'''-Befehl über die FHEM-Befehlszeile.
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>
:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]
'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code>
:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]
'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.
:<code>attr WEB longpoll websocket</code>
:bzw. bei Problemen mit ''websocket''
:<code>attr WEB longpoll 1</code>
:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]
'''4.''' Weil FTUI noch nichts anzuzeigen hat, wird die Datei '''/opt/fhem/www/tablet/index-example.html''' nach '''/opt/fhem/www/tablet/index.html''' kopiert.
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code>
:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]
'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.
Somit ist FHEM Tablet UI bereit zur Verwendung und kann durch Aufruf der URL '''<nowiki>http://<fhem-server>:8083/fhem/ftui</nowiki>''' oder den Link im FHEM-Menü geöffnet werden
== Update ==
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.
'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
'''2.''' Update der geänderten Dateien durch Eingabe von:
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
Eine weitere Option ist das Hinzufügen des FTUI-Git-Repositories zum allgemeinem Update-Vorgang von FHEM. Dabei wird dann bei einem FHEM-Update auch gleich FHEM Tablet UI aktualisiert, bzw. die Änderungen angezeigt.
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>
== Konfiguration ==
Das Tablet UI lässt sich über die META-Parameter konfigurieren. Diese Parameter sind in jeder '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>''' einzutragen. Ausgenommen davon sind Dateien, die als Template, Pagebutton-Zielseiten oder ähnliches eingebunden werden.
Die Parameter sind immer nach diesem Schema aufgebaut:
<meta name="[Parameter-Name]" content="[Parameter-Wert]">
===Verbindung zu FHEM===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird
|-
|longpoll||1||0, 1||
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)
'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.
|-
|longpoll_type||websocket||websocket, ajax, 0||
'''websocket''': Für die Aktualisierung der Daten wird das Websocket-Protokoll verwendet. Werden vom Browser keine Websockets unterstützt, gibt es einen automatischen Fallback auf Ajax.
'''ajax''': Ajax wird für die Aktualisierung verwendet.
'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.
|-
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.
|-
|longpoll_maxage||240||Integer||Kommen in diesem Zeitraum (Sekunden) keine Longpoll-Events bei FTUI an, wird die Verbindung als "disconnected" angesehen und ein neuer Verbindungsversuch wird gestartet.
|-
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet
|-
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein
|-
|fhemweb_url||/fhem/||Integer||URL zu FHEM. Wird benötigt wenn FTUI auf einem anderen als dem FHEM Server läuft oder nicht im Standard-Pfad installiert ist.
|}
===Funktionalität===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|debug||0||0 - 5||Log-Level
|-
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.
|-
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)
|-
|username||||String||Benutzername für eine Basic-Authentifierung *
|-
|password||||String||Passwort für eine Basic-Authentifizierung *
|}
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.
===Layout===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|gridster_disable||0||0, 1||Verschieben der Gridster-Elemente deaktivieren.
|-
| widget_margin||||Integer||Abstand der Gridsterelemente zueinander
|-
| widget_base_width||||Integer||Fixe Breite des Basis-Rasters (data-sizex=1)
|-
| widget_base_heigth||||Integer||Fixe Höhe des Basis-Rasters (data-sizey=1).
|-
| gridster_cols||||Integer||Fixe Anzahl an Spalten (Spaltengröße wird automatisch an Bildschirmauflösung angepasst)
|-
| gridster_rows||||Integer||Fixe Anzahl der Reihen (Reihengröße wird automatisch an Bildschirmauflösung angepasst)
|}
==Navigationsmethoden==
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}}
'''Unterschied zwischen Pagetab und Pagebutton:
'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite
[[FTUI_Widget_Pagetab]]
'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite
[[FTUI_Widget_Pagebutton]]
==Styling==
=== Farbe ===
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form oder als RGB-Wert anzugeben. Zum Beispiel: Hex: #A3CFA3 RBG: rgb(163, 207, 163). Knallige Farben wie #ff0000 für Rot oder #00ff00 für Grün sollten vermieden werden. Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben. Hilfreich bei der Suche nach den Farbwerten ist zum Beispiel der Color-Picker auf dieser Seite: http://www.colorpicker.com.
===CSS-Styles===
Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt [[#CSS-Klassen]] aufgeführt.
Soll das Aussehen des UI durch eigene CSS-Klassen oder durch Überschreiben der vorhandenen verändert werden, kann eine eigene CSS-Datei erstellt werden, die dann bei einem eventuellen Update von FTUI nicht überschrieben wird. Diese Datei muss den Dateinamen '''fhem-tablet-ui-user.css''' haben und im Ordner '''/fhem/tablet/css''' abgelegt werden. Sie wird dann beim Aufruf von FTUI automatisch mitgeladen.
=== CSS-Klassen ===
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|sheet}}{{FTUI Klasse|row}}{{FTUI Klasse|cell}}{{FTUI Klasse|cell-1-x}}{{FTUI Klasse|cell-x}}{{FTUI Klasse|left-align}}{{FTUI Klasse|right-align}}{{FTUI Klasse|bottom-align}}{{FTUI Klasse|top-align}}{{FTUI Klasse|center-align}}
|}
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|row/col-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}
|}
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|hbox/vbox-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|vbox}}{{FTUI Klasse|hbox}}{{FTUI Klasse|card}}{{FTUI Klasse|phone-width}}{{FTUI Klasse|full-height}}{{FTUI Klasse|full-width}}{{FTUI Klasse|grow-0}}{{FTUI Klasse|grow-1}}{{FTUI Klasse|grow-2}}{{FTUI Klasse|grow-x}}{{FTUI Klasse|items-top}}{{FTUI Klasse|items-center}}{{FTUI Klasse|items-bottom}}{{FTUI Klasse|items-space-between}}{{FTUI Klasse|items-space-around}}
|}
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|inline}}{{FTUI Klasse|newline}}{{FTUI Klasse|top-space}}{{FTUI Klasse|top-space-2x}}{{FTUI Klasse|top-space-3x}}{{FTUI Klasse|left-space}}{{FTUI Klasse|left-space-2x}}{{FTUI Klasse|left-space-3x}}{{FTUI Klasse|right-space}}{{FTUI Klasse|right-space-2x}}{{FTUI Klasse|right-space-3x}}{{FTUI Klasse|top-narrow}}{{FTUI Klasse|top-narrow-2x}}{{FTUI Klasse|top-narrow-10}}{{FTUI Klasse|left-narrow}}{{FTUI Klasse|left-narrow-2x}}{{FTUI Klasse|left-narrow-3x}}{{FTUI Klasse|right-narrow}}{{FTUI Klasse|right-narrow-2x}}{{FTUI Klasse|right-narrow-3x}}{{FTUI Klasse|centered}}{{FTUI Klasse|wider}}{{FTUI Klasse|narrow}}{{FTUI Klasse|fullsize}}{{FTUI Klasse|compressed}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|maxw40}}{{FTUI Klasse|doublebox-v}}{{FTUI Klasse|doublebox-h}}{{FTUI Klasse|triplebox-v}}
|}
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Vordergrundfarben
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|lightblue}}{{FTUI Klasse|orange}}{{FTUI Klasse|gray}}{{FTUI Klasse|lightgray}}{{FTUI Klasse|white}}{{FTUI Klasse|black}}{{FTUI Klasse|mint}}{{FTUI Klasse|yellow}}
|}
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Hintergrundfarben
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|bg-red}}{{FTUI Klasse|bg-green}}{{FTUI Klasse|bg-blue}}{{FTUI Klasse|bg-lightblue}}{{FTUI Klasse|bg-orange}}{{FTUI Klasse|bg-gray}}{{FTUI Klasse|bg-lightgray}}{{FTUI Klasse|bg-white}}{{FTUI Klasse|bg-black}}{{FTUI Klasse|bg-mint}}{{FTUI Klasse|bg-yellow}}
|}
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Rahmen
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|verticalLine}}{{FTUI Klasse|border-black}}{{FTUI Klasse|border-white}}{{FTUI Klasse|border-orange}}{{FTUI Klasse|border-red}}{{FTUI Klasse|border-green}}{{FTUI Klasse|border-mint}}{{FTUI Klasse|border-lightblue}}{{FTUI Klasse|border-blue}}{{FTUI Klasse|border-gray}}{{FTUI Klasse|border-yellow}}{{FTUI Klasse|border-lightgray}}
|}
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Größen
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|mini}}{{FTUI Klasse|tiny}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|tall}}{{FTUI Klasse|great}}{{FTUI Klasse|grande}}{{FTUI Klasse|gigantic}}
|}
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Schriftstil
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}
|}
{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Sonstiges
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|blank}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}{{FTUI Klasse|fail-shake}}{{FTUI Klasse|marquee}}{{FTUI Klasse|icon round}}{{FTUI Klasse|icon square}}{{FTUI Klasse|readonly}}{{FTUI Klasse|blink}}{{FTUI Klasse|rotate-90}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|autohide}}{{FTUI Klasse|notransmit}}{{FTUI Klasse|tab}}{{FTUI Klasse|FS20}}{{FTUI Klasse|value}}{{FTUI Klasse|novalue}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|percent}}{{FTUI Klasse|nocache}}{{FTUI Klasse|fade}}{{FTUI Klasse|rotate}}{{FTUI Klasse|nolabels}}{{FTUI Klasse|default}}{{FTUI Klasse|prefetch}}{{FTUI Klasse|circulate}}{{FTUI Klasse|valueonly}}{{FTUI Klasse|positiononly}}{{FTUI Klasse|lineIndicator}}{{FTUI Klasse|barIndicator}}{{FTUI Klasse|roundIndicator}}{{FTUI Klasse|dim-tick}}{{FTUI Klasse|dim-front}}{{FTUI Klasse|dim-back}}{{FTUI Klasse|hue-tick}}{{FTUI Klasse|hue-front}}{{FTUI Klasse|hue-back}}{{FTUI Klasse|warn}}{{FTUI Klasse|activate}}{{FTUI Klasse|labelright}}{{FTUI Klasse|interlock}}{{FTUI Klasse|keepopen}}{{FTUI Klasse|noshade}}
|}
== Widgets ==
===Allgemeine Attribute===
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:
{| class="wikitable"
|+allgemeine Attribute
|-
!align="right" |data-type
|Widget-Typ
|-
!align="right" |data-device
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)
|-
!align="right" |class
|CSS-Klassen für Aussehen und Formatierung des Widgets
|-
|}
{| class="wikitable"
|+Daten Empfangen
|-
!align="right" |data-get
|Reading Name
|-
!align="right" |data-get-on
|Wert für den Status on
|-
!align="right" |data-get-off
|Wert für den Status off
|-
|}
{| class="wikitable"
|+Daten Senden
|-
!align="right" |data-set
|Reading Name
|-
!align="right" |data-set-on
|Wert für den Status on
|-
!align="right" |data-set-off
|Wert für den Status off
|-
|}
Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.
=== Integrierte Widgets ===
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an
* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen
* [[FTUI Widget Circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices
* [[FTUI Widget Clock|clock]]: Stellt eine einfach Uhr zur Verfügung.
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert
* [[FTUI Widget Eventmonitor|eventmonitor]]:
* [[FTUI Widget Filelog|filelog]]:
* [[FTUI Widget Fullcalview|fullcalview]]:
* [[FTUI Widget Gds|gds]]:
* [[FTUI Widget Highchart|highchart]]:
* [[FTUI Widget Highchart3d|highchart3d]]:
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)
* [[FTUI Widget Html|html]]:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe.
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt.
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn
* [[FTUI Widget Label|label]]: Reading als Text anzeigen
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM
* [[FTUI Widget Loading|loading]]:
* [[FTUI Widget Medialist|medialist]]:
* [[FTUI Widget Meteogram|meteogram]]:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/multistatebutton multistatebutton]: Variante des push-Widgets das den set-Befehl abhängig vom gelesenen Status ändert.
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü.
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste
* [[FTUI_Widget_Push|push]]: Button, mir dem ein Befehl an FHEM gesendet werden kann.
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit.
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird
* [[FTUI Widget Slideout|slideout]]:
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler um einen Wert einzustellen
* [[FTUI Widget Spinner|spinner]]: Element um Werte durch Drücken auf Plus- und Minus- oder Höher-/Tiefer-Icons zu ändern
* [[FTUI Widget Svgplot|svgplot]]:
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen, zwischen verschiedenen Widgets zu wechseln
* [[FTUI Widget Switch|switch]]: Button um zwischen zwei Zuständen zu schalten (z.B. on / off)
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann
* [[FTUI Widget Tts|tts]]:
* [[FTUI Widget Uwz|uwz]]:
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes
* [[FTUI Widget Wakeup|wakeup]]:
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen
* [[FTUI Widget Weekprofile|weekprofile]]:
* [[FTUI Widget Wind_direction|Wind_direction]]: Anzeige der Windrichtung auf einer Windrose
===3rd Party Widgets===
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* [[FTUI Widget Screensaver|screensaver]]:
== Icon-Konfiguration ==
* Eingebaute Icons: Diese haben das ftui-Präfix. Zurzeit sind folgende verfügbar: ftui-window, ftui-door
* Mehr als 500 Icons von "http://fortawesome.github.io/Font-Awesome/icons" verfügbar. Einfach den Icon-Namen angeben (Präfix "fa-" nicht vergessen, Z.B. <code>data-icon="fa-volume-up"</code>
* Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.
<pre>
  <link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
  <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
</pre>
Diese font icons haben das Präfix 'fs-' bzw. 'oa-'.
Beispiel bei einem Schalter:
<pre><div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div></pre>
Und so als großes Symbol:
<pre>
<div data-type="symbol" data-device='dummy1'
        data-icon="oa-status_frost"
        data-on-color="#bb3232"
        data-get-on="on"
        data-get-off="!on"
        class="bigger">
</div>
</pre>
Die Icons kann man auch etwas dicker darstellen mit den Zusatz bold: <code>data-icon="oa-secur_locked bold"</code>
Die Namen der verfügbaren Icons findet man auch in den CSS Files (openautomation.css / fhemSVG.css)
== Spezial ==
Folgender Befehl setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
<pre>
    <div onclick="ftui.setFhemStatus('set dummy1 off')">All off!</div>
</pre>
== FAQ ==
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.
== Links ==
* [http://forum.fhem.de/index.php/topic,34233.0.html Forums-Beitrag]
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* [http://forum.fhem.de/index.php/topic,37378.0.html User-Demos]
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]
[[Kategorie:FHEM Tablet UI]]

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

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