FTUI3 Pipelines: Unterschied zwischen den Versionen

Aus FHEMWiki
Keine Bearbeitungszusammenfassung
 
(3 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
===Pipeline part===
==Verwendung von FTUI3 Pipes==
value => input => ftuiHelper.getPart(input, value);
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".
===Pipeline toDate===
 
value => input => ftuiHelper.dateFromString(input, value);
Jedes Binding folgt einem standardisierten Syntaxmuster:<syntaxhighlight lang="html">
===Pipeline toBool===
<ftui-element [attribut]="DeviceName:reading | transformation"></ftui-element>
() => input => ftuiHelper.toBool(input);
</syntaxhighlight>
===Pipeline toInt===
 
() => input => parseInt(input, 10);
====DeviceName:====
===Pipeline toNumber===
Der Name des FHEM-Geräts
() => input => parseFloat(input, 10);
 
===Pipeline format===
====reading====
value => input => ftuiHelper.dateFormat(input, value);
Der spezifische Status oder Wert des Geräts, der ausgelesen werden soll
===Pipeline humanized===
 
() => input => ftuiHelper.durationHumanized(input);
====transformation====
===Pipeline round===
Optional können mehrere Transformationen (sog. "Pipes") verwendet werden, um den Wert zu formatieren oder anzupassen.
value => input => ftuiHelper.round(input, value);
 
===Pipeline fix===
===Einfaches Input-Pipe Beispiel===
value => input => Number(input).toFixed(value);
Dieses Beispiel zeigt die Verwendung eines Bindings, das eine direkte Umwandlung des Wertes mittels der `toInt()` Pipe ausfüh<syntaxhighlight lang="html">
===Pipeline roundMoney===
<ftui-label [text]="TemperaturSensor:state | toInt()"></ftui-label>
() => input => ftuiHelper.formatMoney(Number(input));
</syntaxhighlight>
===Pipeline slice===
===Beispiel für Pipe-Kombinationen===
(start, end)  => input => String(input).slice(start, end);
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">
===Pipeline encode===
<ftui-label [text]="AgroWeather:state | part(4) | toInt() | multiply(2) | round(1)">
() => input => encodeURI(input);
</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)`).
===Pipeline add===
 
value => input => Number(input) + value;
===Beispiel für Ausgabe-Bindings===
===Pipeline multiply===
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">
value => input => Number(input) * value;
<ftui-colorpicker (hex)="replace('#',) | HUEDevice6:rgb"></ftui-colorpicker>
===Pipeline divide===
</syntaxhighlight>
value => input => Number(input) / value;
==Verfügbare Transformationsfunktionen (Pipes)==
===Pipeline replace===
===Übersicht===
(find, replace) => input => String(input).replace(find, replace);
* part: Teilwert aus zusammengesetztem String, z.B. part(':2').
===Pipeline map===
* toDate: String → Datum parsen mit Format, z.B. toDate('YYYY-MM-DD hh:mm:ss').
value => input => ftuiHelper.getMatchingValue(parseHocon(value, true), input);
* toBool: Zahl/String → boolean.
===Pipeline filter===
* toInt: Zahl/String → Integer.
value => input => ftuiHelper.filter((value).split(','), input);
* toNumber: Zahl/String → Float.
===Pipeline step===
* format: Datum formatieren, z.B. format('DD.MM.YYYY HH:mm').
value => input => ftuiHelper.getStepValue(parseHocon(value, true), input);
* humanized: Dauer menschenlesbar, z.B. „vor 2 Std.“.
===Pipeline scale===
* round: Runden auf Schritt, z.B. round(0.5).
(minIn, maxIn, minOut, maxOut) => input => ftuiHelper.scale(input, minIn, maxIn, minOut, maxOut);
* fix: Festkomma mit Stellen, z.B. fix(2) → „1.23“.
===Pipeline ago===
* roundMoney: Währungsformatierung.
() => input => ftuiHelper.dateAgo(input);
* slice: String-Slice, z.B. slice(0,3).
===Pipeline till===
* encode: encodeURI(...).
() => input => ftuiHelper.dateTill(input);
* add: Addieren, z.B. add(5).
===Pipeline timeFormat===
* multiply: Multiplizieren, z.B. multiply(10).
(format, inputMode===
* divide: Dividieren, z.B. divide(2).
'ms', formatMode===
* replace: Ersetzen, z.B. replace('on','1') oder Regex.
'lower') => input => ftuiHelper.timeFormat(input, format, inputMode, formatMode);
* map: Werte-Mapping über HOCON, z.B. map('{ on:1, off:0 }').
===Pipeline minusBlue===
* filter: Durchlassen/Nicht durchlassen per Liste, z.B. filter('on,off,auto').
(value===
* step: Stufenwert aus HOCON, z.B. step('{ 0..20:low, 21..50:mid, 51..:high }').
0) => input => Number(input) < value ? 'blue' : null;
* scale: Wertebereich skalieren, z.B. scale(0,100,0,1).
===Pipeline contains===
* ago: Zeitstempel → „vor …“.
value => input => String(input).indexOf(value) > -1 ? true : false;
* till: Zeitstempel → „bis …“.
===Pipeline not===
* timeFormat: Zeit formatieren, z.B. timeFormat('mm:ss','ms','lower').
() => input => input === true ? false : true;;
* minusBlue: Wenn Wert < Schwellwert → „blue“, z.B. minusBlue(0).
===Pipeline is===
* contains: Substring enthalten, z.B. contains('err').
value => input => String(input) === value ? true : false;
* not: Negation für booleans.
===Pipeline isNot===
* is: Gleichheit, z.B. is('on').
value => input => String(input) !== value ? true : false;
* isNot: Ungleichheit, z.B. isNot('off').
===Pipeline pad===
* pad: Links auffüllen, z.B. pad(3,'0') → „007“.
(cnt, char) => input => String(input).padStart(cnt, char);
* append: Anhängen, z.B. append(' °C').
===Pipeline append===
* prepend: Voranstellen, z.B. prepend('#').
value => input => String(input) + value;
* sendCommand: FHEM-Befehl senden, z.B. sendCommand('set Lamp on').
===Pipeline prepend===
* getHTML: FHEM get <device> html abrufen, z.B. getHTML('MyDev').
value => input => value + String(input);
* capitalize: Erstes Zeichen groß.
===Pipeline sendCommand===
 
value => () => send(value);
'''Beispiel''':
===Pipeline getHTML===
<syntaxhighlight lang="html">
value => () => send('get ' + value + ' html');
[value]="device:STATE:value | map('{ on:1, off:0 }') | scale(0,1,0,100) | fix(0)"
</syntaxhighlight>
 
===1. toInt()===
 
====Beschreibung====
Wandelt den Wert in eine Ganzzahl um.
 
====Beispiel====
<syntaxhighlight lang="html">
<ftui-label [text]="TemperaturSensor:state | toInt()"></ftui-label>
</syntaxhighlight>
 
 
===2. toFloat()===
 
====Beschreibung ====
Wandelt den Wert in eine Fließkommazahl um.
 
====Beispiel====
<syntaxhighlight lang="html">
<ftui-label [text]="TemperaturSensor:state | toFloat()"></ftui-label>
</syntaxhighlight>
 
 
===3. round(digits)===
 
====Beschreibung====
Rundet den Wert auf die angegebene Anzahl von Nachkommastellen.
 
====Parameter====
`digits` - Anzahl der Nachkommastellen.
 
====Beispiel====
<syntaxhighlight lang="html">
<ftui-label [text]="TemperaturSensor:state | round(2)"></ftui-label>
</syntaxhighlight>
 
 
===4. multiply(factor)===
 
====Beschreibung====
Multipliziert den Wert mit einem bestimmten Faktor.
 
====Parameter ====
`factor` - Multiplikationsfaktor.
 
====Beispiel====
<syntaxhighlight lang="html">
<ftui-label [text]="TemperaturSensor:state | multiply(1.8)"></ftui-label>
</syntaxhighlight>
 
 
===5. divide(divisor)===
 
====Beschreibung====
Teilt den Wert durch den angegebenen Divisor.
 
====Parameter====
`divisor` - Teiler.
 
====Beispiel====
<syntaxhighlight lang="html">
<ftui-label [text]="TemperaturSensor:state | divide(10)"></ftui-label>
</syntaxhighlight>
 
 
===6. add(addend)===
 
====Beschreibung====
Addiert einen bestimmten Wert zum aktuellen Wert.
 
====Parameter====
`addend` - Der Wert, der addiert wird.
 
====Beispiel ====
<syntaxhighlight lang="html">
<ftui-label [text]="TemperaturSensor:state | add(10)"></ftui-label>
</syntaxhighlight>
 
 
===7. subtract(subtrahend)===
 
====Beschreibung====
Subtrahiert einen bestimmten Wert vom aktuellen Wert.
 
====Parameter====
`subtrahend` - Der Wert, der subtrahiert wird.
 
====Beispiel====
<syntaxhighlight lang="html">
<ftui-label [text]="TemperaturSensor:state | subtract(5)"></ftui-label>
</syntaxhighlight>
 
 
===8. replace(search, replacement)===
 
====Beschreibung====
Ersetzt alle Vorkommen eines bestimmten Substrings durch einen neuen String.
 
====Parameter====
`search` - Der zu ersetzende String; `replacement` - Der neue String.
 
====Beispiel====
<syntaxhighlight lang="html">
<ftui-label [text]="'#FF5733' | replace('#', '')"></ftui-label>
</syntaxhighlight>
 
 
===9. part(index)===
 
====Beschreibung====
Extrahiert ein bestimmtes Segment aus einem strukturierten Wert (z.B. durch Leerzeichen getrennte Werte).
 
====Parameter====
`index` - Der Index des zu extrahierenden Teils.
 
====Beispiel====
<syntaxhighlight lang="html">
<ftui-label [text]="SensorData:state | part(2)"></ftui-label>
</syntaxhighlight>
 
 
===10. uppercase()===
 
====Beschreibung====
Wandelt den String in Großbuchstaben um.
 
====Beispiel====
<syntaxhighlight lang="html">
<ftui-label [text]="Status:state | uppercase()"></ftui-label>
</syntaxhighlight>
 
 
===11. lowercase()===
 
====Beschreibung====
Wandelt den String in Kleinbuchstaben um.
 
====Beispiel====
<syntaxhighlight lang="html">
<ftui-label [text]="Status:state | lowercase()"></ftui-label>
</syntaxhighlight>
 
 
===12. format(formatString)===
 
====Beschreibung====
Formatiert den Wert entsprechend einem angegebenen Format-String.
 
====Parameter====
`formatString` - Das Format, z.B. `"%.2f"` für zwei Dezimalstellen.
 
====Beispiel====
<syntaxhighlight lang="html">
<ftui-label [text]="TemperaturSensor:state | format('%.1f')"></ftui-label>
</syntaxhighlight>
 
 
===13. timestamp()===
 
====Beschreibung====
Wandelt das Datum in einen Zeitstempel um.
 
====Beispiel====
<syntaxhighlight lang="html">
<ftui-label [text]="DateSensor:state | timestamp()"></ftui-label>
</syntaxhighlight>
 
 
===14. unit(unitString)===
 
====Beschreibung====
Fügt eine Einheit an den Wert an.
 
====Parameter====
`unitString` - Die Einheit, die angehängt wird.
 
====Beispiel====
<syntaxhighlight lang="html">
<ftui-label [text]="TemperaturSensor:state | unit('°C')"></ftui-label>
</syntaxhighlight>
 
 
===15. map(mappingString)===
 
====Beschreibung====
Mappt einen Wert auf eine vorgegebene Zeichenkette basierend auf einer Mapping-Tabelle.
 
====Parameter====
`mappingString` - Eine Mapping-Zeichenkette, die Ein- und Ausgangswerte verbindet, z.B. `"0=Aus,1=Ein"`.
 
====Beispiel====
<syntaxhighlight lang="html">
<ftui-label [text]="Status:state | map('0=Off,1=On')"></ftui-label>
</syntaxhighlight>
 
[[Kategorie:FHEM Tablet UI V3]]
[[Kategorie:FHEM Tablet UI V3]]

Aktuelle Version vom 4. Dezember 2025, 13:23 Uhr

Verwendung von FTUI3 Pipes

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

Jedes Binding folgt einem standardisierten Syntaxmuster:

<ftui-element [attribut]="DeviceName:reading | transformation"></ftui-element>

DeviceName:

Der Name des FHEM-Geräts

reading

Der spezifische Status oder Wert des Geräts, der ausgelesen werden soll

transformation

Optional können mehrere Transformationen (sog. "Pipes") verwendet werden, um den Wert zu formatieren oder anzupassen.

Einfaches Input-Pipe Beispiel

Dieses Beispiel zeigt die Verwendung eines Bindings, das eine direkte Umwandlung des Wertes mittels der `toInt()` Pipe ausfüh

<ftui-label [text]="TemperaturSensor:state | toInt()"></ftui-label>

Beispiel für Pipe-Kombinationen

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:

<ftui-label [text]="AgroWeather:state | part(4) | toInt() | multiply(2) | round(1)">

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

Beispiel für Ausgabe-Bindings

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.

<ftui-colorpicker (hex)="replace('#',) | HUEDevice6:rgb"></ftui-colorpicker>

Verfügbare Transformationsfunktionen (Pipes)

Übersicht

  • part: Teilwert aus zusammengesetztem String, z.B. part(':2').
  • toDate: String → Datum parsen mit Format, z.B. toDate('YYYY-MM-DD hh:mm:ss').
  • toBool: Zahl/String → boolean.
  • toInt: Zahl/String → Integer.
  • toNumber: Zahl/String → Float.
  • format: Datum formatieren, z.B. format('DD.MM.YYYY HH:mm').
  • humanized: Dauer menschenlesbar, z.B. „vor 2 Std.“.
  • round: Runden auf Schritt, z.B. round(0.5).
  • fix: Festkomma mit Stellen, z.B. fix(2) → „1.23“.
  • roundMoney: Währungsformatierung.
  • slice: String-Slice, z.B. slice(0,3).
  • encode: encodeURI(...).
  • add: Addieren, z.B. add(5).
  • multiply: Multiplizieren, z.B. multiply(10).
  • divide: Dividieren, z.B. divide(2).
  • replace: Ersetzen, z.B. replace('on','1') oder Regex.
  • map: Werte-Mapping über HOCON, z.B. map('{ on:1, off:0 }').
  • filter: Durchlassen/Nicht durchlassen per Liste, z.B. filter('on,off,auto').
  • step: Stufenwert aus HOCON, z.B. step('{ 0..20:low, 21..50:mid, 51..:high }').
  • scale: Wertebereich skalieren, z.B. scale(0,100,0,1).
  • ago: Zeitstempel → „vor …“.
  • till: Zeitstempel → „bis …“.
  • timeFormat: Zeit formatieren, z.B. timeFormat('mm:ss','ms','lower').
  • minusBlue: Wenn Wert < Schwellwert → „blue“, z.B. minusBlue(0).
  • contains: Substring enthalten, z.B. contains('err').
  • not: Negation für booleans.
  • is: Gleichheit, z.B. is('on').
  • isNot: Ungleichheit, z.B. isNot('off').
  • pad: Links auffüllen, z.B. pad(3,'0') → „007“.
  • append: Anhängen, z.B. append(' °C').
  • prepend: Voranstellen, z.B. prepend('#').
  • sendCommand: FHEM-Befehl senden, z.B. sendCommand('set Lamp on').
  • getHTML: FHEM get <device> html abrufen, z.B. getHTML('MyDev').
  • capitalize: Erstes Zeichen groß.

Beispiel: 

[value]="device:STATE:value | map('{ on:1, off:0 }') | scale(0,1,0,100) | fix(0)"

1. toInt()

Beschreibung

Wandelt den Wert in eine Ganzzahl um.

Beispiel

<ftui-label [text]="TemperaturSensor:state | toInt()"></ftui-label>


2. toFloat()

Beschreibung

Wandelt den Wert in eine Fließkommazahl um.

Beispiel

<ftui-label [text]="TemperaturSensor:state | toFloat()"></ftui-label>


3. round(digits)

Beschreibung

Rundet den Wert auf die angegebene Anzahl von Nachkommastellen.

Parameter

`digits` - Anzahl der Nachkommastellen.

Beispiel

<ftui-label [text]="TemperaturSensor:state | round(2)"></ftui-label>


4. multiply(factor)

Beschreibung

Multipliziert den Wert mit einem bestimmten Faktor.

Parameter

`factor` - Multiplikationsfaktor.

Beispiel

<ftui-label [text]="TemperaturSensor:state | multiply(1.8)"></ftui-label>


5. divide(divisor)

Beschreibung

Teilt den Wert durch den angegebenen Divisor.

Parameter

`divisor` - Teiler.

Beispiel

<ftui-label [text]="TemperaturSensor:state | divide(10)"></ftui-label>


6. add(addend)

Beschreibung

Addiert einen bestimmten Wert zum aktuellen Wert.

Parameter

`addend` - Der Wert, der addiert wird.

Beispiel

<ftui-label [text]="TemperaturSensor:state | add(10)"></ftui-label>


7. subtract(subtrahend)

Beschreibung

Subtrahiert einen bestimmten Wert vom aktuellen Wert.

Parameter

`subtrahend` - Der Wert, der subtrahiert wird.

Beispiel

<ftui-label [text]="TemperaturSensor:state | subtract(5)"></ftui-label>


8. replace(search, replacement)

Beschreibung

Ersetzt alle Vorkommen eines bestimmten Substrings durch einen neuen String.

Parameter

`search` - Der zu ersetzende String; `replacement` - Der neue String.

Beispiel

<ftui-label [text]="'#FF5733' | replace('#', '')"></ftui-label>


9. part(index)

Beschreibung

Extrahiert ein bestimmtes Segment aus einem strukturierten Wert (z.B. durch Leerzeichen getrennte Werte).

Parameter

`index` - Der Index des zu extrahierenden Teils.

Beispiel

<ftui-label [text]="SensorData:state | part(2)"></ftui-label>


10. uppercase()

Beschreibung

Wandelt den String in Großbuchstaben um.

Beispiel

<ftui-label [text]="Status:state | uppercase()"></ftui-label>


11. lowercase()

Beschreibung

Wandelt den String in Kleinbuchstaben um.

Beispiel

<ftui-label [text]="Status:state | lowercase()"></ftui-label>


12. format(formatString)

Beschreibung

Formatiert den Wert entsprechend einem angegebenen Format-String.

Parameter

`formatString` - Das Format, z.B. `"%.2f"` für zwei Dezimalstellen.

Beispiel

<ftui-label [text]="TemperaturSensor:state | format('%.1f')"></ftui-label>


13. timestamp()

Beschreibung

Wandelt das Datum in einen Zeitstempel um.

Beispiel

<ftui-label [text]="DateSensor:state | timestamp()"></ftui-label>


14. unit(unitString)

Beschreibung

Fügt eine Einheit an den Wert an.

Parameter

`unitString` - Die Einheit, die angehängt wird.

Beispiel

<ftui-label [text]="TemperaturSensor:state | unit('°C')"></ftui-label>


15. map(mappingString)

Beschreibung

Mappt einen Wert auf eine vorgegebene Zeichenkette basierend auf einer Mapping-Tabelle.

Parameter

`mappingString` - Eine Mapping-Zeichenkette, die Ein- und Ausgangswerte verbindet, z.B. `"0=Aus,1=Ein"`.

Beispiel

<ftui-label [text]="Status:state | map('0=Off,1=On')"></ftui-label>
Abgerufen von „http://wiki.fhem.de/w/index.php?title=FTUI3_Pipelines&oldid=40511“