FHEMWiki - Benutzerbeiträge [de]

FTUI Widget Chart

2021-02-10T09:32:10Z

FTUI Widget Maps

2020-10-09T05:27:31Z

Eki:

Das [[{{PAGENAME}}|Map Widget]] ist ein Widget zur Darstellung von Karten mit Informationen aus FHEM oder auch anderern Quellen (z.B. GEOJSON Files). Das Modul wird aktuell (noch) nicht mit der normalen FTUI Installation verteilt und kann unter [https://forum.fhem.de/index.php/topic,91781.0.html] herunter geladen werden.

Folgende Dinge werden berücksichtigt:<br>
FHEM Devices, welche eine Koordinate (longitude/latitude) als Reading/Attribut/Internal haben (z. B. Anwesenheiten auf Basis von ROOMMATE/RESIDENT/GUEST, oder das global Device als Standort von FHEM), werden als Punkt mit anpassbarem Aussehen an der entsprechenden Position auf der Karte dargestellt.<br>
Darüber hinaus ist es möglich, Fahrwege mit Fahrzeiten auf Basis des FHEM TRAFFIC Moduls als Pfade auf die Karte zu legen. Hierbei können die Routen eingefärbt als Linien dargestellt werden und entsprechend per InfoWindow dann Details (wie z.B. die normale Fahrzeit bzw. die Fahrzeit bei aktuellem Verkehr) dazu dargestellt werden.<br>
Existiert ein Reading "polygon" welches eine Liste von space separierten Koordinatenpaaren (X und Y Koordinaten jedes Paares durch ',' getrennt) als Wert enthält (z.B. mit "setreading <device> polygon 10.2488713,49.773172 10.2626042,49.7711765 10.278397,49.7682939 10.2986531,49.7671851" erzeugbar) so wird eine Linie auf der Karte mit den entsprechenden Koordinatenpunkten gezeichnet.<br>
Die flexibelste Lösung ist die Verwendung von GEOJSON Files (müssen irgendwo per web erreichbar abgelegt werden). Diese Files können verschiedene geographische Objekte enthalten, die dann auf der Karte dargestellt werden. Das Aussehen und Verhalten der im GEOJSON File enthaltenen Objekte kann über den Parameter data-feature_style beeinflusst werden.

Die Karte kann zusätzlich eine Darstellung der Verkehrslage als zuschaltbaren Layer enthalten (siehe unten).

In der aktuellen Version (ab Oktober 2020) können auch Verkehrsüberwachungskameras des FHEM Moduls Blitzer (98_Blitzer.pm) dargestellt werden. Dazu muss das attribut data-blitzer auf ein gültiges Blitzer Device zeigen.
<table><tr>
<td>[[Datei:2018-03-05_11h55_51.png|thumb|none|Beispiel 1 (mit Google)]]</td>
<td>[[Datei:FTUI_Maps_2.png|thumb|none|Beispiel 2 (mit Google)]]</td>
<td>[[Datei:FTUI_Maps_3.png|thumb|none|Beispiel 3 (mit OSM)]]</td></tr>
</table>
==Voraussetzungen==
Die Darstellung im Widget basiert entweder auf dem Google Maps API oder auf Leaflet und der Nutzung von OpenStreetMap als Kartenbasis. Wenn Google Maps verwendet wird, muss zunächst ein API Key von Google beschafft werden. Wie man diesen beschafft, kann z.B. unter [https://developers.google.com/maps/api-key-best-practices] oder [[TRAFFIC]] nachgelesen werden. Dieser Key muss dann im HTML File (am Besten im Header) als meta Tag eingetragen werden.
<syntaxhighlight lang="html">
<meta name="GoogleMapsApiKey" content="<Key>">
</syntaxhighlight>
Wird die Leaflet/OSM Variante verwendet (data-map_type="OSM"), so ist zunächst kein Schlüssel für die Kartendarstellung notwendig. Will man allerdings eine Route oder die Verkehrslage darstellen, so wird ein Map API Key von TomTom benötigt (bekommt man für private Zwecke auch ohne Hinterlegung einer Kreditkarte). Hinweise wie man den besorgt, siehe unter [https://developer.tomtom.com]. Auch dieser Key muss als meta Tag in das HTML File.

<syntaxhighlight lang="html">
<meta name="TomTomApiKey" content="<Key>">
</syntaxhighlight>

Darüber hinaus muss in diesem Fall auch noch ein Plugin von TomTom herunter geladen und in das lib/ Verzeichnis abgelegt werden. Dazu das zip File von [https://api.tomtom.com/maps-sdk-js/4.36.2/jssdk-4.36.2-distribution.zip] herunter laden und alle darin enthaltenen Dateien unter einem neuen Verzeichnis lib/tomtom/ ablegen.

<gallery>
</gallery>

==Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-type'''||Type des Widgets muss auf "maps" gesetzt werden||||
|-
|'''data-device'''||FHEM-Device, dessen Readings dargestellt werden sollen||||
|-
|'''data-blitzer'''
|FHEM Blitzer Device, dessen Verkehrsüberwachungskamera Daten dargestellt werden sollen. Das Attribut createAllReadings muss hierzu im FHEM Blitzer device auf 1 gesetzt werden.
|
|
|-
|'''data-alias'''||Legt fest, aus welchem Reading der Name für die Anzeige genommen werden soll||alias||
|-
|'''data-latitude'''||Legt fest, aus welchem Reading die geograpfische Breite genommen werden soll||latitude||
|-
|'''data-longitude'''||Legt fest, aus welchem Reading die geograpfische Länge genommen werden soll||longitude||
|-
|'''data-language'''||Kann 'de' oder 'en' sein und stellt die Sprache für die Ausgabe in den Info Windows ein||de||
|-
|'''data-size'''||Gibt die Größe des Kartenausschnittes an (als String mit '<Breite>,<Höhe>'), kann auch weggelassen werden, wenn das Device ein Reading GoogleMapsSize besitzt (z. B. TRAFFIC Device), dann wird der Wert aus dem GoogleMapsSize Reading genommen oder, falls das auch nicht vorhanden ist, wird die Größe aus der Ausdehnung der Route(n) ermittelt.||auto||
|-
|'''data-center'''||Gibt das Zentrum der Karte an (als String mit '<Latitude>,<Longitude>'), kann auch weggelassen werden, wenn das Device ein Reading GoogleMapsCenter besitzt (z. B. TRAFFIC Device), dann wird der Wert aus GoogleMapsCenter Reading genommen oder, falls das auch nicht vorhanden ist, wird das Zentrum aus der Ausdehnung der Route(n) ermittelt.||auto||
|-
|'''data-zoom'''||Gibt den Zoomwert der Karte an (als integer Wert, siehe Google Maps API), kann auch weggelassen werden, wenn das Device ein Reading GoogleMapsZoom besitzt (z. B. TRAFFIC Device), dann wird der Wert aus dem GoogleMapsZoom Reading genommen oder, falls das auch nicht vorhanden ist, wird der Zoom Wert aus der Ausdehnung der Route(n) ermittelt.||auto||
|-
|'''data-mapgroup'''||Legt fest, ob jedes Widget in eine eigene Karte zeichnen soll oder ob mehrer Informationen in einer Karte landen. Alle Widgets vom Typ 'maps' mit dem gleichen wert für data-mapgroup zeichnen in ein und die selbe Karte||0||
|-
|'''data-travel_mode'''||Gibt an, wie die Route berechnet werden soll. Es gibt die Möglichkeiten 'DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT' (Details siehe TRAFFIC Modul von FHEM oder Google Maps API für den 'Directions' Service), kann auch weggelassen werden, wenn es sich um ein TRAFFIC Device handelt, dann wird der Wert aus dem trafficMode Reading genommen.||DRIVING||
|-
|'''data-traffic'''||Gibt an, ob die Verkehrslage auf der Karte dargestellt werden soll||false||
|-
|'''data-showdetails'''||Gibt an ob per Default die Info Windows eingeblendet werden sollen||false||
|-
|'''data-stroke'''||Gibt an, wie die Fahrstrecken oder Symbole dargestellt werden sollen. Besteht aus maximal 6 Werten (Farbe Hinweg, Breite Hinweg, Durchsichtigkeit Hinweg, Farbe Rückweg, Breite Rückweg, Durchsichtigkeit Rückweg), die Farbe wird per #rrggbb angegeben, die Breite in Pixel und die Durchsichtigkeit als Prozentwert zwischen 0% und 100%, siehe auch Details zum Modul TRAFFIC. Die Symbole zur Route werden in der doppelten angegebenen Breite des Pfades dargestellt||#ffffff,7,50,#ffffff,7,50||
|-
|'''data-icon'''||Hiermit kann ein Icon angegeben werden, welches statt des standardmäßigen Pfeils verwendet werden soll, um die Position zu markieren. Kann eine URL auf eine icon Datei, die relativ zum Verzeichnis www/images/ liegt sein||||'default/HOME_Status.1.png'
|-
|'''data-label'''||Will man statt eines Icons ein FontAwesome/Openautomation/fhemSVG Font-Icon (z.B. 'fa-home', 'oa-weather_winter', 'fs-usb_stick') verwenden, wird das hiermit angegeben (es kann auch icon und Font-Icon zusammen verwendet werden (z.B. ein Kreis als Icon und darin ein Font-Icon.||||fa-home
|-
|'''data-nightmode'''||legt fest, ob die Karte im Nachtmodus (dunkel) dargestellt werden soll (geht bisher noch nicht mit OSM)||false||
|-
|'''data-style'''||Möglichkeit zum Setzen eines Styles entsprechend der Map API Options (siehe Dokumentation zu den Map APIs von Google und Leaflet)||||
|-
|'''data-geojson'''||gibt den Namen eines Files auf dem Server an, in dem Daten zur Darstellung im GEOJSON Format (siehe [www.geojson.org]) abgelegt sind. Die Angabe ist relativ zum Verzeichnis /opt/fhem/ftui/tablet der Standardinstallation.||||"data/firedata.geojson" für das unten genannte Beispiel
|-
|'''data-feature_style'''||Legt fest, wie die GEOJSON Daten dargestllt werden bzw. was passiert, wenn man auf einzelne Features klickt bzw. sie mit der Maus überstreicht (Details siehe unten unter <>||||
|}

==Details zu GEOJSON Files==
Die Datei muss auf dem Server (FHEM) liegen (also typischerweise im www/tablet Verzeichnis). Ich habe z.B. unter www/tablet ein Unterverzeichnis data erstellt und geben data-geojson="data/file.geojson" an. In dem geojson file können beliebige Objekte definiert werden, das Format ist unter [www.geojson.org] nachzulesen
Über den Parameter data-feature_style kann man recht flexibel festlegen, wie die Objekte dargestellt werden sollen. Das Ganze ist ein js Objekt, wird also in '{}' eingeschlossen. Innerhalb des Objektes legen 3 Objekteigenschaften fest, wie die Darstellung aussehen soll.

Die Eigenschaft "popup_properties_click" hat als Wert eine Leerzeichen getrennte Liste von Expressions, welche, falls sie auf Properties der Objekte im geojson File zutreffen, dazu führen, dass beim Klick auf die angezeigten Objekte ein Info Window geöffnet wird, welches die entsprechenden geojson Objekteigenschaften anzeigt.

Die Eigenschaft "popup_properties_move" macht genau das Gleiche, allerdings sorgen die dort angegebenen Expressions dafür dass die dazu passenden geojson Objekte per Popup bei Überfahren mit der Maus und nicht bei Klick angezeigt werden und beim Verlassen mit der Maus dann auch wieder automatisch verschwinden.

Die Eigenschaft "display_styles" legt genau fest, wie die verschiedenen geojson Objekte dargestellt werden sollen. Der Wert dieser Eigenschaft ist wiederum ein Objekt. Als Eigenschaftsname wird ein Verweis auf ein bestimmtes Objekt im geojson File verwendet. Der Verweis kann entweder eine Eigenschaft eines Objekts im geojson File sein oder eine Kombination aus Eigenschaft und Wert (also nicht alle Objekte des gleichen Typs sondern nur die, die eine auch den passenden Wert haben). Dahinter wird dann der zu verwendete Stil als weiteres Objekt angegeben, welches aus einer Menge aus Property:Value pairs besteht, bei dem die Property die Displayeigenschaft (also z.B. Farbe) und der Wert dann den dazugehörigen Wert (also z.B. rot) festlegt. Alles was nicht explizit hier festgelegt wird, wird aus den "globalen" Einstellungen (z.B. data-stroke) übernommen. Die folgende Definition generiert, wenn man das Beispielfile firedata.geojson ({{Link2Forum|Topic=78379|Message=776472|LinkText=Anhang am Foren-Beitrag}}) als GEOJSON abspeichert und dann in data-geojson den Speicherort angibt, die darunter dargestellte Karte.

<syntaxhighlight lang="html">
data-feature_style='{
"popup_properties_click":"name network operator fire.*",
"popup_properties_move":"fire.*\\:diameter",
"display_styles":{
"emergency.fire_hydrant":{"label":"fa-fire-extinguisher","strokeColor":"red"},
"public_transport.station":{"label":"fa-train","strokeColor":"black"}}
}'
</syntaxhighlight>
[[Datei:2018-03-05_11h55_51.png|thumb|none|Mit obigem Beispielfile und gezeigtem data-feature_style erstellte Karte]]

Noch etwas zusätzliches: Eine gute Möglichkeit sich geojson Files zu holen (von der auch das Beispiel stammt), ist die webseite [http://overpass-turbo.eu/]. Dort kann man sich für beliebige Gebiete per Wizard eine Abfrage basteln, die dann bestimmte Infos aus Open Street Maps herausfiltert und als geojson exportieren kann.

==Beispiele==

=== Verkehrskamera Darstellung aus FHEM Blitzer Devices ===
Wird "data-blitzer" mit dem Namen eines FHEM Blitzer Devices gesetzt, so werden die im FHEM Device gefundenen Verkehrskameras als Objekte auf der Karte dargestellt (ohne weitere Angabe als rotes Rechteck mit Ausrufezeichen). Voraussetzung hierbei ist, dass beim Blitzer Device in FHEM das Attribut createAllReadings auf "1" gesetzt wird. Die Darstellung kann genauso wie bei GEOJSON Files über das Attribut data-feature_style eingestellt werden. Hier müssen dann als properties die entsprechenden Readings der Blitzer ohne die vorangestellten Nummern angegeben werden. Im folgenden Beispiel werden die Blitzer in Form eines runden Geschwindigkeits Verkehrsschildes dargestellt, der Wert, der an der jeweiligen Stelle als Maximalgeschwindigkeit gilt, wird in das Verkehrsschild als Zahl eingetragen (das Verkehrsschild Bild muss als Bilddatei im "images" Ordner unter www/ liegen.
[[Datei:Blitzer2.png|ohne|mini|100x100px|Bild das für die Darstellung verwendet wird (muss unter www/images liegen)]]

Mit folgender Definition:<syntaxhighlight lang="html">
<div
style="height:100%; width:100%"
data-type="maps"
data-map_type="OSMs"
data-mapgroup="1"
data-center="49,9"
data-zoom="10"
data-stroke="#FF0000,30,80"
data-icon="../images/blitzer2.png"
data-blitzer="blitztest"
data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"vmax.10":{"label":"10","fontSize":"15px"},
"vmax.20":{"label":"20","fontSize":"15px"},
"vmax.30":{"label":"30","fontSize":"15px"},
"vmax.40":{"label":"40","fontSize":"15px"},
"vmax.50":{"label":"50","fontSize":"15px"},
"vmax.60":{"label":"60","fontSize":"15px"},
"vmax.70":{"label":"70","fontSize":"15px"},
"vmax.80":{"label":"80","fontSize":"15px"},
"vmax.90":{"label":"90","fontSize":"15px"},
"vmax.100":{"label":"100","fontSize":"15px"},
"vmax.110":{"label":"110","fontSize":"15px"},
"vmax.120":{"label":"120","fontSize":"15px"},
"vmax.130":{"label":"130","fontSize":"15px"}
}
}'
></div>

</syntaxhighlight>Entsteht ein Bild ähnlich dem Folgenden:
[[Datei:2020-10-02.png|links|mini|Beispiel mit Verkehrskameras aus FHEM Blitzer Device]]
[[Kategorie:FHEM Tablet UI|Maps]]

FTUI Widget Maps

2020-10-08T06:41:59Z

Eki:

Das [[{{PAGENAME}}|Map Widget]] ist ein Widget zur Darstellung von Karten mit Informationen aus FHEM oder auch anderern Quellen (z.B. GEOJSON Files). Das Modul wird aktuell (noch) nicht mit der normalen FTUI Installation verteilt und kann unter [https://forum.fhem.de/index.php/topic,91781.0.html] herunter geladen werden.

Folgende Dinge werden berücksichtigt:<br>
FHEM Devices, welche eine Koordinate (longitude/latitude) als Reading/Attribut/Internal haben (z. B. Anwesenheiten auf Basis von ROOMMATE/RESIDENT/GUEST, oder das global Device als Standort von FHEM), werden als Punkt mit anpassbarem Aussehen an der entsprechenden Position auf der Karte dargestellt.<br>
Darüber hinaus ist es möglich, Fahrwege mit Fahrzeiten auf Basis des FHEM TRAFFIC Moduls als Pfade auf die Karte zu legen. Hierbei können die Routen eingefärbt als Linien dargestellt werden und entsprechend per InfoWindow dann Details (wie z.B. die normale Fahrzeit bzw. die Fahrzeit bei aktuellem Verkehr) dazu dargestellt werden.<br>
Existiert ein Reading "polygon" welches eine Liste von space separierten Koordinatenpaaren (X und Y Koordinaten jedes Paares durch ',' getrennt) als Wert enthält (z.B. mit "setreading <device> polygon 10.2488713,49.773172 10.2626042,49.7711765 10.278397,49.7682939 10.2986531,49.7671851" erzeugbar) so wird eine Linie auf der Karte mit den entsprechenden Koordinatenpunkten gezeichnet.<br>
Die flexibelste Lösung ist die Verwendung von GEOJSON Files (müssen irgendwo per web erreichbar abgelegt werden). Diese Files können verschiedene geographische Objekte enthalten, die dann auf der Karte dargestellt werden. Das Aussehen und Verhalten der im GEOJSON File enthaltenen Objekte kann über den Parameter data-feature_style beeinflusst werden.

Die Karte kann zusätzlich eine Darstellung der Verkehrslage als zuschaltbaren Layer enthalten (siehe unten).

In der aktuellen Version (ab Oktober 2020) können auch Verkehrsüberwachungskameras des FHEM Moduls Blitzer (98_Blitzer.pm) dargestellt werden. Dazu muss das attribut data-blitzer auf ein gültiges Blitzer Device zeigen.
<table><tr>
<td>[[Datei:2018-03-05_11h55_51.png|thumb|none|Beispiel 1 (mit Google)]]</td>
<td>[[Datei:FTUI_Maps_2.png|thumb|none|Beispiel 2 (mit Google)]]</td>
<td>[[Datei:FTUI_Maps_3.png|thumb|none|Beispiel 3 (mit OSM)]]</td></tr>
</table>
==Voraussetzungen==
Die Darstellung im Widget basiert entweder auf dem Google Maps API oder auf Leaflet und der Nutzung von OpenStreetMap als Kartenbasis. Wenn Google Maps verwendet wird, muss zunächst ein API Key von Google beschafft werden. Wie man diesen beschafft, kann z.B. unter [https://developers.google.com/maps/api-key-best-practices] oder [[TRAFFIC]] nachgelesen werden. Dieser Key muss dann im HTML File (am Besten im Header) als meta Tag eingetragen werden.
<syntaxhighlight lang="html">
<meta name="GoogleMapsApiKey" content="<Key>">
</syntaxhighlight>
Wird die Leaflet/OSM Variante verwendet (data-map_type="OSM"), so ist zunächst kein Schlüssel für die Kartendarstellung notwendig. Will man allerdings eine Route oder die Verkehrslage darstellen, so wird ein Map API Key von TomTom benötigt (bekommt man für private Zwecke auch ohne Hinterlegung einer Kreditkarte). Hinweise wie man den besorgt, siehe unter [https://developer.tomtom.com]. Auch dieser Key muss als meta Tag in das HTML File.

<syntaxhighlight lang="html">
<meta name="TomTomApiKey" content="<Key>">
</syntaxhighlight>

Darüber hinaus muss in diesem Fall auch noch ein Plugin von TomTom herunter geladen und in das lib/ Verzeichnis abgelegt werden. Dazu das zip File von [https://api.tomtom.com/maps-sdk-js/4.36.2/jssdk-4.36.2-distribution.zip] herunter laden und alle darin enthaltenen Dateien unter einem neuen Verzeichnis lib/tomtom/ ablegen.

<gallery>
</gallery>

==Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-type'''||Type des Widgets muss auf "maps" gesetzt werden||||
|-
|'''data-device'''||FHEM-Device, dessen Readings dargestellt werden sollen||||
|-
|'''data-blitzer'''
|FHEM Blitzer Device, dessen Verkehrsüberwachungskamera Daten dargestellt werden sollen.
|
|
|-
|'''data-alias'''||Legt fest, aus welchem Reading der Name für die Anzeige genommen werden soll||alias||
|-
|'''data-latitude'''||Legt fest, aus welchem Reading die geograpfische Breite genommen werden soll||latitude||
|-
|'''data-longitude'''||Legt fest, aus welchem Reading die geograpfische Länge genommen werden soll||longitude||
|-
|'''data-language'''||Kann 'de' oder 'en' sein und stellt die Sprache für die Ausgabe in den Info Windows ein||de||
|-
|'''data-size'''||Gibt die Größe des Kartenausschnittes an (als String mit '<Breite>,<Höhe>'), kann auch weggelassen werden, wenn das Device ein Reading GoogleMapsSize besitzt (z. B. TRAFFIC Device), dann wird der Wert aus dem GoogleMapsSize Reading genommen oder, falls das auch nicht vorhanden ist, wird die Größe aus der Ausdehnung der Route(n) ermittelt.||auto||
|-
|'''data-center'''||Gibt das Zentrum der Karte an (als String mit '<Latitude>,<Longitude>'), kann auch weggelassen werden, wenn das Device ein Reading GoogleMapsCenter besitzt (z. B. TRAFFIC Device), dann wird der Wert aus GoogleMapsCenter Reading genommen oder, falls das auch nicht vorhanden ist, wird das Zentrum aus der Ausdehnung der Route(n) ermittelt.||auto||
|-
|'''data-zoom'''||Gibt den Zoomwert der Karte an (als integer Wert, siehe Google Maps API), kann auch weggelassen werden, wenn das Device ein Reading GoogleMapsZoom besitzt (z. B. TRAFFIC Device), dann wird der Wert aus dem GoogleMapsZoom Reading genommen oder, falls das auch nicht vorhanden ist, wird der Zoom Wert aus der Ausdehnung der Route(n) ermittelt.||auto||
|-
|'''data-mapgroup'''||Legt fest, ob jedes Widget in eine eigene Karte zeichnen soll oder ob mehrer Informationen in einer Karte landen. Alle Widgets vom Typ 'maps' mit dem gleichen wert für data-mapgroup zeichnen in ein und die selbe Karte||0||
|-
|'''data-travel_mode'''||Gibt an, wie die Route berechnet werden soll. Es gibt die Möglichkeiten 'DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT' (Details siehe TRAFFIC Modul von FHEM oder Google Maps API für den 'Directions' Service), kann auch weggelassen werden, wenn es sich um ein TRAFFIC Device handelt, dann wird der Wert aus dem trafficMode Reading genommen.||DRIVING||
|-
|'''data-traffic'''||Gibt an, ob die Verkehrslage auf der Karte dargestellt werden soll||false||
|-
|'''data-showdetails'''||Gibt an ob per Default die Info Windows eingeblendet werden sollen||false||
|-
|'''data-stroke'''||Gibt an, wie die Fahrstrecken oder Symbole dargestellt werden sollen. Besteht aus maximal 6 Werten (Farbe Hinweg, Breite Hinweg, Durchsichtigkeit Hinweg, Farbe Rückweg, Breite Rückweg, Durchsichtigkeit Rückweg), die Farbe wird per #rrggbb angegeben, die Breite in Pixel und die Durchsichtigkeit als Prozentwert zwischen 0% und 100%, siehe auch Details zum Modul TRAFFIC. Die Symbole zur Route werden in der doppelten angegebenen Breite des Pfades dargestellt||#ffffff,7,50,#ffffff,7,50||
|-
|'''data-icon'''||Hiermit kann ein Icon angegeben werden, welches statt des standardmäßigen Pfeils verwendet werden soll, um die Position zu markieren. Kann eine URL auf eine icon Datei, die relativ zum Verzeichnis www/images/ liegt sein||||'default/HOME_Status.1.png'
|-
|'''data-label'''||Will man statt eines Icons ein FontAwesome/Openautomation/fhemSVG Font-Icon (z.B. 'fa-home', 'oa-weather_winter', 'fs-usb_stick') verwenden, wird das hiermit angegeben (es kann auch icon und Font-Icon zusammen verwendet werden (z.B. ein Kreis als Icon und darin ein Font-Icon.||||fa-home
|-
|'''data-nightmode'''||legt fest, ob die Karte im Nachtmodus (dunkel) dargestellt werden soll (geht bisher noch nicht mit OSM)||false||
|-
|'''data-style'''||Möglichkeit zum Setzen eines Styles entsprechend der Map API Options (siehe Dokumentation zu den Map APIs von Google und Leaflet)||||
|-
|'''data-geojson'''||gibt den Namen eines Files auf dem Server an, in dem Daten zur Darstellung im GEOJSON Format (siehe [www.geojson.org]) abgelegt sind. Die Angabe ist relativ zum Verzeichnis /opt/fhem/ftui/tablet der Standardinstallation.||||"data/firedata.geojson" für das unten genannte Beispiel
|-
|'''data-feature_style'''||Legt fest, wie die GEOJSON Daten dargestllt werden bzw. was passiert, wenn man auf einzelne Features klickt bzw. sie mit der Maus überstreicht (Details siehe unten unter <>||||
|}

==Details zu GEOJSON Files==
Die Datei muss auf dem Server (FHEM) liegen (also typischerweise im www/tablet Verzeichnis). Ich habe z.B. unter www/tablet ein Unterverzeichnis data erstellt und geben data-geojson="data/file.geojson" an. In dem geojson file können beliebige Objekte definiert werden, das Format ist unter [www.geojson.org] nachzulesen
Über den Parameter data-feature_style kann man recht flexibel festlegen, wie die Objekte dargestellt werden sollen. Das Ganze ist ein js Objekt, wird also in '{}' eingeschlossen. Innerhalb des Objektes legen 3 Objekteigenschaften fest, wie die Darstellung aussehen soll.

Die Eigenschaft "popup_properties_click" hat als Wert eine Leerzeichen getrennte Liste von Expressions, welche, falls sie auf Properties der Objekte im geojson File zutreffen, dazu führen, dass beim Klick auf die angezeigten Objekte ein Info Window geöffnet wird, welches die entsprechenden geojson Objekteigenschaften anzeigt.

Die Eigenschaft "popup_properties_move" macht genau das Gleiche, allerdings sorgen die dort angegebenen Expressions dafür dass die dazu passenden geojson Objekte per Popup bei Überfahren mit der Maus und nicht bei Klick angezeigt werden und beim Verlassen mit der Maus dann auch wieder automatisch verschwinden.

Die Eigenschaft "display_styles" legt genau fest, wie die verschiedenen geojson Objekte dargestellt werden sollen. Der Wert dieser Eigenschaft ist wiederum ein Objekt. Als Eigenschaftsname wird ein Verweis auf ein bestimmtes Objekt im geojson File verwendet. Der Verweis kann entweder eine Eigenschaft eines Objekts im geojson File sein oder eine Kombination aus Eigenschaft und Wert (also nicht alle Objekte des gleichen Typs sondern nur die, die eine auch den passenden Wert haben). Dahinter wird dann der zu verwendete Stil als weiteres Objekt angegeben, welches aus einer Menge aus Property:Value pairs besteht, bei dem die Property die Displayeigenschaft (also z.B. Farbe) und der Wert dann den dazugehörigen Wert (also z.B. rot) festlegt. Alles was nicht explizit hier festgelegt wird, wird aus den "globalen" Einstellungen (z.B. data-stroke) übernommen. Die folgende Definition generiert, wenn man das Beispielfile firedata.geojson ({{Link2Forum|Topic=78379|Message=776472|LinkText=Anhang am Foren-Beitrag}}) als GEOJSON abspeichert und dann in data-geojson den Speicherort angibt, die darunter dargestellte Karte.

<syntaxhighlight lang="html">
data-feature_style='{
"popup_properties_click":"name network operator fire.*",
"popup_properties_move":"fire.*\\:diameter",
"display_styles":{
"emergency.fire_hydrant":{"label":"fa-fire-extinguisher","strokeColor":"red"},
"public_transport.station":{"label":"fa-train","strokeColor":"black"}}
}'
</syntaxhighlight>
[[Datei:2018-03-05_11h55_51.png|thumb|none|Mit obigem Beispielfile und gezeigtem data-feature_style erstellte Karte]]

Noch etwas zusätzliches: Eine gute Möglichkeit sich geojson Files zu holen (von der auch das Beispiel stammt), ist die webseite [http://overpass-turbo.eu/]. Dort kann man sich für beliebige Gebiete per Wizard eine Abfrage basteln, die dann bestimmte Infos aus Open Street Maps herausfiltert und als geojson exportieren kann.

==Beispiele==

=== Verkehrskamera Darstellung aus FHEM Blitzer Devices ===
Wird "data-blitzer" mit dem Namen eines FHEM Blitzer Devices gesetzt, so werden die im FHEM Device gefundenen Verkehrskameras als Objekte auf der Karte dargestellt (ohne weitere Angabe als rotes Rechteck mit Ausrufezeichen). Die Darstellung kann genauso wie bei GEOJSON Files über das Attribut data-feature_style eingestellt werden. Hier müssen dann als properties die entsprechenden Readings der Blitzer ohne die vorangestellten Nummern angegeben werden. Im folgenden Beispiel werden die Blitzer in Form eines runden Geschwindigkeits Verkehrsschildes dargestellt, der Wert, der an der jeweiligen Stelle als Maximalgeschwindigkeit gilt, wird in das Verkehrsschild als Zahl eingetragen (das Verkehrsschild Bild muss als Bilddatei im "images" Ordner unter www/ liegen.
[[Datei:Blitzer2.png|ohne|mini|100x100px|Bild das für die Darstellung verwendet wird (muss unter www/images liegen)]]

Mit folgender Definition:<syntaxhighlight lang="html">
<div
style="height:100%; width:100%"
data-type="maps"
data-map_type="OSMs"
data-mapgroup="1"
data-center="49,9"
data-zoom="10"
data-stroke="#FF0000,30,80"
data-icon="../images/blitzer2.png"
data-blitzer="blitztest"
data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"vmax.10":{"label":"10","fontSize":"15px"},
"vmax.20":{"label":"20","fontSize":"15px"},
"vmax.30":{"label":"30","fontSize":"15px"},
"vmax.40":{"label":"40","fontSize":"15px"},
"vmax.50":{"label":"50","fontSize":"15px"},
"vmax.60":{"label":"60","fontSize":"15px"},
"vmax.70":{"label":"70","fontSize":"15px"},
"vmax.80":{"label":"80","fontSize":"15px"},
"vmax.90":{"label":"90","fontSize":"15px"},
"vmax.100":{"label":"100","fontSize":"15px"},
"vmax.110":{"label":"110","fontSize":"15px"},
"vmax.120":{"label":"120","fontSize":"15px"},
"vmax.130":{"label":"130","fontSize":"15px"}
}
}'
></div>

</syntaxhighlight>Entsteht ein Bild ähnlich dem Folgenden:
[[Datei:2020-10-02.png|links|mini|Beispiel mit Verkehrskameras aus FHEM Blitzer Device]]
[[Kategorie:FHEM Tablet UI|Maps]]

Datei:Blitzer2.png

2020-10-08T06:33:52Z

Eki:

FTUI Widget Maps

2020-10-08T06:31:42Z

Eki: Blitzer Darstellung hinzugefügt

Das [[{{PAGENAME}}|Map Widget]] ist ein Widget zur Darstellung von Karten mit Informationen aus FHEM oder auch anderern Quellen (z.B. GEOJSON Files). Das Modul wird aktuell (noch) nicht mit der normalen FTUI Installation verteilt und kann unter [https://forum.fhem.de/index.php/topic,91781.0.html] herunter geladen werden.

Folgende Dinge werden berücksichtigt:<br>
FHEM Devices, welche eine Koordinate (longitude/latitude) als Reading/Attribut/Internal haben (z. B. Anwesenheiten auf Basis von ROOMMATE/RESIDENT/GUEST, oder das global Device als Standort von FHEM), werden als Punkt mit anpassbarem Aussehen an der entsprechenden Position auf der Karte dargestellt.<br>
Darüber hinaus ist es möglich, Fahrwege mit Fahrzeiten auf Basis des FHEM TRAFFIC Moduls als Pfade auf die Karte zu legen. Hierbei können die Routen eingefärbt als Linien dargestellt werden und entsprechend per InfoWindow dann Details (wie z.B. die normale Fahrzeit bzw. die Fahrzeit bei aktuellem Verkehr) dazu dargestellt werden.<br>
Existiert ein Reading "polygon" welches eine Liste von space separierten Koordinatenpaaren (X und Y Koordinaten jedes Paares durch ',' getrennt) als Wert enthält (z.B. mit "setreading <device> polygon 10.2488713,49.773172 10.2626042,49.7711765 10.278397,49.7682939 10.2986531,49.7671851" erzeugbar) so wird eine Linie auf der Karte mit den entsprechenden Koordinatenpunkten gezeichnet.<br>
Die flexibelste Lösung ist die Verwendung von GEOJSON Files (müssen irgendwo per web erreichbar abgelegt werden). Diese Files können verschiedene geographische Objekte enthalten, die dann auf der Karte dargestellt werden. Das Aussehen und Verhalten der im GEOJSON File enthaltenen Objekte kann über den Parameter data-feature_style beeinflusst werden.

Die Karte kann zusätzlich eine Darstellung der Verkehrslage als zuschaltbaren Layer enthalten (siehe unten).

In der aktuellen Version (ab Oktober 2020) können auch Verkehrsüberwachungskameras des FHEM Moduls Blitzer (98_Blitzer.pm) dargestellt werden. Dazu muss das attribut data-blitzer auf ein gültiges Blitzer Device zeigen.
<table><tr>
<td>[[Datei:2018-03-05_11h55_51.png|thumb|none|Beispiel 1 (mit Google)]]</td>
<td>[[Datei:FTUI_Maps_2.png|thumb|none|Beispiel 2 (mit Google)]]</td>
<td>[[Datei:FTUI_Maps_3.png|thumb|none|Beispiel 3 (mit OSM)]]</td></tr>
</table>
==Voraussetzungen==
Die Darstellung im Widget basiert entweder auf dem Google Maps API oder auf Leaflet und der Nutzung von OpenStreetMap als Kartenbasis. Wenn Google Maps verwendet wird, muss zunächst ein API Key von Google beschafft werden. Wie man diesen beschafft, kann z.B. unter [https://developers.google.com/maps/api-key-best-practices] oder [[TRAFFIC]] nachgelesen werden. Dieser Key muss dann im HTML File (am Besten im Header) als meta Tag eingetragen werden.
<syntaxhighlight lang="html">
<meta name="GoogleMapsApiKey" content="<Key>">
</syntaxhighlight>
Wird die Leaflet/OSM Variante verwendet (data-map_type="OSM"), so ist zunächst kein Schlüssel für die Kartendarstellung notwendig. Will man allerdings eine Route oder die Verkehrslage darstellen, so wird ein Map API Key von TomTom benötigt (bekommt man für private Zwecke auch ohne Hinterlegung einer Kreditkarte). Hinweise wie man den besorgt, siehe unter [https://developer.tomtom.com]. Auch dieser Key muss als meta Tag in das HTML File.

<syntaxhighlight lang="html">
<meta name="TomTomApiKey" content="<Key>">
</syntaxhighlight>

Darüber hinaus muss in diesem Fall auch noch ein Plugin von TomTom herunter geladen und in das lib/ Verzeichnis abgelegt werden. Dazu das zip File von [https://api.tomtom.com/maps-sdk-js/4.36.2/jssdk-4.36.2-distribution.zip] herunter laden und alle darin enthaltenen Dateien unter einem neuen Verzeichnis lib/tomtom/ ablegen.

<gallery>
</gallery>

==Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-type'''||Type des Widgets muss auf "maps" gesetzt werden||||
|-
|'''data-device'''||FHEM-Device, dessen Readings dargestellt werden sollen||||
|-
|'''data-blitzer'''
|FHEM Blitzer Device, dessen Verkehrsüberwachungskamera Daten dargestellt werden sollen.
|
|
|-
|'''data-alias'''||Legt fest, aus welchem Reading der Name für die Anzeige genommen werden soll||alias||
|-
|'''data-latitude'''||Legt fest, aus welchem Reading die geograpfische Breite genommen werden soll||latitude||
|-
|'''data-longitude'''||Legt fest, aus welchem Reading die geograpfische Länge genommen werden soll||longitude||
|-
|'''data-language'''||Kann 'de' oder 'en' sein und stellt die Sprache für die Ausgabe in den Info Windows ein||de||
|-
|'''data-size'''||Gibt die Größe des Kartenausschnittes an (als String mit '<Breite>,<Höhe>'), kann auch weggelassen werden, wenn das Device ein Reading GoogleMapsSize besitzt (z. B. TRAFFIC Device), dann wird der Wert aus dem GoogleMapsSize Reading genommen oder, falls das auch nicht vorhanden ist, wird die Größe aus der Ausdehnung der Route(n) ermittelt.||auto||
|-
|'''data-center'''||Gibt das Zentrum der Karte an (als String mit '<Latitude>,<Longitude>'), kann auch weggelassen werden, wenn das Device ein Reading GoogleMapsCenter besitzt (z. B. TRAFFIC Device), dann wird der Wert aus GoogleMapsCenter Reading genommen oder, falls das auch nicht vorhanden ist, wird das Zentrum aus der Ausdehnung der Route(n) ermittelt.||auto||
|-
|'''data-zoom'''||Gibt den Zoomwert der Karte an (als integer Wert, siehe Google Maps API), kann auch weggelassen werden, wenn das Device ein Reading GoogleMapsZoom besitzt (z. B. TRAFFIC Device), dann wird der Wert aus dem GoogleMapsZoom Reading genommen oder, falls das auch nicht vorhanden ist, wird der Zoom Wert aus der Ausdehnung der Route(n) ermittelt.||auto||
|-
|'''data-mapgroup'''||Legt fest, ob jedes Widget in eine eigene Karte zeichnen soll oder ob mehrer Informationen in einer Karte landen. Alle Widgets vom Typ 'maps' mit dem gleichen wert für data-mapgroup zeichnen in ein und die selbe Karte||0||
|-
|'''data-travel_mode'''||Gibt an, wie die Route berechnet werden soll. Es gibt die Möglichkeiten 'DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT' (Details siehe TRAFFIC Modul von FHEM oder Google Maps API für den 'Directions' Service), kann auch weggelassen werden, wenn es sich um ein TRAFFIC Device handelt, dann wird der Wert aus dem trafficMode Reading genommen.||DRIVING||
|-
|'''data-traffic'''||Gibt an, ob die Verkehrslage auf der Karte dargestellt werden soll||false||
|-
|'''data-showdetails'''||Gibt an ob per Default die Info Windows eingeblendet werden sollen||false||
|-
|'''data-stroke'''||Gibt an, wie die Fahrstrecken oder Symbole dargestellt werden sollen. Besteht aus maximal 6 Werten (Farbe Hinweg, Breite Hinweg, Durchsichtigkeit Hinweg, Farbe Rückweg, Breite Rückweg, Durchsichtigkeit Rückweg), die Farbe wird per #rrggbb angegeben, die Breite in Pixel und die Durchsichtigkeit als Prozentwert zwischen 0% und 100%, siehe auch Details zum Modul TRAFFIC. Die Symbole zur Route werden in der doppelten angegebenen Breite des Pfades dargestellt||#ffffff,7,50,#ffffff,7,50||
|-
|'''data-icon'''||Hiermit kann ein Icon angegeben werden, welches statt des standardmäßigen Pfeils verwendet werden soll, um die Position zu markieren. Kann eine URL auf eine icon Datei, die relativ zum Verzeichnis www/images/ liegt sein||||'default/HOME_Status.1.png'
|-
|'''data-label'''||Will man statt eines Icons ein FontAwesome/Openautomation/fhemSVG Font-Icon (z.B. 'fa-home', 'oa-weather_winter', 'fs-usb_stick') verwenden, wird das hiermit angegeben (es kann auch icon und Font-Icon zusammen verwendet werden (z.B. ein Kreis als Icon und darin ein Font-Icon.||||fa-home
|-
|'''data-nightmode'''||legt fest, ob die Karte im Nachtmodus (dunkel) dargestellt werden soll (geht bisher noch nicht mit OSM)||false||
|-
|'''data-style'''||Möglichkeit zum Setzen eines Styles entsprechend der Map API Options (siehe Dokumentation zu den Map APIs von Google und Leaflet)||||
|-
|'''data-geojson'''||gibt den Namen eines Files auf dem Server an, in dem Daten zur Darstellung im GEOJSON Format (siehe [www.geojson.org]) abgelegt sind. Die Angabe ist relativ zum Verzeichnis /opt/fhem/ftui/tablet der Standardinstallation.||||"data/firedata.geojson" für das unten genannte Beispiel
|-
|'''data-feature_style'''||Legt fest, wie die GEOJSON Daten dargestllt werden bzw. was passiert, wenn man auf einzelne Features klickt bzw. sie mit der Maus überstreicht (Details siehe unten unter <>||||
|}

==Details zu GEOJSON Files==
Die Datei muss auf dem Server (FHEM) liegen (also typischerweise im www/tablet Verzeichnis). Ich habe z.B. unter www/tablet ein Unterverzeichnis data erstellt und geben data-geojson="data/file.geojson" an. In dem geojson file können beliebige Objekte definiert werden, das Format ist unter [www.geojson.org] nachzulesen
Über den Parameter data-feature_style kann man recht flexibel festlegen, wie die Objekte dargestellt werden sollen. Das Ganze ist ein js Objekt, wird also in '{}' eingeschlossen. Innerhalb des Objektes legen 3 Objekteigenschaften fest, wie die Darstellung aussehen soll.

Die Eigenschaft "popup_properties_click" hat als Wert eine Leerzeichen getrennte Liste von Expressions, welche, falls sie auf Properties der Objekte im geojson File zutreffen, dazu führen, dass beim Klick auf die angezeigten Objekte ein Info Window geöffnet wird, welches die entsprechenden geojson Objekteigenschaften anzeigt.

Die Eigenschaft "popup_properties_move" macht genau das Gleiche, allerdings sorgen die dort angegebenen Expressions dafür dass die dazu passenden geojson Objekte per Popup bei Überfahren mit der Maus und nicht bei Klick angezeigt werden und beim Verlassen mit der Maus dann auch wieder automatisch verschwinden.

Die Eigenschaft "display_styles" legt genau fest, wie die verschiedenen geojson Objekte dargestellt werden sollen. Der Wert dieser Eigenschaft ist wiederum ein Objekt. Als Eigenschaftsname wird ein Verweis auf ein bestimmtes Objekt im geojson File verwendet. Der Verweis kann entweder eine Eigenschaft eines Objekts im geojson File sein oder eine Kombination aus Eigenschaft und Wert (also nicht alle Objekte des gleichen Typs sondern nur die, die eine auch den passenden Wert haben). Dahinter wird dann der zu verwendete Stil als weiteres Objekt angegeben, welches aus einer Menge aus Property:Value pairs besteht, bei dem die Property die Displayeigenschaft (also z.B. Farbe) und der Wert dann den dazugehörigen Wert (also z.B. rot) festlegt. Alles was nicht explizit hier festgelegt wird, wird aus den "globalen" Einstellungen (z.B. data-stroke) übernommen. Die folgende Definition generiert, wenn man das Beispielfile firedata.geojson ({{Link2Forum|Topic=78379|Message=776472|LinkText=Anhang am Foren-Beitrag}}) als GEOJSON abspeichert und dann in data-geojson den Speicherort angibt, die darunter dargestellte Karte.

<syntaxhighlight lang="html">
data-feature_style='{
"popup_properties_click":"name network operator fire.*",
"popup_properties_move":"fire.*\\:diameter",
"display_styles":{
"emergency.fire_hydrant":{"label":"fa-fire-extinguisher","strokeColor":"red"},
"public_transport.station":{"label":"fa-train","strokeColor":"black"}}
}'
</syntaxhighlight>
[[Datei:2018-03-05_11h55_51.png|thumb|none|Mit obigem Beispielfile und gezeigtem data-feature_style erstellte Karte]]

Noch etwas zusätzliches: Eine gute Möglichkeit sich geojson Files zu holen (von der auch das Beispiel stammt), ist die webseite [http://overpass-turbo.eu/]. Dort kann man sich für beliebige Gebiete per Wizard eine Abfrage basteln, die dann bestimmte Infos aus Open Street Maps herausfiltert und als geojson exportieren kann.

==Beispiele==

=== Verkehrskamera Darstellung aus FHEM Blitzer Devices ===
Wird "data-blitzer" mit dem Namen eines FHEM Blitzer Devices gesetzt, so werden die im FHEM Device gefundenen Verkehrskameras als Objekte auf der Karte dargestellt (ohne weitere Angabe als rotes Rechteck mit Ausrufezeichen). Die Darstellung kann genauso wie bei GEOJSON Files über das Attribut data-feature_style eingestellt werden. Hier müssen dann als properties die entsprechenden Readings der Blitzer ohne die vorangestellten Nummern angegeben werden. Im folgenden Beispiel werden die Blitzer in Form eines runden Geschwindigkeits Verkehrsschildes dargestellt, der Wert, der an der jeweiligen Stelle als Maximalgeschwindigkeit gilt, wird in das Verkehrsschild als Zahl eingetragen (das Verkehrsschild Bild muss als Bilddatei im "images" Ordner unter www/ liegen.

Mit folgender Definition:<syntaxhighlight lang="html">
<div
style="height:100%; width:100%"
data-type="maps"
data-map_type="OSMs"
data-mapgroup="1"
data-center="49,9"
data-zoom="10"
data-stroke="#FF0000,30,80"
data-icon="../images/blitzer2.png"
data-blitzer="blitztest"
data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"vmax.10":{"label":"10","fontSize":"15px"},
"vmax.20":{"label":"20","fontSize":"15px"},
"vmax.30":{"label":"30","fontSize":"15px"},
"vmax.40":{"label":"40","fontSize":"15px"},
"vmax.50":{"label":"50","fontSize":"15px"},
"vmax.60":{"label":"60","fontSize":"15px"},
"vmax.70":{"label":"70","fontSize":"15px"},
"vmax.80":{"label":"80","fontSize":"15px"},
"vmax.90":{"label":"90","fontSize":"15px"},
"vmax.100":{"label":"100","fontSize":"15px"},
"vmax.110":{"label":"110","fontSize":"15px"},
"vmax.120":{"label":"120","fontSize":"15px"},
"vmax.130":{"label":"130","fontSize":"15px"}
}
}'
></div>

</syntaxhighlight>Entsteht ein Bild ähnlich dem Folgenden:
[[Datei:2020-10-02.png|links|mini|Beispiel mit Verkehrskameras aus FHEM Blitzer Device]]
[[Kategorie:FHEM Tablet UI|Maps]]

2018-10-05T13:39:35Z

Eki:

Datei:FTUI Maps 2.png

2018-10-05T13:35:34Z

Eki:

2018-03-20T09:02:37Z

Eki:

FTUI Widget Slider

2018-03-20T08:53:25Z

Eki:

Das [[{{PAGENAME}}|Slider Widget]] ist ein Widget für [[FHEM Tablet UI]] in Form eines Schiebereglers, mit dem ein beliebiger Wert zwischen zwei festgelegten Grenzwerten auswählen lässt. Es eignet sich zum Beispiel zum Einstellen der Lautstärke eines Audio-Gerätes oder der Helligkeit einer Lampe.

<gallery>
File:Slider_tabletUI.png
File:Slider_tabletUI2.jpg
</gallery>

==Steuer-Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||FHEM-Device, dessen Reading gesetzt werden soll (<command> '''<device>''' <reading> <value>)||||
|-
|'''data-get'''||Reading, dessen Inhalt den aktuellen Wert wiedergibt||'STATE'||
|-
|'''data-set'''||Reading, das gesetzt werden soll (<command> <device> '''<reading>''' <value>)||||
|-
|'''data-on'''||Wert, bei dem der Slider zum maximalen Ausschlag springt||'on'||
|-
|'''data-off'''||Wert, bei dem der Slider minimalen Ausschlag springt||'off'||
|-
|'''data-part'''||Wählt bei Werten, die durch Leerzeichen getrennt sind, den Teil aus, der angezeigt werden soll. Der Teil kann auch mit RegEx ermittelt werden.||'-1': alles Anzeigen||
|-
|'''data-set-value'''||Format, wie der eingestellte Wert an FHEM übergeben werden soll||'$v': Nur den Wert||
|-
|'''data-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||
|-
|'''data-min'''||Minimaler Wert, der eingestellt werden kann||0||
|-
|'''data-max'''||Maximaler Wert, der eingestellt werden kann||100||
|-
|'''data-step'''||Schrittweite beim Schieben des Sliders||1||
|-
|'''data-width'''||Breite des Sliders, wenn er horizontal ausgerichtet ist||normal '120px', mini '60px'||
|-
|'''data-height'''||Höhe des Sliders, wenn er vertikal ausgerichtet ist||normal '120px', mini '60px'||
|-
|'''data-color'''||Farbe des Sliders für den Bereich 0...<eingestellter Wert>||'#aa6900'||
|-
|'''data-background-color'''||Farbe des Sliders für den Bereich <eingestellter Wert>...<Maximaler Wert>||'#404040'||
|-
|'''data-handle-diameter'''||Größe des Griffs||'20'||
|-
|'''data-touch-diameter'''||Größe des Griffs, wenn er bewegt wird||wie '''data-handle-diameter'''||
|-
|'''data-timer-state'''||Statusvariable mit der eine timergesteuerte Bewegung des Sliders ausgelöst werden kann||||
|-
|'''data-timer-state-on'''||Zustand der Statusvariablen der die Bewegung startet||'on'||
|-
||'''data-timer-state-off'''||Zustand der Statusvariablen der die Bewegung stoppt||'off'||!on (alles was nicht on ist stoppt den Timer)
|-
||'''data-timer-step'''||Erhöhung des Wertes pro Timer-Intervall||1||
|-
||'''data-timer-interval'''||Timer-Intervall in Millisekunden||1000||
|}

==CSS-Klassen==
{|class="wikitable"
!Klasse
!Beschreibung
{{FTUI Klasse|mini}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|large}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|right}}{{FTUI Klasse|negated}}{{FTUI Klasse|value}}{{FTUI Klasse|FS20}}{{FTUI Klasse|tap}}
|}

Der Slider unterstützt ''tap to target'', also das Springen zum gewünschten Wert durch einfaches Antippen, nur, wenn die CSS-Klasse '''tap''' verwendet wird.

==Beispiele==
===Vertikaler Schieberegler===
Einfacher Schieberegler mit dem Einstellbereich 10...90

[[File:Slider_tabletUI.png]]
<syntaxhighlight lang="html">
<div data-type="slider"
data-device='Dummy1'
data-min="10"
data-max="90"
class="cell" >
</div>
<div data-type="label" class="cell">Light1</div>
</syntaxhighlight>

===Horizontaler Schieberegler===
Einfacher Schieberegler mit dem Einstellbereich 0...100

[[File:Slider_tabletUI2.jpg]]
<syntaxhighlight lang="html">
<div data-type="slider"
data-device='Dummy1'
data-min="0"
data-max="100"
class="horizontal"
</div>
</syntaxhighlight>

===Retro-Schieberegler mit Skala und rechteckigem Riffelknopf===
Kombination aus Slider- und Scale-Widget und Modifikation des Buttons in fhem-tablet-ui-user.css

[[File:retroslider.jpg]]
<syntaxhighlight lang="html">
<div class="doublebox-h">
<div class="right-narrow"
data-type="scale"
data-orientation="vertical"
data-device="amp"
data-get="volume"
data-set="volume"
data-height="155"
data-width="45"
data-value-interval="50"
data-tick="5"
data-extra-tick="25"
data-font-size="16"
data-colors='["green","#FFBF00","#EF0002"]'
data-limits='["1","50","75"]'></div>
<div class = "value left-narrow"
data-type="slider"
data-height="150"
data-device="amp"
data-get="volume"
data-set="volume"
data-color="grey"></div>
</div>
</syntaxhighlight>
Eintrag in fhem-tablet-ui-user.css:
<syntaxhighlight lang="html">
.vertical .range-handle {
left: -17px !important;
}

.range-handle {
width: 35px !important;
height: 15px !important;
border-radius: 3px !important;
background-color: black;
background-image: linear-gradient(180deg, white,black);
background-size: 2px 2px;
}
</syntaxhighlight>

===Darstellungsmöglichkeit bei Nutzung des Schiebereglers für Rolladen-/Jalousien-/Markisensteuerung===

[[File:blindsslider.png]]

Folgende Anpasssungen sind zu machen:

im file fhem-tablet-ui-user.css (falls das noch nicht verwendet wird, muss es natürlich noch in das html file, das aufgerufen wird eingetragen werden) folgende Zeilen einfügen:

<syntaxhighlight lang="css">
/* Definition for styles to be used for extension of slider widget for display of blinds, awnings etc. */
/* normal lines */

.blind> .vertical .range-bar {
width: 70%;
border-radius: 2px;
background-image: url(../blinds.jpg);
background-position: center bottom;
background-blend-mode: multiply;
background-size: cover;
}

.blind> .vertical .range-quantity {
border-radius: 3px;
}

.blind> .vertical .range-handle {
margin-left: 52% !important;
}

.blindview> .vertical .range-quantity {
border-radius: 2px;
background-image: url(../windowContentSimpleGrey.png);
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
background-blend-mode: difference;
}

.awning> .vertical .range-bar {
width: 70%;
border-radius: 2px;
background-image: url(../awningContentSimpleGrey.png);
background-position: center bottom;
background-blend-mode: difference;
background-size: 100% 100%;
}

.awning> .vertical .range-quantity {
border-radius: 3px;
}

.awning> .vertical .range-handle {
margin-left: 52% !important;
}
</syntaxhighlight>

Die nachfolgenden Grafiken müssen in das Verzeichnis oberhalb des css directories kopiert werden (zumindest die, die im css File auch referenziert werden. Es gibt eine Graustufenvariante und eine farbige, entsprechend müssen die Filenamen im css file ausgetauscht werden also jeweils das "Grey" im Filenamen weglassen wenn man bunte Fenster will. Wer will, kann sich natürlich auch eigene Fenster und Rolladenbildchen basteln, ein Beispiel für den "Fensterausblick" ist auch noch enthalten).
<gallery>
File:windowContentSimple.png
File:awningContentSimple.png
File:windowContentSimpleGrey.png
File:awningContentSimpleGrey.png
File:windowContentGrey.jpg
File:windowContent.jpg
File:blinds.jpg
</gallery>

im "class" parameter des Sliders müssen folgende Klassen hinzugefügt werden:
blind (dadurch wird die Darstellung eines verschiebbaren Rollladens bewirkt)
awning (dadurch wird die Darstellung einer Markise bewirkt)
blindview (dadurch wird im Hintergrund ein Fenster symbolisiert)

Ein Beispiel für die Definition eines Sliders mit Rolladendarstellung und Fenster als Hintergrundbild wäre:
<syntaxhighlight lang="html">
<div data-type="slider"
data-handle-diameter="15"
data-device=""
data-color="#969696"
data-height="125"
data-device="dg_SZ_Rolladen"
class="blind blindview">
</div>
</syntaxhighlight>

Wird in der Klasse "awning" statt "blind" gesetzt, so wird eine Markisendarstellung erzeugt.

[[Kategorie:FHEM Tablet UI|Slider]]

Datei:WindowContentSimpleGrey.png

2018-03-20T08:51:11Z

Eki: