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:

<script>
  const ftui_function1  = ()    => input => function1(input);
  const ftui_function2  = value => input => function2(input,value);
  function function1(param1){
    ...
  }
  function function2(param1,param2){
    ...
  }
</script>

Dadurch werden die beidne zusätzlichen Funktionen ftui_function1, ftui_function2 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(WERT)"></ftui-label>

wird der Wert des Readings READING aus dem FHEM-Device DEVICE als erster Parameter und zusätzlich der explizit angegebene Wert WERT als zweiter Parameter an die JavaScript-Funktion function übergeben.

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 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, 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>