FTUI3 Lokale Variablen

Definition

Lokale Variablen sind Variablen, die nicht in FHEM abgelegt werden, sondern nur in der JavaScript-Umgebung des Clients existieren, z.B.

local:test

Initialisierung

Um eine lokale Variable mit dem Namen local:test beim Laden einer Seite auf den Wert "Anfangswert" zu setzen, muss in den Seitenheader oder in einer externen Datei etwas JavaScript-Code aufgenommen werden:

  <script type="module">
   import * as ftuiHelper from './modules/ftui/ftui.helper.js';
   document.addEventListener('ftuiComponentsAdded', () => {
     const now = "2025-01-01 12:00:00";
     const value = 'Anfangswert';
     ftuiApp.fhemService.updateReadingItem('local-test', {
       id: 'local-test',
       invalid: false,
       value,
       time: now,
       update: now,
     });
   });
   </script>

Intern in FTUI3 wird das so gespeichert, als ob es ein FHEM-Reading wäre. Dabei ist der Zeitstempel vollkommen egal, es kann sich um einen beliebigen Zeitpunkt in der Vergangenheit handeln.

Falls man stattdessen den aktuellen Zeitpunkt des Seitenaufrufs als Zeitstempel haben möchte, ist statt des fiktiven Datums einzusetzen

 const now = ftuiHelper.dateFormat(new Date(), 'YYYY-MM-DD hh:mm:ss');

Verwendung in FTUI3-Elementen

In FTUI3-Elementen kann durch den Namen local:test auf diese Variable zugegriffen werden. Beispielsweise zeigt

 <ftui-label [text]="local:test"></ftui-label>

den Wert in einem Label-Element an. Selbstverständlich kann man alle Pipeline-Funktionen auf diesen Datenwert anwenden.

Setzen durch Buttons

Ein FTUI3-Button soll die lokale Variable local:test auf den Wert "Hallo" setzen:

 <ftui-button (value)="map('on:Hallo,off:Hallo') | local:test"></ftui-button>

Mit diesem Beispiel wird der Wert immer auf "Hallo" gesetzt, unabhängig vom Zustand des Buttons. Wenn man das nicht möchte, können on und off auf jeweils andere Strings gemappt werden.

Im Falle nummerischer Werte können in die Pipeline natürlich auch die Funktionen add(), divide() und toInt() eingesetzt werden. Die Beispieldatei button.html enthält Code, mit dem z.B. der Zahlenwert einer Lokalen Variablen herauf- oder heruntergesetzt wird.