FTUI3 Inhalte in JavaScript verwenden

Ziel

Ziel ist, eine beliebige JavaScript-Funktion, z.B.

 function1(param1)
 function2(param1, param2)

zu rufen, wenn sich ein Datenwert in FTUI3 ändert.

Vorbereitung

Dazu muss in den Seitenheader oder in einer externen Datei zusätzlich zu den Funktionsdefinitionen etwas JavaScript-Code aufgenommen werden. Je nach Anzahl der gewünschten Parameter dieder Funktionen

<script>
  const ftui_function1  = ()    => input => function1(input);
  const ftui_function2  = value2 => input => function2(input,value2);
  ...
  const ftui_functionn  = (value2,...valuen)--- => input => function2(input,value2,...valuen);
  ...
  function function1(param1){
    ...
  }
  function function2(param1,param2){
    ...
  } 
  ...
  function functionn(param1,param2,...paramn){
    ...
  }
</script>

Dadurch werden die zusätzlichen Funktionen ftui_function1, ftui_function2 ... ftui_functionn zu Pipeline-Funktionen in FTUI3.

Verwendung in FTUI3-Elementen

In FTUI3-Elementen kann durch den Namen der Pipeline-Funktionen der JavaScript-Code ausgeführt werden. Beispielsweise wird durch

 <ftui-label [text]="DEVICE:READING | ftui_function1()"></ftui-label>

der Wert des Readings READING aus dem FHEM-Device DEVICE als Parameter an die JavaScript-Funktion function1 übergeben. Durch

 <ftui-label [text]="DEVICE:READING | ftui_function2(WERT2)"></ftui-label>

wird der Wert des Readings READING aus dem FHEM-Device DEVICE als erster Parameter und zusätzlich der explizit angegebene Wert WERT2 als zweiter Parameter an die JavaScript-Funktion function übergeben. Ähnlich für mehrparametrige Funktionen

 <ftui-label [text]="DEVICE:READING | ftui_functionn(WERT2,WERT3...WERTN)"></ftui-label>

Anwendungsbeispiel

Die Richtung eines mit SVG dargestellten Pfeils (ID ist pf_sp), sowie die Flussrichtung des zur Füllung dieses Pfeils verwendeten animierten Gradienten soll sich in Abhängigkeit des Vorzeichens eines FHEM-Readings ändern. Der zugehörige JavaScript-Code (im Seitenheader oder einer Datei) ist

<script>
  const ftui_sp_power     = () => input => sp_power(input);
  function sp_power(power) {
   var a = document.getElementById('pf_sp');
   var s, t;
   if (power > 0.01) {
       s = "url(#r_h_l)";
       t = "";
   } else {
       if (power < -0.01) {
           s = "url(#g_h_r)";
           t = "translate(135,0) scale(-1,1)";
       } else {
           s = "url(#b_t)";
           t = "";
       }
   }
   a.style.fill = s;
   a.setAttribute("transform", t);
   return power;
 }
</script>

Die notwendige Verschiebung bei der Richtungsumkehr (durch scale(-1,1), 135 Pixel horizontal) muss durch Versuch und Irrtum festgestellt werden. Wichtig ist ferner, dass diese Funktion einen Rückgabewert liefert, mit welchem das FTUI3-Element auch etwas anfangen kann. Im Beispiel wird der Parameter power einfach durchgereicht.

In der Funktion sind r_h_l, g_h_r und b_t die lokalen IDs der Füllgradienten, z.B.

 <svg xmlns="http://www.w3.org/2000/svg">
       <defs>
           <pattern id="g_h_r" patternUnits="userSpaceOnUse" width="15" height="15">
               <line x1="0" y1="0" x2="0" y2="15" stroke="#0FD673" stroke-width="15"/>
                <animatetransform attributeName="patternTransform" type="translate" by="15 0"
                    dur="1s" repeatCount="indefinite"/>
          </pattern>
               ...
      </defs>
</svg>

Der Pfeil selbst wird ebenfalls mit SVG definiert,

     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 405 150" width="400px"
          height="150px">
           <path id="pf_sp" transform="" style="fill:url(#b_s);stroke:#0000f8;stroke-width:1"
               d="M 0,15 h 120 v -10 l 15 15 l -15 15 v -10 h -120 Z"/>
       </svg>

Die Umschaltung selbst wird in ein Label integriert, das den betreffenden Datenwert aus dem Reading auch gleich anzeigt:

  <ftui-label class="size-1" [text]="PowerFlow:power_battery | fix(2) | ftui_sp_power()" unit=" kW">
  </ftui-label>