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
|
| AusklappenSchriftstil
|
| Klasse |
Beschreibung
|
| thin |
dünne Schrift
|
| bold |
fette Schrift
|
| darker |
Schriftfarbe grau
|
| truncate |
Text wird - wenn nötig - abgeschnitten und mit "..." ergänzt
|
| AusklappenSonstiges
|
| 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
|
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:
- departure: show timetable of public transport provider
- dimmer: toogle button with a setter for on value
- eventmonitor:
- fullcalview:
- gds:
- highchart:
- highchart3d:
- homestatus: selector for 4 states (1=home, 2=night, 3=away, 4=holiday)
- 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:
- 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:
- pagebutton:
- 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:
- readingsgroup: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde
- reload: auslösen eine Pagereloads
- rotor: 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: dial for heater thermostates to set desired value and show current value
- 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
Attribute
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:
allgemeine Attribute
| 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
|
Daten Empfangen
| data-get
|
Reading Name
|
| data-get-on
|
Wert für den Status on
|
| data-get-off
|
Wert für den Status off
|
Daten Senden
| 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
Link zu einem Beispiel
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
|
|
Link zu einem Beispiel
Dimmer
| HTML Attribut
|
Beschreibung
|
Default Wert
|
| data-get
|
name of the reading to get from FHEM
|
'STATE'
|
| data-get-on
|
value for ON status to get
|
'on'
|
| data-get-off
|
value for OFF status to get
|
'off'
|
| data-set
|
(<command> <device> <reading> <value>)
|
|
| data-set-on
|
value for ON status to set
|
value of data-get-on
|
| data-set-off
|
value for OFF status to set
|
value of data-get-off
|
| data-cmd
|
name of the command (<command> <device> <value>) (e.g. setstate, set, setreading, trigger)
|
'set'
|
| data-dim
|
name of the reading responsible for dim (<command> <device> <reading> <value>)
|
value of data-get-on
|
| data-icon
|
name of the font-awesome icon
|
fa-lightbulb-o
|
Link zu einem Beispiel
Homestatus
| 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-get-on
|
array of states using for get
|
['1','2','3','4']
|
| data-set-on
|
array of states using for set.
|
value of data-get-on
|
| data-alias
|
array of fix names to show only in the UI as an alias to the real states
|
|
| data-icons
|
array of icons related to the data-get-on array
|
|
| data-version
|
name of the status model e.g. 'residents','roommate','guest'
|
(default NULL)
|
The default version has 4 states: '1','2','3','4' The default aliases are 'Home','Night','Away','Holiday'; data-version='residents' or 'roommate' or 'guest' has 5 states ('home','asleep','absent','gone','gotosleep') They have these aliases 'Home','Night','Away','Holiday','Retire'
Link zu einem Beispiel
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)
|
|
Link zu einem Beispiel
Playstream
| HTML Attribut
|
Beschreibung
|
Default Wert
|
| data-url
|
URL des Radio-Streams
|
| data-get
|
name of the reading to get the control state from FHEM
|
'STATE'
|
| data-get-on
|
value for PLAY status to get.
|
'on'
|
| data-get-off
|
value for STOP status to get.
|
'off'
|
| data-volume
|
name of the reading to get the volume value (0-100)
|
volume
|
Link zu einem Beispiel
| 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)
|
|
Link zu einem Beispiel
Rotor
| HTML Attribut
|
Beschreibung
|
Default Wert
|
| data-delay
|
time in millisecondes to wait until next list item get shown
|
3500
|
| class
|
fade, rotate
|
|
Ohne Angabe von class erfolgt keine Animation.
Link zu einem Beispiel
Symbol
Mit dem SYMBOL Widget kann der STATUS eines Device dargestellt werden. Dabei kann das angezeigte Symbol und dessen Farbe bestimmt werden. Wie bei anderen Widgets kann das Symbol und die Farbe vom State abhängig konfiguriert werden. Das SYMBOL-Widget dient nur zur Anzeige eines STATUS, es besitzt kein Möglichkeit der Interaktion.
Neben den allgemeine Attribute besitzt das SYMBOL-Widget die nachfolgenden Attribute.
dual state notation
| 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
Link zu einem Beispiel
Thermostat
| HTML Attribut
|
Beschreibung
|
Default Wert
|
| data-get
|
name of the reading to get from FHEM
|
'desired-temp'
|
| data-temp
|
reading for measured temperature of thermostates
|
'measured-temp'
|
| data-set
|
command to send to FHEM (set <device> <command> <value>)
|
'desired-temp'
|
| data-valve
|
reading for valve position of thermostates
|
|
| data-min
|
minimal value to set
|
10
|
| data-max
|
maximal value to set
|
30
|
| data-minColor
|
Farbe des Keises für Min
|
#4477FF
|
| data-maxColor
|
Farbe des Kreises für Max, zwischen Min und Max wird linear interpoliert
|
#FF0000
|
| data-step
|
step size for value adjustment e.g. 0.5
|
1
|
| data-bgColor
|
Die Farbe der Kreises zwischen den ticks
|
'transparent'
|
| data-fgColor
|
Die Farbe der zahl im Kreismittelpunkt
|
#bbbbbb
|
| data-tkColor
|
Die Farbe der ticks
|
#696969
|
| data-angleOffset
|
Start der ticks im Kreis (in Winkelgraden, 0 = oben)
|
-120
|
| data-angleArc
|
Bereich der ticks im Kreis (in Winkelgraden)
|
240
|
| class
|
big, readonly
|
|
Link zu einem Beispiel
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 class="menu">
<li><div data-type="push" data-icon="fa-wrench"></div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -6"
data-icon="">-6</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level -2"
data-icon="">-2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level 0"
data-icon="">0</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +3"
data-icon="">2</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +9"
data-icon="">9</div></li>
<li><div data-type="push" data-device="AvReceiver"
data-set="remoteControl subwoofer-temporary-level +C"
data-icon="">12</div></li>
</ul>
</div>
<div data-type="label" class="cell">Woofer</div>
</div>
Departure
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>
Dimmer
Dimmer Widget Beispiel für Philips Hue
Minimalvariante
<div data-type="dimmer" data-device="HUEDevice1"
data-get-on="!off" data-get-off="off"
data-set="pct"></div>
Mit Anzeige der Dimstufe
<div data-type="dimmer" data-device="HUEDevice1"
data-get="onoff"
data-get-on="1" data-get-off="0"
data-set=""
data-set-on="on" data-set-off="off"
data-dim="pct">
</div>
Dimmer Widget für MilightDevice
<div data-type="dimmer"
data-device="SonstWas"
data-get="brightness"
data-get-off="0"
data-get-on="[1-9][0-9]*"
data-set-on="on"
data-set-off="off"
data-dim="dim"
data-min="0"
data-max="100"
></div>
Homestatus
Beispiel rechts im Bild:
<div data-type="homestatus" data-device='dummy1'
data-get-on='["1","2","3","4"]'
data-alias='["Home","Night","Away","Holiday"]'
data-icons='["fa-home","fa-bed","fa-car","fa-suitcase"]'>
</div>
Beispiel links im Bild:
<div data-type="homestatus" data-device='dummy1'
data-get-on='["home","asleep","absent","gone","gotosleep"]'
data-alias='["Home","Night","Away","Holiday","Retire"]'
data-icons='["fa-fire","fa-film","fa-plus","fa-car","fa-tint"]'
data-version='residents'>
</div>
Datei:Homestatus tabletUI.png
Pagetab
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>
Playstream
Erzeugt einen Knopf zum direkten Abspielen eines Webradio-Streams.
<div data-type="playstream" data-url="http://radioeins.de/stream"></div>
<div data-type="label" class="darker">Radio eins</div>
Rotor
Example for a rotor widget, which switches between to days of weather forecast
<div data-type="rotor" class="fade">
<ul>
<li>
<div data-type="label" class="darker">Heute</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
<li>
<div data-type="label" class="darker">Morgen</div>
<div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay" class="big"></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay" class=""></div>
<div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax" data-unit="%B0C%0A" class="large"></div>
</li>
</ul>
</div>
Symbol
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>
Thermostat
Configure as data-device='...' that item which delivers temp and desired-temp as reading.
Default parameters are:
data-get="desired-temp" data-temp="measured-temp" data-set="desired-temp"
Therefor for HomaMatic HM-CC-RT-DN this is sufficient.
<div data-type="thermostat" data-device='KH_Clima' class="cell"></div>
The long format looks like this:
<div data-type="thermostat"
data-device="KH_Clima"
data-valve="ValvePosition"
data-get="desired-temp"
data-temp="measured-temp"
class="cell">
</div>
Example for MAX!:
<div data-type="thermostat" data-device="HZ_Tuer"
data-valve="valveposition"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature"
class="cell">
</div>
The wigets will show the valve value only in case of a valid data-valve attribute. The default for data-valve ist null. That means, a empty data-valve attribute hides the valve label for the widget.
Datei:Thermostat.png
Icon-Konfiguration
- Eingebaute Icons: Diese haben das ftui-Präfix. Zurzeit sind folgende verfügbar: ftui-window, ftui-door
- 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.
Links
| 
