FTUI3 Widget Bar

Auf dieser Seite wird erläutert, wie man in FTUI3 die grafische Anzeige eines Reading eines FHEM-Devices in Form eines horizontalen Balkens mit rundem Querschnitt erstellen kann.

• 
• 
• 

Diese Widgets wurden zuerst 2019 für das FHEM Tablet UI V2 erstellt, siehe FTUI Widget Bar.

Installation

Zunächst muss eine Grafikdatei im Format SVG (Scalable Vector Graphics) erstellt werden, hier mit dem Namen widget_bar.svg und dem Inhalt

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="0 0 300 20" width="200px" height="150px">
        <!-- ++++++++++++++++++++++++++++++++++++ Bar Widget ++++++++++++++++++++++++++++++++++++++ -->
        <g id="bar{{suffix}}">
            <g transform="translate(0,0)">
                <rect x="24" y="5" width="40" height="80" rx="20" ry="40" fill="url(grad0)"/>
                <rect x="252" y="5" width="40" height="80" rx="20" ry="40" fill="rgb(250,250,250)"/>
                <rect id="side{{suffix}}" x="24" y="5" width="40" height="80" rx="20" ry="40" fill="{{fillside}}"/>
                <rect id="top{{suffix}}" x="24" y="5" width="40" height="80" rx="20" ry="40" fill="{{filltop}}"/>
                <rect x="252" y="5" width="40" height="80" rx="20" ry="40" fill="none"
                    stroke="rgb(139, 137, 137)" stroke-width="2"/>
                <rect id="topline{{suffix}}" x="24" y="5" width="40" height="80" rx="20" ry="40" fill="none"
                    stroke="rgb(139, 137, 137)" stroke-width="2"/>
                <rect x="24" y="5" width="268" height="80" rx="20" ry="40" fill="none"
                    stroke="rgb(139, 137, 137)" stroke-width="2"/>
                <text id="label{{suffix}}" x="28" y="52" fill="rgb(75, 75, 75)"
                    style="font-family:Helvetica;font-size:24px;font-weight:bold;"/>
            </g>
        </g>
</svg>

Darin sind die Parameter suffix, fillside und filltop enthalten. Diese Parameter werden gesetzt, indem die SVG-Datei an beliebiger Stelle und beliebig oft in eine FTUI3-Seite eingebunden wird, z.B. mit

<ftui-content suffix="<SUFFIX>" file="widget_bar.svg" fillside="<FARBE1>" filltop="<FARBE2>"> 
  </ftui-content>

• Der String SUFFIX wird durch FTUI3 in die aufgerufene Datei eingesetzt. Wichtig: Für jeden anzuzeigenden Balken muss es einen eigenen (und eindeutigen) suffix geben, da dieser vwerdent wird, um die Identifier der SVG-Elemente zu setzen.
• FARBE1 und FARBE2 sind SVG-Farbspezifikationen, z.B. können diese sich auf vordefinierte Gradienten beziehen.

Desweiteren muss im Header der FTUIe-Seite etwas JavaScript-Code eingebunden werden.

<script>
const ftui_updatebar = (max,unit,suffix) => input => updatebar(input,max,unit,suffix);
    ...
function updatebar(val,max,unit,suffix) {
    if (! val) return 'updatebar has empty value argument'; 
    if (! max || max == 0) return 'updatebar has missing or zero scale factor'; 
    var val1 = Math.floor(val / max * 228 + 24);
    var style;
    var textpos;
    if (val1 > 148) {
        textpos = 28;
        style = "text-anchor:start;font-family:Helvetica;font-size:30px;font-weight:bold";
    } else {
        textpos = 252;
        style = "text-anchor:end;font-family:Helvetica;font-size:30px;font-weight:bold";
    }
    document.getElementById("side"+suffix).setAttribute("width", val1 + 16);
    document.getElementById("top"+suffix).setAttribute("x", val1);
    document.getElementById("topline"+suffix).setAttribute("x", val1);
    document.getElementById("label"+suffix).textContent = val + " " + unit;
    document.getElementById("label"+suffix).setAttribute("x", textpos);
    document.getElementById("label"+suffix).setAttribute("style", style);
} 

Schließlich muss noch an beliebiger Stelle auf der FTUI3-Seite dafür gesorgt werden, dass das Diagramm auch mit Werten aus FHEM befüllt wird. Das geschieht am Einfachsten durch ein <ftui-label>-Element

 <ftui-label [text]="DEVICE:READING | ftui_updatebar(<MAXIMALWERT>,'<EINHEIT>','<SUFFIX>')" class="hidden">
        </ftui-label>

Anwendungsbeispiel

Auf einer FTUI-Seite werden Anzeigen für den Gas- und Wasserverbrauch benötigt. Die Daten stehen in verschiedenen Readings des FHEM-Device gaswaterProfileC

 <!--Gas -->
      <div style="position:absolute;left:230px;top:0px;color:blue">
        <ftui-label [text]="gaswaterProfileC:GV.P | fix(1)" size="35px"
          style="font-family:Helvetica;font-weight:bold;">
          <span slot="unit" class="size--2">m³/h</span>
        </ftui-label>
        <ftui-label [text]="gaswaterProfileC:GV.E | ftui_updatebar(20,'m³','g')" class="hidden">
        </ftui-label></div>
      <div style="position:absolute;left:200px;top:-30px;width:200px;height:150px">
        <ftui-content suffix="g" file="widget_bar.svg" fillside="url(#grad1p)" filltop="url(#grad2p)"> 
        </ftui-content>
      </div>
      <div style="position:absolute;left:230px;top:95px">
        <ftui-label text="Gas" size="14px" style="font-family:Helvetica;font-weight:bold;"></ftui-label>
      </div>
      <!--Water -->
      <div style="position:absolute;left:230px;top:130px;color:blue">
        <ftui-label [text]="gaswaterProfileC:WV.F | fix(1)" size="35px"
          style="font-family:Helvetica;font-weight:bold;">
          <span slot="unit" class="size--2">l/h</span>
        </ftui-label>
        <ftui-label [text]="gaswaterProfileC:WV.V | ftui_updatebar(500,'l','w')" class="hidden"></ftui-label>
      </div>
      <div style="position:absolute;left:200px;top:100px;width:200px;height:150px">
        <ftui-content suffix="w" file="widget_bar.svg" fillside="url(#grad1b)" filltop="url(#grad2b)"> 
        </ftui-content>
      </div>     
      <div style="position:absolute;left:230px;top:225px">
        <ftui-label text="Wasser" size="14px" style="font-family:Helvetica;font-weight:bold;"></ftui-label>
      </div>