http://wiki.fhem.de/w/api.php?action=feedcontributions&feedformat=atom&user=Andreas+rFHEMWiki - Benutzerbeiträge [de]2026-05-01T00:25:11ZBenutzerbeiträgeMediaWiki 1.43.6http://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=39969FTUI3 Best Practices2025-02-17T15:36:36Z<p>Andreas r: /* Anwendungsbeispiele */</p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]<br />
# [[FTUI3 HTML Controls|Anpassen von Standard HTML Eigenschaften]]<br />
# [[FTUI3 Readingsgroup|Anzeige einer Readingsgroup]]<br />
# [[FTUI3 DWD Wettervorhersage|Anzeige einer DWD-Wettervorhersage]]<br />
# [[FTUI3 Scrollbares Label|Scrollbares Label]]<br />
# [[FTUI3 Testinstanz|FTUI3 in Testinstanz und Produktivinstanz aufteilen]]<br />
# [[FTUI3 Proplanta Wetter| Wetteranzeige mit Proplanta Device]]<br />
# [[FTUI3 Befehle an FHEM senden| Befehle direkt an FHEM senden]]<br />
# [[FTUI3 mehrere Readings|mehrere Readings gleichzeitig auswerten]]<br />
# [[FTUI3 Inhalte an FHEM senden]]<br />
# [[FTUI3 Pipelines|Pipes verwenden]]<br />
# [[FTUI3 Inhalte in JavaScript verwenden]]<br />
# wird fortgesetzt<br />
<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:FHEM Tablet UI V3]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=39627FTUI3 Best Practices2024-10-29T10:01:04Z<p>Andreas r: /* Anwendungsbeispiele */</p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]<br />
# [[FTUI3 HTML Controls|Anpassen von Standard HTML Eigenschaften]]<br />
# [[FTUI3 Readingsgroup|Anzeige einer Readingsgroup]]<br />
# [[FTUI3 DWD Wettervorhersage|Anzeige einer DWD-Wettervorhersage]]<br />
# [[FTUI3 Scrollbares Label|Scrollbares Label]]<br />
# [[FTUI3 Testinstanz|FTUI3 in Testinstanz und Produktivinstanz aufteilen]]<br />
# [[FTUI3 Proplanta Wetter| Wetteranzeige mit Proplanta Device]]<br />
# [[FTUI3 Befehle an FHEM senden| Befehle direkt an FHEM senden]]<br />
# [[FTUI3 mehrere Readings|mehrere Readings gleichzeitig auswerten]]<br />
# [[FTUI3 Inhalte an FHEM senden]]<br />
# [[FTUI3 Pipelines|Pipes verwenden]]<br />
# wird fortgesetzt<br />
<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:FHEM Tablet UI V3]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Pipelines&diff=39626FTUI3 Pipelines2024-10-29T09:59:38Z<p>Andreas r: Erklärungen hinzugefügt</p>
<hr />
<div>==Verwendung von FTUI3 Pipes==<br />
Das ftui.binding.js-Modul bietet eine leistungsfähige und flexible Möglichkeit, Daten direkt aus FHEM (einem Heimautomatisierungssystem) zu binden und im FTUI-Frontend anzuzeigen. Die Bindings ermöglichen eine Verbindung zwischen HTML-Attributen und FHEM-Daten sowie die Transformation der Daten mithilfe von "Pipes".<br />
<br />
Jedes Binding folgt einem standardisierten Syntaxmuster:<syntaxhighlight lang="html"><br />
<ftui-element [attribut]="DeviceName:reading | transformation"></ftui-element><br />
</syntaxhighlight><br />
<br />
====DeviceName:====<br />
Der Name des FHEM-Geräts<br />
<br />
====reading====<br />
Der spezifische Status oder Wert des Geräts, der ausgelesen werden soll<br />
<br />
====transformation====<br />
Optional können mehrere Transformationen (sog. "Pipes") verwendet werden, um den Wert zu formatieren oder anzupassen.<br />
<br />
===Einfaches Input-Pipe Beispiel===<br />
Dieses Beispiel zeigt die Verwendung eines Bindings, das eine direkte Umwandlung des Wertes mittels der `toInt()` Pipe ausfüh<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | toInt()"></ftui-label><br />
</syntaxhighlight><br />
===Beispiel für Pipe-Kombinationen===<br />
Es ist möglich, mehrere Pipes zu kombinieren, um komplexe Transformationen durchzuführen. In diesem Beispiel wird der Wert aus dem Reading `state` extrahiert und durch mehrere Pipes transformiert:<syntaxhighlight lang="html"><br />
<ftui-label [text]="AgroWeather:state | part(4) | toInt() | multiply(2) | round(1)"><br />
</syntaxhighlight>Dieses Beispiel zeigt, dass der Wert zuerst in einen bestimmten Teil (`part(4)`) aufgeteilt, dann in eine Ganzzahl (`toInt()`) umgewandelt, verdoppelt (`multiply(2)`) und schließlich auf eine Dezimalstelle gerundet wird (`round(1)`). <br />
<br />
===Beispiel für Ausgabe-Bindings===<br />
Bindings können auch dazu verwendet werden, Werte zurück in FHEM zu schreiben. Hier wird der HEX-Wert eines Farbpickers bearbeitet und als RGB-Wert an ein Gerät gesendet.<syntaxhighlight lang="html"><br />
<ftui-colorpicker (hex)="replace('#',) | HUEDevice6:rgb"></ftui-colorpicker><br />
</syntaxhighlight><br />
==Verfügbare Transformationsfunktionen (Pipes)==<br />
<br />
===1. toInt()===<br />
<br />
====Beschreibung====<br />
Wandelt den Wert in eine Ganzzahl um.<br />
<br />
====Beispiel====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | toInt()"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
===2. toFloat()===<br />
<br />
====Beschreibung ====<br />
Wandelt den Wert in eine Fließkommazahl um.<br />
<br />
====Beispiel====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | toFloat()"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
===3. round(digits)===<br />
<br />
====Beschreibung====<br />
Rundet den Wert auf die angegebene Anzahl von Nachkommastellen.<br />
<br />
====Parameter====<br />
`digits` - Anzahl der Nachkommastellen.<br />
<br />
====Beispiel====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | round(2)"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
===4. multiply(factor)===<br />
<br />
====Beschreibung====<br />
Multipliziert den Wert mit einem bestimmten Faktor.<br />
<br />
====Parameter ====<br />
`factor` - Multiplikationsfaktor.<br />
<br />
====Beispiel====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | multiply(1.8)"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
===5. divide(divisor)===<br />
<br />
====Beschreibung====<br />
Teilt den Wert durch den angegebenen Divisor.<br />
<br />
====Parameter====<br />
`divisor` - Teiler.<br />
<br />
====Beispiel====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | divide(10)"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
===6. add(addend)===<br />
<br />
====Beschreibung====<br />
Addiert einen bestimmten Wert zum aktuellen Wert.<br />
<br />
====Parameter====<br />
`addend` - Der Wert, der addiert wird.<br />
<br />
====Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | add(10)"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
===7. subtract(subtrahend)===<br />
<br />
====Beschreibung====<br />
Subtrahiert einen bestimmten Wert vom aktuellen Wert.<br />
<br />
====Parameter====<br />
`subtrahend` - Der Wert, der subtrahiert wird.<br />
<br />
====Beispiel====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | subtract(5)"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
===8. replace(search, replacement)===<br />
<br />
====Beschreibung====<br />
Ersetzt alle Vorkommen eines bestimmten Substrings durch einen neuen String.<br />
<br />
====Parameter====<br />
`search` - Der zu ersetzende String; `replacement` - Der neue String.<br />
<br />
====Beispiel====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="'#FF5733' | replace('#', '')"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
===9. part(index)===<br />
<br />
====Beschreibung====<br />
Extrahiert ein bestimmtes Segment aus einem strukturierten Wert (z.B. durch Leerzeichen getrennte Werte).<br />
<br />
====Parameter====<br />
`index` - Der Index des zu extrahierenden Teils.<br />
<br />
====Beispiel====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="SensorData:state | part(2)"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
===10. uppercase()===<br />
<br />
====Beschreibung====<br />
Wandelt den String in Großbuchstaben um.<br />
<br />
====Beispiel====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="Status:state | uppercase()"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
===11. lowercase()===<br />
<br />
====Beschreibung====<br />
Wandelt den String in Kleinbuchstaben um.<br />
<br />
====Beispiel====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="Status:state | lowercase()"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
===12. format(formatString)===<br />
<br />
====Beschreibung====<br />
Formatiert den Wert entsprechend einem angegebenen Format-String.<br />
<br />
====Parameter====<br />
`formatString` - Das Format, z.B. `"%.2f"` für zwei Dezimalstellen.<br />
<br />
====Beispiel====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | format('%.1f')"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
===13. timestamp()===<br />
<br />
====Beschreibung====<br />
Wandelt das Datum in einen Zeitstempel um.<br />
<br />
====Beispiel====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="DateSensor:state | timestamp()"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
===14. unit(unitString)===<br />
<br />
====Beschreibung====<br />
Fügt eine Einheit an den Wert an.<br />
<br />
====Parameter====<br />
`unitString` - Die Einheit, die angehängt wird.<br />
<br />
====Beispiel====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | unit('°C')"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
===15. map(mappingString)===<br />
<br />
====Beschreibung====<br />
Mappt einen Wert auf eine vorgegebene Zeichenkette basierend auf einer Mapping-Tabelle.<br />
<br />
====Parameter====<br />
`mappingString` - Eine Mapping-Zeichenkette, die Ein- und Ausgangswerte verbindet, z.B. `"0=Aus,1=Ein"`.<br />
<br />
====Beispiel====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="Status:state | map('0=Off,1=On')"></ftui-label><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI V3]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Pipelines&diff=39625FTUI3 Pipelines2024-10-29T09:49:08Z<p>Andreas r: </p>
<hr />
<div>=== 1. toInt() ===<br />
<br />
==== Beschreibung ====<br />
Wandelt den Wert in eine Ganzzahl um.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | toInt()"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== 2. toFloat() ===<br />
<br />
==== Beschreibung ====<br />
Wandelt den Wert in eine Fließkommazahl um.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | toFloat()"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== 3. round(digits) ===<br />
<br />
==== Beschreibung ====<br />
Rundet den Wert auf die angegebene Anzahl von Nachkommastellen.<br />
<br />
==== Parameter ====<br />
`digits` - Anzahl der Nachkommastellen.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | round(2)"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== 4. multiply(factor) ===<br />
<br />
==== Beschreibung ====<br />
Multipliziert den Wert mit einem bestimmten Faktor.<br />
<br />
==== Parameter ====<br />
`factor` - Multiplikationsfaktor.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | multiply(1.8)"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== 5. divide(divisor) ===<br />
<br />
==== Beschreibung ====<br />
Teilt den Wert durch den angegebenen Divisor.<br />
<br />
==== Parameter ====<br />
`divisor` - Teiler.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | divide(10)"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== 6. add(addend) ===<br />
<br />
==== Beschreibung ====<br />
Addiert einen bestimmten Wert zum aktuellen Wert.<br />
<br />
==== Parameter ====<br />
`addend` - Der Wert, der addiert wird.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | add(10)"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== 7. subtract(subtrahend) ===<br />
<br />
==== Beschreibung ====<br />
Subtrahiert einen bestimmten Wert vom aktuellen Wert.<br />
<br />
==== Parameter ====<br />
`subtrahend` - Der Wert, der subtrahiert wird.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | subtract(5)"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== 8. replace(search, replacement) ===<br />
<br />
==== Beschreibung ====<br />
Ersetzt alle Vorkommen eines bestimmten Substrings durch einen neuen String.<br />
<br />
==== Parameter ====<br />
`search` - Der zu ersetzende String; `replacement` - Der neue String.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="'#FF5733' | replace('#', '')"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== 9. part(index) ===<br />
<br />
==== Beschreibung ====<br />
Extrahiert ein bestimmtes Segment aus einem strukturierten Wert (z.B. durch Leerzeichen getrennte Werte).<br />
<br />
==== Parameter ====<br />
`index` - Der Index des zu extrahierenden Teils.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="SensorData:state | part(2)"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== 10. uppercase() ===<br />
<br />
==== Beschreibung ====<br />
Wandelt den String in Großbuchstaben um.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="Status:state | uppercase()"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== 11. lowercase() ===<br />
<br />
==== Beschreibung ====<br />
Wandelt den String in Kleinbuchstaben um.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="Status:state | lowercase()"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== 12. format(formatString) ===<br />
<br />
==== Beschreibung ====<br />
Formatiert den Wert entsprechend einem angegebenen Format-String.<br />
<br />
==== Parameter ====<br />
`formatString` - Das Format, z.B. `"%.2f"` für zwei Dezimalstellen.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | format('%.1f')"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== 13. timestamp() ===<br />
<br />
==== Beschreibung ====<br />
Wandelt das Datum in einen Zeitstempel um.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="DateSensor:state | timestamp()"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== 14. unit(unitString) ===<br />
<br />
==== Beschreibung ====<br />
Fügt eine Einheit an den Wert an.<br />
<br />
==== Parameter ====<br />
`unitString` - Die Einheit, die angehängt wird.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="TemperaturSensor:state | unit('°C')"></ftui-label><br />
</syntaxhighlight><br />
<br />
<br />
<br />
=== 15. map(mappingString) ===<br />
<br />
==== Beschreibung ====<br />
Mappt einen Wert auf eine vorgegebene Zeichenkette basierend auf einer Mapping-Tabelle.<br />
<br />
==== Parameter ====<br />
`mappingString` - Eine Mapping-Zeichenkette, die Ein- und Ausgangswerte verbindet, z.B. `"0=Aus,1=Ein"`.<br />
<br />
==== Beispiel ====<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="Status:state | map('0=Off,1=On')"></ftui-label><br />
</syntaxhighlight><br />
<br />
[[Kategorie:FHEM Tablet UI V3]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Inhalte_an_FHEM_senden&diff=39624FTUI3 Inhalte an FHEM senden2024-10-29T08:59:44Z<p>Andreas r: Die Seite wurde neu angelegt: „== Zielsetzung == Wie können Werte aus FTUI3 Controls zurück an FHEM geschickt werden, um z. B. z.B. in ein Reading zu schreiben oder "direkt" per @click="sendFHEM..." auszuführen? == Umsetzung == Zunächst müssen die Controls (hier zum Beispiel drei Dropdowns), die Werte an FHEM verschicken sollen, mit einer ID versehen werden: <syntaxhighlight lang="html"> <ftui-dropdown id="mydevice" list=",dummy1,dummy2,dummy3" value="dummy1"></ftui-dropdown> <ft…“</p>
<hr />
<div>== Zielsetzung ==<br />
Wie können Werte aus FTUI3 Controls zurück an FHEM geschickt werden, um z. B. z.B. in ein Reading zu schreiben oder "direkt" per @click="sendFHEM..." auszuführen?<br />
<br />
== Umsetzung ==<br />
Zunächst müssen die Controls (hier zum Beispiel drei Dropdowns), die Werte an FHEM verschicken sollen, mit einer ID versehen werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-dropdown id="mydevice" list=",dummy1,dummy2,dummy3" value="dummy1"></ftui-dropdown><br />
<ftui-dropdown id="myreading" list=",log1,log2" value="log1"></ftui-dropdown><br />
<ftui-dropdown id="myvalue" list=",10,20,30,40" value="10"></ftui-dropdown><br />
</syntaxhighlight><br />
<br />
Zusätzlich benötigt man noch einen Button, der die Inhalte dann verschickt:<br />
<syntaxhighlight lang="html"><br />
<ftui-button @click="sendFhem(`setreading ${window.mydevice.value} ${window.myreading.value} ${window.myvalue.value}`)"><br />
</ftui-button><br />
</syntaxhighlight><br />
<br />
Über die ID kann dann auf die einzelnen Werte zugegriffen werden. Zu beachten ist dabei die Verwendung der einzelnen Back-Hochkommas (`...`)<br />
<br />
[[Kategorie:FHEM Tablet UI V3]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=39623FTUI3 Best Practices2024-10-29T08:48:58Z<p>Andreas r: /* Anwendungsbeispiele */</p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]<br />
# [[FTUI3 HTML Controls|Anpassen von Standard HTML Eigenschaften]]<br />
# [[FTUI3 Readingsgroup|Anzeige einer Readingsgroup]]<br />
# [[FTUI3 DWD Wettervorhersage|Anzeige einer DWD-Wettervorhersage]]<br />
# [[FTUI3 Scrollbares Label|Scrollbares Label]]<br />
# [[FTUI3 Testinstanz|FTUI3 in Testinstanz und Produktivinstanz aufteilen]]<br />
# [[FTUI3 Proplanta Wetter| Wetteranzeige mit Proplanta Device]]<br />
# [[FTUI3 Befehle an FHEM senden| Befehle direkt an FHEM senden]]<br />
# [[FTUI3 mehrere Readings|mehrere Readings gleichzeitig auswerten]]<br />
# [[FTUI3 Inhalte an FHEM senden]]<br />
# wird fortgesetzt<br />
<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:FHEM Tablet UI V3]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=39622FTUI3 Best Practices2024-10-29T08:48:30Z<p>Andreas r: /* Anwendungsbeispiele */</p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]<br />
# [[FTUI3 HTML Controls|Anpassen von Standard HTML Eigenschaften]]<br />
# [[FTUI3 Readingsgroup|Anzeige einer Readingsgroup]]<br />
# [[FTUI3 DWD Wettervorhersage|Anzeige einer DWD-Wettervorhersage]]<br />
# [[FTUI3 Scrollbares Label|Scrollbares Label]]<br />
# [[FTUI3 Testinstanz|FTUI3 in Testinstanz und Produktivinstanz aufteilen]]<br />
# [[FTUI3 Proplanta Wetter| Wetteranzeige mit Proplanta Device]]<br />
# [[FTUI3 Befehle an FHEM senden| Befehle direkt an FHEM senden]]<br />
# [[FTUI3 mehrere Readings|mehrere Readings gleichzeitig auswerten]]<br />
# [[FTUI3 Inhalte aus FTUI3 an FHEM senden]]<br />
# wird fortgesetzt<br />
<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:FHEM Tablet UI V3]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=39621FTUI3 Best Practices2024-10-29T08:47:38Z<p>Andreas r: /* FTUI3 Best practices */</p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]<br />
# [[FTUI3 HTML Controls|Anpassen von Standard HTML Eigenschaften]]<br />
# [[FTUI3 Readingsgroup|Anzeige einer Readingsgroup]]<br />
# [[FTUI3 DWD Wettervorhersage|Anzeige einer DWD-Wettervorhersage]]<br />
# [[FTUI3 Scrollbares Label|Scrollbares Label]]<br />
# [[FTUI3 Testinstanz|FTUI3 in Testinstanz und Produktivinstanz aufteilen]]<br />
# [[FTUI3 Proplanta Wetter| Wetteranzeige mit Proplanta Device]]<br />
# [[FTUI3 Befehle an FHEM senden| Befehle direkt an FHEM senden]]<br />
# [[FTUI3 mehrere Readings|mehrere Readings gleichzeitig auswerten]]<br />
# [[FTUI3 Inhalte aus der FTUI3 an FHEM senden]]<br />
# wird fortgesetzt<br />
<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:FHEM Tablet UI V3]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_mehrere_Readings&diff=38663FTUI3 mehrere Readings2023-10-30T15:29:50Z<p>Andreas r: </p>
<hr />
<div>==Zielsetzung==<br />
<br />
Es sollen mehrere Readings eines oder mehrerer Devices gleichzeitig in FTUI3 ausgewertet und verarbeitet werden.<br />
In diesem Beispiel werden für einen Fensterkontakt "d_HM_Feko_OG_Bad" das Standard-Reading sowie die Readings "battery" und "activity" ausgewertet. <br />
Im ersten Schritt werden die "normalen" Farben für die Öffnungszustände des Fensters gesetzt. Im zweiten Schritt wird der Batteriezustand überprüft, bei low wird die Farbe auf gelb geändert. Im dritten Schritt wird die Erreichbarkeit geprüft, bei dead wird die Farbe auf rot geändert.<br />
<br />
Das Beispiel kann natürlich abgewandelt werden, um anders geartete Szenarien abzudecken. <br />
<br />
==Voraussetzung==<br />
*ein Device mit den angegebenen Readings existiert<br />
<br />
==Umsetzung==<br />
<syntaxhighlight lang="html"><br />
[color]="<br />
d_Feko_Bad | c1=>{this.reading1=c1, this.c1=(<br />
this.reading3=='dead'?'red':<br />
this.reading2=='low'?'warning':<br />
this.reading1=='offen'?'primary':<br />
this.reading1=='geschlossen'?'light':'black'<br />
)}| ()=>this.color=this.c1;<br />
d_Feko_Bad:battery | c2=>{this.reading2=c2, this.c2=(<br />
this.reading3=='dead'?'red':<br />
this.reading2=='low'?'warning':<br />
this.reading1=='offen'?'primary':<br />
this.reading1=='geschlossen'?'light':'black'<br />
)} | ()=>this.color=this.c2 ;<br />
d_Feko_Bad:activity | c3=>{this.reading3=c3, this.c3=(<br />
this.reading3=='dead'?'red':<br />
this.reading2=='low'?'warning':<br />
this.reading1=='offen'?'primary':<br />
this.reading1=='geschlossen'?'light':'black'<br />
)} | ()=>this.color=this.c3<br />
"<br />
</syntaxhighlight></div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_mehrere_Readings&diff=38654FTUI3 mehrere Readings2023-10-13T10:30:57Z<p>Andreas r: Die Seite wurde neu angelegt: „==Zielsetzung== Es sollen mehrere Readings eines oder mehrerer Devices gleichzeitig in FTUI3 ausgewertet und verarbeitet werden. In diesem Beispiel werden für einen Fensterkontakt "d_HM_Feko_OG_Bad" das Standard-Reading sowie die Readings "battery" und "activity" ausgewertet. Im ersten Schritt werden die "normalen" Farben für die Öffnungszustände des Fensters gesetzt. Im zweiten Schritt wird der Batteriezustand überprüft, bei low wird die Farbe a…“</p>
<hr />
<div>==Zielsetzung==<br />
<br />
Es sollen mehrere Readings eines oder mehrerer Devices gleichzeitig in FTUI3 ausgewertet und verarbeitet werden.<br />
In diesem Beispiel werden für einen Fensterkontakt "d_HM_Feko_OG_Bad" das Standard-Reading sowie die Readings "battery" und "activity" ausgewertet. <br />
Im ersten Schritt werden die "normalen" Farben für die Öffnungszustände des Fensters gesetzt. Im zweiten Schritt wird der Batteriezustand überprüft, bei low wird die Farbe auf gelb geändert. Im dritten Schritt wird die Erreichbarkeit geprüft, bei dead wird die Farbe auf rot geändert.<br />
<br />
Das Beispiel kann natürlich abgewandelt werden, um anders geartete Szenarien abzudecken. <br />
<br />
==Voraussetzung==<br />
*ein Device mit den angegebenen Readings existiert<br />
<br />
==Umsetzung==<br />
<syntaxhighlight lang="html"><br />
[color]="<br />
d_HM_Feko_OG_Bad | t1=>this.t1=t1 | ()=>this.color=(this.t1=='offen'?'primary':'light');<br />
d_HM_Feko_OG_Bad:battery | t2=>this.t2=t2 | ()=>this.color=(this.t2=='low'?'yellow':this.color) ;<br />
d_HM_Feko_OG_Bad:activity | t3=>this.t3=t3 | ()=>this.color=(this.t3=='dead'?'red':this.color<br />
)"<br />
</syntaxhighlight></div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=38653FTUI3 Best Practices2023-10-13T10:25:23Z<p>Andreas r: /* Anwendungsbeispiele */</p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]<br />
# [[FTUI3 HTML Controls|Anpassen von Standard HTML Eigenschaften]]<br />
# [[FTUI3 Readingsgroup|Anzeige einer Readingsgroup]]<br />
# [[FTUI3 DWD Wettervorhersage|Anzeige einer DWD-Wettervorhersage]]<br />
# [[FTUI3 Scrollbares Label|Scrollbares Label]]<br />
# [[FTUI3 Testinstanz|FTUI3 in Testinstanz und Produktivinstanz aufteilen]]<br />
# [[FTUI3 Proplanta Wetter| Wetteranzeige mit Proplanta Device]]<br />
# [[FTUI3 Befehle an FHEM senden| Befehle direkt an FHEM senden]]<br />
# [[FTUI3 mehrere Readings|mehrere Readings gleichzeitig auswerten]]<br />
# wird fortgesetzt<br />
<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:Interfaces]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Befehle_an_FHEM_senden&diff=38522FTUI3 Befehle an FHEM senden2023-07-28T16:10:32Z<p>Andreas r: /* Umsetzung */</p>
<hr />
<div>==Zielsetzung==<br />
<br />
Es soll über einen FTUI3 Button ein Befehl direkt and FHEM gesendet werden. <br />
In diesem speziellen Fall soll beispielsweise ein Befehl in Abhängigkeit eines Zustands eines dritten, unabhängigen Devices ausgeführt werden. Dies wird mit einer IF/ELSE Konstruktion gelöst, die so nicht direkt im FTUI3 Button umgesetzt werden kann. Konkret soll hier der Rolladen "Roll" nur dann herunter gefahren werden, wenn das Klappfenster "Klapp" vorher geschlossen wurde. Ansonsten soll zunächst das Klappfenster geschlossen werden. <br />
<br />
Das Beispiel kann natürlich abgewandelt werden, um anders geartete Befehle direkt in FHEM auszuführen. <br />
<br />
==Voraussetzung==<br />
*ein FTUI3 Button ist eingerichtet und existiert<br />
*die Devices "Klapp" und "Roll" existieren<br />
<br />
==Umsetzung==<br />
In der Definition des FTUI3 Buttons ist folgendes zu ergänzen:<syntaxhighlight lang="html"><br />
@click="sendFhem(`IF ([Klapp:state] eq 'off') (set Roll down) ELSE (set Klapp down, sleep 50, set Roll down)`)"<br />
</syntaxhighlight></div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Befehle_an_FHEM_senden&diff=38521FTUI3 Befehle an FHEM senden2023-07-28T14:47:28Z<p>Andreas r: Die Seite wurde neu angelegt: „==Zielsetzung== Es soll über einen FTUI3 Button ein Befehl direkt and FHEM gesendet werden. In diesem speziellen Fall soll beispielsweise ein Befehl in Abhängigkeit eines Zustands eines dritten, unabhängigen Devices ausgeführt werden. Dies wird mit einer IF/ELSE Konstruktion gelöst, die so nicht direkt im FTUI3 Button umgesetzt werden kann. Konkret soll hier der Rolladen "Roll" nur dann herunter gefahren werden, wenn das Klappfenster "Klapp" vorher…“</p>
<hr />
<div>==Zielsetzung==<br />
<br />
Es soll über einen FTUI3 Button ein Befehl direkt and FHEM gesendet werden. <br />
In diesem speziellen Fall soll beispielsweise ein Befehl in Abhängigkeit eines Zustands eines dritten, unabhängigen Devices ausgeführt werden. Dies wird mit einer IF/ELSE Konstruktion gelöst, die so nicht direkt im FTUI3 Button umgesetzt werden kann. Konkret soll hier der Rolladen "Roll" nur dann herunter gefahren werden, wenn das Klappfenster "Klapp" vorher geschlossen wurde. Ansonsten soll zunächst das Klappfenster geschlossen werden. <br />
<br />
Das Beispiel kann natürlich abgewandelt werden, um anders geartete Befehle direkt in FHEM auszuführen. <br />
<br />
==Voraussetzung==<br />
*ein FTUI3 Button ist eingerichtet und existiert<br />
*die Devices "Klapp" und "Roll" existieren<br />
<br />
==Umsetzung==<br />
In der Definition des FTUI3 Buttons ist folgendes zu ergänzen:<syntaxhighlight lang="html"><br />
@click="sendFhem(`IF ([{{Klapp}}:state] eq 'off') (set {{Roll}} down) ELSE (set {{Klapp}} down, sleep 50, set {{Roll}} down)`)"<br />
</syntaxhighlight></div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=38520FTUI3 Best Practices2023-07-28T14:36:20Z<p>Andreas r: </p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]<br />
# [[FTUI3 HTML Controls|Anpassen von Standard HTML Eigenschaften]]<br />
# [[FTUI3 Readingsgroup|Anzeige einer Readingsgroup]]<br />
# [[FTUI3 DWD Wettervorhersage|Anzeige einer DWD-Wettervorhersage]]<br />
# [[FTUI3 Scrollbares Label|Scrollbares Label]]<br />
# [[FTUI3 Testinstanz|FTUI3 in Testinstanz und Produktivinstanz aufteilen]]<br />
# [[FTUI3 Proplanta Wetter| Wetteranzeige mit Proplanta Device]]<br />
# [[FTUI3 Befehle an FHEM senden| Befehle direkt an FHEM senden]]<br />
# wird fortgesetzt<br />
<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:Interfaces]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=38519FTUI3 Best Practices2023-07-28T14:34:21Z<p>Andreas r: </p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]<br />
# [[FTUI3 HTML Controls|Anpassen von Standard HTML Eigenschaften]]<br />
# [[FTUI3 Readingsgroup|Anzeige einer Readingsgroup]]<br />
# [[FTUI3 DWD Wettervorhersage|Anzeige einer DWD-Wettervorhersage]]<br />
# [[FTUI3 Scrollbares Label|Scrollbares Label]]<br />
# [[FTUI3 Testinstanz|FTUI3 in Testinstanz und Produktivinstanz aufteilen]]<br />
# [[FTUI3 Proplanta Wetter| Wetteranzeige mit Proplanta Device]]<br />
# [[FTUI3 FHEM Befehle| Befehle direkt an FHEM senden]]<br />
# wird fortgesetzt<br />
<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:Interfaces]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Proplanta_Wetter&diff=38024FTUI3 Proplanta Wetter2023-02-01T19:50:22Z<p>Andreas r: </p>
<hr />
<div>== Zielsetzung ==<br />
<br />
Aufbau einer Wetterseite mit der Wetterkarte der Unwetterzentrale (D) inkl der Unwetterwarnungen und einer 7-Tage-Vorhersage mit den Daten von Proplanta.<br />
<br />
== Voraussetzungen ==<br />
* Fhem mit installiertem FTUI3 (https://wiki.fhem.de/wiki/FHEM_Tablet_UI_v3)<br />
* Fhem-Device für die Unwetterzentrale (https://fhem.de/commandref_DE.html#UWZ)<br />
* Fhem-Device für Proplanta (https://fhem.de/commandref_DE.html#PROPLANTA)<br />
<br />
== Umsetzung ==<br />
<br />
Definition der Hauptseite mit Aufrufen von Content-Dateien für die Warnmeldung und die Wettervorhersagen:<br />
<br />
<syntaxhighlight lang="html"><br />
<ftui-grid base-width="78" base-height="70" margin="3"><br />
<ftui-grid-tile row="1" col="1" height="10" width="9"><br />
<header>Unwetterzentrale</header><br />
<ftui-image heigth="120%" width="120%" left="-55px" src="https://www.unwetterzentrale.de/images/map/bayern_index.png"<br />
</ftui-image><br />
<br />
</ftui-grid-tile><br />
<ftui-grid-tile row="1" col="10" height="5" width="8"><br />
<header>Unwetterwarnungen</header><br />
<ftui-swiper id="Warnung_SW" dots style="font-size:1.5em" @click="Warnung_SW.next()" [hidden]="Unwetterzentrale:WarnCount | map('0:true, .*:false')"><br />
<ftui-content id="Warn_0" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_0"><br />
<br />
</ftui-content><br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('2|3|4|5:false, .*:true')" id="Warn_1" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_1"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('3|4|5:false, .*:true')" id="Warn_2" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_2"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('4|5:false, .*:true')" id="Warn_3" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_3"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('5:false, .*:true')" id="Warn_4" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_4"><br />
</ftui-content><br />
<br />
</ftui-swiper><br />
<ftui-label color="green" size="4" [hidden]="Unwetterzentrale:WarnCount | map('0:false, .*:true')" text="Aktuell keine Warnmeldungen"><br />
</ftui-label><br />
<br />
</ftui-grid-tile><ftui-grid-tile row="6" col="10" height="5" width="8"><br />
<br />
<header>7-Tage Vorhersage</header><br />
<ftui-swiper id="Vorhersage_SW" dots style="font-size:1.5em" @click="Vorhersage_SW.next()"><br />
<br />
<ftui-content id="VHS_0" file="./content/Wetter_Vorhersage.html" VHS_NR="fc0"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_1" file="./content/Wetter_Vorhersage.html" VHS_NR="fc1"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_2" file="./content/Wetter_Vorhersage.html" VHS_NR="fc2"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_3" file="./content/Wetter_Vorhersage.html" VHS_NR="fc3"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_4" file="./content/Wetter_Vorhersage.html" VHS_NR="fc4"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_5" file="./content/Wetter_Vorhersage.html" VHS_NR="fc5"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_6" file="./content/Wetter_Vorhersage.html" VHS_NR="fc6"><br />
</ftui-content><br />
<br />
</ftui-swiper><br />
</ftui-grid-tile><br />
<br />
</ftui-grid><br />
<br />
</syntaxhighlight><br />
<br />
Content-Datei für die Wetterwarnungen:<br />
<br />
<syntaxhighlight lang="html"><br />
<ftui-row [color]="Unwetterzentrale:WarnUWZLevel_Color | map('gelb:yellow, orange:orange, rot:red, violett:violet')"><br />
<ftui-column width="15%"><br />
<ftui-image [src]="Unwetterzentrale:{{Warn_NR}}_IconURL" nocache margin="1" left="10px"></ftui-image><br />
</ftui-column><br />
<br />
<ftui-column height="82%" margin="1"><br />
<ftui-label padding="1" scroll text-align="left" size="3" [text]="Unwetterzentrale:{{Warn_NR}}_LongText"><br />
</ftui-label><br />
<br />
</ftui-column><br />
</ftui-row><span> <ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Gültig vom "> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_Start_Date"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_Start_Time"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Uhr"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="bis zum"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_End_Date"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_End_Time"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Uhr"> <br />
<br />
</ftui-label> </span>Content-Datei für die Wettervorhersage (7-Tage):<!-- [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | format('eeee - DD.MM.YYYY')" color="white" <br />
class="bold" margin="-1"> --><br />
<br />
<ftui-label [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | t=>(t.toLocaleDateString()===(new Date()).toLocaleDateString())?'Heute':ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY')" color="white" class="bold" margin="-1"><br />
</ftui-label><br />
<br />
<ftui-row height="50%"><br />
<ftui-column><br />
<br />
<ftui-label text="morgens" size="2"><br />
<br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherMorningIcon"><br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp06 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp06" unit="°C"><br />
</ftui-label><br />
<br />
<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherMorning"><br />
</ftui-label><br />
<br />
<ftui-row> <ftui-label text-align="left" left="55px" style="position:relative;" text="Max:"><br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-55px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_tempMax" unit="°C"><br />
</ftui-label><br />
<br />
</ftui-row><br />
<br />
<ftui-row><br />
<ftui-label text-align="left" left="55px" style="position:relative;" text="Min:"><br />
</ftui-label><br />
<ftui-label text-align="right" left="-55px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_tempMin" unit="°C"><br />
</ftui-label><br />
</ftui-row><br />
</ftui-column><br />
<br />
<ftui-column><br />
<ftui-label text="Mittags" size="2"><br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherDayIcon"><br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp12 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp12" unit="°C"><br />
</ftui-label><br />
<br />
<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherDay"><br />
</ftui-label><br />
<br />
<ftui-row><br />
<br />
<ftui-label text-align="left" left="45px" style="position:relative;" text="Regen:"><br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-40px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_chOfRainDay" unit="%"><br />
</ftui-label><br />
</ftui-row><br />
<br />
<ftui-row><br />
<ftui-label text-align="left" left="45px" style="position:relative;" text="Sonne:"><br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-40px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_sun" unit="%"><br />
</ftui-label><br />
</ftui-row><br />
</ftui-column><br />
<br />
<ftui-column><br />
<ftui-label text="Abends" size="2"><br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherEveningIcon"><br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp18 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp18" unit="°C"><br />
</ftui-label><br />
<br />
<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherEvening"><br />
</ftui-label><br />
<ftui-row><br />
<br />
<ftui-label left="20px" style="position:relative;" text="UV:"><br />
</ftui-label><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_uv | step('0:green, 3:yellow, 6:orange, 8:red, 11:violet')" left="-20px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_uv"><br />
</ftui-label><br />
</ftui-row><br />
<br />
<ftui-label [text]=""><br />
</ftui-label><br />
<br />
</ftui-column><br />
<br />
</ftui-row><br />
</syntaxhighlight><br />
<br />
== Ergebnis ==<br />
[[Datei:FTUI3 Wetter.png|mini]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Proplanta_Wetter&diff=38023FTUI3 Proplanta Wetter2023-02-01T19:49:58Z<p>Andreas r: /* Ergebnis */</p>
<hr />
<div>== Zielsetzung ==<br />
<br />
Aufbau einer Wetterseite mit der Wetterkarte der Unwetterzentrale (D) inkl der Unwetterwarnungen und einer 7-Tage-Vorhersage mit den Daten von Proplanta.<br />
<br />
== Voraussetzungen ==<br />
<br />
- Fhem mit installiertem FTUI3 (https://wiki.fhem.de/wiki/FHEM_Tablet_UI_v3)<br />
- Fhem-Device für die Unwetterzentrale (https://fhem.de/commandref_DE.html#UWZ)<br />
- Fhem-Device für Proplanta (https://fhem.de/commandref_DE.html#PROPLANTA)<br />
<br />
== Umsetzung ==<br />
<br />
Definition der Hauptseite mit Aufrufen von Content-Dateien für die Warnmeldung und die Wettervorhersagen:<br />
<br />
<syntaxhighlight lang="html"><br />
<ftui-grid base-width="78" base-height="70" margin="3"><br />
<ftui-grid-tile row="1" col="1" height="10" width="9"><br />
<header>Unwetterzentrale</header><br />
<ftui-image heigth="120%" width="120%" left="-55px" src="https://www.unwetterzentrale.de/images/map/bayern_index.png"<br />
</ftui-image><br />
<br />
</ftui-grid-tile><br />
<ftui-grid-tile row="1" col="10" height="5" width="8"><br />
<header>Unwetterwarnungen</header><br />
<ftui-swiper id="Warnung_SW" dots style="font-size:1.5em" @click="Warnung_SW.next()" [hidden]="Unwetterzentrale:WarnCount | map('0:true, .*:false')"><br />
<ftui-content id="Warn_0" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_0"><br />
<br />
</ftui-content><br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('2|3|4|5:false, .*:true')" id="Warn_1" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_1"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('3|4|5:false, .*:true')" id="Warn_2" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_2"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('4|5:false, .*:true')" id="Warn_3" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_3"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('5:false, .*:true')" id="Warn_4" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_4"><br />
</ftui-content><br />
<br />
</ftui-swiper><br />
<ftui-label color="green" size="4" [hidden]="Unwetterzentrale:WarnCount | map('0:false, .*:true')" text="Aktuell keine Warnmeldungen"><br />
</ftui-label><br />
<br />
</ftui-grid-tile><ftui-grid-tile row="6" col="10" height="5" width="8"><br />
<br />
<header>7-Tage Vorhersage</header><br />
<ftui-swiper id="Vorhersage_SW" dots style="font-size:1.5em" @click="Vorhersage_SW.next()"><br />
<br />
<ftui-content id="VHS_0" file="./content/Wetter_Vorhersage.html" VHS_NR="fc0"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_1" file="./content/Wetter_Vorhersage.html" VHS_NR="fc1"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_2" file="./content/Wetter_Vorhersage.html" VHS_NR="fc2"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_3" file="./content/Wetter_Vorhersage.html" VHS_NR="fc3"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_4" file="./content/Wetter_Vorhersage.html" VHS_NR="fc4"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_5" file="./content/Wetter_Vorhersage.html" VHS_NR="fc5"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_6" file="./content/Wetter_Vorhersage.html" VHS_NR="fc6"><br />
</ftui-content><br />
<br />
</ftui-swiper><br />
</ftui-grid-tile><br />
<br />
</ftui-grid><br />
<br />
</syntaxhighlight><br />
<br />
Content-Datei für die Wetterwarnungen:<br />
<br />
<syntaxhighlight lang="html"><br />
<ftui-row [color]="Unwetterzentrale:WarnUWZLevel_Color | map('gelb:yellow, orange:orange, rot:red, violett:violet')"><br />
<ftui-column width="15%"><br />
<ftui-image [src]="Unwetterzentrale:{{Warn_NR}}_IconURL" nocache margin="1" left="10px"></ftui-image><br />
</ftui-column><br />
<br />
<ftui-column height="82%" margin="1"><br />
<ftui-label padding="1" scroll text-align="left" size="3" [text]="Unwetterzentrale:{{Warn_NR}}_LongText"><br />
</ftui-label><br />
<br />
</ftui-column><br />
</ftui-row><span> <ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Gültig vom "> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_Start_Date"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_Start_Time"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Uhr"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="bis zum"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_End_Date"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_End_Time"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Uhr"> <br />
<br />
</ftui-label> </span>Content-Datei für die Wettervorhersage (7-Tage):<!-- [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | format('eeee - DD.MM.YYYY')" color="white" <br />
class="bold" margin="-1"> --><br />
<br />
<ftui-label [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | t=>(t.toLocaleDateString()===(new Date()).toLocaleDateString())?'Heute':ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY')" color="white" class="bold" margin="-1"><br />
</ftui-label><br />
<br />
<ftui-row height="50%"><br />
<ftui-column><br />
<br />
<ftui-label text="morgens" size="2"><br />
<br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherMorningIcon"><br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp06 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp06" unit="°C"><br />
</ftui-label><br />
<br />
<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherMorning"><br />
</ftui-label><br />
<br />
<ftui-row> <ftui-label text-align="left" left="55px" style="position:relative;" text="Max:"><br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-55px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_tempMax" unit="°C"><br />
</ftui-label><br />
<br />
</ftui-row><br />
<br />
<ftui-row><br />
<ftui-label text-align="left" left="55px" style="position:relative;" text="Min:"><br />
</ftui-label><br />
<ftui-label text-align="right" left="-55px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_tempMin" unit="°C"><br />
</ftui-label><br />
</ftui-row><br />
</ftui-column><br />
<br />
<ftui-column><br />
<ftui-label text="Mittags" size="2"><br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherDayIcon"><br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp12 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp12" unit="°C"><br />
</ftui-label><br />
<br />
<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherDay"><br />
</ftui-label><br />
<br />
<ftui-row><br />
<br />
<ftui-label text-align="left" left="45px" style="position:relative;" text="Regen:"><br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-40px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_chOfRainDay" unit="%"><br />
</ftui-label><br />
</ftui-row><br />
<br />
<ftui-row><br />
<ftui-label text-align="left" left="45px" style="position:relative;" text="Sonne:"><br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-40px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_sun" unit="%"><br />
</ftui-label><br />
</ftui-row><br />
</ftui-column><br />
<br />
<ftui-column><br />
<ftui-label text="Abends" size="2"><br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherEveningIcon"><br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp18 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp18" unit="°C"><br />
</ftui-label><br />
<br />
<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherEvening"><br />
</ftui-label><br />
<ftui-row><br />
<br />
<ftui-label left="20px" style="position:relative;" text="UV:"><br />
</ftui-label><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_uv | step('0:green, 3:yellow, 6:orange, 8:red, 11:violet')" left="-20px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_uv"><br />
</ftui-label><br />
</ftui-row><br />
<br />
<ftui-label [text]=""><br />
</ftui-label><br />
<br />
</ftui-column><br />
<br />
</ftui-row><br />
</syntaxhighlight><br />
<br />
== Ergebnis ==<br />
[[Datei:FTUI3 Wetter.png|mini]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Proplanta_Wetter&diff=38022FTUI3 Proplanta Wetter2023-02-01T19:49:12Z<p>Andreas r: </p>
<hr />
<div>== Zielsetzung ==<br />
<br />
Aufbau einer Wetterseite mit der Wetterkarte der Unwetterzentrale (D) inkl der Unwetterwarnungen und einer 7-Tage-Vorhersage mit den Daten von Proplanta.<br />
<br />
== Voraussetzungen ==<br />
<br />
- Fhem mit installiertem FTUI3 (https://wiki.fhem.de/wiki/FHEM_Tablet_UI_v3)<br />
- Fhem-Device für die Unwetterzentrale (https://fhem.de/commandref_DE.html#UWZ)<br />
- Fhem-Device für Proplanta (https://fhem.de/commandref_DE.html#PROPLANTA)<br />
<br />
== Umsetzung ==<br />
<br />
Definition der Hauptseite mit Aufrufen von Content-Dateien für die Warnmeldung und die Wettervorhersagen:<br />
<br />
<syntaxhighlight lang="html"><br />
<ftui-grid base-width="78" base-height="70" margin="3"><br />
<ftui-grid-tile row="1" col="1" height="10" width="9"><br />
<header>Unwetterzentrale</header><br />
<ftui-image heigth="120%" width="120%" left="-55px" src="https://www.unwetterzentrale.de/images/map/bayern_index.png"<br />
</ftui-image><br />
<br />
</ftui-grid-tile><br />
<ftui-grid-tile row="1" col="10" height="5" width="8"><br />
<header>Unwetterwarnungen</header><br />
<ftui-swiper id="Warnung_SW" dots style="font-size:1.5em" @click="Warnung_SW.next()" [hidden]="Unwetterzentrale:WarnCount | map('0:true, .*:false')"><br />
<ftui-content id="Warn_0" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_0"><br />
<br />
</ftui-content><br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('2|3|4|5:false, .*:true')" id="Warn_1" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_1"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('3|4|5:false, .*:true')" id="Warn_2" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_2"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('4|5:false, .*:true')" id="Warn_3" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_3"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('5:false, .*:true')" id="Warn_4" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_4"><br />
</ftui-content><br />
<br />
</ftui-swiper><br />
<ftui-label color="green" size="4" [hidden]="Unwetterzentrale:WarnCount | map('0:false, .*:true')" text="Aktuell keine Warnmeldungen"><br />
</ftui-label><br />
<br />
</ftui-grid-tile><ftui-grid-tile row="6" col="10" height="5" width="8"><br />
<br />
<header>7-Tage Vorhersage</header><br />
<ftui-swiper id="Vorhersage_SW" dots style="font-size:1.5em" @click="Vorhersage_SW.next()"><br />
<br />
<ftui-content id="VHS_0" file="./content/Wetter_Vorhersage.html" VHS_NR="fc0"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_1" file="./content/Wetter_Vorhersage.html" VHS_NR="fc1"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_2" file="./content/Wetter_Vorhersage.html" VHS_NR="fc2"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_3" file="./content/Wetter_Vorhersage.html" VHS_NR="fc3"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_4" file="./content/Wetter_Vorhersage.html" VHS_NR="fc4"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_5" file="./content/Wetter_Vorhersage.html" VHS_NR="fc5"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_6" file="./content/Wetter_Vorhersage.html" VHS_NR="fc6"><br />
</ftui-content><br />
<br />
</ftui-swiper><br />
</ftui-grid-tile><br />
<br />
</ftui-grid><br />
<br />
</syntaxhighlight><br />
<br />
Content-Datei für die Wetterwarnungen:<br />
<br />
<br />
<syntaxhighlight lang="html"><br />
<ftui-row [color]="Unwetterzentrale:WarnUWZLevel_Color | map('gelb:yellow, orange:orange, rot:red, violett:violet')"><br />
<ftui-column width="15%"><br />
<ftui-image [src]="Unwetterzentrale:{{Warn_NR}}_IconURL" nocache margin="1" left="10px"></ftui-image><br />
</ftui-column><br />
<br />
<ftui-column height="82%" margin="1"><br />
<ftui-label padding="1" scroll text-align="left" size="3" [text]="Unwetterzentrale:{{Warn_NR}}_LongText"><br />
</ftui-label><br />
<br />
</ftui-column><br />
</ftui-row><span> <ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Gültig vom "> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_Start_Date"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_Start_Time"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Uhr"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="bis zum"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_End_Date"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_End_Time"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Uhr"> <br />
<br />
</ftui-label> </span>Content-Datei für die Wettervorhersage (7-Tage):<!-- [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | format('eeee - DD.MM.YYYY')" color="white" <br />
class="bold" margin="-1"> --><br />
<br />
<ftui-label [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | t=>(t.toLocaleDateString()===(new Date()).toLocaleDateString())?'Heute':ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY')" color="white" class="bold" margin="-1"><br />
</ftui-label><br />
<br />
<ftui-row height="50%"><br />
<ftui-column><br />
<br />
<ftui-label text="morgens" size="2"><br />
<br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherMorningIcon"><br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp06 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp06" unit="°C"><br />
</ftui-label><br />
<br />
<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherMorning"><br />
</ftui-label><br />
<br />
<ftui-row> <ftui-label text-align="left" left="55px" style="position:relative;" text="Max:"><br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-55px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_tempMax" unit="°C"><br />
</ftui-label><br />
<br />
</ftui-row><br />
<br />
<ftui-row><br />
<ftui-label text-align="left" left="55px" style="position:relative;" text="Min:"><br />
</ftui-label><br />
<ftui-label text-align="right" left="-55px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_tempMin" unit="°C"><br />
</ftui-label><br />
</ftui-row><br />
</ftui-column><br />
<br />
<ftui-column><br />
<ftui-label text="Mittags" size="2"><br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherDayIcon"><br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp12 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp12" unit="°C"><br />
</ftui-label><br />
<br />
<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherDay"><br />
</ftui-label><br />
<br />
<ftui-row><br />
<br />
<ftui-label text-align="left" left="45px" style="position:relative;" text="Regen:"><br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-40px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_chOfRainDay" unit="%"><br />
</ftui-label><br />
</ftui-row><br />
<br />
<ftui-row><br />
<ftui-label text-align="left" left="45px" style="position:relative;" text="Sonne:"><br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-40px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_sun" unit="%"><br />
</ftui-label><br />
</ftui-row><br />
</ftui-column><br />
<br />
<ftui-column><br />
<ftui-label text="Abends" size="2"><br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherEveningIcon"><br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp18 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp18" unit="°C"><br />
</ftui-label><br />
<br />
<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherEvening"><br />
</ftui-label><br />
<ftui-row><br />
<br />
<ftui-label left="20px" style="position:relative;" text="UV:"><br />
</ftui-label><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_uv | step('0:green, 3:yellow, 6:orange, 8:red, 11:violet')" left="-20px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_uv"><br />
</ftui-label><br />
</ftui-row><br />
<br />
<ftui-label [text]=""><br />
</ftui-label><br />
<br />
</ftui-column><br />
<br />
</ftui-row><br />
</syntaxhighlight><br />
<br />
== Ergebnis ==</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=Datei:FTUI3_Wetter.png&diff=38021Datei:FTUI3 Wetter.png2023-02-01T19:48:35Z<p>Andreas r: </p>
<hr />
<div>Screenshot des FTUI3 Wetter Widgets</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Proplanta_Wetter&diff=38020FTUI3 Proplanta Wetter2023-02-01T19:46:13Z<p>Andreas r: </p>
<hr />
<div>== Zielsetzung ==<br />
<br />
Aufbau einer Wetterseite mit der Wetterkarte der Unwetterzentrale (D) inkl der Unwetterwarnungen und einer 7-Tage-Vorhersage mit den Daten von Proplanta.<br />
<br />
== Voraussetzungen ==<br />
<br />
- Fhem mit installiertem FTUI3 (https://wiki.fhem.de/wiki/FHEM_Tablet_UI_v3)<br />
- Fhem-Device für die Unwetterzentrale (https://fhem.de/commandref_DE.html#UWZ)<br />
- Fhem-Device für Proplanta (https://fhem.de/commandref_DE.html#PROPLANTA)<br />
<br />
== Umsetzung ==<br />
<br />
Definition der Hauptseite mit Aufrufen von Content-Dateien für die Warnmeldung und die Wettervorhersagen:<br />
<br />
<syntaxhighlight lang="html"><br />
<ftui-grid base-width="78" base-height="70" margin="3"><br />
<ftui-grid-tile row="1" col="1" height="10" width="9"><br />
<header>Unwetterzentrale</header><br />
<ftui-image heigth="120%" width="120%" left="-55px" src="https://www.unwetterzentrale.de/images/map/bayern_index.png"<br />
</ftui-image><br />
<br />
</ftui-grid-tile><br />
<ftui-grid-tile row="1" col="10" height="5" width="8"><br />
<header>Unwetterwarnungen</header><br />
<ftui-swiper id="Warnung_SW" dots style="font-size:1.5em" @click="Warnung_SW.next()" [hidden]="Unwetterzentrale:WarnCount | map('0:true, .*:false')"><br />
<ftui-content id="Warn_0" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_0"><br />
<br />
</ftui-content><br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('2|3|4|5:false, .*:true')" id="Warn_1" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_1"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('3|4|5:false, .*:true')" id="Warn_2" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_2"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('4|5:false, .*:true')" id="Warn_3" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_3"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('5:false, .*:true')" id="Warn_4" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_4"><br />
</ftui-content><br />
<br />
</ftui-swiper><br />
<ftui-label color="green" size="4" [hidden]="Unwetterzentrale:WarnCount | map('0:false, .*:true')" text="Aktuell keine Warnmeldungen"><br />
</ftui-label><br />
<br />
</ftui-grid-tile><ftui-grid-tile row="6" col="10" height="5" width="8"><br />
<br />
<header>7-Tage Vorhersage</header><br />
<ftui-swiper id="Vorhersage_SW" dots style="font-size:1.5em" @click="Vorhersage_SW.next()"><br />
<br />
<ftui-content id="VHS_0" file="./content/Wetter_Vorhersage.html" VHS_NR="fc0"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_1" file="./content/Wetter_Vorhersage.html" VHS_NR="fc1"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_2" file="./content/Wetter_Vorhersage.html" VHS_NR="fc2"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_3" file="./content/Wetter_Vorhersage.html" VHS_NR="fc3"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_4" file="./content/Wetter_Vorhersage.html" VHS_NR="fc4"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_5" file="./content/Wetter_Vorhersage.html" VHS_NR="fc5"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_6" file="./content/Wetter_Vorhersage.html" VHS_NR="fc6"><br />
</ftui-content><br />
<br />
</ftui-swiper><br />
</ftui-grid-tile><br />
<br />
</ftui-grid><br />
<br />
</syntaxhighlight><br />
<br />
Content-Datei für die Wetterwarnungen:<br />
<br />
<br />
<syntaxhighlight lang="html"><br />
<ftui-row [color]="Unwetterzentrale:WarnUWZLevel_Color | map('gelb:yellow, orange:orange, rot:red, violett:violet')"><br />
<ftui-column width="15%"><br />
<ftui-image [src]="Unwetterzentrale:{{Warn_NR}}_IconURL" nocache margin="1" left="10px"></ftui-image><br />
</ftui-column><br />
<br />
<ftui-column height="82%" margin="1"><br />
<ftui-label padding="1" scroll text-align="left" size="3" [text]="Unwetterzentrale:{{Warn_NR}}_LongText"><br />
</ftui-label><br />
<br />
</ftui-column><br />
</ftui-row><span> <ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Gültig vom "> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_Start_Date"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_Start_Time"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Uhr"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="bis zum"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_End_Date"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" [text]="Unwetterzentrale:{{Warn_NR}}_End_Time"> <br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" text="Uhr"> <br />
<br />
</ftui-label> </span>Content-Datei für die Wettervorhersage (7-Tage):<!-- [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | format('eeee - DD.MM.YYYY')" color="white" <br />
class="bold" margin="-1"> --><br />
<br />
<ftui-label [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | t=>(t.toLocaleDateString()===(new Date()).toLocaleDateString())?'Heute':ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY')" color="white" class="bold" margin="-1"><br />
</ftui-label><br />
<br />
<ftui-row height="50%"><br />
<ftui-column><br />
<br />
<ftui-label text="morgens" size="2"><br />
<br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherMorningIcon"><br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp06 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp06" unit="°C"><br />
</ftui-label><br />
<br />
<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherMorning"><br />
</ftui-label><br />
<br />
<ftui-row> <ftui-label text-align="left" left="55px" style="position:relative;" text="Max:"><br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-55px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_tempMax" unit="°C"><br />
</ftui-label><br />
<br />
</ftui-row><br />
<br />
<ftui-row><br />
<ftui-label text-align="left" left="55px" style="position:relative;" text="Min:"><br />
</ftui-label><br />
<ftui-label text-align="right" left="-55px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_tempMin" unit="°C"><br />
</ftui-label><br />
</ftui-row><br />
</ftui-column><br />
<br />
<ftui-column><br />
<ftui-label text="Mittags" size="2"><br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherDayIcon"><br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp12 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp12" unit="°C"><br />
</ftui-label><br />
<br />
<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherDay"><br />
</ftui-label><br />
<br />
<ftui-row><br />
<br />
<ftui-label text-align="left" left="45px" style="position:relative;" text="Regen:"><br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-40px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_chOfRainDay" unit="%"><br />
</ftui-label><br />
</ftui-row><br />
<br />
<ftui-row><br />
<ftui-label text-align="left" left="45px" style="position:relative;" text="Sonne:"><br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-40px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_sun" unit="%"><br />
</ftui-label><br />
</ftui-row><br />
</ftui-column><br />
<br />
<ftui-column><br />
<ftui-label text="Abends" size="2"><br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG" [condition]="WetterProplanta:{{VHS_NR}}_weatherEveningIcon"><br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp18 | step('-73:violet, -9:blue, 10:green, 25:orange, 32:red')" margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_temp18" unit="°C"><br />
</ftui-label><br />
<br />
<ftui-label margin="0.5" [text]="WetterProplanta:{{VHS_NR}}_weatherEvening"><br />
</ftui-label><br />
<ftui-row><br />
<br />
<ftui-label left="20px" style="position:relative;" text="UV:"><br />
</ftui-label><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_uv | step('0:green, 3:yellow, 6:orange, 8:red, 11:violet')" left="-20px" style="position:relative;" [text]="WetterProplanta:{{VHS_NR}}_uv"><br />
</ftui-label><br />
</ftui-row><br />
<br />
<ftui-label [text]=""><br />
</ftui-label><br />
<br />
</ftui-column><br />
<br />
</ftui-row><br />
</syntaxhighlight></div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Proplanta_Wetter&diff=38019FTUI3 Proplanta Wetter2023-02-01T19:41:14Z<p>Andreas r: Die Seite wurde neu angelegt: „== Zielsetzung == Aufbau einer Wetterseite mit der Wetterkarte der Unwetterzentrale (D) inkl der Unwetterwarnungen und einer 7-Tage-Vorhersage mit den Daten v…“</p>
<hr />
<div>== Zielsetzung ==<br />
<br />
Aufbau einer Wetterseite mit der Wetterkarte der Unwetterzentrale (D) inkl der Unwetterwarnungen und einer 7-Tage-Vorhersage mit den Daten von Proplanta.<br />
<br />
== Voraussetzungen ==<br />
<br />
- Fhem mit installiertem FTUI3 (https://wiki.fhem.de/wiki/FHEM_Tablet_UI_v3)<br />
- Fhem-Device für die Unwetterzentrale (https://fhem.de/commandref_DE.html#UWZ)<br />
- Fhem-Device für Proplanta (https://fhem.de/commandref_DE.html#PROPLANTA)<br />
<br />
== Umsetzung ==<br />
<br />
Definition der Hauptseite mit Aufrufen von Content-Dateien für die Warnmeldung und die Wettervorhersagen:<br />
<br />
<syntaxhighlight lang="html"><br />
<ftui-grid base-width="78" base-height="70" margin="3"><br />
<ftui-grid-tile row="1" col="1" height="10" width="9"><br />
<header>Unwetterzentrale</header><br />
<ftui-image heigth="120%" width="120%" left="-55px" src="https://www.unwetterzentrale.de/images/map/bayern_index.png"<br />
</ftui-image><br />
<br />
</ftui-grid-tile><br />
<ftui-grid-tile row="1" col="10" height="5" width="8"><br />
<header>Unwetterwarnungen</header><br />
<ftui-swiper id="Warnung_SW" dots style="font-size:1.5em" @click="Warnung_SW.next()" [hidden]="Unwetterzentrale:WarnCount | map('0:true, .*:false')"><br />
<ftui-content id="Warn_0" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_0"><br />
<br />
</ftui-content><br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('2|3|4|5:false, .*:true')" id="Warn_1" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_1"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('3|4|5:false, .*:true')" id="Warn_2" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_2"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('4|5:false, .*:true')" id="Warn_3" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_3"><br />
</ftui-content><br />
<br />
<ftui-content [hidden]="Unwetterzentrale:WarnCount | map('5:false, .*:true')" id="Warn_4" file="./content/Wetter_Warnhinweise.html" Warn_NR="Warn_4"><br />
</ftui-content><br />
<br />
</ftui-swiper><br />
<ftui-label color="green" size="4" [hidden]="Unwetterzentrale:WarnCount | map('0:false, .*:true')" text="Aktuell keine Warnmeldungen"><br />
</ftui-label><br />
<br />
</ftui-grid-tile><ftui-grid-tile row="6" col="10" height="5" width="8"><br />
<br />
<header>7-Tage Vorhersage</header><br />
<ftui-swiper id="Vorhersage_SW" dots style="font-size:1.5em" @click="Vorhersage_SW.next()"><br />
<br />
<ftui-content id="VHS_0" file="./content/Wetter_Vorhersage.html" VHS_NR="fc0"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_1" file="./content/Wetter_Vorhersage.html" VHS_NR="fc1"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_2" file="./content/Wetter_Vorhersage.html" VHS_NR="fc2"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_3" file="./content/Wetter_Vorhersage.html" VHS_NR="fc3"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_4" file="./content/Wetter_Vorhersage.html" VHS_NR="fc4"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_5" file="./content/Wetter_Vorhersage.html" VHS_NR="fc5"><br />
</ftui-content><br />
<br />
<ftui-content id="VHS_6" file="./content/Wetter_Vorhersage.html" VHS_NR="fc6"><br />
</ftui-content><br />
<br />
</ftui-swiper><br />
</ftui-grid-tile><br />
<br />
</ftui-grid><br />
<br />
</syntaxhighlight><br />
<br />
Content-Datei für die Wetterwarnungen:<br />
<br />
<ftui-row [color]="Unwetterzentrale:WarnUWZLevel_Color | map('gelb:yellow, orange:orange, rot:red,<br />
<br />
violett:violet')"><br />
<br />
<ftui-column width="15%"><br />
<br />
<ftui-image [src]="Unwetterzentrale:{{Warn_NR}}_IconURL" nocache margin="1" left="10px"><br />
<br />
</ftui-image><br />
<br />
</ftui-column><br />
<br />
<ftui-column height="82%" margin="1"><br />
<br />
<ftui-label padding="1" scroll text-align="left" size="3"<br />
<br />
[text]="Unwetterzentrale:{{Warn_NR}}_LongText"><br />
<br />
</ftui-label><br />
<br />
</ftui-column><br />
<br />
</ftui-row><span> <ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" <br />
<br />
text="Gültig vom "> <br />
<br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" <br />
<br />
[text]="Unwetterzentrale:{{Warn_NR}}_Start_Date"> <br />
<br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" <br />
<br />
[text]="Unwetterzentrale:{{Warn_NR}}_Start_Time"> <br />
<br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" <br />
<br />
text="Uhr"> <br />
<br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" <br />
<br />
text="bis zum"> <br />
<br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" <br />
<br />
[text]="Unwetterzentrale:{{Warn_NR}}_End_Date"> <br />
<br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" <br />
<br />
[text]="Unwetterzentrale:{{Warn_NR}}_End_Time"> <br />
<br />
</ftui-label> <br />
<br />
<ftui-label size="2" color="primary" top="-30px" style="position:relative;" class="bold" <br />
<br />
text="Uhr"> <br />
<br />
</ftui-label> </span>Content-Datei für die Wettervorhersage (7-Tage):<!-- [text]="WetterProplanta:{{VHS_NR}}_date | toDate() | format('eeee - DD.MM.YYYY')" color="white"<br />
<br />
class="bold" margin="-1"> --><br />
<br />
<ftui-label<br />
<br />
[text]="WetterProplanta:{{VHS_NR}}_date | toDate() | t=>(t.toLocaleDateString()===(new<br />
<br />
Date()).toLocaleDateString())?'Heute':ftuiHelper.dateFormat(t,'eeee - DD.MM.YYYY')" color="white" class="bold"<br />
<br />
margin="-1"><br />
<br />
</ftui-label><br />
<br />
<ftui-row height="50%"><br />
<br />
<ftui-column><br />
<br />
<ftui-label<br />
<br />
text="morgens" size="2"><br />
<br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG"<br />
<br />
[condition]="WetterProplanta:{{VHS_NR}}_weatherMorningIcon"><br />
<br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp06 | step('-73:violet, -9:blue, 10:green, 25:orange,<br />
<br />
32:red')" margin="0.5"<br />
<br />
[text]="WetterProplanta:{{VHS_NR}}_temp06" unit="°C"><br />
<br />
</ftui-label><br />
<br />
<ftui-label margin="0.5"<br />
<br />
[text]="WetterProplanta:{{VHS_NR}}_weatherMorning"><br />
<br />
</ftui-label><br />
<br />
<ftui-row><br />
<br />
<ftui-label text-align="left" left="55px" style="position:relative;"<br />
<br />
text="Max:"><br />
<br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-55px" style="position:relative;"<br />
<br />
[text]="WetterProplanta:{{VHS_NR}}_tempMax" unit="°C"><br />
<br />
</ftui-label><br />
<br />
</ftui-row><br />
<br />
<ftui-row><br />
<br />
<ftui-label text-align="left" left="55px" style="position:relative;"<br />
<br />
text="Min:"><br />
<br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-55px" style="position:relative;"<br />
<br />
[text]="WetterProplanta:{{VHS_NR}}_tempMin" unit="°C"><br />
<br />
</ftui-label><br />
<br />
</ftui-row><br />
<br />
</ftui-column><br />
<br />
<ftui-column><br />
<br />
<ftui-label<br />
<br />
text="Mittags" size="2"><br />
<br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG"<br />
<br />
[condition]="WetterProplanta:{{VHS_NR}}_weatherDayIcon"><br />
<br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp12 | step('-73:violet, -9:blue, 10:green, 25:orange,<br />
<br />
32:red')" margin="0.5"<br />
<br />
[text]="WetterProplanta:{{VHS_NR}}_temp12" unit="°C"><br />
<br />
</ftui-label><br />
<br />
<ftui-label margin="0.5"<br />
<br />
[text]="WetterProplanta:{{VHS_NR}}_weatherDay"><br />
<br />
</ftui-label><br />
<br />
<ftui-row><br />
<br />
<ftui-label text-align="left" left="45px" style="position:relative;"<br />
<br />
text="Regen:"><br />
<br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-40px" style="position:relative;"<br />
<br />
[text]="WetterProplanta:{{VHS_NR}}_chOfRainDay" unit="%"><br />
<br />
</ftui-label><br />
<br />
</ftui-row><br />
<br />
<ftui-row><br />
<br />
<ftui-label text-align="left" left="45px" style="position:relative;"<br />
<br />
text="Sonne:"><br />
<br />
</ftui-label><br />
<br />
<ftui-label text-align="right" left="-40px" style="position:relative;"<br />
<br />
[text]="WetterProplanta:{{VHS_NR}}_sun" unit="%"><br />
<br />
</ftui-label><br />
<br />
</ftui-row><br />
<br />
</ftui-column><br />
<br />
<ftui-column><br />
<br />
<ftui-label<br />
<br />
text="Abends" size="2"><br />
<br />
</ftui-label><br />
<br />
<ftui-weather icon-set="kleinklimaFHEM" provider="proplantaICON_LONG"<br />
<br />
[condition]="WetterProplanta:{{VHS_NR}}_weatherEveningIcon"><br />
<br />
</ftui-weather><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_temp18 | step('-73:violet, -9:blue, 10:green, 25:orange,<br />
<br />
32:red')" margin="0.5"<br />
<br />
[text]="WetterProplanta:{{VHS_NR}}_temp18" unit="°C"><br />
<br />
</ftui-label><br />
<br />
<ftui-label margin="0.5"<br />
<br />
[text]="WetterProplanta:{{VHS_NR}}_weatherEvening"><br />
<br />
</ftui-label><br />
<br />
<ftui-row><br />
<br />
<ftui-label left="20px" style="position:relative;"<br />
<br />
text="UV:"><br />
<br />
</ftui-label><br />
<br />
<ftui-label [color]="WetterProplanta:{{VHS_NR}}_uv | step('0:green, 3:yellow, 6:orange, 8:red, 11:violet')"<br />
<br />
left="-20px" style="position:relative;"<br />
<br />
[text]="WetterProplanta:{{VHS_NR}}_uv"><br />
<br />
</ftui-label><br />
<br />
</ftui-row><br />
<br />
<ftui-label<br />
<br />
[text]=""><br />
<br />
</ftui-label><br />
<br />
</ftui-column><br />
<br />
</ftui-row><br />
<br />
Ergebnis:</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=38018FTUI3 Best Practices2023-02-01T19:33:40Z<p>Andreas r: </p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]<br />
# [[FTUI3 HTML Controls|Anpassen von Standard HTML Eigenschaften]]<br />
# [[FTUI3 Readingsgroup|Anzeige einer Readingsgroup]]<br />
# [[FTUI3 DWD Wettervorhersage|Anzeige einer DWD-Wettervorhersage]]<br />
# [[FTUI3 Scrollbares Label|Scrollbares Label]]<br />
# [[FTUI3 Testinstanz|FTUI3 in Testinstanz und Produktivinstanz aufteilen]]<br />
# [[FTUI3 Proplanta Wetter| Wetteranzeige mit Proplanta Device]]<br />
# wird fortgesetzt<br />
<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:Interfaces]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Testinstanz&diff=37930FTUI3 Testinstanz2023-01-08T19:31:33Z<p>Andreas r: /* Umsetzung */</p>
<hr />
<div>== Zielsetzung ==<br />
Bei FTUI3 Updates werden unter Umständen Dinge angepasst, die bestehende Funktionen beeinträchtigen. Wie kann ich meine FTUI3 Installation davor schützen?<br />
<br />
== Umsetzung ==<br />
Um den Betrieb möglichst wenig zu gefährden und die Akzeptanz in der Familie zu erhöhen, kopiert man das ftui Verzeichnis auf ein '''''ftui_stable''''' (siehe auch Quelltext unten) Verzeichnis und verwendet in Zukunft dieses Verzeichnis, um es auf den "produktiven" Geräten (Tablet im Wohnzimmer, Handy der Ehefrau usw.) anzuzeigen. Auf meinen "Testgeräten" (eigenes Handy, eigener PC) läuft immer das FTUI3 im Standard FTUI Verzeichnis.<br />
<br />
So gelangen die Updates und auch eigene Weiterentwicklungen zunächst auf meine Testgeräte, bevor ich sie dann auf die Enduser ausgerollt werden. (per Kopie des ftui Folders auf den ftui_stable folder)<br />
<br />
Das folgende Skript selber muss in den html body, am besten als erste Anweisung. <br />
<br />
<syntaxhighlight lang="html"><br />
<script><br />
if (this.location.pathname.includes("ftui_stable")) {<br />
document.head.innerHTML += '<meta name="toast" content="0">';<br />
} else {<br />
document.head.innerHTML += '<meta name="toast" content="1">';<br />
document.head.innerHTML += '<meta name="toast_position" content="topLeft">';<br />
document.body.innerHTML += '<div id="div1">Test-Version</div>';<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
'''Optional''': Um die Versionen noch besser unterscheidbar zu machen, kann noch folgende Erweiterung vorgenommen werden. Damit erreicht man, dass in der Test-Version ein entsprechendes Banner angezeigt wird, was in der produktiven Instanz dann nicht hinzugefügt wird. Außerdem zeigt die Testversion auch Toast Messages an.<br />
<br />
Ein CSS File (hier user.css) muss existieren und auch im html header verlinkt sein:<br />
<br />
<syntaxhighlight lang="html"><br />
<link href="user.css" rel="stylesheet" type="text/css" /><br />
</syntaxhighlight><br />
<br />
In dieses CSS File schreibt man anschließend den folgenden Code, um damit das hinzugefügte DIV noch zu stylen.<syntaxhighlight lang="css"><br />
#div1 {<br />
color: red;<br />
text-align: center;<br />
z-index: 99;<br />
height: 30px;<br />
width: 100px;<br />
background-color: pink;<br />
right: 10px;<br />
position: absolute;<br />
padding: 10px;<br />
top: 10px;<br />
}<br />
</syntaxhighlight>'''Wichtig''': Der Ordner muss '''ftui_stable''' heißen oder man muss das Skript anpassen.</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Testinstanz&diff=37827FTUI3 Testinstanz2022-12-19T11:54:13Z<p>Andreas r: Die Seite wurde neu angelegt: „== Zielsetzung == Bei FTUI3 Updates werden unter Umständen Dinge angepasst, die bestehende Funktionen beeinträchtigen. Wie kann ich meine FTUI3 Installation…“</p>
<hr />
<div>== Zielsetzung ==<br />
Bei FTUI3 Updates werden unter Umständen Dinge angepasst, die bestehende Funktionen beeinträchtigen. Wie kann ich meine FTUI3 Installation davor schützen?<br />
<br />
== Umsetzung ==<br />
Um den Betrieb möglichst wenig zu gefährden und die Akzeptanz in der Familie zu erhöhen, kopiert man das ftui Verzeichnis auf ein '''''ftui_stable''''' (siehe auch Quelltext unten) Verzeichnis und verwendet in Zukunft dieses Verzeichnis, um es auf den "produktiven" Geräten (Tablet im Wohnzimmer, Handy der Ehefrau usw.) anzuzeigen. Auf meinen "Testgeräten" (eigenes Handy, eigener PC) läuft immer das FTUI3 im Standard FTUI Verzeichnis.<br />
<br />
So gelangen die Updates und auch eigene Weiterentwicklungen zunächst auf meine Testgeräte, bevor ich sie dann auf die Enduser ausgerollt werden. (per Kopie des ftui Folders auf den ftui_stable folder)<br />
<br />
'''Optional''': Um die Versionen noch besser unterscheidbar zu machen, kann noch folgende Erweiterung vorgenommen werden. Damit erreicht man, dass in der Test-Version ein entsprechendes Banner angezeigt wird, was in der produktiven Instanz dann nicht hinzugefügt wird. Außerdem zeigt die Testversion auch Toast Messages an. <br />
<br />
<br />
<syntaxhighlight lang="html"><br />
<script><br />
var url = $(location).attr('href');<br />
var pathname = $(location).attr('pathname');<br />
if (pathname.includes("ftui_stable")) {<br />
$('<meta name="toast" content="0">').appendTo('head');<br />
} else {<br />
$('<div id="div1">Test-Version</div>').appendTo('body');<br />
$('<meta name="toast" content="1">').appendTo('head');<br />
$('<meta name="toast_position" content="topLeft">').appendTo('head');<br />
}<br />
</script><br />
</syntaxhighlight><br />
<br />
Das hinzugefügte DIV sollte man noch so stylen, z.B. durch hinzufügen des folgenden Eintrags in einer user.css Datei:<br />
<br />
<syntaxhighlight lang="css"><br />
#div1 {<br />
color: red;<br />
text-align: center;<br />
z-index: 99;<br />
height: 30px;<br />
width: 100px;<br />
background-color: pink;<br />
right: 10px;<br />
position: absolute;<br />
padding: 10px;<br />
top: 10px;<br />
}<br />
</syntaxhighlight></div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=37826FTUI3 Best Practices2022-12-19T11:43:10Z<p>Andreas r: /* Anwendungsbeispiele */</p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]<br />
# [[FTUI3 HTML Controls|Anpassen von Standard HTML Eigenschaften]]<br />
# [[FTUI3 Readingsgroup|Anzeige einer Readingsgroup]]<br />
# [[FTUI3 Scrollbares Label|Scrollbares Label]]<br />
# [[FTUI3 Testinstanz|FTUI3 in Testinstanz und Produktivinstanz aufteilen]]<br />
# wird fortgesetzt<br />
<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:Interfaces]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Scrollbares_Label&diff=37825FTUI3 Scrollbares Label2022-12-19T11:37:49Z<p>Andreas r: Die Seite wurde neu angelegt: „== Zielsetzung == Wie kann man einen Zeilenumbruch innerhalb eines FTUI3 Labels erreichen? == Umsetzung == Verwendung von scroll als Attribut. <syntaxhighli…“</p>
<hr />
<div>== Zielsetzung ==<br />
Wie kann man einen Zeilenumbruch innerhalb eines FTUI3 Labels erreichen?<br />
<br />
== Umsetzung ==<br />
Verwendung von scroll als Attribut. <br />
<br />
<syntaxhighlight lang="html"><br />
<br />
<ftui-label scroll text-align="center"><br />
Lorem Ipsum dolor sit amet, consectetur adipiscing elit,<br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi<br />
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit<br />
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.<br />
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.<br />
</ftui-label><br />
<br />
</syntaxhighlight></div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=37824FTUI3 Best Practices2022-12-19T11:33:21Z<p>Andreas r: </p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]<br />
# [[FTUI3 HTML Controls|Anpassen von Standard HTML Eigenschaften]]<br />
# [[FTUI3 Readingsgroup|Anzeige einer Readingsgroup]]<br />
# [[FTUI3 Scrollbares Label|Scrollbares Label]]<br />
# wird fortgesetzt<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:Interfaces]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=37704FTUI3 Best Practices2022-11-23T18:52:47Z<p>Andreas r: </p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]<br />
# [[FTUI3 HTML Controls|Anpassen von Standard HTML Eigenschaften]]<br />
# [[FTUI3 Readingsgroup|Anzeige einer Readingsgroup]]<br />
# wird fortgesetzt<br />
<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:Interfaces]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Readingsgroup&diff=37703FTUI3 Readingsgroup2022-11-23T18:52:39Z<p>Andreas r: Die Seite wurde neu angelegt: „== Zielsetzung == Eine Readingsgroup aus FHEM (die Grafiken enthält) soll in FTUI dargestellt werden. == Umsetzung == <syntaxhighlight lang="html"> <ftui-gri…“</p>
<hr />
<div>== Zielsetzung ==<br />
Eine Readingsgroup aus FHEM (die Grafiken enthält) soll in FTUI dargestellt werden.<br />
<br />
== Umsetzung ==<br />
<syntaxhighlight lang="html"><br />
<ftui-grid-tile row="1" col="1" height="4" width="4"><br />
<header>Readingsgroup</header><br />
<ftui-content id="readings_group" [content]="<deine_readingsgroup> | getHTML('<deine_readingsgroup>')"></ftui-content><br />
</ftui-grid-tile><br />
</syntaxhighlight><br />
<br />
<br />
Dazu muss noch folgendes CSS mit definiert werden, falls die Readingsgroup Icons enthält:<br />
<br />
<syntaxhighlight lang="css"><br />
/* Bilder in Readingsgroups in sinnvoller Größe darstellen */<br />
#readings_group svg {<br />
width: 20px;<br />
height: 20px;<br />
}<br />
</syntaxhighlight></div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=37702FTUI3 Best Practices2022-11-22T11:19:46Z<p>Andreas r: </p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]<br />
# [[FTUI3 HTML Controls|Anpassen von Standard HTML Eigenschaften]]<br />
# wird fortgesetzt<br />
<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:Interfaces]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_HTML_Controls&diff=37701FTUI3 HTML Controls2022-11-22T11:19:34Z<p>Andreas r: Die Seite wurde neu angelegt: „== Zielsetzung == Eine Eigenschaft eines Standard HTML Elements soll aus FHEM heraus ausgelesen werden und gesetzt werden. Hier im Beispiel soll ein Link auf e…“</p>
<hr />
<div>== Zielsetzung ==<br />
Eine Eigenschaft eines Standard HTML Elements soll aus FHEM heraus ausgelesen werden und gesetzt werden. Hier im Beispiel soll ein Link auf eine dynamische URL verweisen. <br />
Im Unterschied zu den FTUI3 Controls ist das <a> Element ein Standard HTML Baustein, der ansonsten nicht anpassbar wäre.<br />
<br />
== Umsetzung ==<br />
<syntaxhighlight lang="html"><br />
<a ftui-binding [href]="AgroWeather:fc0_weather00Icon">Wettericon</a><br />
</syntaxhighlight></div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=37700FTUI3 Best Practices2022-11-22T10:34:48Z<p>Andreas r: Analoguhr hinzugefügt</p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# [[FTUI3 Analoguhr|Darstellung einer Analog-Uhr]]<br />
# wird fortgesetzt<br />
<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:Interfaces]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Analoguhr&diff=37699FTUI3 Analoguhr2022-11-22T10:34:12Z<p>Andreas r: /* Zielsetzung */</p>
<hr />
<div>== Zielsetzung ==<br />
Es gibt noch kein FTUI Control für die Darstellung einer analogen Uhr. Wie kann das trotzdem eingebunden werden?<br />
<br />
== Umsetzung ==<br />
Verwendung der Analoguhr dieser Seite: http://www.3quarks.com/en/SVGClock/index.html<br />
Hier findet sich auch ein Online Editor, der zeigt, wie man die Darstellung der Uhr anhand der Parameter beeinflussen kann. <br />
<br />
Um die Lösung lokal lauffähig zu bekommen, sollte man sich das [http://www.3quarks.com/images/svg/station-clock.svg SVG Image] der Uhr lokal im FTUI Ordner abspeichern. (hier unter dem Ordner "images" geschehen)<br />
<br />
<syntaxhighlight lang="html"><br />
<ftui-grid-tile row="1" col="2" height="2" width="3"><br />
<header>Uhr</header> <br />
<object data="images/station-clock.svg" type="image/svg+xml" width="200" height="200"><br />
<param name="dial" value="din 41091.4" /><br />
<param name="hourHand" value="din 41092.3" /><br />
<param name="minuteHand" value="din 41092.3" /><br />
<param name="secondHand" value="din 41071.1" /><br />
<param name="minuteHandBehavior" value="stepping" /><br />
<param name="secondHandBehavior" value="swinging" /><br />
<param name="secondHandStopToGo" value="yes" /><br />
<param name="secondHandStopTime" value="1.5" /><br />
<param name="backgroundColor" value="rgba(0,0,0,0)" /><br />
<param name="dialColor" value="rgb(191,191,191)" /><br />
<param name="hourHandColor" value="rgb(230,230,230)" /><br />
<param name="minuteHandColor" value="rgb(230,230,230)" /><br />
<param name="secondHandColor" value="rgb(230,50,40)" /><br />
<param name="axisCoverColor" value="rgb(191,191,191)" /><br />
<param name="axisCoverRadius" value="7" /><br />
<param name="updateInterval" value="50" /><br />
</object><br />
</ftui-grid-tile><br />
</syntaxhighlight></div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Analoguhr&diff=37698FTUI3 Analoguhr2022-11-22T10:33:44Z<p>Andreas r: Die Seite wurde neu angelegt: „== Zielsetzung == Es gibt noch kein FTUI Control für die Datstelung einer analogen Uhr. Wie kann das trotzdem eingebunden werden? == Umsetzung == Verwendung…“</p>
<hr />
<div>== Zielsetzung ==<br />
Es gibt noch kein FTUI Control für die Datstelung einer analogen Uhr. Wie kann das trotzdem eingebunden werden?<br />
<br />
== Umsetzung ==<br />
Verwendung der Analoguhr dieser Seite: http://www.3quarks.com/en/SVGClock/index.html<br />
Hier findet sich auch ein Online Editor, der zeigt, wie man die Darstellung der Uhr anhand der Parameter beeinflussen kann. <br />
<br />
Um die Lösung lokal lauffähig zu bekommen, sollte man sich das [http://www.3quarks.com/images/svg/station-clock.svg SVG Image] der Uhr lokal im FTUI Ordner abspeichern. (hier unter dem Ordner "images" geschehen)<br />
<br />
<syntaxhighlight lang="html"><br />
<ftui-grid-tile row="1" col="2" height="2" width="3"><br />
<header>Uhr</header> <br />
<object data="images/station-clock.svg" type="image/svg+xml" width="200" height="200"><br />
<param name="dial" value="din 41091.4" /><br />
<param name="hourHand" value="din 41092.3" /><br />
<param name="minuteHand" value="din 41092.3" /><br />
<param name="secondHand" value="din 41071.1" /><br />
<param name="minuteHandBehavior" value="stepping" /><br />
<param name="secondHandBehavior" value="swinging" /><br />
<param name="secondHandStopToGo" value="yes" /><br />
<param name="secondHandStopTime" value="1.5" /><br />
<param name="backgroundColor" value="rgba(0,0,0,0)" /><br />
<param name="dialColor" value="rgb(191,191,191)" /><br />
<param name="hourHandColor" value="rgb(230,230,230)" /><br />
<param name="minuteHandColor" value="rgb(230,230,230)" /><br />
<param name="secondHandColor" value="rgb(230,50,40)" /><br />
<param name="axisCoverColor" value="rgb(191,191,191)" /><br />
<param name="axisCoverRadius" value="7" /><br />
<param name="updateInterval" value="50" /><br />
</object><br />
</ftui-grid-tile><br />
</syntaxhighlight></div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_Best_Practices&diff=37697FTUI3 Best Practices2022-11-22T10:18:33Z<p>Andreas r: initial version</p>
<hr />
<div>== FTUI3 Best practices ==<br />
Auf diesen Seiten findest Du eine Sammlung von Tipps und Tricks bei der Verwendung von [[FHEM Tablet UI v3]], kurz auch FTUI3. Die Beispiele auf dieser Seite sind eine Sammlung von Ratschlägen aus dem [https://forum.fhem.de/index.php/board,71.0.html FHEM Forum] und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.<br />
<br />
Es gibt bereits eine Reihe von [https://github.com/knowthelist/ftui/tree/master/www/ftui/examples Beispielen] zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen. <br />
<br />
== generelle Verwendung ==<br />
Grundsätzlich kann man die verschiedenen Elemente aus FTUI alle auf die gleiche Art und Weise einsetzen. Zum einen kann man die Werte, die diese darstellen sollen, fest zuweisen:<br />
<syntaxhighlight lang="html"><br />
<ftui-label text="Hallo Welt"></ftui-label><br />
</syntaxhighlight><br />
Öfter jedoch wird es gewünscht sein, die Werte eines Devices dynamisch aus FHEM zu beziehen. Im Standard wird hier der Wert gelesen, den das Device im reading "state" hat. Dies erreicht man mit folgender Syntax:<br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name des Devices"></ftui-label><br />
</syntaxhighlight><br />
Will man ein anderes Reading als "state" auslesen, kann man das so machen: <br />
<syntaxhighlight lang="html"><br />
<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label><br />
</syntaxhighlight><br />
<br />
Ebenfalls ist es möglich, Werte aus FTUI3 zurück an FHEM zu geben. Hierzu wird der Status des FTUI Controls per set Befehl and das gewählte Device geschickt. (In diesem Beispiel hat der Button die Standardwerte "on" und "off". Diese werden dann beim Klick darauf an FHEM gesendet per "set name_des_zu_schaltenden_device on".)<br />
Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden. <br />
<syntaxhighlight lang="html"><br />
<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button><br />
</syntaxhighlight><br />
<br />
Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:<br />
<syntaxhighlight lang="html"><br />
<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button><br />
<br />
<ftui-button [(value)]="device"></ftui-button><br />
</syntaxhighlight><br />
<br />
<br />
All diese Mechanismen des Lesens und Schreibens können nun in verschiedenster Weise beeinflusst werden. So ist es für das Lesen möglich, Werte aus FHEM vor ihrer Darstellung im Frontend entsprechend anzupassen. (z.B. ein Datum lesbarer zu machen oder auf spezielle Readings im Frontend zu reagieren)<br />
<br />
Damit können nicht nur die Werte eines Controls angepasst werden, sondern es ist ebenfalls möglich, andere Eigenschaften je nach FHEM Reading zu beeinflussen:<br />
* Die Farben eines Controls können angepasst werden<br />
* Die Größe kann sich ändern<br />
* Das Control kann ein- oder ausgeblendet werden<br />
* Bilder können angepasst werden<br />
* Warnungen können erscheinen<br />
* Popup Fenster können sich öffnen oder schließen<br />
* und vieles mehr ...<br />
<br />
Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:<br />
<br />
== Anwendungsbeispiele ==<br />
# [[FTUI3 Füllstand Zisterne|Füllstand einer Zisterne in Schritten darstellen]]<br />
# wird fortgesetzt<br />
<br />
== FTUI Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
[[Kategorie:Interfaces]]</div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_F%C3%BCllstand_Zisterne&diff=37696FTUI3 Füllstand Zisterne2022-11-22T10:17:33Z<p>Andreas r: initial version</p>
<hr />
<div>== Zielsetzung ==<br />
Je nach Füllstand einer Zisterne soll ein passendes Bild (welches erschwerend auch noch im Open Automation Order liegt) angezeigt werden<br />
<br />
== Umsetzung ==<br />
<syntaxhighlight lang="html"><br />
<ftui-icon class="size-3" <br />
path="../images/openautomation"<br />
[name]="Zisterne:Percent | map('0:zisterne_00, 20:zisterne_20, 40:zisterne_40, 60:zisterne_60, 80:zisterne_80, 100:zisterne_100')"><br />
</ftui-icon><br />
</syntaxhighlight><br />
<br />
alternativ auch mit dem step pipe möglich, falls das Device Zisterne auch Werte zwischen den definierten Prozentzahlen sendet:<br />
<syntaxhighlight lang="html"><br />
<ftui-icon class="size-3" <br />
path="../images/openautomation"<br />
[name]="Zisterne:Percent | step('0:zisterne_00, 20:zisterne_20, 40:zisterne_40, 60:zisterne_60, 80:zisterne_80, 100:zisterne_100')"><br />
</ftui-icon><br />
</syntaxhighlight></div>Andreas rhttp://wiki.fhem.de/w/index.php?title=FTUI3_F%C3%BCllstand_Zisterne&diff=37695FTUI3 Füllstand Zisterne2022-11-22T10:15:45Z<p>Andreas r: Die Seite wurde neu angelegt: „== Zielsetzung == Je nach Füllstand einer Zisterne soll ein passendes Bild (welches erschwerend auch noch im Open Automation Order liegt) angezeigt werden ==…“</p>
<hr />
<div>== Zielsetzung ==<br />
Je nach Füllstand einer Zisterne soll ein passendes Bild (welches erschwerend auch noch im Open Automation Order liegt) angezeigt werden<br />
<br />
== Umsetzung ==<br />
<syntaxhighlight lang="html"><br />
<ftui-icon class="size-3" <br />
path="../images/openautomation"<br />
[name]="Zisterne:Percent | map('0:zisterne_00, 20:zisterne_20, 40:zisterne_40, 60:zisterne_60, 80:zisterne_80, 100:zisterne_100')"><br />
</ftui-icon><br />
</syntaxhighlight><br />
<br />
alternativ auch mit dem step pipe möglich:<br />
<syntaxhighlight lang="html"><br />
<ftui-icon class="size-3" <br />
path="../images/openautomation"<br />
[name]="Zisterne:Percent | step('0:zisterne_00, 20:zisterne_20, 40:zisterne_40, 60:zisterne_60, 80:zisterne_80, 100:zisterne_100')"><br />
</ftui-icon><br />
</syntaxhighlight></div>Andreas rhttp://wiki.fhem.de/w/index.php?title=Kategorie:FHEM_Tablet_UI_V3&diff=37694Kategorie:FHEM Tablet UI V32022-11-22T09:11:54Z<p>Andreas r: </p>
<hr />
<div>{{Infobox Modul<br />
|ModPurpose=Oberfläche für FHEM v3<br />
|ModType=x<br />
|ModFTopic=115259<br />
|ModForumArea=TabletUI<br />
|ModTechName=n.a.<br />
|ModOwner=setstate ({{Link2FU|7023|Forum}})<br />
}}<br />
[[FHEM Tablet UI v3]] (FTUI3) ist ein 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. Es ist die Nachfolgeversion von FHEM Tablet UI v2 aber nicht abwärtskompatibel. Ein Umstieg auf FTUI3 hat eine Neu-Programmierung der Oberfläche zur Folge.<br />
<br />
Mit Hilfe zahlreicher Komponenten, 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.<br />
<br />
== Installation ==<br />
Die Installation von FHEM Tablet UI v3 (FTUI3) erzeugt keinen großen Aufwand und besteht im Großen und Ganzen aus zwei Schritten:<br />
*Dateien aus dem GitHub-Repository herunterladen<br />
*Eine Beispieldatei anlegen<br />
<br />
{{Hinweis|Diese Anleitung geht davon aus, dass FHEM unter Debian nach der Anleitung [https://debian.fhem.de Stable build using apt] installiert wurde.<br />
Ist dies nicht der Fall, muss der Pfad '''/opt/fhem''' dementsprechend angepasst werden.}}<br />
<br />
<br />
'''1.''' Zuerst müssen alle Dateien von FHEM Tablet UI in das FHEM-Verzeichnis '''/opt/fhem/www/ftui''' kopiert werden. Das geht mit folgendem '''update'''-Befehl über die FHEM-Befehlszeile.<br />
:<code>update all https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt</code><br />
<br />
:[[Datei:FTUI3_Installation_01.png|thumb|none|Schritt 1: Dateien kopieren]]<br />
<br />
<br />
<nowiki>{{FTUI3 kann in weiterer Folge unter der URL </nowiki>'''<nowiki>http(s)://<fhem-server>:8083/fhem/ftui/index.html</nowiki>''' aufgerufen werden.<br />
<br />
'''2.''' Damit FHEM Tablet UI mit FHEM kommunizieren kann, ist noch die '''longpoll'''-Einstellung im [[FHEMWEB]] Device festzulegen.<br />
<br />
:<code>attr WEB longpoll websocket</code><br />
:bzw. bei Problemen mit ''websocket''<br />
:<code>attr WEB longpoll 1</code><br />
<br />
:[[Datei:FTUI3_Installation_03.png|thumb|none|Schritt 3: longpoll einstellen]]<br />
<br />
<br />
'''3.''' Weil FTUI noch nichts anzuzeigen hat, wird die Datei '''/opt/fhem/www/ftui/index-example.html''' nach '''/opt/fhem/www/ftui/index.html''' kopiert.<br />
:<code>sudo cp -a /opt/fhem/www/ftui/index-example.html /opt/fhem/www/ftui/index.html</code><br />
<br />
:[[Datei:FTUI3_Installation_04.png|thumb|none|Schritt 4: index.html erstellen]]<br />
<br />
<br />
'''4.''' Abschließend muss FHEM noch '''neu gestartet''' werden (''shutdown restart'') da das Attribut '''longpoll''' geändert wurde.<br />
<br />
<br />
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<br />
<br />
== Update ==<br />
Ein Update von FTUI kann ebenfalls über die FHEM-Kommandozeile erfolgen.<br />
<br />
'''1.''' Prüfen der Änderungen seit dem letzten Download/Update durch Eingabe von:<br />
:<code><nowiki>update check https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt</nowiki></code><br />
<br />
<br />
'''2.''' Update der geänderten Dateien durch Eingabe von:<br />
:<code><nowiki>update all https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt</nowiki></code><br />
<br />
<br />
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.<br />
:<code><nowiki>update add https://raw.githubusercontent.com/knowthelist/ftui/master/controls_ftui.txt</nowiki></code><br />
<br />
Beachte: Das Ergebnis des o.g. Befehls wird in FHEM/controls.txt eingetragen, siehe auch [[Update#update_add]]<br />
<br />
== Dokumentation ==<br />
https://github.com/knowthelist/ftui/<br />
<br />
== Best practices ==<br />
[[FTUI3 Best Practices]] (aktuell in Arbeit)</div>Andreas r