FTUI3 Pipelines: Unterschied zwischen den Versionen
Keine Bearbeitungszusammenfassung |
(Erklärungen hinzugefügt) |
||
Zeile 1: | Zeile 1: | ||
=== | ==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". | |||
==== Beschreibung ==== | Jedes Binding folgt einem standardisierten Syntaxmuster:<syntaxhighlight lang="html"> | ||
<ftui-element [attribut]="DeviceName:reading | transformation"></ftui-element> | |||
</syntaxhighlight> | |||
====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<syntaxhighlight lang="html"> | |||
<ftui-label [text]="TemperaturSensor:state | toInt()"></ftui-label> | |||
</syntaxhighlight> | |||
===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:<syntaxhighlight lang="html"> | |||
<ftui-label [text]="AgroWeather:state | part(4) | toInt() | multiply(2) | round(1)"> | |||
</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)`). | |||
===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.<syntaxhighlight lang="html"> | |||
<ftui-colorpicker (hex)="replace('#',) | HUEDevice6:rgb"></ftui-colorpicker> | |||
</syntaxhighlight> | |||
==Verfügbare Transformationsfunktionen (Pipes)== | |||
===1. toInt()=== | |||
====Beschreibung==== | |||
Wandelt den Wert in eine Ganzzahl um. | Wandelt den Wert in eine Ganzzahl um. | ||
==== Beispiel ==== | ====Beispiel==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="TemperaturSensor:state | toInt()"></ftui-label> | <ftui-label [text]="TemperaturSensor:state | toInt()"></ftui-label> | ||
Zeile 10: | Zeile 41: | ||
===2. toFloat()=== | |||
====Beschreibung ==== | |||
==== Beschreibung ==== | |||
Wandelt den Wert in eine Fließkommazahl um. | Wandelt den Wert in eine Fließkommazahl um. | ||
==== Beispiel ==== | ====Beispiel==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="TemperaturSensor:state | toFloat()"></ftui-label> | <ftui-label [text]="TemperaturSensor:state | toFloat()"></ftui-label> | ||
Zeile 22: | Zeile 52: | ||
===3. round(digits)=== | |||
====Beschreibung==== | |||
==== Beschreibung ==== | |||
Rundet den Wert auf die angegebene Anzahl von Nachkommastellen. | Rundet den Wert auf die angegebene Anzahl von Nachkommastellen. | ||
==== Parameter ==== | ====Parameter==== | ||
`digits` - Anzahl der Nachkommastellen. | `digits` - Anzahl der Nachkommastellen. | ||
==== Beispiel ==== | ====Beispiel==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="TemperaturSensor:state | round(2)"></ftui-label> | <ftui-label [text]="TemperaturSensor:state | round(2)"></ftui-label> | ||
Zeile 37: | Zeile 66: | ||
===4. multiply(factor)=== | |||
====Beschreibung==== | |||
==== Beschreibung ==== | |||
Multipliziert den Wert mit einem bestimmten Faktor. | Multipliziert den Wert mit einem bestimmten Faktor. | ||
==== Parameter ==== | ====Parameter ==== | ||
`factor` - Multiplikationsfaktor. | `factor` - Multiplikationsfaktor. | ||
==== Beispiel ==== | ====Beispiel==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="TemperaturSensor:state | multiply(1.8)"></ftui-label> | <ftui-label [text]="TemperaturSensor:state | multiply(1.8)"></ftui-label> | ||
Zeile 52: | Zeile 80: | ||
===5. divide(divisor)=== | |||
====Beschreibung==== | |||
==== Beschreibung ==== | |||
Teilt den Wert durch den angegebenen Divisor. | Teilt den Wert durch den angegebenen Divisor. | ||
==== Parameter ==== | ====Parameter==== | ||
`divisor` - Teiler. | `divisor` - Teiler. | ||
==== Beispiel ==== | ====Beispiel==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="TemperaturSensor:state | divide(10)"></ftui-label> | <ftui-label [text]="TemperaturSensor:state | divide(10)"></ftui-label> | ||
Zeile 67: | Zeile 94: | ||
===6. add(addend)=== | |||
====Beschreibung==== | |||
==== Beschreibung ==== | |||
Addiert einen bestimmten Wert zum aktuellen Wert. | Addiert einen bestimmten Wert zum aktuellen Wert. | ||
==== Parameter ==== | ====Parameter==== | ||
`addend` - Der Wert, der addiert wird. | `addend` - Der Wert, der addiert wird. | ||
==== Beispiel ==== | ====Beispiel ==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="TemperaturSensor:state | add(10)"></ftui-label> | <ftui-label [text]="TemperaturSensor:state | add(10)"></ftui-label> | ||
Zeile 82: | Zeile 108: | ||
===7. subtract(subtrahend)=== | |||
====Beschreibung==== | |||
==== Beschreibung ==== | |||
Subtrahiert einen bestimmten Wert vom aktuellen Wert. | Subtrahiert einen bestimmten Wert vom aktuellen Wert. | ||
==== Parameter ==== | ====Parameter==== | ||
`subtrahend` - Der Wert, der subtrahiert wird. | `subtrahend` - Der Wert, der subtrahiert wird. | ||
==== Beispiel ==== | ====Beispiel==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="TemperaturSensor:state | subtract(5)"></ftui-label> | <ftui-label [text]="TemperaturSensor:state | subtract(5)"></ftui-label> | ||
Zeile 97: | Zeile 122: | ||
===8. replace(search, replacement)=== | |||
====Beschreibung==== | |||
==== Beschreibung ==== | |||
Ersetzt alle Vorkommen eines bestimmten Substrings durch einen neuen String. | Ersetzt alle Vorkommen eines bestimmten Substrings durch einen neuen String. | ||
==== Parameter ==== | ====Parameter==== | ||
`search` - Der zu ersetzende String; `replacement` - Der neue String. | `search` - Der zu ersetzende String; `replacement` - Der neue String. | ||
==== Beispiel ==== | ====Beispiel==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="'#FF5733' | replace('#', '')"></ftui-label> | <ftui-label [text]="'#FF5733' | replace('#', '')"></ftui-label> | ||
Zeile 112: | Zeile 136: | ||
===9. part(index)=== | |||
====Beschreibung==== | |||
==== Beschreibung ==== | |||
Extrahiert ein bestimmtes Segment aus einem strukturierten Wert (z.B. durch Leerzeichen getrennte Werte). | Extrahiert ein bestimmtes Segment aus einem strukturierten Wert (z.B. durch Leerzeichen getrennte Werte). | ||
==== Parameter ==== | ====Parameter==== | ||
`index` - Der Index des zu extrahierenden Teils. | `index` - Der Index des zu extrahierenden Teils. | ||
==== Beispiel ==== | ====Beispiel==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="SensorData:state | part(2)"></ftui-label> | <ftui-label [text]="SensorData:state | part(2)"></ftui-label> | ||
Zeile 127: | Zeile 150: | ||
===10. uppercase()=== | |||
====Beschreibung==== | |||
==== Beschreibung ==== | |||
Wandelt den String in Großbuchstaben um. | Wandelt den String in Großbuchstaben um. | ||
==== Beispiel ==== | ====Beispiel==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="Status:state | uppercase()"></ftui-label> | <ftui-label [text]="Status:state | uppercase()"></ftui-label> | ||
Zeile 139: | Zeile 161: | ||
===11. lowercase()=== | |||
====Beschreibung==== | |||
==== Beschreibung ==== | |||
Wandelt den String in Kleinbuchstaben um. | Wandelt den String in Kleinbuchstaben um. | ||
==== Beispiel ==== | ====Beispiel==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="Status:state | lowercase()"></ftui-label> | <ftui-label [text]="Status:state | lowercase()"></ftui-label> | ||
Zeile 151: | Zeile 172: | ||
===12. format(formatString)=== | |||
====Beschreibung==== | |||
==== Beschreibung ==== | |||
Formatiert den Wert entsprechend einem angegebenen Format-String. | Formatiert den Wert entsprechend einem angegebenen Format-String. | ||
==== Parameter ==== | ====Parameter==== | ||
`formatString` - Das Format, z.B. `"%.2f"` für zwei Dezimalstellen. | `formatString` - Das Format, z.B. `"%.2f"` für zwei Dezimalstellen. | ||
==== Beispiel ==== | ====Beispiel==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="TemperaturSensor:state | format('%.1f')"></ftui-label> | <ftui-label [text]="TemperaturSensor:state | format('%.1f')"></ftui-label> | ||
Zeile 166: | Zeile 186: | ||
===13. timestamp()=== | |||
====Beschreibung==== | |||
==== Beschreibung ==== | |||
Wandelt das Datum in einen Zeitstempel um. | Wandelt das Datum in einen Zeitstempel um. | ||
==== Beispiel ==== | ====Beispiel==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="DateSensor:state | timestamp()"></ftui-label> | <ftui-label [text]="DateSensor:state | timestamp()"></ftui-label> | ||
Zeile 178: | Zeile 197: | ||
===14. unit(unitString)=== | |||
====Beschreibung==== | |||
==== Beschreibung ==== | |||
Fügt eine Einheit an den Wert an. | Fügt eine Einheit an den Wert an. | ||
==== Parameter ==== | ====Parameter==== | ||
`unitString` - Die Einheit, die angehängt wird. | `unitString` - Die Einheit, die angehängt wird. | ||
==== Beispiel ==== | ====Beispiel==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="TemperaturSensor:state | unit('°C')"></ftui-label> | <ftui-label [text]="TemperaturSensor:state | unit('°C')"></ftui-label> | ||
Zeile 193: | Zeile 211: | ||
===15. map(mappingString)=== | |||
====Beschreibung==== | |||
==== Beschreibung ==== | |||
Mappt einen Wert auf eine vorgegebene Zeichenkette basierend auf einer Mapping-Tabelle. | Mappt einen Wert auf eine vorgegebene Zeichenkette basierend auf einer Mapping-Tabelle. | ||
==== Parameter ==== | ====Parameter==== | ||
`mappingString` - Eine Mapping-Zeichenkette, die Ein- und Ausgangswerte verbindet, z.B. `"0=Aus,1=Ein"`. | `mappingString` - Eine Mapping-Zeichenkette, die Ein- und Ausgangswerte verbindet, z.B. `"0=Aus,1=Ein"`. | ||
==== Beispiel ==== | ====Beispiel==== | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<ftui-label [text]="Status:state | map('0=Off,1=On')"></ftui-label> | <ftui-label [text]="Status:state | map('0=Off,1=On')"></ftui-label> |
Aktuelle Version vom 29. Oktober 2024, 10:59 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)
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>