FTUI3 Best Practices

FTUI3 Best practices

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 FHEM Forum und sollen hier zwecks der besseren Übersichtlichkeit und Wiederauffindbarkeit gesammelt dargestellt werden.

Es gibt bereits eine Reihe von Beispielen zur Verwendung von FTUI3. Diese sollen hier nicht wiederholt werden, sondern die Fälle sollen eine Ergänzung zu speziellen Fragestellungen darstellen.

generelle Verwendung

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:

<ftui-label text="Hallo Welt"></ftui-label>

Ö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:

<ftui-label [text]="name des Devices"></ftui-label>

Will man ein anderes Reading als "state" auslesen, kann man das so machen:

<ftui-label [text]="name_des_Devices:name_des_readings"></ftui-label>

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".) Es ist möglich, das FTUI Control so anzupassen, dass andere bzw. mehr Befehle als "on" oder "off" gesendet werden.

<ftui-button (value)="name_des_zu_schaltenden_device"></ftui-button>

Das Lesen und Senden von Befehlen kann auch in einem Control kombiniert werden:

<ftui-button [value]="name_des_zu_lesenden_device" (value)="name_des_zu_schaltenden_device"></ftui-button>

<ftui-button [(value)]="device"></ftui-button>

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)

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:

• Die Farben eines Controls können angepasst werden
• Die Größe kann sich ändern
• Das Control kann ein- oder ausgeblendet werden
• Bilder können angepasst werden
• Warnungen können erscheinen
• Popup Fenster können sich öffnen oder schließen
• und vieles mehr ...

Die folgenden Beispiele geben einen Überblick über genau diese Möglichkeiten:

Anwendungsbeispiele

1. Füllstand einer Zisterne in Schritten darstellen
2. Darstellung einer Analog-Uhr
3. Anpassen von Standard HTML Eigenschaften
4. Anzeige einer Readingsgroup
5. Anzeige einer DWD-Wettervorhersage
6. Scrollbares Label
7. FTUI3 in Testinstanz und Produktivinstanz aufteilen
8. Wetteranzeige mit Proplanta Device
9. wird fortgesetzt

FTUI Dokumentation

https://github.com/knowthelist/ftui/