FHEMWiki - Benutzerbeiträge [de]

FTUI Widget Scale

2025-02-03T18:26:41Z

Ulm32b: "Needs editing" entfernt.

Das [[{{PAGENAME}}|Scale Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann.

<gallery>
File:ftui-widget-scale.png
File:ftui-widget-scale-red.png
File:ftui-widget-scale-vertical.png
</gallery>

==Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||FHEM-Device, dessen Reading angezeigt werden soll|| ||Sysmon (= Device vom Typ SYSMON)
|-
|'''data-get'''||Name des Readings, das den Wert enthält||STATE|| cpu_temp
|-
|'''data-min'''||Minimaler Wert, der angezeigt werden soll||0|| 30
|-
|'''data-max'''||Maximaler Wert, der angezeigt werden soll, oder Name des Readings, das den Maximalwert enthält|| 100||90
|-
|'''data-orientation'''||Ausrichtung des Balkens||horizontal||data-orientation="vertical"
|-
|'''data-font-size'''||Schriftgröße||12||
|-
|'''data-tick'''||Abstand der Skalenstriche||1||
|-
|'''data-value-interval'''||Abstand der Skalenbeschriftung||50||
|-
|'''data-extra-tick'''||Abstand hervorgehobener Skalenstriche||10||
|-
|'''data-tick-color'''|| ||#eee||
|-
||'''data-limits-get'''||Herkunft dynamischer '''data-limits'''|| ||
|-
||'''data-limits'''||Array von Grenzen für '''data-colors'''|| || data-limits='["30","60","80"]'
|-
||'''data-color'''|| ||#aa6900||
|-
|'''data-colors'''||Array von Farbwerten, welche die Anzeige entsprechend der Grenzwerte von '''data-limits''' einfärben|| ||data-colors='["#dd3366","#ffcc00","#55aa44"]'
|}

==CSS-Klassen==
{| class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|notext}}
|}

==Beispiele==
Anzeige der CPU-Temperatur, welche aus SYSMON ausgelesen wird.
<syntaxhighlight lang="html">

<div class="col-40">

<div class="top-space-2x">CPU-Temperatur</div>

<div class="row top-space">
<div class="col-1-4 align-start rotate">
<div class="darker">Aktuell<br> </div>
<div data-type="label" data-device="Systemmonitor" data-get="cpu_temp" data-fix="1" data-unit="°C" class="top-space"></div>
</div>
<div class="col-1-4 align-start rotate">
<div class="darker">Min<br> </div>
<div data-type="label" data-device="Systemmonitor" data-get="cpu_temp_stat" data-part="1" data-fix="1" data-unit="°C" class="top-space"></div>
</div>
<div class="col-1-4 align-start rotate">
<div class="darker">Mittel<br>(5 Min)</div>
<div data-type="label" data-device="Systemmonitor" data-get="cpu_temp_stat" data-part="3" data-fix="1" data-unit="°C" class="top-space"></div>
</div>
<div class="col-1-4 align-start rotate">
<div class="darker">Max<br> </div>
<div data-type="label" data-device="Systemmonitor" data-get="cpu_temp_stat" data-part="2" data-fix="1" data-unit="°C" class="top-space"></div>
</div>
</div>

<div class="row">
<div class="col-1-4">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" style="margin-left: -20px !important;" class="inline darker showdeco"></div>
</div>
<div class="col-1-4">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp_stat" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" data-part="1" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div>
<div class="col-1-4">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp_stat" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" data-part="3" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div>
<div class="col-1-4">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp_stat" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" data-part="2" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div>
</div>

</div>
</syntaxhighlight>

[[Datei:Bsp_CPU_temp.png|600px]]

==Weitere Informationen==
*Ankündigung des Widgets in einem [https://forum.fhem.de/index.php/topic,80326.0.html Forumsbeitrag]
*Beispiel auf [https://github.com/knowthelist/fhem-tablet-ui/blob/master/test/test_scale.html GitHub]

[[Kategorie:FHEM Tablet UI V2|Scale]]

FTUI Widget Scale

2025-02-03T18:22:57Z

Ulm32b: Beispiel vervollständigt

{{Todo|Vervollständigen}}
Das [[{{PAGENAME}}|Scale Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann.

<gallery>
File:ftui-widget-scale.png
File:ftui-widget-scale-red.png
File:ftui-widget-scale-vertical.png
</gallery>

==Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||FHEM-Device, dessen Reading angezeigt werden soll||||Sysmon (= Device vom Typ SYSMON)
|-
|'''data-get'''||Name des Readings, das den Wert enthält||STATE||cpu_temp
|-
|'''data-min'''||Minimaler Wert, der angezeigt werden soll||0||30
|-
|'''data-max'''||Maximaler Wert, der angezeigt werden soll, oder Name des Readings, das den Maximalwert enthält||100||90
|-
|'''data-orientation'''||Ausrichtung des Balkens||horizontal||data-orientation="vertical"
|-
|'''data-font-size'''||Schriftgröße||12||
|-
|'''data-tick'''||Abstand der Skalenstriche||1||
|-
|'''data-value-interval'''||Abstand der Skalenbeschriftung||50||
|-
|'''data-extra-tick'''||Abstand hervorgehobener Skalenstriche||10||
|-
|'''data-tick-color'''||||#eee||
|-
||'''data-limits-get'''||Herkunft dynamischer '''data-limits'''||||
|-
||'''data-limits'''||Array von Grenzen für '''data-colors'''||||data-limits='["30","60","80"]'
|-
||'''data-color'''||||#aa6900||
|-
|'''data-colors'''||Array von Farbwerten, welche die Anzeige entsprechend der Grenzwerte von '''data-limits''' einfärben||||data-colors='["#dd3366","#ffcc00","#55aa44"]'
|}

==CSS-Klassen==
{| class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|notext}}
|}

==Beispiele==
Anzeige der CPU-Temperatur, welche aus SYSMON ausgelesen wird.
<syntaxhighlight lang="html">

<div class="col-40">

<div class="top-space-2x">CPU-Temperatur</div>

<div class="row top-space">
<div class="col-1-4 align-start rotate">
<div class="darker">Aktuell<br> </div>
<div data-type="label" data-device="Systemmonitor" data-get="cpu_temp" data-fix="1" data-unit="°C" class="top-space"></div>
</div>
<div class="col-1-4 align-start rotate">
<div class="darker">Min<br> </div>
<div data-type="label" data-device="Systemmonitor" data-get="cpu_temp_stat" data-part="1" data-fix="1" data-unit="°C" class="top-space"></div>
</div>
<div class="col-1-4 align-start rotate">
<div class="darker">Mittel<br>(5 Min)</div>
<div data-type="label" data-device="Systemmonitor" data-get="cpu_temp_stat" data-part="3" data-fix="1" data-unit="°C" class="top-space"></div>
</div>
<div class="col-1-4 align-start rotate">
<div class="darker">Max<br> </div>
<div data-type="label" data-device="Systemmonitor" data-get="cpu_temp_stat" data-part="2" data-fix="1" data-unit="°C" class="top-space"></div>
</div>
</div>

<div class="row">
<div class="col-1-4">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" style="margin-left: -20px !important;" class="inline darker showdeco"></div>
</div>
<div class="col-1-4">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp_stat" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" data-part="1" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div>
<div class="col-1-4">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp_stat" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" data-part="3" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div>
<div class="col-1-4">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp_stat" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" data-part="2" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div>
</div>

</div>
</syntaxhighlight>

[[Datei:Bsp_CPU_temp.png|600px]]

==Weitere Informationen==
*Ankündigung des Widgets in einem [https://forum.fhem.de/index.php/topic,80326.0.html Forumsbeitrag]
*Beispiel auf [https://github.com/knowthelist/fhem-tablet-ui/blob/master/test/test_scale.html GitHub]

[[Kategorie:FHEM Tablet UI V2|Scale]]

Datei:Bsp CPU temp.png

2025-02-03T17:39:10Z

Ulm32b: FTUI-Bsp. für Scale

== Beschreibung ==
FTUI-Bsp. für Scale

FTUI Widget Scale

2025-02-03T17:36:33Z

Ulm32b: Eränzungen in Tabelle, Beispiel

{{Todo|Vervollständigen}}
Das [[{{PAGENAME}}|Scale Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem eine horizontale oder vertikale Balkenanzeige erstellt werden kann.

<gallery>
File:ftui-widget-scale.png
File:ftui-widget-scale-red.png
File:ftui-widget-scale-vertical.png
</gallery>

==Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||FHEM-Device, dessen Reading angezeigt werden soll||||Sysmon (= Device vom Typ SYSMON)
|-
|'''data-get'''||Name des Readings, das den Wert enthält||STATE||cpu_temp
|-
|'''data-min'''||Minimaler Wert, der angezeigt werden soll||0||30
|-
|'''data-max'''||Maximaler Wert, der angezeigt werden soll, oder Name des Readings, das den Maximalwert enthält||100||90
|-
|'''data-orientation'''||Ausrichtung des Balkens||horizontal||data-orientation="vertical"
|-
|'''data-font-size'''||Schriftgröße||12||
|-
|'''data-tick'''||Abstand der Skalenstriche||1||
|-
|'''data-value-interval'''||Abstand der Skalenbeschriftung||50||
|-
|'''data-extra-tick'''||Abstand hervorgehobener Skalenstriche||10||
|-
|'''data-tick-color'''||||#eee||
|-
||'''data-limits-get'''||Herkunft dynamischer '''data-limits'''||||
|-
||'''data-limits'''||Array von Grenzen für '''data-colors'''||||data-limits='["30","60","80"]'
|-
||'''data-color'''||||#aa6900||
|-
|'''data-colors'''||Array von Farbwerten, welche die Anzeige entsprechend der Grenzwerte von '''data-limits''' einfärben||||data-colors='["#dd3366","#ffcc00","#55aa44"]'
|}

==CSS-Klassen==
{| class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|notext}}
|}

==Beispiele==
Anzeige der CPU-Temperatur, welche aus SYSMON ausgelesen wird.
<syntaxhighlight lang="html">
<div class="row">
<div class="col-1-4">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" style="margin-left: -20px !important;" class="inline darker showdeco"></div>
</div>
<div class="col-1-4">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp_stat" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" data-part="1" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div>
<div class="col-1-4">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp_stat" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" data-part="3" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div>
<div class="col-1-4">
<div data-type="scale" data-value-interval="10" data-orientation="vertical" data-handle-diameter="0" data-height="120" data-width="35" data-device="Systemmonitor" data-get="cpu_temp_stat" data-limits='["30","60","70"]' data-colors='["#22dd22","#dddd22","#dd2222"]' data-min="30" data-max="80" data-part="2" style="margin-left: -20px !important;" class="inline darker showdeco notext"></div>
</div>
</div>
</syntaxhighlight>
==Weitere Informationen==
*Ankündigung des Widgets in einem [https://forum.fhem.de/index.php/topic,80326.0.html Forumsbeitrag]
*Beispiel auf [https://github.com/knowthelist/fhem-tablet-ui/blob/master/test/test_scale.html GitHub]

[[Kategorie:FHEM Tablet UI V2|Scale]]

FTUI Widget Theme

2022-01-21T23:49:26Z

Ulm32b: Typo, Datierung "Bekannte Probleme"

Das [[{{PAGENAME}}|Theme Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem - gesteuert über ein Device - ein Stylesheet aktiviert und deaktiviert werden kann. Damit lassen sich kontextspezifische Designs realisieren, z.B. abhängig von [[FTUI Widget Homestatus|Homestatus]], Tageszeit, Jahreszeit, ...

<gallery>
File:FTUI_Theme_Tag.png
File:FTUI_Theme_Abend.png
File:FTUI_Theme_Nacht.png
</gallery>

==Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||FHEM-Device, dessen Reading ausgewertet werden soll||||
|-
|'''data-get'''||Name des Readings, das den Wert enthält||STATE||
|-
|'''data-get-on'''||Wert, bei dem die css-Datei aktiviert wird||true,1,on||
|-
|'''data-get-off'''||Wert, bei dem die css-Datei deaktiviert wird||!on||
|-
|'''href'''||Pfad und Name der angepassten css-Datei||||href="css/Layout_Tag.css"
|}

Das Widget muss im ''<Head>'' innerhalb eines ''<link rel="stylesheet" ...>'' angeordnet werden, vgl. Beispiel.
==Hinweise==
*Man darf die ''css/fhem-tablet-ui.css'' nicht deaktivieren.

==Beispiele==
===Vordefinierte Stylesheets===
Im Lieferumfang von FTUI sind bereits vordefinierte Stylesheets enthalten, welche direkt eingebunden werden können:
* fhem-blue-ui.css
* fhem-green-ui.css
* fhem-mobile-ui.css
* fhem-darkblue-ui.css
* fhem-darkgreen-ui.css
Zugehörige Beispielbilder siehe [[FHEM_Tablet_UI#Farben|Farben in FTUI]].

===Hintergrundfarbe bei Tag===
Tagsüber soll die Hintergrundfarbe geändert werden. Ausgewertet wird hierzu das FHEM-Device ''Twilight''. Bei Tageslicht nimmt dessen Reading ''light'' den Wert ''"6"'' an.
<syntaxhighlight lang="html">
defmod Daemmerung Twilight <latitude> <longitude>
</syntaxhighlight>

Die Datei ''"Layout_Tag.css"'' enthält die Farbdefinition:
<syntaxhighlight lang="html">
body {
background-color: #3A374A !important;
}
</syntaxhighlight>
In der HTML-Datei wird im ''<Head>'' das Widget platziert:
<syntaxhighlight lang="html">
<link rel="stylesheet" href="css/Layout_Tag.css" data-type="theme" data-device="Daemmerung" data-get="light"
data-get-on="6" data-get-off="!6" />
</syntaxhighlight>

===Umschaltung zwischen alternativen Stylesheets (hier day.css und night.css)===
<syntaxhighlight lang="html">
<link rel="stylesheet" href="css/day.css" data-type="theme"
data-device="ftui1" data-get="theme" data-get-on="day" data-get-off="!day" />
<link rel="stylesheet" href="css/night.css" data-type="theme"
data-device="ftui1" data-get="theme" data-get-on="night" data-get-off="!night" />
</syntaxhighlight>

===Hintergrundbilder für die Dämmerung===
Das FHEM-Device ''Twilight'' unterscheidet zwischen astronomischer, nautischer und bürgerlicher Dämmerung. Auf dieser Basis können Tagesanfang und -ende einfach mit abgestuften Hintergrundbildern verknüpft werden.
<gallery>
File:FTUI_Daemmerung_1.jpg
File:FTUI_Daemmerung_2.jpg
File:FTUI_Daemmerung_3.jpg
</gallery>

==Bekannte Probleme==
Das Umschalten der Stylesheets kann unter Umständen bei diversen Browsern nicht funktionieren.
Aus diesem Grunde sei empfohlen, parallel andere Internet-Browser zu testen.

Stand der getesteten Browser (9/2018)

{| class="wikitable"
|-
! Browser!! Version !! Funktion
|-
| Chrome || 69.0.3497.100 || OK
|-
| Mozilla Firefox || 62.0 || NOK
|-
| Internet Explorer || ? || ?
|-
| Microsoft Edge || ? || ?
|-
| UC/Browser || ? || ?
|-
| Opera || ? || ?
|-
| Safari || ? || ?
|}

==Weitere Informationen==
*Ausrollung des Widgets in einem [https://forum.fhem.de/index.php/topic,69259.0.html Forumsbeitrag]

[[Kategorie:FHEM Tablet UI|theme]]

FTUI Widget Theme

2022-01-21T23:46:32Z

Ulm32b: /* Bekannte Probleme */ Typo

Das [[{{PAGENAME}}|Theme Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem - gesteuert über ein Device - ein Stylesheet aktiviert und deaktiviert werden kann. Damit lassen sich kontextspezifische Designs realisieren, z.B. abhängig von [[FTUI Widget Homestatus|Homestatus]], Tageszeit, Jahreszeit, ...

<gallery>
File:FTUI_Theme_Tag.png
File:FTUI_Theme_Abend.png
File:FTUI_Theme_Nacht.png
</gallery>

==Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||FHEM-Device, dessen Reading ausgewertet werden soll||||
|-
|'''data-get'''||Name des Readings, das den Wert enthält||STATE||
|-
|'''data-get-on'''||Wert, bei dem die css-Datei aktiviert wird||true,1,on||
|-
|'''data-get-off'''||Wert, bei dem die css-Datei deaktiviert wird||!on||
|-
|'''href'''||Pfad und Name der angepassten css-Datei||||href="css/Layout_Tag.css"
|}

Das Widget muss im ''<Head>'' innerhalb eines ''<link rel="stylesheet" ...>'' angeordnet werden, vgl. Beispiel.
==Hinweise==
*Man darf die ''css/fhem-tablet-ui.css'' nicht deaktivieren.

==Beispiele==
===Vordefinierte Stylesheets===
Im Lieferumfang von FTUI sind bereits vordefinierte Stylesheets enthalten, welche direkt eingebunden werden können:
* fhem-blue-ui.css
* fhem-green-ui.css
* fhem-mobile-ui.css
* fhem-darkblue-ui.css
* fhem-darkgreen-ui.css
Zugehörige Beispielbilder siehe [[FHEM_Tablet_UI#Farben|Farben in FTUI]].

===Hintergrundfarbe bei Tag===
Tagsüber soll die Hintergrundfarbe geändert werden. Ausgewertet wird hierzu das FHEM-Device ''Twilight''. Bei Tageslicht nimmt dessen Reading ''light'' den Wert ''"6"'' an.
<syntaxhighlight lang="html">
defmod Daemmerung Twilight <latitude> <longitude>
</syntaxhighlight>

Die Datei ''"Layout_Tag.css"'' enthält die Farbdefinition:
<syntaxhighlight lang="html">
body {
background-color: #3A374A !important;
}
</syntaxhighlight>
In der HTML-Datei wird im ''<Head>'' das Widget platziert:
<syntaxhighlight lang="html">
<link rel="stylesheet" href="css/Layout_Tag.css" data-type="theme" data-device="Daemmerung" data-get="light"
data-get-on="6" data-get-off="!6" />
</syntaxhighlight>

===Umschaltung zwischen alternativen Stylesheets (hier day.css und night.css)===
<syntaxhighlight lang="html">
<link rel="stylesheet" href="css/day.css" data-type="theme"
data-device="ftui1" data-get="theme" data-get-on="day" data-get-off="!day" />
<link rel="stylesheet" href="css/night.css" data-type="theme"
data-device="ftui1" data-get="theme" data-get-on="night" data-get-off="!night" />
</syntaxhighlight>

===Hintergrundbilder für die Dämmerung===
Das FHEM-Device ''Twilight'' unterscheidet zwischen astronomischer, nautischer und bürgerlicher Dämmerung. Auf dieser Basis können Tagesanfang und -ende einfach mit abgestuften Hintergrundbildern verknüpft werden.
<gallery>
File:FTUI_Daemmerung_1.jpg
File:FTUI_Daemmerung_2.jpg
File:FTUI_Daemmerung_3.jpg
</gallery>

==Bekannte Probleme==
Das Umschalten der Stylesheets kann unter Umständen bei diversen Browsern nicht funktionieren.
Aus diesem Grunde sei empfohlen, parallel andere Internet-Browser zu testen.

Gegenwärtiger Stand der getesteten Browser

{| class="wikitable"
|-
! Browser!! Version !! Funktion
|-
| Chrome || 69.0.3497.100 || OK
|-
| Mozilla Firefox || 62.0 || NOK
|-
| Internet Explorer || ? || ?
|-
| Microsoft Edge || ? || ?
|-
| UC/Browser || ? || ?
|-
| Opera || ? || ?
|-
| Safari || ? || ?
|}

==Weitere Informationen==
*Ausrollung des Widgets in einem [https://forum.fhem.de/index.php/topic,69259.0.html Forumsbeitrag]

[[Kategorie:FHEM Tablet UI|theme]]

FTUI Widget Departure

2022-01-21T21:04:49Z

Ulm32b: Aktualisierung bei der Datenquelle; diverse kleinere Ergänzungen.

Das [[{{PAGENAME}}|Widget Departure]] ist ein Widget für [[FHEM Tablet UI]] zur Anzeige der Abfahrtszeiten von Bahn, Bus, Zug und Fähre. Der Entwickler orientierte sich beim Design an den Dresdner Verkehrsbetrieben bzw. am Verkehrsverbund Oberelbe.

<gallery widths="200" heights="250">
File:FTUI_Widget_Departure_01.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des FHEM-Devices||||
|-
|'''data-get'''||Name des Readings, welches die Daten bereitstellt. Dieser Name sollte keine Umlaute und das ß enthalten, weil sonst der automatische Refresh beim Wechsel auf die Seite unterbleibt, vgl. ''data-interval''||||
|-
|'''data-title'''||Überschrift, die in der Kopfzeile ausgegeben wird||data-get||data-title="Schloßallee"
|-
|'''data-cmd'''||Befehl, der an FHEM gesendet wird||'get'||
|-
|'''data-icon-color'''||Farbe des Icons||'#aa6900'||
|-
|'''data-text-color'''||Textfarbe der Verbindungsdaten||'#ddd'||
|-
|'''data-background-color'''||Hintergrundfarbe ||'#C0C0C0'||
|-
|'''data-icon'''||Icon für die Kopfzeile||(Symbol Haltestelle)||data-icon="fa-train", data-icon="fa-bus"
|-
|'''data-width'''||Feste Breite (in % or px)||'200px'||
|-
|'''data-height'''||Feste Höhe (in % or px)||'250px'||
|-
|'''data-interval'''||Zeitintervall für den refresh in s, bei '0' kein auto refresh; zusätzlich wird beim Laden der Seite und in Pagebutton beim Wechsel auf die Seite ein refresh ausgelöst||'120'||
|-
|'''data-refresh'''||wie data-interval||||
|}

==CSS-Klassen==
{|class="wikitable"
!Klasse
!Beschreibung
|-
|'''DB'''||Design Bahn AG
|-
|'''DVB'''||Design Dresdner Verkehrsbetriebe; data-icon sollte leer sein
|-
|'''VVO'''||VVO Design Verkehrsverbund Oberelbe; data-icon sollte leer sein
|-
|'''alternate'''||abwechselnd schattierte Zeilen
|-
|'''deptime'''||angezeigt wird die Abfahrtszeit anstelle der verbleibenden Zeit bis zur Abfahrt
|}
[[Datei:FTUI_Widget_Departure_03.png|700px]]

==Datenquelle==
Die Daten stammen in FHEM aus einer HTTPMOD-Abfrage, hier dargestellt an einem Beispiel aus Dresden:
<syntaxhighlight lang="html">
define VVO HTTPMOD none 0
attr VVO get02Name Postplatz
attr VVO get02URL http://widgets.vvo-online.de/abfahrtsmonitor/Abfahrten.do?ort=Dresden&hst=Postplatz&vz=0&lim=10
attr VVO get02Regex (\[\[.*\]\]).*
attr VVO timeout 30
</syntaxhighlight>

Auch die Daten anderer Verkehrsträger können genutzt werden. Entweder greift man hierzu direkt auf die Schnittstelle des Verkehrsträgers zu, was idR eine spezifische RegEx ([[Regulärer_Ausdruck]]) bedingt.

Oder man wählt folgenden allgemeineren Weg, welcher auf den Daten der App ''Öffi'' basiert: Zunächst ist der Provider für die Daten zu ermitteln. Die Liste der verfügbaren Provider erhält man mittels
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/provider
</syntaxhighlight>
Die Antwort lautet etwa:
<syntaxhighlight lang="html">
[{"aClass":"AvvAugsburgProvider","name":"AvvAugsburg"},{"aClass":"VvsProvider","name":"Vvs"},{"aClass":"WienProvider","name":"Wien"},{"aClass":"OntarioProvider","name":"Ontario"},{"aClass":"VvoProvider","name":"Vvo"},{"aClass":"ParisProvider","name":"Paris"},{"aClass":"VrsProvider","name":"Vrs"},{"aClass":"SbbProvider","name":"Sbb"},{"aClass":"QuebecProvider","name":"Quebec"},{"aClass":"BvgProvider","name":"Bvg"},{"aClass":"KvvProvider","name":"Kvv"},{"aClass":"DbProvider","name":"Db"},{"aClass":"BayernProvider","name":"Bayern"},{"aClass":"VgsProvider","name":"Vgs"},{"aClass":"DingProvider","name":"Ding"},{"aClass":"NvbwProvider","name":"Nvbw"},{"aClass":"LinzProvider","name":"Linz"},{"aClass":"FinlandProvider","name":"Finland"},{"aClass":"SydneyProvider","name":"Sydney"},{"aClass":"PlProvider","name":"Pl"},{"aClass":"GhanaProvider","name":"Ghana"},{"aClass":"MvvProvider","name":"Mvv"} ... ]
</syntaxhighlight>

Relevant ist die Bezeichnung hinter „name“, z.B. „Ding“. „Ding“ steht für „Donau-Iller-Nahverkehrsverbund“. Weil auch ländliche Gebiete meist in Verkehrsverbünde eingegliedert sind, besteht eine realistische Chance, einen Provider für den eigenen Standort zu finden. „Nvbw“ steht für „Nahverkehr Baden-Württemberg“. Bewährt hat sich auch „Db“. Der Wert „aClass“ ist hier nicht von Belang.

Anschließend ist die StationId für die gewünschte Haltestelle zu ermitteln, in diesem Beispiel die Haltestelle ''Sonnenfeld''. Hierzu dient folgende Abfrage:
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/station/suggest?q=Sonnenfeld&provider=Ding
</syntaxhighlight>
Als Antwort erhält man die StationId "9001258".

Testweise können damit die aktuellen Abfahrten abgerufen werden:
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/departure/FHEM?from=9001258&provider=Ding
</syntaxhighlight>

Die Einbindung in FHEM erfolgt wie nachfolgend beschrieben:
<syntaxhighlight lang="html">
define Departure_Sonnenfeld HTTPMOD none 0
attr Departure_Sonnenfeld get01Name Sonnenfeld
attr Departure_Sonnenfeld get01URL https://transport.stefan-biermann.de/publictransportapi/rest/departure/FHEM?from=9001258&provider=Ding
attr Departure_Sonnenfeld get01Regex (\[\[.*\]\]).*
attr Departure_Sonnenfeld timeout 30
</syntaxhighlight>

Es können mehrere Haltestellen in einem Device hinterlegt werden; hierzu einfach die drei Attribute ''get01Name, get01URL'' und ''get01Regex'' duplizieren und durchnummerieren. Dabei müssen natürlich Name und URL angepasst werden.

==Hinweise==
* Provider ändern bisweilen ihre Schnittstellendefinitionen. In diesem Fall sind Anpassungen vorzunehmen. Das Forum ist eine geeignete Plattform zur Problemlösung. Als sehr stabil hat sich die beschriebene verallgemeinerte Datenquelle erwiesen.
* Wie im Beispiel aus Dresden dargestellt, lässt sich die Anzahl der gelieferten Daten einstellen, z.B. ''...&lim=10''
* Probleme mit Sonderzeichen in den Richtungsangaben lassen sich wie folgt lösen:
:<code>attr xyz getDecode UTF-8</code>

==HTML==
<syntaxhighlight lang="html">
<div data-type="departure"
data-device="Departure_Sonnenfeld"
data-get="Sonnenfeld"
data-icon="fa-bus"
data-interval="60">
</div>
</syntaxhighlight>
[[Datei:FTUI_Widget_Departure_02.png|150px]]

==Beispiele==
===Umschalten zwischen relativer und absoluter Abfahrtszeit===
Dieses Feature ist im Widget selbst nicht implementiert, lässt sich aber mittels [[FTUI Widget Classchanger]] und [[FTUI Widget Checkbox]] umsetzen. Hierbei wird die gewünschte Ansicht ein- und die andere ausgeblendet.

<syntaxhighlight lang="html">
define Nahverkehr_Umschalter_Zeitangabe dummy
</syntaxhighlight>

<syntaxhighlight lang="html">
<div class="vbox">

<div data-type="classchanger" data-device="Nahverkehr_Umschalter_Zeitangabe" data-get-on="on" data-on-class="hide" data-off-class="cell">
<div data-type="departure"
data-device="..."
...
class="alternate">
</div>
</div>

<div data-type="classchanger" data-device="Nahverkehr_Umschalter_Zeitangabe" data-get-on="off" data-on-class="hide" data-off-class="cell">
<div data-type="departure"
data-device="..."
...
class="alternate deptime">
</div>
</div>

<div class="hbox">
<div data-type="label" class="inline top-space" data-limits-get="Nahverkehr_Umschalter_Zeitangabe:STATE" data-limits='["on", "off"]' data-colors='["#8C8C8C", "white"]'>Abfahrt in ... Min.</div>

<div data-type="checkbox" class="big inline" data-on-background-color="grey" data-off-background-color="grey" data-device="Nahverkehr_Umschalter_Zeitangabe"></div>

<div data-type="label" class="inline top-space" data-limits-get="Nahverkehr_Umschalter_Zeitangabe:STATE" data-limits='["off", "on"]' data-colors='["#8C8C8C", "white"]'>Abfahrt um ...</div>
</div>

</div>
</syntaxhighlight>

<gallery widths="200" heights="250">
FTUI Widget departure classchanger 1.png
FTUI Widget departure classchanger 2.png
</gallery>

===Filtern von Zielen===
Die ausgegebenen Ergebnisse lassen sich direkt in der HTTPMOD-Abfrage filtern.
====Herausfiltern unerwünschter Relationen====
Hierzu nutzt man das Attribut ''get01Expr'' (ggf. auch ''get02Expr'' etc.) und füllt es mit
<syntaxhighlight lang="html">
{$val=~s/\[[^\[]*("Parkstraße",|"Schlossallee",|"100",)[^\]]*\],?//g; $val=~s/\],\]/]]/; return $val;}
</syntaxhighlight>
In diesem Beispiel werden alle Abfahrten entfernt, die "Parkstraße" oder "Schlossallee" oder die Linie "100" enthalten.

====Auswahl erwünschter Relationen====
<syntaxhighlight lang="html">
{$val="[".join(',',$val=~/(\[[^\[]*(?:"Parkstraße",|"Schlossallee",|"100",)[^\]]*\])/g)."]"; return $val;}
</syntaxhighlight>
Hier werden nur die Abfahrten "Parkstraße" und "Schlossallee" und Linie "100" angegeben.

Zu Fallstricken bei der Eingabe von Zielen vgl. [https://forum.fhem.de/index.php/topic,48255.msg1014192.html#msg1014192 FHEM-Forum]

==Links==
FHEM Wiki [[Departure]]

[[Kategorie:FHEM Tablet UI|Departure]]

FTUI Widget Departure

2022-01-21T20:01:01Z

Ulm32b: Bei den Filtern auch Liniennummern ermöglicht.

Das [[{{PAGENAME}}|Widget Departure]] ist ein Widget für [[FHEM Tablet UI]] zur Anzeige der Abfahrtszeiten von Bahn, Bus, Zug und Fähre. Der Entwickler orientierte sich beim Design an den Dresdner Verkehrsbetrieben bzw. am Verkehrsverbund Oberelbe.

<gallery widths="200" heights="250">
File:FTUI_Widget_Departure_01.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des FHEM-Devices||||
|-
|'''data-get'''||Name des Readings, welches die Daten bereitstellt. Dieser Name sollte keine Umlaute und das ß enthalten, weil sonst der automatische Refresh beim Wechsel auf die Seite unterbleibt, vgl. ''data-interval''||||
|-
|'''data-title'''||Überschrift, die in der Kopfzeile ausgegeben wird||data-get||data-title="Schloßallee"
|-
|'''data-cmd'''||Befehl, der an FHEM gesendet wird||'get'||
|-
|'''data-icon-color'''||Farbe des Icons||'#aa6900'||
|-
|'''data-text-color'''||Textfarbe der Verbindungsdaten||'#ddd'||
|-
|'''data-background-color'''||Hintergrundfarbe ||'#C0C0C0'||
|-
|'''data-icon'''||Icon für die Kopfzeile||(Symbol Haltestelle)||data-icon="fa-train", data-icon="fa-bus"
|-
|'''data-width'''||Feste Breite (in % or px)||'200px'||
|-
|'''data-height'''||Feste Höhe (in % or px)||'250px'||
|-
|'''data-interval'''||Zeitintervall für den refresh in s, bei '0' kein auto refresh; zusätzlich wird beim Laden der Seite und in Pagebutton beim Wechsel auf die Seite ein refresh ausgelöst||'120'||
|-
|'''data-refresh'''||wie data-interval||||
|}

==CSS-Klassen==
{|class="wikitable"
!Klasse
!Beschreibung
|-
|'''DB'''||Design Bahn AG
|-
|'''DVB'''||Design Dresdner Verkehrsbetriebe; data-icon sollte leer sein
|-
|'''VVO'''||VVO Design Verkehrsverbund Oberelbe; data-icon sollte leer sein
|-
|'''alternate'''||abwechselnd schattierte Zeilen
|-
|'''deptime'''||angezeigt wird die Abfahrtszeit anstelle der verbleibenden Zeit bis zur Abfahrt
|}
[[Datei:FTUI_Widget_Departure_03.png|700px]]

==Hinweise==
* Provider ändern bisweilen ihre Schnittstellendefinitionen mit Auswirkungen auf den nachfolgend beschriebenen Informationsfluss. In diesem Fall sind Anpassungen vorzunehmen. Das Forum ist eine geeignete Plattform zur Klärung des Sachverhaltes.
* Probleme mit Sonderzeichen in den Richtungsangaben lassen sich gemäß {{Link2Forum|Topic=48255|Message=1135329|LinkText=dieses Hinweises im Forum}} wie folgt lösen:
:<code>attr xyz getDecode UTF-8</code>

==Datenquelle==
Die Daten stammen in FHEM aus einer HTTPMOD-Abfrage, hier dargestellt an einem Beispiel aus Dresden:
<syntaxhighlight lang="html">
define VVO HTTPMOD none 0
attr VVO get02Name Postplatz
attr VVO get02URL http://widgets.vvo-online.de/abfahrtsmonitor/Abfahrten.do?ort=Dresden&hst=Postplatz&vz=0&lim=10
attr VVO get02Regex (\[\[.*\]\]).*
attr VVO timeout 30
</syntaxhighlight>

Auch die Daten anderer Verkehrsträger können genutzt werden. Entweder greift man hierzu direkt auf die Schnittstelle des Verkehrsträgers zu, was idR eine spezifische RegEx ([[Regulärer_Ausdruck]]) bedingt.

Oder man wählt folgenden allgemeineren Weg, welcher auf den Daten der App ''Öffi'' basiert: Zunächst ist der Provider für die Daten zu ermitteln. Die Liste der verfügbaren Provider erhält man mittels
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/provider
</syntaxhighlight>
Die Antwort lautet etwa:
<syntaxhighlight lang="html">
[{"name":"Bahn","aClass":"BahnProvider"},{"name":"Gvh","aClass":"GvhProvider"},{"name":"Vgn","aClass":"VgnProvider"},{"name":"Kvv","aClass":"KvvProvider"},{"name":"Vbl","aClass":"VblProvider"},{"name":"Dub","aClass":"DubProvider"},{"name":"Vms","aClass":"VmsProvider"},{"name":"Bsvag","aClass":"BsvagProvider"}, [...]
</syntaxhighlight>

Relevant ist die Bezeichnung hinter „name“, z.B. „Ding“. „Ding“ steht für „Donau-Iller-Nahverkehrsverbund“. Weil auch ländliche Gebiete meist in Verkehrsverbünde eingegliedert sind, besteht eine realistische Chance, einen Provider für den eigenen Standort zu finden. In größeren Städten kann oft auch der Provider „Bahn“ genutzt werden. Der Wert „aClass“ ist hier nicht von Belang.

Anschließend ist die StationId für die gewünschte Haltestelle zu ermitteln, in diesem Beispiel die Haltestelle ''Sonnenfeld''. Hierzu dient folgende Abfrage:
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/station/suggest?q=Sonnenfeld&provider=Ding
</syntaxhighlight>
Als Antwort erhält man die StationId "9001258".

Testweise können damit die aktuellen Abfahrten abgerufen werden:
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/departure/FHEM?from=9001258&provider=Ding
</syntaxhighlight>

Die Einbindung in FHEM erfolgt wie nachfolgend beschrieben:
<syntaxhighlight lang="html">
define Departure_Sonnenfeld HTTPMOD none 0
attr Departure_Sonnenfeld get01Name Sonnenfeld
attr Departure_Sonnenfeld get01URL https://transport.stefan-biermann.de/publictransportapi/rest/departure/FHEM?from=9001258&provider=Ding
attr Departure_Sonnenfeld get01Regex (\[\[.*\]\]).*
attr Departure_Sonnenfeld timeout 30
</syntaxhighlight>

Es können mehrere Haltestellen in einem Device hinterlegt werden; hierzu einfach die drei Attribute ''get01Name, get01URL'' und ''get01Regex'' duplizieren und durchnummerieren. Dabei müssen natürlich Name und URL angepasst werden.

==HTML==
<syntaxhighlight lang="html">
<div data-type="departure"
data-device="Departure_Sonnenfeld"
data-get="Sonnenfeld"
data-icon="fa-bus"
data-interval="60">
</div>
</syntaxhighlight>
[[Datei:FTUI_Widget_Departure_02.png|150px]]

==Beispiele==
===Umschalten zwischen relativer und absoluter Abfahrtszeit===
Dieses Feature ist im Widget selbst nicht implementiert, lässt sich aber mittels [[FTUI Widget Classchanger]] und [[FTUI Widget Checkbox]] umsetzen. Hierbei wird die gewünschte Ansicht ein- und die andere ausgeblendet.

<syntaxhighlight lang="html">
define Nahverkehr_Umschalter_Zeitangabe dummy
</syntaxhighlight>

<syntaxhighlight lang="html">
<div class="vbox">

<div data-type="classchanger" data-device="Nahverkehr_Umschalter_Zeitangabe" data-get-on="on" data-on-class="hide" data-off-class="cell">
<div data-type="departure"
data-device="..."
...
class="alternate">
</div>
</div>

<div data-type="classchanger" data-device="Nahverkehr_Umschalter_Zeitangabe" data-get-on="off" data-on-class="hide" data-off-class="cell">
<div data-type="departure"
data-device="..."
...
class="alternate deptime">
</div>
</div>

<div class="hbox">
<div data-type="label" class="inline top-space" data-limits-get="Nahverkehr_Umschalter_Zeitangabe:STATE" data-limits='["on", "off"]' data-colors='["#8C8C8C", "white"]'>Abfahrt in ... Min.</div>

<div data-type="checkbox" class="big inline" data-on-background-color="grey" data-off-background-color="grey" data-device="Nahverkehr_Umschalter_Zeitangabe"></div>

<div data-type="label" class="inline top-space" data-limits-get="Nahverkehr_Umschalter_Zeitangabe:STATE" data-limits='["off", "on"]' data-colors='["#8C8C8C", "white"]'>Abfahrt um ...</div>
</div>

</div>
</syntaxhighlight>

<gallery widths="200" heights="250">
FTUI Widget departure classchanger 1.png
FTUI Widget departure classchanger 2.png
</gallery>

===Filtern von Zielen===
Die ausgegebenen Ergebnisse lassen sich direkt in der HTTPMOD-Abfrage filtern.
====Herausfiltern unerwünschter Relationen====
Hierzu nutzt man das Attribut ''get01Expr'' (ggf. auch ''get02Expr'' etc.) und füllt es mit
<syntaxhighlight lang="html">
{$val=~s/\[[^\[]*("Parkstraße",|"Schlossallee",|"100",)[^\]]*\],?//g; $val=~s/\],\]/]]/; return $val;}
</syntaxhighlight>
In diesem Beispiel werden alle Abfahrten entfernt, die "Parkstraße" oder "Schlossallee" oder die Linie "100" enthalten.

====Auswahl erwünschter Relationen====
<syntaxhighlight lang="html">
{$val="[".join(',',$val=~/(\[[^\[]*(?:"Parkstraße",|"Schlossallee",|"100",)[^\]]*\])/g)."]"; return $val;}
</syntaxhighlight>
Hier werden nur die Abfahrten "Parkstraße" und "Schlossallee" und Linie "100" angegeben.

Zu Fallstricken bei der Eingabe von Zielen vgl. [https://forum.fhem.de/index.php/topic,48255.msg1014192.html#msg1014192 FHEM-Forum]

==Links==
FHEM Wiki [[Departure]]

[[Kategorie:FHEM Tablet UI|Departure]]

FTUI Widget Departure

2022-01-21T19:47:21Z

Ulm32b: /* Auswahl erwünschter Relationen */ Leerzeichen in Formel entfernt

Das [[{{PAGENAME}}|Widget Departure]] ist ein Widget für [[FHEM Tablet UI]] zur Anzeige der Abfahrtszeiten von Bahn, Bus, Zug und Fähre. Der Entwickler orientierte sich beim Design an den Dresdner Verkehrsbetrieben bzw. am Verkehrsverbund Oberelbe.

<gallery widths="200" heights="250">
File:FTUI_Widget_Departure_01.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des FHEM-Devices||||
|-
|'''data-get'''||Name des Readings, welches die Daten bereitstellt. Dieser Name sollte keine Umlaute und das ß enthalten, weil sonst der automatische Refresh beim Wechsel auf die Seite unterbleibt, vgl. ''data-interval''||||
|-
|'''data-title'''||Überschrift, die in der Kopfzeile ausgegeben wird||data-get||data-title="Schloßallee"
|-
|'''data-cmd'''||Befehl, der an FHEM gesendet wird||'get'||
|-
|'''data-icon-color'''||Farbe des Icons||'#aa6900'||
|-
|'''data-text-color'''||Textfarbe der Verbindungsdaten||'#ddd'||
|-
|'''data-background-color'''||Hintergrundfarbe ||'#C0C0C0'||
|-
|'''data-icon'''||Icon für die Kopfzeile||(Symbol Haltestelle)||data-icon="fa-train", data-icon="fa-bus"
|-
|'''data-width'''||Feste Breite (in % or px)||'200px'||
|-
|'''data-height'''||Feste Höhe (in % or px)||'250px'||
|-
|'''data-interval'''||Zeitintervall für den refresh in s, bei '0' kein auto refresh; zusätzlich wird beim Laden der Seite und in Pagebutton beim Wechsel auf die Seite ein refresh ausgelöst||'120'||
|-
|'''data-refresh'''||wie data-interval||||
|}

==CSS-Klassen==
{|class="wikitable"
!Klasse
!Beschreibung
|-
|'''DB'''||Design Bahn AG
|-
|'''DVB'''||Design Dresdner Verkehrsbetriebe; data-icon sollte leer sein
|-
|'''VVO'''||VVO Design Verkehrsverbund Oberelbe; data-icon sollte leer sein
|-
|'''alternate'''||abwechselnd schattierte Zeilen
|-
|'''deptime'''||angezeigt wird die Abfahrtszeit anstelle der verbleibenden Zeit bis zur Abfahrt
|}
[[Datei:FTUI_Widget_Departure_03.png|700px]]

==Hinweise==
* Provider ändern bisweilen ihre Schnittstellendefinitionen mit Auswirkungen auf den nachfolgend beschriebenen Informationsfluss. In diesem Fall sind Anpassungen vorzunehmen. Das Forum ist eine geeignete Plattform zur Klärung des Sachverhaltes.
* Probleme mit Sonderzeichen in den Richtungsangaben lassen sich gemäß {{Link2Forum|Topic=48255|Message=1135329|LinkText=dieses Hinweises im Forum}} wie folgt lösen:
:<code>attr xyz getDecode UTF-8</code>

==Datenquelle==
Die Daten stammen in FHEM aus einer HTTPMOD-Abfrage, hier dargestellt an einem Beispiel aus Dresden:
<syntaxhighlight lang="html">
define VVO HTTPMOD none 0
attr VVO get02Name Postplatz
attr VVO get02URL http://widgets.vvo-online.de/abfahrtsmonitor/Abfahrten.do?ort=Dresden&hst=Postplatz&vz=0&lim=10
attr VVO get02Regex (\[\[.*\]\]).*
attr VVO timeout 30
</syntaxhighlight>

Auch die Daten anderer Verkehrsträger können genutzt werden. Entweder greift man hierzu direkt auf die Schnittstelle des Verkehrsträgers zu, was idR eine spezifische RegEx ([[Regulärer_Ausdruck]]) bedingt.

Oder man wählt folgenden allgemeineren Weg, welcher auf den Daten der App ''Öffi'' basiert: Zunächst ist der Provider für die Daten zu ermitteln. Die Liste der verfügbaren Provider erhält man mittels
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/provider
</syntaxhighlight>
Die Antwort lautet etwa:
<syntaxhighlight lang="html">
[{"name":"Bahn","aClass":"BahnProvider"},{"name":"Gvh","aClass":"GvhProvider"},{"name":"Vgn","aClass":"VgnProvider"},{"name":"Kvv","aClass":"KvvProvider"},{"name":"Vbl","aClass":"VblProvider"},{"name":"Dub","aClass":"DubProvider"},{"name":"Vms","aClass":"VmsProvider"},{"name":"Bsvag","aClass":"BsvagProvider"}, [...]
</syntaxhighlight>

Relevant ist die Bezeichnung hinter „name“, z.B. „Ding“. „Ding“ steht für „Donau-Iller-Nahverkehrsverbund“. Weil auch ländliche Gebiete meist in Verkehrsverbünde eingegliedert sind, besteht eine realistische Chance, einen Provider für den eigenen Standort zu finden. In größeren Städten kann oft auch der Provider „Bahn“ genutzt werden. Der Wert „aClass“ ist hier nicht von Belang.

Anschließend ist die StationId für die gewünschte Haltestelle zu ermitteln, in diesem Beispiel die Haltestelle ''Sonnenfeld''. Hierzu dient folgende Abfrage:
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/station/suggest?q=Sonnenfeld&provider=Ding
</syntaxhighlight>
Als Antwort erhält man die StationId "9001258".

Testweise können damit die aktuellen Abfahrten abgerufen werden:
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/departure/FHEM?from=9001258&provider=Ding
</syntaxhighlight>

Die Einbindung in FHEM erfolgt wie nachfolgend beschrieben:
<syntaxhighlight lang="html">
define Departure_Sonnenfeld HTTPMOD none 0
attr Departure_Sonnenfeld get01Name Sonnenfeld
attr Departure_Sonnenfeld get01URL https://transport.stefan-biermann.de/publictransportapi/rest/departure/FHEM?from=9001258&provider=Ding
attr Departure_Sonnenfeld get01Regex (\[\[.*\]\]).*
attr Departure_Sonnenfeld timeout 30
</syntaxhighlight>

Es können mehrere Haltestellen in einem Device hinterlegt werden; hierzu einfach die drei Attribute ''get01Name, get01URL'' und ''get01Regex'' duplizieren und durchnummerieren. Dabei müssen natürlich Name und URL angepasst werden.

==HTML==
<syntaxhighlight lang="html">
<div data-type="departure"
data-device="Departure_Sonnenfeld"
data-get="Sonnenfeld"
data-icon="fa-bus"
data-interval="60">
</div>
</syntaxhighlight>
[[Datei:FTUI_Widget_Departure_02.png|150px]]

==Beispiele==
===Umschalten zwischen relativer und absoluter Abfahrtszeit===
Dieses Feature ist im Widget selbst nicht implementiert, lässt sich aber mittels [[FTUI Widget Classchanger]] und [[FTUI Widget Checkbox]] umsetzen. Hierbei wird die gewünschte Ansicht ein- und die andere ausgeblendet.

<syntaxhighlight lang="html">
define Nahverkehr_Umschalter_Zeitangabe dummy
</syntaxhighlight>

<syntaxhighlight lang="html">
<div class="vbox">

<div data-type="classchanger" data-device="Nahverkehr_Umschalter_Zeitangabe" data-get-on="on" data-on-class="hide" data-off-class="cell">
<div data-type="departure"
data-device="..."
...
class="alternate">
</div>
</div>

<div data-type="classchanger" data-device="Nahverkehr_Umschalter_Zeitangabe" data-get-on="off" data-on-class="hide" data-off-class="cell">
<div data-type="departure"
data-device="..."
...
class="alternate deptime">
</div>
</div>

<div class="hbox">
<div data-type="label" class="inline top-space" data-limits-get="Nahverkehr_Umschalter_Zeitangabe:STATE" data-limits='["on", "off"]' data-colors='["#8C8C8C", "white"]'>Abfahrt in ... Min.</div>

<div data-type="checkbox" class="big inline" data-on-background-color="grey" data-off-background-color="grey" data-device="Nahverkehr_Umschalter_Zeitangabe"></div>

<div data-type="label" class="inline top-space" data-limits-get="Nahverkehr_Umschalter_Zeitangabe:STATE" data-limits='["off", "on"]' data-colors='["#8C8C8C", "white"]'>Abfahrt um ...</div>
</div>

</div>
</syntaxhighlight>

<gallery widths="200" heights="250">
FTUI Widget departure classchanger 1.png
FTUI Widget departure classchanger 2.png
</gallery>

===Filtern von Zielen===
Die ausgegebenen Ergebnisse lassen sich direkt in der HTTPMOD-Abfrage filtern.
====Herausfiltern unerwünschter Relationen====
Hierzu nutzt man das Attribut ''get01Expr'' (ggf. auch ''get02Expr'' etc.) und füllt es mit
<syntaxhighlight lang="html">
{$val=~s/\[[^\[]*("Parkstraße",|"Schlossallee",)[^\]]*\],?//g; $val=~s/\],\]/]]/; return $val;}
</syntaxhighlight>
In diesem Beispiel werden alle Ziele entfernt, die "Parkstraße" oder "Schlossallee" enthalten.

====Auswahl erwünschter Relationen====
<syntaxhighlight lang="html">
{$val="[".join(',',$val=~/(\[[^\[]*(?:"Parkstraße"|"Schlossallee")[^\]]*\])/g)."]"; return $val;}
</syntaxhighlight>
Hier werden nur die Abfahrten mit den Zielen "Parkstraße" oder "Schlossallee" angegeben.

Zu Fallstricken bei der Eingabe von Zielen vgl. [https://forum.fhem.de/index.php/topic,48255.msg1014192.html#msg1014192 FHEM-Forum]

==Links==
FHEM Wiki [[Departure]]

[[Kategorie:FHEM Tablet UI|Departure]]

FTUI Widget Departure

2022-01-21T19:46:15Z

Ulm32b: /* Herausfiltern unerwünschter Relationen */ Leerzeichen in Formel entfernt

Das [[{{PAGENAME}}|Widget Departure]] ist ein Widget für [[FHEM Tablet UI]] zur Anzeige der Abfahrtszeiten von Bahn, Bus, Zug und Fähre. Der Entwickler orientierte sich beim Design an den Dresdner Verkehrsbetrieben bzw. am Verkehrsverbund Oberelbe.

<gallery widths="200" heights="250">
File:FTUI_Widget_Departure_01.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des FHEM-Devices||||
|-
|'''data-get'''||Name des Readings, welches die Daten bereitstellt. Dieser Name sollte keine Umlaute und das ß enthalten, weil sonst der automatische Refresh beim Wechsel auf die Seite unterbleibt, vgl. ''data-interval''||||
|-
|'''data-title'''||Überschrift, die in der Kopfzeile ausgegeben wird||data-get||data-title="Schloßallee"
|-
|'''data-cmd'''||Befehl, der an FHEM gesendet wird||'get'||
|-
|'''data-icon-color'''||Farbe des Icons||'#aa6900'||
|-
|'''data-text-color'''||Textfarbe der Verbindungsdaten||'#ddd'||
|-
|'''data-background-color'''||Hintergrundfarbe ||'#C0C0C0'||
|-
|'''data-icon'''||Icon für die Kopfzeile||(Symbol Haltestelle)||data-icon="fa-train", data-icon="fa-bus"
|-
|'''data-width'''||Feste Breite (in % or px)||'200px'||
|-
|'''data-height'''||Feste Höhe (in % or px)||'250px'||
|-
|'''data-interval'''||Zeitintervall für den refresh in s, bei '0' kein auto refresh; zusätzlich wird beim Laden der Seite und in Pagebutton beim Wechsel auf die Seite ein refresh ausgelöst||'120'||
|-
|'''data-refresh'''||wie data-interval||||
|}

==CSS-Klassen==
{|class="wikitable"
!Klasse
!Beschreibung
|-
|'''DB'''||Design Bahn AG
|-
|'''DVB'''||Design Dresdner Verkehrsbetriebe; data-icon sollte leer sein
|-
|'''VVO'''||VVO Design Verkehrsverbund Oberelbe; data-icon sollte leer sein
|-
|'''alternate'''||abwechselnd schattierte Zeilen
|-
|'''deptime'''||angezeigt wird die Abfahrtszeit anstelle der verbleibenden Zeit bis zur Abfahrt
|}
[[Datei:FTUI_Widget_Departure_03.png|700px]]

==Hinweise==
* Provider ändern bisweilen ihre Schnittstellendefinitionen mit Auswirkungen auf den nachfolgend beschriebenen Informationsfluss. In diesem Fall sind Anpassungen vorzunehmen. Das Forum ist eine geeignete Plattform zur Klärung des Sachverhaltes.
* Probleme mit Sonderzeichen in den Richtungsangaben lassen sich gemäß {{Link2Forum|Topic=48255|Message=1135329|LinkText=dieses Hinweises im Forum}} wie folgt lösen:
:<code>attr xyz getDecode UTF-8</code>

==Datenquelle==
Die Daten stammen in FHEM aus einer HTTPMOD-Abfrage, hier dargestellt an einem Beispiel aus Dresden:
<syntaxhighlight lang="html">
define VVO HTTPMOD none 0
attr VVO get02Name Postplatz
attr VVO get02URL http://widgets.vvo-online.de/abfahrtsmonitor/Abfahrten.do?ort=Dresden&hst=Postplatz&vz=0&lim=10
attr VVO get02Regex (\[\[.*\]\]).*
attr VVO timeout 30
</syntaxhighlight>

Auch die Daten anderer Verkehrsträger können genutzt werden. Entweder greift man hierzu direkt auf die Schnittstelle des Verkehrsträgers zu, was idR eine spezifische RegEx ([[Regulärer_Ausdruck]]) bedingt.

Oder man wählt folgenden allgemeineren Weg, welcher auf den Daten der App ''Öffi'' basiert: Zunächst ist der Provider für die Daten zu ermitteln. Die Liste der verfügbaren Provider erhält man mittels
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/provider
</syntaxhighlight>
Die Antwort lautet etwa:
<syntaxhighlight lang="html">
[{"name":"Bahn","aClass":"BahnProvider"},{"name":"Gvh","aClass":"GvhProvider"},{"name":"Vgn","aClass":"VgnProvider"},{"name":"Kvv","aClass":"KvvProvider"},{"name":"Vbl","aClass":"VblProvider"},{"name":"Dub","aClass":"DubProvider"},{"name":"Vms","aClass":"VmsProvider"},{"name":"Bsvag","aClass":"BsvagProvider"}, [...]
</syntaxhighlight>

Relevant ist die Bezeichnung hinter „name“, z.B. „Ding“. „Ding“ steht für „Donau-Iller-Nahverkehrsverbund“. Weil auch ländliche Gebiete meist in Verkehrsverbünde eingegliedert sind, besteht eine realistische Chance, einen Provider für den eigenen Standort zu finden. In größeren Städten kann oft auch der Provider „Bahn“ genutzt werden. Der Wert „aClass“ ist hier nicht von Belang.

Anschließend ist die StationId für die gewünschte Haltestelle zu ermitteln, in diesem Beispiel die Haltestelle ''Sonnenfeld''. Hierzu dient folgende Abfrage:
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/station/suggest?q=Sonnenfeld&provider=Ding
</syntaxhighlight>
Als Antwort erhält man die StationId "9001258".

Testweise können damit die aktuellen Abfahrten abgerufen werden:
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/departure/FHEM?from=9001258&provider=Ding
</syntaxhighlight>

Die Einbindung in FHEM erfolgt wie nachfolgend beschrieben:
<syntaxhighlight lang="html">
define Departure_Sonnenfeld HTTPMOD none 0
attr Departure_Sonnenfeld get01Name Sonnenfeld
attr Departure_Sonnenfeld get01URL https://transport.stefan-biermann.de/publictransportapi/rest/departure/FHEM?from=9001258&provider=Ding
attr Departure_Sonnenfeld get01Regex (\[\[.*\]\]).*
attr Departure_Sonnenfeld timeout 30
</syntaxhighlight>

Es können mehrere Haltestellen in einem Device hinterlegt werden; hierzu einfach die drei Attribute ''get01Name, get01URL'' und ''get01Regex'' duplizieren und durchnummerieren. Dabei müssen natürlich Name und URL angepasst werden.

==HTML==
<syntaxhighlight lang="html">
<div data-type="departure"
data-device="Departure_Sonnenfeld"
data-get="Sonnenfeld"
data-icon="fa-bus"
data-interval="60">
</div>
</syntaxhighlight>
[[Datei:FTUI_Widget_Departure_02.png|150px]]

==Beispiele==
===Umschalten zwischen relativer und absoluter Abfahrtszeit===
Dieses Feature ist im Widget selbst nicht implementiert, lässt sich aber mittels [[FTUI Widget Classchanger]] und [[FTUI Widget Checkbox]] umsetzen. Hierbei wird die gewünschte Ansicht ein- und die andere ausgeblendet.

<syntaxhighlight lang="html">
define Nahverkehr_Umschalter_Zeitangabe dummy
</syntaxhighlight>

<syntaxhighlight lang="html">
<div class="vbox">

<div data-type="classchanger" data-device="Nahverkehr_Umschalter_Zeitangabe" data-get-on="on" data-on-class="hide" data-off-class="cell">
<div data-type="departure"
data-device="..."
...
class="alternate">
</div>
</div>

<div data-type="classchanger" data-device="Nahverkehr_Umschalter_Zeitangabe" data-get-on="off" data-on-class="hide" data-off-class="cell">
<div data-type="departure"
data-device="..."
...
class="alternate deptime">
</div>
</div>

<div class="hbox">
<div data-type="label" class="inline top-space" data-limits-get="Nahverkehr_Umschalter_Zeitangabe:STATE" data-limits='["on", "off"]' data-colors='["#8C8C8C", "white"]'>Abfahrt in ... Min.</div>

<div data-type="checkbox" class="big inline" data-on-background-color="grey" data-off-background-color="grey" data-device="Nahverkehr_Umschalter_Zeitangabe"></div>

<div data-type="label" class="inline top-space" data-limits-get="Nahverkehr_Umschalter_Zeitangabe:STATE" data-limits='["off", "on"]' data-colors='["#8C8C8C", "white"]'>Abfahrt um ...</div>
</div>

</div>
</syntaxhighlight>

<gallery widths="200" heights="250">
FTUI Widget departure classchanger 1.png
FTUI Widget departure classchanger 2.png
</gallery>

===Filtern von Zielen===
Die ausgegebenen Ergebnisse lassen sich direkt in der HTTPMOD-Abfrage filtern.
====Herausfiltern unerwünschter Relationen====
Hierzu nutzt man das Attribut ''get01Expr'' (ggf. auch ''get02Expr'' etc.) und füllt es mit
<syntaxhighlight lang="html">
{$val=~s/\[[^\[]*("Parkstraße",|"Schlossallee",)[^\]]*\],?//g; $val=~s/\],\]/]]/; return $val;}
</syntaxhighlight>
In diesem Beispiel werden alle Ziele entfernt, die "Parkstraße" oder "Schlossallee" enthalten.

====Auswahl erwünschter Relationen====
<syntaxhighlight lang="html">
{$val = "[".join(',',$val = ~/(\[[^\[]*(?:"Parkstraße"|"Schlossallee")[^\]]*\])/g)."]"; return $val;}
</syntaxhighlight>
Hier werden nur die Abfahrten mit den Zielen "Parkstraße" oder "Schlossallee" angegeben.

Zu Fallstricken bei der Eingabe von Zielen vgl. [https://forum.fhem.de/index.php/topic,48255.msg1014192.html#msg1014192 FHEM-Forum]

==Links==
FHEM Wiki [[Departure]]

[[Kategorie:FHEM Tablet UI|Departure]]

FTUI Widget Departure

2022-01-20T23:29:10Z

Ulm32b: Filter hinzugefügt

Das [[{{PAGENAME}}|Widget Departure]] ist ein Widget für [[FHEM Tablet UI]] zur Anzeige der Abfahrtszeiten von Bahn, Bus, Zug und Fähre. Der Entwickler orientierte sich beim Design an den Dresdner Verkehrsbetrieben bzw. am Verkehrsverbund Oberelbe.

<gallery widths="200" heights="250">
File:FTUI_Widget_Departure_01.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des FHEM-Devices||||
|-
|'''data-get'''||Name des Readings, welches die Daten bereitstellt. Dieser Name sollte keine Umlaute und das ß enthalten, weil sonst der automatische Refresh beim Wechsel auf die Seite unterbleibt, vgl. ''data-interval''||||
|-
|'''data-title'''||Überschrift, die in der Kopfzeile ausgegeben wird||data-get||data-title="Schloßallee"
|-
|'''data-cmd'''||Befehl, der an FHEM gesendet wird||'get'||
|-
|'''data-icon-color'''||Farbe des Icons||'#aa6900'||
|-
|'''data-text-color'''||Textfarbe der Verbindungsdaten||'#ddd'||
|-
|'''data-background-color'''||Hintergrundfarbe ||'#C0C0C0'||
|-
|'''data-icon'''||Icon für die Kopfzeile||(Symbol Haltestelle)||data-icon="fa-train", data-icon="fa-bus"
|-
|'''data-width'''||Feste Breite (in % or px)||'200px'||
|-
|'''data-height'''||Feste Höhe (in % or px)||'250px'||
|-
|'''data-interval'''||Zeitintervall für den refresh in s, bei '0' kein auto refresh; zusätzlich wird beim Laden der Seite und in Pagebutton beim Wechsel auf die Seite ein refresh ausgelöst||'120'||
|-
|'''data-refresh'''||wie data-interval||||
|}

==CSS-Klassen==
{|class="wikitable"
!Klasse
!Beschreibung
|-
|'''DB'''||Design Bahn AG
|-
|'''DVB'''||Design Dresdner Verkehrsbetriebe; data-icon sollte leer sein
|-
|'''VVO'''||VVO Design Verkehrsverbund Oberelbe; data-icon sollte leer sein
|-
|'''alternate'''||abwechselnd schattierte Zeilen
|-
|'''deptime'''||angezeigt wird die Abfahrtszeit anstelle der verbleibenden Zeit bis zur Abfahrt
|}
[[Datei:FTUI_Widget_Departure_03.png|700px]]

==Hinweise==
* Provider ändern bisweilen ihre Schnittstellendefinitionen mit Auswirkungen auf den nachfolgend beschriebenen Informationsfluss. In diesem Fall sind Anpassungen vorzunehmen. Das Forum ist eine geeignete Plattform zur Klärung des Sachverhaltes.
* Probleme mit Sonderzeichen in den Richtungsangaben lassen sich gemäß {{Link2Forum|Topic=48255|Message=1135329|LinkText=dieses Hinweises im Forum}} wie folgt lösen:
:<code>attr xyz getDecode UTF-8</code>

==Datenquelle==
Die Daten stammen in FHEM aus einer HTTPMOD-Abfrage, hier dargestellt an einem Beispiel aus Dresden:
<syntaxhighlight lang="html">
define VVO HTTPMOD none 0
attr VVO get02Name Postplatz
attr VVO get02URL http://widgets.vvo-online.de/abfahrtsmonitor/Abfahrten.do?ort=Dresden&hst=Postplatz&vz=0&lim=10
attr VVO get02Regex (\[\[.*\]\]).*
attr VVO timeout 30
</syntaxhighlight>

Auch die Daten anderer Verkehrsträger können genutzt werden. Entweder greift man hierzu direkt auf die Schnittstelle des Verkehrsträgers zu, was idR eine spezifische RegEx ([[Regulärer_Ausdruck]]) bedingt.

Oder man wählt folgenden allgemeineren Weg, welcher auf den Daten der App ''Öffi'' basiert: Zunächst ist der Provider für die Daten zu ermitteln. Die Liste der verfügbaren Provider erhält man mittels
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/provider
</syntaxhighlight>
Die Antwort lautet etwa:
<syntaxhighlight lang="html">
[{"name":"Bahn","aClass":"BahnProvider"},{"name":"Gvh","aClass":"GvhProvider"},{"name":"Vgn","aClass":"VgnProvider"},{"name":"Kvv","aClass":"KvvProvider"},{"name":"Vbl","aClass":"VblProvider"},{"name":"Dub","aClass":"DubProvider"},{"name":"Vms","aClass":"VmsProvider"},{"name":"Bsvag","aClass":"BsvagProvider"}, [...]
</syntaxhighlight>

Relevant ist die Bezeichnung hinter „name“, z.B. „Ding“. „Ding“ steht für „Donau-Iller-Nahverkehrsverbund“. Weil auch ländliche Gebiete meist in Verkehrsverbünde eingegliedert sind, besteht eine realistische Chance, einen Provider für den eigenen Standort zu finden. In größeren Städten kann oft auch der Provider „Bahn“ genutzt werden. Der Wert „aClass“ ist hier nicht von Belang.

Anschließend ist die StationId für die gewünschte Haltestelle zu ermitteln, in diesem Beispiel die Haltestelle ''Sonnenfeld''. Hierzu dient folgende Abfrage:
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/station/suggest?q=Sonnenfeld&provider=Ding
</syntaxhighlight>
Als Antwort erhält man die StationId "9001258".

Testweise können damit die aktuellen Abfahrten abgerufen werden:
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/departure/FHEM?from=9001258&provider=Ding
</syntaxhighlight>

Die Einbindung in FHEM erfolgt wie nachfolgend beschrieben:
<syntaxhighlight lang="html">
define Departure_Sonnenfeld HTTPMOD none 0
attr Departure_Sonnenfeld get01Name Sonnenfeld
attr Departure_Sonnenfeld get01URL https://transport.stefan-biermann.de/publictransportapi/rest/departure/FHEM?from=9001258&provider=Ding
attr Departure_Sonnenfeld get01Regex (\[\[.*\]\]).*
attr Departure_Sonnenfeld timeout 30
</syntaxhighlight>

Es können mehrere Haltestellen in einem Device hinterlegt werden; hierzu einfach die drei Attribute ''get01Name, get01URL'' und ''get01Regex'' duplizieren und durchnummerieren. Dabei müssen natürlich Name und URL angepasst werden.

==HTML==
<syntaxhighlight lang="html">
<div data-type="departure"
data-device="Departure_Sonnenfeld"
data-get="Sonnenfeld"
data-icon="fa-bus"
data-interval="60">
</div>
</syntaxhighlight>
[[Datei:FTUI_Widget_Departure_02.png|150px]]

==Beispiele==
===Umschalten zwischen relativer und absoluter Abfahrtszeit===
Dieses Feature ist im Widget selbst nicht implementiert, lässt sich aber mittels [[FTUI Widget Classchanger]] und [[FTUI Widget Checkbox]] umsetzen. Hierbei wird die gewünschte Ansicht ein- und die andere ausgeblendet.

<syntaxhighlight lang="html">
define Nahverkehr_Umschalter_Zeitangabe dummy
</syntaxhighlight>

<syntaxhighlight lang="html">
<div class="vbox">

<div data-type="classchanger" data-device="Nahverkehr_Umschalter_Zeitangabe" data-get-on="on" data-on-class="hide" data-off-class="cell">
<div data-type="departure"
data-device="..."
...
class="alternate">
</div>
</div>

<div data-type="classchanger" data-device="Nahverkehr_Umschalter_Zeitangabe" data-get-on="off" data-on-class="hide" data-off-class="cell">
<div data-type="departure"
data-device="..."
...
class="alternate deptime">
</div>
</div>

<div class="hbox">
<div data-type="label" class="inline top-space" data-limits-get="Nahverkehr_Umschalter_Zeitangabe:STATE" data-limits='["on", "off"]' data-colors='["#8C8C8C", "white"]'>Abfahrt in ... Min.</div>

<div data-type="checkbox" class="big inline" data-on-background-color="grey" data-off-background-color="grey" data-device="Nahverkehr_Umschalter_Zeitangabe"></div>

<div data-type="label" class="inline top-space" data-limits-get="Nahverkehr_Umschalter_Zeitangabe:STATE" data-limits='["off", "on"]' data-colors='["#8C8C8C", "white"]'>Abfahrt um ...</div>
</div>

</div>
</syntaxhighlight>

<gallery widths="200" heights="250">
FTUI Widget departure classchanger 1.png
FTUI Widget departure classchanger 2.png
</gallery>

===Filtern von Zielen===
Die ausgegebenen Ergebnisse lassen sich direkt in der HTTPMOD-Abfrage filtern.
====Herausfiltern unerwünschter Relationen====
Hierzu nutzt man das Attribut ''get01Expr'' (ggf. auch ''get02Expr'' etc.) und füllt es mit
<syntaxhighlight lang="html">
{$val = ~s/\[[^\[]*("Parkstraße",|"Schlossallee",)[^\]]*\],?//g; $val =~ s/\],\]/]]/; return $val;}
</syntaxhighlight>
In diesem Beispiel werden alle Ziele entfernt, die "Parkstraße" oder "Schlossallee" enthalten.
====Auswahl erwünschter Relationen====
<syntaxhighlight lang="html">
{$val = "[".join(',',$val = ~/(\[[^\[]*(?:"Parkstraße"|"Schlossallee")[^\]]*\])/g)."]"; return $val;}
</syntaxhighlight>
Hier werden nur die Abfahrten mit den Zielen "Parkstraße" oder "Schlossallee" angegeben.

Zu Fallstricken bei der Eingabe von Zielen vgl. [https://forum.fhem.de/index.php/topic,48255.msg1014192.html#msg1014192 FHEM-Forum]

==Links==
FHEM Wiki [[Departure]]

[[Kategorie:FHEM Tablet UI|Departure]]

FTUI Widget Volume

2022-01-18T10:59:50Z

Ulm32b: /* Attribute */ data-lock ergänzt

Das [[{{PAGENAME}}|Volume Widget]] ist ein Widget für [[FHEM Tablet UI]], das eine Einstellscheibe zur Änderung eines einzelnen Wertes zur Verfügung stellt.

<gallery>
File:FTUI_Widget_Volume_01.png
File:FTUI_widget_volume-rgb.png
</gallery>

==Attribute==
Für das Volume-Widget gelten alle Attribute des [[FTUI Widget Knob|Knob-Widgets]]. Und zusätzlich die folgenden:
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-get'''||Name des Readings, das den darzustellenden Wert enthält||STATE||data-get="volume"
|-
|'''data-set'''||Name des Readings, dessen Wert geändert werden soll||||data-set="volume"
|-
|'''data-cmd'''||Name des Befehls, mit dem das Reading geändert wird (z.B. setstate, set, setreading, trigger)||set||
|-
|'''data-get-value'''||[[Regulärer Ausdruck|RegEx]] oder Position des Wertes in einer leerzeichen-getrennten Textzeile, mit der der Wert erhalten werden kann||-1 -> alles anzeigen||
|-
|'''data-set-value'''||Format des Wertes, wie er an FHEM gesendet werden soll||$v (nur der Wert)||
|-
|'''data-min'''||Mindestwert, der gesetzt werden kann||0||data-min="10"
|-
|'''data-max'''||Maximalwert, der gesetzt werden kann||70||data-max="100"
|-
|'''data-tickstep'''||Abstand zwischen den einzelnen Schritten||4/20||data-tickstep="1"
|-
|'''data-unit'''||Einheit zum gewünschten Wert hinzufügen||||<nowiki>data-unit="&deg"</nowiki>
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Die Sperre greift, wenn das Reading den Wert 'true', '1' oder 'on' hat. Hiervon abweichend ist auch eine Definition mittels data-lock-on und data-lock-off möglich.||||
|-
|'''data-lock-on'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aktiviert wird||||
|-
|'''data-lock-off'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aufgehoben wird||||
|}

==CSS Klassen==
{|class="wikitable"
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|hue-tick}}{{FTUI Klasse|hue-front}}{{FTUI Klasse|hue-back}}{{FTUI Klasse|dim-tick}}{{FTUI Klasse|dim-front}}{{FTUI Klasse|dim-back}}{{FTUI Klasse|readonly}}
|}

==Beispiele==
===Lautstärke===
<syntaxhighlight lang="html">
<div data-type="volume"
data-device="AVReceiver"
data-get="volume"
data-set="volume"></div>
</syntaxhighlight>
[[Datei:FTUI Widget Volume 01.png]]

===Farbauswahl für Beleuchtung===
<syntaxhighlight lang="html">
<div data-type="volume"
data-device="WZ.Deckenlampe"
data-get="hue"
data-set="hue"
data-min="0"
data-max="65535"
class="hue-tick hue-front small top-space-2x">
</div>
</syntaxhighlight>
[[Datei:FTUI_widget_volume-rgb.png]]

[[Kategorie:FHEM Tablet UI|Volume]]

FTUI Widget Thermostat

2022-01-18T10:58:02Z

Ulm32b: /* Attribute */ data-lock ergänzt

Das [[{{PAGENAME}}|Thermostat Widget]] ist ein Widget für [[FHEM Tablet UI]] welches ähnlich wie das [[FTUI Widget Knob|Knob-Widget]] ist, aber für Heizungsthermostate optimiert wurde. Es zeigt eine Skala, um die gewünschte Temperatur einzustellen, sowie die aktuelle Temperatur an.

<gallery>
File:FTUI_Widget_Thermostat_01.png
File:FTUI_Widget_Thermostat_02.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-get'''||Name des Readings, welches die gewünschte Temperatur enthält||desired-temp||
|-
|'''data-set'''||Name des Readings, mit dem die gewünschte Temperatur gesetzt wird||desired-temp||
|-
|'''data-temp'''||Name des Readings, welches die aktuelle Temperatur enthält||measured-temp||
|-
|'''data-valve'''||Name des Readings, das die Ventilstellung des Thermostates anzeigt||||data-valve="ValvePosition"
|-
|'''data-get-value'''||[[Regulärer Ausdruck|RegEx]] oder Stelle der Ventilposition in einer leerstellen-getrennten Zeile||-1 -> alles anzeigen||data-get-value="2"
|-
|'''data-mode'''||Name des Readings für die Modi (auto, manual, etc.) des Thermostates||||data-mode="controlMode"
|-
|'''data-min'''||Mindesttemperatur, die gesetzt werden kann||10||data-min="5"
|-
|'''data-max'''||Höchsttemperatur, die gesetzt werden kann||30||data-max="25"
|-
|'''data-step'''||Abstufung, in der die Temperatur gesetzt werden kann||1||data-step="0.5"
|-
|'''data-off'''||Wert, der gesendet werden muss, um das Thermostat abzuschalten||||data-off="5"
|-
|'''data-boost'''||Wert, der gesendet werden muss, um das Thermostat in den Boost-Modus zu bringen||||data-boost="30.5"
|-
|'''data-height'''||Höhe des Widgets||100||data-height="80"
|-
|'''data-width'''||Breite des Widgets||100||data-width="120"
|-
|'''data-touch-height'''||Höhe des Widgets während Änderungen||data-height||data-touch-height="200"
|-
|'''data-touch-width'''||Breite des Widgets während Änderungen||data-width||data-touch-width="200"
|-
|'''data-touch-position'''||Position des Wertes während Änderungen||left||data-touch-position="left"
|-
|'''data-inputcolor'''||Farbe des angezeigten Temperaturwertes || ||data-inputcolor="white"
|-
|'''data-hdcolor'''||Farbe des Einstellhebels||#666||data-hdcolor="green"
|-
|'''data-fgcolor'''||Farbe des geriffelten Hintergrundes (Teilstriche)||#666||
|-
|'''data-bgcolor'''||Farbe des geriffelten Hintergrundes (Flächen zwischen den Teilstrichen)||keine||
|-
|'''data-mincolor'''||Farbe am unteren Ende des Einstellbereiches||#4477ff||
|-
|'''data-maxcolor'''||Farbe am oberen Ende des Einstellbereiches||#ff0000||
|-
|'''data-thickness'''||Dicke des Einstellbereiches||0.25||
|-
|'''data-anglearc'''||Reichweite der Anzeige auf einem Kreis in Grad||240||data-anglearc="360"
|-
|'''data-angleoffset'''||Bestimmt die Position auf der Kreisform, auf dem die Statusanzeige beginnen soll||-120||data-angleoffset="0"
|-
|'''data-font'''||Schriftart des Wertes||||
|-
|'''data-font-weight'''||Dicke der Schrift||||
|-
|'''data-unit'''||Einheit, die zum Wert hinzugefügt werden soll||||<nowiki>data-unit="°"</nowiki>
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Die Sperre greift, wenn das Reading den Wert 'true', '1' oder 'on' hat. Hiervon abweichend ist auch eine Definition mittels data-lock-on und data-lock-off möglich.||||
|-
|'''data-lock-on'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aktiviert wird||||
|-
|'''data-lock-off'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aufgehoben wird||||
|-
|}

==Hinweise==
* Wenn beim MAX! Wand-Thermostat der Wert ''auto'' für ''data-mode'' empfangen wird, wird folgender Befehl generiert: <code>set wz_WandThermostat desiredTemperature auto</code>. Andere Werte erzeugen Befehle wie <code>set wz_WandThermostat desiredTemperature</code>
* Als ''data-device'' muss das Device angegeben werden, welches gewünschte und aktuelle Temperatur liefert. Bei HomeMatic Thermostaten ist das z.B. HM_XXXXXX_Clima
* Das Widget zeigt die Ventilposition nur an, wenn ''data-valve'' explizit definiert wurde.

==CSS Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|readonly}}
|}

==Beispiele==
===HomeMatic HM-CC-RT-DN===
Da die Standardwerte für ''data-get'', ''data-temp'' und ''data-set'' schon den benötigten Werten für ein [[HM-CC-RT-DN Funk-Heizkörperthermostat]] entsprechen, reicht eine ganz einfache Code-Zeile.
<syntaxhighlight lang="html">
<div data-type="thermostat" data-device="HM_302111_Clima"></div>
</syntaxhighlight>

Das entspricht in diesem Fall der längeren Version:
<syntaxhighlight lang="html">
<div data-type="thermostat"
data-device="HM_302111_Clima"
data-get="desired-temp"
data-temp="measured-temp">
</div>
</syntaxhighlight>
[[File:FTUI_Widget_Thermostat_01.png]]

===MAX! Thermostat===
<syntaxhighlight lang="html">
<div data-type="thermostat"
data-device="HZ_Tuer"
data-valve="valveposition"
data-get="desiredTemperature"
data-temp="temperature"
data-set="desiredTemperature">
</div>
</syntaxhighlight>
[[File:FTUI_Widget_Thermostat_01.png]]

===Mit Off- und Boost-Funktion===
Hier ein Beispiel, mit dem das Thermostat aus-, oder die Boost-Funktion eingeschaltet werden kann. Um Auszuschalten muss der Zeiger auf die Mindestposition gezogen werden. Um die Boost-Funktion zu aktivieren, auf die Maxmimalposition.
<syntaxhighlight lang="html">
<div data-type="thermostat"
data-device="HM_302111_Clima"
data-valve="ValvePosition"
data-min="5"
data-off="off"
data-max="31"
data-boost="31">
</div>
</syntaxhighlight>
[[File:FTUI_Widget_Thermostat_02.png]]

[[Kategorie:FHEM Tablet UI|Thermostat]]

FTUI Widget Switch

2022-01-18T10:57:06Z

Ulm32b: /* Standard-Attribute */ data-lock ergänzt

Das [[{{PAGENAME}}|Switch Widget]] ist ein Widget für [[FHEM Tablet UI]]. Dabei handelt es sich um einen Ein-/Ausschalter in Form eines runden Druckknopfes. Er dient zum Ausführen beliebiger Schaltbefehle und kann auch für FTUI-interne Steuerungen genutzt werden. Zusätzlich kann der Schalter in Abhängigkeit eines Readings sein Aussehen verändern und so zwei oder mehr Zustände optisch darstellen. Beispielsweise können Farbe und/oder das Symbol die Zustände an/aus anzeigen. Kann das Status-Reading mehr als zwei Zustände einnehmen, kann auch dies dargestellt werden. Dabei sind beliebige Kombinationen von Vorder-/Hintergrundfarben und Symbolen möglich.

<gallery>
File:Switch.png
File:Switch4.png
File:FTUI_Switch-Homestatus2.png
</gallery>

==Attribute==
===Standard-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-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||
|-
|'''data-doubleclick'''||Zeit [ms], in der ein zweiter Klick erfolgen muss, damit die Betätigung angenommen wird. '0' schaltet dieses Verhalten ab.||0||data-doubleclick="800"
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Die Sperre greift, wenn das Reading den Wert 'true', '1' oder 'on' hat. Hiervon abweichend ist auch eine Definition mittels data-lock-on und data-lock-off möglich.||||
|-
|'''data-lock-on'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aktiviert wird||||
|-
|'''data-lock-off'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aufgehoben wird||||
|-
|'''data-icon'''||Name des Icons im Vordergrund||'fa-lightbulb-o'||
|-
|'''data-background-icon'''||Name des Icons, das als Hintergrund verwendet werden soll||'fa-circle'||
|-
|'''data-color'''||Farbe des Icon (RGB-Angabe oder Farbname)||#2A2A2A||data-color="#c0c0c0"
|-
|'''data-background-color'''||Hintergrundfarbe des Widgets||#505050||data-background-color="none"
|-
|'''data-warn'''||Reading, dessen Inhalt als rotes Kennzeichen angezeigt wird. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||
|-
|'''data-warn-on'''||Werte von '''data-warn''', bei denen das Kennzeichen angezeigt wird||<nowiki>'true|on|[1-9]{1}[0-9]*'</nowiki>||
|-
|'''data-warn-off'''||Werte von '''data-warn''', bei denen das Kennzeichen versteckt wird||<nowiki>'false|off|0'</nowiki>||
|-
|'''data-warn-color'''||Textfarbe des Kennzeichens||'#aaa'||
|-
|'''data-warn-background-color'''||Hintergrundfarbe des Kennzeichens||'#aa2200'||
|-
|'''data-hide'''||Reading zum Verstecken des Elementes. Das Element verschwindet, wenn der Wert mit '''data-hide-on''' übereinstimmt.||'STATE'||
|-
|'''data-hide-on'''||Zeichenkette, bei der das Element versteckt wird||<nowiki>'true|1|on'</nowiki>||
|-
|'''data-hide-off'''||Zeichenkette, bei der das Element angezeigt wird||'!on'||
|-
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"
|-
|'''data-reachable'''||Reading, dessen Inhalt angibt, ob das Device erreichbar ist, oder nicht. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||
|-
|'''data-timeout'''||Maximale Zeit, die der eingestellte Zustand nach einer Veränderung angezeigt wird, bis die echte Rückmeldung vom Device wieder angezeigt wird||2000ms||
|}

===Attribute für zwei Zustände===
Zur Anzeige von zwei Zuständen können nachfolgende Attribute zusätzlich zu den Standard-Attributen genutzt werden.
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-get-on'''||Zeichenkette oder ein Array von Werten, die als Zustand ON interpretiert werden||'on'||
|-
|'''data-get-off'''||Zeichenkette oder ein Array von Werten, die als Zustand OFF interpretiert werden||'off'||
|-
|'''data-set-on'''||Wert, der beim Einschalten gesendet werden soll ||Wert von '''data-get-on'''||data-set-on="1"
|-
|'''data-set-off'''||Wert, der beim Ausschalten gesendet werden soll||Wert von '''data-get-off'''||data-set-off="0"
|-
|'''data-on-color'''||Iconfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#aa6900'||
|-
|'''data-off-color'''||Iconfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#505050'||
|-
|'''data-on-background-color'''||Hintergrundfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#aa6900'||
|-
|'''data-off-background-color'''||Hintergrundfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#505050'||
|}

'''data-get-on''' und '''data-get-off''' können auch RegEx enthalten:
<code>data-get-on="[0-9]{1,3}|on"</code> bedeutet, dass der Schalter AN ist, wenn das Reading eine Zahl zwischen 0 und 100 ist, oder den Wert <code>on</code> enthält.
<code>data-get-off="!on"</code> bedeutet, dass alle Werte, die nicht für <code>on</code> stehen, automatisch <code>off</code> bedeuten (Negation).
<code>data-set-off=""</code> unterdrückt das Senden eines OFF-Befehls.
'''data-[on|off]-color''' erwartet einen RGB-Wert, wenn dieser aus einen Reading gelesen wird (<code>rgb(0, 0, 0)</code> statt <code>#000000</code>)

===Attribute für mehrere Zustände===
Zur Anzeige von mehreren Zuständen können nachfolgende Attribute zusätzlich zu den Standard-Attributen genutzt werden.
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-states'''||Array von Werten, die das Reading einnehmen kann||||
|-
|'''data-set-states'''||Array von Werten, die in Abhängigkeit des Arrays von '''data-states''' geschaltet werden||||
|-
|'''data-icons'''||Array von Icons, die in Abhängigkeit des Arrays von '''data-states''' im Vordergrund angezeigt werden||||
|-
|'''data-background-icons'''||Array von Icons, die in Abhängigkeit des Arrays von '''data-states''' im Hintergrund angezeigt werden||||
|-
|'''data-colors'''||Array von Farben, die in Abhängigkeit des Arrays von '''data-states''' das Vordergrund-Icon einfärben||||
|-
|'''data-background-colors'''||Array von Farben, die in Abhängigkeit des Arrays von '''data-states''' das Hintergrund-Icon einfärben||||
|}

==CSS-Klassen==
{|class="wikitable"
!Klasse
!Beschreibung
{{FTUI Klasse|readonly}}{{FTUI Klasse|small}}{{FTUI Klasse|compressed}}{{FTUI Klasse|compressed-50}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|invert}}
|}

==Hinweise==
*Das Attribut '''data-timeout''' dient dazu, ein "Flackern" der Anzeige zu verhindern. Manche Devices benötigen einige Zeit, bis der gewünschte und eben eingestellte Zustand erreicht wird. Zitat aus dem Forum: <cite>"data-timeout gilt nur für die on-off (toggle) Funktion von Switch und Dimmer, nicht fürs Dimmen. Das Problem: Am Switch wird eingeschaltet, der Knopf wird hell und ON an FHEM gesendet. Aber die Hardware reagiert nicht, geht nicht auf ON. Wenn sie das machen würde, käme auch eine Bestätigung per Longpoll. Mit '''data-timeout''' wird die eingestellte Zeit gewartet und bei Ausbleiben der Bestätigung fällt der Switch zum ursprünglichen Status zurück, geht also wieder aus. Nur wenn innerhalb der x Sekunden das Longpoll-Event kommt, wird der Fallbacktimer gestoppt."</cite>
*Die Attribute für Dual-State (zwei Zustände) und Multi-State (mehrere Zustände) können '''nicht gemeinsam''' verwendet werden.

==Beispiele==
===An/Aus===
Einfacher Schalter, der <code>on</code>/<code>off</code> sendet und diesen Status durch Farbumschlag anzeigt.

[[File:Switch.png]]
<syntaxhighlight lang="html">
<div data-type="switch" data-device="MyDevice"></div>
</syntaxhighlight>

===An/Aus (Farben invertiert)===
Einfacher Schalter, der <code>on</code>/<code>off</code> sendet und diesen Status durch Farbumschlag anzeigt. Die Farben sind hier im Gegensatz zum vorherigen Beispiel invertiert.
<syntaxhighlight lang="html">
<div data-type="switch" data-device="MyDevice" class="invert"></div>
</syntaxhighlight>

===1/0 als Befehl===
Einfacher Schalter, der <code>1</code>/<code>0</code> sendet und diesen Status durch Farbumschlag anzeigt.
<syntaxhighlight lang="html">
<div data-type="switch"
data-icon="fa-rss"
data-device='MyDevice'
data-get-on="1"
data-get-off="0"
data-set-on="1"
data-set-off="0"
class="green small invert">
</div>
</syntaxhighlight>

===MILIGHT-Switch===
Beispiel for einen MILIGHT-Schalter. Der <code>on</code>-Zustand wird per RegEx ermittelt.
<syntaxhighlight lang="html">
<div data-type="switch"
data-device="MILIGHT_Zone1_Wohnzimmer"
data-get-on="on.*"
data-get-off="off">
</div>
</syntaxhighlight>

===4-fach-Schalter===
Gruppe von 4 Schaltern, die den Status des selben Devices umschalten.

[[File:Switch4.png]]
<syntaxhighlight lang="html">
<div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-home" data-get-on="Home"></div>
<div>Home</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-bed" data-get-on="Sleep"></div>
<div>Sleep</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-car" data-get-on="Away"></div>
<div>Away</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-suitcase" data-get-on="Holiday"></div>
<div>Holiday</div>
</div>
</syntaxhighlight>

===Zwei Zustände umschalten===
Großer Homestatus-Button, der zwischen zwei Zuständen umschaltet.

[[File:FTUI_Switch-Homestatus2.png]]
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
<header>HOMESTATUS</header>
<div data-type="switch"
data-device="dummy3"
data-set-states='["Abwesend","Anwesend"]'
data-states='["Anwesend","Abwesend"]'
data-icons='["fa-home", "fa-car"]'
data-colors='["white", "white"]'
data-background-colors='["green", "red"]'
class="bigger top-space">
</div>
</li>
</syntaxhighlight>

===Serienschaltung: Mehrere Zustände nacheinander===
Bei jeder Betätigung wird der nächste der hinterlegten Zustände eingenommen.
Man beachte die Reihenfolge in data-set-states und data-states.

<syntaxhighlight lang="html">
<div data-type="switch"
data-device="Test"
data-set-states='["on","off","auto"]'
data-states='["auto","on","off"]'
data-icons='["fa-tint","fa-tint","fa-tint"]'
data-colors='["white","white","white"]'
data-background-colors='["blue","green","red"]'
class="small">
</div>
</syntaxhighlight>

===Beschriftete Schaltflächen===
[[File:FTUI-Ein-Aus-Schalter.png|150px]]

<syntaxhighlight lang="html">

<div data-type="switch"
data-icon=""
data-device="Schalter"
data-set-on="Ein"
data-set-off="Aus"
data-states='["Ein","Aus"]'
data-background-colors='["#90D49A","#E37D7D"]'>
<div data-type="label"
data-device="Schalter"
data-states='["Ein","Aus"]'
data-colors='["#5B8562","#854646"]'>
</div>
</div>


<div data-type="switch"
data-device="Schalter"
data-icon=""
data-background-icon=""
data-set-on="Ein"
data-set-off="Aus"
data-states='["Ein","Aus"]'>
<div data-type="label"
data-device="Schalter"
data-states='["Ein","Aus"]'
data-colors='["#5B8562","#854646"]'>
</div>
</div>
</syntaxhighlight>

[[Kategorie:FHEM Tablet UI|Switch]]

FTUI Widget Spinner

2022-01-18T10:56:00Z

Ulm32b: /* Attribute */ data-lock ergänzt

Das [[{{PAGENAME}}|Spinner Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem der Wert eines Device-Readings mit Hilfe von "up/down"- bzw. "+/-"-Buttons eingestellt werden kann.

<gallery>
Datei:FTUI_Widget_Spinner_01.png
Datei:FTUI_Widget_Spinner_02.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-get'''||DeviceReading, das angezeigt werden soll||||data-get="desired-temp"
|-
|'''data-set'''||DeviceReading, welches den ''set''-Befehl empfangen soll||||data-set="desired-temp"
|-
|'''data-get-value'''||[[Regulärer Ausdruck|RegEx]] oder Position des Wertes in einem leerzeichen-getrennten Text, nach dem der angezeigte Text gefiltert werden soll||-1 (alles)||
|-
|'''data-color'''||RGB-Wert oder Farbzeichnung für den Wertebalken||orange||data-color="#404040"
|-
|'''data-text-color'''||Definierter Farbwert für die Textfarbe oder Name des Readings, aus dem dieser Wert gelesen werden kann||#ccc||data-text-color="red"
|-
|'''data-background-color'''||Hintergrundfarbe des Widgets||||data-background-color="none"
|-
|'''data-gradient-color'''||Array von Farbwerten für einen Verlauf des Wertebalkens||||data-gradient-color='["blue","red"]'
|-
|'''data-icon-left-color'''||RGB-Wert oder Farbbezeichnung für das linke Button-Symbol||#aaa||data-left-color="green"
|-
|'''data-icon-right-color'''||RGB-Wert oder Farbbezeichnung für das rechte Button-Symbol||#aaa||data-right-color="red"
|-
|'''data-icon-left'''||Name des linken Symbols||||data-icon-left="fa-volume-down"
|-
|'''data-icon-right'''||Name des rechten Symbols||||data-icon-left="fa-volume-up"
|-
|'''data-width'''||Feste Breite des Widgets in px oder %||||
|-
|'''data-height'''||Feste Höhe des Widgets in px oder %||||
|-
|'''data-max'''||Maximalwert des Anzeigebereichs||100||data-max="31"
|-
|'''data-min'''||Minimalwert des Anzeigebereichs||0||data-min="12"
|-
|'''data-step'''||Numerischer Wert für das Intervall bei Klick auf Icon||1||data-step="2"
|-
|'''data-unit'''||Einheit nach dem numerischen Text-Wert hinzufügen||||data-unit="°"
|-
|'''data-shortdelay'''||Verzögerungszeit (ms) für Befehlswiederholung bei Tastendruck||80||data-shortdelay="120"
|-
|'''data-longdelay'''||Zeitverzögerung (ms) für den Befehl nach Loslassen der Taste||500||data-shortdelay="350"
|-
|'''data-off'''||Wert, der als "off" gilt||||data-off="10"
|-
|'''data-on'''||Wert, der als "on" gilt||||data-off="22"
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Die Sperre greift, wenn das Reading den Wert 'true', '1' oder 'on' hat. Hiervon abweichend ist auch eine Definition mittels data-lock-on und data-lock-off möglich.||||
|-
|'''data-lock-on'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aktiviert wird||||
|-
|'''data-lock-off'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aufgehoben wird||||
|-
|}

==CSS Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|valueonly}}{{FTUI Klasse|value}}{{FTUI Klasse|circulate}}{{FTUI Klasse|positiononly}}
|}
==Beispiele==
===Spinner für ein Thermostat===
<syntaxhighlight lang="html">
<div data-type="spinner"
data-device="HM_Thermostat"
data-get="desired-temp"
data-set="desired-temp"
data-icon-left-color="blue"
data-icon-right-color="red"
data-height="40"
data-width="140"
data-step="0.5"
data-min="10"
data-max="30"
data-unit="°"></div>
</syntaxhighlight>
[[Datei:FTUI_Widget_Spinner_01.png]]

===Lautstärkeregelung===
<syntaxhighlight lang="html">
<div data-type="spinner"
data-device="RXV777"
data-get="volumeStraight"
data-set="volumeStraight"
data-min="-60"
data-max="-24"
data-step="0.5"
data-unit="db"
data-longdelay="800"
data-width="300"
data-height="60"
data-icon-left="fa-volume-down"
data-icon-right="fa-volume-up"
class="valueonly"></div>
</syntaxhighlight>
[[Datei:FTUI_Widget_Spinner_02.png]]

==Weblinks==
*[http://knowthelist.github.io/fhem/tablet/demo_spinner.html Weitere Beispiele]

[[Kategorie:FHEM Tablet UI|Spinner]]

FTUI Widget Slider

2022-01-18T10:54:49Z

Ulm32b: /* Steuer-Attribute */ data-lock ergänzt

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||
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Die Sperre greift, wenn das Reading den Wert 'true', '1' oder 'on' hat. Hiervon abweichend ist auch eine Definition mittels data-lock-on und data-lock-off möglich.||||
|-
|'''data-lock-on'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aktiviert wird||||
|-
|'''data-lock-off'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aufgehoben wird||||
|-
|}

==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}}{{FTUI Klasse|readonly}}
|}

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 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 = "retro 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">
.retro .vertical .range-handle {
left: -17px !important;
}

.retro .vertical .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|200px]] [[File:DarstellungSliderRolladenBunt.png|240px]]

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) müssen zusätzliche Zeilen eingefügt werden. In älteren Versionen von FTUI (vor 2.7) müssen folgende Zeilen eingefügt werden:

<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-container {
width: 100%;
}

.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;
background-color: rgb(150,150,150) !important;
}

.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;
background-color: rgb(64,64,64) !important;
}

.awning .vertical.range-container {
width: 100%;
}

.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>

Ab FTUI 2.7 müssen folgende Zeilen eingefügt werden:
<syntaxhighlight lang="css">
/* Definition for styles to be used for extension of slider widget for display of blinds, awnings etc. */
/* normal lines */

.darker.showdeco > .vertical .range-bar .range-min,
.darker.showdeco > .vertical .range-bar .range-max {
visibility: visible;
margin-left: -12px;
margin-bottom: 20px;
margin-top: 20px;
width: 200% !important;
text-align: end;
color: #8c8c8c;
}

.showdeco > .vertical .range-bar .range-min,
.showdeco > .vertical .range-bar .range-max {
visibility: visible;
margin-left: -12px;
margin-bottom: 20px;
margin-top: 20px;
width: 200% !important;
text-align: end;
color: #eeeeee;
}

.blind .vertical.range-container {
width: 100%;
}

.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;
background-color: rgb(150,150,150) !important;
}

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

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

.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;
background-color: rgb(64,64,64) !important;
}

.awning .vertical.range-container {
width: 100%;
}

.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;
z-index: 1
}
</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]]

FTUI Widget Push

2022-01-18T10:53:18Z

Ulm32b: /* Attribute */ data-lock ergänzt

Das [[{{PAGENAME}}|Push Widget]] ist ein Widget für [[FHEM Tablet UI]] in Form eines Button-förmigen Knopfes, der, ähnlich einem Taster, einen einfachen Befehl an FHEM sendet (zum Beispiel hoch/runter, Play/Pause, Nächster/vorheriger Titel, usw.). Der Befehl kann beim Drücken, beim Loslassen, oder beide Male ausgeführt werden.

<gallery>
File:Ftui_widget_push.PNG
File:Push1.png
File:Push2.png
File:Ftui_widget_push_on-for-timer.png
</gallery>

==Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||FHEM-Device, dessen Reading gesetzt werden soll (<command> '''<device>''' <reading> <value>)||||
|-
|'''data-set'''||Reading, das gesetzt werden soll (<command> <device> '''<reading>''' <value>)||||
|-
|'''data-set-on'''||Wert, der beim Drücken gesendet werden soll. Kann auch ein Array sein, um verschiedene Werte abwechselnd zu schalten||on||data-set-on="1"
|-
|'''data-set-off'''||Wert, der nach dem Loslassen gesendet werden soll||||data-set-off="0"
|-
|'''data-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||
|-
|'''data-fhem-cmd'''||Befehl, der bei einem Klick auf das Bild an FHEM gesendet werden soll||||data-fhem-cmd="set Bulp01 off"
|-
|'''data-doubleclick'''||Zeit [ms], in der ein zweiter Klick erfolgen muss, damit die Betätigung angenommen wird. '0' schaltet dieses Verhalten ab.||0||data-doubleclick="800"
|-
|'''data-countdown'''||Sekunden für Fortschrittsanzeige (progress control / 'on-for-timer')||Automatische Erkennung von 'on-for-timer' bei '''data-set-on'''||
|-
|'''data-warn'''||Reading, dessen Inhalt als rotes Kennzeichen angezeigt wird. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||
|-
|'''data-get'''||Reading, dessen Inhalt zur Zustandsanzeige (ON/OFF) wird||keiner (muss explizit angegeben werden)||
|-
|'''data-get-on'''||Zeichenkette, die als Zustand ON interpretiert wird||||
|-
|'''data-get-off'''||Zeichenkette, die als Zustand OFF interpretiert wird||||
|-
|'''data-hide'''||Reading zum Verstecken des Push-Elementes. Das Element verschwindet, wenn der Wert mit '''data-hide-on''' übereinstimmt.||STATE||
|-
|'''data-hide-on'''||Zeichenkette, bei der das Element versteckt wird||true,1,on||
|-
|'''data-hide-off'''||Zeichenkette, bei der das Element angezeigt wird||!on||
|-
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Die Sperre greift, wenn das Reading den Wert 'true', '1' oder 'on' hat. Hiervon abweichend ist auch eine Definition mittels data-lock-on und data-lock-off möglich.||||
|-
|'''data-lock-on'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aktiviert wird||||
|-
|'''data-lock-off'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aufgehoben wird||||
|-
|'''data-reachable'''||Reading, dessen Inhalt angibt, ob das Device erreichbar ist, oder nicht. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||
|-
|'''data-icon'''||Name des Icons im Vordergrund||fa-power-off||
|-
|'''data-background-icon'''||Name des Icons, das als Hintergrund verwendet werden soll||fa-circle-thin||
|-
|'''data-on-color'''||Feste Iconfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||#aa6900||
|-
|'''data-on-background-color'''||Feste Hintergrundfarbe für den Zustand ON, oder '''<device>:<reading>'''||#aa6900||
|-
|'''data-off-color'''||Feste Iconfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||#505050||
|-
|'''data-off-background-color'''||Feste Hintergrundfarbe für den Zustand OFF, oder '''<device>:<reading>'''||#505050||
|}

==CSS Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
|-
{{FTUI Klasse|height-narrow}}
|}

==Weitere Möglichkeiten==
Das Push-Widget kann auch dazu verwendet werden, Readings darzustellen. Über '''data-get''' und '''data-get-on''' wird beispielsweise der Kreis (Hintergrund-Icon) eingefärbt. Der Wert des Readings selbst wird dann per [[FTUI_Widget_Label|Label]] angezeigt, welches innerhalb des Push-Widgets platziert wird. Siehe hierzu auch den {{Link2Forum|Topic=66800|LinkText=Hinweis im Forum}}.

<syntaxhighlight lang="html">
<div data-type="push" ...>
<div data-type="label" ...></div>
</div>
</syntaxhighlight>

==Beispiele==
===Alle Lampen einschalten===

<syntaxhighlight lang="html">
<div data-type="push"
data-device="LightAll"
data-cmd="trigger"
data-set-on="on">
</div>
</syntaxhighlight>

===Steuerung hoch/runter (horizontal)===
[[File:Push1.png]]

<syntaxhighlight lang="html">
<div>
<div class="doublebox-h">
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-up" data-background-icon="fa-square-o"
data-set-on="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-down" data-background-icon="fa-square-o"
data-set-on="down">
</div>
</div>
</div>
</syntaxhighlight>

===Steuerung hoch/runter (vertikal)===
[[File:Push2.png]]

<syntaxhighlight lang="html">
<div>
<div class="doublebox-v">
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set-on="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set-on="down">
</div>
</div>
</div>
</syntaxhighlight>

===Lampe für 5 Minuten einschalten===
Das Push-Widget zeigt einen abnehmenden Kreis, solange der Countdown läuft. Die Dauer wird automatisch aus dem '''on-for-timer'''-Befehl erkannt. Mit '''data-countdown''' kann jedoch auch auch ein eigener Wert angegeben werden.
Wenn das Device ein Dummy ist, muss in diesem das FHEM-Attribut <code>useSetExtensions 1</code> gesetzt werden. Weitere Beispiele für Timer sind [[FTUI_Zeitschaltung|hier]] zu finden.

[[File:Ftui_widget_push_on-for-timer.png]]

<syntaxhighlight lang="html">
<div data-type="push" data-device="MyLamp" data-set-on="on-for-timer 300" ></div>
</syntaxhighlight>

===Push-Widget verstecken===

<syntaxhighlight lang="html">
<div class="hbox">
<div class="vbox">
<div data-type="push" data-device="ftuitest" data-set-on="1"></div>
<div>on</div>
</div>
<div class="vbox">
<div data-type="push" data-device="ftuitest" data-set-on="0"></div>
<div>off</div>
</div>
<div class="vbox">
<div data-type="push" data-device="dummy1" data-get="STATE" data-get-on="on" data-hide="ftuitest:STATE" data-hide-on="1" class=""></div>
</div>
</div>

</syntaxhighlight>

[[Kategorie:FHEM Tablet UI|Push]]

FTUI Widget Pagebutton

2022-01-18T10:52:08Z

Ulm32b: /* Attribute */ data-lock ergänzt

Das [[{{PAGENAME}}|Pagebutton Widget]] ist ein Widget für [[FHEM Tablet UI]], das ein einfaches Element zur Verfügung stellt, um auf eine andere Seite zu navigieren. Auf der Zielseite wird das Widget als "ON" angezeigt. Das Pagebutton-Widget eignet sich zum Beispiel gut, um eine Navigation zu erstellen.

<gallery>
File:FTUI_Widget_Pagebutton_01.png
File:FTUI_Widget_Pagebutton_02.png
</gallery>

==Attribute==
Für das Pagebutton-Widget gelten alle Attribute des [[FTUI Widget Switch]]. Und zusätzlich die folgenden:
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-url'''||URL der Seite, die angezeigt werden soll||||data-url="#content_main.html"
|-
|'''data-load'''||DIV-Container, in den der Inhalt der Zielseite geladen werden soll||||data-load="#main"
|-
|'''data-active-pattern'''||[[Regulärer Ausdruck|RegEx]], die bestimmt, wann das Widget "ON" sein soll||||<nowiki>data-active-pattern="(.*/||.*#content_main.html)"</nowiki>
|-
|'''data-fade-duration'''||Zeit in Millisekunden oder "slow" bzw. "fast", die verwendet werden soll, um die Zielseite einzublenden||slow||data-fade-duration="1000"
|-
|'''data-icon'''||Vordergrund-Icon des Widgets||fa-power-off||data-icon="mi-home"
|-
|'''data-background-icon'''||Hintergrund-Icon des Widgets||fa-circle||data-background-icon="fa-square"
|-
|'''data-on-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt angezeigt wird||#222222||data-on-color="yellow"
|-
|'''data-on-background-color'''||Farbe des Hintergrund-Icons, wenn der gewünschte Inhalt angezeigt wird||#606060||data-on-background-color="gray"
|-
|'''data-off-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt nicht angezeigt wird||#505050||data-off-color="#000000"
|-
|'''data-off-background-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt nicht angezeigt wird||transparent||data-off-background-color="#cccccc"
|-
|'''data-return-time'''||Zeit in Sekunden, nach der die Standardseite (default) wieder aufgerufen wird||||data-return-time="60"
|-
|'''data-parent'''||"Eltern-Seite" - Angabe erforderlich, wenn in einer mehrstufigen Menüstruktur direkt auf eine Unterseite gesprungen werden soll und diese nicht mit "prefetch" vorgeladen ist||||data-parent="main2"

|-
|'''data-device'''||FHEM-Device, über welches das Verhalten des Widgets gesteuert wird||||
|-
|'''data-get'''||Reading, welches ausgewertet wird||STATE||
|-
|'''data-get-on'''||Wert, bei welchem das Widget ausgelöst wird||||
|-
|'''data-states'''||Vektor mit Zuständen von data-get||||data-states='["0","1"]'
|-
|'''data-icons'''||Vektor mit Symbolen, die auf data-states referenzieren||||data-icons='["fs-bag blink","fs-bag"]'
|-
|'''data-hide'''||Reading, welches Ein- und Ausblenden des Widgets steuert||||data-hide="GelberSack_Anzeige"
|-
|'''data-hide-on'''||Wert, bei dem das Widget ausgeblendet wird||||data-hide-on="false"
|-
|'''data-warn'''||<device>:<reading> für den Inhalt des Warnhinweises||||
|-
|'''data-warn-background-color'''||Hintergrundfarbe des Warnhinweises||||
|-
|'''data-warn-color'''||Schriftfarbe des Warnhinweises||||
|-
|'''data-warn-fixed'''||Anzahl Nachkommastellen im Warnhinweis||0||
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Die Sperre greift, wenn das Reading den Wert 'true', '1' oder 'on' hat. Hiervon abweichend ist auch eine Definition mittels data-lock-on und data-lock-off möglich.||||
|-
|'''data-lock-on'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aktiviert wird||||
|-
|'''data-lock-off'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aufgehoben wird||||

|}

==CSS Klassen==
{|class="wikitable"
{{FTUI Klasse|blank}}{{FTUI Klasse|nocache}}{{FTUI Klasse|default}}{{FTUI Klasse|prefetch}}
|}

==Hinweise==
* Für Sub-Pagebuttons kann eine eigene ''data-return-time'' festgelegt werden.
* ''data-return-time'' muss nicht am ersten Button hängen. Der erste, der dieses Attribut hat, wird ausgewertet.

==Beispiele==
===Einfacher Link===
<syntaxhighlight lang="html">
<div data-type="pagebutton"
data-url="index.html"
data-icon="mi-home"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Pagebutton_01.png]]

===Navigationsleiste===
Für die Navigationsleiste braucht es zum einen die Leiste und zum anderen einen DIV-Container, in dem die zu ladenden Inhalte angezeigt werden. Die Container erhalten jeweils eine eindeutige ID, welche in der Navigationsleiste als Ziel referenziert wird.

Als erstes wird das Menü aufgebaut.
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
<div data-type="pagebutton"
data-url="#page1.html"
data-load="#page1"
data-active-pattern=".*#page1.html"
data-icon="mi-weekend"
class="default"></div>
<div data-type="pagebutton"
data-url="#page2.html"
data-load="#page2"
data-active-pattern=".*#page2.html"
data-icon="mi-music_video"></div>
<div data-type="pagebutton"
data-url="#page3.html"
data-load="#page3"
data-active-pattern=".*#page3.html"
data-icon="mi-tv"></div>
</li>
</syntaxhighlight>

Anschließend werden noch die DIV-Container benötigt, in die der Inhalt der Zielseite geladen wird.
<syntaxhighlight lang="html">
<li data-row="1" data-col="2" data-sizex="5" data-sizey="4">
<div class="page" id="page1"></div>
<div class="page" id="page2"></div>
<div class="page" id="page3"></div>
</li>
</syntaxhighlight>

In der Zielseite ist wichtig, dass ein DIV-Container erstellt wird, dem die Klasse ''page'' zugewiesen wird und eine ID, die der ID entsprechen muss, in der bei ''data-load'' verwiesen wird.
So eine Seite könnte wie folgt aussehen:
<syntaxhighlight lang="html">
<div class="page" id="page1">
<div data-type="label">Page 1</div>
</div>
</syntaxhighlight>

[[File:FTUI_Widget_Pagebutton_02.png]]

===Steuerung über ein Device===
Der Aufruf einzelner Seiten kann auch über ein Device erfolgen; dies eröffnet Automatisierungsmöglichkeiten. Das obige Beispiel wird hierzu erweitert:
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
<div data-type="pagebutton"
data-url="#page1.html"
data-load="#page1"
data-active-pattern=".*#page1.html"
data-icon="mi-weekend"
class="default"
data-device="Seite"
data-get="STATE"
data-get-on="1"></div>
<div data-type="pagebutton"
data-url="#page2.html"
data-load="#page2"
data-active-pattern=".*#page2.html"
data-icon="mi-music_video"
data-device="Seite"
data-get="STATE"
data-get-on="2"></div>
<div data-type="pagebutton"
data-url="#page3.html"
data-load="#page3"
data-active-pattern=".*#page3.html"
data-icon="mi-tv"
data-device="Seite"
data-get="STATE"
data-get-on="3"></div>
</li>
</syntaxhighlight>

Nimmt das device "Seite" die STATES "1", "2" oder "3" an, wird die jeweilige Seite aufgerufen.

Eine weitere Variante zeigt das nachfolgende Beispiel: Hier wird über das device "Musik" bei "on" die Seite 2 aufgerufen und bei "off" zur Hauptseite zurückgewechselt:
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
<div data-type="pagebutton"
data-url="#page1.html"
data-load="#page1"
data-active-pattern=".*#page1.html"
data-icon="mi-weekend"
class="default"
data-device="Musik"
data-get="STATE"
data-get-on="off"></div>
<div data-type="pagebutton"
data-url="#page2.html"
data-load="#page2"
data-active-pattern=".*#page2.html"
data-icon="mi-music_video"
data-device="Musik"
data-get="STATE"
data-get-on="on"></div>
<div data-type="pagebutton"
data-url="#page3.html"
data-load="#page3"
data-active-pattern=".*#page3.html"
data-icon="mi-tv"></div>
</li>
</syntaxhighlight>

===Querverweis auf eine Pagebutton-Seite===
Es ist zulässig, dass mehrere Pagebutton-Widgets auf dieselbe Seite verweisen. Neben der Verwendung in Menüleisten könnnen somit zusätzlich "Links" an beliebiger Stelle platziert werden, bei deren Betätigung die definierte Pagebutton-Seite bzw. -Unterseite aufgerufen wird. Das Aussehen des Pagebutton-Widgets kann mittels ''data-icons'' und ''data-colors'' wie beim Symbol-Widget beeinflusst werden. Folglich erweitert das Pagebutton-Widget die Funktionalität des Symbol-Widgets dergestalt, dass bei Betätigung eine Unterseite aufgerufen wird. Beispiel: Auf der Hauptseite signalisiert das Symbol, ob alle Fenster geschlossen sind oder mindestens eines geöffnet ist. Bei Betätigung des Widgets wird dann die Unterseite aufgerufen, welche eine detaillierte Übersicht über den Zustand aller Fenster enthält. Im nachfolgenden Beispiel wird der Abholtermin des Gelben Sacks am Vortag (normale Anzeige) und am Abholtag (blinkend) angezeigt. Das Reading ''GelberSack_Anzeige'' begrenzt das Zeitfenster der Anzeige auf den Nachmittag des Vortages bis zum Vormittag des Abholtages. Wenn das Symbol angezeigt wird, kann durch manuelle Betätigung die Unterseite ''"#page_content6_4.html"'' aufgerufen werden (welche z.B. weitere Informationen zu anstehenden Abholterminen bereithält).

<syntaxhighlight lang="html">
<div class="vbox grow-0">
<div data-type="pagebutton"
data-url="#page_content6_4.html"
data-load="#content6_4"
data-off-background-color="transparent"
data-off-color="#FFFF7A"
data-on-background-color="transparent"
data-on-color="#FFFF7A"
data-active-pattern=".*#page_content6_4.html"
class="prefetch bigger compressed autohide"
data-device="Entsorger"
data-get="GelberSack_days"
data-states='["0","1"]'
data-icons='["fs-bag blink","fs-bag"]'
data-hide="GelberSack_Anzeige"
data-hide-on="false"></div>

<div data-type="label"
data-device="Entsorger"
data-hide="GelberSack_Anzeige"
data-hide-on="false"
data-get="GelberSack_days"
data-substitution='["0","Heute","1","Morgen"]'
data-color="#FFFF7A" class="compressed autohide"
style="position: relative; top: 5px"></div>
</div>
</syntaxhighlight>

==Weblinks==
*[https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/pagebutton/index_page_left_demo.html Beispiel für eine Navigation]
*{{Link2Forum|Topic=67141|LinkText=Fertiges Pagebutton Multi-Menü}}
*[https://forum.fhem.de/index.php/topic,82003.msg745677.html#msg745677 Sprung zu einer Unterseite (Anwendung von data-parent)]

[[Kategorie:FHEM Tablet UI|Pagebutton]]

FTUI Widget Knob

2022-01-18T10:50:26Z

Ulm32b: /* Attribute */ data-lock ergänzt

Das [[{{PAGENAME}}|Knob Widget]] ist ein Widget für [[FHEM Tablet UI]], das einen verschiebbaren Statusbalken auf einer Kreisbahn erstellt. Optisch wird ein „Drehknopf“ symbolisiert, mit dem man eine Einstellung vornimmt.

<gallery>
File:FTUI_Widget_Knob_01.png
File:FTUI_Widget_Knob_02.png
File:FTUI_Widget_Knob_03.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||FHEM-Device, dessen Readings gelesen/geändert werden sollen||||
|-
|'''data-get'''||Name des Readings, das den darzustellenden Wert enthält||STATE||
|-
|'''data-set'''||Name des Reading, welches geändert werden soll||||
|-
|'''data-cmd'''||Name des Befehls, mit dem das Reading geändert wird (z.B. setstate, set, setreading, trigger)||set||
|-
|'''data-get-value'''||[[Regulärer Ausdruck|RegEx]] oder Position des Wertes in einer leerzeichen-getrennten Textzeile, mit der der Wert erhalten werden kann||||
|-
|'''data-set-value'''||Format des Wertes, wie er an FHEM gesendet werden soll||$v (nur der Wert)||
|-
|'''data-min'''||Mindestwert, der gesetzt werden kann||0||data-min="10"
|-
|'''data-max'''||Maximalwert, der gesetzt werden kann||70||data-max="100"
|-
|'''data-initvalue'''||Startwert||10||data-initvalue="20"
|-
|'''data-step'''||Schrittgröße||1||data-step="0.5"
|-
|'''data-angleoffset'''||Bestimmt die Position auf der Kreisform, auf dem die Statusanzeige beginnen soll||-120||data-angleoffset="0"
|-
|'''data-anglearc'''||Reichweite der Anzeige auf einem Kreis in Grad||240||data-anglearc="360"
|-
|'''<s>data-width</s>'''||<s>Breite des Widgets</s>||<s>120</s>||<s></s>
|-
|'''data-height'''||Höhe des Widgets||120||
|-
|'''data-bgcolor'''||Hintergrundfarbe des Steuerungsbalkens||#505050||data-bgcolor="white"
|-
|'''data-fgcolor'''||Farbe der Statusanzeige||#666||data-fgcolor="red"
|-
|'''data-nomcolor'''||Textfarbe des Wertes||#ffffff||data-nomcolor="#00ff00"
|-
|'''data-displayNominal'''||Wert im Kreisring anzeigen||true||data-displayInput="false"
|-
|'''data-font'''||Schriftart des Wertes||||
|-
|'''data-font-weight'''||Dicke der Schrift||||
|-
|'''data-thickness'''||Dicke des Steuerungsbalkens||0.25||
|-
|'''data-unit'''||Einheit, die zum Wert hinzugefügt werden soll||||<nowiki>data-unit="°"</nowiki>
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Die Sperre greift, wenn das Reading den Wert 'true', '1' oder 'on' hat. Hiervon abweichend ist auch eine Definition mittels data-lock-on und data-lock-off möglich.||||
|-
|'''data-lock-on'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aktiviert wird||||
|-
|'''data-lock-off'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aufgehoben wird||||
|-
|'''data-reachable'''||Reading, dessen Inhalt angibt, ob das Device erreichbar ist, oder nicht||||
|}

==CSS Klassen==
{|class="wikitable"
{{FTUI Klasse|mini}}{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|readonly}}
|}

==Beispiele==
===Einfache Lautstärkeregelung===
<syntaxhighlight lang="html">
<div data-type="knob"
data-device="RXV777"
data-get="volumeStraight"
data-set="volumeStraight"
data-min="-60"
data-max="-24"
data-step="0.5"
data-unit="db"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Knob_01.png]]

===Steuerung HUEDevice===
In diesem Beispiel ist das gewünschte HUEDevice nicht erreichbar und das Widget wird somit auf ''readonly'' gesetzt.
<syntaxhighlight lang="html">
<div data-type="knob"
data-device="HUEDevice12"
data-get="pct"
data-set="pct"
data-min="0"
data-max="100"
data-step="1"
data-unit="%"
data-reachable="reachable"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Knob_02.png]]

===Verändertes Aussehen===
Um zu zeigen, wie das Aussehen verändert werden könnte, hier ein etwas übertriebenes Beispiel.
<syntaxhighlight lang="html">
<div data-type="knob"
data-device="HUEDevice12"
data-get="pct"
data-set="pct"
data-min="0"
data-max="100"
data-step="5"
data-unit="%"
data-bgcolor="lightblue"
data-fgcolor="blue"
data-nomcolor="yellow"
data-anglearc="360"
data-angleoffset="0"
data-height="100"
data-font="courier"
data-font-weight="bold"
data-reachable="reachable"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Knob_03.png]]

[[Kategorie:FHEM Tablet UI|Knob]]

FTUI Widget Dimmer

2022-01-18T10:49:15Z

Ulm32b: /* Attribute */ data-lock ergänzt

Das [[{{PAGENAME}}|Dimmer Widget]] ist ein Widget für [[FHEM Tablet UI]], das einen Ein-/Aus-Button mit inkludiertem Schieberegler erstellt.

<gallery>
File:FTUI_Widget_Dimmer_01.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-get'''||Device-Reading, welches den Status-Wert enthält||STATE||
|-
|'''data-get-on'''||Wert für EIN||on||data-get-on="An"
|-
|'''data-get-off'''||Wert für AUS||off||data-get-off="Aus"
|-
|'''data-get-value'''||[[Regulärer Ausdruck|RegEx]] oder Position in einer leerzeichen-getrennten Auflistung, die den Wert repräsentiert||-1 (alles anzeigen)||data-get-value="2"
|-
|'''data-set'''||Reading, welches geändert werden soll||||
|-
|'''data-set-on'''||Wert für EIN, der gesetzt werden soll||data-get-on||
|-
|'''data-set-off'''||Wert für AUS, der gesetzt werden soll||data-get-off||
|-
|'''data-set-value'''||Wert für EIN, der gesetzt werden soll||$v - nur der Wert||
|-
|'''data-set-cmd'''||Name des Befehls zum Ändern des EIN-/AUS-Wertes, der mittels Schieberegler geändert wird||set||data-set-cmd="setreading"
|-
|'''data-cmd-value'''||Name des Befehls zum Ändern des Wertes, der mittels Schieberegler geändert wird||set||
|-
|'''data-dim'''||Name des Readings, das für den DIM-Wert zuständig ist||||data-dim="dim"
|-
|'''data-icon'''||Name des Icons für den Schieberegler||fa-lightbulb-o||
|-
|'''data-max'''||Maximalwert, der gesetzt werden kann||100||data-max="25"
|-
|'''data-min'''||Minimalwert, der gesetzt werden kann||0||data-min="10"
|-
|'''data-step'''||Größe der Änderungsschritte||1||data-step="5"
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Die Sperre greift, wenn das Reading den Wert 'true', '1' oder 'on' hat. Hiervon abweichend ist auch eine Definition mittels data-lock-on und data-lock-off möglich.||||
|-
|'''data-lock-on'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aktiviert wird||||
|-
|'''data-lock-off'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aufgehoben wird||||
|-
|'''data-timeout'''||Maximale Zeit, die der eingestellte Zustand nach einer Veränderung angezeigt wird, bis die echte Rückmeldung vom Device wieder angezeigt wird||2000ms||
|}

==CSS Klassen==
{|class="wikitable"
{{FTUI Klasse|FS20}}
|}

==Hinweise==
* Um den Dim-Wert zu ändern, muss der Button gedrückt und nach unten oder oben verschoben werden.
* Im einfachen Modus (ohne ''data-dim''-Parameter) schaltet das Widget zwischen OFF und dem DIM-Wert.
* Im erweiterten Modus (mit ''data-dim''-Parameter) wird der DIM-Wert vom definierten Reading empfangen bzw. gesendet und der Button wird nur für EIN/AUS verwendet.
* ''$v'' ist ein Platzhalter für den numerischen Wert. Er wird zur Laufzeit durch den richtigen Wert ersetzt.
* data-lock: Das Widget wird gesperrt (readonly), wenn das definierte Reading den Wert ''1'', ''on'' oder ''true'' hat.

Das Attribut '''data-timeout''' dient dazu, ein "Flackern" der Anzeige zu verhindern. Manche Devices benötigen einige Zeit, bis der gewünschte und eben eingestellte Zustand erreicht wird.
Zitat aus dem Forum: "data-timeout gilt nur für die on-off (toggle) Funktion von Switch und Dimmer, nicht fürs Dimmen. Das Problem: Am Switch wird eingeschaltet, der Knopf wird hell und ON an FHEM gesendet. Aber die Hardware reagiert nicht, geht nicht auf ON.
Wenn sie das machen würde, käme auch eine Bestätigung per Longpoll. Mit '''data-timeout''' wird die eingestellte Zeit gewartet und bei Ausbleiben der Bestätigung fällt der Switch zum ursprünglichen Status zurück, geht also wieder aus. Nur wenn innerhalb der x Sekunden das Longpoll-Event kommt, wird der Fallbacktimer gestoppt."

==Beispiele==
===HUEDevice===
Einfaches Beispiel:
<syntaxhighlight lang="html">
<div data-type="dimmer"
data-device='HUEDevice1'
data-set="pct"
data-get-on="!off"
data-get-off="off"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Dimmer_01.png]]

Nun ein Beispiel mit einem eigenen Reading für den DIM-Wert. Es ist dasselbe HUEDevice wie oben, nur wird diesmal der pct-Wert getrennt von EIN/AUS geregelt:
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

===Homematic-Dimmer===
So wird ein Homematic-Dimmer im erweiterten Modus eingebunden:
<syntaxhighlight lang="html">
<div data-type="dimmer"
data-device="HomematicDevice1"
data-get-on="on|^[1-9][0-9]?(?:\.5)?$"
data-get-off="off"
data-set-on="on"
data-dim="pct"></div>
</syntaxhighlight>

===RegEx für On-Werte===
Dieses Beispiel verwendet einen RegEx-Ausdruck, um alle möglichen Werte für "EIN" abzudecken.
<syntaxhighlight lang="html">
<div data-type="dimmer"
data-device='Dimmer1'
data-set="pct"
data-get-on="[0-9]{1,3}|on"
data-get-off="off"></div>
</syntaxhighlight>

[[Kategorie:FHEM Tablet UI|Dimmer]]

FTUI Widget Controller

2022-01-18T10:47:54Z

Ulm32b: /* Attribute */ data-lock ergänzt

Das [[{{PAGENAME}}|Controller Widget]] ist ein Widget für [[FHEM Tablet UI]] in Form eines iOS-ähnlichen 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:FTUI controller1.png
</gallery>

Das Widget kann sehr gut mit weiteren Widgets der Typen [[FTUI Widget Controlbutton|Controlbutton]] und [[FTUI Widget Switch|Switch]] kombiniert werden, um ein iOS-ähnliches Controlcenter zu erstellen.

[[Datei:FTUI controlbutton controller.png|200px]]

==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-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-on'''||Wert, bei dem der Slider zum maximalen Ausschlag springt||'on'||
|-
|'''data-off'''||Wert, bei dem der Slider minimalen Ausschlag springt||'off'||
|-
|'''data-width'''||Breite des Sliders, wenn er horizontal ausgerichtet ist||'4em'||
|-
|'''data-height'''||Höhe des Sliders, wenn er vertikal ausgerichtet ist||'11em'||
|-
|'''data-color'''||Farbe des Sliders für den Bereich 0...<eingestellter Wert>||'#fff'||
|-
|'''data-background-color'''||Farbe des Sliders für den Bereich <eingestellter Wert>...<Maximaler Wert>||'rgba(40,40,40,0.5)'||
|-
|'''data-icon'''||Name des Icons, das im Slider angezeigt werden soll||'fa-lightbulb-o'||
|-
|'''data-icon-color'''||Farbe des Icons im Slider||'#aaa'||
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Die Sperre greift, wenn das Reading den Wert 'true', '1' oder 'on' hat. Hiervon abweichend ist auch eine Definition mittels data-lock-on und data-lock-off möglich.||||
|-
|'''data-lock-on'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aktiviert wird||||
|-
|'''data-lock-off'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aufgehoben wird||||
|-
|}

==Beispiele==
=== Schieberegler ===
Schieberegler zur Änderung der Lautstärke im Bereich 0 bis 60 mit transparentem Hintergrund.

<syntaxhighlight lang="html">
<div data-type="controller"
data-device="AvReceiver"
data-get="volume"
data-background-color="transparent"
data-set="volume"
data-icon="fa-volume-up"
data-max="60"
class="fullsize">
</div>
</syntaxhighlight>

===Controlcenter===
Dieses Beispiel zeigt den kompletten Code für die Kombination aus Controlbutton, Controller und Switch, um ein iOS-ähnliches Controlcenter zu erstellen.

[[Datei:FTUI controlbutton controller.png|200px]]

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>

<head>

<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_base_width" content="70">
<meta name="gridster_base_height" content="70">
<meta name="gridster_margin" content="5">

<script src="js/fhem-tablet-ui.js" defer></script>

<title>FTUI-Control</title>
</head>

<body style="background-image:url(bgimage-tablet.jpg)">
<div class="gridster bg-transparent">
<ul>



<li data-row="1" data-col="1" data-sizey="2" data-sizex="2" class="bg-gray-trans round">
<div class="row-5"></div>
<div class="row-45">
<div class="col-5"></div>
<div class="col-45 center" data-type="switch" data-device="dummy1" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-wifi"></div>
<div class="col-45 center" data-type="switch" data-device="dummy2" data-color="white" data-size="130" data-on-background-color="green" data-icon="fa-lock"></div>
<div class="col-5"></div>
</div>
<div class="row-45">
<div class="col-5"></div>
<div class="col-45 center" data-type="switch" data-device="dummy1" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-bluetooth-b"></div>
<div class="col-45 center" data-type="switch" data-device="dummy3" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-podcast"></div>
<div class="col-5"></div>
</div>
<div class="row-5"></div>
</li>



<li data-row="1" data-col="3" data-sizey="2" data-sizex="2" class="bg-gray-trans round">
<div class="row-10"></div>
<div class="row-20">
<div class="bold center " data-type="label" data-device="MPD1" data-get="Artist"></div>
</div>
<div class="row-20">
<div class="center" data-type="label" data-device="MPD1" data-get="Title"></div>
</div>
<div class="row-50">
<div class="col center" data-type="push" data-device="MPD1" data-icon="fa-step-backward" data-background-icon="-" data-set-on="previous" data-off-color="#000" data-on-color="white">
</div>
<div class="col center" data-type="switch" data-device="MPD1" data-states='["play","pause","stop"]' data-set-states='["pause","play","play"]' data-background-icon="none" data-colors='["#000","#ddd","#ddd"]' data-icons='["fa-pause","fa-play","fa-play"]'>
</div>
<div class="col center" data-type="push" data-device="MPD1" data-icon="fa-step-forward" data-background-icon="-" data-set-on="next" data-off-color="#000" data-on-color="white">
</div>
</div>
</li>



<li data-row="3" data-col="3" data-sizey="2" data-sizex="1" class="bg-gray-trans round">
<div class="row-100">
<div class="fullsize" data-type="controller" data-device="EsstischLampe" data-background-color="transparent" data-get="state" data-set="value"></div>
</div>
</li>
<li data-row="3" data-col="4" data-sizey="2" data-sizex="1" class="bg-gray-trans round">
<div class="row-100">
<div class="fullsize" data-type="controller" data-device="AvReceiver" data-get="volume" data-background-color="transparent" data-set="volume" data-icon="fa-volume-up" data-max="60"></div>
</div>
</li>
<li data-row="3" data-col="1" data-sizey="1" data-sizex="1" class="bg-gray-trans round">
<div class="fullsize" data-type="controlbutton" data-device="SchrankLicht_Sw" data-icon="fa-book"></div>
</li>
<li data-row="3" data-col="2" data-sizey="1" data-sizex="1" class="bg-gray-trans round">
<div class="fullsize" data-type="controlbutton" data-device="KuechenArbeitsLicht" data-icon="fa-beer"></div>
</li>
<li data-row="4" data-col="1" data-sizey="1" data-sizex="2" class="bg-gray-trans round">
<div class="row">
<div class="col-30 center fa fa-2x fa-sign-in"></div>
<div class="col-70 center" data-type="label" data-device="AvReceiver" data-get="input"></div>
</div>
</li>



<li data-row="5" data-col="1" data-sizey="1" data-sizex="1" class="bg-gray-trans round">
<div class="fullsize" data-type="controlbutton" data-device="BadWandlicht" data-icon="fa-shower"></div>
</li>
<li data-row="5" data-col="2" data-sizey="1" data-sizex="1" class="bg-gray-trans round">
<div class="fullsize" data-type="controlbutton" data-device="SchlafzimmerLicht" data-icon="fa-bed"></div>
</li>
<li data-row="5" data-col="3" data-sizey="1" data-sizex="1" class="bg-gray-trans round">
<div class="fullsize" data-type="controlbutton" data-device="WohnenDeckenLicht" data-icon="fa-tv"></div>
</li>
<li data-row="5" data-col="4" data-sizey="1" data-sizex="1" class="bg-gray-trans round">
<div class="fullsize" data-type="controlbutton" data-device="GartenLicht" data-icon="fa-envira"></div>
</li>
</ul>
</div>
</body>

</html>
</syntaxhighlight>

[[Kategorie:FHEM Tablet UI|Controller]]

FTUI Widget Controlbutton

2022-01-18T10:45:22Z

Ulm32b: data-lock ergänzt

Das [[{{PAGENAME}}|Controlbutton Widget]] ist ein Widget für [[FHEM Tablet UI]]. Dabei handelt es sich um einen Ein-/Ausschalter in Form eines Druckknopfes im Design von iOS (11). Er dient zum Ausführen beliebiger Schaltbefehle und kann auch für FTUI-interne Steuerungen genutzt werden. Zusätzlich kann der Schalter in Abhängigkeit eines Readings sein Aussehen verändern und so zwei oder mehr Zustände optisch darstellen. Beispielsweise können Farbe und/oder das Symbol die Zuständen an/aus anzeigen. Kann das Status-Reading mehr als zwei Zustände einnehmen, kann auch dies dargestellt werden. Dabei sind beliebige Kombinationen von Vorder-/Hintergrundfarben und Symbolen möglich.

<gallery>
File:FTUI controlbutton1.png
</gallery>

Das Widget kann sehr gut mit weiteren Widgets der Typen [[FTUI Widget Controller|Controller]] und [[FTUI Widget Switch|Switch]] kombiniert werden, um ein iOS-ähnliches Controlcenter zu erstellen.

[[Datei:FTUI controlbutton controller.png|200px]]

==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-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||
|-
|'''data-get'''||Reading, dessen Inhalt zur Zustandsanzeige (ON/OFF) wird||keiner (muss explizit angegeben werden)||
|-
|'''data-get-on'''||Zeichenkette, die als Zustand ON interpretiert wird||||
|-
|'''data-get-off'''||Zeichenkette, die als Zustand OFF interpretiert wird||||
|-
|'''data-set-on'''||Zeichenkette, die zum Einschalten gesendet wird||||
|-
|'''data-set-off'''||Zeichenkette, die zum Ausschalten gesendet wird||||
|-
|'''data-icon'''||Name des Icons im Vordergrund||'fa-lightbulb-o'||
|-
|'''data-background-icon'''||Name des Icons, das als Hintergrund verwendet werden soll||'fa-circle'||
|-
|'''data-on-color'''||Farbe des Widgets, wenn das Device eingeschaltet ist||#aa6900||
|-
|'''data-off-color'''||Farbe des Widgets, wenn das Device ausgeschaltet ist||#505050||
|-
|'''data-on-background-color'''||Hintergrundfarbe des Widgets, wenn das Device eingeschaltet ist||#aa6900||
|-
|'''data-off-background-color'''||Hintergrundfarbe des Widgets, wenn das Device ausgeschaltet ist||#505050||
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Die Sperre greift, wenn das Reading den Wert 'true', '1' oder 'on' hat. Hiervon abweichend ist auch eine Definition mittels data-lock-on und data-lock-off möglich.||||
|-
|'''data-lock-on'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aktiviert wird||||
|-
|'''data-lock-off'''||Wert des Readings, bei dem die Sperre (vgl. data-lock) aufgehoben wird||||
|-
|}

==Beispiele==
===An/Aus===
Einfacher Schalter, der <code>on</code>/<code>off</code> sendet und diesen Status durch Farbumschlag anzeigt.

<syntaxhighlight lang="html">
<div data-type="controlbutton"
data-device="BadWandlicht"
data-icon="fa-shower"
class="fullsize">
</div>
</syntaxhighlight>

===Controlcenter===
Dieses Beispiel zeigt den kompletten Code für die Kombination aus Controlbutton, Controller und Switch, um ein iOS-ähnliches Controlcenter zu erstellen.

[[Datei:FTUI controlbutton controller.png|200px]]

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>

<head>

<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_base_width" content="70">
<meta name="gridster_base_height" content="70">
<meta name="gridster_margin" content="5">

<script src="js/fhem-tablet-ui.js" defer></script>

<title>FTUI-Control</title>
</head>

<body style="background-image:url(bgimage-tablet.jpg)">
<div class="gridster bg-transparent">
<ul>



<li data-row="1" data-col="1" data-sizey="2" data-sizex="2" class="bg-gray-trans round">
<div class="row-5"></div>
<div class="row-45">
<div class="col-5"></div>
<div class="col-45 center" data-type="switch" data-device="dummy1" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-wifi"></div>
<div class="col-45 center" data-type="switch" data-device="dummy2" data-color="white" data-size="130" data-on-background-color="green" data-icon="fa-lock"></div>
<div class="col-5"></div>
</div>
<div class="row-45">
<div class="col-5"></div>
<div class="col-45 center" data-type="switch" data-device="dummy1" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-bluetooth-b"></div>
<div class="col-45 center" data-type="switch" data-device="dummy3" data-color="white" data-size="130" data-on-background-color="blue" data-icon="fa-podcast"></div>
<div class="col-5"></div>
</div>
<div class="row-5"></div>
</li>



<li data-row="1" data-col="3" data-sizey="2" data-sizex="2" class="bg-gray-trans round">
<div class="row-10"></div>
<div class="row-20">
<div class="bold center " data-type="label" data-device="MPD1" data-get="Artist"></div>
</div>
<div class="row-20">
<div class="center" data-type="label" data-device="MPD1" data-get="Title"></div>
</div>
<div class="row-50">
<div class="col center" data-type="push" data-device="MPD1" data-icon="fa-step-backward" data-background-icon="-" data-set-on="previous" data-off-color="#000" data-on-color="white">
</div>
<div class="col center" data-type="switch" data-device="MPD1" data-states='["play","pause","stop"]' data-set-states='["pause","play","play"]' data-background-icon="none" data-colors='["#000","#ddd","#ddd"]' data-icons='["fa-pause","fa-play","fa-play"]'>
</div>
<div class="col center" data-type="push" data-device="MPD1" data-icon="fa-step-forward" data-background-icon="-" data-set-on="next" data-off-color="#000" data-on-color="white">
</div>
</div>
</li>



<li data-row="3" data-col="3" data-sizey="2" data-sizex="1" class="bg-gray-trans round">
<div class="row-100">
<div class="fullsize" data-type="controller" data-device="EsstischLampe" data-background-color="transparent" data-get="state" data-set="value"></div>
</div>
</li>
<li data-row="3" data-col="4" data-sizey="2" data-sizex="1" class="bg-gray-trans round">
<div class="row-100">
<div class="fullsize" data-type="controller" data-device="AvReceiver" data-get="volume" data-background-color="transparent" data-set="volume" data-icon="fa-volume-up" data-max="60"></div>
</div>
</li>
<li data-row="3" data-col="1" data-sizey="1" data-sizex="1" class="bg-gray-trans round">
<div class="fullsize" data-type="controlbutton" data-device="SchrankLicht_Sw" data-icon="fa-book"></div>
</li>
<li data-row="3" data-col="2" data-sizey="1" data-sizex="1" class="bg-gray-trans round">
<div class="fullsize" data-type="controlbutton" data-device="KuechenArbeitsLicht" data-icon="fa-beer"></div>
</li>
<li data-row="4" data-col="1" data-sizey="1" data-sizex="2" class="bg-gray-trans round">
<div class="row">
<div class="col-30 center fa fa-2x fa-sign-in"></div>
<div class="col-70 center" data-type="label" data-device="AvReceiver" data-get="input"></div>
</div>
</li>



<li data-row="5" data-col="1" data-sizey="1" data-sizex="1" class="bg-gray-trans round">
<div class="fullsize" data-type="controlbutton" data-device="BadWandlicht" data-icon="fa-shower"></div>
</li>
<li data-row="5" data-col="2" data-sizey="1" data-sizex="1" class="bg-gray-trans round">
<div class="fullsize" data-type="controlbutton" data-device="SchlafzimmerLicht" data-icon="fa-bed"></div>
</li>
<li data-row="5" data-col="3" data-sizey="1" data-sizex="1" class="bg-gray-trans round">
<div class="fullsize" data-type="controlbutton" data-device="WohnenDeckenLicht" data-icon="fa-tv"></div>
</li>
<li data-row="5" data-col="4" data-sizey="1" data-sizex="1" class="bg-gray-trans round">
<div class="fullsize" data-type="controlbutton" data-device="GartenLicht" data-icon="fa-envira"></div>
</li>
</ul>
</div>
</body>

</html>
</syntaxhighlight>

[[Kategorie:FHEM Tablet UI|Controlbutton]]

FHEM Tablet UI

2022-01-15T09:40:13Z

Ulm32b: Wording: Plural von "Status" ist nicht "Stati"

{{Infobox Modul
|ModPurpose=Oberfläche für FHEM
|ModType=x
|ModFTopic=34233
|ModForumArea=TabletUI
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
[[FHEM Tablet UI]] (FTUI) ist ein leichtgewichtiges aber funktionsreiches Frontend-Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Es basiert auf HTML/CSS/JavaScript und stellt somit keine zusätzlichen Anforderungen an den FHEM-Server.

Mit Hilfe zahlreicher Widgets, die sehr leicht mit HTML Code konfiguriert werden können, ist es möglich, innerhalb kurzer Zeit ein den eigenen Wünschen entsprechendes User-Interface aufzubauen.

Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.

Mit wenigen Anpassungen ist es auch möglich, das UI auf anderen Webservern (Apache, u.a.) zu betreiben. Somit können FHEM und FHEM Tablet UI auch auf getrennten Systemen ausgeführt werden.

[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]

{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}}

== Installation ==
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:
*Dateien aus dem GitHub-Repository herunterladen
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)
*Eine Beispieldatei anlegen

{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}

'''1.''' Zuerst müssen alle Dateien von FHEM Tablet UI in das FHEM-Verzeichnis '''/opt/fhem/www''' kopiert werden. Das geht mit folgendem '''update'''-Befehl über die FHEM-Befehlszeile.
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>

:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]

'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code>

:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]

{{Hinweis|Dieser Schritt kann ausgelassen werden, wenn die Funktionalitäten von [[FHEMWEB]] ausreichend sind. Dann muss FTUI aber in weiterer Folge unter der URL '''<nowiki>http(s)://<fhem-server>:8083/fhem/tablet/index.html</nowiki>''' aufgerufen werden und es wird kein Link auf FTUI in der FHEM GUI erstellt. Vorteil ist aber, dass das FHEMWEB-Caching verwendet werden kann. Siehe dieser {{Link2Forum|Topic=86362|Message=788258}}.}}

'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.

:<code>attr WEB longpoll websocket</code>
:bzw. bei Problemen mit ''websocket''
:<code>attr WEB longpoll 1</code>

:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]

'''4.''' Weil FTUI noch nichts anzuzeigen hat, wird die Datei '''/opt/fhem/www/tablet/index-example.html''' nach '''/opt/fhem/www/tablet/index.html''' kopiert.
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code>

:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]

'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.

Somit ist FHEM Tablet UI bereit zur Verwendung und kann durch Aufruf der URL '''<nowiki>http://<fhem-server>:8083/fhem/ftui/</nowiki>''' oder den Link im FHEM-Menü geöffnet werden

== Update ==
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.

'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

'''2.''' Update der geänderten Dateien durch Eingabe von:
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Eine weitere Option ist das Hinzufügen des FTUI-Git-Repositories zum allgemeinem Update-Vorgang von FHEM. Dabei wird dann bei einem FHEM-Update auch gleich FHEM Tablet UI aktualisiert, bzw. die Änderungen angezeigt.
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Beachte: Das Ergebnis des o.g. Befehls wird in FHEM/controls.txt eingetragen, siehe auch [[Update#update_add]]

== Konfiguration ==
===DOCTYPE===
In allen HTML-Dateien, die im Browser geladen werden und das typische HTML-Gerüst besitzen (also alle Hauptseiten, jedoch keine Template-Dateien), sollte eine ''Document Type Declaration'' (DTDT) eingefügt werden. Mit ihr wird festgelegt, welche ''Document Type Definition'' hier verwendet wird (das kommt aus der Metasprache XML), konkret also, in welcher Version der nachfolgende HTML-Code vom Browser interpretiert werden soll. Lässt man die DTDT weg, oder definiert sie auf verschiedenen Seiten unterschiedlich, kann ein und der selbe HTML-Code zu unterschiedlichen Darstellungen führen. Die DTDT erfolgt immer auf der ersten Zeile, noch vor dem <code><html></code>-Tag. Nachfolgend wird HTML5 verwendet.

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
</syntaxhighlight>

===META-Parameter===
Das Tablet UI lässt sich über die META-Parameter konfigurieren. Diese Parameter sind in jeder '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>''' einzutragen. Ausgenommen davon sind Dateien, die als Template, Pagebutton-Zielseiten oder ähnliches eingebunden werden.

Die Parameter sind immer nach diesem Schema aufgebaut:
<meta name="[Parameter-Name]" content="[Parameter-Wert]">

===Verbindung zu FHEM===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird
|-
|longpoll||1||0, 1||
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)

'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.
|-
|longpoll_type||websocket||websocket, ajax, 0||
'''websocket''': Für die Aktualisierung der Daten wird das Websocket-Protokoll verwendet. Werden vom Browser keine Websockets unterstützt, gibt es einen automatischen Fallback auf Ajax.

'''ajax''': Ajax wird für die Aktualisierung verwendet.

'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.
|-
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.
|-
|longpoll_maxage||240||Integer||Kommen in diesem Zeitraum (Sekunden) keine Longpoll-Events bei FTUI an, wird die Verbindung als "disconnected" angesehen und ein neuer Verbindungsversuch wird gestartet.
|-
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet
|-
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein
|-
|fhemweb_url||/fhem/||Integer||URL zu FHEM. Wird benötigt wenn FTUI auf einem anderen als dem FHEM Server läuft oder nicht im Standard-Pfad installiert ist.
Hinweis: Wenn FHEM auf einem anderem Server/Domain läuft muss man das "CORS" Attribut im FHEMWEB Modul (s.o.) auf 1 setzen, sonst bekommt man Cross Origin Fehler.
|}

===Funktionalität===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|debug||0||0 - 5||Log-Level
|-
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.
|-
|toast_position||bottom-left||||Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.
|-
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)
|-
|username||||String||Benutzername für eine Basic-Authentifierung *
|-
|password||||String||Passwort für eine Basic-Authentifizierung *
|}
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.

===Toast-Nachrichten===
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]
Tablet-UI liefert Informationen darüber, was im Moment gerade passiert. Das geschieht über Toast-Nachrichten, die in der Standardeinstellung unten links im Browser auftauchen.

Wird beispielsweise ein Gerät eingeschaltet, so erscheint eine kleine Nachricht mit dem abgesetzten Befehl. Auch Fehlermeldungen und Statusinformationen werden angezeigt. Ob überhaupt und was konkret angezeigt wird, richtet sich nach dem eingestellten Debug-Level (siehe oben). Beim Debug-Level 5 werden alle Nachrichten angezeigt, bei 0 keine.

Die Position der Toast-Nachrichten kann über den Meta-Tag <code>meta name='toast_position'</code> festgelegt werden. Für oben-mittig müsste folgender Code eingefügt werden:
<pre><meta name='toast_position' content='top-center'></pre>

Möglich sind folgende Positionen:
* <code>top-left</code>
* <code>top-right</code>
* <code>bottom-left</code>
* <code>bottom-right</code>
* <code>top-center</code>
* <code>bottom-center</code>
* <code>mid-center</code>

Die maximale Anzahl an Nachrichten, die gleichzeitig angezeigt werden können, lässt sich mit <code>meta name='toast'</code> Sind maximal 2 Nachrichten gewünscht, muss folgender Meta-Tag gesetzt werden:
<pre><meta name='toast' content='2'></pre>

==Navigationsmethoden==
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}}

'''Unterschied zwischen Pagetab und Pagebutton:'''

'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite
[[FTUI_Widget_Pagetab]]

'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite
[[FTUI_Widget_Pagebutton]]

'''Pagelink:''' damit kann man beliebige Widgets kapseln und vorhandene Pagebutton-Seiten ansteuern
[[FTUI Widget Link]]

==Gestaltung==
===Layout-Optionen===
* [[FTUI Layout Gridster|Gridster]]
* [[FTUI Layout Flex|Flex]]
* [[FTUI Layout Sheet|Tabelle]]
* [[FTUI Layout Row|Reihen]]

=== Farben ===
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel:

*HEX: #ADD8E6
*RBG: rgb(173, 216, 230)
*Namen: lightblue

Knallige Farben wie '''<span style="color: #ff0000;">#ff0000</span>''' für Rot oder '''<span style="color: #00ff00;">#00ff00</span>''' für Grün sollten vermieden werden.
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.

Empfohlene Farben sind z.B.:

*Orange: <span style="color: #aa6900;">#aa6900</span>
*Rot: <span style="color: #ad3333;">#ad3333</span>
*Grün: <span style="color: #32a054;">#32a054</span>
*Blau: <span style="color: #6699FF;">#6699FF</span>
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span>

Hilfreich bei der Suche nach den Farbwerten ist zum Beispiel der Color-Picker auf dieser Seite: http://www.colorpicker.com. Für die Suche nach Farben, die einen guten Kontrast bilden, diese Webseite: http://vanisoft.pl/~lopuszanski/public/colors/

Im Ordner ''css'' der FTUI Installation finden sich einige vorbereitete Farbschemata. Diese können mit einem zusätzlichen Eintrag im <nowiki><head></nowiki>-Bereich der FTUI-Seite(n) aktiviert werden.

Hier am Beispiel eines blauen Farbschemas:
<syntaxhighlight lang="html">
<html>
<head>
[...]
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" />
[...]
</head>
</syntaxhighlight>

Diese Schema-Dateien ändern alle Widgets.
<gallery>
File:Theme_default.png|default
File:Theme_blue.png|fhem-blue-ui.css
File:Theme_green.png|fhem-green-ui.css
File:Theme_mobile.png|fhem-mobile-ui.css
File:Theme_darkblue.png|fhem-darkblue-ui.css
File:Theme_darkgreen.png|fhem-darkgreen-ui.css
</gallery>

Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.

===CSS-Styles===
Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt [[#CSS-Klassen|CSS-Klassen]] aufgeführt.

Soll das Aussehen des UI durch eigene CSS-Klassen oder durch Überschreiben der vorhandenen verändert werden, kann eine eigene CSS-Datei erstellt werden, die dann bei einem eventuellen Update von FTUI nicht überschrieben wird. Diese Datei muss den Dateinamen '''fhem-tablet-ui-user.css''' haben und im Ordner '''/fhem/tablet/css''' abgelegt werden. Sie wird dann beim Aufruf von FTUI automatisch mitgeladen.

=== CSS-Klassen ===
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.

{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! colspan="2" style="text-align: left;" |sheet/row/cell-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|sheet}}{{FTUI Klasse|row}}{{FTUI Klasse|cell}}{{FTUI Klasse|cell-1-x}}{{FTUI Klasse|cell-x}}{{FTUI Klasse|left-align}}{{FTUI Klasse|right-align}}{{FTUI Klasse|bottom-align}}{{FTUI Klasse|top-align}}{{FTUI Klasse|center-align}}
|}

{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! colspan="2" style="text-align: left;" |row/col-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}
|}

{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! colspan="2" style="text-align: left;" |hbox/vbox-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|vbox}}{{FTUI Klasse|hbox}}{{FTUI Klasse|card}}{{FTUI Klasse|phone-width}}{{FTUI Klasse|full-height}}{{FTUI Klasse|full-width}}{{FTUI Klasse|grow-0}}{{FTUI Klasse|grow-1}}{{FTUI Klasse|grow-2}}{{FTUI Klasse|grow-x}}{{FTUI Klasse|items-top}}{{FTUI Klasse|items-center}}{{FTUI Klasse|items-bottom}}{{FTUI Klasse|items-space-between}}{{FTUI Klasse|items-space-around}}
|}

{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! colspan="2" style="text-align: left;" |Generelle Klassen für die Positionierung
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|inline}}{{FTUI Klasse|newline}}{{FTUI Klasse|top-space}}{{FTUI Klasse|top-space-2x}}{{FTUI Klasse|top-space-3x}}{{FTUI Klasse|left-space}}{{FTUI Klasse|left-space-2x}}{{FTUI Klasse|left-space-3x}}{{FTUI Klasse|right-space}}{{FTUI Klasse|right-space-2x}}{{FTUI Klasse|right-space-3x}}{{FTUI Klasse|top-narrow}}{{FTUI Klasse|top-narrow-2x}}{{FTUI Klasse|top-narrow-10}}{{FTUI Klasse|left-narrow}}{{FTUI Klasse|left-narrow-2x}}{{FTUI Klasse|left-narrow-3x}}{{FTUI Klasse|right-narrow}}{{FTUI Klasse|right-narrow-2x}}{{FTUI Klasse|right-narrow-3x}}{{FTUI Klasse|centered}}{{FTUI Klasse|wider}}{{FTUI Klasse|narrow}}{{FTUI Klasse|fullsize}}{{FTUI Klasse|compressed}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|maxw40}}{{FTUI Klasse|doublebox-v}}{{FTUI Klasse|doublebox-h}}{{FTUI Klasse|triplebox-v}}{{FTUI Klasse|right}}
|}

{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! colspan="2" style="text-align: left;" |Vordergrundfarben
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|lightblue}}{{FTUI Klasse|orange}}{{FTUI Klasse|gray}}{{FTUI Klasse|lightgray}}{{FTUI Klasse|white}}{{FTUI Klasse|black}}{{FTUI Klasse|mint}}{{FTUI Klasse|yellow}}
|}

{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! colspan="2" style="text-align: left;" |Hintergrundfarben
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|bg-red}}{{FTUI Klasse|bg-green}}{{FTUI Klasse|bg-blue}}{{FTUI Klasse|bg-lightblue}}{{FTUI Klasse|bg-orange}}{{FTUI Klasse|bg-gray}}{{FTUI Klasse|bg-lightgray}}{{FTUI Klasse|bg-white}}{{FTUI Klasse|bg-black}}{{FTUI Klasse|bg-mint}}{{FTUI Klasse|bg-yellow}}
|}

{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! colspan="2" style="text-align: left;" |Rahmen
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|verticalLine}}{{FTUI Klasse|border-black}}{{FTUI Klasse|border-white}}{{FTUI Klasse|border-orange}}{{FTUI Klasse|border-red}}{{FTUI Klasse|border-green}}{{FTUI Klasse|border-mint}}{{FTUI Klasse|border-lightblue}}{{FTUI Klasse|border-blue}}{{FTUI Klasse|border-gray}}{{FTUI Klasse|border-yellow}}{{FTUI Klasse|border-lightgray}}
|}

{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! colspan="2" style="text-align: left;" |Größen
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|mini}}{{FTUI Klasse|tiny}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|tall}}{{FTUI Klasse|great}}{{FTUI Klasse|grande}}{{FTUI Klasse|gigantic}}
|}

{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! colspan="2" style="text-align: left;" |Schriftstil
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}
|}

{| class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
! colspan="2" style="text-align: left;" |Sonstiges
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|blank}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}{{FTUI Klasse|fail-shake}}{{FTUI Klasse|marquee}}{{FTUI Klasse|icon round}}{{FTUI Klasse|icon square}}{{FTUI Klasse|readonly}}{{FTUI Klasse|blink}}{{FTUI Klasse|rotate-90}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|autohide}}{{FTUI Klasse|notransmit}}{{FTUI Klasse|tap}}{{FTUI Klasse|FS20}}{{FTUI Klasse|value}}{{FTUI Klasse|novalue}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|percent}}{{FTUI Klasse|nocache}}{{FTUI Klasse|fade}}{{FTUI Klasse|rotate}}{{FTUI Klasse|nolabels}}{{FTUI Klasse|default}}{{FTUI Klasse|prefetch}}{{FTUI Klasse|circulate}}{{FTUI Klasse|valueonly}}{{FTUI Klasse|positiononly}}{{FTUI Klasse|lineIndicator}}{{FTUI Klasse|barIndicator}}{{FTUI Klasse|roundIndicator}}{{FTUI Klasse|dim-tick}}{{FTUI Klasse|dim-front}}{{FTUI Klasse|dim-back}}{{FTUI Klasse|hue-tick}}{{FTUI Klasse|hue-front}}{{FTUI Klasse|hue-back}}{{FTUI Klasse|warn}}{{FTUI Klasse|activate}}{{FTUI Klasse|labelright}}{{FTUI Klasse|interlock}}{{FTUI Klasse|keepopen}}{{FTUI Klasse|noshade}}
|}

=== Überlagerung von Text und Bild ===
[[Datei:FTUI_Text_auf_Bild.png||thumb|right]]
Texte können auf Bildern positioniert werden:
<syntaxhighlight lang="html5">
<li data-row="1" data-col="4" data-sizey="4" data-sizex="6">
<div class="display">
<div data-type="image" data-url="https://picsum.photos/200/125/?random" data-size="100%"></div>
<div class="display-center bigger" data-type="label">Text1</div>
<div class="display-topright bigger right-space top-space" data-type="label">Text2</div>
<div class="ontop bigger" style="left: 120px; top: 50px">Text3</div>
</div>
</li>
</syntaxhighlight>

Zur Verfügung stehen folgende Grundpositionen:
* <code>display-topleft</code>
* <code>display-topcenter</code>
* <code>display-topright</code>
* <code>display-centerleft</code>
* <code>display-left</code>
* <code>display-centerright</code>
* <code>display-right</code>
* <code>display-bottomleft</code>
* <code>display-bottomcenter</code>
* <code>display-bottomright</code>

Feinjustage ist möglich über

* <code>right-space</code>
* <code>top-space</code>
* <code>left-space</code>
* <code>bottom-space</code>
* <code>right-space-2</code>
* <code>top-space-2</code>
* <code>left-space-2</code>
* <code>bottom-space-2</code>
* <code>right-space-3</code>
* <code>top-space-3</code>
* <code>left-space-3</code>
* <code>bottom-space-3</code>

[[Datei:FTUI_Beispiel_Positionierung.png|200px|thumb|right]]
Verallgemeinert lassen sich auf diese Weise '''Objekte frei im Elternelement positionieren''':
<syntaxhighlight lang="html5">
<div class="display" data-type="html">
<div class="display-topcenter top-space big">Fenster</div>
<div class="display-center fa fa-4x ftui-window"></div>
<div class="display-bottomleft bottom-space left-space" data-type="label">Text</div>
</div>
</syntaxhighlight>
=== Icons ===
FTUI bringt einige Icons-"Schriftarten" mit, die für die Darstellung genützt werden können. Diese werden automatisch beim Start des UI eingebunden, sobald ein entsprechendes Icon-Präfix im Code der Seite vorkommt.

Verfügbare Icon-Schriftarten sind:
* Eingebaute Icons ''ftui-window'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code>
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code>
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code>
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code>
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi '''. Beispiel: <code>data-icon="wi wi-day-rain-mix"</code>

Alternativ können auch Bilder Icons (bspw. png) über CSS verwendet werden. Bspw:
<syntaxhighlight lang="html5">
<head>
<style type="text/css">
.logo-fhem {
background: url(https://wiki.fhem.de/fhemlogo.png) no-repeat;
width: 120px;
height: 132px;
background-size: contain;
}
</style>
</head>
<body>
<div data-type="symbol" data-icon="logo-fhem"></div>
</body>
</syntaxhighlight>

== Widgets ==
===Allgemeine Attribute===
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:

{| class="wikitable"
|+allgemeine Attribute
|-
! align="right" |data-type
|Widget-Typ
|-
! align="right" |data-device
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)
|-
! align="right" |class
|CSS-Klassen für Aussehen und Formatierung des Widgets
|-
|}

{| class="wikitable"
|+Daten Empfangen
|-
! align="right" |data-get
|Reading Name
|-
! align="right" |data-get-on
|Wert für den Status on
|-
! align="right" |data-get-off
|Wert für den Status off
|-
|}

{| class="wikitable"
|+Daten Senden
|-
! align="right" |data-set
|Reading Name
|-
! align="right" |data-set-on
|Wert für den Status on
|-
! align="right" |data-set-off
|Wert für den Status off
|-
|}

Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.

=== Integrierte Widgets ===
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.

* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen
* [[FTUI Widget Circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
* [[FTUI Widget Clock|clock]]: Stellt eine einfache Uhr zur Verfügung
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben
* [[FTUI Widget Controlbutton|controlbutton]]: iOS-ähnlicher Button zum Schalten zwischen zwei Zuständen (z.B. on / off)
* [[FTUI Widget Controller|controller]]: iOS-ähnlicher vertikaler Schieberegler zum Einstellen eines Wertes
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert
* [[FTUI Widget Eventmonitor|eventmonitor]]:
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Zustände eines Objects (z.B.: FHEM Residents)
* [[FTUI Widget Html|html]]:
* [[FTUI Widget Iframe|iframe]]: Widget zum Einbinden externer Inhalte in einem Iframe
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn
* [[FTUI Widget Label|label]]: Reading als Text anzeigen
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM
* [[FTUI Widget Medialist|medialist]]:
* [[FTUI Widget Multistatebutton|multistatebutton]]: Variante des push-Widgets, welches den set-Befehl abhängig vom gelesenen Status ändert
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste
* [[FTUI_Widget_Push|push]]: Button, mit dem ein Befehl an FHEM gesendet werden kann
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position
* [[FTUI Widget Scale|scale]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird
* [[FTUI Widget Slideout|slideout]]:
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler zum Einstellen eines Wertes
* [[FTUI Widget Spinner|spinner]]: Element, um Werte durch Drücken auf Plus-/Minus- oder Höher-/Tiefer-Icons zu ändern
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen zwischen verschiedenen Seiten zu wechseln
* [[FTUI Widget Switch|switch]]: Button, um zwischen zwei Zuständen zu schalten (z.B. on / off)
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)
* [[FTUI Widget Theme|theme]]: Kontextspezifisches Design
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose

===3rd Party Widgets===
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an
* [[FTUI_Widget_Analogclock|analogclock]]: Analoguhr
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [[FTUI Widget Dwdweblink|dwdweblink]]: Grafische Anzeige DWD-Wetter-Weblink
* [[FTUI Widget Filelog|filelog]]: Teile aus einem FHEM Logfile anzeigen
* [[FTUI Widget Fullcalview|fullcalview]]:
* [[FTUI Widget Gds|gds]]:
* [[FTUI Widget Maps|maps]]: Kartendarstellung mit Google Maps API
* [[FTUI Widget Highchart|highchart]]:
* [[FTUI Widget Highchart3d|highchart3d]]:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* [[FTUI Widget Loading|loading]]:
* [[FTUI Widget Meteogram|meteogram]]:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
* [https://forum.fhem.de/index.php/topic,79283.msg712855.html#msg712855 pinpad]: Pinpad für z.B. eine Alarmanlage
* [https://forum.fhem.de/index.php/topic,76643.msg685472.html#msg685472 postme]: Liste des PostMe-Devices anzeigen
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads
* [[FTUI Widget Screensaver|screensaver]]:
* [[FTUI Widget SMAPortalSPG|smaportalspg]]: Anzeige von SMAPortal-Daten im FHEM Tablet UI
* [[FTUI Widget für SSCam Streaming Devices (SSCamSTRM)|sscamstrm]]: Integration von SSCam Streaming-Devices (Synology Surveillance Station Kameras) im FHEM Tablet UI
* [https://forum.fhem.de/index.php/topic,73497.0.html scrolllabel]: Texte in Laufschrift darstellen
* [[FTUI Widget Svgplot|svgplot]]: Unveränderte Übernahme eine bestehenden SVG-Plots
* [https://forum.fhem.de/index.php?topic=82883.msg750237#msg750237 todoist]: einfaches widget für todoist
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.
* [[FTUI Widget UWZ|uwz]]: Anzeige der Warnungen der Unwetterzentrale
* [[FTUI Widget Wakeup|wakeup]]:
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul
* [[FTUI Widget Weekprofile|weekprofile]]: Visualisierung des [[weekprofile]] Moduls
* [[FTUI Widget Weatherdetail|weatherdetail]]: Detaillierte Wettervorhersage über 4 Tage (Nutzt das Proplanta Modul)
* [[FTUI Widget Video|videodetail]]: Video Widget für die FTUI

===Anwendungsbeispiele===
Durch die Verbindung von Widgets mit dem FHEM-Umfeld entstehen Lösungen für typische Anwendungen.
* [[FTUI_Beispiel_Datetimepicker_für_Timer|Datetimepicker für Timer]]: Oberfläche für Timereinstellungen
* [[FTUI_Beispiel_Mondphase|Mondphase]]: Visuelle Darstellung der Mondphase
* [[FTUI_Beispiel_Webradio|Webradio]]
* [[FTUI Beispiel Zeitschaltung|Verschiedene Zeitschaltungen]]

==Templates==
Kommt ein bestimmtes "Code-Fragment" auf mehreren Seiten oder öfter pro Seite vor, bietet FTUI die Option, Templates zu erstellen. Diese werden einmal gebaut und können dann mit dem Attribut '''data-template''' nach Belieben in eine Seite eingefügt werden. Dabei besteht auch die Möglichkeit, Variablen zu verwenden.

Die Variablennamen sollten möglichst eindeutig und unverwechselbar gewählt werden, da bei der Verwendung von Templates im Prinzip Suchen & Ersetzen angewendet wird. Verwendet man beispielsweise die Variablen '''dev:Thermostat_Kueche''' und '''dev_temp:temperatue''', so kann es passieren, dass die Ergebnisse im erzeugten Code dann '''Thermostat_Kueche''' und '''Thermostat_Kueche_temp''' lauten, statt wie gewünscht '''Thermostat_Kueche''' und '''temperature'''. Um dies zu vermeiden, sollten die Variablen besser '''device:Thermostat_Kueche''' und '''temp:temperature''' lauten.

Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.

===Einzelnes Widget===
Soll ein Widget an mehreren Stellen in exakt der selben Ausführung eingebunden werden, kann diese Widget in einer eigenen Datei erstellt und diese dann auf den Zielseiten automatisch mitgeladen werden.

;Template-Seite
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.
<syntaxhighlight lang="html">
<div data-type="symbol"
data-device="dummy1">
</syntaxhighlight>

;Haupt-Seite
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.
<syntaxhighlight lang="html" highlight="6">
[...]
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1">
<div data-template="template_symbol.html"></div>
</li>
</ul>
</div>
</body>
[...]
</syntaxhighlight>

===Gridster-Element===
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li>
</syntaxhighlight>

=== Widget-Gruppen ===
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.

=== Verwendung von Variablen ===
==== Einfaches Beispiel ====
Oft wird ein und dasselbe Widget für verschiedenen Devices verwendet. Um nicht für jedes Device das Widget neu kopieren zu müssen (bzw. bei Änderungen alle Seiten ausbessern zu müssen), kann ein Template verwendet werden, dem einfach per Parameter mitgeteilt wird, von welchem Device es gerade die Daten empfangen soll.

In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.

;Template-Seite
Die Template-Seite enthält nur ein einfaches Label-Widget und wird in diesem Beispiel ''template_label.html'' genannt. Um sie für mehrere Devices verwenden zu können, wird im Attribut '''data-device''' der Name des eigentlichen Devices durch den Parameter '''par01''' ersetzt.
<syntaxhighlight lang="html" highlight="2">
<div data-type="label"
data-device="par01"
data-get="measured-temp"></div>
</syntaxhighlight>

;Haupt-Seite
Auf der Haupt-Seite wird die Template-Seite mit dem Attribut '''data-template''' eingebunden und ihr via Attribut '''data-parameter''' das jeweils gewünschte Device übergeben.
<syntaxhighlight lang="html">
[...]
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div>
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div>
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div>
[...]
</syntaxhighlight>

==== Wetter-Slider mit Template ====
In diesem Beispiel wird ein [[FTUI Widget Slider|Slider-Widget]] erstellt, welches die verschiedenen Tage eines Wetterberichtes anzeigt. Dabei wird für den Wetterbericht des jeweiligen Tages immer dasselbe Template verwendet um nicht für jeden Tag ein eigenes Widget schreiben zu müssen.

;Template-Seite
<syntaxhighlight lang="html">
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="°C"></div>
<div class="inline">
<div data-type="label" data-device="AgroWeather" data-get="par02"></div>
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div>
min: <div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="°C"></div>
</div>
</div>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div>
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div>
</div>
</syntaxhighlight>

;Haupt-Seite
In der Haupt-Seite wird das Template dann für jede Slider-Seite eingebunden und das Reading für den jeweiligen Tag via Parameter übergeben.
<syntaxhighlight lang="html">
[...]
<div data-type="swiper">
<ul>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li>
</ul>
</div>
[...]
</syntaxhighlight>

== JavaScript-Funktionen ==
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.

Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></syntaxhighlight>

Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")}')">+</div></syntaxhighlight>

Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:
<syntaxhighlight lang="html">
<div data-type="label" data-device="dummy1" data-get="temperature"></div>
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div>
</syntaxhighlight>

== Eigene Widgets erstellen ==
Wie eigenen Widgets für FTUI erstellt werden können, ist auf der Seite [[FTUI eigene Widgets]] beschrieben.

Eine Schritt für Schritt Anleitung für das erste eigene Widget gibts hier [[FTUI eigene Widgets - Beispiel]]

== FAQ ==
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.

== Links ==
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}
* [[FTUI_Snippets|Snippets]]
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]
* [https://waschto.eu/fhem-und-tabletui-livedemo/ FHEM und TabletUI Live-Demo]
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]

[[Kategorie:FHEM Tablet UI|!]]

FTUI Widget Homestatus

2022-01-15T09:18:31Z

Ulm32b: Wording; der Plural von Status ist nicht Stati

Das [[{{PAGENAME}}|Homestatus Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem vier oder fünf Zustände (z.B.: FHEM Residents) dargestellt werden können.

<gallery>
File:FTUI_Widget_Homestatus_01.png
File:FTUI_Widget_Homestatus_02.png
File:FTUI_Widget_Homestatus_03.png
</gallery>

==Attribute==
Für das Homestatus-Widget gelten alle Attribute des [[FTUI Widget Knob|Knob-Widgets]] plus der folgenden.
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-get'''||Name des Readings, welches den Status enthält||STATE||
|-
|'''data-set'''||Name des Readings, welches gesetzt werden soll||||
|-
|'''data-get-on'''||Array mit verschiedenen Zuständen||['1','2','3','4']||
|-
|'''data-set-on'''||Array mit verschiedenen Zuständen, die gesetzt werden sollen||data-get-on||
|-
|'''data-alias'''||Array mit Alias-Namen, die im UI angezeigt werden sollen||["Home","Night","Away","Holiday"]||data-alias='["Zuhause","Schlafen","Ausgeflogen","Urlaub"]'
|-
|'''data-icons'''||Array mit Icons, die das data-get-on-Array darstellen sollen||["fa-home","fa-bed","fa-car","fa-suitcase"]||
|-
|'''data-version'''||Name der Version, die verwendet werden soll (''residents'', ''roommate'' oder ''guest'')||||data-version="roommate"
|}

==CSS Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|small}}{{FTUI Klasse|readonly}}
|}

==Hinweise==
* Die Standardversion des Widgets hat vier Zustände: '1','2','3','4'. Die Aliase dafür sind '''Home''','''Night''','''Away''','''Holiday'''
* Wird ''data-version'' mit den Werten '''residents''', '''roommate''' oder '''guest''' angegeben, gibt es fünf Zustände: ''home'', ''asleep'', ''absent'', ''gone'' und ''gotosleep''. Die Aliase dafür sind '''Home''', '''Night''', '''Away''', '''Holiday''' und '''Retire'''

==Beispiele==
===Standard mit vier Zuständen===
<syntaxhighlight lang="html">
<div data-type="homestatus"
data-device='dummy1'></div>
</syntaxhighlight>
[[File:FTUI_Widget_Homestatus_01.png]]

===Version mit fünf Zuständen===
<syntaxhighlight lang="html">
<div data-type="homestatus"
data-device='dummy1'
data-version="roommate"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Homestatus_02.png]]

===Benutzerdefinierte Optionen===
<syntaxhighlight lang="html">
<div data-type="homestatus"
data-device="dummy1"
data-get-on='["train","bicycle","ship","plane","subway"]'
data-alias='["Zug","Fahrrad","Schiff","Flugzeug","U-Bahn"]'
data-icons='["fa-train","fa-bicycle","fa-ship","fa-plane","fa-subway"]'
data-version="roommate"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Homestatus_03.png]]

[[Kategorie:FHEM Tablet UI|Homestatus]]

FTUI Beispiel Webradio

2022-01-04T22:26:20Z

Ulm32b: B5aktuell ist jetzt BR24. Code geändert

In [[FHEM Tablet UI]] entsteht aus [[FTUI Widget Playstream]], [[FTUI Widget Switch]], [[FTUI Widget Select]] und [[FTUI Widget Spinner]] ein Webradio.

<gallery height="300" widths="200">
File:FTUI_Beispiel_Webradio_01.png
File:FTUI_Beispiel_Webradio_02.png
</gallery>

==FHEM-Devices==

<syntaxhighlight lang="html">
defmod Radiosender dummy
setstate Radiosender on
setstate Radiosender link http://radioeins.de/stream

defmod Radio_volume dummy
setstate Radio_volume 50
</syntaxhighlight>

==HTML==
<syntaxhighlight lang="html">
<div data-type="playstream"
data-get="Radiosender:STATE"
data-url="Radiosender:link"
data-volume="Radio_volume:STATE"
class="hide">
</div>

<div data-type="switch"
data-device="Radiosender"
data-icon="mi-radio"
class="cell inline">
</div>



<div class="cell inline"
data-type="select"
data-device="Radiosender"
data-list=""
data-items='["http://radioeins.de/stream","http://wdr-1live-live.icecast.wdr.de/wdr/1live/live/mp3/128/stream.mp3","https://dispatcher.rndfnk.com/br/br24/live/mp3/low"]'
data-alias='["Radio eins","einsLife","BR24"]'
data-get="link"
data-set="link"
data-cmd="setreading">
</div>

<div data-type="spinner"
data-device="Radio_volume"
data-max="100"
data-step="5"
data-icon-left="fa-volume-down"
data-icon-right="fa-volume-up"
class="spinner value horizontal centered">
</div>
</syntaxhighlight>

==Hinweise==
Lauffähig ab FTUI 2.6.2

1/2022: Das im Screenshot angezeigte B5aktuell heißt jetzt BR24; der im Code enthaltene Link zeigt auf den Stream von BR24.

URL, Ein/Aus und Volume werden hier über eigene Devices verwaltet. Damit stehen die Schnittstellen zur Einbindung in komplexere Umfelder zur Verfügung.

==Links==
[[FTUI Widget Playstream]]

[[FTUI Widget Switch]]

[[FTUI Widget Select]]

[[FTUI Widget Spinner]]

[[Kategorie:FHEM Tablet UI|Webradio]]

FTUI Widget Maps

2021-12-30T09:31:29Z

Ulm32b: Klarstellung, welches lib-Verzeichnis gemeint ist (in FHEM gibt es auch mindestens ein weiteres).

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 /opt/fhem/www/tablet/lib/tomtom/ ablegen.

<gallery>
</gallery>

==Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-type'''||Type des Widgets muss auf "maps" gesetzt werden||||
|-
|'''data-map_type'''||Datenquelle für die Kartendarstellung. Es gibt zwei Optionen: data-map_type="Google" oder data-map_type="OSM". Erläuterungen s.o.||||
|-
|'''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-scrollgroup'''
|Legt fest, ob mehrere Kartenfenster gekoppelt werden sollen. Werden verschiedene Fenster mit Karteninhalten definiert (mehrere divs mit unterschiedlichen Werten für data-mapgroup), so werden alle Karten mit dem gleichen data-scrollgroup Wert synchron gezoomt und verschoben.
|
|
|-
|'''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="OSM"
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

2021-12-30T09:18:08Z

Ulm32b: data-map_type bei Attributen ergänzt. Typo in Quellcode zu Blitzer

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-map_type'''||Datenquelle für die Kartendarstellung. Es gibt zwei Optionen: data-map_type="Google" oder data-map_type="OSM". Erläuterungen s.o.||||
|-
|'''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-scrollgroup'''
|Legt fest, ob mehrere Kartenfenster gekoppelt werden sollen. Werden verschiedene Fenster mit Karteninhalten definiert (mehrere divs mit unterschiedlichen Werten für data-mapgroup), so werden alle Karten mit dem gleichen data-scrollgroup Wert synchron gezoomt und verschoben.
|
|
|-
|'''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="OSM"
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 Departure

2021-02-24T21:45:02Z

Ulm32b: Hinweis zu UTF.8 eingefügt.

Das [[{{PAGENAME}}|Widget Departure]] ist ein Widget für [[FHEM Tablet UI]] zur Anzeige der Abfahrtszeiten von Bahn, Bus, Zug und Fähre. Der Entwickler orientierte sich beim Design an den Dresdner Verkehrsbetrieben bzw. am Verkehrsverbund Oberelbe.

<gallery widths="200" heights="250">
File:FTUI_Widget_Departure_01.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des FHEM-Devices||||
|-
|'''data-get'''||Name des Readings, welches die Daten bereitstellt. Dieser Name sollte keine Umlaute und das ß enthalten, weil sonst der automatische Refresh beim Wechsel auf die Seite unterbleibt, vgl. ''data-interval''||||
|-
|'''data-title'''||Überschrift, die in der Kopfzeile ausgegeben wird||data-get||data-title="Schloßallee"
|-
|'''data-cmd'''||Befehl, der an FHEM gesendet wird||'get'||
|-
|'''data-icon-color'''||Farbe des Icons||'#aa6900'||
|-
|'''data-text-color'''||Textfarbe der Verbindungsdaten||'#ddd'||
|-
|'''data-background-color'''||Hintergrundfarbe ||'#C0C0C0'||
|-
|'''data-icon'''||Icon für die Kopfzeile||(Symbol Haltestelle)||data-icon="fa-train", data-icon="fa-bus"
|-
|'''data-width'''||Feste Breite (in % or px)||'200px'||
|-
|'''data-height'''||Feste Höhe (in % or px)||'250px'||
|-
|'''data-interval'''||Zeitintervall für den refresh in s, bei '0' kein auto refresh; zusätzlich wird beim Laden der Seite und in Pagebutton beim Wechsel auf die Seite ein refresh ausgelöst||'120'||
|-
|'''data-refresh'''||wie data-interval||||
|}

==CSS-Klassen==
{|class="wikitable"
!Klasse
!Beschreibung
|-
|'''DB'''||Design Bahn AG
|-
|'''DVB'''||Design Dresdner Verkehrsbetriebe; data-icon sollte leer sein
|-
|'''VVO'''||VVO Design Verkehrsverbund Oberelbe; data-icon sollte leer sein
|-
|'''alternate'''||abwechselnd schattierte Zeilen
|-
|'''deptime'''||angezeigt wird die Abfahrtszeit anstelle der verbleibenden Zeit bis zur Abfahrt
|}
[[Datei:FTUI_Widget_Departure_03.png|700px]]

==Hinweise==
* Provider ändern bisweilen ihre Schnittstellendefinitionen mit Auswirkungen auf den nachfolgend beschriebenen Informationsfluss. In diesem Fall sind Anpassungen vorzunehmen. Das Forum ist eine geeignete Plattform zur Klärung des Sachverhaltes.
* Probleme mit Sonderzeichen in den Richtungsangaben lassen sich gemäß eines Hinweises im Forum ([https://forum.fhem.de/index.php/topic,48255.msg1135329.html#msg1135329 FTUI-Forum - Departure]) wie folgt lösen:
<syntaxhighlight lang="html">
attr xyz getDecode UTF-8
</syntaxhighlight>

==Datenquelle==
Die Daten stammen in FHEM aus einer HTTPMOD-Abfrage, hier dargestellt an einem Beispiel aus Dresden:
<syntaxhighlight lang="html">
define VVO HTTPMOD none 0
attr VVO get02Name Postplatz
attr VVO get02URL http://widgets.vvo-online.de/abfahrtsmonitor/Abfahrten.do?ort=Dresden&hst=Postplatz&vz=0&lim=10
attr VVO get02Regex (\[\[.*\]\]).*
attr VVO timeout 30
</syntaxhighlight>

Auch die Daten anderer Verkehrsträger können genutzt werden. Entweder greift man hierzu direkt auf die Schnittstelle des Verkehrsträgers zu, was idR eine spezifische RegEx ([[Regulärer_Ausdruck]]) bedingt.

Oder man wählt folgenden allgemeineren Weg, welcher auf den Daten der App ''Öffi'' basiert: Zunächst ist der Provider für die Daten zu ermitteln. Die Liste der verfügbaren Provider erhält man mittels
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/provider
</syntaxhighlight>
Die Antwort lautet etwa:
<syntaxhighlight lang="html">
[{"name":"Bahn","aClass":"BahnProvider"},{"name":"Gvh","aClass":"GvhProvider"},{"name":"Vgn","aClass":"VgnProvider"},{"name":"Kvv","aClass":"KvvProvider"},{"name":"Vbl","aClass":"VblProvider"},{"name":"Dub","aClass":"DubProvider"},{"name":"Vms","aClass":"VmsProvider"},{"name":"Bsvag","aClass":"BsvagProvider"}, [...]
</syntaxhighlight>

Relevant ist die Bezeichnung hinter „name“, z.B. „Ding“. „Ding“ steht für „Donau-Iller-Nahverkehrsverbund“. Weil auch ländliche Gebiete meist in Verkehrsverbünde eingegliedert sind, besteht eine realistische Chance, einen Provider für den eigenen Standort zu finden. In größeren Städten kann oft auch der Provider „Bahn“ genutzt werden. Der Wert „aClass“ ist hier nicht von Belang.

Anschließend ist die StationId für die gewünschte Haltestelle zu ermitteln, in diesem Beispiel die Haltestelle ''Sonnenfeld''. Hierzu dient folgende Abfrage:
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/station/suggest?q=Sonnenfeld&provider=Ding
</syntaxhighlight>
Als Antwort erhält man die StationId "9001258".

Testweise können damit die aktuellen Abfahrten abgerufen werden:
<syntaxhighlight lang="html">
https://transport.stefan-biermann.de/publictransportapi/rest/departure/FHEM?from=9001258&provider=Ding
</syntaxhighlight>

Die Einbindung in FHEM erfolgt wie nachfolgend beschrieben:
<syntaxhighlight lang="html">
define Departure_Sonnenfeld HTTPMOD none 0
attr Departure_Sonnenfeld get01Name Sonnenfeld
attr Departure_Sonnenfeld get01URL https://transport.stefan-biermann.de/publictransportapi/rest/departure/FHEM?from=9001258&provider=Ding
attr Departure_Sonnenfeld get01Regex (\[\[.*\]\]).*
attr Departure_Sonnenfeld timeout 30
</syntaxhighlight>

Es können mehrere Haltestellen in einem Device hinterlegt werden; hierzu einfach die drei Attribute ''get01Name, get01URL'' und ''get01Regex'' duplizieren und durchnummerieren. Dabei müssen natürlich Name und URL angepasst werden.

==HTML==
<syntaxhighlight lang="html">
<div data-type="departure"
data-device="Departure_Sonnenfeld"
data-get="Sonnenfeld"
data-icon="fa-bus"
data-interval="60">
</div>
</syntaxhighlight>
[[Datei:FTUI_Widget_Departure_02.png|150px]]

==Beispiele==
===Umschalten zwischen relativer und absoluter Abfahrtszeit===
Dieses Feature ist im Widget selbst nicht implementiert, lässt sich aber mittels [[FTUI Widget Classchanger]] und [[FTUI Widget Checkbox]] umsetzen. Hierbei wird die gewünschte Ansicht ein- und die andere ausgeblendet.

<syntaxhighlight lang="html">
define Nahverkehr_Umschalter_Zeitangabe dummy
</syntaxhighlight>

<syntaxhighlight lang="html">
<div class="vbox">

<div data-type="classchanger" data-device="Nahverkehr_Umschalter_Zeitangabe" data-get-on="on" data-on-class="hide" data-off-class="cell">
<div data-type="departure"
data-device="..."
...
class="alternate">
</div>
</div>

<div data-type="classchanger" data-device="Nahverkehr_Umschalter_Zeitangabe" data-get-on="off" data-on-class="hide" data-off-class="cell">
<div data-type="departure"
data-device="..."
...
class="alternate deptime">
</div>
</div>

<div class="hbox">
<div data-type="label" class="inline top-space" data-limits-get="Nahverkehr_Umschalter_Zeitangabe:STATE" data-limits='["on", "off"]' data-colors='["#8C8C8C", "white"]'>Abfahrt in ... Min.</div>

<div data-type="checkbox" class="big inline" data-on-background-color="grey" data-off-background-color="grey" data-device="Nahverkehr_Umschalter_Zeitangabe"></div>

<div data-type="label" class="inline top-space" data-limits-get="Nahverkehr_Umschalter_Zeitangabe:STATE" data-limits='["off", "on"]' data-colors='["#8C8C8C", "white"]'>Abfahrt um ...</div>
</div>

</div>
</syntaxhighlight>

<gallery widths="200" heights="250">
FTUI Widget departure classchanger 1.png
FTUI Widget departure classchanger 2.png
</gallery>

==Links==
FHEM Wiki [[Departure]]

[[Kategorie:FHEM Tablet UI|Departure]]

FTUI Widget Chart

2019-11-09T11:09:54Z

Ulm32b: data-margin ergänzt (vgl. Forum 8.11.2019)

Das [[{{PAGENAME}}|Chart Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem sich verschiedenste Diagramme darstellen lassen. Die Aneinanderreihung mehrerer Werte eines Device-Readings zu einem zeitlichen Verlauf wird dabei als Graph bezeichnet.

Es können beliebige Werte dargestellt und entsprechend der Sinnhaftigkeit, oder persönlichem Geschmack, formatiert werden. Farbe und Form der Linien sind je Graph einstellbar, auch wenn mehrere gleichzeitig in einem Diagramm angezeigt werden.

Jedes Diagramm kann zwei Y-Achsen besitzen. Die primäre Y-Achse (primary) wird auf der linken Seite angezeigt, die sekundäre Y-Achse (secondary) auf der rechten Seite. Beide Achsen können unterschiedlich formatiert werden.

<gallery>
File:Chart_tabletUI.png
Datei:FTUI Widget Chart Stacked.png
Datei:FTUI Widget Chart-fc-Proplanta.png
Datei:Wetterchart2.png
Datei:PieChart.png
</gallery>

==Attribute==
{|class="wikitable"
! style="width:150px"|Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||Name des FHEM-Device, das die Aktualisierung des Charts triggert||||data-device="WohnzimmerHeizung"
|-
|'''data-get'''||Reading, das das Update des Diagramms triggert||'STATE'||
|-
|'''data-logdevice'''||Name des Log-Device, das dargestellt werden soll, oder ein Array, um mehrere Werte in einem Diagramm darzustellen||||data-logdevice="FileLog_WohnzimmerHeizung"
|-
|'''data-logfile'''|| Name des Log-Files, aus dem die Daten entnommen werden sollen (oder Array)||'-' = aktuelle Datei||data-logfile="WohnzimmerHeizung-2015.log"<br>Beachte: Der Wert "CURRENT" ermöglicht die Navigation auch zu älterne Logfiles (Jahreswechsel)
|-
|'''data-columnspec'''||Ermittelt den Wert aus dem Log-File, der angezeigt werden soll (oder Array)||||data-columnspec="4:meas.*"
|-
|'''data-style'''||Stil, wie die Graph-Linien dargestellt werden sollen (z.B. 'SVGplot l0' oder 'ftui l0dash'), oder ein Array, wenn mehrere Linien unterschiedlich dargestellt werden sollen (siehe [[#Aussehen_der_Linien|Hinweise]])||||
|-
|'''data-ptype'''||Form, wie die Graphen dargestellt werden sollen (z.B. 'lines', 'cubic' oder 'fa-cog'), oder ein Array (siehe [[#Form_der_Linien|Hinweise]])||'lines'||
|-
|'''data-uaxis'''||Name der Achse, die verwendet werden soll ('primary' = links, oder 'secondary' = rechts), oder ein Array||'primary'||
|-
|'''data-legend'''||Bezeichnung des Graphen (wird in Legende und am Cursor angezeigt), oder ein Array||||
|-
|'''data-minvalue'''||Minimaler Wert, der auf der linken Y-Achse ('primary') angezeigt werden soll. 'auto' = automatische Berechnung||'10'||
|-
|'''data-maxvalue'''||Maximaler Wert, der auf der linken Y-Achse ('primary') angezeigt werden soll. 'auto' = automatische Berechnung||'30'||
|-
|'''data-minvalue_sec'''||Minimaler Wert, der auf der rechten Y-Achse ('secondary') angezeigt werden soll. 'auto' = automatische Berechnung||'auto'||
|-
|'''data-maxvalue_sec'''||Maximaler Wert, der auf der rechten Y-Achse ('secondary') angezeigt werden soll. 'auto' = automatische Berechnung||'auto'||
|-
|'''data-xticks'''||Abstand zwischen den vertikalen Hilfslinien (bezogen auf die X-Achse) in Minuten. 'auto' = automatische Berechnung||'auto'||
|-
|'''data-yticks'''||Abstand zwischen den horizontalen Hilfslinien (bezogen auf die linke Y-Achse). Kann auch ein Array mit Werte-Paaren enthalten, um die Linien mit Text zu beschriften.||'auto'||data-yticks='[[0,"open"],[1,"closed"]]'
|-
|'''data-yticks_format'''||Dient zur Formatierung der Ticks der Y-Achse. Die Formatierung geschieht über Platzhalter, Trenner und einen beliebigen durch ' ' getrennten Text. Als Platzhalter dient ein oder mehrere '#', als Trenner können '.', ',' und ':' verwendet werden. Ist ein Trenner enthalten (z.B. '#.##') dann bedeutet das in dem Beispiel, dass der Ytick mit 2 Nachkommastellen versehen wird und vorne Platz für eine Stelle vor dem Komma vorgehalten wird (führende Nullen werden nicht dargestellt, aber de Platz wird reserviert so dass das ganze rechtsbündig immer passt). Ist kein Trenner vorhanden, dann wird der Ytick auf die Summe der Platzhalter mit einer festen Gesamtbreite gesetzt (#### würde also bedeuten, dass immer 4 Stellen (ohne Trenner) verwendet werden. aus 0.4 würde 0.400 aus 10.437 würde 10.44). Als Trenner kann man z.B. für Zeiten auch einen ':' verwenden und dadurch auch so etwas wie "12:00 Uhr" realisieren (in dem Beispiel wäre data-yticks_format="##:## Uhr" und kein data-yunit oder data-yticks="##:##" und data-yunit="Uhr").||||data-yticks_format="#.##"
|-
|'''data-yticks_sec'''||Abstand zwischen den horizontalen Hilfslinien (bezogen auf die rechte Y-Achse). Kann auch ein Array mit Werte-Paaren enthalten, um die Linien mit Text zu beschriften.||'auto'||data-yticks='[[0,"open"],[1,"closed"]]'
|-
|'''data-yticks_format_sec'''||Dient zur Formatierung der Ticks der Y-Achse. Die Formatierung geschieht über Platzhalter, Trenner und einen beliebigen durch ' ' getrennten Text. Als Platzhalter dient ein oder mehrere '#', als Trenner können '.', ',' und ':' verwendet werden. Ist ein Trenner enthalten (z.B. '#.##') dann bedeutet das in dem Beispiel, dass der Ytick mit 2 Nachkommastellen versehen wird und vorne Platz für eine Stelle vor dem Komma vorgehalten wird (führende Nullen werden nicht dargestellt, aber de Platz wird reserviert so dass das ganze rechtsbündig immer passt). Ist kein Trenner vorhanden, dann wird der Ytick auf die Summe der Platzhalter mit einer festen Gesamtbreite gesetzt (#### würde also bedeuten, dass immer 4 Stellen (ohne Trenner) verwendet werden. aus 0.4 würde 0.400 aus 10.437 würde 10.44). Als Trenner kann man z.B. für Zeiten auch einen ':' verwenden und dadurch auch so etwas wie "12:00 Uhr" realisieren (in dem Beispiel wäre data-yticks_format="##:## Uhr" und kein data-yunit oder data-yticks="##:##" und data-yunit="Uhr").||||data-yticks_format_sec="#.##"
|-
|'''data-yticks_prio'''||Legt fest, ob die horizontalen Hilfslinien der linken (primary) oder der rechten (secondary) Y-Achse zugeordnet werden sollen||||data-yticks_prio='secondary'
|-
|'''data-ytype'''||Legt fest, ob die primäre y Achse logarithmisch sein soll (wert "log")||||data-ytype="log"
|-
|'''data-ytype_sec'''||Legt fest, ob die sekundäre y Achse logarithmisch sein soll (wert "log")||||data-ytype_sec="log"
|-
|'''data-margin'''|||Abstand zwischen Buttons und Chart (Einheit Pixel). ||"0"|||data-margin="10"
|-
|'''data-y_margin'''|||Gibt die Möglichkeit, Abstände zwischen den Graphen und dem oberen Rand des Plots zu definieren (Einheit Pixel). Falls der Wert skalar ist, werden oben und unten die gleichen Abstände eingehalten. Falls ein 2D Array angegeben wird, können die Werte unten (erster Wert im Array) und oben (zweiter Wert im Array) getrennt festgelegt werden||"0"|||data-y_margin='["10","20"]'
|-
|'''data-y_margin_sec'''|||Gibt die Möglichkeit, Abstände zwischen den Graphen und dem oberen Rand des Plots zu definieren (Einheit Pixel). Falls der Wert skalar ist, werden oben und unten die gleichen Abstände eingehalten. Falls ein 2D Array angegeben wird, können die Werte unten (erster Wert im Array) und oben (zweiter Wert im Array) getrennt festgelegt werden||"0"|||data-y_margin='["10","20"]'
|-
|'''data-daysago_start'''||Anzahl der vergangenen Tage, wo das Diagramm beginnen soll. '0' = Beginn heute 0:00 Uhr. (siehe [[#Zeitstrahl_.2F_Start_.26_Ende_auf_der_X-Achse|Hinweise]])||'0'||
|-
|'''data-daysago_end'''||Anzahl der vergangenen Tage, wo das Diagramm enden soll. '-1' = Ende heute 24:00 Uhr. (siehe [[#Zeitstrahl_.2F_Start_.26_Ende_auf_der_X-Achse|Hinweise]])||'-1'||
|-
|'''data-xticks_round'''||Wenn vorhanden und entweder 'h', 'd', 'w', wird auf Stunde, Tag oder Woche bei den xticks gerundet (also die Tickmarks und die Gridlines bei den entsprechend gerundeten Zeiten gesetzt). Es kann auch 'auto' angegeben werden, um eine autmoatische Rundung durchzuführen||||
|-
|'''data-nofulldays'''||Aktiviert/deaktiviert die Rundung der X-Achse auf ganze Tage. Binärwert ('true' oder 'false')||'false'||
|-
|'''data-timeformat'''||Zeitformat für die Anzeige an der X-Achse (siehe [[#Zeitformat_der_X-Achse|Hinweise]])||||
|-
|'''data-timeranges'''||Hierdurch können vordefinierte Zeiträume für die X-Achse festgelegt werden, die dann durch eine pulldown menu (neuer Button oben neben dem "-" Button) direkt ausgewählt werden können. Der Parameter ist ein Array aus Array Einträgen, welche jeweils [<Name>,<daysago_start>,<daysago_end>] enthalten)||
||data-timeranges='[<br>
["Actual Year","0Y","-1Y"],<br>
["Last Year","1Y","0Y"],<br>
["Actual Month","0M","-1M"],<br>
["Last Month","1M","0M"],<br>
["Actual Week","0W","-1W"],<br>
["Last Week","1W","0W"],<br>
["Today","0D","-1D"],<br>
["Yesterday","1D","0D"]<br>
]'
|-
|'''data-ytext'''||Text, der neben der linken Y-Achse angezeigt wird||||
|-
|'''data-ytext_sec'''||Text, der neben der rechten Y-Achse angezeigt wird||||
|-
|'''data-yunit'''||Einheit, die an der linken Y-Achse angezeigt wird||||
|-
|'''data-yunit_sec'''||Einheit, die an der rechten Y-Achse angezeigt wird||||
|-
|'''data-show_both_axes'''||Legt fest ob beide Y-Achsen Linien gezeichnet werden sollen||false||
|-
|'''data-crosshair'''||Aktiviert/deaktiviert den Fadenkreuz-Cursor. Binärwert ('true' oder 'false')||'false'||
|-
|'''data-cursorgroup'''||Zahl zur Gruppierung der Werte am Fadenkreuz-Cursor ([[#Fadenkreuz-Cursor|Hinweise]])||||
|-
|'''data-scrollgroup'''||Zahl zur Gruppierung der Graphen beim Bewegen und Zoomen. Alle Linien mit der selben Zahl werden miteinander gekoppelt und bewegen sich gemeinsam.||||
|-
|'''data-showlegend'''||Aktiviert/deaktiviert die Anzeige der Legene. Binärwert ('true' oder 'false')||'false'||
|-
|'''data-legendpos'''||Array von zwei Werten, die die horizontale und vertikale Position der Legende festlegen ([[#Legende|Hinweise]])||'["right","top"]'||
|-
|'''data-legend_horiz'''||legt fest, dass die Legendeneinträge horizontal angeordnet sind (anstatt vertikal wie im default Fall)||false||data-legend_horiz="true"
|-
|'''data-width'''||Breite des Diagramms (in % oder px)||||
|-
|'''data-height'''||Höhe des Diagramms (in % oder px)||||
|-
|'''data-graphsshown'''||Aktiviert/deaktiviert die initiale Anzeige von Graphen. Binärwert ('true' oder 'false'). Array, wenn mehrere Linien angezeigt werden sollen.||||data-graphsshown='[true,false,true]'
|-
|'''data-ddd'''||Einstellung für die 3D-Drehung ([[#3-dimensionale_Drehung|Hinweise]])||||data-ddd='["40","60","0"]'
|-
|'''data-dddspace'''||Abstand zwischen zwei Graphen, wenn die 3D-Anzeige aktiviert wurde (px)||'15'||
|-
|'''data-dddwidth'''||Breite, bzw. Tiefe der Graphen, wenn diese 3-dimensional angezeigt werden (px)||'10'||
|-
|'''data-title'''||Titel, der über dem Diagramm angezeigt werden soll. Der Inhalt kann auch dynamisch erzeugt werden ([[#Diagrammtitel|Hinweise]])||||
|-
|'''data-title_class'''||Klassenname für die Formatierung des Titels. Die Eigenschaften müssen dann entsprechend in einem CSS File angegeben werden (z.B. in fhem-tablet-ui-user.css)||||
|-
|'''data-prefetch'''||Legt fest, ob zusätzliche Daten rechts und links des Plots im Hintergrund vom Server geholt werden sollen||false||data-prefetch="true"
|}
Einige Parameter (style, maxvalue, minvalue, maxvalue_sec, minvalue_sec) können auch aus Readings dynamisch gesetzt werden wenn "<device>:<reading>" als Parameter gesetzt wird. Damit kann man z.B. in FHEM über notify etc. die Linientypen dynamisch anpassen (z.B. wenn der Wert eines Devices in einem bestimmten Bereich liegt, ändert sich die Farbe des Graphen).

==CSS Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|fullsize}}{{FTUI Klasse|noticks}}{{FTUI Klasse|nobuttons}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|big}}
|}

Folgende Widget-spezifsche Klassen können zusätzlich in einer eigenen CSS-Datei definiert werden:

{|class="wikitable"
!Klasse
!Beschreibung
|-
|'''chart-background'''||Hintergrundfarbe des Diagramms
|-
|'''buttons'''||Größe und Farbe der Buttons
|-
|'''text.axes'''||Generelle Schriftart und Farbe der Achsen
|-
|'''gridlines'''||Generelle Farbe und Größe der Gitternetzlinien
|-
|'''xaxis'''||Schriftart, Größe und Farbe der X-Achse
|-
|'''yaxis'''||Schriftart, Größe und Farbe der Y-Achse
|-
|'''xticks'''||Schriftart, Größe und Farbe der X-Achse (Zwischenlinien)
|-
|'''yticks'''||Schriftart, Größe und Farbe der Y-Achse (Zwischenlinien)
|-
|'''crosshair'''||Schriftart, Größe und Vordergrund/Hintergrundfarbe der Momentanwerte am Fadenkreuzcursor
|-
|'''caption'''||Schriftart, Größe und Farbe der Text-Buttons für Legende und Cursor
|-
|'''legend'''||Schriftart, Größe und Farbe der Legende
|}

Die Standardwerte sind in der Datei <code>css/ftui_chart.css</code> zu finden.

==Datenquellen==
Beim Chart-Widget können die gleichen Datenquellen genutzt werden, die auch für SVG-Plots verwendet werden können:
# [[FileLog]]: Verlaufsdaten einer Textdatei entnehmen
# [[DbLog]]: Verlaufsdaten einer Datenbank entnehmen
# [[LogProxy]]: Daten dynamisch berechnet

===FileLog===
Um [[FileLog]] zu nutzen, wird als '''data-logdevice''' das FHEM-Device für das FileLog angegeben. In der Regel entstehen hier im Laufe der Zeit mehrere Log-Dateien. Name und Anzahl sind von der Definition abhängig - meist wird jeden Monat oder jedes Jahr eine neue Datei angelegt. Die gewünschte Datei kann mit '''data-logfile''' ausgewählt werden. Möchte man stets die aktuelle Datei verwenden (macht vor allem dann Sinn, wenn man die neusten Daten anzeigen will), kann das Attribut weggelassen, oder explizit <code>-</code> eingetragen werden. Zuletzt wird '''data-columnspec''' benötigt, um die gewünschten Daten zu in der Logdatei zu identifizieren. Hier wird die Spalte, in der die Daten stehen, gefolgt von Doppelpunkt und Readingname angegeben.

Für ein Heizungsthermostat von Homematic mit dem Namen ''DG.wz.HZ.Heizungsventil'' ergibt sich somit beispielhaft folgende Definition, um gemessene Temperatur, Sollwert und Ventilstellung im Diagramm darzustellen:

<syntaxhighlight lang="html">
<div data-type="chart"
data-device="DG.wz.HZ.Heizungsventil"
data-logdevice="FileLog_DG.wz.HZ.Heizungsventil"
data-logfile="-"
data-columnspec='["4:measured-temp","4:desired-temp","4:actuator"]'
...>
</div>
</syntaxhighlight>

Sollen Daten von unterschiedlichen Geräten in einem Diagramm angezeigt werden, muss '''data-logdevice''' als Array nach dem Schema <code>data-logdevice='["<Logdatei_1>","<Logdatei_2>","<Logdatei_3>"]'</code> definiert werden. Für jeden Eintrag in '''data-columnspec''' muss es auch den passenden Eintrag in '''data-logdevice''' geben (auch die Reihenfolge ist relevant).

===DbLog===
Um die Daten aus [[DbLog]] anzeigen zu können, werden die gleichen Attribute verwendet und mit für die Datenbank angepassten Werten beschrieben. Bei '''data-logdevice''' das FHEM-Device für die Datenbank angegeben. Im nachfolgenden Beispiel heißt diese <code>logdb</code> und besitzt wie üblich zwei Tabellen: <code>current</code> und <code>history</code> (der zeitliche Verlauf liegt in letzterer). Der Tabellenname wird bei '''data-logfile''' eingetragen. Da die Daten in der Datenbank etwas anders abgelegt werden, muss auch '''data-columnspec''' entsprechend angepasst werden. Statt der Spalte wird hier das FHEM-Device, gefolgt von Doppelpunkt und Readingname angegeben.

Für das oben beschriebene Homematic-Heizungsthermostat ergibt sich dann folgende Definition, um die gleichen Daten aus einer Datenbank, statt einem LogFile zu lesen:

<syntaxhighlight lang="html">
<div data-type="chart"
data-device="DG.wz.HZ.Heizungsventil"
data-get="measured-temp"
data-style='["ftui l0"]'
data-logdevice="logdb"
data-logfile="HISTORY"
data-columnspec='["DG.wz.HZ.Heizungsventil:measured-temp","DG.wz.HZ.Heizungsventil:desired-temp","DG.wz.HZ.Heizungsventil:actuator"]'
...>
</div>
</syntaxhighlight>

Für die Anzeige von unterschiedlichen Geräten in einem Diagramm, muss nur '''data-columnspec''' entsprechend angepasst werden, solange sich alle Daten in der Datenbank befinden.

===LogProxy===
Um die Daten mittels [[LogProxy]] berechnen und anzeigen zu können, muss in FHEM ein LogProxy-Device definiert sein:

<pre>
define myLogProxy logProxy
</pre>

Weitere Einstellungen am LogProxy sind nicht nötig, die bloße Existenz reicht.

Bei '''data-logdevice''' wird das FHEM-Device für den LogProxy angegeben. Im nachfolgenden Beispiel heißt dieses <code>myLogProxy</code>. Das Attribut '''data-logfile''' wird für LogProxy nicht benötigt. Befinden sich nur LogProxy-Werte im Diagramm kann das Attribut komplett entfallen. Sollen weitere Werte angezeigt werden, bleibt die Definition im Array einfach leer.

Im Attribut '''data-columnspec''' wird eine Formel angegeben, wie die Werte berechnet werden sollen. Hier können die Formeln 1:1 von einem eventuell vorhandenen SVG-Plot übernommen werden. '''Dabei gibt es jedoch folgendes zu beachten:''' Befindet sich die Formel in einem Array, dürfen die Formeln keine Anführungszeichen (<code>"</code>) beinhalten. Stattdessen müssen sie als escapter Ascii-Code (<code>\\x22</code>) eingefügt werden.

Das nachfolgende Beispiel zeigt, wie Vorhersagewerte aus einem FHEM-Device vom Typ Proplanta (Name hier <code>AU.xx.WE.Proplanta</code>) angezeigt werden können.

<syntaxhighlight lang="html">
<div data-type="chart"
data-device="AU.xx.WE.Proplanta"
data-logdevice='[
"myLogProxy",
"myLogProxy",
"myLogProxy",
"myLogProxy"
]'
data-columnspec='[
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22temp_\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"
]'
...>
</div>
</syntaxhighlight>

'''Auch alle anderen Funktionen, die [[LogProxy]] bietet, können hier angewendet werden.'''

==Hinweise==
===Aktualisierung des Charts===
Damit der Refresh des Charts funktioniert, muss auch ein Device angegeben werden, der das Refresh triggert. Das Diagramm wird immer dann aktualisiert, wenn sich der Inhalt von '''data-get''' ändert.

<syntaxhighlight lang="html">
<div data-type="chart"
data-device="WohnzimmerHeizung"
data-logdevice="FileLog_WohnzimmerHeizung"
...>
</div>
</syntaxhighlight>

===Aussehen der Linien===
Mit dem Attribut '''data-style''' kann das Aussehen der Linien des jeweiligen Graphen verändert werden. Hierfür können die Standard-FHEM-Styles verwendet werden. Dazu wird das Attribut mit <code>SVGplot</code>, gefolgt von einem Leerzeichen und der gewünschten Farbe/Stil befüllt. Es existieren jedoch auch noch weitere, an FTUI angepasste Styles, zu finden in der CSS-Datei <code>css/ftui_chart.css</code>. Um diese zu verwenden, wird das Attribut mit <code>ftui</code>, gefolgt von einem Leerzeichen und der gewünschten Farbe/Stil befüllt. Eigene Styles können zum Beispiel in der Datei <code>css/fhem-table-ui-user.css</code> definiert werden.

Folgende Übersicht zeigt die im Standard verfügbaren '''Farben''', alle Abbildungen sind mit im FTUI-Style entstanden:
<div><ul>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f0.png|thumb|none|150px|Farbe "l0"]] </li>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f1.png|thumb|none|150px|Farbe "l1"]] </li>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f2.png|thumb|none|150px|Farbe "l2"]] </li>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f3.png|thumb|none|150px|Farbe "l3"]] </li>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f4.png|thumb|none|150px|Farbe "l4"]] </li>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f5.png|thumb|none|150px|Farbe "l5"]] </li>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Farbe-f6.png|thumb|none|150px|Farbe "l6"]] </li>
</ul></div>

Die Angabe zur Farbe kann dann mit der Linienart kombiniert werden. Dazu stehen folgende '''Stile''' zur Verfügung:
<div><ul>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-normal.png|thumb|none|225px|Darstellung in 2D: Stil "normal"]] </li>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-dot.png|thumb|none|225px|Darstellung in 2D: Stil "dot"]] </li>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-dash.png|thumb|none|225px|Darstellung in 2D: Stil "dash"]] </li>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-fill.png|thumb|none|225px|Darstellung in 2D: Stil "fill"]] </li>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-2D-sym.png|thumb|none|225px|Darstellung in 2D: Stil "sym"]] </li>
</ul></div>

<div><ul>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-normal.png|thumb|none|225px|Darstellung in 3D: Stil "normal"]] </li>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-dot.png|thumb|none|225px|Darstellung in 3D: Stil "dot"]] </li>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-dash.png|thumb|none|225px|Darstellung in 3D: Stil "dash"]] </li>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-fill.png|thumb|none|225px|Darstellung in 3D: Stil "fill"]] </li>
<li style="display: inline-block;"> [[File:FTUI_Widget_Chart_Form-3D-sym.png|thumb|none|225px|Darstellung in 3D: Stil "sym"]] </li>
</ul></div>

Farbe und Stil werden kombiniert (zusammengeschrieben) beim Attribut '''data-style''' angegeben, sodass sich beispielsweise für eine graue Punktlinie folgendes ergibt: <code>data-style="ftui l1dot"</code>.
Um die Darstellung als normale Linie zu erhalten, darf im Gegensatz zu den anderen Linienformen der Stil <code>normal</code> nicht angegeben werden. Für eine einfache graue Linie ist also die Angabe <code>data-style="ftui l1"</code> korrekt, wohingegen <code>data-style="ftui l1normal"</code> zu einer fehlerhaften Anzeige führt.

'''Hinweis:''' Der Stil ''sym'' ist speziell dafür geeignet, Symbole statt Linien zu zeichnen. Dazu kann beim Attribut '''data-ptype''' als Linienform ein beliebiges Font-Awsome-, oder Open Automation-Icon angegeben werden. Alle in diesem Abschnitt enthaltenen Abbildungen sind mit <code>data-ptype="lines"</code> entstanden.

'''Übergänge mit datenabhängigen Grenzen:''' Plotstile (data-style) können auch direkt als Gradienten auf Basis von Plot-Datenwerten definiert werden. Dazu muss der Plotstil als Array angegeben werden. Der erste Wert des Arrays gibt an, ob nur die Linie gezeichnet werden soll (Zahl angeben, die die Dicke der Linie definiert) oder gefüllt ("fill" eintragen). Alle danach folgenden Array Elemente sind beliebig viele Stopp Punkte für die Farbübergänge, welche wiederum aus Arrays mit 3 Parametern bestehen. Für jeden Stopp Punkt werden der Datenwert, die Farbe und die Durchsichtigkeit gesetzt. Hierdurch lassen sich z.B. Einfärbungen setzen, die für Temperaturplots immer negative Werte blau einfärben und positive Werte rot. Zwischen den Stop Punkten wird die Farbe interpoliert, also ein weicher Übergang generiert. Will man harte Übergänge muss man Zwei Stopp Punkte mit unterschiedlichen Farbwerten aber dem gleichen Datenwert erzeugen.<br>
Beispiel 1 für einen weichen Gradienten, der bei 0 von blau nach rot übergeht, bei diesem Übergang durchsichtig ist und von dort nach negativen bzw. positiven Werden immer deckender wird:<br>
<code>data-style='["fill",["-20","#0000ff","0.7"],["0","#0000ff","0"],["0","#ff0000","0"],["302","#ff0000","0.7"]]'</code><br>
Beispiel 2 mit einem harten Übergang von blau nach rot bei 0:<br>
<code>data-style='["fill",["-20","#0000ff","0.7"],["0","#0000ff","0.7"],["0","#ff0000","0.7"],["50","#ff0000","0.7"]]'</code>
Es gibt auch die Möglichkeit den Bereich zwischen zwei Graphen einzufärben. Dazu muss ein Wert in Columnspec als Array angegeben werden. Ist dies der Fall, dann wird der zweite Graph umgekehrt an den ersten angehängt.<br>
Beispiel:
<syntaxhighlight lang="html">
data-columnspec='[
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22weatherIcon\\x22,$from,$to,12)",
[
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22tempMax\\x22,$from,$to,12)",
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22tempMin\\x22,$from,$to,12)"
],
"Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22rain\\x22,$from,$to,0,\\x22day\\x22)"
]'
</syntaxhighlight>
[[Datei:FTUI Widget Chart DynamicStyles.png|thumb|none|225px|dynamischer Übergang]]

===Form der Linien===
Das Attribut '''data-ptype''' beeinflusst die Form der Linien. Hier sind folgende Werte möglich:

* <code>lines</code>
* <code>points</code>
* <code>steps</code>
* <code>fsteps</code>
* <code>histeps</code>
* <code>bars</code>
* <code>ibars</code>
* <code>cubic</code>
* <code>quadratic</code>
* <code>quadraticSmooth</code>

Zusätzlich ist es möglich, Symbole anzeigen zu lassen. Unterstützt werden Font-Awesome ('fa-...'), Open Automation ('oa-...') und FHEM-Symbole ('fs-...')). Damit die Symbole korrekt angezeigt werden, muss im Attribut '''data-style''' der Stil <code>sym</code> gewählt werden, da sonst nur Punkte, statt der Symbole gezeichnet werden.

<syntaxhighlight lang="html">
<div data-type="chart"
data-device="DG.wz.HZ.Heizungsventil"
data-logdevice="FileLog_DG.wz.HZ.Heizungsventil"
...
data-style="ftui l1sym"
data-ptype="fa-cog"
...>
</div>
</syntaxhighlight>

Die Größe der Symbole ist in der Datei <code>css/ftui_chart.css</code> auf 12px festgelegt. Dieser Wert kann in einer eigenen CSS-Datei durch Anpassung von <code>stroke-width</code> überschrieben werden.

<syntaxhighlight lang="css">
.ftui.l0sym { stroke:#DDA400; stroke-width:12px; fill:none; }
.ftui.l1sym { stroke:#BBBBBB; stroke-width:12px; fill:none; }
.ftui.l2sym { stroke:#CC0000; stroke-width:12px; fill:none; }
.ftui.l3sym { stroke:#CCCC00; stroke-width:12px; fill:none; }
.ftui.l4sym { stroke:#33CC33; stroke-width:12px; fill:none; }
.ftui.l5sym { stroke:#33CCCC; stroke-width:12px; fill:none; }
.ftui.l6sym { stroke:#3333CC; stroke-width:12px; fill:none; }
</syntaxhighlight>

'''data-ptype''' kann auch Inhalt im Format <code>'icon:1'</code> verarbeiten. Dann muss der zugehörige Wert in '''data-columnspec''' den Pfad zu einem Icon (z.B. für Wettervorhersagen) beinhalten. Der Y-Wert wird dann vom ersten Graphen übernommen. Weitere Ausführungen hierzu im Beispiel [[#Darstellung der Wetter Icons im Diagramm]].

===Stapeln von Linien===
Über '''data-ptype''' kann zusätzlich festgelegt werden, ob Graphen übereinander gestapelt werden sollen. <code>data-ptype='lines:1'</code> bedeutet, dass der zugehörige Graph auf den Graph mit der Nummer 1 gestapelt werden soll. So etwas kann z.B. Sinn machen, wenn man den Stromverbrauch einzelner Devices darstellen und zusätzlich sehen will, wie hoch die Summe ist. Beispiel siehe unten.

[[Datei:FTUI Widget Chart Stacked.png]]

===Zeitstrahl / Start & Ende auf der X-Achse===
Die Attribute '''data-daysago_start''' und '''data-daysago_end''' dienen der Definition von Anfang und Ende der X-Achse. Im einfachsten Fall wird eine Anzahl an Tagen eingegeben, die sich auf das aktuelle Datum beziehen. Dabei gilt es zu beachten, dass es sich um ''vergangene Tage'' handelt. Das bedeutet, dass Tage in der Vergangenheit als positive Zahl angegeben werden, Tage in der Zukunft hingegen als negative Zahl. Es kann jeweils auch ein fixes Datum (z.B. '2013-10-23') angegeben werden. Uhrzeitangaben werden nur berücksichtigt, wenn '''data-nofulldays='true' ''' verwendet wird.

'''Relative Zeitangabe in Stunden/Tagen/Wochen/Monaten/Jahren'''<br />
Zur Ausgabe einer Anzahl an zurückliegenden Stunden bis zum aktuellen Zeitpunkt wird als Startzeitpunkt die Anzahl der Stunden/Tage/Wochen/Monate/Jahre angegeben, die angezeigt werden sollen, gefolgt vom Kleinbuchstaben '''h''' für Stunden, '''d''' für Tage, '''w''' für Wochen, '''m''' für Monate, '''y''' für Jahre, . Als Endzeitpunkt wird '''now''' gewählt.<br />
Das nachfolgende Beispiel zeigt die Werte der vergangenen 3 Stunden an:
<syntaxhighlight lang="html">
data-nofulldays="true"
data-daysago_start="3h"
data-daysago_end="now"
</syntaxhighlight>

'''Fester Zeitbereich des heutigen Tages (Stunden/Tage/Wochen/Monate/Jahre)'''<br />
Um ein festes Stunden/Tages/Wochen/Monats/Jahresfenster anzuzeigen, werden die absoluten Stunden/Tages/Wochen/Monats/Jahreszahlen mit negativem Vorzeichen, gefolgt vom Großbuchstaben '''H''' (entsprechend D/W/M/Y für Tage/Wochen/Monate/Jahre) angegeben. Wird '''data-daysago_start''' als positiver Wert angegeben, wird die Anzahl der Stunden/Tage/Wochen/Monate/Jahre von heute 0:00 Uhr subtrahiert (siehe Rechenweg weiter unten).<br />
Das Beispiel zeigt den Zeitbereich von heute 5:00 Uhr bis heute 22:00 Uhr:
<syntaxhighlight lang="html">
data-nofulldays="true"
data-daysago_start="-5H"
data-daysago_end="-22H"
</syntaxhighlight>

'''Fester Zeitbereich Tage-übergreifend'''<br />
Die Zeit in Tagen kann als Gleitkommazahl angegeben werden. Damit ist es möglich, Tage und Uhrzeiten zu kombinieren. Die Werte sind dann als Teil eines ganzen Tages, bezogen auf heute 0:00 Uhr zu errechnen und mit <code>.</code> als Teiler anzugeben.<br />
Das nachfolgende Beispiel zeigt einen Zeitbereich von '''gestern 15:00 Uhr''' bis '''morgen 3:00 Uhr'''.
<syntaxhighlight lang="html">
data-nofulldays="true"
data-daysago_start="0.375"
data-daysago_end="-1.125"
</syntaxhighlight>

Für die nachfolgenden Rechenwege sind die Einheiten nur zur Verdeutlichung angegeben. Die Einheiten werden im Attribut nicht angegeben.

Der Wert für '''GESTERN''' wird wie folgt ermittelt:<br />
Ausgangspunkt ist heute 0:00 Uhr, gestern 15:00 Uhr liegt also 9 Stunden davor. Diese 9 Stunden sind ein <code>9/24 Tag</code> und errechnet sich so:
<pre>
1d / 24h = 0.0416666...d/h
0.0416d/h * 9h = 0.375d
</pre>

Der Wert für '''MORGEN''' wird wie folgt ermittelt:<br />
Ausgangspunkt ist wieder heute 0:00 Uhr, morgen 3:00 Uhr liegt dann 27 Stunden dahinter. Der Einfachheit halber werden hier nur die 3 Stunden errechnet und dann ein ganzer Tag addiert:
<pre>
1d / 24h = 0.0416666...d/h
0.0416d/h * 3h = 0.125d

0.125d + 1d = 1.125d
</pre>
Da das Attribut Tage in der Vergangenheit erwartet, muss für einen Wert in der Zukunft wieder eine negative Zahl angegeben werden.

===Zeitformat der X-Achse===
Die Zeitanzeige auf der X-Achse kann sehr flexibel eingestellt werden. Dafür stehen verschiedene Platzhalter zur Verfügung, die durch spezielle Zeichen (<code>-</code>, <code>.</code>, <code>/</code>, <code> </code> (Leerzeichen), <code>:</code>, <code>,</code>, <code>\</code>) getrennt werden. Alle Zeichen werden trotz Escape-Zeichen (<code>\</code>) in der Ausgabe angezeigt.

Folgende Platzhalter werden unterstützt:
*<code>'mm'</code>: Minuten als zweistellige Zahl
*<code>'hh'</code>: Stunden als zweistellige Zahl
*<code>'dd'</code>: Tag als zweistellige Zahl (Kalenderdatum)
*<code>'MM'</code>: Monat als zweistellige Zahl (z.B. 02 für Februar)
*<code>'MMM'</code>: Monat als dreistellige Abkürzung (z.B. Dec für Dezember)
*<code>'MMMM'</code>: Langname des Monats (z.B. March)
*<code>'ee'</code>: Wochentag als zweistellige Zahl (z.B. 00 für Sonntag)
*<code>'eee'</code>: Wochentag als dreistellige Abkürzung (z.B. Mon für Montag)
*<code>'eeee'</code>: Langname des Wochentags (z.B. Tuesday)
*<code>'yy'</code>: Jahr als zweistellige Zahl (z.B. 16 für 2016)
*<code>'yyyy'</code>: Jahr als vierstellige Zahl (z.B. 2016)
*<code>'LF'</code>: Fügt einen Zeilenumbruch hinzu

Beispiel: Der String <code>'MMM\LF\yyyy'</code> zeigt <code>'Jan'</code> in der ersten, und <code>'2016'</code> in der zweiten Zeile. <code>'MM.dd 2016'</code> wird zu <code>'03.05 2016'</code>.

===Fadenkreuz-Cursor===
Der Fadenkreuz-Cursor zeigt die Momentanwerte, indem man ihn über die Graphen bewegt. In Desktop-Browsern reicht einfaches Bewegen des Maus. Unter iOS und Android kann der Cursor wird der Cursor durch einfaches Tippen auf die neue Position bewegt.

Mit dem Attribut '''data-cursorgroup''' können Graphen gruppiert werden. Am Cursor werden dann die Momentanwerte aller Graphen gleichzeitig angezeigt, die die selbe Zahl besitzen, sobald man die Maus über einen aus der Gruppe bewegt.

===Legende===
Mit dem Attribut '''data-legendpos''' kann die Position der Legende innerhalb des Diagramms festgelegt werden. Die Position wird mit einem Array, bestehend aus zwei Werten im Format <code>'["<horizontal>","<vertikal>"]'</code> angegeben. Für die horizontale Positionierung sind <code>'left'</code>, <code>'right'</code>, <code>'before'</code>, und <code>'behind'</code>, die vertikale Positionierung <code>'top'</code>, <code>'bottom'</code>, <code>'above'</code>, <code>'below'</code> erlaubt (der Unterschied zwischen <code>'left'</code> und <code>'before'</code> liegt darin, dass im zweiten Fall die Legende nicht in den Zeichenbereich gesetzt wird sondern vor das ganze Chart (entsprechend für <code>'after'</code>, <code>'above'</code> und <code>'below'</code>). Alternativ können auch Zahlen verwendet werden, die die Position in Prozent angeben. Durch verschieben mit der Maus oder durch verschieben mit dem Finger oder Stift auf Touch Devices kann die Legende auch an eine andere Position verschoben werden.

Wenn die Legende eingeblendet ist, kann mittels Klick auf einen Legendeneintrag der zugehörige Graph ein- und ausgeblendet werden.

===3-dimensionale Drehung===
'''data-ddd''' ermöglicht, den Graphen 3-dimensional zu drehen. Als Wert wird ein Array mit den 3 Winkeln für x, y und z erwartet, wobei z selbst bisher nicht unterstützt wird.

Beispiel: <code>data-ddd='["40","60","0"]'</code>.

Wenn der 3D Modus aktiv ist ('''data-ddd''' gesetzt) sind 2 zusätzliche Parameter verfügbar um das Aussehen der Graphen zu beeinflussen. '''data-dddspace''' gibt an, wie viele pixel der Raum zwischen den einzelnen in z-Richtung hintereinander angeordneten Graphen betragen soll.
'''data-dddwidth''' legt fest, wie viele pixel die einzelnen Graphen tief (oder dick) sein sollen.

Wenn das Array angegeben wird, erscheinen zwei zusätzliche Buttons im Diagramm, mit denen die Drehung in X- und Y-Richtung verändert werden kann.

===Diagrammtitel===
Mit dem Attribut '''data-title''' kann dem Diagramm, ähnlich wie in FHEM-SVG-Plots, ein Titel hinzugefügt werden.

Folgende Platzhalter werden unterstützt:
*<code>'min1'</code>: Minimaler Y-Wert des ersten Graphs
*<code>'max1'</code>: Maximaler Y-Wert des ersten Graphs
*<code>'avg1'</code>: Mittlerer Y-Wert des ersten Graphs
*<code>'cnt1'</code>: Anzahl der dargestellten Einzelwerte im ersten Graph
*<code>'currval1'</code>: Letzter, bzw. aktuellster Y-Wert des ersten Graphs
*<code>'mindate1'</code>: Niedrigster Wert auf der X-Achse des ersten Graphs
*<code>'maxdate1'</code>: Höchster Wert auf der X-Achse vom ersten Graphs
*<code>'currdate1'</code>: Letzter, bzw. aktuellster Wert auf der X-Achse des ersten Graphs

Durch Einsetzen einer anderen Zahl statt '1' können auch die Werte der anderen Graphen angezeigt werden. Das Weglassen der Zahl bewirkt, dass der jeweils zutreffende Wert automatisch ermittelt wird. Bedeutet: <code>max</code> führt dazu, dass der höchste Wert aller angezeigter Graphen verwendet wird.
Zusätzlich ist es möglich durch "$eval(<regexp>)" regular Expressions auszuwerten (also z.B. Berechnungen durchzuführen). In <regexp> können auch "$data()" vorkommen.

Beispiel: <code>data-title="Klima Wohnzimmer Average: $eval(parseInt($data{avg1}*10)/10)°C / Max: $eval(parseInt($data{max1}*10)/10)°C"</code>

===Buttons im Diagramm===
Es gibt mehrere Buttons, mit denen sich die Anzeige des Diagramms verändern lässt. <code><-</code> und <code>-></code> bewegen die Graphen nach links und rechts. <code>+</code> und <code>-</code> zoomen die Anzeige. <code>legend</code> und <code>cursor</code> schalten die zugehörigen Anzeigen ein und aus. Falls der 3D Modus eingeschaltet ist, gibt es Buttons zum Drehen der Darstellung um die X- und Y-Achse. Falls <code>data-timeranges</code> gesetzt ist, wird ein Pulldown Menü dargestellt, welches die Auswahl von dort definierten Zeiträumen für die X-Achse erlaubt.

==Beispiele==
===Einfaches Diagramm===
Das Beispiel zeigt ein einfaches Diagramm mit 4 unterschiedlich formatierten Graphen, Legende und Momentanwerten am Fadenkreuz-Cursor.

[[File:Chart_tabletUI.png]]

<syntaxhighlight lang="html">
<div data-type="chart"
data-logdevice='["Log.Garden","Log.Garden","Log.Garden","Log.Predicted"]'
data-columnspec='["4:Garden.T:15:","10:Garden.T:0:delta-h","10:Garden.T:0:delta-d","4:predicted.*:15:"]'
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'
data-ptype='["lines","histeps","histeps","cubic"]'
data-uaxis='["primary","secondary","secondary","primary"]'
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="mm"
data-ytext_sec="Rain (mm)"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="2013-08-13T00:00:00"
data-daysago_end="2013-08-14T00:00:00"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</syntaxhighlight>

===7-Tage-Wettervorhersage mit Proplanta===
In diesem Beispiel wird gezeigt, wie die Vorhersagewerte von [[PROPLANTA]] in einem Diagramm dargestellt werden können. Da die Werte nicht in einer Datenbank oder einem FileLog vorliegen, müssen sie über [[LogProxy]] verarbeitet werden. Dafür sind einige Vorbereitungen in FHEM nötig.

[[File:FTUI_Widget_Chart-fc-Proplanta.png|941px]]

'''1.''' Ein LogProxy-Device muss vorhanden sein:
<pre>
define myLogProxy logProxy
</pre>

'''2.''' In der Datei <code>99_myUtils.pm</code> muss folgende Routine hinzugefügt werden, die die Daten bereitstellt:
<syntaxhighlight lang="perl">
#---------------------------------------
# Proplanta LogProxy-Funktion
#---------------------------------------
sub logProxy_proplanta2Plot($$$$;$$) {
my ($device, $fcValue, $from, $to, $fcHour, $expMode) = @_;
my $regex;
my @rl;

return undef if(!$device);

if($fcValue =~ s/_$//) {
$regex = "^fc[\\d]+_".$fcValue."[\\d]{2}\$";
}
else {
$regex = "^fc[\\d]+_".$fcValue."\$";
}

$fcHour = 12 if(!defined $fcHour);
$expMode = "point" if(!defined $expMode);

if( defined($defs{$device}) ) {
if( $defs{$device}{TYPE} eq "PROPLANTA" ) {
@rl = sort{
my ($an) = ($a =~ m/fc(\d+)_.*/);
my ($bn) = ($b =~ m/fc(\d+)_.*/);
$an <=> $bn or $a cmp $b;
}( grep /${regex}/,keys %{$defs{$device}{READINGS}} );
return undef if( !@rl );
} else {
Log3 undef, 2, "logProxy_proplanta2Plot: $device is not a PROPLANTA device";
return undef;
}
}

my $fromsec = SVG_time_to_sec($from);
my $tosec = SVG_time_to_sec($to);
my $sec = $fromsec;
my ($h,$fcDay,$mday,$mon,$year);
my $timestamp;

my $reading;
my $value;
my $prev_value;
my $min = 999999;
my $max = -999999;
my $ret = "";

# while not end of plot range reached
while(($sec < $tosec) && @rl) {
#remember previous value for start of plot range
$prev_value = $value;

$reading = shift @rl;
($fcDay) = $reading =~ m/^fc(\d+).*/;
$h = ($reading =~ m/.*(\d\d)$/)?$1:$fcHour;
$value = ReadingsVal($device,$reading,undef);

($mday,$mon,$year) = split('\.',ReadingsVal($device,"fc".$fcDay."_date",undef));
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, $h, 0, 0);
$sec = SVG_time_to_sec($timestamp);

# skip all values before start of plot range
next if( SVG_time_to_sec($timestamp) < $fromsec );

# add first value at start of plot range
if( !$ret && $prev_value ) {
$min = $prev_value if( (looks_like_number($prev_value) && ($prev_value < $min)) || ($prev_value lt $min) );
$max = $prev_value if( (looks_like_number($prev_value) && ($prev_value > $max)) || ($prev_value gt $max) );
$ret .= "$from $prev_value\n";
}

# done if after end of plot range
last if($sec > $tosec);

$min = $value if( (looks_like_number($value) && ($value < $min )) || ($value lt $min) );
$max = $value if( (looks_like_number($value) && ($value > $max )) || ($value gt $max) );

# add actual controll point
$ret .= "$timestamp $value\n";

# Log 1, "$timestamp $value -0- $reading";
}
if(($sec < $tosec) && !@rl && ($expMode eq "day")) {
$timestamp = sprintf("%04d-%02d-%02d_%02d:%02d:%02d", $year, $mon, $mday, 23, 59, 59);
if(SVG_time_to_sec($timestamp) < $tosec) {
$ret .= "$timestamp $value\n";
}
else {
$ret .= "$to $value\n";
}
}
elsif(($sec > $tosec) && ($expMode eq "day")) {
$value = $prev_value + ($value - $prev_value)*(86400 + ($tosec - $sec))/86400;
$ret .= "$to $value\n";
}
return ($ret,$min,$max,$prev_value);
}
</syntaxhighlight>

Anschließend können die Daten im Chart-Widget angezeigt werden. Der Device-Name von Proplanta heißt hier im Beispiel <code>AU.xx.WE.Proplanta</code>.

<syntaxhighlight lang="html">
<div data-type="chart"
data-device="AU.xx.WE.Proplanta"
data-logdevice='[
"myLogProxy",
"myLogProxy",
"myLogProxy"
]'
data-columnspec='[
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22rain_\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22chOfRain_\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22cloud_\\x22,$from,$to,12,\\x22day\\x22)"
]'
data-style='[
"ftui l6fill",
"ftui l5fill",
"ftui l1fill"
]'
data-ptype='[
"steps",
"quadraticSmooth",
"quadraticSmooth"
]'
data-uaxis='[
"primary",
"secondary",
"secondary"
]'
data-legend='[
"Regen",
"Regenwahrscheinlichkeit",
"Wolken"
]'
data-yunit="mm"
data-ytext="Regen"
data-yunit_sec="%"
data-ytext_sec="Chance auf Regen / Wolken"
data-timeformat="eeee"
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-daysago_start = "0"
data-daysago_end = "-7"
data-xticks="1440"
data-yticks="auto"
data-title="7-Tage-Wettervorhersage"
data-showlegend="true"
class="nobuttons fullsize">
</div>
</syntaxhighlight>

'''Hilfreiche Links und Quellen zu diesem Beispiel:'''
*[[LogProxy|LogProxy im FHEM-Wiki]]
*{{Link2Forum|Topic=22967|Message=246973|LinkText=Stundengenaue Wettervorhersage (#1) im FHEM-Forum}}
*{{Link2Forum|Topic=22967|Message=334713|LinkText=Stundengenaue Wettervorhersage (#2) im FHEM-Forum}}

===Darstellung der Wetter Icons im Diagramm===

[[File:Wetterchart2.png]]

Wie oben bereits beschrieben, gibt es beim Chart grundsätzlich die Möglichkeit, Icons, welche in Form von URLs in den Logs abgelegt sind oder welche per logProxy generiert werden, darzustellen. Die Icons werden auf genau dem gleichen Weg von FHEM gelesen, wie alle anderen Datenpunkte. Im Folgenden wird ein Beispiel gezeigt, mit dem die im Proplanta Modul als Readings abgelegten Icons per logProxy Funktion gelesen und in ein Chart eingebaut werden könnnen.
Da es beim Proplanta Modul für die ersten 7 Tage nicht das Reading <code>fc#_weatherIcon</code> gibt, sondern mehrere Readings für unterschiedliche Tageszeiten wogegen für die zweiten 7 Tage ausschließlich das Reading <code>fc#_weatherIcon</code> vorhanden ist, sollte per <code>attr device userReading</code> mit folgendem Eintrag dafür gesorgt werden, dass für alle Tage ein Reading <code>fc#_weatherIcon</code> vorhanden ist (alternativ könnten auch 2 Graphen gezeichnet werden, wobei der erste dann nur die ersten 7 Tage enthält und der zweite die letzen 7 Tage, will man nur die ersten 7 Tage darstellen braucht man das userReading nicht unbedingt).
<syntaxhighlight lang="perl">
fc0_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc0_weatherDayIcon","");},
fc1_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc1_weatherDayIcon","");},
fc2_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc2_weatherDayIcon","");},
fc3_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc3_weatherDayIcon","");},
fc4_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc4_weatherDayIcon","");},
fc5_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc5_weatherDayIcon","");},
fc6_weatherIcon {ReadingsVal("AU.xx.WE.Proplanta","fc6_weatherDayIcon","");}
</syntaxhighlight>
Um die Icons darzustellen muss ein zusätzlicher Graph definiert werden. Dieser nutzt neben der Columnspec, die die URLs abruft den Parameter <code>data-ptype="icons:#"</code> (# ist eine Zahl und steht für die Nummer, beginnend bei 0 des Graphen, welcher für die y-Position der Icons verwendet werden soll) und den Stil <code>sym</code>. Der Wert für die Symbolgröße sollte z.B. durch eine zusätzliche Definition im File fhem-tablet-ui-user.css in der Form:
<syntaxhighlight lang="css">
/* icon lines */
.ftui.l99icon { stroke:#DDA400; stroke-width:48px; fill:none; }
</syntaxhighlight>
angepasst werden.

Im folgenden ein Beispiel, welches eine Linie für die Maximale Tagestemperatur zeichnet und auf dieser Linie die Wetter Icons darstellt.
<syntaxhighlight lang="html">
<div data-type="chart"
data-device="AU.xx.WE.Proplanta"
data-logdevice='[
"myLogProxy",
"myLogProxy"
]'
data-columnspec='[
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22weatherIcon\\x22,$from,$to,12,\\x22day\\x22)",
"Func:logProxy_proplanta2Plot(\\x22AU.xx.WE.Proplanta\\x22,\\x22tempMax\\x22,$from,$to,12,\\x22day\\x22)"
]'
data-style='[
"ftui l99icon",
"ftui l1fill"
]'
data-ptype='[
"icons:1",
"quadraticSmooth"
]'
data-uaxis='[
"primary",
"primary"
]'
data-legend='[
"Wetterbedingung",
"Max. Temperature"
]'
data-yunit="°C"
data-ytext="Temperature (°C)"
data-timeformat="ee\LF\dd.MM"
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-daysago_start="-1w"
data-y_margin="20"
data-daysago_end="-3w"
data-xticks="1440"
data-yticks="auto"
data-title="14-Tage-Wettervorhersage"
data-showlegend="true"
class="nobuttons fullsize">
</div>
</syntaxhighlight>

===Kuchendiagramme===
In folgendem Beispiel wird gezeigt, wie man ein "Kuchendiagramm" darstellen kann.

[[File:PieChart.png]]

Ähnlich wie bei den Beispielen für die Wetter Darstellungen wird hierzu auch wieder logProxy benötigt. Zunächst muss die folgende zusätzliche Funktion in <code>99_myUtils.pm</code> einfügen.
<syntaxhighlight lang="perl">
#---------------------------------------
# Funktion zum Erzeugen der Inputs für Kuchendiagramme
#---------------------------------------
sub logProxy_values2PieChart($$$$;$$) {
my ($device, $reading, $angle_start, $angle_dif, $inner_rad, $show_text) = @_;
Log3 undef, 1, "$device, $reading, $angle_start, $angle_dif, $inner_rad, $show_text\n";

use constant PI => 4 * atan2(1,1);

my $value=ReadingsVal($device,$reading,0);

my $angle_delta = $value/100*360;
$angle_start = $angle_start/100*360;

my $rad=10;
my $irad=0;
if ($inner_rad) {
$irad = $rad*$inner_rad;
}
my $angle=$angle_start/360*2.0*PI;
my $x=$irad*sin($angle);
my $y=$irad*cos($angle);
my $ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle

for (my $i=$angle_start; $i<=$angle_start+$angle_delta; $i+=$angle_dif) {
$angle = $i/360*2.0*PI;
$x = $rad*sin($angle);
$y = $rad*cos($angle);
$ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle
}

$angle = ($angle_start+$angle_delta)/360*2.0*PI; # add last segment
$ret .= ";p ".$rad*sin($angle)." ".$rad*cos($angle)."\n";

if ($inner_rad) {
for (my $i=$angle_start; $i<$angle_start+$angle_delta; $i+=$angle_dif) {
$angle = ($angle_start+$angle_start+$angle_delta-$i)/360*2.0*PI;
$x = $irad*sin($angle);
$y = $irad*cos($angle);
$ret .= ";p ".$x." ".$y."\n"; # add segment at angle $angle
}
}

$angle = ($angle_start)/360*2.0*PI; # add last segment
$ret .= ";p ".$irad*sin($angle)." ".$irad*cos($angle)."\n";

if ($show_text) { # show text values
$x = ($rad+$irad)/2*sin((2*$angle_start+$angle_delta)/2/360*2.0*PI);
$y = ($rad+$irad)/2*cos((2*$angle_start+$angle_delta)/2/360*2.0*PI);

$ret .= ";t ".$x." ".$y." middle ".$show_text.":".$value."%\n";
}

return($ret);
}
</syntaxhighlight>
In FHEM braucht man Readings, welche eine Zahl enthalten, die als Prozentwert interpretiert wird. Für jeden Prozentwert (also für jedes Reading) generiert die o.a. Funktion nun den Chart Input für ein Kuchenstück und liefert diesen als Antwort auf das GET, welches das Chart Widget auslöst. Dazu braucht die Funktion folgende Parameter: (Name des FHEM Devices, Name des Readings, Start Winkel des Kuchenstücks (Mathematisch gegen den Uhrzeigersinn in Grad), Delta Winkel zum Zeichnen (legt fest in welchen Schritten der Teilkreis des Kuchenstücks gezeichnet wird), Skalierungsfaktor für inneren Ring wenn ein Ring gezeichtnet werden soll (0 bedeutet komplette Kuchenstücke), optionaler Text der ins Kuchenstück vor die Prozentzahl geschrieben wird).
Im Folgenden eine Beispielkonfiguration für die Darstellung als Kuchendiagramm, die Readings heißen hier dPer1 bis dPer4. Der Startwinkel wird duch Aufsummierung der jeweils vorher schon gezeichneten Kuchenstücke gebildet, dadurch entstehen aneinander hängende Stücke.
<syntaxhighlight lang="html">
[[Datei:[[Datei:Beispiel.jpg]]]]<div class="normal noaxes nobuttons"
data-type="chart"
data-logdevice='["lp"]'
data-logfile="CURRENT"
data-columnspec='[
"Func:logProxy_values2PieChart(\"dPer1\",\"state\",ReadingsVal(\"dPer4\",\"state\",0)+ReadingsVal(\"dPer3\",\"state\",0),5,0,\"first\")",
"Func:logProxy_values2PieChart(\"dPer2\",\"state\",ReadingsVal(\"dPer4\",\"state\",0)+ReadingsVal(\"dPer3\",\"state\",0)+ReadingsVal(\"dPer1\",\"state\",0),5,0,\"second\")",
"Func:logProxy_values2PieChart(\"dPer3\",\"state\",ReadingsVal(\"dPer4\",\"state\",0),5,0,\"third\")",
"Func:logProxy_values2PieChart(\"dPer4\",\"state\",0,5,0,\"fourth\")"
]'
data-style='["ftui l0fill","ftui l1fill","ftui l2fill","ftui l3fill"]'
data-ptype='["lines"]'
data-uaxis='["primary"]'
data-legend='["First","Second","Third","Fourth"]'
data-legendpos='["left","top"]'
data-yunit=""
data-height="300"
data-width="300"
data-ddd='["-40","0","0"]'
data-dddspace='["-10"]'
data-dddwidth='["10"]'
data-showlegend="true"
data-legend_horiz="true"
data-xticks="auto">
</div>
</syntaxhighlight>

===Fensterstatus offen/geschlossen===
Dieses Beispiel zeigt, wie ein Fensterkontakt, dessen Reading die Werte <code>closed</code> und <code>open</code> einnimmt, als Graph gezeichnet werden kann. Technisch gesehen werden hier die Werte <code>0</code> und <code>1</code> gezeichnet, indem über das Attribut '''data-columnspec''' dem Zustand <code>open</code> der Wert <code>1</code> und allen anderen Zuständen der Wert <code>0</code> zugeordnet wird. Über das Attribut '''data-yticks''' wird die Beschriftung an der Y-Achse (<code>0</code> und <code>1</code>) gegen einen frei definierbaren Text ausgetauscht.

<syntaxhighlight lang="html">
<div data-type="chart"
data-device="wz_fensterstatus"
data-logdevice='["myDbLog"]'
data-logfile='["HISTORY"]'
data-columnspec='["wz_fensterstatus:state:0::$val=($val=~\\x22open\\x22?1:0)"]'
data-style='["ftui l4fill"]'
data-ptype='["steps"]'
data-height="290"
data-yticks='[[0,"geschlossen"],[1,"offen"]]'
data-minvalue="0"
data-maxvalue="1.1"
data-nofulldays="true"
data-daysago_start="1"
data-daysago_end="-1"
data-cursorgroup="1"
data-scrollgroup="1">
</div>
</syntaxhighlight>

'''Hinweis:''' Das Beispiel funktioniert nur mit DbLog. Falls Logfiles verwendet werden muss statt '$val' '$fld[''num'']' verwendet werden. Hierbei steht ''num'' für die Spalte (beginnend bei 0) in der die Daten stehen.

==Links==
{{Link2Forum|Topic= 48450 |Message=401006|LinkText=Thread im FHEM-Forum}}

[[Kategorie:FHEM Tablet UI|Chart]]

FTUI Widget Switch

2018-12-08T20:03:30Z

Ulm32b: Typo

Das [[{{PAGENAME}}|Switch Widget]] ist ein Widget für [[FHEM Tablet UI]]. Dabei handelt es sich um einen Ein-/Ausschalter in Form eines runden Druckknopfes. Er dient zum Ausführen beliebiger Schaltbefehle und kann auch für FTUI-interne Steuerungen genutzt werden. Zusätzlich kann der Schalter in Abhängigkeit eines Readings sein Aussehen verändern und so zwei oder mehr Zustände optisch darstellen. Beispielsweise können Farbe und/oder das Symbol die Zustände an/aus anzeigen. Kann das Status-Reading mehr als zwei Zustände einnehmen, kann auch dies dargestellt werden. Dabei sind beliebige Kombinationen von Vorder-/Hintergrundfarben und Symbolen möglich.

<gallery>
File:Switch.png
File:Switch4.png
File:FTUI_Switch-Homestatus2.png
</gallery>

==Attribute==
===Standard-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-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||
|-
|'''data-doubleclick'''||Zeit [ms], in der ein zweiter Klick erfolgen muss, damit die Betätigung angenommen wird. '0' schaltet dieses Verhalten ab.||0||data-doubleclick="800"
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Gütige Werte sind 'true', '1' oder 'on' ||||
|-
|'''data-icon'''||Name des Icons im Vordergrund||'fa-lightbulb-o'||
|-
|'''data-background-icon'''||Name des Icons, das als Hintergrund verwendet werden soll||'fa-circle'||
|-
|'''data-color'''||Farbe des Icon (RGB-Angabe oder Farbname)||#2A2A2A||data-color="#c0c0c0"
|-
|'''data-background-color'''||Hintergrundfarbe des Widgets||#505050||data-background-color="none"
|-
|'''data-warn'''||Reading, dessen Inhalt als rotes Kennzeichen angezeigt wird. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||
|-
|'''data-warn-on'''||Werte von '''data-warn''', bei denen das Kennzeichen angezeigt wird||<nowiki>'true|on|[1-9]{1}[0-9]*'</nowiki>||
|-
|'''data-warn-off'''||Werte von '''data-warn''', bei denen das Kennzeichen versteckt wird||<nowiki>'false|off|0'</nowiki>||
|-
|'''data-warn-color'''||Textfarbe des Kennzeichens||'#aaa'||
|-
|'''data-warn-background-color'''||Hintergrundfarbe des Kennzeichens||'#aa2200'||
|-
|'''data-hide'''||Reading zum Verstecken des Elementes. Das Element verschwindet, wenn der Wert mit '''data-hide-on''' übereinstimmt.||'STATE'||
|-
|'''data-hide-on'''||Zeichenkette, bei der das Element versteckt wird||<nowiki>'true|1|on'</nowiki>||
|-
|'''data-hide-off'''||Zeichenkette, bei der das Element angezeigt wird||'!on'||
|-
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"
|-
|'''data-reachable'''||Reading, dessen Inhalt angibt, ob das Device erreichbar ist, oder nicht. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||
|-
|'''data-timeout'''||Maximale Zeit, die der eingestellte Zustand nach einer Veränderung angezeigt wird, bis die echte Rückmeldung vom Device wieder angezeigt wird||2000ms||
|}

===Attribute für zwei Zustände===
Zur Anzeige von zwei Zuständen können nachfolgende Attribute zusätzlich zu den Standard-Attributen genutzt werden.
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-get-on'''||Zeichenkette oder ein Array von Werten, die als Zustand ON interpretiert werden||'on'||
|-
|'''data-get-off'''||Zeichenkette oder ein Array von Werten, die als Zustand OFF interpretiert werden||'off'||
|-
|'''data-set-on'''||Wert, der beim Einschalten gesendet werden soll ||Wert von '''data-get-on'''||data-set-on="1"
|-
|'''data-set-off'''||Wert, der beim Ausschalten gesendet werden soll||Wert von '''data-get-off'''||data-set-off="0"
|-
|'''data-on-color'''||Iconfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#aa6900'||
|-
|'''data-off-color'''||Iconfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#505050'||
|-
|'''data-on-background-color'''||Hintergrundfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#aa6900'||
|-
|'''data-off-background-color'''||Hintergrundfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#505050'||
|}

'''data-get-on''' und '''data-get-off''' können auch RegEx enthalten:
<code>data-get-on="[0-9]{1,3}|on"</code> bedeutet, dass der Schalter AN ist, wenn das Reading eine Zahl zwischen 0 und 100 ist, oder den Wert <code>on</code> enthält.
<code>data-get-off="!on"</code> bedeutet, dass alle Werte, die nicht für <code>on</code> stehen, automatisch <code>off</code> bedeuten (Negation).
<code>data-set-off=""</code> unterdrückt das Senden eines OFF-Befehls.
'''data-[on|off]-color''' erwartet einen RGB-Wert, wenn dieser aus einen Reading gelesen wird (<code>rgb(0, 0, 0)</code> statt <code>#000000</code>)

===Attribute für mehrere Zustände===
Zur Anzeige von mehreren Zuständen können nachfolgende Attribute zusätzlich zu den Standard-Attributen genutzt werden.
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-states'''||Array von Werten, die das Reading einnehmen kann||||
|-
|'''data-set-states'''||Array von Werten, die in Abhängigkeit des Arrays von '''data-states''' geschaltet werden||||
|-
|'''data-icons'''||Array von Icons, die in Abhängigkeit des Arrays von '''data-states''' im Vordergrund angezeigt werden||||
|-
|'''data-background-icons'''||Array von Icons, die in Abhängigkeit des Arrays von '''data-states''' im Hintergrund angezeigt werden||||
|-
|'''data-colors'''||Array von Farben, die in Abhängigkeit des Arrays von '''data-states''' das Vordergrund-Icon einfärben||||
|-
|'''data-background-colors'''||Array von Farben, die in Abhängigkeit des Arrays von '''data-states''' das Hintergrund-Icon einfärben||||
|}

==CSS-Klassen==
{|class="wikitable"
!Klasse
!Beschreibung
{{FTUI Klasse|readonly}}{{FTUI Klasse|small}}{{FTUI Klasse|compressed}}{{FTUI Klasse|compressed-50}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|invert}}
|}

==Hinweise==
*Das Attribut '''data-timeout''' dient dazu, ein "Flackern" der Anzeige zu verhindern. Manche Devices benötigen einige Zeit, bis der gewünschte und eben eingestellte Zustand erreicht wird. Zitat aus dem Forum: <cite>"data-timeout gilt nur für die on-off (toggle) Funktion von Switch und Dimmer, nicht fürs Dimmen. Das Problem: Am Switch wird eingeschaltet, der Knopf wird hell und ON an FHEM gesendet. Aber die Hardware reagiert nicht, geht nicht auf ON. Wenn sie das machen würde, käme auch eine Bestätigung per Longpoll. Mit '''data-timeout''' wird die eingestellte Zeit gewartet und bei Ausbleiben der Bestätigung fällt der Switch zum ursprünglichen Status zurück, geht also wieder aus. Nur wenn innerhalb der x Sekunden das Longpoll-Event kommt, wird der Fallbacktimer gestoppt."</cite>
*Die Attribute für Dual-State (zwei Zustände) und Multi-State (mehrere Zustände) können '''nicht gemeinsam''' verwendet werden.

==Beispiele==
===An/Aus===
Einfacher Schalter, der <code>on</code>/<code>off</code> sendet und diesen Status durch Farbumschlag anzeigt.

[[File:Switch.png]]
<syntaxhighlight lang="html">
<div data-type="switch" data-device="MyDevice"></div>
</syntaxhighlight>

===An/Aus (Farben invertiert)===
Einfacher Schalter, der <code>on</code>/<code>off</code> sendet und diesen Status durch Farbumschlag anzeigt. Die Farben sind hier im Gegensatz zum vorherigen Beispiel invertiert.
<syntaxhighlight lang="html">
<div data-type="switch" data-device="MyDevice" class="invert"></div>
</syntaxhighlight>

===1/0 als Befehl===
Einfacher Schalter, der <code>1</code>/<code>0</code> sendet und diesen Status durch Farbumschlag anzeigt.
<syntaxhighlight lang="html">
<div data-type="switch"
data-icon="fa-rss"
data-device='MyDevice'
data-get-on="1"
data-get-off="0"
data-set-on="1"
data-set-off="0"
class="green small invert">
</div>
</syntaxhighlight>

===MILIGHT-Switch===
Beispiel for einen MILIGHT-Schalter. Der <code>on</code>-Zustand wird per RegEx ermittelt.
<syntaxhighlight lang="html">
<div data-type="switch"
data-device="MILIGHT_Zone1_Wohnzimmer"
data-get-on="on.*"
data-get-off="off">
</div>
</syntaxhighlight>

===4-fach-Schalter===
Gruppe von 4 Schaltern, die den Status des selben Devices umschalten.

[[File:Switch4.png]]
<syntaxhighlight lang="html">
<div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-home" data-get-on="Home"></div>
<div>Home</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-bed" data-get-on="Sleep"></div>
<div>Sleep</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-car" data-get-on="Away"></div>
<div>Away</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-suitcase" data-get-on="Holiday"></div>
<div>Holiday</div>
</div>
</syntaxhighlight>

===Zwei Zustände umschalten===
Großer Homestatus-Button, der zwischen zwei Zuständen umschaltet.

[[File:FTUI_Switch-Homestatus2.png]]
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
<header>HOMESTATUS</header>
<div data-type="switch"
data-device="dummy3"
data-set-states='["Abwesend","Anwesend"]'
data-states='["Anwesend","Abwesend"]'
data-icons='["fa-home", "fa-car"]'
data-colors='["white", "white"]'
data-background-colors='["green", "red"]'
class="bigger top-space">
</div>
</li>
</syntaxhighlight>

===Serienschaltung: Mehrere Zustände nacheinander===
Bei jeder Betätigung wird der nächste der hinterlegten Zustände eingenommen.
Man beachte die Reihenfolge in data-set-states und data-states.

<syntaxhighlight lang="html">
<div data-type="switch"
data-device="Test"
data-set-states='["on","off","auto"]'
data-states='["auto","on","off"]'
data-icons='["fa-tint","fa-tint","fa-tint"]'
data-colors='["white","white","white"]'
data-background-colors='["blue","green","red"]'
class="small">
</div>
</syntaxhighlight>

===Beschriftete Schaltflächen===
[[File:FTUI-Ein-Aus-Schalter.png|150px]]

<syntaxhighlight lang="html">

<div data-type="switch"
data-icon=""
data-device="Schalter"
data-set-on="Ein"
data-set-off="Aus"
data-states='["Ein","Aus"]'
data-background-colors='["#90D49A","#E37D7D"]'>
<div data-type="label"
data-device="Schalter"
data-states='["Ein","Aus"]'
data-colors='["#5B8562","#854646"]'>
</div>
</div>


<div data-type="switch"
data-device="Schalter"
data-icon=""
data-background-icon=""
data-set-on="Ein"
data-set-off="Aus"
data-states='["Ein","Aus"]'>
<div data-type="label"
data-device="Schalter"
data-states='["Ein","Aus"]'
data-colors='["#5B8562","#854646"]'>
</div>
</div>
</syntaxhighlight>

[[Kategorie:FHEM Tablet UI|Switch]]

FTUI Widget Switch

2018-12-08T19:57:51Z

Ulm32b: /* Beispiele */ Beschriftete Schaltflächen

Das [[{{PAGENAME}}|Switch Widget]] ist ein Widget für [[FHEM Tablet UI]]. Dabei handelt es sich um einen Ein-/Ausschalter in Form eines runden Druckknopfes. Er dient zum Ausführen beliebiger Schaltbefehle und kann auch für FTUI-interne Steuerungen genutzt werden. Zusätzlich kann der Schalter in Abhängigkeit eines Readings sein Aussehen verändern und so zwei oder mehr Zustände optisch darstellen. Beispielsweise können Farbe und/oder das Symbol die Zuständen an/aus anzeigen. Kann das Status-Reading mehr als zwei Zustände einnehmen, kann auch dies dargestellt werden. Dabei sind beliebige Kombinationen von Vorder-/Hintergrundfarben und Symbolen möglich.

<gallery>
File:Switch.png
File:Switch4.png
File:FTUI_Switch-Homestatus2.png
</gallery>

==Attribute==
===Standard-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-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||
|-
|'''data-doubleclick'''||Zeit [ms], in der ein zweiter Klick erfolgen muss, damit die Betätigung angenommen wird. '0' schaltet dieses Verhalten ab.||0||data-doubleclick="800"
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Gütige Werte sind 'true', '1' oder 'on' ||||
|-
|'''data-icon'''||Name des Icons im Vordergrund||'fa-lightbulb-o'||
|-
|'''data-background-icon'''||Name des Icons, das als Hintergrund verwendet werden soll||'fa-circle'||
|-
|'''data-color'''||Farbe des Icon (RGB-Angabe oder Farbname)||#2A2A2A||data-color="#c0c0c0"
|-
|'''data-background-color'''||Hintergrundfarbe des Widgets||#505050||data-background-color="none"
|-
|'''data-warn'''||Reading, dessen Inhalt als rotes Kennzeichen angezeigt wird. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||
|-
|'''data-warn-on'''||Werte von '''data-warn''', bei denen das Kennzeichen angezeigt wird||<nowiki>'true|on|[1-9]{1}[0-9]*'</nowiki>||
|-
|'''data-warn-off'''||Werte von '''data-warn''', bei denen das Kennzeichen versteckt wird||<nowiki>'false|off|0'</nowiki>||
|-
|'''data-warn-color'''||Textfarbe des Kennzeichens||'#aaa'||
|-
|'''data-warn-background-color'''||Hintergrundfarbe des Kennzeichens||'#aa2200'||
|-
|'''data-hide'''||Reading zum Verstecken des Elementes. Das Element verschwindet, wenn der Wert mit '''data-hide-on''' übereinstimmt.||'STATE'||
|-
|'''data-hide-on'''||Zeichenkette, bei der das Element versteckt wird||<nowiki>'true|1|on'</nowiki>||
|-
|'''data-hide-off'''||Zeichenkette, bei der das Element angezeigt wird||'!on'||
|-
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"
|-
|'''data-reachable'''||Reading, dessen Inhalt angibt, ob das Device erreichbar ist, oder nicht. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||
|-
|'''data-timeout'''||Maximale Zeit, die der eingestellte Zustand nach einer Veränderung angezeigt wird, bis die echte Rückmeldung vom Device wieder angezeigt wird||2000ms||
|}

===Attribute für zwei Zustände===
Zur Anzeige von zwei Zuständen können nachfolgende Attribute zusätzlich zu den Standard-Attributen genutzt werden.
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-get-on'''||Zeichenkette oder ein Array von Werten, die als Zustand ON interpretiert werden||'on'||
|-
|'''data-get-off'''||Zeichenkette oder ein Array von Werten, die als Zustand OFF interpretiert werden||'off'||
|-
|'''data-set-on'''||Wert, der beim Einschalten gesendet werden soll ||Wert von '''data-get-on'''||data-set-on="1"
|-
|'''data-set-off'''||Wert, der beim Ausschalten gesendet werden soll||Wert von '''data-get-off'''||data-set-off="0"
|-
|'''data-on-color'''||Iconfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#aa6900'||
|-
|'''data-off-color'''||Iconfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#505050'||
|-
|'''data-on-background-color'''||Hintergrundfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#aa6900'||
|-
|'''data-off-background-color'''||Hintergrundfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#505050'||
|}

'''data-get-on''' und '''data-get-off''' können auch RegEx enthalten:
<code>data-get-on="[0-9]{1,3}|on"</code> bedeutet, dass der Schalter AN ist, wenn das Reading eine Zahl zwischen 0 und 100 ist, oder den Wert <code>on</code> enthält.
<code>data-get-off="!on"</code> bedeutet, dass alle Werte, die nicht für <code>on</code> stehen, automatisch <code>off</code> bedeuten (Negation).
<code>data-set-off=""</code> unterdrückt das Senden eines OFF-Befehls.
'''data-[on|off]-color''' erwartet einen RGB-Wert, wenn dieser aus einen Reading gelesen wird (<code>rgb(0, 0, 0)</code> statt <code>#000000</code>)

===Attribute für mehrere Zustände===
Zur Anzeige von mehreren Zuständen können nachfolgende Attribute zusätzlich zu den Standard-Attributen genutzt werden.
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-states'''||Array von Werten, die das Reading einnehmen kann||||
|-
|'''data-set-states'''||Array von Werten, die in Abhängigkeit des Arrays von '''data-states''' geschaltet werden||||
|-
|'''data-icons'''||Array von Icons, die in Abhängigkeit des Arrays von '''data-states''' im Vordergrund angezeigt werden||||
|-
|'''data-background-icons'''||Array von Icons, die in Abhängigkeit des Arrays von '''data-states''' im Hintergrund angezeigt werden||||
|-
|'''data-colors'''||Array von Farben, die in Abhängigkeit des Arrays von '''data-states''' das Vordergrund-Icon einfärben||||
|-
|'''data-background-colors'''||Array von Farben, die in Abhängigkeit des Arrays von '''data-states''' das Hintergrund-Icon einfärben||||
|}

==CSS-Klassen==
{|class="wikitable"
!Klasse
!Beschreibung
{{FTUI Klasse|readonly}}{{FTUI Klasse|small}}{{FTUI Klasse|compressed}}{{FTUI Klasse|compressed-50}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|invert}}
|}

==Hinweise==
*Das Attribut '''data-timeout''' dient dazu, ein "Flackern" der Anzeige zu verhindern. Manche Devices benötigen einige Zeit, bis der gewünschte und eben eingestellte Zustand erreicht wird. Zitat aus dem Forum: <cite>"data-timeout gilt nur für die on-off (toggle) Funktion von Switch und Dimmer, nicht fürs Dimmen. Das Problem: Am Switch wird eingeschaltet, der Knopf wird hell und ON an FHEM gesendet. Aber die Hardware reagiert nicht, geht nicht auf ON. Wenn sie das machen würde, käme auch eine Bestätigung per Longpoll. Mit '''data-timeout''' wird die eingestellte Zeit gewartet und bei Ausbleiben der Bestätigung fällt der Switch zum ursprünglichen Status zurück, geht also wieder aus. Nur wenn innerhalb der x Sekunden das Longpoll-Event kommt, wird der Fallbacktimer gestoppt."</cite>
*Die Attribute für Dual-State (zwei Zustände) und Multi-State (mehrere Zustände) können '''nicht gemeinsam''' verwendet werden.

==Beispiele==
===An/Aus===
Einfacher Schalter, der <code>on</code>/<code>off</code> sendet und diesen Status durch Farbumschlag anzeigt.

[[File:Switch.png]]
<syntaxhighlight lang="html">
<div data-type="switch" data-device="MyDevice"></div>
</syntaxhighlight>

===An/Aus (Farben invertiert)===
Einfacher Schalter, der <code>on</code>/<code>off</code> sendet und diesen Status durch Farbumschlag anzeigt. Die Farben sind hier im Gegensatz zum vorherigen Beispiel invertiert.
<syntaxhighlight lang="html">
<div data-type="switch" data-device="MyDevice" class="invert"></div>
</syntaxhighlight>

===1/0 als Befehl===
Einfacher Schalter, der <code>1</code>/<code>0</code> sendet und diesen Status durch Farbumschlag anzeigt.
<syntaxhighlight lang="html">
<div data-type="switch"
data-icon="fa-rss"
data-device='MyDevice'
data-get-on="1"
data-get-off="0"
data-set-on="1"
data-set-off="0"
class="green small invert">
</div>
</syntaxhighlight>

===MILIGHT-Switch===
Beispiel for einen MILIGHT-Schalter. Der <code>on</code>-Zustand wird per RegEx ermittelt.
<syntaxhighlight lang="html">
<div data-type="switch"
data-device="MILIGHT_Zone1_Wohnzimmer"
data-get-on="on.*"
data-get-off="off">
</div>
</syntaxhighlight>

===4-fach-Schalter===
Gruppe von 4 Schaltern, die den Status des selben Devices umschalten.

[[File:Switch4.png]]
<syntaxhighlight lang="html">
<div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-home" data-get-on="Home"></div>
<div>Home</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-bed" data-get-on="Sleep"></div>
<div>Sleep</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-car" data-get-on="Away"></div>
<div>Away</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-suitcase" data-get-on="Holiday"></div>
<div>Holiday</div>
</div>
</syntaxhighlight>

===Zwei Zustände umschalten===
Großer Homestatus-Button, der zwischen zwei Zuständen umschaltet.

[[File:FTUI_Switch-Homestatus2.png]]
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
<header>HOMESTATUS</header>
<div data-type="switch"
data-device="dummy3"
data-set-states='["Abwesend","Anwesend"]'
data-states='["Anwesend","Abwesend"]'
data-icons='["fa-home", "fa-car"]'
data-colors='["white", "white"]'
data-background-colors='["green", "red"]'
class="bigger top-space">
</div>
</li>
</syntaxhighlight>

===Serienschaltung: Mehrere Zustände nacheinander===
Bei jeder Betätigung wird der nächste der hinterlegten Zustände eingenommen.
Man beachte die Reihenfolge in data-set-states und data-states.

<syntaxhighlight lang="html">
<div data-type="switch"
data-device="Test"
data-set-states='["on","off","auto"]'
data-states='["auto","on","off"]'
data-icons='["fa-tint","fa-tint","fa-tint"]'
data-colors='["white","white","white"]'
data-background-colors='["blue","green","red"]'
class="small">
</div>
</syntaxhighlight>

===Beschriftete Schaltflächen===
[[File:FTUI-Ein-Aus-Schalter.png|150px]]

<syntaxhighlight lang="html">

<div data-type="switch"
data-icon=""
data-device="Schalter"
data-set-on="Ein"
data-set-off="Aus"
data-states='["Ein","Aus"]'
data-background-colors='["#90D49A","#E37D7D"]'>
<div data-type="label"
data-device="Schalter"
data-states='["Ein","Aus"]'
data-colors='["#5B8562","#854646"]'>
</div>
</div>


<div data-type="switch"
data-device="Schalter"
data-icon=""
data-background-icon=""
data-set-on="Ein"
data-set-off="Aus"
data-states='["Ein","Aus"]'>
<div data-type="label"
data-device="Schalter"
data-states='["Ein","Aus"]'
data-colors='["#5B8562","#854646"]'>
</div>
</div>
</syntaxhighlight>

[[Kategorie:FHEM Tablet UI|Switch]]

Datei:FTUI-Ein-Aus-Schalter.png

2018-12-08T19:32:28Z

Ulm32b: Für FTUI-Wiki "Switch"

== Beschreibung ==
Für FTUI-Wiki "Switch"

FTUI Widget Switch

2018-12-04T23:25:26Z

Ulm32b: /* Attribute */ data-doubleclick korrigiert, vgl. Forum 5.12.2018

Das [[{{PAGENAME}}|Switch Widget]] ist ein Widget für [[FHEM Tablet UI]]. Dabei handelt es sich um einen Ein-/Ausschalter in Form eines runden Druckknopfes. Er dient zum Ausführen beliebiger Schaltbefehle und kann auch für FTUI-interne Steuerungen genutzt werden. Zusätzlich kann der Schalter in Abhängigkeit eines Readings sein Aussehen verändern und so zwei oder mehr Zustände optisch darstellen. Beispielsweise können Farbe und/oder das Symbol die Zuständen an/aus anzeigen. Kann das Status-Reading mehr als zwei Zustände einnehmen, kann auch dies dargestellt werden. Dabei sind beliebige Kombinationen von Vorder-/Hintergrundfarben und Symbolen möglich.

<gallery>
File:Switch.png
File:Switch4.png
File:FTUI_Switch-Homestatus2.png
</gallery>

==Attribute==
===Standard-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-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||
|-
|'''data-doubleclick'''||Zeit [ms], in der ein zweiter Klick erfolgen muss, damit die Betätigung angenommen wird. '0' schaltet dieses Verhalten ab.||0||data-doubleclick="800"
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Gütige Werte sind 'true', '1' oder 'on' ||||
|-
|'''data-icon'''||Name des Icons im Vordergrund||'fa-lightbulb-o'||
|-
|'''data-background-icon'''||Name des Icons, das als Hintergrund verwendet werden soll||'fa-circle'||
|-
|'''data-color'''||Farbe des Icon (RGB-Angabe oder Farbname)||#2A2A2A||data-color="#c0c0c0"
|-
|'''data-background-color'''||Hintergrundfarbe des Widgets||#505050||data-background-color="none"
|-
|'''data-warn'''||Reading, dessen Inhalt als rotes Kennzeichen angezeigt wird. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||
|-
|'''data-warn-on'''||Werte von '''data-warn''', bei denen das Kennzeichen angezeigt wird||<nowiki>'true|on|[1-9]{1}[0-9]*'</nowiki>||
|-
|'''data-warn-off'''||Werte von '''data-warn''', bei denen das Kennzeichen versteckt wird||<nowiki>'false|off|0'</nowiki>||
|-
|'''data-warn-color'''||Textfarbe des Kennzeichens||'#aaa'||
|-
|'''data-warn-background-color'''||Hintergrundfarbe des Kennzeichens||'#aa2200'||
|-
|'''data-hide'''||Reading zum Verstecken des Elementes. Das Element verschwindet, wenn der Wert mit '''data-hide-on''' übereinstimmt.||'STATE'||
|-
|'''data-hide-on'''||Zeichenkette, bei der das Element versteckt wird||<nowiki>'true|1|on'</nowiki>||
|-
|'''data-hide-off'''||Zeichenkette, bei der das Element angezeigt wird||'!on'||
|-
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"
|-
|'''data-reachable'''||Reading, dessen Inhalt angibt, ob das Device erreichbar ist, oder nicht. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||
|-
|'''data-timeout'''||Maximale Zeit, die der eingestellte Zustand nach einer Veränderung angezeigt wird, bis die echte Rückmeldung vom Device wieder angezeigt wird||2000ms||
|}

===Attribute für zwei Zustände===
Zur Anzeige von zwei Zuständen können nachfolgende Attribute zusätzlich zu den Standard-Attributen genutzt werden.
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-get-on'''||Zeichenkette oder ein Array von Werten, die als Zustand ON interpretiert werden||'on'||
|-
|'''data-get-off'''||Zeichenkette oder ein Array von Werten, die als Zustand OFF interpretiert werden||'off'||
|-
|'''data-set-on'''||Wert, der beim Einschalten gesendet werden soll ||Wert von '''data-get-on'''||data-set-on="1"
|-
|'''data-set-off'''||Wert, der beim Ausschalten gesendet werden soll||Wert von '''data-get-off'''||data-set-off="0"
|-
|'''data-on-color'''||Iconfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#aa6900'||
|-
|'''data-off-color'''||Iconfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#505050'||
|-
|'''data-on-background-color'''||Hintergrundfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#aa6900'||
|-
|'''data-off-background-color'''||Hintergrundfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||'#505050'||
|}

'''data-get-on''' und '''data-get-off''' können auch RegEx enthalten:
<code>data-get-on="[0-9]{1,3}|on"</code> bedeutet, dass der Schalter AN ist, wenn das Reading eine Zahl zwischen 0 und 100 ist, oder den Wert <code>on</code> enthält.
<code>data-get-off="!on"</code> bedeutet, dass alle Werte, die nicht für <code>on</code> stehen, automatisch <code>off</code> bedeuten (Negation).
<code>data-set-off=""</code> unterdrückt das Senden eines OFF-Befehls.
'''data-[on|off]-color''' erwartet einen RGB-Wert, wenn dieser aus einen Reading gelesen wird (<code>rgb(0, 0, 0)</code> statt <code>#000000</code>)

===Attribute für mehrere Zustände===
Zur Anzeige von mehreren Zuständen können nachfolgende Attribute zusätzlich zu den Standard-Attributen genutzt werden.
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-states'''||Array von Werten, die das Reading einnehmen kann||||
|-
|'''data-set-states'''||Array von Werten, die in Abhängigkeit des Arrays von '''data-states''' geschaltet werden||||
|-
|'''data-icons'''||Array von Icons, die in Abhängigkeit des Arrays von '''data-states''' im Vordergrund angezeigt werden||||
|-
|'''data-background-icons'''||Array von Icons, die in Abhängigkeit des Arrays von '''data-states''' im Hintergrund angezeigt werden||||
|-
|'''data-colors'''||Array von Farben, die in Abhängigkeit des Arrays von '''data-states''' das Vordergrund-Icon einfärben||||
|-
|'''data-background-colors'''||Array von Farben, die in Abhängigkeit des Arrays von '''data-states''' das Hintergrund-Icon einfärben||||
|}

==CSS-Klassen==
{|class="wikitable"
!Klasse
!Beschreibung
{{FTUI Klasse|readonly}}{{FTUI Klasse|small}}{{FTUI Klasse|compressed}}{{FTUI Klasse|compressed-50}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|invert}}
|}

==Hinweise==
*Das Attribut '''data-timeout''' dient dazu, ein "Flackern" der Anzeige zu verhindern. Manche Devices benötigen einige Zeit, bis der gewünschte und eben eingestellte Zustand erreicht wird. Zitat aus dem Forum: <cite>"data-timeout gilt nur für die on-off (toggle) Funktion von Switch und Dimmer, nicht fürs Dimmen. Das Problem: Am Switch wird eingeschaltet, der Knopf wird hell und ON an FHEM gesendet. Aber die Hardware reagiert nicht, geht nicht auf ON. Wenn sie das machen würde, käme auch eine Bestätigung per Longpoll. Mit '''data-timeout''' wird die eingestellte Zeit gewartet und bei Ausbleiben der Bestätigung fällt der Switch zum ursprünglichen Status zurück, geht also wieder aus. Nur wenn innerhalb der x Sekunden das Longpoll-Event kommt, wird der Fallbacktimer gestoppt."</cite>
*Die Attribute für Dual-State (zwei Zustände) und Multi-State (mehrere Zustände) können '''nicht gemeinsam''' verwendet werden.

==Beispiele==
===An/Aus===
Einfacher Schalter, der <code>on</code>/<code>off</code> sendet und diesen Status durch Farbumschlag anzeigt.

[[File:Switch.png]]
<syntaxhighlight lang="html">
<div data-type="switch" data-device="MyDevice"></div>
</syntaxhighlight>

===An/Aus (Farben invertiert)===
Einfacher Schalter, der <code>on</code>/<code>off</code> sendet und diesen Status durch Farbumschlag anzeigt. Die Farben sind hier im Gegensatz zum vorherigen Beispiel invertiert.
<syntaxhighlight lang="html">
<div data-type="switch" data-device="MyDevice" class="invert"></div>
</syntaxhighlight>

===1/0 als Befehl===
Einfacher Schalter, der <code>1</code>/<code>0</code> sendet und diesen Status durch Farbumschlag anzeigt.
<syntaxhighlight lang="html">
<div data-type="switch"
data-icon="fa-rss"
data-device='MyDevice'
data-get-on="1"
data-get-off="0"
data-set-on="1"
data-set-off="0"
class="green small invert">
</div>
</syntaxhighlight>

===MILIGHT-Switch===
Beispiel for einen MILIGHT-Schalter. Der <code>on</code>-Zustand wird per RegEx ermittelt.
<syntaxhighlight lang="html">
<div data-type="switch"
data-device="MILIGHT_Zone1_Wohnzimmer"
data-get-on="on.*"
data-get-off="off">
</div>
</syntaxhighlight>

===4-fach-Schalter===
Gruppe von 4 Schaltern, die den Status des selben Devices umschalten.

[[File:Switch4.png]]
<syntaxhighlight lang="html">
<div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-home" data-get-on="Home"></div>
<div>Home</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-bed" data-get-on="Sleep"></div>
<div>Sleep</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-car" data-get-on="Away"></div>
<div>Away</div>
<div data-type="switch" data-device="dummy1" data-get-off="!on" data-set-off="" data-icon="fa-suitcase" data-get-on="Holiday"></div>
<div>Holiday</div>
</div>
</syntaxhighlight>

===Zwei Zustände umschalten===
Großer Homestatus-Button, der zwischen zwei Zuständen umschaltet.

[[File:FTUI_Switch-Homestatus2.png]]
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
<header>HOMESTATUS</header>
<div data-type="switch"
data-device="dummy3"
data-set-states='["Abwesend","Anwesend"]'
data-states='["Anwesend","Abwesend"]'
data-icons='["fa-home", "fa-car"]'
data-colors='["white", "white"]'
data-background-colors='["green", "red"]'
class="bigger top-space">
</div>
</li>
</syntaxhighlight>

===Serienschaltung: Mehrere Zustände nacheinander===
Bei jeder Betätigung wird der nächste der hinterlegten Zustände eingenommen.
Man beachte die Reihenfolge in data-set-states und data-states.

<syntaxhighlight lang="html">
<div data-type="switch"
data-device="Test"
data-set-states='["on","off","auto"]'
data-states='["auto","on","off"]'
data-icons='["fa-tint","fa-tint","fa-tint"]'
data-colors='["white","white","white"]'
data-background-colors='["blue","green","red"]'
class="small">
</div>
</syntaxhighlight>

[[Kategorie:FHEM Tablet UI|Switch]]

FTUI Widget Push

2018-12-04T23:15:21Z

Ulm32b: /* Attribute */ Beschreibung doubleclick korrigiert, vgl. Forum 5.12.2018

Das [[{{PAGENAME}}|Push Widget]] ist ein Widget für [[FHEM Tablet UI]] in Form eines Button-förmigen Knopfes, der, ähnlich einem Taster, einen einfachen Befehl an FHEM sendet (zum Beispiel hoch/runter, Play/Pause, Nächster/vorheriger Titel, usw.). Der Befehl kann beim Drücken, beim Loslassen, oder beide Male ausgeführt werden.

<gallery>
File:Ftui_widget_push.PNG
File:Push1.png
File:Push2.png
File:Ftui_widget_push_on-for-timer.png
</gallery>

==Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||FHEM-Device, dessen Reading gesetzt werden soll (<command> '''<device>''' <reading> <value>)||||
|-
|'''data-set'''||Reading, das gesetzt werden soll (<command> <device> '''<reading>''' <value>)||||
|-
|'''data-set-on'''||Wert, der beim Drücken gesendet werden soll. Kann auch ein Array sein, um verschiedene Werte abwechselnd zu schalten||on||data-set-on="1"
|-
|'''data-set-off'''||Wert, der nach dem Loslassen gesendet werden soll||||data-set-off="0"
|-
|'''data-cmd'''||Befehl, der gesendet werden soll ('''<command>''' <device> <reading> <value>) (z.B. setstate, set, setreading, trigger)||set||
|-
|'''data-fhem-cmd'''||Befehl, der bei einem Klick auf das Bild an FHEM gesendet werden soll||||data-fhem-cmd="set Bulp01 off"
|-
|'''data-doubleclick'''||Zeit [ms], in der ein zweiter Klick erfolgen muss, damit die Betätigung angenommen wird. '0' schaltet dieses Verhalten ab.||0||data-doubleclick="800"
|-
|'''data-countdown'''||Sekunden für Fortschrittsanzeige (progress control / 'on-for-timer')||Automatische Erkennung von 'on-for-timer' bei '''data-set-on'''||
|-
|'''data-warn'''||Reading, dessen Inhalt als rotes Kennzeichen angezeigt wird. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||
|-
|'''data-get'''||Reading, dessen Inhalt zur Zustandsanzeige (ON/OFF) wird||keiner (muss explizit angegeben werden)||
|-
|'''data-get-on'''||Zeichenkette, die als Zustand ON interpretiert wird||||
|-
|'''data-get-off'''||Zeichenkette, die als Zustand OFF interpretiert wird||||
|-
|'''data-hide'''||Reading zum Verstecken des Push-Elementes. Das Element verschwindet, wenn der Wert mit '''data-hide-on''' übereinstimmt.||STATE||
|-
|'''data-hide-on'''||Zeichenkette, bei der das Element versteckt wird||true,1,on||
|-
|'''data-hide-off'''||Zeichenkette, bei der das Element angezeigt wird||!on||
|-
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"
|-
|'''data-lock'''||Reading, mit dem das Element für eine Bedienung gesperrt wird. Gültige Werte sind ''true'', ''1'' oder ''on''||||
|-
|'''data-reachable'''||Reading, dessen Inhalt angibt, ob das Device erreichbar ist, oder nicht. Der Inhalt des Readings muss eine Ganzzahl (Integer) sein.||||
|-
|'''data-icon'''||Name des Icons im Vordergrund||fa-power-off||
|-
|'''data-background-icon'''||Name des Icons, das als Hintergrund verwendet werden soll||fa-circle-thin||
|-
|'''data-on-color'''||Feste Iconfarbe für den Zustand ON, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||#aa6900||
|-
|'''data-on-background-color'''||Feste Hintergrundfarbe für den Zustand ON, oder '''<device>:<reading>'''||#aa6900||
|-
|'''data-off-color'''||Feste Iconfarbe für den Zustand OFF, oder '''<device>:<reading>''', um einen entsprechenden Wert dynamisch aus FHEM abzurufen.||#505050||
|-
|'''data-off-background-color'''||Feste Hintergrundfarbe für den Zustand OFF, oder '''<device>:<reading>'''||#505050||
|}

==CSS Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
|-
{{FTUI Klasse|height-narrow}}
|}

==Weitere Möglichkeiten==
Das Push-Widget kann auch dazu verwendet werden, Readings darzustellen. Über '''data-get''' und '''data-get-on''' wird beispielsweise der Kreis (Hintergrund-Icon) eingefärbt. Der Wert des Readings selbst wird dann per [[FTUI_Widget_Label|Label]] angezeigt, welches innerhalb des Push-Widgets platziert wird. Siehe hierzu auch den {{Link2Forum|Topic=66800|LinkText=Hinweis im Forum}}.

<syntaxhighlight lang="html">
<div data-type="push" ...>
<div data-type="label" ...></div>
</div>
</syntaxhighlight>

==Beispiele==
===Alle Lampen einschalten===

<syntaxhighlight lang="html">
<div data-type="push"
data-device="LightAll"
data-cmd="trigger"
data-set-on="on">
</div>
</syntaxhighlight>

===Steuerung hoch/runter (horizontal)===
[[File:Push1.png]]

<syntaxhighlight lang="html">
<div>
<div class="doublebox-h">
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-up" data-background-icon="fa-square-o"
data-set-on="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-angle-down" data-background-icon="fa-square-o"
data-set-on="down">
</div>
</div>
</div>
</syntaxhighlight>

===Steuerung hoch/runter (vertikal)===
[[File:Push2.png]]

<syntaxhighlight lang="html">
<div>
<div class="doublebox-v">
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-up" data-background-icon="fa-square-o"
data-set-on="up">
</div>
<div data-type="push" data-device="Rollo"
data-icon="fa-chevron-down" data-background-icon="fa-square-o"
data-set-on="down">
</div>
</div>
</div>
</syntaxhighlight>

===Lampe für 5 Minuten einschalten===
Das Push-Widget zeigt einen abnehmenden Kreis, solange der Countdown läuft. Die Dauer wird automatisch aus dem '''on-for-timer'''-Befehl erkannt. Mit '''data-countdown''' kann jedoch auch auch ein eigener Wert angegeben werden.
Wenn das Device ein Dummy ist, muss in diesem das FHEM-Attribut <code>useSetExtensions 1</code> gesetzt werden. Weitere Beispiele für Timer sind [[FTUI_Zeitschaltung|hier]] zu finden.

[[File:Ftui_widget_push_on-for-timer.png]]

<syntaxhighlight lang="html">
<div data-type="push" data-device="MyLamp" data-set-on="on-for-timer 300" ></div>
</syntaxhighlight>

===Push-Widget verstecken===

<syntaxhighlight lang="html">
<div class="hbox">
<div class="vbox">
<div data-type="push" data-device="ftuitest" data-set-on="1"></div>
<div>on</div>
</div>
<div class="vbox">
<div data-type="push" data-device="ftuitest" data-set-on="0"></div>
<div>off</div>
</div>
<div class="vbox">
<div data-type="push" data-device="dummy1" data-get="STATE" data-get-on="on" data-hide="ftuitest:STATE" data-hide-on="1" class=""></div>
</div>
</div>

</syntaxhighlight>

[[Kategorie:FHEM Tablet UI|Push]]

FTUI Widget Pagebutton

2018-10-28T17:53:49Z

Ulm32b: /* Attribute */ "data-warn-fixed" ergänzt.

Das [[{{PAGENAME}}|Pagebutton Widget]] ist ein Widget für [[FHEM Tablet UI]], das ein einfaches Element zur Verfügung stellt, um auf eine andere Seite zu navigieren. Auf der Zielseite wird das Widget als "ON" angezeigt. Das Pagebutton-Widget eignet sich zum Beispiel gut, um eine Navigation zu erstellen.

<gallery>
File:FTUI_Widget_Pagebutton_01.png
File:FTUI_Widget_Pagebutton_02.png
</gallery>

==Attribute==
Für das Pagebutton-Widget gelten alle Attribute des [[FTUI Widget Switch]]. Und zusätzlich die folgenden:
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-url'''||URL der Seite, die angezeigt werden soll||||data-url="#content_main.html"
|-
|'''data-load'''||DIV-Container, in den der Inhalt der Zielseite geladen werden soll||||data-load="#main"
|-
|'''data-active-pattern'''||[[Regulärer Ausdruck|RegEx]], die bestimmt, wann das Widget "ON" sein soll||||<nowiki>data-active-pattern="(.*/||.*#content_main.html)"</nowiki>
|-
|'''data-fade-duration'''||Zeit in Millisekunden oder "slow" bzw. "fast", die verwendet werden soll, um die Zielseite einzublenden||slow||data-fade-duration="1000"
|-
|'''data-icon'''||Vordergrund-Icon des Widgets||fa-power-off||data-icon="mi-home"
|-
|'''data-background-icon'''||Hintergrund-Icon des Widgets||fa-circle||data-background-icon="fa-square"
|-
|'''data-on-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt angezeigt wird||#222222||data-on-color="yellow"
|-
|'''data-on-background-color'''||Farbe des Hintergrund-Icons, wenn der gewünschte Inhalt angezeigt wird||#606060||data-on-background-color="gray"
|-
|'''data-off-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt nicht angezeigt wird||#505050||data-off-color="#000000"
|-
|'''data-off-background-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt nicht angezeigt wird||transparent||data-off-background-color="#cccccc"
|-
|'''data-return-time'''||Zeit in Sekunden, nach der die Standardseite (default) wieder aufgerufen wird||||data-return-time="60"
|-
|'''data-parent'''||"Eltern-Seite" - Angabe erforderlich, wenn in einer mehrstufigen Menüstruktur direkt auf eine Unterseite gesprungen werden soll und diese nicht mit "prefetch" vorgeladen ist||||data-parent="main2"

|-
|'''data-device'''||FHEM-Device, über welches das Verhalten des Widgets gesteuert wird||||
|-
|'''data-get'''||Reading, welches ausgewertet wird||STATE||
|-
|'''data-get-on'''||Wert, bei welchem das Widget ausgelöst wird||||
|-
|'''data-states'''||Vektor mit Zuständen von data-get||||data-states='["0","1"]'
|-
|'''data-icons'''||Vektor mit Symbolen, die auf data-states referenzieren||||data-icons='["fs-bag blink","fs-bag"]'
|-
|'''data-hide'''||Reading, welches Ein- und Ausblenden des Widgets steuert||||data-hide="GelberSack_Anzeige"
|-
|'''data-hide-on'''||Wert, bei dem das Widget ausgeblendet wird||||data-hide-on="false"
|-
|'''data-warn'''||<device>:<reading> für den Inhalt des Warnhinweises||||
|-
|'''data-warn-background-color'''||Hintergrundfarbe des Warnhinweises||||
|-
|'''data-warn-color'''||Schriftfarbe des Warnhinweises||||
|-
|'''data-warn-fixed'''||Anzahl Nachkommastellen im Warnhinweis||0||
|}

==CSS Klassen==
{|class="wikitable"
{{FTUI Klasse|blank}}{{FTUI Klasse|nocache}}{{FTUI Klasse|default}}{{FTUI Klasse|prefetch}}
|}

==Hinweise==
* Für Sub-Pagebuttons kann eine eigene ''data-return-time'' festgelegt werden.
* ''data-return-time'' muss nicht am ersten Button hängen. Der erste, der dieses Attribut hat, wird ausgewertet.

==Beispiele==
===Einfacher Link===
<syntaxhighlight lang="html">
<div data-type="pagebutton"
data-url="index.html"
data-icon="mi-home"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Pagebutton_01.png]]

===Navigationsleiste===
Für die Navigationsleiste braucht es zum einen die Leiste und zum anderen einen DIV-Container, in dem die zu ladenden Inhalte angezeigt werden. Die Container erhalten jeweils eine eindeutige ID, welche in der Navigationsleiste als Ziel referenziert wird.

Als erstes wird das Menü aufgebaut.
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
<div data-type="pagebutton"
data-url="#page1.html"
data-load="#page1"
data-active-pattern=".*#page1.html"
data-icon="mi-weekend"
class="default"></div>
<div data-type="pagebutton"
data-url="#page2.html"
data-load="#page2"
data-active-pattern=".*#page2.html"
data-icon="mi-music_video"></div>
<div data-type="pagebutton"
data-url="#page3.html"
data-load="#page3"
data-active-pattern=".*#page3.html"
data-icon="mi-tv"></div>
</li>
</syntaxhighlight>

Anschließend werden noch die DIV-Container benötigt, in die der Inhalt der Zielseite geladen wird.
<syntaxhighlight lang="html">
<li data-row="1" data-col="2" data-sizex="5" data-sizey="4">
<div class="page" id="page1"></div>
<div class="page" id="page2"></div>
<div class="page" id="page3"></div>
</li>
</syntaxhighlight>

In der Zielseite ist wichtig, dass ein DIV-Container erstellt wird, dem die Klasse ''page'' zugewiesen wird und eine ID, die der ID entsprechen muss, in der bei ''data-load'' verwiesen wird.
So eine Seite könnte wie folgt aussehen:
<syntaxhighlight lang="html">
<div class="page" id="page1">
<div data-type="label">Page 1</div>
</div>
</syntaxhighlight>

[[File:FTUI_Widget_Pagebutton_02.png]]

===Steuerung über ein Device===
Der Aufruf einzelner Seiten kann auch über ein Device erfolgen; dies eröffnet Automatisierungsmöglichkeiten. Das obige Beispiel wird hierzu erweitert:
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
<div data-type="pagebutton"
data-url="#page1.html"
data-load="#page1"
data-active-pattern=".*#page1.html"
data-icon="mi-weekend"
class="default"
data-device="Seite"
data-get="STATE"
data-get-on="1"></div>
<div data-type="pagebutton"
data-url="#page2.html"
data-load="#page2"
data-active-pattern=".*#page2.html"
data-icon="mi-music_video"
data-device="Seite"
data-get="STATE"
data-get-on="2"></div>
<div data-type="pagebutton"
data-url="#page3.html"
data-load="#page3"
data-active-pattern=".*#page3.html"
data-icon="mi-tv"
data-device="Seite"
data-get="STATE"
data-get-on="3"></div>
</li>
</syntaxhighlight>

Nimmt das device "Seite" die STATES "1", "2" oder "3" an, wird die jeweilige Seite aufgerufen.

Eine weitere Variante zeigt das nachfolgende Beispiel: Hier wird über das device "Musik" bei "on" die Seite 2 aufgerufen und bei "off" zur Hauptseite zurückgewechselt:
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
<div data-type="pagebutton"
data-url="#page1.html"
data-load="#page1"
data-active-pattern=".*#page1.html"
data-icon="mi-weekend"
class="default"
data-device="Musik"
data-get="STATE"
data-get-on="off"></div>
<div data-type="pagebutton"
data-url="#page2.html"
data-load="#page2"
data-active-pattern=".*#page2.html"
data-icon="mi-music_video"
data-device="Musik"
data-get="STATE"
data-get-on="on"></div>
<div data-type="pagebutton"
data-url="#page3.html"
data-load="#page3"
data-active-pattern=".*#page3.html"
data-icon="mi-tv"></div>
</li>
</syntaxhighlight>

===Querverweis auf eine Pagebutton-Seite===
Es ist zulässig, dass mehrere Pagebutton-Widgets auf dieselbe Seite verweisen. Neben der Verwendung in Menüleisten könnnen somit zusätzlich "Links" an beliebiger Stelle platziert werden, bei deren Betätigung die definierte Pagebutton-Seite bzw. -Unterseite aufgerufen wird. Das Aussehen des Pagebutton-Widgets kann mittels ''data-icons'' und ''data-colors'' wie beim Symbol-Widget beeinflusst werden. Folglich erweitert das Pagebutton-Widget die Funktionalität des Symbol-Widgets dergestalt, dass bei Betätigung eine Unterseite aufgerufen wird. Beispiel: Auf der Hauptseite signalisiert das Symbol, ob alle Fenster geschlossen sind oder mindestens eines geöffnet ist. Bei Betätigung des Widgets wird dann die Unterseite aufgerufen, welche eine detaillierte Übersicht über den Zustand aller Fenster enthält. Im nachfolgenden Beispiel wird der Abholtermin des Gelben Sacks am Vortag (normale Anzeige) und am Abholtag (blinkend) angezeigt. Das Reading ''GelberSack_Anzeige'' begrenzt das Zeitfenster der Anzeige auf den Nachmittag des Vortages bis zum Vormittag des Abholtages. Wenn das Symbol angezeigt wird, kann durch manuelle Betätigung die Unterseite ''"#page_content6_4.html"'' aufgerufen werden (welche z.B. weitere Informationen zu anstehenden Abholterminen bereithält).

<syntaxhighlight lang="html">
<div class="vbox grow-0">
<div data-type="pagebutton"
data-url="#page_content6_4.html"
data-load="#content6_4"
data-off-background-color="transparent"
data-off-color="#FFFF7A"
data-on-background-color="transparent"
data-on-color="#FFFF7A"
data-active-pattern=".*#page_content6_4.html"
class="prefetch bigger compressed autohide"
data-device="Entsorger"
data-get="GelberSack_days"
data-states='["0","1"]'
data-icons='["fs-bag blink","fs-bag"]'
data-hide="GelberSack_Anzeige"
data-hide-on="false"></div>

<div data-type="label"
data-device="Entsorger"
data-hide="GelberSack_Anzeige"
data-hide-on="false"
data-get="GelberSack_days"
data-substitution='["0","Heute","1","Morgen"]'
data-color="#FFFF7A" class="compressed autohide"
style="position: relative; top: 5px"></div>
</div>
</syntaxhighlight>

==Weblinks==
*[https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/pagebutton/index_page_left_demo.html Beispiel für eine Navigation]
*{{Link2Forum|Topic=67141|LinkText=Fertiges Pagebutton Multi-Menü}}
*[https://forum.fhem.de/index.php/topic,82003.msg745677.html#msg745677 Sprung zu einer Unterseite (Anwendung von data-parent)]

[[Kategorie:FHEM Tablet UI|Pagebutton]]

FTUI Widget Label

2018-10-28T16:42:28Z

Ulm32b: /* Hinweise */ data-subst. Sekunden --> Stunden

Das [[{{PAGENAME}}|Label Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Reading eines FHEM-Devices in Textform angezeigt werden kann.

<gallery>
File:FTUI_Widget_Label_01.png
File:FTUI_Widget_Label_02.png
File:FTUI_Widget_Label_03.png
File:FTUI_Widget_Label_04.png
File:FTUI_Widget_Label_05.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-get'''||Name des Readings, dessen Wert angezeigt werden soll||||data-get="measured-temp"
|-
|'''data-part'''||[[Regulärer Ausdruck|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll||||
|-
|'''data-fix'''||Angegebene Anzahl an Dezimalstellen einhalten||(-1 -> nicht numerisch)||
|-
|'''data-color'''||Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe||||data-color="red"
|-
|'''data-colors'''||Ein Array von Farben. Welche Farbe für das Label verwendet wird, wird durch das ''data-limits''-Attribut bestimmt||||data-colors='["red","yellow","green"]'
|-
|'''data-classes'''||Ein Array von CSS-Klassen. Welche Klasse verwendet wird, hängt vom zutreffenden Wert im ''data-limits''-Attribut ab||||data-classes='["bg-red","bg-yellow","bg-green"]'
|-
|'''data-limits'''||Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert||||data-limits='[1,15,30]'
|-
|'''data-limits-get'''||Name des Readings, von dem die Werte für den Vergleich mit dem data-limits-Array geholt werden||data-get||data-limit-get="Dummy01:Limits"
|-
|'''data-limits-part'''||Filtern nach Wert, Position eines Wertes in einer Leerzeichen-getrennte Liste oder RegEx||'-1' -> alle||
|-
|'''data-unit'''||Einheit nach Zahl hinzufügen||||data-unit="%B0C%0A"
|-
|'''data-substitution'''||Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen||||siehe [[#Hinweise]]
|-
|'''data-pre-text'''||Text, der vor dem empfangenen Wert stehen soll||||data-pre-text="Es ist "
|-
|'''data-post-text'''||Text, der nach dem empfangenen Wert sehen soll||||data-post-text=" Grad warm"
|-
|'''data-hide'''||Name des Readings, nach dessen Wert das Widget angezeigt werden soll oder nicht||STATE||data-hide="power-on"
|-
|'''data-hide-on'''||Wert, bei dem das Widget versteckt wird||true,1,on||data-hide-on="on"
|-
|'''data-hide-off'''||Wert, bei dem das Widget angezeigt wird||!on||data-hide-off="!on"
|-
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"
|-
|'''data-refresh'''||Anzahl Sekunden, nach denen das Widget aktualisiert werden soll||0 -> kein Auto-Refresh||data-refresh="10"
|}

==CSS Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|orange}}{{FTUI Klasse|darker}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|squareborder}}{{FTUI Klasse|bg-limit}}{{FTUI Klasse|icon square}}{{FTUI Klasse|icon round}}{{FTUI Klasse|truncate}}{{FTUI Klasse|fixedlabel}}
|}

==Hinweise==
* Es kann nur entweder ''data-color'' verwendet werden, oder ''data-colors'' + ''data-limits'', nicht beides gleichzeitig
* Mit der Klasse ''bg-limit'' wird die Hintergrund- statt der Vordergrundfarbe abhängig von den Werten in ''data-limits'' geändert
* Die Klassen ''icon square'' und ''icon round'' formatieren das Label mit einer fixen Breite und Höhe im Icon-Stil
* Wird die Klasse ''timestamp'' zusammen mit ''data-substitution="toDate().ago()"'' verwendet, sollte eine automatische Aktualisierung (''data-refresh="xx"'') eingestellt werden für den Fall, dass die Aktualisierungsrate des Readings zu gering ist.
* Ein benutzerdefiniertes Layout kann durch Hinzufügen der folgenden Klassen in die fhem-tablet-ui-user.css erreicht werden:
** .label-precomma
** .label-comma
** .label-aftercomma
** .label-unit
** z.B.: <code>.label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }</code>
* Bis zur Version 2.6.2 wurde data-unit mit 50% Schriftgröße auf der Baseline des Wertes positioniert, danach wird die Unit auf superscript angehoben. Dies kann mit einem Eintrag in fhem-tablet-ui-user.css wieder überschrieben werden.
** <Code>.label-unit{ font-size: 50%; vertical-align: baseline; }</code>
* Klasse ''fixedlabel'': Vgl. [https://forum.fhem.de/index.php/topic,84158.msg764301.html#msg764301]

;Statische Texte:
* Diese können ressourcenschonend direkt definiert werden; das Widget Label wird hierzu nicht benötigt. Vgl. auch das Beispiel ''Statisches Label mit Symbol'' (s.u.).
* <Code><nowiki><div>Text</div></nowiki></code>

;Funktionsweise(n) von ''data-substitution'':
* Ein Array an Ersetzungen: <code>data-substitution='["on","Lampe ist an","off","Lampe ist aus"]'</code>
* [[Regulärer Ausdruck|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code>
* <code>data-substitution="weekdayshort"</code>
* Datums-/Zeitumwandlungen:
** Tag:Monat: <code>data-substitution="toDate().ddmm()"</code>
** Stunden:Minuten: <code>data-substitution="toDate().hhmm()"</code>
** Stunden:Minuten:Sekunden: <code>data-substitution="toDate().hhmmss()"</code>
** Minuten --> Stunden: <code>data-substitution="toString().toHoursFromMin()"</code>
** Sekunden --> Stunden: <code>data-substitution="toString().toHoursFromSec()"</code>
** den Namen des Wochentages:
*** Montag, Dienstag, etc.: <code>data-substitution="toDate().eeee()"</code>
*** Mon, Die, etc.: <code>data-substitution="toDate().eee()"</code>
*** Mo, Di, etc.: <code>data-substitution="toDate().ee()"</code>
** einen Zeitraum (langes Format): <code>data-substitution="toDate().ago()"</code>
** einen Zeitraum (kurzes Format):<code>data-substitution="toDate().ago('hh:mm:ss')"</code>
** einen Zeitraum (Minuten ohne führende Nullen):<code>data-substitution="toDate().ago('m')"</code>
** 20:15 statt 20:15:00: <code>data-substitution="s/(:00)$//g"</code>

==Beispiele==
===Einfaches Auslesen des STATE eines Devices===
Ein ganz einfaches Beispiel, welches den ''STATE'' eines FHEM-Devices (in diesem Fall ein Heizkörperthermostat) ausliest und anzeigt.
<syntaxhighlight lang="html">
<div data-type="label" data-device="HM_367B39_Climate"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Label_01.png]]

===Anzeige bestimmter Werte eines Devices===
In diesem Beispiel werden Temperatur und Luftfeuchtigkeit eines Heizkörperthermostates ausgelesen und untereinander angezeigt.
<syntaxhighlight lang="html">
<div>Temperatur</div>
<div data-type="label"
data-device="HM_367B21_Climate"
data-get="measured-temp"
data-unit="°C"></div>

<div>Luftfeuchte</div>
<div data-type="label"
data-device="HM_367B21_Climate"
data-get="humidity"
data-unit="%"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Label_02.png]]

===Textfarbe bei bestimmten Grenzwerten ändern===
Mit dem Label-Widget kann die Textfarbe je nach bestimmten Grenzwerten geändert werden. In diesem Beispiel ist die Farbe blau, sobald die Temperatur gleich oder kleiner 18° ist, grün ab 20° und rot ab 23°.
<syntaxhighlight lang="html">
<div data-type="label"
data-device="dDummy"
data-limits='[18,20,23]'
data-colors='["blue","green","#FF0000"]'
data-unit="°C"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Label_03.png]]
[[Kategorie:FHEM Tablet UI]]

===Zwei Labels in einer Textzeile===
Mit der Klasse ''inline'' (kein Zeilenumbruch) können mehrere Label-Widgets in der selben Textzeile platziert werden.
<syntaxhighlight lang="html">
<div>
<div data-type="label" data-device="dDummy" class="inline"></div> bis
<div data-type="label" data-device="dDummy2" class="inline"></div>
</div>
</syntaxhighlight>
[[File:FTUI_Widget_Label_04.png]]

===Kombination von Label- mit anderen Widgets===
Das Label-Widget kann sehr gut verwendet werden, um einen Beschreibungstext für andere Widgets bereitzustellen.
<syntaxhighlight lang="html">
<div data-type="switch" data-device="EnO_0193F070" data-icon="mi-power_settings_new"></div>
<div data-type="label">Nexus7</div>
(<div data-type="label" data-device="Nexus7" data-get="powerLevel"></div>%)
</syntaxhighlight>
[[File:FTUI_Widget_Label_05.png]]

===Statisches Label mit Symbol===
Möchte man einen statischen Text darstellen, muss hierfür nicht unbedingt das Label-Widget verwendet werden. Das nachfolgende Beispiel zeigt genau dies und fügt links noch ein Symbol ein. Der Teil für das Symbol kann auch für richtige Labels verwendet werden.
<syntaxhighlight lang="html">
<i class="fa fa-cloud fa-2x inline"></i><div class="inline big">WETTER</div>
</syntaxhighlight>
[[File:FTUI_Widget_label_symbol.png]]

===Label- und Symbol-Widget kombiniert===
Dieses Beispiel zeigt, wie man ein Label- innerhalb eines [[FTUI Widget Symbol|Symbol]]-Widgets anzeigen kann. Dazu wird einfach das Label-Widget im <DIV>-Container des Symbols platziert.
<syntaxhighlight lang="html">
<div>
<div data-type="symbol"
data-device="dDummy3"
data-icon="none"
data-color='none'
data-background-icon="fa-circle"
data-background-colors='["red","blue"]'
data-limits='["0","1"]'>
<div data-type="label"
data-device="dDummy3"
data-color="white"></div>
</div>
</div>
</syntaxhighlight>
[[File:FTUI_Widget_Label_06.png]]

===Unterdrücken der Anzeige===
Die Argumente für ''data-hide-on'' und ''data-hide-off'' sind reguläre Ausdrücke. Um die Anzeige zu aktivieren, wenn eine Bedingung nicht zutrifft, ist für ''data-hide-off'' ein Schema <code>(?!.*MUSTER).*</code> zu verwenden, resp. <code>(?!.*MUSTER1|MUSTER2).*</code>, wenn mehrere Bedinungen zutreffen können; für ''data-hide-on'' entsprechend <code>MUSTER</code> resp. <code>MUSTER1|MUSTER2</code>.

Im folgenden Beispiel wird ein Eintrag eines [[CALVIEW|CALVIEW-Objekts]] ''Abfalldaten'' nur dann angezeigt, wenn er heute oder morgen aktuell ist, ausgeblendet wird die ganze Gruppe von Widgets über die ID des Elternelements:
<syntaxhighlight lang="html">
<div id="Abfall1">
<div class="inline"
data-type="label"
data-device="Abfalldaten"
data-get="t_001_bdate"
data-hide="t_001_daysleftLong"
data-hide-on="(?!.*heute|morgen).*"
data-hide-off="heute|morgen"
data-hideparents="#Abfall1">
</div>
<div class="inline"
data-type="label"
data-device="Abfalldaten"
data-get="t_001_summary">
</div>
</div>
</syntaxhighlight>

[[Kategorie:FHEM Tablet UI|Label]]

FHEM Tablet UI

2018-10-28T14:21:14Z

Ulm32b: /* Integrierte Widgets */ Link auf Iframe

{{Infobox Modul
|ModPurpose=Oberfläche für FHEM
|ModType=x
|ModFTopic=34233
|ModForumArea=TabletUI
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
[[FHEM Tablet UI]] (FTUI) ist ein leichtgewichtiges aber funktionsreiches Frontend-Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Es basiert auf HTML/CSS/JavaScript und stellt somit keine zusätzlichen Anforderungen an den FHEM-Server.

Mit Hilfe zahlreicher Widgets, die sehr leicht mit HTML Code konfiguriert werden können, ist es möglich, innerhalb kurzer Zeit ein den eigenen Wünschen entsprechendes User-Interface aufzubauen.

Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.

Mit wenigen Anpassungen ist es auch möglich, das UI auf anderen Webservern (Apache, u.a.) zu betreiben. Somit können FHEM und FHEM Tablet UI auch auf getrennten Systemen ausgeführt werden.

[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]

{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}}

== Installation ==
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:
*Dateien aus dem GitHub-Repository herunterladen
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)
*Eine Beispieldatei anlegen

{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}

'''1.''' Zuerst müssen alle Dateien von FHEM Tablet UI in das FHEM-Verzeichnis '''/opt/fhem/www''' kopiert werden. Das geht mit folgendem '''update'''-Befehl über die FHEM-Befehlszeile.
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>

:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]

'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code>

:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]

{{Hinweis|Dieser Schritt kann ausgelassen werden, wenn die Funktionalitäten von [[FHEMWEB]] ausreichend sind. Dann muss FTUI aber in weiterer Folge unter der URL '''<nowiki>http(s)://<fhem-server>:8083/fhem/tablet/index.html</nowiki>''' aufgerufen werden und es wird kein Link auf FTUI in der FHEM GUI erstellt. Vorteil ist aber, dass das FHEMWEB-Caching verwendet werden kann. Siehe dieser {{Link2Forum|Topic=86362|Message=788258}}.}}

'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.

:<code>attr WEB longpoll websocket</code>
:bzw. bei Problemen mit ''websocket''
:<code>attr WEB longpoll 1</code>

:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]

'''4.''' Weil FTUI noch nichts anzuzeigen hat, wird die Datei '''/opt/fhem/www/tablet/index-example.html''' nach '''/opt/fhem/www/tablet/index.html''' kopiert.
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code>

:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]

'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.

Somit ist FHEM Tablet UI bereit zur Verwendung und kann durch Aufruf der URL '''<nowiki>http://<fhem-server>:8083/fhem/ftui/</nowiki>''' oder den Link im FHEM-Menü geöffnet werden

== Update ==
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.

'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

'''2.''' Update der geänderten Dateien durch Eingabe von:
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Eine weitere Option ist das Hinzufügen des FTUI-Git-Repositories zum allgemeinem Update-Vorgang von FHEM. Dabei wird dann bei einem FHEM-Update auch gleich FHEM Tablet UI aktualisiert, bzw. die Änderungen angezeigt.
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Beachte: Das Ergebnis des o.g. Befehls wird in FHEM/controls.txt eingetragen, siehe auch [[Update#update_add]]

== Konfiguration ==
===DOCTYPE===
In allen HTML-Dateien, die im Browser geladen werden und das typische HTML-Gerüst besitzen (also alle Hauptseiten, jedoch keine Template-Dateien), sollte eine ''Document Type Declaration'' (DTDT) eingefügt werden. Mit ihr wird festgelegt, welche ''Document Type Definition'' hier verwendet wird (das kommt aus der Metasprache XML), konkret also, in welcher Version der nachfolgende HTML-Code vom Browser interpretiert werden soll. Lässt man die DTDT weg, oder definiert sie auf verschiedenen Seiten unterschiedlich, kann ein und der selbe HTML-Code zu unterschiedlichen Darstellungen führen. Die DTDT erfolgt immer auf der ersten Zeile, noch vor dem <code><html></code>-Tag. Nachfolgend wird HTML5 verwendet.

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
</syntaxhighlight>

===META-Parameter===
Das Tablet UI lässt sich über die META-Parameter konfigurieren. Diese Parameter sind in jeder '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>''' einzutragen. Ausgenommen davon sind Dateien, die als Template, Pagebutton-Zielseiten oder ähnliches eingebunden werden.

Die Parameter sind immer nach diesem Schema aufgebaut:
<meta name="[Parameter-Name]" content="[Parameter-Wert]">

===Verbindung zu FHEM===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird
|-
|longpoll||1||0, 1||
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)

'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.
|-
|longpoll_type||websocket||websocket, ajax, 0||
'''websocket''': Für die Aktualisierung der Daten wird das Websocket-Protokoll verwendet. Werden vom Browser keine Websockets unterstützt, gibt es einen automatischen Fallback auf Ajax.

'''ajax''': Ajax wird für die Aktualisierung verwendet.

'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.
|-
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.
|-
|longpoll_maxage||240||Integer||Kommen in diesem Zeitraum (Sekunden) keine Longpoll-Events bei FTUI an, wird die Verbindung als "disconnected" angesehen und ein neuer Verbindungsversuch wird gestartet.
|-
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet
|-
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein
|-
|fhemweb_url||/fhem/||Integer||URL zu FHEM. Wird benötigt wenn FTUI auf einem anderen als dem FHEM Server läuft oder nicht im Standard-Pfad installiert ist.
Hinweis: Wenn FHEM auf einem anderem Server/Domain läuft muss man das "CORS" Attribut im FHEMWEB Modul (s.o.) auf 1 setzen, sonst bekommt man Cross Origin Fehler.
|}

===Funktionalität===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|debug||0||0 - 5||Log-Level
|-
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.
|-
|toast_position||bottom-left||||Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.
|-
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)
|-
|username||||String||Benutzername für eine Basic-Authentifierung *
|-
|password||||String||Passwort für eine Basic-Authentifizierung *
|}
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.

===Toast-Nachrichten===
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]
Tablet-UI liefert Informationen darüber, was im Moment gerade passiert. Das geschieht über Toast-Nachrichten, die in der Standardeinstellung unten links im Browser auftauchen.

Wird beispielsweise ein Gerät eingeschaltet, so erscheint eine kleine Nachricht mit dem abgesetzten Befehl. Auch Fehlermeldungen und Statusinformationen werden angezeigt. Ob überhaupt und was konkret angezeigt wird, richtet sich nach dem eingestellten Debug-Level (siehe oben). Beim Debug-Level 5 werden alle Nachrichten angezeigt, bei 0 keine.

Die Position der Toast-Nachrichten kann über den Meta-Tag <code>meta name='toast_position'</code> festgelegt werden. Für oben-mittig müsste folgender Code eingefügt werden:
<pre><meta name='toast_position' content='top-center'></pre>

Möglich sind folgende Positionen:
* <code>top-left</code>
* <code>top-right</code>
* <code>bottom-left</code>
* <code>bottom-right</code>
* <code>top-center</code>
* <code>bottom-center</code>
* <code>mid-center</code>

Die maximale Anzahl an Nachrichten, die gleichzeitig angezeigt werden können, lässt sich mit <code>meta name='toast'</code> Sind maximal 2 Nachrichten gewünscht, muss folgender Meta-Tag gesetzt werden:
<pre><meta name='toast' content='2'></pre>

==Navigationsmethoden==
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}}

'''Unterschied zwischen Pagetab und Pagebutton:

'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite
[[FTUI_Widget_Pagetab]]

'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite
[[FTUI_Widget_Pagebutton]]

==Gestaltung==
===Layout-Optionen===
* [[FTUI Layout Gridster|Gridster]]
* [[FTUI Layout Flex|Flex]]
* [[FTUI Layout Sheet|Tabelle]]
* [[FTUI Layout Row|Reihen]]

=== Farben ===
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel:

*HEX: #ADD8E6
*RBG: rgb(173, 216, 230)
*Namen: lightblue

Knallige Farben wie '''<span style="color: #ff0000;">#ff0000</span>''' für Rot oder '''<span style="color: #00ff00;">#00ff00</span>''' für Grün sollten vermieden werden.
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.

Empfohlene Farben sind z.B.:

*Orange: <span style="color: #aa6900;">#aa6900</span>
*Rot: <span style="color: #ad3333;">#ad3333</span>
*Grün: <span style="color: #32a054;">#32a054</span>
*Blau: <span style="color: #6699FF;">#6699FF</span>
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span>

Hilfreich bei der Suche nach den Farbwerten ist zum Beispiel der Color-Picker auf dieser Seite: http://www.colorpicker.com. Für die Suche nach Farben, die einen guten Kontrast bilden, diese Webseite: http://vanisoft.pl/~lopuszanski/public/colors/

Im Ordner ''css'' der FTUI Installation finden sich einige vorbereitete Farbschemata. Diese können mit einem zusätzlichen Eintrag im <nowiki><head></nowiki>-Bereich der FTUI-Seite(n) aktiviert werden.

Hier am Beispiel eines blauen Farbschemas:
<syntaxhighlight lang="html">
<html>
<head>
[...]
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" />
[...]
</head>
</syntaxhighlight>

Diese Schema-Dateien ändern alle Widgets.
<gallery>
File:Theme_default.png|default
File:Theme_blue.png|fhem-blue-ui.css
File:Theme_green.png|fhem-green-ui.css
File:Theme_mobile.png|fhem-mobile-ui.css
File:Theme_darkblue.png|fhem-darkblue-ui.css
File:Theme_darkgreen.png|fhem-darkgreen-ui.css
</gallery>

Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.

===CSS-Styles===
Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt [[#CSS-Klassen|CSS-Klassen]] aufgeführt.

Soll das Aussehen des UI durch eigene CSS-Klassen oder durch Überschreiben der vorhandenen verändert werden, kann eine eigene CSS-Datei erstellt werden, die dann bei einem eventuellen Update von FTUI nicht überschrieben wird. Diese Datei muss den Dateinamen '''fhem-tablet-ui-user.css''' haben und im Ordner '''/fhem/tablet/css''' abgelegt werden. Sie wird dann beim Aufruf von FTUI automatisch mitgeladen.

=== CSS-Klassen ===
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|sheet}}{{FTUI Klasse|row}}{{FTUI Klasse|cell}}{{FTUI Klasse|cell-1-x}}{{FTUI Klasse|cell-x}}{{FTUI Klasse|left-align}}{{FTUI Klasse|right-align}}{{FTUI Klasse|bottom-align}}{{FTUI Klasse|top-align}}{{FTUI Klasse|center-align}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|row/col-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|hbox/vbox-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|vbox}}{{FTUI Klasse|hbox}}{{FTUI Klasse|card}}{{FTUI Klasse|phone-width}}{{FTUI Klasse|full-height}}{{FTUI Klasse|full-width}}{{FTUI Klasse|grow-0}}{{FTUI Klasse|grow-1}}{{FTUI Klasse|grow-2}}{{FTUI Klasse|grow-x}}{{FTUI Klasse|items-top}}{{FTUI Klasse|items-center}}{{FTUI Klasse|items-bottom}}{{FTUI Klasse|items-space-between}}{{FTUI Klasse|items-space-around}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|inline}}{{FTUI Klasse|newline}}{{FTUI Klasse|top-space}}{{FTUI Klasse|top-space-2x}}{{FTUI Klasse|top-space-3x}}{{FTUI Klasse|left-space}}{{FTUI Klasse|left-space-2x}}{{FTUI Klasse|left-space-3x}}{{FTUI Klasse|right-space}}{{FTUI Klasse|right-space-2x}}{{FTUI Klasse|right-space-3x}}{{FTUI Klasse|top-narrow}}{{FTUI Klasse|top-narrow-2x}}{{FTUI Klasse|top-narrow-10}}{{FTUI Klasse|left-narrow}}{{FTUI Klasse|left-narrow-2x}}{{FTUI Klasse|left-narrow-3x}}{{FTUI Klasse|right-narrow}}{{FTUI Klasse|right-narrow-2x}}{{FTUI Klasse|right-narrow-3x}}{{FTUI Klasse|centered}}{{FTUI Klasse|wider}}{{FTUI Klasse|narrow}}{{FTUI Klasse|fullsize}}{{FTUI Klasse|compressed}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|maxw40}}{{FTUI Klasse|doublebox-v}}{{FTUI Klasse|doublebox-h}}{{FTUI Klasse|triplebox-v}}{{FTUI Klasse|right}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Vordergrundfarben
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|lightblue}}{{FTUI Klasse|orange}}{{FTUI Klasse|gray}}{{FTUI Klasse|lightgray}}{{FTUI Klasse|white}}{{FTUI Klasse|black}}{{FTUI Klasse|mint}}{{FTUI Klasse|yellow}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Hintergrundfarben
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|bg-red}}{{FTUI Klasse|bg-green}}{{FTUI Klasse|bg-blue}}{{FTUI Klasse|bg-lightblue}}{{FTUI Klasse|bg-orange}}{{FTUI Klasse|bg-gray}}{{FTUI Klasse|bg-lightgray}}{{FTUI Klasse|bg-white}}{{FTUI Klasse|bg-black}}{{FTUI Klasse|bg-mint}}{{FTUI Klasse|bg-yellow}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Rahmen
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|verticalLine}}{{FTUI Klasse|border-black}}{{FTUI Klasse|border-white}}{{FTUI Klasse|border-orange}}{{FTUI Klasse|border-red}}{{FTUI Klasse|border-green}}{{FTUI Klasse|border-mint}}{{FTUI Klasse|border-lightblue}}{{FTUI Klasse|border-blue}}{{FTUI Klasse|border-gray}}{{FTUI Klasse|border-yellow}}{{FTUI Klasse|border-lightgray}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Größen
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|mini}}{{FTUI Klasse|tiny}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|tall}}{{FTUI Klasse|great}}{{FTUI Klasse|grande}}{{FTUI Klasse|gigantic}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Schriftstil
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Sonstiges
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|blank}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}{{FTUI Klasse|fail-shake}}{{FTUI Klasse|marquee}}{{FTUI Klasse|icon round}}{{FTUI Klasse|icon square}}{{FTUI Klasse|readonly}}{{FTUI Klasse|blink}}{{FTUI Klasse|rotate-90}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|autohide}}{{FTUI Klasse|notransmit}}{{FTUI Klasse|tap}}{{FTUI Klasse|FS20}}{{FTUI Klasse|value}}{{FTUI Klasse|novalue}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|percent}}{{FTUI Klasse|nocache}}{{FTUI Klasse|fade}}{{FTUI Klasse|rotate}}{{FTUI Klasse|nolabels}}{{FTUI Klasse|default}}{{FTUI Klasse|prefetch}}{{FTUI Klasse|circulate}}{{FTUI Klasse|valueonly}}{{FTUI Klasse|positiononly}}{{FTUI Klasse|lineIndicator}}{{FTUI Klasse|barIndicator}}{{FTUI Klasse|roundIndicator}}{{FTUI Klasse|dim-tick}}{{FTUI Klasse|dim-front}}{{FTUI Klasse|dim-back}}{{FTUI Klasse|hue-tick}}{{FTUI Klasse|hue-front}}{{FTUI Klasse|hue-back}}{{FTUI Klasse|warn}}{{FTUI Klasse|activate}}{{FTUI Klasse|labelright}}{{FTUI Klasse|interlock}}{{FTUI Klasse|keepopen}}{{FTUI Klasse|noshade}}
|}

=== Überlagerung von Text und Bild ===
[[Datei:FTUI_Text_auf_Bild.png||thumb|right]]
Texte können auf Bildern positioniert werden:
<syntaxhighlight lang="html5">
<li data-row="1" data-col="4" data-sizey="4" data-sizex="6">
<div class="display">
<div data-type="image" data-url="https://picsum.photos/200/125/?random" data-size="100%"></div>
<div class="display-center bigger" data-type="label">Text1</div>
<div class="display-topright bigger right-space top-space" data-type="label">Text2</div>
<div class="ontop bigger" style="left: 120px; top: 50px">Text3</div>
</div>
</li>
</syntaxhighlight>

Zur Verfügung stehen folgende Grundpositionen:
* <code>display-topleft</code>
* <code>display-topcenter</code>
* <code>display-topright</code>
* <code>display-centerleft</code>
* <code>display-left</code>
* <code>display-centerright</code>
* <code>display-right</code>
* <code>display-bottomleft</code>
* <code>display-bottomcenter</code>
* <code>display-bottomright</code>

Feinjustage ist möglich über

* <code>right-space</code>
* <code>top-space</code>
* <code>left-space</code>
* <code>bottom-space</code>
* <code>right-space-2</code>
* <code>top-space-2</code>
* <code>left-space-2</code>
* <code>bottom-space-2</code>
* <code>right-space-3</code>
* <code>top-space-3</code>
* <code>left-space-3</code>
* <code>bottom-space-3</code>

[[Datei:FTUI_Beispiel_Positionierung.png|200px|thumb|right]]
Verallgemeinert lassen sich auf diese Weise '''Objekte frei im Elternelement positionieren''':
<syntaxhighlight lang="html5">
<div class="display" data-type="html">
<div class="display-topcenter top-space big">Fenster</div>
<div class="display-center fa fa-4x ftui-window"></div>
<div class="display-bottomleft bottom-space left-space" data-type="label">Text</div>
</div>
</syntaxhighlight>
=== Icons ===
FTUI bringt einige Icons-"Schriftarten" mit, die für die Darstellung genützt werden können. Diese werden automatisch beim Start des UI eingebunden, sobald ein entsprechendes Icon-Präfix im Code der Seite vorkommt.

Verfügbare Icon-Schriftarten sind:
* Eingebaute Icons ''ftui-window'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code>
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code>
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code>
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code>
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi '''. Beispiel: <code>data-icon="wi wi-day-rain-mix"</code>

Alternativ können auch Bilder Icons (bspw. png) über CSS verwendet werden. Bspw:
<syntaxhighlight lang="html5">
<head>
<style type="text/css">
.logo-fhem {
background: url(https://wiki.fhem.de/fhemlogo.png) no-repeat;
width: 120px;
height: 132px;
background-size: contain;
}
</style>
</head>
<body>
<div data-type="symbol" data-icon="logo-fhem"></div>
</body>
</syntaxhighlight>

== Widgets ==
===Allgemeine Attribute===
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:

{| class="wikitable"
|+allgemeine Attribute
|-
!align="right" |data-type
|Widget-Typ
|-
!align="right" |data-device
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)
|-
!align="right" |class
|CSS-Klassen für Aussehen und Formatierung des Widgets
|-
|}

{| class="wikitable"
|+Daten Empfangen
|-
!align="right" |data-get
|Reading Name
|-
!align="right" |data-get-on
|Wert für den Status on
|-
!align="right" |data-get-off
|Wert für den Status off
|-
|}

{| class="wikitable"
|+Daten Senden
|-
!align="right" |data-set
|Reading Name
|-
!align="right" |data-set-on
|Wert für den Status on
|-
!align="right" |data-set-off
|Wert für den Status off
|-
|}

Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.

=== Integrierte Widgets ===
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.

* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen
* [[FTUI Widget Circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
* [[FTUI Widget Clock|clock]]: Stellt eine einfache Uhr zur Verfügung
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben
* [[FTUI Widget Controlbutton|controlbutton]]: iOS-ähnlicher Button zum Schalten zwischen zwei Zuständen (z.B. on / off)
* [[FTUI Widget Controller|controller]]: iOS-ähnlicher vertikaler Schieberegler zum Einstellen eines Wertes
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert
* [[FTUI Widget Eventmonitor|eventmonitor]]:
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)
* [[FTUI Widget Html|html]]:
* [[FTUI Widget Iframe|iframe]]: Widget zum Einbinden externer Inhalte in einem Iframe
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn
* [[FTUI Widget Label|label]]: Reading als Text anzeigen
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM
* [[FTUI Widget Medialist|medialist]]:
* [[FTUI Widget Multistatebutton|multistatebutton]]: Variante des push-Widgets, welches den set-Befehl abhängig vom gelesenen Status ändert
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste
* [[FTUI_Widget_Push|push]]: Button, mit dem ein Befehl an FHEM gesendet werden kann
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position
* [[FTUI Widget Scale|scale]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird
* [[FTUI Widget Slideout|slideout]]:
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler zum Einstellen eines Wertes
* [[FTUI Widget Spinner|spinner]]: Element, um Werte durch Drücken auf Plus-/Minus- oder Höher-/Tiefer-Icons zu ändern
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen zwischen verschiedenen Seiten zu wechseln
* [[FTUI Widget Switch|switch]]: Button, um zwischen zwei Zuständen zu schalten (z.B. on / off)
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)
* [[FTUI Widget Theme|theme]]: Kontextspezifisches Design
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen
* [[FTUI Widget Weatherdetail|weatherdetail]]: Detaillierte Wettervorhersage über 4 Tage (Nutzt das Proplanta Modul)
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose

===3rd Party Widgets===
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an
* [[FTUI_Widget_Analogclock|analogclock]]: Analoguhr
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [[FTUI Widget Filelog|filelog]]:
* [[FTUI Widget Fullcalview|fullcalview]]:
* [[FTUI Widget Gds|gds]]:
* [[FTUI Widget Maps|maps]]: Kartendarstellung mit Google Maps API
* [[FTUI Widget Highchart|highchart]]:
* [[FTUI Widget Highchart3d|highchart3d]]:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* [[FTUI Widget Loading|loading]]:
* [[FTUI Widget Meteogram|meteogram]]:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
* [https://forum.fhem.de/index.php/topic,79283.msg712855.html#msg712855 pinpad]: Pinpad für z.B. eine Alarmanlage
* [https://forum.fhem.de/index.php/topic,76643.msg685472.html#msg685472 postme]: Liste des PostMe-Devices anzeigen
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads
* [[FTUI Widget Screensaver|screensaver]]:
* [https://forum.fhem.de/index.php/topic,73497.0.html scrolllabel]: Texte in Laufschrift darstellen
* [[FTUI Widget Svgplot|svgplot]]:
* [https://forum.fhem.de/index.php?topic=82883.msg750237#msg750237 todoist]: einfaches widget für todoist
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.
* [[FTUI Widget UWZ|uwz]]: Anzeige der Warnungen der Unwetterzentrale
* [[FTUI Widget Wakeup|wakeup]]:
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul
* [[FTUI Widget Weekprofile|weekprofile]]: Visualisierung des [[weekprofile]] Moduls

===Anwendungsbeispiele===
Durch die Verbindung von Widgets mit dem FHEM-Umfeld entstehen Lösungen für typische Anwendungen.
* [[FTUI_Beispiel_Datetimepicker_für_Timer|Datetimepicker für Timer]]: Oberfläche für Timereinstellungen
* [[FTUI_Beispiel_Mondphase|Mondphase]]: Visuelle Darstellung der Mondphase
* [[FTUI_Beispiel_Webradio|Webradio]]
* [[FTUI Beispiel Zeitschaltung|Verschiedene Zeitschaltungen]]

==Templates==
Kommt ein bestimmtes "Code-Fragment" auf mehreren Seiten oder öfter pro Seite vor, bietet FTUI die Option, Templates zu erstellen. Diese werden einmal gebaut und können dann mit dem Attribut '''data-template''' nach Belieben in eine Seite eingefügt werden. Dabei besteht auch die Möglichkeit, Variablen zu verwenden.

Die Variablennamen sollten möglichst eindeutig und unverwechselbar gewählt werden, da bei der Verwendung von Templates im Prinzip Suchen & Ersetzen angewendet wird. Verwendet man beispielsweise die Variablen '''dev:Thermostat_Kueche''' und '''dev_temp:temperatue''', so kann es passieren, dass die Ergebnisse im erzeugten Code dann '''Thermostat_Kueche''' und '''Thermostat_Kueche_temp''' lauten, statt wie gewünscht '''Thermostat_Kueche''' und '''temperature'''. Um dies zu vermeiden, sollten die Variablen besser '''device:Thermostat_Kueche''' und '''temp:temperatue''' lauten.

Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.

===Einzelnes Widget===
Soll ein Widget an mehreren Stellen in exakt der selben Ausführung eingebunden werden, kann diese Widget in einer eigenen Datei erstellt und diese dann auf den Zielseiten automatisch mitgeladen werden.

;Template-Seite
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.
<syntaxhighlight lang="html">
<div data-type="symbol"
data-device="dummy1">
</syntaxhighlight>

;Haupt-Seite
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.
<syntaxhighlight lang="html" highlight="6">
[...]
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1">
<div data-template="template_symbol.html"></div>
</li>
</ul>
</div>
</body>
[...]
</syntaxhighlight>

===Gridster-Element===
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li>
</syntaxhighlight>

=== Widget-Gruppen ===
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.

=== Verwendung von Variablen ===
==== Einfaches Beispiel ====
Oft wird ein und dasselbe Widget für verschiedenen Devices verwendet. Um nicht für jedes Device das Widget neu kopieren zu müssen (bzw. bei Änderungen alle Seiten ausbessern zu müssen), kann ein Template verwendet werden, dem einfach per Parameter mitgeteilt wird, von welchem Device es gerade die Daten empfangen soll.

In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.

;Template-Seite
Die Template-Seite enthält nur ein einfaches Label-Widget und wird in diesem Beispiel ''template_label.html'' genannt. Um sie für mehrere Devices verwenden zu können, wird im Attribut '''data-device''' der Name des eigentlichen Devices durch den Parameter '''par01''' ersetzt.
<syntaxhighlight lang="html" highlight="2">
<div data-type="label"
data-device="par01"
data-get="measured-temp"></div>
</syntaxhighlight>

;Haupt-Seite
Auf der Haupt-Seite wird die Template-Seite mit dem Attribut '''data-template''' eingebunden und ihr via Attribut '''data-parameter''' das jeweils gewünschte Device übergeben.
<syntaxhighlight lang="html">
[...]
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div>
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div>
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div>
[...]
</syntaxhighlight>

==== Wetter-Slider mit Template ====
In diesem Beispiel wird ein [[FTUI Widget Slider|Slider-Widget]] erstellt, welches die verschiedenen Tage eines Wetterberichtes anzeigt. Dabei wird für den Wetterbericht des jeweiligen Tages immer dasselbe Template verwendet um nicht für jeden Tag ein eigenes Widget schreiben zu müssen.

;Template-Seite
<syntaxhighlight lang="html">
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="°C"></div>
<div class="inline">
<div data-type="label" data-device="AgroWeather" data-get="par02"></div>
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div>
min: <div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="°C"></div>
</div>
</div>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div>
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div>
</div>
</syntaxhighlight>

;Haupt-Seite
In der Haupt-Seite wird das Template dann für jede Slider-Seite eingebunden und das Reading für den jeweiligen Tag via Parameter übergeben.
<syntaxhighlight lang="html">
[...]
<div data-type="swiper">
<ul>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li>
</ul>
</div>
[...]
</syntaxhighlight>

== JavaScript-Funktionen ==
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.

Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></syntaxhighlight>

Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")}')">+</div></syntaxhighlight>

Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:
<syntaxhighlight lang="html">
<div data-type="label" data-device="dummy1" data-get="temperature"></div>
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div>
</syntaxhighlight>

== Eigene Widgets erstellen ==
Wie eigenen Widgets für FTUI erstellt werden können, ist auf der Seite [[FTUI eigene Widgets]] beschrieben.

Eine Schritt für Schritt Anleitung für das erste eigene Widget gibts hier [[FTUI eigene Widgets - Beispiel]]

== FAQ ==
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.

== Links ==
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}
* [[FTUI_Snippets|Snippets]]
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]
* [https://waschto.eu/fhem-und-tabletui-livedemo/ FHEM und TabletUI Live-Demo]
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]

[[Kategorie:FHEM Tablet UI|!]]

FTUI Widget Iframe

2018-10-28T14:15:54Z

Ulm32b: Erste Version

Das [[{{PAGENAME}}|Iframe Widget]] ist ein Widget für FHEM Tablet UI, welches ein externes HTML-Dokument innerhalb des Body-Elementes einfügt.
{{Hinweis|Es wird nicht mehr gepflegt und weiterentwickelt, erweist sich gleichwohl als nach wie vor nützlich. Die Dokumentation ist unter Links verknüpft. Man beachte gewisse Unterschiede zu sonst in FTUI üblichen Standards.}}
In der verknüpften Dokumentation nicht ausgewiesen ist die bedeutsame Möglichkeit, die aufzurufende '''URL über ein Device''' zu '''beziehen''', sofern das Reading die Protokoll-Angabe enthält, z.B. <code>http://www.heise.de</code>
<syntaxhighlight lang="html">
<div data-type="iframe" data-device="urlDevice" data-url="urlReading"></div>
</syntaxhighlight>

Externe Inhalte können auch ohne dieses Widget, direkt über HTML eingebunden werden:
<syntaxhighlight lang="html">
<iframe src="http://reiseauskunft.bahn.de/bin/bhftafel.exe/dn?ld=15055&country=DEU&rt=1&input=K%F6ln%20Hbf%238000207&boardType=dep&time=actual&productsFilter=11&start=yes&" width="1000" height="658"></iframe>
</syntaxhighlight>
==Links==
[https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe Dokumentation]

[[Kategorie:FHEM Tablet UI|Iframe]]

FTUI Widget Label

2018-10-28T13:17:54Z

Ulm32b: /* Hinweise */ data-substitution="toString().toHoursFromMin" ergänzt

Das [[{{PAGENAME}}|Label Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Reading eines FHEM-Devices in Textform angezeigt werden kann.

<gallery>
File:FTUI_Widget_Label_01.png
File:FTUI_Widget_Label_02.png
File:FTUI_Widget_Label_03.png
File:FTUI_Widget_Label_04.png
File:FTUI_Widget_Label_05.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-get'''||Name des Readings, dessen Wert angezeigt werden soll||||data-get="measured-temp"
|-
|'''data-part'''||[[Regulärer Ausdruck|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll||||
|-
|'''data-fix'''||Angegebene Anzahl an Dezimalstellen einhalten||(-1 -> nicht numerisch)||
|-
|'''data-color'''||Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe||||data-color="red"
|-
|'''data-colors'''||Ein Array von Farben. Welche Farbe für das Label verwendet wird, wird durch das ''data-limits''-Attribut bestimmt||||data-colors='["red","yellow","green"]'
|-
|'''data-classes'''||Ein Array von CSS-Klassen. Welche Klasse verwendet wird, hängt vom zutreffenden Wert im ''data-limits''-Attribut ab||||data-classes='["bg-red","bg-yellow","bg-green"]'
|-
|'''data-limits'''||Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert||||data-limits='[1,15,30]'
|-
|'''data-limits-get'''||Name des Readings, von dem die Werte für den Vergleich mit dem data-limits-Array geholt werden||data-get||data-limit-get="Dummy01:Limits"
|-
|'''data-limits-part'''||Filtern nach Wert, Position eines Wertes in einer Leerzeichen-getrennte Liste oder RegEx||'-1' -> alle||
|-
|'''data-unit'''||Einheit nach Zahl hinzufügen||||data-unit="%B0C%0A"
|-
|'''data-substitution'''||Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen||||siehe [[#Hinweise]]
|-
|'''data-pre-text'''||Text, der vor dem empfangenen Wert stehen soll||||data-pre-text="Es ist "
|-
|'''data-post-text'''||Text, der nach dem empfangenen Wert sehen soll||||data-post-text=" Grad warm"
|-
|'''data-hide'''||Name des Readings, nach dessen Wert das Widget angezeigt werden soll oder nicht||STATE||data-hide="power-on"
|-
|'''data-hide-on'''||Wert, bei dem das Widget versteckt wird||true,1,on||data-hide-on="on"
|-
|'''data-hide-off'''||Wert, bei dem das Widget angezeigt wird||!on||data-hide-off="!on"
|-
|'''data-hideparents'''||jQuery-Selector, um auch die Eltern-Elemente zu verstecken||||data-hideparents="#Name"
|-
|'''data-refresh'''||Anzahl Sekunden, nach denen das Widget aktualisiert werden soll||0 -> kein Auto-Refresh||data-refresh="10"
|}

==CSS Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|small}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|orange}}{{FTUI Klasse|darker}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|squareborder}}{{FTUI Klasse|bg-limit}}{{FTUI Klasse|icon square}}{{FTUI Klasse|icon round}}{{FTUI Klasse|truncate}}{{FTUI Klasse|fixedlabel}}
|}

==Hinweise==
* Es kann nur entweder ''data-color'' verwendet werden, oder ''data-colors'' + ''data-limits'', nicht beides gleichzeitig
* Mit der Klasse ''bg-limit'' wird die Hintergrund- statt der Vordergrundfarbe abhängig von den Werten in ''data-limits'' geändert
* Die Klassen ''icon square'' und ''icon round'' formatieren das Label mit einer fixen Breite und Höhe im Icon-Stil
* Wird die Klasse ''timestamp'' zusammen mit ''data-substitution="toDate().ago()"'' verwendet, sollte eine automatische Aktualisierung (''data-refresh="xx"'') eingestellt werden für den Fall, dass die Aktualisierungsrate des Readings zu gering ist.
* Ein benutzerdefiniertes Layout kann durch Hinzufügen der folgenden Klassen in die fhem-tablet-ui-user.css erreicht werden:
** .label-precomma
** .label-comma
** .label-aftercomma
** .label-unit
** z.B.: <code>.label-aftercomma{ font-size:40%; left: 4px; top: -25px; position: relative; }</code>
* Bis zur Version 2.6.2 wurde data-unit mit 50% Schriftgröße auf der Baseline des Wertes positioniert, danach wird die Unit auf superscript angehoben. Dies kann mit einem Eintrag in fhem-tablet-ui-user.css wieder überschrieben werden.
** <Code>.label-unit{ font-size: 50%; vertical-align: baseline; }</code>
* Klasse ''fixedlabel'': Vgl. [https://forum.fhem.de/index.php/topic,84158.msg764301.html#msg764301]

;Statische Texte:
* Diese können ressourcenschonend direkt definiert werden; das Widget Label wird hierzu nicht benötigt. Vgl. auch das Beispiel ''Statisches Label mit Symbol'' (s.u.).
* <Code><nowiki><div>Text</div></nowiki></code>

;Funktionsweise(n) von ''data-substitution'':
* Ein Array an Ersetzungen: <code>data-substitution='["on","Lampe ist an","off","Lampe ist aus"]'</code>
* [[Regulärer Ausdruck|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code>
* <code>data-substitution="weekdayshort"</code>
* Datums-/Zeitumwandlungen:
** Tag:Monat: <code>data-substitution="toDate().ddmm()"</code>
** Stunden:Minuten: <code>data-substitution="toDate().hhmm()"</code>
** Stunden:Minuten:Sekunden: <code>data-substitution="toDate().hhmmss()"</code>
** Minuten --> Stunden: <code>data-substitution="toString().toHoursFromMin()"</code>
** den Namen des Wochentages:
*** Montag, Dienstag, etc.: <code>data-substitution="toDate().eeee()"</code>
*** Mon, Die, etc.: <code>data-substitution="toDate().eee()"</code>
*** Mo, Di, etc.: <code>data-substitution="toDate().ee()"</code>
** einen Zeitraum (langes Format): <code>data-substitution="toDate().ago()"</code>
** einen Zeitraum (kurzes Format):<code>data-substitution="toDate().ago('hh:mm:ss')"</code>
** einen Zeitraum (Minuten ohne führende Nullen):<code>data-substitution="toDate().ago('m')"</code>
** 20:15 statt 20:15:00: <code>data-substitution="s/(:00)$//g"</code>

==Beispiele==
===Einfaches Auslesen des STATE eines Devices===
Ein ganz einfaches Beispiel, welches den ''STATE'' eines FHEM-Devices (in diesem Fall ein Heizkörperthermostat) ausliest und anzeigt.
<syntaxhighlight lang="html">
<div data-type="label" data-device="HM_367B39_Climate"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Label_01.png]]

===Anzeige bestimmter Werte eines Devices===
In diesem Beispiel werden Temperatur und Luftfeuchtigkeit eines Heizkörperthermostates ausgelesen und untereinander angezeigt.
<syntaxhighlight lang="html">
<div>Temperatur</div>
<div data-type="label"
data-device="HM_367B21_Climate"
data-get="measured-temp"
data-unit="°C"></div>

<div>Luftfeuchte</div>
<div data-type="label"
data-device="HM_367B21_Climate"
data-get="humidity"
data-unit="%"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Label_02.png]]

===Textfarbe bei bestimmten Grenzwerten ändern===
Mit dem Label-Widget kann die Textfarbe je nach bestimmten Grenzwerten geändert werden. In diesem Beispiel ist die Farbe blau, sobald die Temperatur gleich oder kleiner 18° ist, grün ab 20° und rot ab 23°.
<syntaxhighlight lang="html">
<div data-type="label"
data-device="dDummy"
data-limits='[18,20,23]'
data-colors='["blue","green","#FF0000"]'
data-unit="°C"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Label_03.png]]
[[Kategorie:FHEM Tablet UI]]

===Zwei Labels in einer Textzeile===
Mit der Klasse ''inline'' (kein Zeilenumbruch) können mehrere Label-Widgets in der selben Textzeile platziert werden.
<syntaxhighlight lang="html">
<div>
<div data-type="label" data-device="dDummy" class="inline"></div> bis
<div data-type="label" data-device="dDummy2" class="inline"></div>
</div>
</syntaxhighlight>
[[File:FTUI_Widget_Label_04.png]]

===Kombination von Label- mit anderen Widgets===
Das Label-Widget kann sehr gut verwendet werden, um einen Beschreibungstext für andere Widgets bereitzustellen.
<syntaxhighlight lang="html">
<div data-type="switch" data-device="EnO_0193F070" data-icon="mi-power_settings_new"></div>
<div data-type="label">Nexus7</div>
(<div data-type="label" data-device="Nexus7" data-get="powerLevel"></div>%)
</syntaxhighlight>
[[File:FTUI_Widget_Label_05.png]]

===Statisches Label mit Symbol===
Möchte man einen statischen Text darstellen, muss hierfür nicht unbedingt das Label-Widget verwendet werden. Das nachfolgende Beispiel zeigt genau dies und fügt links noch ein Symbol ein. Der Teil für das Symbol kann auch für richtige Labels verwendet werden.
<syntaxhighlight lang="html">
<i class="fa fa-cloud fa-2x inline"></i><div class="inline big">WETTER</div>
</syntaxhighlight>
[[File:FTUI_Widget_label_symbol.png]]

===Label- und Symbol-Widget kombiniert===
Dieses Beispiel zeigt, wie man ein Label- innerhalb eines [[FTUI Widget Symbol|Symbol]]-Widgets anzeigen kann. Dazu wird einfach das Label-Widget im <DIV>-Container des Symbols platziert.
<syntaxhighlight lang="html">
<div>
<div data-type="symbol"
data-device="dDummy3"
data-icon="none"
data-color='none'
data-background-icon="fa-circle"
data-background-colors='["red","blue"]'
data-limits='["0","1"]'>
<div data-type="label"
data-device="dDummy3"
data-color="white"></div>
</div>
</div>
</syntaxhighlight>
[[File:FTUI_Widget_Label_06.png]]

===Unterdrücken der Anzeige===
Die Argumente für ''data-hide-on'' und ''data-hide-off'' sind reguläre Ausdrücke. Um die Anzeige zu aktivieren, wenn eine Bedingung nicht zutrifft, ist für ''data-hide-off'' ein Schema <code>(?!.*MUSTER).*</code> zu verwenden, resp. <code>(?!.*MUSTER1|MUSTER2).*</code>, wenn mehrere Bedinungen zutreffen können; für ''data-hide-on'' entsprechend <code>MUSTER</code> resp. <code>MUSTER1|MUSTER2</code>.

Im folgenden Beispiel wird ein Eintrag eines [[CALVIEW|CALVIEW-Objekts]] ''Abfalldaten'' nur dann angezeigt, wenn er heute oder morgen aktuell ist, ausgeblendet wird die ganze Gruppe von Widgets über die ID des Elternelements:
<syntaxhighlight lang="html">
<div id="Abfall1">
<div class="inline"
data-type="label"
data-device="Abfalldaten"
data-get="t_001_bdate"
data-hide="t_001_daysleftLong"
data-hide-on="(?!.*heute|morgen).*"
data-hide-off="heute|morgen"
data-hideparents="#Abfall1">
</div>
<div class="inline"
data-type="label"
data-device="Abfalldaten"
data-get="t_001_summary">
</div>
</div>
</syntaxhighlight>

[[Kategorie:FHEM Tablet UI|Label]]

FHEM Tablet UI

2018-10-27T14:51:47Z

Ulm32b: Text auf Bild bzw. freie Positionierung

{{Infobox Modul
|ModPurpose=Oberfläche für FHEM
|ModType=x
|ModFTopic=34233
|ModForumArea=TabletUI
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
[[FHEM Tablet UI]] (FTUI) ist ein leichtgewichtiges aber funktionsreiches Frontend-Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Es basiert auf HTML/CSS/JavaScript und stellt somit keine zusätzlichen Anforderungen an den FHEM-Server.

Mit Hilfe zahlreicher Widgets, die sehr leicht mit HTML Code konfiguriert werden können, ist es möglich, innerhalb kurzer Zeit ein den eigenen Wünschen entsprechendes User-Interface aufzubauen.

Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.

Mit wenigen Anpassungen ist es auch möglich, das UI auf anderen Webservern (Apache, u.a.) zu betreiben. Somit können FHEM und FHEM Tablet UI auch auf getrennten Systemen ausgeführt werden.

[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]

{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}}

== Installation ==
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:
*Dateien aus dem GitHub-Repository herunterladen
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)
*Eine Beispieldatei anlegen

{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}

'''1.''' Zuerst müssen alle Dateien von FHEM Tablet UI in das FHEM-Verzeichnis '''/opt/fhem/www''' kopiert werden. Das geht mit folgendem '''update'''-Befehl über die FHEM-Befehlszeile.
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>

:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]

'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code>

:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]

{{Hinweis|Dieser Schritt kann ausgelassen werden, wenn die Funktionalitäten von [[FHEMWEB]] ausreichend sind. Dann muss FTUI aber in weiterer Folge unter der URL '''<nowiki>http(s)://<fhem-server>:8083/fhem/tablet/index.html</nowiki>''' aufgerufen werden und es wird kein Link auf FTUI in der FHEM GUI erstellt. Vorteil ist aber, dass das FHEMWEB-Caching verwendet werden kann. Siehe dieser {{Link2Forum|Topic=86362|Message=788258}}.}}

'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.

:<code>attr WEB longpoll websocket</code>
:bzw. bei Problemen mit ''websocket''
:<code>attr WEB longpoll 1</code>

:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]

'''4.''' Weil FTUI noch nichts anzuzeigen hat, wird die Datei '''/opt/fhem/www/tablet/index-example.html''' nach '''/opt/fhem/www/tablet/index.html''' kopiert.
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code>

:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]

'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.

Somit ist FHEM Tablet UI bereit zur Verwendung und kann durch Aufruf der URL '''<nowiki>http://<fhem-server>:8083/fhem/ftui/</nowiki>''' oder den Link im FHEM-Menü geöffnet werden

== Update ==
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.

'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

'''2.''' Update der geänderten Dateien durch Eingabe von:
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Eine weitere Option ist das Hinzufügen des FTUI-Git-Repositories zum allgemeinem Update-Vorgang von FHEM. Dabei wird dann bei einem FHEM-Update auch gleich FHEM Tablet UI aktualisiert, bzw. die Änderungen angezeigt.
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Beachte: Das Ergebnis des o.g. Befehls wird in FHEM/controls.txt eingetragen, siehe auch [[Update#update_add]]

== Konfiguration ==
===DOCTYPE===
In allen HTML-Dateien, die im Browser geladen werden und das typische HTML-Gerüst besitzen (also alle Hauptseiten, jedoch keine Template-Dateien), sollte eine ''Document Type Declaration'' (DTDT) eingefügt werden. Mit ihr wird festgelegt, welche ''Document Type Definition'' hier verwendet wird (das kommt aus der Metasprache XML), konkret also, in welcher Version der nachfolgende HTML-Code vom Browser interpretiert werden soll. Lässt man die DTDT weg, oder definiert sie auf verschiedenen Seiten unterschiedlich, kann ein und der selbe HTML-Code zu unterschiedlichen Darstellungen führen. Die DTDT erfolgt immer auf der ersten Zeile, noch vor dem <code><html></code>-Tag. Nachfolgend wird HTML5 verwendet.

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
</syntaxhighlight>

===META-Parameter===
Das Tablet UI lässt sich über die META-Parameter konfigurieren. Diese Parameter sind in jeder '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>''' einzutragen. Ausgenommen davon sind Dateien, die als Template, Pagebutton-Zielseiten oder ähnliches eingebunden werden.

Die Parameter sind immer nach diesem Schema aufgebaut:
<meta name="[Parameter-Name]" content="[Parameter-Wert]">

===Verbindung zu FHEM===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird
|-
|longpoll||1||0, 1||
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)

'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.
|-
|longpoll_type||websocket||websocket, ajax, 0||
'''websocket''': Für die Aktualisierung der Daten wird das Websocket-Protokoll verwendet. Werden vom Browser keine Websockets unterstützt, gibt es einen automatischen Fallback auf Ajax.

'''ajax''': Ajax wird für die Aktualisierung verwendet.

'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.
|-
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.
|-
|longpoll_maxage||240||Integer||Kommen in diesem Zeitraum (Sekunden) keine Longpoll-Events bei FTUI an, wird die Verbindung als "disconnected" angesehen und ein neuer Verbindungsversuch wird gestartet.
|-
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet
|-
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein
|-
|fhemweb_url||/fhem/||Integer||URL zu FHEM. Wird benötigt wenn FTUI auf einem anderen als dem FHEM Server läuft oder nicht im Standard-Pfad installiert ist.
Hinweis: Wenn FHEM auf einem anderem Server/Domain läuft muss man das "CORS" Attribut im FHEMWEB Modul (s.o.) auf 1 setzen, sonst bekommt man Cross Origin Fehler.
|}

===Funktionalität===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|debug||0||0 - 5||Log-Level
|-
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.
|-
|toast_position||bottom-left||||Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.
|-
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)
|-
|username||||String||Benutzername für eine Basic-Authentifierung *
|-
|password||||String||Passwort für eine Basic-Authentifizierung *
|}
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.

===Toast-Nachrichten===
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]
Tablet-UI liefert Informationen darüber, was im Moment gerade passiert. Das geschieht über Toast-Nachrichten, die in der Standardeinstellung unten links im Browser auftauchen.

Wird beispielsweise ein Gerät eingeschaltet, so erscheint eine kleine Nachricht mit dem abgesetzten Befehl. Auch Fehlermeldungen und Statusinformationen werden angezeigt. Ob überhaupt und was konkret angezeigt wird, richtet sich nach dem eingestellten Debug-Level (siehe oben). Beim Debug-Level 5 werden alle Nachrichten angezeigt, bei 0 keine.

Die Position der Toast-Nachrichten kann über den Meta-Tag <code>meta name='toast_position'</code> festgelegt werden. Für oben-mittig müsste folgender Code eingefügt werden:
<pre><meta name='toast_position' content='top-center'></pre>

Möglich sind folgende Positionen:
* <code>top-left</code>
* <code>top-right</code>
* <code>bottom-left</code>
* <code>bottom-right</code>
* <code>top-center</code>
* <code>bottom-center</code>
* <code>mid-center</code>

Die maximale Anzahl an Nachrichten, die gleichzeitig angezeigt werden können, lässt sich mit <code>meta name='toast'</code> Sind maximal 2 Nachrichten gewünscht, muss folgender Meta-Tag gesetzt werden:
<pre><meta name='toast' content='2'></pre>

==Navigationsmethoden==
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}}

'''Unterschied zwischen Pagetab und Pagebutton:

'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite
[[FTUI_Widget_Pagetab]]

'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite
[[FTUI_Widget_Pagebutton]]

==Gestaltung==
===Layout-Optionen===
* [[FTUI Layout Gridster|Gridster]]
* [[FTUI Layout Flex|Flex]]
* [[FTUI Layout Sheet|Tabelle]]
* [[FTUI Layout Row|Reihen]]

=== Farben ===
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel:

*HEX: #ADD8E6
*RBG: rgb(173, 216, 230)
*Namen: lightblue

Knallige Farben wie '''<span style="color: #ff0000;">#ff0000</span>''' für Rot oder '''<span style="color: #00ff00;">#00ff00</span>''' für Grün sollten vermieden werden.
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.

Empfohlene Farben sind z.B.:

*Orange: <span style="color: #aa6900;">#aa6900</span>
*Rot: <span style="color: #ad3333;">#ad3333</span>
*Grün: <span style="color: #32a054;">#32a054</span>
*Blau: <span style="color: #6699FF;">#6699FF</span>
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span>

Hilfreich bei der Suche nach den Farbwerten ist zum Beispiel der Color-Picker auf dieser Seite: http://www.colorpicker.com. Für die Suche nach Farben, die einen guten Kontrast bilden, diese Webseite: http://vanisoft.pl/~lopuszanski/public/colors/

Im Ordner ''css'' der FTUI Installation finden sich einige vorbereitete Farbschemata. Diese können mit einem zusätzlichen Eintrag im <nowiki><head></nowiki>-Bereich der FTUI-Seite(n) aktiviert werden.

Hier am Beispiel eines blauen Farbschemas:
<syntaxhighlight lang="html">
<html>
<head>
[...]
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" />
[...]
</head>
</syntaxhighlight>

Diese Schema-Dateien ändern alle Widgets.
<gallery>
File:Theme_default.png|default
File:Theme_blue.png|fhem-blue-ui.css
File:Theme_green.png|fhem-green-ui.css
File:Theme_mobile.png|fhem-mobile-ui.css
File:Theme_darkblue.png|fhem-darkblue-ui.css
File:Theme_darkgreen.png|fhem-darkgreen-ui.css
</gallery>

Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.

===CSS-Styles===
Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt [[#CSS-Klassen|CSS-Klassen]] aufgeführt.

Soll das Aussehen des UI durch eigene CSS-Klassen oder durch Überschreiben der vorhandenen verändert werden, kann eine eigene CSS-Datei erstellt werden, die dann bei einem eventuellen Update von FTUI nicht überschrieben wird. Diese Datei muss den Dateinamen '''fhem-tablet-ui-user.css''' haben und im Ordner '''/fhem/tablet/css''' abgelegt werden. Sie wird dann beim Aufruf von FTUI automatisch mitgeladen.

=== CSS-Klassen ===
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|sheet}}{{FTUI Klasse|row}}{{FTUI Klasse|cell}}{{FTUI Klasse|cell-1-x}}{{FTUI Klasse|cell-x}}{{FTUI Klasse|left-align}}{{FTUI Klasse|right-align}}{{FTUI Klasse|bottom-align}}{{FTUI Klasse|top-align}}{{FTUI Klasse|center-align}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|row/col-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|hbox/vbox-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|vbox}}{{FTUI Klasse|hbox}}{{FTUI Klasse|card}}{{FTUI Klasse|phone-width}}{{FTUI Klasse|full-height}}{{FTUI Klasse|full-width}}{{FTUI Klasse|grow-0}}{{FTUI Klasse|grow-1}}{{FTUI Klasse|grow-2}}{{FTUI Klasse|grow-x}}{{FTUI Klasse|items-top}}{{FTUI Klasse|items-center}}{{FTUI Klasse|items-bottom}}{{FTUI Klasse|items-space-between}}{{FTUI Klasse|items-space-around}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|inline}}{{FTUI Klasse|newline}}{{FTUI Klasse|top-space}}{{FTUI Klasse|top-space-2x}}{{FTUI Klasse|top-space-3x}}{{FTUI Klasse|left-space}}{{FTUI Klasse|left-space-2x}}{{FTUI Klasse|left-space-3x}}{{FTUI Klasse|right-space}}{{FTUI Klasse|right-space-2x}}{{FTUI Klasse|right-space-3x}}{{FTUI Klasse|top-narrow}}{{FTUI Klasse|top-narrow-2x}}{{FTUI Klasse|top-narrow-10}}{{FTUI Klasse|left-narrow}}{{FTUI Klasse|left-narrow-2x}}{{FTUI Klasse|left-narrow-3x}}{{FTUI Klasse|right-narrow}}{{FTUI Klasse|right-narrow-2x}}{{FTUI Klasse|right-narrow-3x}}{{FTUI Klasse|centered}}{{FTUI Klasse|wider}}{{FTUI Klasse|narrow}}{{FTUI Klasse|fullsize}}{{FTUI Klasse|compressed}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|maxw40}}{{FTUI Klasse|doublebox-v}}{{FTUI Klasse|doublebox-h}}{{FTUI Klasse|triplebox-v}}{{FTUI Klasse|right}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Vordergrundfarben
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|lightblue}}{{FTUI Klasse|orange}}{{FTUI Klasse|gray}}{{FTUI Klasse|lightgray}}{{FTUI Klasse|white}}{{FTUI Klasse|black}}{{FTUI Klasse|mint}}{{FTUI Klasse|yellow}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Hintergrundfarben
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|bg-red}}{{FTUI Klasse|bg-green}}{{FTUI Klasse|bg-blue}}{{FTUI Klasse|bg-lightblue}}{{FTUI Klasse|bg-orange}}{{FTUI Klasse|bg-gray}}{{FTUI Klasse|bg-lightgray}}{{FTUI Klasse|bg-white}}{{FTUI Klasse|bg-black}}{{FTUI Klasse|bg-mint}}{{FTUI Klasse|bg-yellow}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Rahmen
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|verticalLine}}{{FTUI Klasse|border-black}}{{FTUI Klasse|border-white}}{{FTUI Klasse|border-orange}}{{FTUI Klasse|border-red}}{{FTUI Klasse|border-green}}{{FTUI Klasse|border-mint}}{{FTUI Klasse|border-lightblue}}{{FTUI Klasse|border-blue}}{{FTUI Klasse|border-gray}}{{FTUI Klasse|border-yellow}}{{FTUI Klasse|border-lightgray}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Größen
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|mini}}{{FTUI Klasse|tiny}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|tall}}{{FTUI Klasse|great}}{{FTUI Klasse|grande}}{{FTUI Klasse|gigantic}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Schriftstil
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Sonstiges
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|blank}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}{{FTUI Klasse|fail-shake}}{{FTUI Klasse|marquee}}{{FTUI Klasse|icon round}}{{FTUI Klasse|icon square}}{{FTUI Klasse|readonly}}{{FTUI Klasse|blink}}{{FTUI Klasse|rotate-90}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|autohide}}{{FTUI Klasse|notransmit}}{{FTUI Klasse|tap}}{{FTUI Klasse|FS20}}{{FTUI Klasse|value}}{{FTUI Klasse|novalue}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|percent}}{{FTUI Klasse|nocache}}{{FTUI Klasse|fade}}{{FTUI Klasse|rotate}}{{FTUI Klasse|nolabels}}{{FTUI Klasse|default}}{{FTUI Klasse|prefetch}}{{FTUI Klasse|circulate}}{{FTUI Klasse|valueonly}}{{FTUI Klasse|positiononly}}{{FTUI Klasse|lineIndicator}}{{FTUI Klasse|barIndicator}}{{FTUI Klasse|roundIndicator}}{{FTUI Klasse|dim-tick}}{{FTUI Klasse|dim-front}}{{FTUI Klasse|dim-back}}{{FTUI Klasse|hue-tick}}{{FTUI Klasse|hue-front}}{{FTUI Klasse|hue-back}}{{FTUI Klasse|warn}}{{FTUI Klasse|activate}}{{FTUI Klasse|labelright}}{{FTUI Klasse|interlock}}{{FTUI Klasse|keepopen}}{{FTUI Klasse|noshade}}
|}

=== Überlagerung von Text und Bild ===
[[Datei:FTUI_Text_auf_Bild.png||thumb|right]]
Texte können auf Bildern positioniert werden:
<syntaxhighlight lang="html5">
<li data-row="1" data-col="4" data-sizey="4" data-sizex="6">
<div class="display">
<div data-type="image" data-url="https://picsum.photos/200/125/?random" data-size="100%"></div>
<div class="display-center bigger" data-type="label">Text1</div>
<div class="display-topright bigger right-space top-space" data-type="label">Text2</div>
<div class="ontop bigger" style="left: 120px; top: 50px">Text3</div>
</div>
</li>
</syntaxhighlight>

Zur Verfügung stehen folgende Grundpositionen:
* <code>display-topleft</code>
* <code>display-topcenter</code>
* <code>display-topright</code>
* <code>display-centerleft</code>
* <code>display-left</code>
* <code>display-centerright</code>
* <code>display-right</code>
* <code>display-bottomleft</code>
* <code>display-bottomcenter</code>
* <code>display-bottomright</code>

Feinjustage ist möglich über

* <code>right-space</code>
* <code>top-space</code>
* <code>left-space</code>
* <code>bottom-space</code>
* <code>right-space-2</code>
* <code>top-space-2</code>
* <code>left-space-2</code>
* <code>bottom-space-2</code>
* <code>right-space-3</code>
* <code>top-space-3</code>
* <code>left-space-3</code>
* <code>bottom-space-3</code>

[[Datei:FTUI_Beispiel_Positionierung.png|200px|thumb|right]]
Verallgemeinert lassen sich auf diese Weise '''Objekte frei im Elternelement positionieren''':
<syntaxhighlight lang="html5">
<div class="display" data-type="html">
<div class="display-topcenter top-space big">Fenster</div>
<div class="display-center fa fa-4x ftui-window"></div>
<div class="display-bottomleft bottom-space left-space" data-type="label">Text</div>
</div>
</syntaxhighlight>
=== Icons ===
FTUI bringt einige Icons-"Schriftarten" mit, die für die Darstellung genützt werden können. Diese werden automatisch beim Start des UI eingebunden, sobald ein entsprechendes Icon-Präfix im Code der Seite vorkommt.

Verfügbare Icon-Schriftarten sind:
* Eingebaute Icons ''ftui-window'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code>
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code>
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code>
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code>
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi '''. Beispiel: <code>data-icon="wi wi-day-rain-mix"</code>

Alternativ können auch Bilder Icons (bspw. png) über CSS verwendet werden. Bspw:
<syntaxhighlight lang="html5">
<head>
<style type="text/css">
.logo-fhem {
background: url(https://wiki.fhem.de/fhemlogo.png) no-repeat;
width: 120px;
height: 132px;
background-size: contain;
}
</style>
</head>
<body>
<div data-type="symbol" data-icon="logo-fhem"></div>
</body>
</syntaxhighlight>

== Widgets ==
===Allgemeine Attribute===
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:

{| class="wikitable"
|+allgemeine Attribute
|-
!align="right" |data-type
|Widget-Typ
|-
!align="right" |data-device
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)
|-
!align="right" |class
|CSS-Klassen für Aussehen und Formatierung des Widgets
|-
|}

{| class="wikitable"
|+Daten Empfangen
|-
!align="right" |data-get
|Reading Name
|-
!align="right" |data-get-on
|Wert für den Status on
|-
!align="right" |data-get-off
|Wert für den Status off
|-
|}

{| class="wikitable"
|+Daten Senden
|-
!align="right" |data-set
|Reading Name
|-
!align="right" |data-set-on
|Wert für den Status on
|-
!align="right" |data-set-off
|Wert für den Status off
|-
|}

Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.

=== Integrierte Widgets ===
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.

* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen
* [[FTUI Widget Circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
* [[FTUI Widget Clock|clock]]: Stellt eine einfache Uhr zur Verfügung
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben
* [[FTUI Widget Controlbutton|controlbutton]]: iOS-ähnlicher Button zum Schalten zwischen zwei Zuständen (z.B. on / off)
* [[FTUI Widget Controller|controller]]: iOS-ähnlicher vertikaler Schieberegler zum Einstellen eines Wertes
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert
* [[FTUI Widget Eventmonitor|eventmonitor]]:
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)
* [[FTUI Widget Html|html]]:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn
* [[FTUI Widget Label|label]]: Reading als Text anzeigen
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM
* [[FTUI Widget Medialist|medialist]]:
* [[FTUI Widget Multistatebutton|multistatebutton]]: Variante des push-Widgets, welches den set-Befehl abhängig vom gelesenen Status ändert
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste
* [[FTUI_Widget_Push|push]]: Button, mit dem ein Befehl an FHEM gesendet werden kann
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position
* [[FTUI Widget Scale|scale]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird
* [[FTUI Widget Slideout|slideout]]:
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler zum Einstellen eines Wertes
* [[FTUI Widget Spinner|spinner]]: Element, um Werte durch Drücken auf Plus-/Minus- oder Höher-/Tiefer-Icons zu ändern
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen zwischen verschiedenen Seiten zu wechseln
* [[FTUI Widget Switch|switch]]: Button, um zwischen zwei Zuständen zu schalten (z.B. on / off)
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)
* [[FTUI Widget Theme|theme]]: Kontextspezifisches Design
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen
* [[FTUI Widget Weatherdetail|weatherdetail]]: Detaillierte Wettervorhersage über 4 Tage (Nutzt das Proplanta Modul)
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose

===3rd Party Widgets===
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an
* [[FTUI_Widget_Analogclock|analogclock]]: Analoguhr
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [[FTUI Widget Filelog|filelog]]:
* [[FTUI Widget Fullcalview|fullcalview]]:
* [[FTUI Widget Gds|gds]]:
* [[FTUI Widget Maps|maps]]: Kartendarstellung mit Google Maps API
* [[FTUI Widget Highchart|highchart]]:
* [[FTUI Widget Highchart3d|highchart3d]]:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* [[FTUI Widget Loading|loading]]:
* [[FTUI Widget Meteogram|meteogram]]:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
* [https://forum.fhem.de/index.php/topic,79283.msg712855.html#msg712855 pinpad]: Pinpad für z.B. eine Alarmanlage
* [https://forum.fhem.de/index.php/topic,76643.msg685472.html#msg685472 postme]: Liste des PostMe-Devices anzeigen
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads
* [[FTUI Widget Screensaver|screensaver]]:
* [https://forum.fhem.de/index.php/topic,73497.0.html scrolllabel]: Texte in Laufschrift darstellen
* [[FTUI Widget Svgplot|svgplot]]:
* [https://forum.fhem.de/index.php?topic=82883.msg750237#msg750237 todoist]: einfaches widget für todoist
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.
* [[FTUI Widget UWZ|uwz]]: Anzeige der Warnungen der Unwetterzentrale
* [[FTUI Widget Wakeup|wakeup]]:
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul
* [[FTUI Widget Weekprofile|weekprofile]]: Visualisierung des [[weekprofile]] Moduls

===Anwendungsbeispiele===
Durch die Verbindung von Widgets mit dem FHEM-Umfeld entstehen Lösungen für typische Anwendungen.
* [[FTUI_Beispiel_Datetimepicker_für_Timer|Datetimepicker für Timer]]: Oberfläche für Timereinstellungen
* [[FTUI_Beispiel_Mondphase|Mondphase]]: Visuelle Darstellung der Mondphase
* [[FTUI_Beispiel_Webradio|Webradio]]
* [[FTUI Beispiel Zeitschaltung|Verschiedene Zeitschaltungen]]

==Templates==
Kommt ein bestimmtes "Code-Fragment" auf mehreren Seiten oder öfter pro Seite vor, bietet FTUI die Option, Templates zu erstellen. Diese werden einmal gebaut und können dann mit dem Attribut '''data-template''' nach Belieben in eine Seite eingefügt werden. Dabei besteht auch die Möglichkeit, Variablen zu verwenden.

Die Variablennamen sollten möglichst eindeutig und unverwechselbar gewählt werden, da bei der Verwendung von Templates im Prinzip Suchen & Ersetzen angewendet wird. Verwendet man beispielsweise die Variablen '''dev:Thermostat_Kueche''' und '''dev_temp:temperatue''', so kann es passieren, dass die Ergebnisse im erzeugten Code dann '''Thermostat_Kueche''' und '''Thermostat_Kueche_temp''' lauten, statt wie gewünscht '''Thermostat_Kueche''' und '''temperature'''. Um dies zu vermeiden, sollten die Variablen besser '''device:Thermostat_Kueche''' und '''temp:temperatue''' lauten.

Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.

===Einzelnes Widget===
Soll ein Widget an mehreren Stellen in exakt der selben Ausführung eingebunden werden, kann diese Widget in einer eigenen Datei erstellt und diese dann auf den Zielseiten automatisch mitgeladen werden.

;Template-Seite
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.
<syntaxhighlight lang="html">
<div data-type="symbol"
data-device="dummy1">
</syntaxhighlight>

;Haupt-Seite
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.
<syntaxhighlight lang="html" highlight="6">
[...]
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1">
<div data-template="template_symbol.html"></div>
</li>
</ul>
</div>
</body>
[...]
</syntaxhighlight>

===Gridster-Element===
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li>
</syntaxhighlight>

=== Widget-Gruppen ===
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.

=== Verwendung von Variablen ===
==== Einfaches Beispiel ====
Oft wird ein und dasselbe Widget für verschiedenen Devices verwendet. Um nicht für jedes Device das Widget neu kopieren zu müssen (bzw. bei Änderungen alle Seiten ausbessern zu müssen), kann ein Template verwendet werden, dem einfach per Parameter mitgeteilt wird, von welchem Device es gerade die Daten empfangen soll.

In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.

;Template-Seite
Die Template-Seite enthält nur ein einfaches Label-Widget und wird in diesem Beispiel ''template_label.html'' genannt. Um sie für mehrere Devices verwenden zu können, wird im Attribut '''data-device''' der Name des eigentlichen Devices durch den Parameter '''par01''' ersetzt.
<syntaxhighlight lang="html" highlight="2">
<div data-type="label"
data-device="par01"
data-get="measured-temp"></div>
</syntaxhighlight>

;Haupt-Seite
Auf der Haupt-Seite wird die Template-Seite mit dem Attribut '''data-template''' eingebunden und ihr via Attribut '''data-parameter''' das jeweils gewünschte Device übergeben.
<syntaxhighlight lang="html">
[...]
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div>
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div>
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div>
[...]
</syntaxhighlight>

==== Wetter-Slider mit Template ====
In diesem Beispiel wird ein [[FTUI Widget Slider|Slider-Widget]] erstellt, welches die verschiedenen Tage eines Wetterberichtes anzeigt. Dabei wird für den Wetterbericht des jeweiligen Tages immer dasselbe Template verwendet um nicht für jeden Tag ein eigenes Widget schreiben zu müssen.

;Template-Seite
<syntaxhighlight lang="html">
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="°C"></div>
<div class="inline">
<div data-type="label" data-device="AgroWeather" data-get="par02"></div>
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div>
min: <div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="°C"></div>
</div>
</div>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div>
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div>
</div>
</syntaxhighlight>

;Haupt-Seite
In der Haupt-Seite wird das Template dann für jede Slider-Seite eingebunden und das Reading für den jeweiligen Tag via Parameter übergeben.
<syntaxhighlight lang="html">
[...]
<div data-type="swiper">
<ul>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li>
</ul>
</div>
[...]
</syntaxhighlight>

== JavaScript-Funktionen ==
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.

Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></syntaxhighlight>

Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")}')">+</div></syntaxhighlight>

Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:
<syntaxhighlight lang="html">
<div data-type="label" data-device="dummy1" data-get="temperature"></div>
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div>
</syntaxhighlight>

== Eigene Widgets erstellen ==
Wie eigenen Widgets für FTUI erstellt werden können, ist auf der Seite [[FTUI eigene Widgets]] beschrieben.

Eine Schritt für Schritt Anleitung für das erste eigene Widget gibts hier [[FTUI eigene Widgets - Beispiel]]

== FAQ ==
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.

== Links ==
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}
* [[FTUI_Snippets|Snippets]]
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]
* [https://waschto.eu/fhem-und-tabletui-livedemo/ FHEM und TabletUI Live-Demo]
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]

[[Kategorie:FHEM Tablet UI|!]]

Datei:FTUI Beispiel Positionierung.png

2018-10-27T14:42:05Z

Ulm32b: Für FTUI-Wiki

== Beschreibung ==
Für FTUI-Wiki

Datei:FTUI Text auf Bild.png

2018-10-27T14:16:57Z

Ulm32b: Beispiel für überlagerte Elemente in FTUI

== Beschreibung ==
Beispiel für überlagerte Elemente in FTUI

FTUI Widget Symbol

2018-10-27T11:50:22Z

Ulm32b: /* Attribute */ data-warn-fixed ergänzt.

Das [[{{PAGENAME}}|Widget Symbol]] ist ein Widget für [[FHEM Tablet UI]], mit dem - ggf. gesteuert durch ein reading - ein Symbol dargestellt wird. Dieses Widget generiert nur eine Anzeige; es besitzt keine Möglichkeit zur Interaktion.

<gallery widths="600" height="200">
File:FTUI_Widget_Symbol_01.png
</gallery>

==Attribute==
Neben den '''allgemeinen Attributen''' besitzt das SYMBOL-Widget die nachfolgenden Attribute.

{| class="wikitable"
! HTML Attribut !! Beschreibung !! Default Wert !! Beispiel
|-
| data-get || Name des Readings, welches ausgelesen wird || STATE ||
|}

Einstellung bei zwei Werten
{| class="wikitable"
!Attribut !! Beschreibung !! Default-Wert !! Beispiel
|-
|'''data-get-on''' ||Wert für on ||<nowiki>true|1|on|open</nowiki>||
|-
|'''data-get-off''' ||Wert für off ||<nowiki>false|0|off|closed</nowiki>||
|-
|'''data-get-warn''' ||Wert für Warnmeldung (Rote (=default) Zahl am Rand) ||-1 (=aus)||
|-
|'''data-warn-background-color'''||Hintergrundfarbe des Warnhinweises||||
|-
|'''data-warn-color'''||Schriftfarbe des Warnhinweises||||
|-
|'''data-warn-fixed'''||Anzahl Nachkommastellen im Warnhinweis||0||
|-
|'''data-icon''' ||Name des Symbols||ftui-window||
|-
|'''data-background-icon''' ||Hintergrundsymbol ||||
|-
|'''data-on-background-color''' ||Hintergrundfarbe für ON-Zustand. ||#aa6900||
|-
|'''data-off-background-color''' ||Hintergrundfarbe 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
{| class="wikitable"
!Attribut !! Beschreibung !!Default Wert !! Beispiel
|-
|'''data-states''' ||Array für states ||||
|-
|'''data-icons''' ||Array mit Icons zu data-states Array ||||
|-
|'''data-classes''' ||Array mit Klassen zu data-states Array.||||data-classes='["bg-red blink","bg-yellow","bg-green"]'
|-
|'''data-background-icons''' ||Array mit Icons zu data-states Array ||||
|-
|'''data-colors''' ||Array mit Farben zu data-states Array ||||
|-
|'''data-background-colors''' ||Array mit Hintergrundfarben zu data-states Array ||||
|-
|'''data-hide'''||Reading zum Verstecken des Elementes. Das Element verschwindet, wenn der Wert mit '''data-hide-on''' übereinstimmt.||'STATE'||
|-
|'''data-hide-on'''||Zeichenkette, bei der das Element versteckt wird||<nowiki>'true|1|on'</nowiki>||
|-
|'''data-hide-off'''||Zeichenkette, bei der das Element angezeigt wird||'!on'||
|-
|}

{{Hinweis|
*''data-get-on'', ''data-get-off'' und ''data-states'' akzeptieren auch reguläre Ausdrücke (RegEx). Möglich sind auch Animationen, z.B. Blinken.
*''data-get-on'' und ''data-get-off'' können nicht gemeinsam mit ''data-states'' verwendet werden
*reine Zahlen-Arrays bei ''data-states'' müssen '''aufsteigend''' sortiert werden.}}

==CSS-Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|mini}}{{FTUI Klasse|tiny}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|tall}}{{FTUI Klasse|grande}}{{FTUI Klasse|gigantic}}{{FTUI Klasse|compressed}}{{FTUI Klasse|compressed-50}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|hide}}{{FTUI Klasse|warn}}
|}

==Beispiele==
===Einfaches Symbol===
[[File:FTUI_Widget_Symbol_02.png]]
<syntaxhighlight lang="html">
<div data-type="symbol" data-device="Web-Status" class=""></div>
</syntaxhighlight>
(Das device "Web-Status" liefert in diesem Fall den Wert "fa-rss-square")

===Symbol mit vier Zuständen und Animation===
[[File:FTUI_Widget_Symbol_03.png|800px]]
<syntaxhighlight lang="html">
<div class=""
data-type="symbol"
data-device="Garage"
data-states='["oben","unten","lauf","angehalten","Fehler"]'
data-icons='["oa-fts_garage_door_10","oa-fts_garage_door_100","fa-cog fa-spin","oa-fts_garage_door_40","fa-bug"]'
data-colors='["GoldenRod","SeaGreen","Crimson","Crimson","Crimson"]'></div>
</syntaxhighlight>

==Weitere Beispiele==
===Batterieüberwachung mit Regulärem Ausdruck (0.0 - 3.9)===
<syntaxhighlight lang="html">
<div data-type="symbol"
data-device="WohnzimmerHeizung"
data-get="batteryLevel"
data-states='["3.[0-9]","2.[789]","2.[456]","2.[123]","((2.0)|([01].[0-9]))"]'
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'
data-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'>
</div>
</syntaxhighlight>

===Batterieüberwachung mit Regulärem Ausdruck (0 - 100)===
<syntaxhighlight lang="html">
<div data-type="symbol"
data-device="dDummy3"
data-states='["100","([7][5-9])|([8-9][0-9])","([5-6][0-9])|([7][0-4])","([2][5-9])|([3-5][0-9])","([0-9])|([1][0-9])|([2][0-4])"]'
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'></div>
</syntaxhighlight>
[[Datei:FTUI_Widget_Symbol_04.png]]

===Batterieüberwachung mit Größenvergleich und gedrehten Symbolen===
<syntaxhighlight lang="html">
<div data-type="symbol"
data-device="BadHeizung"
data-get="batteryLevel"
data-states='["0","2","2.4","2.7","3.0"]'
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-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'>
</div>
</syntaxhighlight>

===Türsymbol mit Warnung bei geöffneter Tür===
<syntaxhighlight lang="html">
<div data-type="symbol" data-device="Eingangstuer"
data-states='["open","closed"]'
data-icons='["ftui-door warn","ftui-door"]'
data-colors='["#999","#555"]' >
</div>
</syntaxhighlight>
[[Datei:Bsp class warn.png]]

==Hinweise==
Als Alternative zum Symbol-Widget kommt u.U. das [[FTUI Widget Pagebutton]] in Betracht, welches ebenfalls über Icons und Farben Zustände visualisieren kann und zusätzlich bei Betätigung eine Unterseite aufruft.

[[Kategorie:FHEM Tablet UI|Symbol]]

FTUI Widget Datetimepicker

2018-10-27T11:44:30Z

Ulm32b: data-min-time und data-max-time ergänzt

Das [[{{PAGENAME}}|Datetimepicker Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem eine Auswahlmöglichkeit für Datum und/oder Uhrzeit erstellt werden kann.

<gallery>
File:FTUI_Widget_Datetimepicker_01.png
File:FTUI_Widget_Datetimepicker_02.png
File:FTUI_Widget_Datetimepicker_03.png
File:FTUI_Widget_Datetimepicker_04.png
</gallery>

==Attribute==
Für das Datetimepicker-Widget gelten alle Attribute des [[FTUI Widget Label|Label-Widgets]]. Und zusätzlich die folgenden:
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-format'''||Datum- und Zeitformat der Anzeige||Y-m-d H:i||data-format="d. F Y"
|-
|'''data-theme'''||Farb-Schema (normal, dark)||dark||data-theme="normal"
|-
|'''data-timepicker'''||Auswahlfeld für Zeit anzeigen||true||data-timepicker="false"
|-
|'''data-datepicker'''||Auswahlfeld für Datum anzeigen||true||data-datepicker="false"
|-
|'''data-step'''||Abstand der Minutenanzeige in Minuten||60||data-step="10"
|-
|'''data-min-time'''||Kleinstwert im Auswahlfeld für Zeit||||data-min-time="09:00:00"
|-
|'''data-max-time'''||Größstwert im Auswahlfeld für Zeit||||data-max-time="18:00:00"
|-
|'''data-set-value'''||Format des Wertes, der an FHEM gesendet werden soll||$v (nur der Wert)||
|}

==Beispiele==
===Datum und Uhrzeit - Schema dark===
<syntaxhighlight lang="html">
<div data-type="datetimepicker"
data-device='dummy1'
class="inline"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Datetimepicker_01.png]]

===Datum und Uhrzeit - Schema normal===
<syntaxhighlight lang="html">
<div data-type="datetimepicker"
data-device='dummy1'
data-theme="normal"
class="inline"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Datetimepicker_02.png]]

===Nur Zeitauswahl - Abstand 5min===
<syntaxhighlight lang="html">
<div data-type="datetimepicker"
data-device='dummy1'
data-datepicker="false"
data-step="5"
class="inline"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Datetimepicker_03.png]]

===Benutzerdefiniertes Anzeigeformat===
<syntaxhighlight lang="html">
<div data-type="datetimepicker"
data-device='dummy1'
data-step="5"
data-format="d. F Y H:i"
class="inline"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Datetimepicker_04.png]]

[[Kategorie:FHEM Tablet UI|Datetimepicker]]

FTUI Widget Clock

2018-10-27T11:35:09Z

Ulm32b: data-offset ergänzt.

Das [[{{PAGENAME}}|Widget Clock]] ist ein Widget für [[FHEM Tablet UI]], welches die aktuelle Zeit des jeweiligen Endgerätes in digitaler Form wiedergibt.

<gallery>
File:FTUI_Widget_Clock_01.png
File:FTUI_Widget_Clock_02.png
File:FTUI_Widget_Clock_03.png
File:FTUI_Widget_Clock_04.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-format'''||Format, siehe nachfolgende Tabelle||||
|-
|'''data-interval (''entfallen ab 10/2018!'')'''||Aktualisierungsinterval in Millisekunden||1000||
|-
|'''data-offset'''||Zeitzonenverschiebung

data-offset="2" => +2h gegenüber der FHEM-Server-Zeit.

data-offset="-1" => -1h gegenüber der FHEM-Server-Zeit.
||0||
|-
|'''data-days'''||Array der Bezeichner für Wochentagsnamen. Werden zur Ersetzung für die Formate l und D verwendet. Statt eines Arrays kann das Keyword "english" verwendet werden, um englische Wochentagsnamen zu verwenden. ||["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"]||data-days="english"
|-
|'''data-shortday-length'''||Länge des abgekürzten Wochentagsbezeichners im Format D||3||
|-
|'''data-months'''||Array der Bezeichner für Monatsnamen. Werden zur Ersetzung für die Formate F und M verwendet. Statt eines Arrays kann das Keyword "english" verwendet werden, um englische Monatsnamen zu verwenden.||["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember"]||data-months="english"
|-
|'''data-shortmonth-length'''||Länge des abgekürzten Monatsbezeichners im Format M||3||
|}

== Hinweise ==
Die Uhrzeit wird beim Start mit der FHEM-Server-Zeit per '{localtime}' abgeglichen. Man hat also auf seinem Telefon immer die aktuelle Home-Zeit in der FTUI-Anzeige, egal wo man sich gerade auf der Welt befindet.

== Bezeichner ==
Das Format wird als String angegeben. Die in der nachfolgenden Tabelle aufgeführten Bezeichner werden durch den aktuellen Wert ersetzt, die übrigen Zeichen bleiben stehen. Default "H:i:s"

{|class="wikitable"
! style="text-align:center"| Bezeichner
! style="text-align:left"| Beschreibung

|-
|style="text-align:center"|'''Y'''||Jahreszahl, vierstellig
|-
|style="text-align:center"|'''y'''||Jahreszahl, zweistellig
|-
|style="text-align:center"|'''m'''||Monatszahl, mit führender Null
|-
|style="text-align:center"|'''n'''||Monatszahl, ohne führende Null
|-
|style="text-align:center"|'''d'''||Tag des Monats, mit führender Null
|-
|style="text-align:center"|'''j'''||Tag des Monats, ohne führende Null
|-
|style="text-align:center"|'''H'''||Stunde des Tages, mit führender Null
|-
|style="text-align:center"|'''G'''||Stunde im 24-Stunden-Format, ohne führende Null
|-
|style="text-align:center"|'''i'''||Minute der Stunde, mit führender Null
|-
|style="text-align:center"|'''s'''||Sekunde der Minute, mit führender Null
|-
|style="text-align:center"|'''u'''||Millisekunden mit führender Null
|-
|style="text-align:center"|'''O'''||Zeitunterschied zur Greenwich time (GMT) in Stunden
|-
|style="text-align:center"|'''U'''||Sekunden seit Beginn der UNIX-Epoche (January 1 1970 00:00:00 GMT)
|-
|style="text-align:center"|'''w'''||Wochentagszahl (Sonntag = 0, Samstag=6)
|-
|style="text-align:center"|'''N'''||Wochentagszahl nach ISO-8601 (Montag = 1, Sonntag = 7)
|-
|style="text-align:center"|'''l'''||Wochentag
|-
|style="text-align:center"|'''D'''||Wochentag, gekürzt
|-
|style="text-align:center"|'''S'''||Anhang der englischen Aufzählung für einen Monatstag, zwei Zeichen
|-
|style="text-align:center"|'''F'''||Monat als ganzes Wort, wie Januar oder März
|-
|style="text-align:center"|'''M'''||Monatsname gekürzt
|-
|style="text-align:center"|'''g'''||Stunde im 12-Stunden-Format, ohne führende Nullen
|-
|style="text-align:center"|'''h'''||Stunde im 12-Stunden-Format, mit führenden Nullen
|-
|style="text-align:center"|'''a'''||am/pm
|-
|style="text-align:center"|'''A'''||AM/PM
|-
|style="text-align:center"|'''W'''||ISO-8601 Wochennummer des Jahres
|}

==Beispiele==
<syntaxhighlight lang="html">
<div data-type="clock"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Clock_01.png]]

<syntaxhighlight lang="html">
<div data-type="clock"
data-format="Y-m-d H:i:s"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Clock_05.png]]

<syntaxhighlight lang="html">
<div data-type="clock" data-format="l, j. F Y"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Clock_06.png]]

<syntaxhighlight lang="html">
<div data-type="clock" data-format="H:i"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Clock_02.png]]

<syntaxhighlight lang="html">
<div data-type="clock" data-format="l"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Clock_03.png]]

<syntaxhighlight lang="html">
<div data-type="clock" data-format="F"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Clock_04.png]]

[[Kategorie:FHEM Tablet UI|Clock]]

FTUI Widget Symbol

2018-10-26T22:54:47Z

Ulm32b: /* Attribute */ data-warn-color ergänzt

Das [[{{PAGENAME}}|Widget Symbol]] ist ein Widget für [[FHEM Tablet UI]], mit dem - ggf. gesteuert durch ein reading - ein Symbol dargestellt wird. Dieses Widget generiert nur eine Anzeige; es besitzt keine Möglichkeit zur Interaktion.

<gallery widths="600" height="200">
File:FTUI_Widget_Symbol_01.png
</gallery>

==Attribute==
Neben den '''allgemeinen Attributen''' besitzt das SYMBOL-Widget die nachfolgenden Attribute.

{| class="wikitable"
! HTML Attribut !! Beschreibung !! Default Wert !! Beispiel
|-
| data-get || Name des Readings, welches ausgelesen wird || STATE ||
|}

Einstellung bei zwei Werten
{| class="wikitable"
!Attribut !! Beschreibung !! Default-Wert !! Beispiel
|-
|'''data-get-on''' ||Wert für on ||<nowiki>true|1|on|open</nowiki>||
|-
|'''data-get-off''' ||Wert für off ||<nowiki>false|0|off|closed</nowiki>||
|-
|'''data-get-warn''' ||Wert für Warnmeldung (Rote (=default) Zahl am Rand) ||-1 (=aus)||
|-
|'''data-warn-background-color'''||Hintergrundfarbe des Warnhinweises||||
|-
|'''data-warn-color'''||Schriftfarbe des Warnhinweises||||
|-
|'''data-icon''' ||Name des Symbols||ftui-window||
|-
|'''data-background-icon''' ||Hintergrundsymbol ||||
|-
|'''data-on-background-color''' ||Hintergrundfarbe für ON-Zustand. ||#aa6900||
|-
|'''data-off-background-color''' ||Hintergrundfarbe 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
{| class="wikitable"
!Attribut !! Beschreibung !!Default Wert !! Beispiel
|-
|'''data-states''' ||Array für states ||||
|-
|'''data-icons''' ||Array mit Icons zu data-states Array ||||
|-
|'''data-classes''' ||Array mit Klassen zu data-states Array.||||data-classes='["bg-red blink","bg-yellow","bg-green"]'
|-
|'''data-background-icons''' ||Array mit Icons zu data-states Array ||||
|-
|'''data-colors''' ||Array mit Farben zu data-states Array ||||
|-
|'''data-background-colors''' ||Array mit Hintergrundfarben zu data-states Array ||||
|-
|'''data-hide'''||Reading zum Verstecken des Elementes. Das Element verschwindet, wenn der Wert mit '''data-hide-on''' übereinstimmt.||'STATE'||
|-
|'''data-hide-on'''||Zeichenkette, bei der das Element versteckt wird||<nowiki>'true|1|on'</nowiki>||
|-
|'''data-hide-off'''||Zeichenkette, bei der das Element angezeigt wird||'!on'||
|-
|}

{{Hinweis|
*''data-get-on'', ''data-get-off'' und ''data-states'' akzeptieren auch reguläre Ausdrücke (RegEx). Möglich sind auch Animationen, z.B. Blinken.
*''data-get-on'' und ''data-get-off'' können nicht gemeinsam mit ''data-states'' verwendet werden
*reine Zahlen-Arrays bei ''data-states'' müssen '''aufsteigend''' sortiert werden.}}

==CSS-Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|mini}}{{FTUI Klasse|tiny}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|tall}}{{FTUI Klasse|grande}}{{FTUI Klasse|gigantic}}{{FTUI Klasse|compressed}}{{FTUI Klasse|compressed-50}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|hide}}{{FTUI Klasse|warn}}
|}

==Beispiele==
===Einfaches Symbol===
[[File:FTUI_Widget_Symbol_02.png]]
<syntaxhighlight lang="html">
<div data-type="symbol" data-device="Web-Status" class=""></div>
</syntaxhighlight>
(Das device "Web-Status" liefert in diesem Fall den Wert "fa-rss-square")

===Symbol mit vier Zuständen und Animation===
[[File:FTUI_Widget_Symbol_03.png|800px]]
<syntaxhighlight lang="html">
<div class=""
data-type="symbol"
data-device="Garage"
data-states='["oben","unten","lauf","angehalten","Fehler"]'
data-icons='["oa-fts_garage_door_10","oa-fts_garage_door_100","fa-cog fa-spin","oa-fts_garage_door_40","fa-bug"]'
data-colors='["GoldenRod","SeaGreen","Crimson","Crimson","Crimson"]'></div>
</syntaxhighlight>

==Weitere Beispiele==
===Batterieüberwachung mit Regulärem Ausdruck (0.0 - 3.9)===
<syntaxhighlight lang="html">
<div data-type="symbol"
data-device="WohnzimmerHeizung"
data-get="batteryLevel"
data-states='["3.[0-9]","2.[789]","2.[456]","2.[123]","((2.0)|([01].[0-9]))"]'
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'
data-colors='["#505050","#505050","#505050","#ad3333","#ad3333"]'>
</div>
</syntaxhighlight>

===Batterieüberwachung mit Regulärem Ausdruck (0 - 100)===
<syntaxhighlight lang="html">
<div data-type="symbol"
data-device="dDummy3"
data-states='["100","([7][5-9])|([8-9][0-9])","([5-6][0-9])|([7][0-4])","([2][5-9])|([3-5][0-9])","([0-9])|([1][0-9])|([2][0-4])"]'
data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'></div>
</syntaxhighlight>
[[Datei:FTUI_Widget_Symbol_04.png]]

===Batterieüberwachung mit Größenvergleich und gedrehten Symbolen===
<syntaxhighlight lang="html">
<div data-type="symbol"
data-device="BadHeizung"
data-get="batteryLevel"
data-states='["0","2","2.4","2.7","3.0"]'
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-colors='["#ad3333","#ad3333","#505050","#505050","#505050"]'>
</div>
</syntaxhighlight>

===Türsymbol mit Warnung bei geöffneter Tür===
<syntaxhighlight lang="html">
<div data-type="symbol" data-device="Eingangstuer"
data-states='["open","closed"]'
data-icons='["ftui-door warn","ftui-door"]'
data-colors='["#999","#555"]' >
</div>
</syntaxhighlight>
[[Datei:Bsp class warn.png]]

==Hinweise==
Als Alternative zum Symbol-Widget kommt u.U. das [[FTUI Widget Pagebutton]] in Betracht, welches ebenfalls über Icons und Farben Zustände visualisieren kann und zusätzlich bei Betätigung eine Unterseite aufruft.

[[Kategorie:FHEM Tablet UI|Symbol]]

FTUI Widget Pagebutton

2018-10-26T18:05:04Z

Ulm32b: /* Attribute */ data-warn ergänzt

Das [[{{PAGENAME}}|Pagebutton Widget]] ist ein Widget für [[FHEM Tablet UI]], das ein einfaches Element zur Verfügung stellt, um auf eine andere Seite zu navigieren. Auf der Zielseite wird das Widget als "ON" angezeigt. Das Pagebutton-Widget eignet sich zum Beispiel gut, um eine Navigation zu erstellen.

<gallery>
File:FTUI_Widget_Pagebutton_01.png
File:FTUI_Widget_Pagebutton_02.png
</gallery>

==Attribute==
Für das Pagebutton-Widget gelten alle Attribute des [[FTUI Widget Switch]]. Und zusätzlich die folgenden:
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-url'''||URL der Seite, die angezeigt werden soll||||data-url="#content_main.html"
|-
|'''data-load'''||DIV-Container, in den der Inhalt der Zielseite geladen werden soll||||data-load="#main"
|-
|'''data-active-pattern'''||[[Regulärer Ausdruck|RegEx]], die bestimmt, wann das Widget "ON" sein soll||||<nowiki>data-active-pattern="(.*/||.*#content_main.html)"</nowiki>
|-
|'''data-fade-duration'''||Zeit in Millisekunden oder "slow" bzw. "fast", die verwendet werden soll, um die Zielseite einzublenden||slow||data-fade-duration="1000"
|-
|'''data-icon'''||Vordergrund-Icon des Widgets||fa-power-off||data-icon="mi-home"
|-
|'''data-background-icon'''||Hintergrund-Icon des Widgets||fa-circle||data-background-icon="fa-square"
|-
|'''data-on-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt angezeigt wird||#222222||data-on-color="yellow"
|-
|'''data-on-background-color'''||Farbe des Hintergrund-Icons, wenn der gewünschte Inhalt angezeigt wird||#606060||data-on-background-color="gray"
|-
|'''data-off-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt nicht angezeigt wird||#505050||data-off-color="#000000"
|-
|'''data-off-background-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt nicht angezeigt wird||transparent||data-off-background-color="#cccccc"
|-
|'''data-return-time'''||Zeit in Sekunden, nach der die Standardseite (default) wieder aufgerufen wird||||data-return-time="60"
|-
|'''data-parent'''||"Eltern-Seite" - Angabe erforderlich, wenn in einer mehrstufigen Menüstruktur direkt auf eine Unterseite gesprungen werden soll und diese nicht mit "prefetch" vorgeladen ist||||data-parent="main2"

|-
|'''data-device'''||FHEM-Device, über welches das Verhalten des Widgets gesteuert wird||||
|-
|'''data-get'''||Reading, welches ausgewertet wird||STATE||
|-
|'''data-get-on'''||Wert, bei welchem das Widget ausgelöst wird||||
|-
|'''data-states'''||Vektor mit Zuständen von data-get||||data-states='["0","1"]'
|-
|'''data-icons'''||Vektor mit Symbolen, die auf data-states referenzieren||||data-icons='["fs-bag blink","fs-bag"]'
|-
|'''data-hide'''||Reading, welches Ein- und Ausblenden des Widgets steuert||||data-hide="GelberSack_Anzeige"
|-
|'''data-hide-on'''||Wert, bei dem das Widget ausgeblendet wird||||data-hide-on="false"
|-
|'''data-warn'''||<device>:<reading> für den Inhalt des Warnhinweises||||
|-
|'''data-warn-background-color'''||Hintergrundfarbe des Warnhinweises||||
|-
|'''data-warn-color'''||Schriftfarbe des Warnhinweises||||
|}

==CSS Klassen==
{|class="wikitable"
{{FTUI Klasse|blank}}{{FTUI Klasse|nocache}}{{FTUI Klasse|default}}{{FTUI Klasse|prefetch}}
|}

==Hinweise==
* Für Sub-Pagebuttons kann eine eigene ''data-return-time'' festgelegt werden.
* ''data-return-time'' muss nicht am ersten Button hängen. Der erste, der dieses Attribut hat, wird ausgewertet.

==Beispiele==
===Einfacher Link===
<syntaxhighlight lang="html">
<div data-type="pagebutton"
data-url="index.html"
data-icon="mi-home"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Pagebutton_01.png]]

===Navigationsleiste===
Für die Navigationsleiste braucht es zum einen die Leiste und zum anderen einen DIV-Container, in dem die zu ladenden Inhalte angezeigt werden. Die Container erhalten jeweils eine eindeutige ID, welche in der Navigationsleiste als Ziel referenziert wird.

Als erstes wird das Menü aufgebaut.
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
<div data-type="pagebutton"
data-url="#page1.html"
data-load="#page1"
data-active-pattern=".*#page1.html"
data-icon="mi-weekend"
class="default"></div>
<div data-type="pagebutton"
data-url="#page2.html"
data-load="#page2"
data-active-pattern=".*#page2.html"
data-icon="mi-music_video"></div>
<div data-type="pagebutton"
data-url="#page3.html"
data-load="#page3"
data-active-pattern=".*#page3.html"
data-icon="mi-tv"></div>
</li>
</syntaxhighlight>

Anschließend werden noch die DIV-Container benötigt, in die der Inhalt der Zielseite geladen wird.
<syntaxhighlight lang="html">
<li data-row="1" data-col="2" data-sizex="5" data-sizey="4">
<div class="page" id="page1"></div>
<div class="page" id="page2"></div>
<div class="page" id="page3"></div>
</li>
</syntaxhighlight>

In der Zielseite ist wichtig, dass ein DIV-Container erstellt wird, dem die Klasse ''page'' zugewiesen wird und eine ID, die der ID entsprechen muss, in der bei ''data-load'' verwiesen wird.
So eine Seite könnte wie folgt aussehen:
<syntaxhighlight lang="html">
<div class="page" id="page1">
<div data-type="label">Page 1</div>
</div>
</syntaxhighlight>

[[File:FTUI_Widget_Pagebutton_02.png]]

===Steuerung über ein Device===
Der Aufruf einzelner Seiten kann auch über ein Device erfolgen; dies eröffnet Automatisierungsmöglichkeiten. Das obige Beispiel wird hierzu erweitert:
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
<div data-type="pagebutton"
data-url="#page1.html"
data-load="#page1"
data-active-pattern=".*#page1.html"
data-icon="mi-weekend"
class="default"
data-device="Seite"
data-get="STATE"
data-get-on="1"></div>
<div data-type="pagebutton"
data-url="#page2.html"
data-load="#page2"
data-active-pattern=".*#page2.html"
data-icon="mi-music_video"
data-device="Seite"
data-get="STATE"
data-get-on="2"></div>
<div data-type="pagebutton"
data-url="#page3.html"
data-load="#page3"
data-active-pattern=".*#page3.html"
data-icon="mi-tv"
data-device="Seite"
data-get="STATE"
data-get-on="3"></div>
</li>
</syntaxhighlight>

Nimmt das device "Seite" die STATES "1", "2" oder "3" an, wird die jeweilige Seite aufgerufen.

Eine weitere Variante zeigt das nachfolgende Beispiel: Hier wird über das device "Musik" bei "on" die Seite 2 aufgerufen und bei "off" zur Hauptseite zurückgewechselt:
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
<div data-type="pagebutton"
data-url="#page1.html"
data-load="#page1"
data-active-pattern=".*#page1.html"
data-icon="mi-weekend"
class="default"
data-device="Musik"
data-get="STATE"
data-get-on="off"></div>
<div data-type="pagebutton"
data-url="#page2.html"
data-load="#page2"
data-active-pattern=".*#page2.html"
data-icon="mi-music_video"
data-device="Musik"
data-get="STATE"
data-get-on="on"></div>
<div data-type="pagebutton"
data-url="#page3.html"
data-load="#page3"
data-active-pattern=".*#page3.html"
data-icon="mi-tv"></div>
</li>
</syntaxhighlight>

===Querverweis auf eine Pagebutton-Seite===
Es ist zulässig, dass mehrere Pagebutton-Widgets auf dieselbe Seite verweisen. Neben der Verwendung in Menüleisten könnnen somit zusätzlich "Links" an beliebiger Stelle platziert werden, bei deren Betätigung die definierte Pagebutton-Seite bzw. -Unterseite aufgerufen wird. Das Aussehen des Pagebutton-Widgets kann mittels ''data-icons'' und ''data-colors'' wie beim Symbol-Widget beeinflusst werden. Folglich erweitert das Pagebutton-Widget die Funktionalität des Symbol-Widgets dergestalt, dass bei Betätigung eine Unterseite aufgerufen wird. Beispiel: Auf der Hauptseite signalisiert das Symbol, ob alle Fenster geschlossen sind oder mindestens eines geöffnet ist. Bei Betätigung des Widgets wird dann die Unterseite aufgerufen, welche eine detaillierte Übersicht über den Zustand aller Fenster enthält. Im nachfolgenden Beispiel wird der Abholtermin des Gelben Sacks am Vortag (normale Anzeige) und am Abholtag (blinkend) angezeigt. Das Reading ''GelberSack_Anzeige'' begrenzt das Zeitfenster der Anzeige auf den Nachmittag des Vortages bis zum Vormittag des Abholtages. Wenn das Symbol angezeigt wird, kann durch manuelle Betätigung die Unterseite ''"#page_content6_4.html"'' aufgerufen werden (welche z.B. weitere Informationen zu anstehenden Abholterminen bereithält).

<syntaxhighlight lang="html">
<div class="vbox grow-0">
<div data-type="pagebutton"
data-url="#page_content6_4.html"
data-load="#content6_4"
data-off-background-color="transparent"
data-off-color="#FFFF7A"
data-on-background-color="transparent"
data-on-color="#FFFF7A"
data-active-pattern=".*#page_content6_4.html"
class="prefetch bigger compressed autohide"
data-device="Entsorger"
data-get="GelberSack_days"
data-states='["0","1"]'
data-icons='["fs-bag blink","fs-bag"]'
data-hide="GelberSack_Anzeige"
data-hide-on="false"></div>

<div data-type="label"
data-device="Entsorger"
data-hide="GelberSack_Anzeige"
data-hide-on="false"
data-get="GelberSack_days"
data-substitution='["0","Heute","1","Morgen"]'
data-color="#FFFF7A" class="compressed autohide"
style="position: relative; top: 5px"></div>
</div>
</syntaxhighlight>

==Weblinks==
*[https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/pagebutton/index_page_left_demo.html Beispiel für eine Navigation]
*{{Link2Forum|Topic=67141|LinkText=Fertiges Pagebutton Multi-Menü}}
*[https://forum.fhem.de/index.php/topic,82003.msg745677.html#msg745677 Sprung zu einer Unterseite (Anwendung von data-parent)]

[[Kategorie:FHEM Tablet UI|Pagebutton]]

FTUI Widget Pagebutton

2018-10-26T17:26:00Z

Ulm32b: Hinweise aus Forum eingefügt.

Das [[{{PAGENAME}}|Pagebutton Widget]] ist ein Widget für [[FHEM Tablet UI]], das ein einfaches Element zur Verfügung stellt, um auf eine andere Seite zu navigieren. Auf der Zielseite wird das Widget als "ON" angezeigt. Das Pagebutton-Widget eignet sich zum Beispiel gut, um eine Navigation zu erstellen.

<gallery>
File:FTUI_Widget_Pagebutton_01.png
File:FTUI_Widget_Pagebutton_02.png
</gallery>

==Attribute==
Für das Pagebutton-Widget gelten alle Attribute des [[FTUI Widget Switch]]. Und zusätzlich die folgenden:
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-url'''||URL der Seite, die angezeigt werden soll||||data-url="#content_main.html"
|-
|'''data-load'''||DIV-Container, in den der Inhalt der Zielseite geladen werden soll||||data-load="#main"
|-
|'''data-active-pattern'''||[[Regulärer Ausdruck|RegEx]], die bestimmt, wann das Widget "ON" sein soll||||<nowiki>data-active-pattern="(.*/||.*#content_main.html)"</nowiki>
|-
|'''data-fade-duration'''||Zeit in Millisekunden oder "slow" bzw. "fast", die verwendet werden soll, um die Zielseite einzublenden||slow||data-fade-duration="1000"
|-
|'''data-icon'''||Vordergrund-Icon des Widgets||fa-power-off||data-icon="mi-home"
|-
|'''data-background-icon'''||Hintergrund-Icon des Widgets||fa-circle||data-background-icon="fa-square"
|-
|'''data-on-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt angezeigt wird||#222222||data-on-color="yellow"
|-
|'''data-on-background-color'''||Farbe des Hintergrund-Icons, wenn der gewünschte Inhalt angezeigt wird||#606060||data-on-background-color="gray"
|-
|'''data-off-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt nicht angezeigt wird||#505050||data-off-color="#000000"
|-
|'''data-off-background-color'''||Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt nicht angezeigt wird||transparent||data-off-background-color="#cccccc"
|-
|'''data-return-time'''||Zeit in Sekunden, nach der die Standardseite (default) wieder aufgerufen wird||||data-return-time="60"
|-
|'''data-parent'''||"Eltern-Seite" - Angabe erforderlich, wenn in einer mehrstufigen Menüstruktur direkt auf eine Unterseite gesprungen werden soll und diese nicht mit "prefetch" vorgeladen ist||||data-parent="main2"

|-
|'''data-device'''||FHEM-Device, über welches das Verhalten des Widgets gesteuert wird||||
|-
|'''data-get'''||Reading, welches ausgewertet wird||STATE||
|-
|'''data-get-on'''||Wert, bei welchem das Widget ausgelöst wird||||
|-
|'''data-states'''||Vektor mit Zuständen von data-get||||data-states='["0","1"]'
|-
|'''data-icons'''||Vektor mit Symbolen, die auf data-states referenzieren||||data-icons='["fs-bag blink","fs-bag"]'
|-
|'''data-hide'''||Reading, welches Ein- und Ausblenden des Widgets steuert||||data-hide="GelberSack_Anzeige"
|-
|'''data-hide-on'''||Wert, bei dem das Widget ausgeblendet wird||||data-hide-on="false"
|}

==CSS Klassen==
{|class="wikitable"
{{FTUI Klasse|blank}}{{FTUI Klasse|nocache}}{{FTUI Klasse|default}}{{FTUI Klasse|prefetch}}
|}

==Hinweise==
* Für Sub-Pagebuttons kann eine eigene ''data-return-time'' festgelegt werden.
* ''data-return-time'' muss nicht am ersten Button hängen. Der erste, der dieses Attribut hat, wird ausgewertet.

==Beispiele==
===Einfacher Link===
<syntaxhighlight lang="html">
<div data-type="pagebutton"
data-url="index.html"
data-icon="mi-home"></div>
</syntaxhighlight>
[[File:FTUI_Widget_Pagebutton_01.png]]

===Navigationsleiste===
Für die Navigationsleiste braucht es zum einen die Leiste und zum anderen einen DIV-Container, in dem die zu ladenden Inhalte angezeigt werden. Die Container erhalten jeweils eine eindeutige ID, welche in der Navigationsleiste als Ziel referenziert wird.

Als erstes wird das Menü aufgebaut.
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
<div data-type="pagebutton"
data-url="#page1.html"
data-load="#page1"
data-active-pattern=".*#page1.html"
data-icon="mi-weekend"
class="default"></div>
<div data-type="pagebutton"
data-url="#page2.html"
data-load="#page2"
data-active-pattern=".*#page2.html"
data-icon="mi-music_video"></div>
<div data-type="pagebutton"
data-url="#page3.html"
data-load="#page3"
data-active-pattern=".*#page3.html"
data-icon="mi-tv"></div>
</li>
</syntaxhighlight>

Anschließend werden noch die DIV-Container benötigt, in die der Inhalt der Zielseite geladen wird.
<syntaxhighlight lang="html">
<li data-row="1" data-col="2" data-sizex="5" data-sizey="4">
<div class="page" id="page1"></div>
<div class="page" id="page2"></div>
<div class="page" id="page3"></div>
</li>
</syntaxhighlight>

In der Zielseite ist wichtig, dass ein DIV-Container erstellt wird, dem die Klasse ''page'' zugewiesen wird und eine ID, die der ID entsprechen muss, in der bei ''data-load'' verwiesen wird.
So eine Seite könnte wie folgt aussehen:
<syntaxhighlight lang="html">
<div class="page" id="page1">
<div data-type="label">Page 1</div>
</div>
</syntaxhighlight>

[[File:FTUI_Widget_Pagebutton_02.png]]

===Steuerung über ein Device===
Der Aufruf einzelner Seiten kann auch über ein Device erfolgen; dies eröffnet Automatisierungsmöglichkeiten. Das obige Beispiel wird hierzu erweitert:
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
<div data-type="pagebutton"
data-url="#page1.html"
data-load="#page1"
data-active-pattern=".*#page1.html"
data-icon="mi-weekend"
class="default"
data-device="Seite"
data-get="STATE"
data-get-on="1"></div>
<div data-type="pagebutton"
data-url="#page2.html"
data-load="#page2"
data-active-pattern=".*#page2.html"
data-icon="mi-music_video"
data-device="Seite"
data-get="STATE"
data-get-on="2"></div>
<div data-type="pagebutton"
data-url="#page3.html"
data-load="#page3"
data-active-pattern=".*#page3.html"
data-icon="mi-tv"
data-device="Seite"
data-get="STATE"
data-get-on="3"></div>
</li>
</syntaxhighlight>

Nimmt das device "Seite" die STATES "1", "2" oder "3" an, wird die jeweilige Seite aufgerufen.

Eine weitere Variante zeigt das nachfolgende Beispiel: Hier wird über das device "Musik" bei "on" die Seite 2 aufgerufen und bei "off" zur Hauptseite zurückgewechselt:
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
<div data-type="pagebutton"
data-url="#page1.html"
data-load="#page1"
data-active-pattern=".*#page1.html"
data-icon="mi-weekend"
class="default"
data-device="Musik"
data-get="STATE"
data-get-on="off"></div>
<div data-type="pagebutton"
data-url="#page2.html"
data-load="#page2"
data-active-pattern=".*#page2.html"
data-icon="mi-music_video"
data-device="Musik"
data-get="STATE"
data-get-on="on"></div>
<div data-type="pagebutton"
data-url="#page3.html"
data-load="#page3"
data-active-pattern=".*#page3.html"
data-icon="mi-tv"></div>
</li>
</syntaxhighlight>

===Querverweis auf eine Pagebutton-Seite===
Es ist zulässig, dass mehrere Pagebutton-Widgets auf dieselbe Seite verweisen. Neben der Verwendung in Menüleisten könnnen somit zusätzlich "Links" an beliebiger Stelle platziert werden, bei deren Betätigung die definierte Pagebutton-Seite bzw. -Unterseite aufgerufen wird. Das Aussehen des Pagebutton-Widgets kann mittels ''data-icons'' und ''data-colors'' wie beim Symbol-Widget beeinflusst werden. Folglich erweitert das Pagebutton-Widget die Funktionalität des Symbol-Widgets dergestalt, dass bei Betätigung eine Unterseite aufgerufen wird. Beispiel: Auf der Hauptseite signalisiert das Symbol, ob alle Fenster geschlossen sind oder mindestens eines geöffnet ist. Bei Betätigung des Widgets wird dann die Unterseite aufgerufen, welche eine detaillierte Übersicht über den Zustand aller Fenster enthält. Im nachfolgenden Beispiel wird der Abholtermin des Gelben Sacks am Vortag (normale Anzeige) und am Abholtag (blinkend) angezeigt. Das Reading ''GelberSack_Anzeige'' begrenzt das Zeitfenster der Anzeige auf den Nachmittag des Vortages bis zum Vormittag des Abholtages. Wenn das Symbol angezeigt wird, kann durch manuelle Betätigung die Unterseite ''"#page_content6_4.html"'' aufgerufen werden (welche z.B. weitere Informationen zu anstehenden Abholterminen bereithält).

<syntaxhighlight lang="html">
<div class="vbox grow-0">
<div data-type="pagebutton"
data-url="#page_content6_4.html"
data-load="#content6_4"
data-off-background-color="transparent"
data-off-color="#FFFF7A"
data-on-background-color="transparent"
data-on-color="#FFFF7A"
data-active-pattern=".*#page_content6_4.html"
class="prefetch bigger compressed autohide"
data-device="Entsorger"
data-get="GelberSack_days"
data-states='["0","1"]'
data-icons='["fs-bag blink","fs-bag"]'
data-hide="GelberSack_Anzeige"
data-hide-on="false"></div>

<div data-type="label"
data-device="Entsorger"
data-hide="GelberSack_Anzeige"
data-hide-on="false"
data-get="GelberSack_days"
data-substitution='["0","Heute","1","Morgen"]'
data-color="#FFFF7A" class="compressed autohide"
style="position: relative; top: 5px"></div>
</div>
</syntaxhighlight>

==Weblinks==
*[https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/pagebutton/index_page_left_demo.html Beispiel für eine Navigation]
*{{Link2Forum|Topic=67141|LinkText=Fertiges Pagebutton Multi-Menü}}
*[https://forum.fhem.de/index.php/topic,82003.msg745677.html#msg745677 Sprung zu einer Unterseite (Anwendung von data-parent)]

[[Kategorie:FHEM Tablet UI|Pagebutton]]

FHEM Tablet UI

2018-09-10T15:18:05Z

Ulm32b: /* Integrierte Widgets */ Typos

{{Infobox Modul
|ModPurpose=Oberfläche für FHEM
|ModType=x
|ModFTopic=34233
|ModForumArea=TabletUI
|ModTechName=n.a.
|ModOwner=setstate ({{Link2FU|7023|Forum}})
}}
[[FHEM Tablet UI]] (FTUI) ist ein leichtgewichtiges aber funktionsreiches Frontend-Framework zum Steuern und Überwachen von in FHEM integrierten Geräten. Es basiert auf HTML/CSS/JavaScript und stellt somit keine zusätzlichen Anforderungen an den FHEM-Server.

Mit Hilfe zahlreicher Widgets, die sehr leicht mit HTML Code konfiguriert werden können, ist es möglich, innerhalb kurzer Zeit ein den eigenen Wünschen entsprechendes User-Interface aufzubauen.

Für den Betrieb ist nur eine FHEM-Installation mit [[HTTPSRV|HTTPSRV-Modul]] sowie ein gängiger Webbrowser notwendig.

Mit wenigen Anpassungen ist es auch möglich, das UI auf anderen Webservern (Apache, u.a.) zu betreiben. Somit können FHEM und FHEM Tablet UI auch auf getrennten Systemen ausgeführt werden.

[[File:tablet_ui.png|thumb|500px|center|Beispiel für ein mit [[FHEM Tablet UI]] erstelltes User-Interface]]

{{Todo|Design-Möglichkeiten erklären, Navigationsmethoden ausformulieren}}

== Installation ==
Die Installation von FHEM Tablet UI erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus drei Schritten:
*Dateien aus dem GitHub-Repository herunterladen
*FHEM konfigurieren ([[HTTPSRV]]-Device erstellen, [[FHEMWEB]]-Attribut longpoll einstellen)
*Eine Beispieldatei anlegen

{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}

'''1.''' Zuerst müssen alle Dateien von FHEM Tablet UI in das FHEM-Verzeichnis '''/opt/fhem/www''' kopiert werden. Das geht mit folgendem '''update'''-Befehl über die FHEM-Befehlszeile.
:<code>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</code>

:[[Datei:FTUI_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]

'''2.''' Anschließend ist ein neues [[HTTPSRV]]-Device in FHEM anzulegen, welches auf den Ordner mit den gerade heruntergeladenen Dateien verweist.
:<code>define TABLETUI HTTPSRV ftui/ ./www/tablet/ Tablet-UI</code>

:[[Datei:FTUI_Installation_02.png|thumb|none|Schritt 2: HTTPSRV-Device anlegen]]

{{Hinweis|Dieser Schritt kann ausgelassen werden, wenn die Funktionalitäten von [[FHEMWEB]] ausreichend sind. Dann muss FTUI aber in weiterer Folge unter der URL '''<nowiki>http(s)://<fhem-server>:8083/fhem/tablet/index.html</nowiki>''' aufgerufen werden und es wird kein Link auf FTUI in der FHEM GUI erstellt. Vorteil ist aber, dass das FHEMWEB-Caching verwendet werden kann. Siehe dieser {{Link2Forum|Topic=86362|Message=788258}}.}}

'''3.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.

:<code>attr WEB longpoll websocket</code>
:bzw. bei Problemen mit ''websocket''
:<code>attr WEB longpoll 1</code>

:[[Datei:FTUI_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]

'''4.''' Weil FTUI noch nichts anzuzeigen hat, wird die Datei '''/opt/fhem/www/tablet/index-example.html''' nach '''/opt/fhem/www/tablet/index.html''' kopiert.
:<code>sudo cp -a /opt/fhem/www/tablet/index-example.html /opt/fhem/www/tablet/index.html</code>

:[[Datei:FTUI_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]

'''5.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.

Somit ist FHEM Tablet UI bereit zur Verwendung und kann durch Aufruf der URL '''<nowiki>http://<fhem-server>:8083/fhem/ftui/</nowiki>''' oder den Link im FHEM-Menü geöffnet werden

== Update ==
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.

'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

'''2.''' Update der geänderten Dateien durch Eingabe von:
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

Eine weitere Option ist das Hinzufügen des FTUI-Git-Repositories zum allgemeinem Update-Vorgang von FHEM. Dabei wird dann bei einem FHEM-Update auch gleich FHEM Tablet UI aktualisiert, bzw. die Änderungen angezeigt.
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt</nowiki></code>

== Konfiguration ==
===DOCTYPE===
In allen HTML-Dateien, die im Browser geladen werden und das typische HTML-Gerüst besitzen (also alle Hauptseiten, jedoch keine Template-Dateien), sollte eine ''Document Type Declaration'' (DTDT) eingefügt werden. Mit ihr wird festgelegt, welche ''Document Type Definition'' hier verwendet wird (das kommt aus der Metasprache XML), konkret also, in welcher Version der nachfolgende HTML-Code vom Browser interpretiert werden soll. Lässt man die DTDT weg, oder definiert sie auf verschiedenen Seiten unterschiedlich, kann ein und der selbe HTML-Code zu unterschiedlichen Darstellungen führen. Die DTDT erfolgt immer auf der ersten Zeile, noch vor dem <code><html></code>-Tag. Nachfolgend wird HTML5 verwendet.

<syntaxhighlight lang="html">
<!DOCTYPE html>
<html>
<head>...</head>
<body>...</body>
</html>
</syntaxhighlight>

===META-Parameter===
Das Tablet UI lässt sich über die META-Parameter konfigurieren. Diese Parameter sind in jeder '''.html''' Datei (z.B. index.html) im Abschnitt '''<head>''' einzutragen. Ausgenommen davon sind Dateien, die als Template, Pagebutton-Zielseiten oder ähnliches eingebunden werden.

Die Parameter sind immer nach diesem Schema aufgebaut:
<meta name="[Parameter-Name]" content="[Parameter-Wert]">

===Verbindung zu FHEM===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|web_device||WEB||String||FHEM-Device, welches für das Polling verwendet wird
|-
|longpoll||1||0, 1||
'''0''': Longpoll deaktiviert; alle 30s ein Shortpoll (Neuladen der gesamten Statusänderungen)

'''1''': Longpoll aktiv; geänderte Stati werden sofort aktualisiert, zusätzlich werden alle 15min die gesamten Statusänderungen geladen.
|-
|longpoll_type||websocket||websocket, ajax, 0||
'''websocket''': Für die Aktualisierung der Daten wird das Websocket-Protokoll verwendet. Werden vom Browser keine Websockets unterstützt, gibt es einen automatischen Fallback auf Ajax.

'''ajax''': Ajax wird für die Aktualisierung verwendet.

'''0''': Longpoll deaktiviert, Shortpoll wird verwendet.
|-
|longpoll_filter||.*||RegEx||Event-Filter. Kann verwendet werden, wenn z.B. Devices, die in FTUI angezeigt werden, in einem eigenen FHEM-Room sind.
|-
|longpoll_maxage||240||Integer||Kommen in diesem Zeitraum (Sekunden) keine Longpoll-Events bei FTUI an, wird die Verbindung als "disconnected" angesehen und ein neuer Verbindungsversuch wird gestartet.
|-
|shortpoll_interval||900||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet
|-
|shortpoll_only_interval||30||Integer||Zeitraum in Sekunden, nach dem ein vollständiger Refresh stattfindet, sollte Longpoll deaktiviert sein
|-
|fhemweb_url||/fhem/||Integer||URL zu FHEM. Wird benötigt wenn FTUI auf einem anderen als dem FHEM Server läuft oder nicht im Standard-Pfad installiert ist.
Hinweis: Wenn FHEM auf einem anderem Server/Domain läuft muss man das "CORS" Attribut im FHEMWEB Modul (s.o.) auf 1 setzen, sonst bekommt man Cross Origin Fehler.
|}

===Funktionalität===
{| class="wikitable"
|-
!Parameter-Name!!Standard-Wert!!Mögliche Werte!!Beschreibung
|-
|debug||0||0 - 5||Log-Level
|-
|toast||5||Integer||Anzahl an gleichzeitig angezeigten Toast-Nachrichten. Um keine anzuzeigen, ist der Wert auf 0 zu setzen.
|-
|toast_position||bottom-left||||Position im Browserfenster, wo die Toast-Nachrichten angezeigt werden.
|-
|lang||de||de||Sprache der Oberfläche (für z.B. Datums-/Zeitfunktionen)
|-
|username||||String||Benutzername für eine Basic-Authentifierung *
|-
|password||||String||Passwort für eine Basic-Authentifizierung *
|}
'''*''' Derzeit wird die Basic-Authentifizierung in Kombination mit WebSockets nicht unterstützt. Die Verwendung von '''longpoll=1''' (ajax) ist daher notwendig.

===Toast-Nachrichten===
[[Datei:Ftui_toast.png|thumb|Toast-Nachrichten]]
Tablet-UI liefert Informationen darüber, was im Moment gerade passiert. Das geschieht über Toast-Nachrichten, die in der Standardeinstellung unten links im Browser auftauchen.

Wird beispielsweise ein Gerät eingeschaltet, so erscheint eine kleine Nachricht mit dem abgesetzten Befehl. Auch Fehlermeldungen und Statusinformationen werden angezeigt. Ob überhaupt und was konkret angezeigt wird, richtet sich nach dem eingestellten Debug-Level (siehe oben). Beim Debug-Level 5 werden alle Nachrichten angezeigt, bei 0 keine.

Die Position der Toast-Nachrichten kann über den Meta-Tag <code>meta name='toast_position'</code> festgelegt werden. Für oben-mittig müsste folgender Code eingefügt werden:
<pre><meta name='toast_position' content='top-center'></pre>

Möglich sind folgende Positionen:
* <code>top-left</code>
* <code>top-right</code>
* <code>bottom-left</code>
* <code>bottom-right</code>
* <code>top-center</code>
* <code>bottom-center</code>
* <code>mid-center</code>

Die maximale Anzahl an Nachrichten, die gleichzeitig angezeigt werden können, lässt sich mit <code>meta name='toast'</code> Sind maximal 2 Nachrichten gewünscht, muss folgender Meta-Tag gesetzt werden:
<pre><meta name='toast' content='2'></pre>

==Navigationsmethoden==
{{Todo|Dieser Abschnitt dient derzeit lediglich als Sammlung von Stichpunkten und muss vollständig überarbeitet werden.}}

'''Unterschied zwischen Pagetab und Pagebutton:

'''Pagetab:''' Ganze Seite austauschen -> Menü muss auf jede Seite
[[FTUI_Widget_Pagetab]]

'''Pagebutton:''' Teil der Seite austauschen -> Menü nur in erster Seite
[[FTUI_Widget_Pagebutton]]

==Gestaltung==
===Layout-Optionen===
* [[FTUI Layout Gridster|Gridster]]
* [[FTUI Layout Flex|Flex]]
* [[FTUI Layout Sheet|Tabelle]]
* [[FTUI Layout Row|Reihen]]

=== Farben ===
Es besteht die Möglichkeit, die Farbwerte in hexadezimaler Form, als RGB-Wert oder mit dem Farbnamen anzugeben. Zum Beispiel:

*HEX: #ADD8E6
*RBG: rgb(173, 216, 230)
*Namen: lightblue

Knallige Farben wie '''<span style="color: #ff0000;">#ff0000</span>''' für Rot oder '''<span style="color: #00ff00;">#00ff00</span>''' für Grün sollten vermieden werden.
Es ist besser unterhalb von #D0 (208) für die Grundfarben zu bleiben.

Empfohlene Farben sind z.B.:

*Orange: <span style="color: #aa6900;">#aa6900</span>
*Rot: <span style="color: #ad3333;">#ad3333</span>
*Grün: <span style="color: #32a054;">#32a054</span>
*Blau: <span style="color: #6699FF;">#6699FF</span>
*Grau: <span style="color: #8C8C8C;">#8C8C8C</span>

Hilfreich bei der Suche nach den Farbwerten ist zum Beispiel der Color-Picker auf dieser Seite: http://www.colorpicker.com. Für die Suche nach Farben, die einen guten Kontrast bilden, diese Webseite: http://vanisoft.pl/~lopuszanski/public/colors/

Im Ordner ''css'' der FTUI Installation finden sich einige vorbereitete Farbschemata. Diese können mit einem zusätzlichen Eintrag im <nowiki><head></nowiki>-Bereich der FTUI-Seite(n) aktiviert werden.

Hier am Beispiel eines blauen Farbschemas:
<syntaxhighlight lang="html">
<html>
<head>
[...]
<link rel="stylesheet" href="/fhem/tablet/css/fhem-blue-ui.css" />
[...]
</head>
</syntaxhighlight>

Diese Schema-Dateien ändern alle Widgets.
<gallery>
File:Theme_default.png|default
File:Theme_blue.png|fhem-blue-ui.css
File:Theme_green.png|fhem-green-ui.css
File:Theme_mobile.png|fhem-mobile-ui.css
File:Theme_darkblue.png|fhem-darkblue-ui.css
File:Theme_darkgreen.png|fhem-darkgreen-ui.css
</gallery>

Einzelne Widgets können durch Hinzufügen der jeweiligen [[#CSS-Klassen|CSS-Klasse]] geändert werden.

===CSS-Styles===
Das Layout und das Aussehen des UI kann durch diverse vorgegebene CSS-Klassen beeinflusst werden. Die verfügbaren Klassen sind im Abschnitt [[#CSS-Klassen|CSS-Klassen]] aufgeführt.

Soll das Aussehen des UI durch eigene CSS-Klassen oder durch Überschreiben der vorhandenen verändert werden, kann eine eigene CSS-Datei erstellt werden, die dann bei einem eventuellen Update von FTUI nicht überschrieben wird. Diese Datei muss den Dateinamen '''fhem-tablet-ui-user.css''' haben und im Ordner '''/fhem/tablet/css''' abgelegt werden. Sie wird dann beim Aufruf von FTUI automatisch mitgeladen.

=== CSS-Klassen ===
Nicht alle Widgets unterstützen alle hier angegebenen Klassen. Welche genau unterstützt werden, kann auf der jeweiligen Widget-Seite nachgelesen werden.

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|sheet/row/cell-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|sheet}}{{FTUI Klasse|row}}{{FTUI Klasse|cell}}{{FTUI Klasse|cell-1-x}}{{FTUI Klasse|cell-x}}{{FTUI Klasse|left-align}}{{FTUI Klasse|right-align}}{{FTUI Klasse|bottom-align}}{{FTUI Klasse|top-align}}{{FTUI Klasse|center-align}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|row/col-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|col}}{{FTUI Klasse|col-1-x}}{{FTUI Klasse|col-x}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|hbox/vbox-Layout
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|vbox}}{{FTUI Klasse|hbox}}{{FTUI Klasse|card}}{{FTUI Klasse|phone-width}}{{FTUI Klasse|full-height}}{{FTUI Klasse|full-width}}{{FTUI Klasse|grow-0}}{{FTUI Klasse|grow-1}}{{FTUI Klasse|grow-2}}{{FTUI Klasse|grow-x}}{{FTUI Klasse|items-top}}{{FTUI Klasse|items-center}}{{FTUI Klasse|items-bottom}}{{FTUI Klasse|items-space-between}}{{FTUI Klasse|items-space-around}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Generelle Klassen für die Positionierung
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|inline}}{{FTUI Klasse|newline}}{{FTUI Klasse|top-space}}{{FTUI Klasse|top-space-2x}}{{FTUI Klasse|top-space-3x}}{{FTUI Klasse|left-space}}{{FTUI Klasse|left-space-2x}}{{FTUI Klasse|left-space-3x}}{{FTUI Klasse|right-space}}{{FTUI Klasse|right-space-2x}}{{FTUI Klasse|right-space-3x}}{{FTUI Klasse|top-narrow}}{{FTUI Klasse|top-narrow-2x}}{{FTUI Klasse|top-narrow-10}}{{FTUI Klasse|left-narrow}}{{FTUI Klasse|left-narrow-2x}}{{FTUI Klasse|left-narrow-3x}}{{FTUI Klasse|right-narrow}}{{FTUI Klasse|right-narrow-2x}}{{FTUI Klasse|right-narrow-3x}}{{FTUI Klasse|centered}}{{FTUI Klasse|wider}}{{FTUI Klasse|narrow}}{{FTUI Klasse|fullsize}}{{FTUI Klasse|compressed}}{{FTUI Klasse|height-narrow}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|maxw40}}{{FTUI Klasse|doublebox-v}}{{FTUI Klasse|doublebox-h}}{{FTUI Klasse|triplebox-v}}{{FTUI Klasse|right}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Vordergrundfarben
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|red}}{{FTUI Klasse|green}}{{FTUI Klasse|blue}}{{FTUI Klasse|lightblue}}{{FTUI Klasse|orange}}{{FTUI Klasse|gray}}{{FTUI Klasse|lightgray}}{{FTUI Klasse|white}}{{FTUI Klasse|black}}{{FTUI Klasse|mint}}{{FTUI Klasse|yellow}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Hintergrundfarben
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|bg-red}}{{FTUI Klasse|bg-green}}{{FTUI Klasse|bg-blue}}{{FTUI Klasse|bg-lightblue}}{{FTUI Klasse|bg-orange}}{{FTUI Klasse|bg-gray}}{{FTUI Klasse|bg-lightgray}}{{FTUI Klasse|bg-white}}{{FTUI Klasse|bg-black}}{{FTUI Klasse|bg-mint}}{{FTUI Klasse|bg-yellow}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Rahmen
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|verticalLine}}{{FTUI Klasse|border-black}}{{FTUI Klasse|border-white}}{{FTUI Klasse|border-orange}}{{FTUI Klasse|border-red}}{{FTUI Klasse|border-green}}{{FTUI Klasse|border-mint}}{{FTUI Klasse|border-lightblue}}{{FTUI Klasse|border-blue}}{{FTUI Klasse|border-gray}}{{FTUI Klasse|border-yellow}}{{FTUI Klasse|border-lightgray}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Größen
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|mini}}{{FTUI Klasse|tiny}}{{FTUI Klasse|small}}{{FTUI Klasse|normal}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|bigger}}{{FTUI Klasse|tall}}{{FTUI Klasse|great}}{{FTUI Klasse|grande}}{{FTUI Klasse|gigantic}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Schriftstil
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|thin}}{{FTUI Klasse|bold}}{{FTUI Klasse|darker}}{{FTUI Klasse|truncate}}
|}

{|class="wikitable mw-collapsible mw-collapsed" style="width: 100%;"
!colspan="2" style="text-align: left;"|Sonstiges
|-
!class="mw-collapsible-content"|Klasse!!Beschreibung
{{FTUI Klasse|blank}}{{FTUI Klasse|transparent}}{{FTUI Klasse|half-transparent}}{{FTUI Klasse|blurry}}{{FTUI Klasse|shake}}{{FTUI Klasse|fail-shake}}{{FTUI Klasse|marquee}}{{FTUI Klasse|icon round}}{{FTUI Klasse|icon square}}{{FTUI Klasse|readonly}}{{FTUI Klasse|blink}}{{FTUI Klasse|rotate-90}}{{FTUI Klasse|horizontal}}{{FTUI Klasse|circleborder}}{{FTUI Klasse|autohide}}{{FTUI Klasse|notransmit}}{{FTUI Klasse|tap}}{{FTUI Klasse|FS20}}{{FTUI Klasse|value}}{{FTUI Klasse|novalue}}{{FTUI Klasse|timestamp}}{{FTUI Klasse|percent}}{{FTUI Klasse|nocache}}{{FTUI Klasse|fade}}{{FTUI Klasse|rotate}}{{FTUI Klasse|nolabels}}{{FTUI Klasse|default}}{{FTUI Klasse|prefetch}}{{FTUI Klasse|circulate}}{{FTUI Klasse|valueonly}}{{FTUI Klasse|positiononly}}{{FTUI Klasse|lineIndicator}}{{FTUI Klasse|barIndicator}}{{FTUI Klasse|roundIndicator}}{{FTUI Klasse|dim-tick}}{{FTUI Klasse|dim-front}}{{FTUI Klasse|dim-back}}{{FTUI Klasse|hue-tick}}{{FTUI Klasse|hue-front}}{{FTUI Klasse|hue-back}}{{FTUI Klasse|warn}}{{FTUI Klasse|activate}}{{FTUI Klasse|labelright}}{{FTUI Klasse|interlock}}{{FTUI Klasse|keepopen}}{{FTUI Klasse|noshade}}
|}

=== Icons ===
FTUI bringt einige Icons-"Schriftarten" mit, die für die Darstellung genützt werden können. Diese werden automatisch beim Start des UI eingebunden, sobald ein entsprechendes Icon-Präfix im Code der Seite vorkommt.

Verfügbare Icon-Schriftarten sind:
* Eingebaute Icons ''ftui-window'' und ''ftui-door''. Präfix '''ftui-'''. Beispiel: <code>data-icon="ftui-door"</code>
* [http://fontawesome.io/icons/ Font-Awesome]: Mehr als 500 Icons zur Auswahl. Präfix '''fa-'''. Beispiel: <code>data-icon="fa-volume-up"</code>
* [https://material.io/icons/ Material Icons]: Mehr als 900 Icons zur Auswahl. Präfix '''mi-'''. Beispiel: <code>data-icon="mi-local_gas_station"</code>
* FHEM und OpenAutomation Icons: Präfix '''fs-''' und '''oa-'''. Beispiel: <code>data-icon="oa-secur_locked"</code>
* [https://erikflowers.github.io/weather-icons/ Weather-Icons]: Präfix '''wi '''. Beispiel: <code>data-icon="wi wi-day-rain-mix"</code>

Alternativ können auch Bilder Icons (bspw. png) über CSS verwendet werden. Bspw:
<syntaxhighlight lang="html5">
<head>
<style type="text/css">
.logo-fhem {
background: url(https://wiki.fhem.de/fhemlogo.png) no-repeat;
width: 120px;
height: 132px;
background-size: contain;
}
</style>
</head>
<body>
<div data-type="symbol" data-icon="logo-fhem"></div>
</body>
</syntaxhighlight>

== Widgets ==
===Allgemeine Attribute===
Jedes Widget kann über verschiedene Attribute konfiguriert werden. Folgende Attribute gelten für alle Widgets:

{| class="wikitable"
|+allgemeine Attribute
|-
!align="right" |data-type
|Widget-Typ
|-
!align="right" |data-device
|FHEM-Name des Gerätes (mit dem Befehl 'list' bekommt man im FHEM die kpl. Liste)
|-
!align="right" |class
|CSS-Klassen für Aussehen und Formatierung des Widgets
|-
|}

{| class="wikitable"
|+Daten Empfangen
|-
!align="right" |data-get
|Reading Name
|-
!align="right" |data-get-on
|Wert für den Status on
|-
!align="right" |data-get-off
|Wert für den Status off
|-
|}

{| class="wikitable"
|+Daten Senden
|-
!align="right" |data-set
|Reading Name
|-
!align="right" |data-set-on
|Wert für den Status on
|-
!align="right" |data-set-off
|Wert für den Status off
|-
|}

Widget-spezifische Attribute können auf der jeweiligen Widget-Seite nachgelesen werden.

=== Integrierte Widgets ===
Folgende Widgets sind direkt in FHEM Tablet UI integriert und können "out of the box" verwendet werden.

* [[FTUI Widget Button|button]]: Variante der push und switch Widgets, die entweder einen URL ansteuern oder einen FHEM-Befehl absetzen kann
* [[FTUI Widget Checkbox|checkbox]]: Umschalter zwischen zwei definierten Zuständen
* [[FTUI Widget Circlemenu|circlemenu]]: Mehrere Widgets hinter einem Widget verborgen, trotz des 'circle' im Namen kann das Menue jetzt auch horizontal oder vertikal ausgeklappt werden
* [[FTUI Widget Clock|clock]]: Stellt eine einfache Uhr zur Verfügung
* [[FTUI Widget Colorwheel|colorwheel]]: Farbpalette zur Auswahl von Farben
* [[FTUI Widget Controlbutton|controlbutton]]: iOS-ähnlicher Button zum Schalten zwischen zwei Zuständen (z.B. on / off)
* [[FTUI Widget Controller|controller]]: iOS-ähnlicher vertikaler Schieberegler zum Einstellen eines Wertes
* [[FTUI Widget Datetimepicker|datetimepicker]]: Erstellt eine Auswahl für Datum/Uhrzeit
* [[FTUI Widget Departure|departure]]: Abfahrtszeiten öffentlicher Verkehrsmittel
* [[FTUI Widget Dimmer|dimmer]]: Ein-/Aus-Button mit integriertem Schieberegler für z.B. einen Dim-Wert
* [[FTUI Widget Eventmonitor|eventmonitor]]:
* [[FTUI Widget Homestatus|homestatus]]: Auswahl für vier oder fünf definierte Stati eines Objects (z.B.: FHEM Residents)
* [[FTUI Widget Html|html]]:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/iframe iframe]: Widget zum Einbinden externer Inhalte in einem Iframe
* [[FTUI Widget Image|image]]: Zeigt ein Bild, dessen URL fest vorgegeben oder aus einem Device-Reading gelesen werden kann
* [[FTUI Widget Input|input]]: Erstellen eines Texteingabefeldes
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/joinedlabel joinedlabel]: verbindet mehrere Readings zu einem Feld
* [[FTUI Widget Klimatrend|klimatrend]]: wandelt Daten aus dem statistics-Modul in einen Pfeil um, der den aktuellen Trend anzeigt
* [[FTUI Widget Knob|knob]]: Erstellt einen Statusbalken auf einer Kreisbahn
* [[FTUI Widget Label|label]]: Reading als Text anzeigen
* [[FTUI Widget Level|level]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert
* [[FTUI Widget Link|link]]: Erstellt einen Link oder Button zum Aufrufen von URLs oder Senden von Befehlen an FHEM
* [[FTUI Widget Medialist|medialist]]:
* [[FTUI Widget Multistatebutton|multistatebutton]]: Variante des push-Widgets, welches den set-Befehl abhängig vom gelesenen Status ändert
* [[FTUI Widget Notify|notify]]: Blendet ein Hinweisfenster im Browser ein
* [[FTUI Widget Pagebutton|pagebutton]]: Button, mit dem auf andere Seiten gesprungen werden kann. Eignet sich gut für eine Navigation
* [[FTUI Widget Pagetab|pagetab]]: Tauscht den Inhalt einer Seite durch den einer anderen. Eignet sich gut für ein Navigationsmenü
* [[FTUI Widget Playstream|playstream]]: Abspielen eines Webradio-Streams per Button
* [[FTUI Widget Popup|popup]]: Öffnet ein Popup nach einem Klick auf ein Widget oder HTML-Element
* [[FTUI Widget Progress|progress]]: Zeigt einen Prozentwert in Form einer runden Fortschrittsleiste
* [[FTUI_Widget_Push|push]]: Button, mit dem ein Befehl an FHEM gesendet werden kann
* [[FTUI Widget Range|range]]: Erstellt vertikale Balken, die einen Wertebereich in unterschiedlichen Farben darstellen
* [[FTUI Widget Readingsgroup|readingsgroup]]: Zeigt eine Readingsgroup an, wie sie in FHEM definiert wurde
* [[FTUI Widget Rotor|rotor]]: Animiertes Umschalten von zwei oder mehr Widgets an einer Position
* [[FTUI Widget Scale|scale]]: Vertikale oder horizontale Leiste zur Anzeige von Werten zwischen einem Minimal- und einem Maximalwert
* [[FTUI_Widget_Select|select]]: Combobox, die eine Liste an Werten zur Auswahl anzeigt
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/settimer settimer]: Zum Anzeigen und Einstellen einer Uhrzeit
* [[FTUI Widget Simplechart|simplechart]]: Einfaches XY-Diagramm zur Anzeige eines Wertes, der direkt aus einem FHEM-Logfile gelesen wird
* [[FTUI Widget Slideout|slideout]]:
* [[FTUI Widget Slider|slider]]: Vertikaler Schieberegler zum Einstellen eines Wertes
* [[FTUI Widget Spinner|spinner]]: Element, um Werte durch Drücken auf Plus-/Minus- oder Höher-/Tiefer-Icons zu ändern
* [[FTUI Widget Swiper|swiper]]: Bietet die Möglichkeit, durch Wischen zwischen verschiedenen Seiten zu wechseln
* [[FTUI Widget Switch|switch]]: Button, um zwischen zwei Zuständen zu schalten (z.B. on / off)
* [[FTUI Widget Symbol|symbol]]: Status eines Devices als Symbol darstellen (z.B. Fenster offen)
* [[FTUI Widget Theme|theme]]: Kontextspezifisches Design
* [[FTUI Widget Thermostat|thermostat]]: Anzeige für Heizungsthermostate, mit der die gewünschte Temperatur eingestellt werden kann
* [[FTUI Widget Volume|volume]]: Einstellscheibe zur Änderung eines einzelnen Wertes
* [[FTUI Widget Weather|weather]]: Wettersymbol anzeigen
* [[FTUI Widget Weatherdetail|weatherdetail]]: Detaillierte Wettervorhersage über 4 Tage (Nutzt das Proplanta Modul)
* [[FTUI Widget WindDirection|wind_direction]]: Anzeige der Windrichtung auf einer Windrose

===3rd Party Widgets===
Für diese Widgets kann nicht sichergestellt werden, dass sie mit der jeweils aktuellen Version von FTUI funktionieren.
* [[FTUI Widget Agenda|agenda]]: Zeigt Kalendereinträge in einer Listenform an
* [[FTUI_Widget_Analogclock|analogclock]]: Analoguhr
* [[FTUI Widget Calview|calview]]: Zeigt Einträge aus einem [[CALVIEW]]-Device an
* [[FTUI Widget Chart|chart]]: Diagramm mit ähnlichen Möglichkeiten wie die FHEM-Plots
* [[FTUI Widget Classchanger|classchanger]]: Ändert seine CSS-Klassen je nach Status eines Devices
* [[FTUI Widget Clicksound|clicksound]]: Mit dem Widget "clicksound" können Sounds an Click-Events von Elementen gebunden werden.
* [[FTUI Widget Filelog|filelog]]:
* [[FTUI Widget Fullcalview|fullcalview]]:
* [[FTUI Widget Gds|gds]]:
* [https://forum.fhem.de/index.php/topic,78379.msg703359.html#msg703359 gmaps]: Kartendarstellung mit Google Maps API
* [[FTUI Widget Highchart|highchart]]:
* [[FTUI Widget Highchart3d|highchart3d]]:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/itunes_artwork itunes_artwork]: itunes_artwork durchsucht die iTunes-Datenbank anhand eines Arrays von beliebigen Suchworten nach einem Cover-Artwork und zeigt dieses an.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/javascript javascript]: Ermöglicht die Ausführung beliebigen Javascript-Codes aus einem Reading.
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/kodinowplaying kodinowplaying]: zeigt Informationen zu grade in KODI gespielten Medien in Form eines Labels an.
* [[FTUI Widget Loading|loading]]:
* [[FTUI Widget Meteogram|meteogram]]:
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/mpdnowplaying mpdnowplaying]: Zeigt Titelinformationen eines per MPD-Modul angebundenen Music Player Daemon an.
* [https://forum.fhem.de/index.php/topic,79283.msg712855.html#msg712855 pinpad]: Pinpad für z.B. eine Alarmanlage
* [https://forum.fhem.de/index.php/topic,76643.msg685472.html#msg685472 postme]: Liste des PostMe-Devices anzeigen
* [https://github.com/nesges/Widgets-for-fhem-tablet-ui/wiki/reload reload]: auslösen eine Pagereloads
* [[FTUI Widget Screensaver|screensaver]]:
* [https://forum.fhem.de/index.php/topic,73497.0.html scrolllabel]: Texte in Laufschrift darstellen
* [[FTUI Widget Svgplot|svgplot]]:
* [https://forum.fhem.de/index.php?topic=82883.msg750237#msg750237 todoist]: einfaches widget für todoist
* [[FTUI Widget Tts|tts]]: Sprachausgabe eines Textes aus einem Reading auf dem Endgerät.
* [[FTUI Widget UWZ|uwz]]: Anzeige der Warnungen der Unwetterzentrale
* [[FTUI Widget Wakeup|wakeup]]:
* [https://github.com/svenson08/ftui-weekdaytimer-widget wdtimer]: Visualisierung des [[WeekdayTimer]] Modul
* [[FTUI Widget Weekprofile|weekprofile]]: Visualisierung des [[weekprofile]] Moduls

===Anwendungsbeispiele===
Durch die Verbindung von Widgets mit dem FHEM-Umfeld entstehen Lösungen für typische Anwendungen.
* [[FTUI_Beispiel_Datetimepicker_für_Timer|Datetimepicker für Timer]]: Oberfläche für Timereinstellungen
* [[FTUI_Beispiel_Mondphase|Mondphase]]: Visuelle Darstellung der Mondphase
* [[FTUI_Beispiel_Webradio|Webradio]]
* [[FTUI Beispiel Zeitschaltung|Verschiedene Zeitschaltungen]]

==Templates==
Kommt ein bestimmtes "Code-Fragment" auf mehreren Seiten oder öfter pro Seite vor, bietet FTUI die Option, Templates zu erstellen. Diese werden einmal gebaut und können dann mit dem Attribut '''data-template''' nach Belieben in eine Seite eingefügt werden. Dabei besteht auch die Möglichkeit, Variablen zu verwenden.

Die Variablennamen sollten möglichst eindeutig und unverwechselbar gewählt werden, da bei der Verwendung von Templates im Prinzip Suchen & Ersetzen angewendet wird. Verwendet man beispielsweise die Variablen '''dev:Thermostat_Kueche''' und '''dev_temp:temperatue''', so kann es passieren, dass die Ergebnisse im erzeugten Code dann '''Thermostat_Kueche''' und '''Thermostat_Kueche_temp''' lauten, statt wie gewünscht '''Thermostat_Kueche''' und '''temperature'''. Um dies zu vermeiden, sollten die Variablen besser '''device:Thermostat_Kueche''' und '''temp:temperatue''' lauten.

Im Folgenden ein paar Beispiele, wie Templates verwendet werden können.

===Einzelnes Widget===
Soll ein Widget an mehreren Stellen in exakt der selben Ausführung eingebunden werden, kann diese Widget in einer eigenen Datei erstellt und diese dann auf den Zielseiten automatisch mitgeladen werden.

;Template-Seite
Die Template-Seite soll in diesem Beispiel ''template_symbol.html'' genannt werden. Diese wird daher zuerst im FTUI-Verzeichnis erstellt.
<syntaxhighlight lang="html">
<div data-type="symbol"
data-device="dummy1">
</syntaxhighlight>

;Haupt-Seite
Die oben erstellte Template-Seite kann nun in jeder gewünschten Seite eingebunden werden.
<syntaxhighlight lang="html" highlight="6">
[...]
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizey="1" data-sizex="1">
<div data-template="template_symbol.html"></div>
</li>
</ul>
</div>
</body>
[...]
</syntaxhighlight>

===Gridster-Element===
Natürlich kann auch ein ganzes Gridster-Element - in diesem Fall ein Menü - als Template eingebunden werden.
<syntaxhighlight lang="html">
<li data-row="1" data-col="1" data-sizex="1" data-sizey="4" data-template="menu.html"></li>
</syntaxhighlight>

=== Widget-Gruppen ===
Die Template-Datei des [[#Einzelnes Widget|ersten Beispiels]] kann natürlich auch mehrere Widgets auf einmal enthalten.

=== Verwendung von Variablen ===
==== Einfaches Beispiel ====
Oft wird ein und dasselbe Widget für verschiedenen Devices verwendet. Um nicht für jedes Device das Widget neu kopieren zu müssen (bzw. bei Änderungen alle Seiten ausbessern zu müssen), kann ein Template verwendet werden, dem einfach per Parameter mitgeteilt wird, von welchem Device es gerade die Daten empfangen soll.

In diesem Beispiel wird ein Template erzeugt, dass nur die Temperatur verschiedenen Thermostate mittels eines [[FTUI Widget Label|Label-Widgets]] anzeigt.

;Template-Seite
Die Template-Seite enthält nur ein einfaches Label-Widget und wird in diesem Beispiel ''template_label.html'' genannt. Um sie für mehrere Devices verwenden zu können, wird im Attribut '''data-device''' der Name des eigentlichen Devices durch den Parameter '''par01''' ersetzt.
<syntaxhighlight lang="html" highlight="2">
<div data-type="label"
data-device="par01"
data-get="measured-temp"></div>
</syntaxhighlight>

;Haupt-Seite
Auf der Haupt-Seite wird die Template-Seite mit dem Attribut '''data-template''' eingebunden und ihr via Attribut '''data-parameter''' das jeweils gewünschte Device übergeben.
<syntaxhighlight lang="html">
[...]
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat1"}'></div>
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat2"}'></div>
<div data-template="template_label.html" data-parameter='{"par01":"Thermostat3"}'></div>
[...]
</syntaxhighlight>

==== Wetter-Slider mit Template ====
In diesem Beispiel wird ein [[FTUI Widget Slider|Slider-Widget]] erstellt, welches die verschiedenen Tage eines Wetterberichtes anzeigt. Dabei wird für den Wetterbericht des jeweiligen Tages immer dasselbe Template verwendet um nicht für jeden Tag ein eigenes Widget schreiben zu müssen.

;Template-Seite
<syntaxhighlight lang="html">
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="par01" data-unit="°C"></div>
<div class="inline">
<div data-type="label" data-device="AgroWeather" data-get="par02"></div>
<div data-type="weather" data-device="AgroWeather" data-get="par02"></div>
min: <div data-type="label" data-device="AgroWeather" data-get="par03" data-unit="°C"></div>
</div>
</div>
<div class="left">
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().eeee()+','"></div>
<div data-type="label" data-device="AgroWeather" data-get="par04" data-substitution="toDate().ddmm()"></div>
</div>
</syntaxhighlight>

;Haupt-Seite
In der Haupt-Seite wird das Template dann für jede Slider-Seite eingebunden und das Reading für den jeweiligen Tag via Parameter übergeben.
<syntaxhighlight lang="html">
[...]
<div data-type="swiper">
<ul>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc0_tempMax","par02":"fc0_weatherDay","par03":"fc0_tempMin","par04":"fc0_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc1_tempMax","par02":"fc1_weatherDay","par03":"fc1_tempMin","par04":"fc1_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc2_tempMax","par02":"fc2_weatherDay","par03":"fc2_tempMin","par04":"fc2_date"}'></li>
<li data-template="templates/wetter.html" data-parameter='{"par01":"fc3_tempMax","par02":"fc3_weatherDay","par03":"fc3_tempMin","par04":"fc3_date"}'></li>
</ul>
</div>
[...]
</syntaxhighlight>

== JavaScript-Funktionen ==
Neben den Widgets können auch einige JavaScript-Funktionen verwendet werden, um Befehle an FHEM zu senden.

Folgende Zeile setzt einen direkten Befehl an FHEM ab (<code>set dummy1 off</code>):
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('set dummy1 off')">Dummy1 aus</div></syntaxhighlight>

Diese Zeile veranlasst FHEM dazu, eine Funktion aus der 99_myUtils.pm auszuführen (<code>myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")</code>):
<syntaxhighlight lang="html"><div onclick="ftui.setFhemStatus('{myUtils_HeizungUpDown("WZ.Thermostat_Climate","up")}')">+</div></syntaxhighlight>

Ein Beispiel, wie ein Kommando an FHEM gesendet wird und gleichzeitig der Wert eines bereits in FTUI angezeigten Readings verwendet werden kann:
<syntaxhighlight lang="html">
<div data-type="label" data-device="dummy1" data-get="temperature"></div>
<div onClick="ftui.setFhemStatus('set dummy2 '+ftui.getDeviceParameter('dummy1','temperature').val);">Senden</div>
</syntaxhighlight>

== Eigene Widgets erstellen ==
Wie eigenen Widgets für FTUI erstellt werden können, ist auf der Seite [[FTUI eigene Widgets]] beschrieben.

Eine Schritt für Schritt Anleitung für das erste eigene Widget gibts hier [[FTUI eigene Widgets - Beispiel]]

== FAQ ==
Häufig gestellte Fragen zum FHEM Tablet UI sind in der [[FHEM Tablet UI FAQ]] zusammengestellt.

== Links ==
* [https://github.com/knowthelist/fhem-tablet-ui Projekt auf Github]
* {{Link2Forum|Topic=34233|LinkText=Forums-Beitrag}}
* [[FTUI_Snippets|Snippets]]
* [http://knowthelist.github.io/fhem/tablet/demo_widgets.html Live-Demos]
* [https://waschto.eu/fhem-und-tabletui-livedemo/ FHEM und TabletUI Live-Demo]
* {{Link2Forum|Topic=37378|LinkText=User-Demos}}
* [https://github.com/ovibox/fhem-ftui-user-demos Download der User-Demo-Dateien]

[[Kategorie:FHEM Tablet UI|!]]

FTUI Widget Theme

2018-09-10T15:10:10Z

Ulm32b: /* Beispiele */ Bilder zu den Stylesheets zur Hauptseite FTUI verschoben und hier durch einen Link ersetzt.

Das [[{{PAGENAME}}|Theme Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem - gesteuert über ein Device - ein Stylesheet aktiviert und deaktiviert werden kann. Damit lassen sich kontextspezifische Designs realisieren, z.B. abhängig von [[FTUI Widget Homestatus|Homestatus]], Tageszeit, Jahreszeit, ...

<gallery>
File:FTUI_Theme_Tag.png
File:FTUI_Theme_Abend.png
File:FTUI_Theme_Nacht.png
</gallery>

==Attribute==
{| class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-device'''||FHEM-Device, dessen Reading ausgewertet werden soll||||
|-
|'''data-get'''||Name des Readings, das den Wert enthält||STATE||
|-
|'''data-get-on'''||Wert, bei dem die css-Datei aktiviert wird||true,1,on||
|-
|'''data-get-off'''||Wert, bei dem die css-Datei deaktiviert wird||!on||
|-
|'''href'''||Pfad und Name der angepassten css-Datei||||href="css/Layout_Tag.css"
|}

Das Widget muss im ''<Head>'' innerhalb eines ''<link rel="stylesheet" ...>'' angeordnet werden, vgl. Beispiel.
==Hinweise==
*Man darf die ''css/fhem-tablet-ui.css'' nicht deaktivieren.

==Beispiele==
===Vordefinierte Stylesheets===
Im Lieferumfang von FTUI sind bereits vordefinierte Stylesheets enthalten, welche direkt eingebunden werden können:
* fhem-blue-ui.css
* fhem-green-ui.css
* fhem-mobile-ui.css
* fhem-darkblue-ui.css
* fhem-darkgreen-ui.css
Zugehörige Beispielbilder siehe [[FHEM_Tablet_UI#Farben|Farben in FTUI]].

===Hintergrundfarbe bei Tag===
Tagsüber soll die Hintergrundfarbe geändert werden. Ausgewertet wird hierzu das FHEM-Device ''Twilight''. Bei Tageslicht nimmt dessen Reading ''light'' den Wert ''"6"'' an.
<syntaxhighlight lang="html">
defmod Daemmerung Twilight <latitude> <longitude>
</syntaxhighlight>

Die Datei ''"Layout_Tag.css"'' enthält die Farbdefinition:
<syntaxhighlight lang="html">
body {
background-color: #3A374A !important;
}
</syntaxhighlight>
In der HTML-Datei wird im ''<Head>'' das Widget platziert:
<syntaxhighlight lang="html">
<link rel="stylesheet" href="css/Layout_Tag.css" data-type="theme" data-device="Daemmerung" data-get="light"
data-get-on="6" data-get-off="!6" />
</syntaxhighlight>

===Umschaltung zwischen alternativen Stylesheets (hier day.css und night.css)===
<syntaxhighlight lang="html">
<link rel="stylesheet" href="css/day.css" data-type="theme"
data-device="ftui1" data-get="theme" data-get-on="day" data-get-off="!day" />
<link rel="stylesheet" href="css/night.css" data-type="theme"
data-device="ftui1" data-get="theme" data-get-on="night" data-get-off="!night" />
</syntaxhighlight>

===Hintergrundbilder für die Dämmerung===
Das FHEM-Device ''Twilight'' unterscheidet zwischen astronomischer, nautischer und bürgerlicher Dämmerung. Auf dieser Basis können Tagesanfang und -ende einfach mit abgestuften Hintergrundbildern verknüpft werden.
<gallery>
File:FTUI_Daemmerung_1.jpg
File:FTUI_Daemmerung_2.jpg
File:FTUI_Daemmerung_3.jpg
</gallery>

==Weitere Informationen==
*Ausrollung des Widgets in einem [https://forum.fhem.de/index.php/topic,69259.0.html Forumsbeitrag]

[[Kategorie:FHEM Tablet UI|theme]]