Quelltext der Seite 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 (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 <code>scale(-1,1)</code>, 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>



[[Kategorie:FHEM Tablet UI V3]]