FTUI3 Widget Bar - Versionsgeschichte

Pahenning am 4. Juni 2025 um 17:18 Uhr

2025-06-04T17:18:43Z

@@ Zeile 110: / Zeile 110: @@
          <ftui-label text="Wasser" 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:14 Uhr

2025-06-04T17:14:44Z

← Nächstältere Version		Version vom 4. Juni 2025, 19:14 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.		Auf dieser Seite wird erläutert, wie man in FTUI3 die grafische Anzeige eines Readings eines FHEM-Devices in Form eines horizontalen Balkens mit rundem Querschnitt erstellen kann.
	<gallery>		<gallery>
	File:Widget_bar_1.png		File:Widget_bar_1.png
Zeile 37:		Zeile 37:
	</ftui-content>		</ftui-content>
	</pre>		</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 ~~vwerdent~~ wird, um die Identifier der SVG-Elemente zu setzen.		*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.
	*''FARBE1'' und ''FARBE2'' sind SVG-Farbspezifikationen, z.B. können diese sich auf vordefinierte Gradienten beziehen.		*''FARBE1'' und ''FARBE2'' sind SVG-Farbspezifikationen, z.B. können diese sich auf vordefinierte Gradienten beziehen.

Zeile 71:		Zeile 71:
	</ftui-label>		</ftui-label>
	</pre>		</pre>
			*Das Reading <READING> enthält eine Zahl
			*Der Maximalwert <MAX> ist der Wert, bei welchem der Balken komplett gefüllt erscheint.
			*Der String <EINHEIT> gibt eine Einheit an.
			*Der String <SUFFIX> muss denselben Wert haben, wie bei dem eingebundenen Content-File
	==Anwendungsbeispiel==		==Anwendungsbeispiel==
	[[File:Gaswasser_2025.png\|thumb\|400px]]		[[File:Gaswasser_2025.png\|thumb\|400px]]

Pahenning am 4. Juni 2025 um 15:59 Uhr

2025-06-04T15:59:40Z

← Nächstältere Version		Version vom 4. Juni 2025, 17:59 Uhr
Zeile 108:		Zeile 108:
	</div>		</div>
	</pre>		</pre>
			[[Kategorie:FHEM Tablet UI V3]]

Pahenning: /* Anwendungsbeispiel */

2025-06-04T15:58:31Z

Anwendungsbeispiel

← Nächstältere Version		Version vom 4. Juni 2025, 17:58 Uhr
Zeile 73:		Zeile 73:

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

Pahenning: /* Installation */

2025-06-04T15:58:14Z

Installation

← Nächstältere Version		Version vom 4. Juni 2025, 17:58 Uhr
Zeile 40:		Zeile 40:
	*''FARBE1'' und ''FARBE2'' sind SVG-Farbspezifikationen, z.B. können diese sich auf vordefinierte Gradienten beziehen.		*''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.		Desweiteren muss im Header der FTUI-Seite etwas JavaScript-Code eingebunden werden.
	<pre>		<pre>
	<script>		<script>

Pahenning: /* Anwendungsbeispiel */

2025-06-04T15:57:39Z

Anwendungsbeispiel

← Nächstältere Version		Version vom 4. Juni 2025, 17:57 Uhr
Zeile 73:		Zeile 73:

	==Anwendungsbeispiel==		==Anwendungsbeispiel==
	[[File:Gaswasser_2025.png]]		[[File:Gaswasser_2025.png\|frame\|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 Gas- und Wasserverbrauch benötigt. Die Daten stehen in verschiedenen Readings des FHEM-Device ''gaswaterProfileC''

	<pre>		<pre>
	<!--Gas -->		<!--Gas -->

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. File:Widget_bar_1.png File:Widget_bar_2.png File:Widget_bar_3.png 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)…“

2025-06-04T15:53:16Z

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. <gallery> File:Widget_bar_1.png File:Widget_bar_2.png File:Widget_bar_3.png </gallery> 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)…“

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.
<gallery>
File:Widget_bar_1.png
File:Widget_bar_2.png
File:Widget_bar_3.png
</gallery>
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
<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 20" width="200px" height="150px">

<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>
</pre>
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
<pre>
<ftui-content suffix="<SUFFIX>" file="widget_bar.svg" fillside="<FARBE1>" filltop="<FARBE2>">
</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 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.
<pre>
<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);
}
</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]]
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>