FHEM Tablet UI
FHEM Tablet UI | |
---|---|
Zweck / Funktion | |
Oberfläche für FHEM | |
Allgemein | |
Typ | Inoffiziell |
Details | |
Dokumentation | Thema |
Support (Forum) | Frontends |
Modulname | n.a. |
Ersteller | setstate (Forum ) |
Wichtig: sofern vorhanden, gilt im Zweifel immer die (englische) Beschreibung in der commandref! |
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-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.
![](/w/images/thumb/b/bf/Tablet_ui.png/500px-Tablet_ui.png)
Todo: alle Widgets hier übernehmen, Übersetzung, weitere Beispiele aus dem Forum einfügen (evtl. mit Link!?) |
Getting started
Installation
- Im Befehls-Eingabefeld eingeben:
update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
- Im Befehls-Eingabefeld eingeben:
define TABLETUI HTTPSRV ftui/ ./www/tablet Tablet-UI
- Im Verzeichnis ./fhem/www/tablet die Datei index-example.html in index.html umbenennen oder eine neue index.html erzeugen und diese index.html wie nachfolgend beschrieben editieren.
Das UI ist über den Link "Tablet-UI" auf der FHEM-Hauptseite oder durch Direktaufruf der URL "http://<Fhem-url>:8083/fhem/tablet/index.html" zu erreichen.
Hinweise zu einer manuellen Installation und weitere Infos sind auf der Projektseite https://github.com/knowthelist/fhem-tablet-ui zu finden.
Update
- Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:
update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
- Update des UI durch Eingabe von:
update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
Über
update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
kann seit dem 24.12.2015 die URL zum normalen Updatebefehl von FHEM hinzugefügt werden. Mit einen "update check" sieht man dann gleich alle Updates aus beiden "Welten".
Konfiguration
META-Parameter
Das Tablet UI lässt sich über die META-Parameter konfigurieren. Mit den meisten META-Parametern kann das verhalten des UI beeinflusst werden. Diese Parameter befinden sich in der jeweiligen .html Datei (z.B. index.html) im Abschnitt <head>. Nachfolgend sind die verschiedenen Konfigurationsparameter aufgeführt. Die Parameter sind immer gleich aufgebaut.
<meta name="<META-Parameter>" content="<Wert>">
META-Parameter | Wert / Beispiel | Erklärung |
---|---|---|
longpoll | 1 oder 0 | Refresh sofort, alle 15 Minuten ein voller Refresh (shortpoll) statt alle 30 Sekunden ein voller Refresh. (bis V2.5) |
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) |
gridster_disable | 1 oder 0 | Drag&Drop der Gridster-Elemente auf der Seite deaktivieren. |
toast | 1 oder 0 | Toast messages deaktivieren |
fhemweb_url | http://meinFhemServer:8083/fhem | Wird benötigt wenn der Webserver des TabletUI nicht auf dem FHEM Server läuft.Default: "/fhem/" |
widget_margin | 1 bis 9999 | Abstände der Gridsterelemente verändern. |
widget_base_width | 1 bis 9999 | Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern. |
widget_base_height | 1 bis 9999 | Größe des Basis-Rasters (data-sizey=1/data-sizex=1) verändern. |
gridster_cols | 1 bis 9999 | Anzahl der Spalten. |
gridster_rows | 1 bis 9999 | Anzahl der Reihen. |
lang | de | Sprache der Visualisierung (derzeit nur DE vorhanden). |
Layout
Seit Version 2.5 werden die Gridster Kachel-Grössen, die Anzahl der Spalten und die Anzahl der Reihen dynamisch anhand der Bildschirmgrösse berechnet.
Möchte man die Anzahl der Spalten und Reihen fest vorgeben:
<meta name="gridster_cols" content="12"> <meta name="gridster_rows" content="9">
Mit folgendem Code kann man die Kachelgrössen fix definieren:
<meta name="widget_base_width" content="116"> <meta name="widget_base_height" content="131">
Zoom auf mobilen Endgeräten
Um automatische Skalierung und Zoom-Gesten auf mobilen Endgeräten zu unterbinden, kann folgender Meta-Tag im Kopf der Seite eingebunden werden:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
FHEM URL
Werden die FTUI Seiten von einem anderen Server als FHEM-HTTPSRV bereitgestellt, muss man die URL, unter der FHEM angesprochen wird, anpassen:
<meta name="fhemweb_url" content="/fhem/">
Styling
Farbe
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form oder als RGB-Wert anzugeben. Zum Beispiel: Hex: #A3CFA3 RBG: rgb(163, 207, 163). Knallige Farben wie #ff0000 für Rot oder #00ff00 für Grün sollten vermieden werden. Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben. Hilfreich bei der Suche nach den Farbwerten ist der color picker: http://www.w3schools.com/tags/ref_colorpicker.asp oder diese Quelle: https://flatuicolors.com
CSS-Styles
Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt CSS Class description oder Positioning aufgeführt. Es besteht auch die Möglichkeit eine eigene CSS Datei zu erstellen und darüber Änderungen am Aussehen des UI vorzunehmen. Die eigene CSS Datei würde bei einem Update unverändert bleiben. Daher ist abzuraten eine CSS Datei, die mit dem UI Update verteilt wird zu modifizieren. Die eigene CSS Datei ist unter /fhem/tablet/css mit dem Namen fhem-tablet-ui-user.css zu finden. Sollte diese nicht vorhanden sein kann die Datei manuell erstellt werden.
Wird keine eigene CSS-Datei verwendet empfiehlt es sich den folgenden Eintrag im <head> der jeweiligen .html Datei zu entfernen, bzw. in Kommentar zu setzen um Probleme beim Laden der Seite zu verhindern.
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
CSS-Klassen
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.
sheet/row/cell-Layout | |
---|---|
Klasse | Beschreibung |
sheet | Startet eine neue Tabelle |
row | Neue Reihe in der aktuellen Tabelle |
cell | Neue Zelle (bzw. Spalte) in der aktuellen Reihe |
cell-1-x | Neue Zelle in der aktuellen Reihe mit einer festen Breite von X (z.B.: cell-1-3 (33%), cell-1-4 (25%)) |
cell-x | Neue Zelle in der aktuellen Reihe mit einer festen Breite von X in Prozent (z.B.: cell-20 (20%), cell-40 (40%)) |
left-align | Inhalt der Zelle linksbündig |
right-align | Inhalt der Zelle rechtsbündig |
bottom-align | Inhalt der Zelle am unteren Rand |
top-align | Inhalt der Zelle am oberen Rand |
center-align | Inhalt der Zelle zentriert |
row/col-Layout | |
---|---|
Klasse | Beschreibung |
col | Neue Spalte in der aktuellen Zeile. Breite automatisch. |
col-1-x | Neue Spalte in der aktuellen Zeile. Feste Breite von X (z.B.: col-1-3 (33%), col-1-4 (25%)) |
col-x | Neue Spalte in der aktuellen Zeile. Feste Breite von X Prozent (z.B.: col-20 (20%), col-40 (40%)) |
hbox/vbox-Layout | |
---|---|
Klasse | Beschreibung |
vbox | Vertikale Box - Inhalte übereinander |
hbox | Horizontale Box - Inhalte nebeneinander |
card | Eine "Haupt"-Box |
phone-width | Breite darf nicht unter die Display-Breite des Gerätes sinken |
full-height | Inhalt geht über die gesamte Höhe des Browser-Fensters (100% viewport height) |
full-width | Inhalt geht über die gesamte Breite des Browser-Fensters (100% width) |
grow-0 | Box darf nicht wachsen |
grow-1 | Standardgröße der Box |
grow-2 | Box darf um das doppelte wachsen |
grow-x | Box darf um das X-fache wachsen |
items-top | Inhalte der Box werden oben ausgerichtet |
items-center | Inhalte der Box werden zentriert |
items-bottom | Inhalte der Box werden unten ausgerichtet |
items-space-between | Übriger Platz zwischen den Elementen in der Box |
items-space-around | Übriger Platz um die Elemente in der Box |
Generelle Klassen für die Positionierung | |
---|---|
Klasse | Beschreibung |
inline | Positioniert Elemente in einer Reihe, kein Zeilenumbruch |
newline | Positioniert Elemente jeweils in einer neuen Zeile, Zeilenumbruch |
top-space | 15px zusätzlicher Platz oben |
top-space-2x | 30px zusätzlicher Platz oben |
top-space-3x | 45px zusätzlicher Platz oben |
left-space | 15px zusätzlicher Platz links |
left-space-2x | 30px zusätzlicher Platz links |
left-space-3x | 45px zusätzlicher Platz links |
right-space | 15px zusätzlicher Platz rechts |
right-space-2x | 30px zusätzlicher Platz rechts |
right-space-3x | 45px zusätzlicher Platz rechts |
top-narrow | -15px näher am oberen Rand |
top-narrow-2x | -30px näher am oberen Rand |
top-narrow-10 | -10px näher am oberen Rand |
left-narrow | 15px weiter links |
left-narrow-2x | 30px weiter links |
left-narrow-3x | 45px weiter links |
right-narrow | 15px weiter rechts |
right-narrow-2x | 30px weiter rechts |
right-narrow-3x | 45px weiter rechts |
centered | Horizontal zentriert (muss im Eltern-<div> gesetzt werden) |
wider | 15px Abstand rund um das Element |
narrow | Weniger Abstand zum Element darüber |
fullsize | 100% Breite und Höhe |
compressed | Switches und Symbole bekommen Breite und Höhe von 1em statt 2em, damit weniger Platz rundum das Icon benötigt wird |
height-narrow | Widgets bekommen eine fest definierte Höhe und Zeilenhöhe, um sie leichter nebeneinander anordnen zu können |
w1x | Einfache fixe Breite |
w2x | Doppelte fixe Breite |
w3x | Dreifache fixe Breite |
maxw40 | Maximale Breite 40px |
doublebox-v | Container, in dem zwei kleine Elemente (z.B. Switches) übereinander platziert werden können |
doublebox-h | Container, in dem zwei kleine Elemente (z.B. Switches) nebeneinander platziert werden können |
triplebox-v | Container, in dem drei kleine Elemente (z.B. Switches) übereinander platziert werden können |
Vordergrundfarben | |
---|---|
Klasse | Beschreibung |
red | Vordergrundfarbe rot |
green | Vordergrundfarbe grün |
blue | Vordergrundfarbe blau |
lightblue | Vordergrundfarbe hellblau |
orange | Vordergrundfarbe orange |
gray | Vordergrundfarbe grau |
lightgray | Vordergrundfarbe hellgrau |
white | Vordergrundfarbe weiß |
black | Vordergrundfarbe schwarz |
mint | Vordergrundfarbe minzgrün |
yellow | Vordergrundfarbe gelb |
Hintergrundfarben | |
---|---|
Klasse | Beschreibung |
bg-red | Hintergrundfarbe rot |
bg-green | Hintergrundfarbe grün |
bg-blue | Hintergrundfarbe blau |
bg-lightblue | Hintergrundfarbe hellblau |
bg-orange | Hintergrundfarbe orange |
bg-gray | Hintergrundfarbe grau |
bg-lightgray | Hintergrundfarbe hellgrau |
bg-white | Hintergrundfarbe weiß |
bg-black | Hintergrundfarbe schwarz |
bg-mint | Hintergrundfarbe minzgrün |
bg-yellow | Hintergrundfarbe gelb |
Rahmen | |
---|---|
Klasse | Beschreibung |
verticalLine | Grauer Linie am rechten Rand des Elements |
border-black | Schwarzer Rahmen um das Element |
border-white | Weißer Rahmen um das Element |
border-orange | Oranger Rahmen um das Element |
border-red | Roter Rahmen um das Element |
border-green | Grüner Rahmen um das Element |
border-mint | Minzgrüner Rahmen um das Element |
border-lightblue | Hellblauer Rahmen um das Element |
border-blue | Blauer Rahmen um das Element |
border-gray | Grauer Rahmen um das Element |
border-yellow | Gelber Rahmen um das Element |
border-lightgray | Hellgrauer Rahmen um das Element |
Größen | |
---|---|
Klasse | Beschreibung |
mini | Setzt die Größe des Elementes auf 50% |
tiny | Setzt die Größe des Elementes auf 60% |
small | Setzt die Größe des Elementes auf 80% |
normal | Setzt die Größe des Elementes auf 100% |
large | Setzt die Größe des Elementes auf 125% |
big | Setzt die Größe des Elementes auf 150% |
bigger | Setzt die Größe des Elementes auf 200% |
tall | Setzt die Größe des Elementes auf 350% |
great | Setzt die Größe des Elementes auf 450% |
grande | Setzt die Größe des Elementes auf 600% |
gigantic | Setzt die Größe des Elementes auf 144px |
Schriftstil | |
---|---|
Klasse | Beschreibung |
thin | dünne Schrift |
bold | fette Schrift |
darker | Schriftfarbe grau |
truncate | Text wird - wenn nötig - abgeschnitten und mit "..." ergänzt |
Sonstiges | |
---|---|
Klasse | Beschreibung |
blank | Öffnet die angegebene URL in einem neuen Fenster |
transparent | Element erscheint komplett durchscheinend (somit nicht sichtbar; opacity: 0) |
half-transparent | Element ist halb durchscheinend (opacity: 0.5) |
blurry | Element wird in einen stark verschwommen, grauen Schatten umgewandelt |
shake | Element zittert stark für einen unendlichen Zeitraum. Kann z.B. für eine Alarmglocke verwendet werden. |
fail-shake | Element wackelt kurz hin und her und bleibt dann stehen |
marquee | Element wandert wiederholt von rechts nach links |
icon round | Erzeugt einen Hintergrund mit abgerundeten Kanten |
icon square | Erzeugt einen Hintergrund mit eckigen Kanten |
readonly | Manuelle Änderung des Device-Zustandes nicht möglich |
blink | Blinkende Animation für Label- oder Switch-Widget |
rotate-90 | Element (z.B. Bild) um 90° rotieren |
horizontal | Element horizontal ausrichten |
circleborder | Runder Rahmen um ein Label-Widget |
autohide | Versteckt das Element, wenn das angegebene Reading ungültig ist |
notransmit | Verhindert den Versand von Befehlen an FHEM |
tab | Fehler: Klasse nicht vorhanden |
FS20 | Konvertiert den Wertebereich 0...100 in das von FS20-Dimmern erwartete Format |
value | Zeigt ein Label am Element, das den aktuellen Wert enthält |
novalue | Zeigt den Wert nicht als Text, nur als Grafik an |
timestamp | Zeigt den Timestamp eines Readings statt dessen Inhalt |
percent | Zeigt nicht den ausgelesenen Wert an, sondern rechnet ihn in eine Prozentangabe zw. dem angegebenem Mindest- und Maximalwert um. |
nocache | Erzwingt das Neuladen eines Elementes (z.B. Bild, Seite, ...) bei jedem Aufruf statt der Zwischenspeicherung im Browser-Cache |
fade | Element wird aus-, das nächste in der Liste eingeblendet |
rotate | Vertikaler Rotationseffekt |
nolabels | Beschriftungen werden ausgeblendet |
default | Seite, die standardmäßig geladen wird bzw. Button, der standardmäßig "EIN" sein soll |
prefetch | Browser lädt den Inhalt im Hintergrund bevor er angezeigt wird um Ladezeit zu sparen |
circulate | Anzeige startet bei Überschreiten des "max"-Wertes wieder beim "min"-Wert |
valueonly | Zeigt den Wert in Textform statt eines Balkens |
positiononly | Stellt nur die aktuelle Position dar, nicht einen ganzen Balken vom Startpunkt bis zur aktuellen Position |
Widgets
Integrierte Widgets
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.
- agenda:
- button: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann.
- calview:
- chart: chart with similar capabilities as the FHEM plots
- checkbox:
- circlemenu: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
- classchanger:
- clicksound: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
- clock: Stellt eine einfach Uhr zur Verfügung.
- colorwheel:
- datetimepicker: Erstellt eine Auswahl für Datum/Uhrzeit
- departure: show timetable of public transport provider
- dimmer: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert
- eventmonitor:
- fullcalview:
- gds:
- highchart:
- highchart3d:
- homestatus: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)
- html:
- iframe: Widget zum Einbinden externer Inhalte in einem Iframe.
- image: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann.
- input: Erstellen eines Texteingabefeldes
- itunes_artwork: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
- javascript: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
- joinedlabel: verbindet mehrere Readings zu einem Feld
- klimatrend: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt.
- knob: Erstellt einen Statusbalken auf einer Kreisbahn
- kodinowplaying: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
- label: Reading als Text anzeigen
- level: vertical/horizontal bar to show values between min/max value
- link: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM
- loading:
- medialist:
- meteogram:
- mpdnowplaying: zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
- multistatebutton: Variante des push-Widgets das den set-Befehl abhängig vom gelesenen Status ändert.
- notify: Blendet ein Hinweisfenster im Browser ein
- pagebutton: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation
- pagetab: Element to smoothly exchange the whole page with another page
- playstream: Abspielen eines Webradio-Streams per Button
- popup: a popup dialog which open on click on another widget
- progress: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste
- push: Button, mir dem ein Befehl an FHEM gesendet werden kann.
- range: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen
- readingsgroup: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde
- reload: auslösen eine Pagereloads
- rotor: Animiertes Umschalten von zwei oder mehr Widgets an einer Position
- screensaver:
- select: Combobox, die eine Liste an Werten zur Auswahl anzeigt
- settimer: zum anzeigen und einstellen einer Uhrzeit.
- simplechart: simple XY line chart for one value (reads directly from FHEM log file)
- slideout:
- slider: vertical slider to select between min/max value
- spinner:
- svgplot:
- swiper:
- switch: Toggle any command to FHEM (e.g. on / off)
- symbol: State als Symbol darstellen (z.B. Fenster offen)
- thermostat: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann
- tts:
- uwz:
- volume: dial to set a single value (e.g. 0-60)
- wakeup:
- wdtimer:
- weather: Wettersymbol anzeigen
- weekprofile:
- Wind_direction: Anzeige der Windrichtung auf einer Windrose
3rd Party Widgets
- weekdaytimer: Visualisierung des WeekdayTimer Modul
Attribute
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:
data-type | Widget-Typ |
---|---|
data-device | FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste) |
class | CSS-Klassen für Aussehen und Formatierung des Widgets |
data-get | Reading Name |
---|---|
data-get-on | Wert für den Status on |
data-get-off | Wert für den Status off |
data-set | Reading Name |
---|---|
data-set-on | Wert für den Status on |
data-set-off | Wert für den Status off |
Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.
Attribute einiger Widgets
HTML Attribut | Beschreibung | Default Wert |
---|---|---|
data-item-diameter | diameter of the circle | 52 |
data-circle-radius | radius of each item, in pixel | 70 |
data-direction | position of the items in relation to the center | 'full' |
data-close-after | closing time of the circle-menu | (item-count + 1s) or a minimum of 4s |
class | keepopen |
Optionen für data-direction: top | right | bottom | left | top-right | top-left | bottom-right | bottom-left | top-half | right-half | bottom-half | left-half | full | vertical | horizontal
Departure
HTML Attribut | Beschreibung | Default Wert |
---|---|---|
data-type | widget-type; must be departure | |
data-device | name of the device to get data from | |
data-get | name of the reading of device to get data from | |
data-icon | define icon for widget | |
data-interval | interval to reload automatically | |
class | choose style of widget; see example |
Pagetab
HTML Attribut | Beschreibung | Default Wert |
---|---|---|
data-url | URL of the new page to show | |
data-icon | name of the font-awesome icon | 'fa-power-off' |
data-background-icon | name of the font-awesome icon for background | |
data-on-background-color | color of ON state | '#aa6900' |
data-off-background-color | color of OFF state | '#505050' |
data-on-color | color of ON state | '#aa6900' |
data-off-color | color of Off state | '#505050' |
data-get-on | array of status to assign a special icon-list from data-icons | |
data-icons | array of icons related to the a data-get-on array | |
class | warn, activate (as additionals for data-icons) |
Popup
HTML Attribut | Beschreibung | Default Wert |
---|---|---|
data-get | name of the reading where to get the alert value from | 'STATE' |
data-get-on | value which trigger to open the dialog | 'on' |
data-off | value which trigger to close the dialog | 'off' |
data-width | fixe size for width (in % or px) | |
data-height | fixe size for height (in % or px) |
Symbol
Mit dem SYMBOL Widget kann der STATUS eines Device dargestellt werden. Dabei kann das angezeigte Symbol und dessen Farbe bestimmt werden. Wie bei anderen Widgets kann das Symbol und die Farbe vom State abhängig konfiguriert werden. Das SYMBOL-Widget dient nur zur Anzeige eines STATUS, es besitzt kein Möglichkeit der Interaktion.
Neben den allgemeine Attribute besitzt das SYMBOL-Widget die nachfolgenden Attribute.
dual state notation
HTML Attribut | Beschreibung | Default Wert |
---|---|---|
data-get | Name des Reading, was gelesen werden soll | 'STATE' |
Einstellung bei zwei Werten
HTML-Attribut | Beschreibung | Default-Wert |
---|---|---|
data-get-on | Wert für on | 'open' |
data-get-off | Wert für off | 'closed' |
data-get-warn | ?????? | '-1' |
data-icon | Name des Symbols | 'ftui-window' |
data-background-icon | Hintergrundsymbol | leer |
data-on-background-color | Farbe für ON-Zustand. | '#aa6900' |
data-off-background-color | Farbe für OFF-Zustand. | '#505050' |
data-on-color | Farbe für ON-Zustand. | '#aa6900' |
data-off-color | Farbe für OFF-Zustand. | '#505050' |
Einstellung bei mehreren Werten
HTML Attribut | Beschreibung | Default Wert |
---|---|---|
data-states | Array für states. | |
data-icons | Array mit Icons zu data-states Array | |
data-background-icons | Array mit Icons zu data-states Array | |
data-colors | Array mit Farben zu data-states aArray | |
data-background-colors | Array mit Hintergrundfarben zu data-states array |
data-get-on,data-get-off and data-states accept also RegEx values. The value for one icon can also contain an additional animatation CSS name, e.g. "fa-exclamation-triangle fa-blink" for a blinking Symbol
Volume
HTML Attribut | Beschreibung | Default Wert |
---|---|---|
data-get | name of the reading to get from FHEM | 'STATE' |
data-set | command to send to FHEM (set <device> <command> <value>) | |
data-cmd | name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger) | 'set' |
data-min | minimal value to set | 0 |
data-max | maximal value to set | 70 |
data-get-value | RegEx to retrieve the value or part number of the space separated input to get the value | '-1': all of the input |
data-set-value | Format of the value to send to FHEM | '$v': the value only |
data-tickstep | distance between ticks | 20 |
data-unit | add a unit after the desired value. | |
class | mini, small, big, bigger, hue-tick, hue-front, hue-back, dim-tick ,dim-front, dim-back, readonly |
Link zu einem Beispiel (fehlt noch)
Widgets -- Beispiele
Cover a lot of other button behind one single button
<div class="left"> <div data-type="circlemenu" class="cell circlemenu"> <ul> <li><div data-type="push" data-icon="fa-wrench"></div></li> <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level -6" data-icon="">-6</div></li> <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level -2" data-icon="">-2</div></li> <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level 0" data-icon="">0</div></li> <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +3" data-icon="">2</div></li> <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +9" data-icon="">9</div></li> <li><div data-type="push" data-device="AvReceiver" data-set="remoteControl subwoofer-temporary-level +C" data-icon="">12</div></li> </ul> </div> <div data-type="label" class="cell">Woofer</div> </div>
Departure Widget Beispiel
Minimalvariante
<div data-type="departure" data-device="vvs" data-get="SSB-Zentrum" data-icon="fa-train" data-interval="0"> </div>
Optionen für class
class="" : default Style (grau) class="DVB" anderer Style (gelb) class="VVO" : anderer Style (blau) class="alternate" : alternierender Hintergrund class="deptime" : Abfahrtszeit statt Minuten
weiteres Beispiel
<div data-type="departure" data-device="vvs" data-get="SSB-Zentrum" data-icon="fa-train" data-interval="0" class="DVB deptime alternate"> </div>
Example for a tab menu to switch smoothly between multiple pages. Multiple pagetabs in a template file: menu.html
<html> <body> <header>MENU</header> <div class="cell"> <div data-type="pagetab" data-url="index.html" data-icon="fa-home" class="cell"></div> <div data-type="pagetab" data-url="index_2.html" data-icon="fa-sliders" class="cell"></div> <div data-type="pagetab" data-url="index_3.html" data-icon="fa-music" class="cell"></div> <div data-type="pagetab" data-url="index_4.html" data-icon="fa-hotel" class="cell"></div> <div data-type="pagetab" data-url="index_5.html" data-icon="fa-music" class="cell"></div> <div data-type="pagetab" data-url="index_6.html" data-icon="fa-database" class="cell"></div> <div data-type="pagetab" data-url="index_7.html" data-icon="fa-fax" class="cell"></div> </div> </body> </html>
Example for a tristate icon
<div data-type="symbol" data-device="dummy1" data-get-on='["wert1","wert2","wert3"]' data-icons='["fa-arrow-up","fa-user","fa-arrow-down"]' data-on-colors='["SeaGreen","SlateBlue","IndianRed"]' class="cell big"> </div>
Example for a tristate icon with blink and spin animation
<div data-type="symbol" data-device="dummy1" data-icons='["fa-exclamation-triangle fa-blink","fa-exclamation-circle","fa-cog fa-spin"]' data-on-colors='["Crimson","GoldenRod","SeaGreen"]' data-get-on='["Wert1","Wert2","Wert3"]' > </div>
Example for a battery level control with RegEx
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel" data-icons='["oa-measure_battery_100","oa-measure_battery_75","oa-measure_battery_50","oa-measure_battery_25","oa-measure_battery_0"]' data-get-on='["3\\.[0-9]","2\\.[789]","2\\.[456]","2\\.[123]","((2\\.0)|([01]\\.[0-9]))"]' data-on-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'> </div>
Example for a battery level control with greater-equal compare and 90° rotated symbols
<div data-type="symbol" data-device="BadHeizung" data-get="batteryLevel" data-icons='["oa-measure_battery_0 fa-rotate-90","oa-measure_battery_25 fa-rotate-90","oa-measure_battery_50 fa-rotate-90","oa-measure_battery_75 fa-rotate-90","oa-measure_battery_0 fa-rotate-90"]' data-get-on='["0","2","2.4","2.7","3.0"]' data-on-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'> </div>
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.
data-icon="fa-volume-up"
- Es stehen auch Openautomation Font-Files zur Verfügung. Wer sie nutzen möchte, muss folgende Stylesheets in die index.html hinzufügen.
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" /> <link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
Diese font icons haben das Präfix 'fs-' bzw. 'oa-'.
Beispiel bei einem Schalter:
<div data-type="switch" data-device='dummy1' data-icon="oa-secur_locked"></div>
Und so als großes Symbol:
<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>
Die Icons kann man auch etwas dicker darstellen mit den Zusatz bold: data-icon="oa-secur_locked bold"
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 (set dummy1 off
):
<div onclick="ftui.setFhemStatus('set dummy1 off')">All off!</div>
FAQ
Häufig gestellte Fragen zum FHEM Tablet UI sind in der FHEM Tablet UI FAQ zusammengestellt.