FTUI3 Widget StackedBar - Versionsgeschichte

Pahenning: /* Anwendungsbeispiel */

2025-06-05T15:49:27Z

Anwendungsbeispiel

← Nächstältere Version		Version vom 5. Juni 2025, 17:49 Uhr
Zeile 130:		Zeile 130:
	Die Summe dieser Werte beträgt 20.5 kWh		Die Summe dieser Werte beträgt 20.5 kWh
	0.0 18.5 2.7		0.0 18.5 2.7
	Die Differenz zum Stromverbrauch ist ein systembedingter ~~Rundungsfehler~~.		Die Differenz zum Stromverbrauch ist ein systembedingter Fehler durch den Eigenverbrauch des Wechselrichters.
	<pre>		<pre>
	<!-- battery,wallbox,house,upload -->		<!-- battery,wallbox,house,upload -->

Pahenning: /* Installation */

2025-06-05T15:48:10Z

Installation

← Nächstältere Version		Version vom 5. Juni 2025, 17:48 Uhr
Zeile 30:		Zeile 30:
	<rect class="outerline" x="24" y="5" width="268" height="80" rx="20" ry="40" fill="none"		<rect class="outerline" x="24" y="5" width="268" height="80" rx="20" ry="40" fill="none"
	stroke="rgb(139, 137, 137)" stroke-width="2"/>		stroke="rgb(139, 137, 137)" stroke-width="2"/>
	<text id="labels{{suffix}}" x="28" y="0" fill="rgb(75, 75, 75)"		<text id="labels{{suffix}}" x="40" y="5" fill="rgb(75, 75, 75)"
	style="font-family:Helvetica;font-size:~~35px~~;font-weight:bold;"/>		style="font-family:Helvetica;font-size:18px;font-weight:bold;"/>
	<text id="label0{{suffix}}" x="28" y="40" fill="rgb(75, 75, 75)"		<text id="label0{{suffix}}" x="28" y="40" fill="rgb(75, 75, 75)"
	style="font-family:Helvetica;font-size:14px;font-weight:bold;"/>		style="font-family:Helvetica;font-size:14px;font-weight:bold;"/>

Pahenning: /* Anwendungsbeispiel */

2025-06-05T15:47:01Z

Anwendungsbeispiel

← Nächstältere Version		Version vom 5. Juni 2025, 17:47 Uhr
Zeile 122:		Zeile 122:
	* Upload = Up.		* Upload = Up.
	Die Daten stehen im Reading ''energy_summary_out'' des FHEM-Device ''powerflowProfileC''		Die Daten stehen im Reading ''energy_summary_out'' des FHEM-Device ''powerflowProfileC''
	7.8 4.9 7.0 0.9		7.9 4.7 7.0 0.9
	Der Strombezug teilt sich auf in		Der Strombezug teilt sich auf in
	* Entladen des Speichers = Sp		* Entladen des Speichers = Sp
Zeile 128:		Zeile 128:
	* Bezug aus dem Grid = Gr		* Bezug aus dem Grid = Gr
	Die Daten stehen im Reading ''energy_summary_in'' des FHEM-Device ''powerflowProfileC''		Die Daten stehen im Reading ''energy_summary_in'' des FHEM-Device ''powerflowProfileC''
	Die Summe dieser Werte beträgt 14.5 kWh		Die Summe dieser Werte beträgt 20.5 kWh
	0.0 18.6 2.7		0.0 18.5 2.7
	Die Differenz zum Stromverbrauch ist ein systembedingter Rundungsfehler.		Die Differenz zum Stromverbrauch ist ein systembedingter Rundungsfehler.
	<pre>		<pre>

Pahenning: /* Anwendungsbeispiel */

2025-06-05T15:45:51Z

Anwendungsbeispiel

← Nächstältere Version		Version vom 5. Juni 2025, 17:45 Uhr
Zeile 122:		Zeile 122:
	* Upload = Up.		* Upload = Up.
	Die Daten stehen im Reading ''energy_summary_out'' des FHEM-Device ''powerflowProfileC''		Die Daten stehen im Reading ''energy_summary_out'' des FHEM-Device ''powerflowProfileC''
	~~An diesem Tag sind ausnahmsweise zwei der Werte Null, ferner ist der Wert für die hochgeladene Energie negativ~~.		7.8 4.9 7.0 0.9
	0.~~0 0~~.0 ~~13.6 -~~0.1
	Der Strombezug teilt sich auf in		Der Strombezug teilt sich auf in
	* Entladen des Speichers = Sp		* Entladen des Speichers = Sp
Zeile 130:		Zeile 129:
	Die Daten stehen im Reading ''energy_summary_in'' des FHEM-Device ''powerflowProfileC''		Die Daten stehen im Reading ''energy_summary_in'' des FHEM-Device ''powerflowProfileC''
	Die Summe dieser Werte beträgt 14.5 kWh		Die Summe dieser Werte beträgt 14.5 kWh
	1.~~4 8~~.2 4.9		0.0 18.6 2.7
	Die Differenz zum Stromverbrauch ist ein systembedingter ~~Rundngsfehler~~.		Die Differenz zum Stromverbrauch ist ein systembedingter Rundungsfehler.
	<pre>		<pre>
	<!-- battery,wallbox,house,upload -->		<!-- battery,wallbox,house,upload -->

Pahenning am 4. Juni 2025 um 17:18 Uhr

2025-06-04T17:18:22Z

@@ Zeile 158: / Zeile 158: @@
          <ftui-label text="Stromquellen" size="14px" style="font-family:Helvetica;font-weight:bold;"></ftui-label>
        </div>
 </pre>
 [[Kategorie:FHEM Tablet UI V3]]

Pahenning am 4. Juni 2025 um 17:15 Uhr

2025-06-04T17:15:42Z

← Nächstältere Version		Version vom 4. Juni 2025, 19:15 Uhr
Zeile 1:		Zeile 1:
	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. Dabei muss dieses Reading aus einer durch Leerzeichen getrennten Liste von Werten bestehen. Der Balken wird dann komplett ausgefüllt, und zwar so, dass jedem der Werte eine Breite zugewiesen wird, die seinem prozentualen Anteil an der Summe der Werte entspricht.		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. Dabei muss dieses Reading aus einer durch Leerzeichen getrennten Liste von Werten bestehen. Der Balken wird dann komplett ausgefüllt, und zwar so, dass jedem der Werte eine Breite zugewiesen wird, die seinem prozentualen Anteil an der Summe der Werte entspricht.
	[[File:StackedBar1.png\|~~1000px~~]]
			[[File:StackedBar1.png\|800px]]

	Diese Widgets wurden zuerst für [[FHEM Tablet UI V2]] erstellt, siehe [[FTUI Widget StackedBar]].		Diese Widgets wurden zuerst für [[FHEM Tablet UI V2]] erstellt, siehe [[FTUI Widget StackedBar]].

Pahenning: /* Anwendungsbeispiel */

2025-06-04T17:06:22Z

Anwendungsbeispiel

← Nächstältere Version		Version vom 4. Juni 2025, 19:06 Uhr
Zeile 113:		Zeile 113:

	==Anwendungsbeispiel==		==Anwendungsbeispiel==
	[[File:~~Gaswasser_2025~~.png\|thumb\|400px]]		[[File:Electricity_2025.png\|thumb\|400px]]
	Auf einer FTUI-Seite werden Anzeigen für den ~~Gas-~~ und ~~Wasserverbrauch~~ benötigt. Die Daten stehen in ~~verschiedenen Readings~~ des FHEM-Device ''~~gaswaterProfileC~~''		Auf einer FTUI-Seite werden Anzeigen für den Stromverbrauch und die Stromquellen benötigt. Der Stromverbrauch teilt sich auf in
			* Aufladen des Speichers = Sp
			* Wallbox = Wb
			* Direktverbrauch im Haus = Haus
			* Upload = Up.
			Die Daten stehen im Reading ''energy_summary_out'' des FHEM-Device ''powerflowProfileC''
			An diesem Tag sind ausnahmsweise zwei der Werte Null, ferner ist der Wert für die hochgeladene Energie negativ.
			0.0 0.0 13.6 -0.1
			Der Strombezug teilt sich auf in
			* Entladen des Speichers = Sp
			* Photovoltaik = PV2
			* Bezug aus dem Grid = Gr
			Die Daten stehen im Reading ''energy_summary_in'' des FHEM-Device ''powerflowProfileC''
			Die Summe dieser Werte beträgt 14.5 kWh
			1.4 8.2 4.9
			Die Differenz zum Stromverbrauch ist ein systembedingter Rundngsfehler.
	<pre>		<pre>
	<!--~~Gas~~ -->		<!-- battery,wallbox,house,upload -->
	<div style="position:absolute;left:~~230px~~;top:~~0px~~;~~color~~:~~blue~~">		<div style="position:absolute;left:0px;top:30px;width:200px;height:150px">
	<ftui-~~label [text]~~="~~gaswaterProfileC:GV~~.~~P \| fix(1)~~" ~~size~~="~~35px~~"		<ftui-content file="widget_stackedbar.svg" suffix="out" fillside0="url(#grad1t)" fillside1="url(#grad1p)" fillside2="url(#grad1f)" fillside3="url(#grad1o)" filltop="url(#grad2o)">
	~~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>		</ftui-content>
	</div>		</div>
	<div style="position:absolute;left:~~230px~~;top:95px">		<div style="position:absolute;left:30px;top:95px">
	<ftui-label text="~~Gas~~" size="14px" style="font-family:Helvetica;font-weight:bold;"></ftui-label>		<ftui-label text="Stromverbrauch" size="14px" style="font-family:Helvetica;font-weight:bold;"></ftui-label>
	</div>		</div>
	<!--~~Water~~ -->		<!-- total -->
	<div style="position:absolute;left:~~230px~~;top:130px;color:blue">		<div style="position:absolute;left:30px;top:130px;color:blue">
	<ftui-label [text]="~~gaswaterProfileC~~:~~WV.F~~ \| fix(1)" size="35px"		<ftui-label [text]="powerflowProfileC:energy_consumed \| fix(1)" size="35px" style="font-family:Helvetica;font-weight:bold;">
	style="font-family:Helvetica;font-weight:bold;">		<span slot="unit" class="size--2">kWh</span>
	<span slot="unit" class="size--2">l/h</~~span~~>		</ftui-label>
			<ftui-label [text]="powerflowProfileC:energy_summary_out \| ftui_updatestackedbar('Sp Wb Haus Up','','out')">
	</ftui-label>		</ftui-label>
	<ftui-label [text]="~~gaswaterProfileC~~:~~WV.V~~ \| ~~ftui_updatebar~~(~~500~~,'l','w')" ~~class~~="~~hidden~~"></ftui-~~label~~>		<ftui-label [text]="powerflowProfileC:energy_summary_in \| ftui_updatestackedbar('Sp PV2 Gr','','in')">
			</ftui-label></div>
			<!-- battery, PV2, grid -->
			<div style="position:absolute;left:0px;top:160px;width:200px;height:150px">
			<ftui-content file="widget_stackedbar.svg" suffix="in" fillside0="url(#grad1t)" fillside1="url(#grad1g)" fillside2="url(#grad1r)" fillside3="none" filltop="url(#grad2r)">
			</ftui-content>
	</div>		</div>
	<div style="position:absolute;left:~~200px;top:100px;width:200px;height:150px">~~		<div style="position:absolute;left:30px;top:225px">
	~~<ftui-content suffix="w" file="widget_bar.svg" fillside="url(#grad1b)" filltop="url(#grad2b)">~~		<ftui-label text="Stromquellen" size="14px" style="font-family:Helvetica;font-weight:bold;"></ftui-label>
	~~</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>		</div>
	</pre>		</pre>
	[[Kategorie:FHEM Tablet UI V3]]		[[Kategorie:FHEM Tablet UI V3]]

Pahenning: /* Installation */

2025-06-04T16:47:27Z

Installation

← Nächstältere Version		Version vom 4. Juni 2025, 18:47 Uhr
Zeile 107:		Zeile 107:
	</ftui-label>		</ftui-label>
	</pre>		</pre>
			*Das Reading <READING> sollte eine durch Leerzeichen separierte Liste von Zahlen enthalten (2,3, oder 4 Zahlen)
			*Der String <LISTE DER LABELS> sollte eine durch Leerzeichen separierte Liste aus derselben Anzahl von Bezeichnungen enthalten, die in das Diagramm geschrieben werden
			*Der String <EINHEIT> gibt eine Einheit an. Ist dieser Parameter nicht gleich einem leeren String, wird über dem Diagramm die Summe der übergebenen Zahlen zusammen mit der Einheit dargestellt. Ist er gleich einem leeren String, wird diese Summe nicht dargestellt.
			*Der String <SUFFIX> muss denselben Wert haben, wie bei dem eingebundenen Content-File

	==Anwendungsbeispiel==		==Anwendungsbeispiel==

Pahenning: /* Installation */

2025-06-04T16:41:12Z

Installation

← Nächstältere Version		Version vom 4. Juni 2025, 18:41 Uhr
Zeile 44:		Zeile 44:
	Darin sind die Parameter suffix, fillside0..3 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		Darin sind die Parameter suffix, fillside0..3 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
	<pre>		<pre>
	<ftui-content suffix="<SUFFIX>" file="~~widget_bar~~.svg" fillside0="<FARBE0>" fillside1="<FARBE1>" fillside2="<FARBE3>" fillside3="<FARBE3>" filltop="<FARBE4>">		<ftui-content suffix="<SUFFIX>" file="widget_stackedbar.svg" fillside0="<FARBE0>" fillside1="<FARBE1>" fillside2="<FARBE3>" fillside3="<FARBE3>" filltop="<FARBE4>">
	</ftui-content>		</ftui-content>
	</pre>		</pre>
Zeile 104:		Zeile 104:
	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 <code><ftui-label></code>-Element		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 <code><ftui-label></code>-Element
	<pre>		<pre>
	<ftui-label [text]="DEVICE:READING \| ~~ftui_updatebar~~(<~~MAXIMALWERT~~>,'<EINHEIT>','<SUFFIX>')" class="hidden">		<ftui-label [text]="DEVICE:READING \| ftui_updatestackedbar('<LISTE DER LABELS>','<EINHEIT>','<SUFFIX>')" class="hidden">
	</ftui-label>		</ftui-label>
	</pre>		</pre>

Pahenning: Die Seite wurde neu angelegt: „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. Dabei muss dieses Reading aus einer durch Leerzeichen getrennten Liste von Werten bestehen. Der Balken wird dann komplett ausgefüllt, und zwar so, dass jedem der Werte eine Breite zugewiesen wird, die seinem prozentualen Anteil an der Summe der Werte entspricht. File:StackedB…“

2025-06-04T16:06:54Z

Die Seite wurde neu angelegt: „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. Dabei muss dieses Reading aus einer durch Leerzeichen getrennten Liste von Werten bestehen. Der Balken wird dann komplett ausgefüllt, und zwar so, dass jedem der Werte eine Breite zugewiesen wird, die seinem prozentualen Anteil an der Summe der Werte entspricht. File:StackedB…“

Neue Seite

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. Dabei muss dieses Reading aus einer durch Leerzeichen getrennten Liste von Werten bestehen. Der Balken wird dann komplett ausgefüllt, und zwar so, dass jedem der Werte eine Breite zugewiesen wird, die seinem prozentualen Anteil an der Summe der Werte entspricht.
[[File:StackedBar1.png|1000px]]
Diese Widgets wurden zuerst für [[FHEM Tablet UI V2]] erstellt, siehe [[FTUI Widget StackedBar]].

==Installation==
Zunächst muss eine Grafikdatei im Format SVG (Scalable Vector Graphics) erstellt werden, hier mit dem Namen ''widget_stackedbar.svg'' und dem Inhalt
<pre>
<?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 200" width="200px" height="150px">

<g id="stackedbar{{suffix}}">
<g transform="translate(0,0)">
<rect class="bottomline" x="24" y="5" width="40" height="80" rx="20" ry="40" fill="none"
stroke="rgb(139, 137, 137)" stroke-width="2"/>
<rect id="side0{{suffix}}" class="side" x="24" y="5" width="40" height="80" rx="20"
ry="40" fill="{{fillside0}}"/>
<rect id="side1{{suffix}}" class="side" x="24" y="5" width="40" height="80" rx="20"
ry="40" fill="{{fillside1}}"/>
<rect id="side2{{suffix}}" class="side" x="24" y="5" width="40" height="80" rx="20"
ry="40" fill="{{fillside2}}"/>
<rect id="side3{{suffix}}" class="side" x="24" y="5" width="40" height="80" rx="20"
ry="40" fill="{{fillside3}}"/>
<rect class="top" x="252" y="5" width="40" height="80" rx="20" ry="40"
fill="{{filltop}}"/>
<rect class="topline" x="252" y="5" width="40" height="80" rx="20" ry="40" fill="none"
stroke="rgb(139,137,137" stroke-width="2"/>
<rect class="outerline" x="24" y="5" width="268" height="80" rx="20" ry="40" fill="none"
stroke="rgb(139, 137, 137)" stroke-width="2"/>
<text id="labels{{suffix}}" x="28" y="0" fill="rgb(75, 75, 75)"
style="font-family:Helvetica;font-size:35px;font-weight:bold;"/>
<text id="label0{{suffix}}" x="28" y="40" fill="rgb(75, 75, 75)"
style="font-family:Helvetica;font-size:14px;font-weight:bold;"/>
<text id="label1{{suffix}}" x="28" y="65" fill="rgb(75, 75, 75)"
style="font-family:Helvetica;font-size:14px;font-weight:bold;"/>
<text id="label2{{suffix}}" x="28" y="40" fill="rgb(75, 75, 75)"
style="font-family:Helvetica;font-size:14px;font-weight:bold;"/>
<text id="label3{{suffix}}" x="28" y="65" fill="rgb(75, 75, 75)"
style="font-family:Helvetica;font-size:14px;font-weight:bold;"/>
</g>
</g>
</svg>
</pre>
Darin sind die Parameter suffix, fillside0..3 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
<pre>
<ftui-content suffix="<SUFFIX>" file="widget_bar.svg" fillside0="<FARBE0>" fillside1="<FARBE1>" fillside2="<FARBE3>" fillside3="<FARBE3>" filltop="<FARBE4>">
</ftui-content>
</pre>
*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 verwendet wird, um die Identifier der SVG-Elemente zu setzen.
*''FARBE0'' ... ''FARBE4'' sind SVG-Farbspezifikationen, z.B. können diese sich auf vordefinierte Gradienten beziehen.

Desweiteren muss im Header der FTUI-Seite etwas JavaScript-Code eingebunden werden.
<pre>
<script>
const ftui_updatestackedbar = (captions,unit,suffix) => input => updatestackedbar(input,captions,unit,suffix);
...
function updatestackedbar(values, captions, unit, suffix) {;
if (! values) return 'updatestackedbar has empty values argument';
if (! captions) return 'updatestackedbar has empty captions argument';

var aval = values.split(' ');
var acap = captions.split(' ');
var num = aval.length;
var sum = 0.0;
for (var i = 0; i < num; i++) {
sum+= Number(aval[i]);
}
if (unit != '') document.getElementById("labels" + suffix).textContent = roundTo(sum,1) + ' ' + unit;
var j = 0;
var valx;
var valw;
for (var i = 0; i < num; i++) {
if (i == 0) {
valx = 24;
valw = Math.floor(228 * Number(aval[i]) / sum + 40);
} else {
valx = valx + (valw - 40);
valw = Math.floor(228 * Number(aval[i]) / sum + 40)
}
var textpos = valx + 10;
var side = document.getElementById("side" + i + suffix);
if( ! side ) {
alert( "side" + i + suffix + "not found");
}else{
side.setAttribute("x", valx);
side.setAttribute("width", valw);
}
var label = document.getElementById("label" + i + suffix);
if( ! label ) {
alert( "label" + i + suffix + "not found");
}else{
if (Number(aval[i]) > 0) {
label.textContent = acap[i] + ' ' + roundTo(Number(aval[i]),1);
label.setAttribute("x", textpos);
label.setAttribute("y", 40 + 15 * j);
j = 1 - j;
} else {
label.textContent = '';
}
}
}
}
</pre>
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 <code><ftui-label></code>-Element
<pre>
<ftui-label [text]="DEVICE:READING | ftui_updatebar(<MAXIMALWERT>,'<EINHEIT>','<SUFFIX>')" class="hidden">
</ftui-label>
</pre>

==Anwendungsbeispiel==
[[File:Gaswasser_2025.png|thumb|400px]]
Auf einer FTUI-Seite werden Anzeigen für den Gas- und Wasserverbrauch benötigt. Die Daten stehen in verschiedenen Readings des FHEM-Device ''gaswaterProfileC''

<pre>

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

<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>
</pre>
[[Kategorie:FHEM Tablet UI V3]]