FTUI3 Inhalte in JavaScript verwenden - Versionsgeschichte

Pahenning: /* Verwendung in FTUI3-Elementen */

2025-06-03T13:13:48Z

Verwendung in FTUI3-Elementen

← Nächstältere Version		Version vom 3. Juni 2025, 15:13 Uhr
Zeile 29:		Zeile 29:
	<ftui-label [text]="DEVICE:READING \| ftui_function1()"></ftui-label>		<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		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>		<ftui-label [text]="DEVICE:READING \| ftui_function2(WERT2)"></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.		wird der Wert des Readings ''READING'' aus dem FHEM-Device ''DEVICE'' als erster Parameter und zusätzlich der explizit angegebene Wert ''WERT2'' als zweiter Parameter an die JavaScript-Funktion function übergeben. Ähnlich für mehrparametrige Funktionen
			<ftui-label [text]="DEVICE:READING \| ftui_functionn(WERT2,WERT3...WERTN)"></ftui-label>

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

Pahenning: /* Vorbereitung */

2025-06-03T13:12:23Z

Vorbereitung

← Nächstältere Version		Version vom 3. Juni 2025, 15:12 Uhr
Zeile 23:		Zeile 23:
	}		}
	</script>		</script>
	Dadurch werden ~~diezusätzlichen~~ Funktionen ''ftui_function1'', ''ftui_function2'' ... ''ftui_functionn'' zu Pipeline-Funktionen in FTUI3.		Dadurch werden die zusätzlichen Funktionen ''ftui_function1'', ''ftui_function2'' ... ''ftui_functionn'' zu Pipeline-Funktionen in FTUI3.

	==Verwendung in FTUI3-Elementen==		==Verwendung in FTUI3-Elementen==

Pahenning: /* Vorbereitung */

2025-06-03T13:12:11Z

Vorbereitung

← Nächstältere Version		Version vom 3. Juni 2025, 15:12 Uhr
Zeile 5:		Zeile 5:
	zu rufen, wenn sich ein Datenwert in FTUI3 ändert.		zu rufen, wenn sich ein Datenwert in FTUI3 ändert.
	==Vorbereitung==		==Vorbereitung==
	Dazu muss in den Seitenheader oder in einer externen Datei zusätzlich zu den Funktionsdefinitionen etwas JavaScript-Code aufgenommen werden:		Dazu muss in den Seitenheader oder in einer externen Datei zusätzlich zu den Funktionsdefinitionen etwas JavaScript-Code aufgenommen werden. Je nach Anzahl der gewünschten Parameter dieder Funktionen
	<script>		<script>
	const ftui_function1 = () => input => function1(input);		const ftui_function1 = () => input => function1(input);
	const ftui_function2 = ~~value~~ => input => function2(input,~~value~~);		const ftui_function2 = value2 => input => function2(input,value2);
			...
			const ftui_functionn = (value2,...valuen)--- => input => function2(input,value2,...valuen);
			...
	function function1(param1){		function function1(param1){
	...		...
	}		}
	function function2(param1,param2){		function function2(param1,param2){
			...
			}
			...
			function functionn(param1,param2,...paramn){
	...		...
	}		}
	</script>		</script>
	Dadurch werden ~~die beidne zusätzlichen~~ Funktionen ''ftui_function1'', ''ftui_function2'' zu Pipeline-Funktionen in FTUI3.		Dadurch werden diezusätzlichen Funktionen ''ftui_function1'', ''ftui_function2'' ... ''ftui_functionn'' zu Pipeline-Funktionen in FTUI3.

	==Verwendung in FTUI3-Elementen==		==Verwendung in FTUI3-Elementen==
	In FTUI3-Elementen kann durch den Namen der Pipeline-Funktionen der JavaScript-Code ausgeführt werden. Beispielsweise wird durch		In FTUI3-Elementen kann durch den Namen der Pipeline-Funktionen der JavaScript-Code ausgeführt werden. Beispielsweise wird durch

Pahenning am 17. Februar 2025 um 14:44 Uhr

2025-02-17T14:44:01Z

← Nächstältere Version		Version vom 17. Februar 2025, 16:44 Uhr
Zeile 51:		Zeile 51:

	In der Funktion sind ''r_h_l'', ''g_h_r'' und ''b_t'' die lokalen IDs der Füllgradienten, z.B.		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">		<svg xmlns="http://www.w3.org/2000/svg">
	<defs>		<defs>
	<pattern id="g_h_r" patternUnits="userSpaceOnUse" width="15" height="15">		<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"/>		<line x1="0" y1="0" x2="0" y2="15" stroke="#0FD673" stroke-width="15"/>
	<animatetransform attributeName="patternTransform" type="translate" by="15 0"		<animatetransform attributeName="patternTransform" type="translate" by="15 0"
	dur="1s" repeatCount="indefinite"/>		dur="1s" repeatCount="indefinite"/>
	</pattern>		</pattern>
	...		...
	</~~defs~~>		</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>		</svg>
	~~Der Pfeil selbst wird ebenfalls mit SVG definiert,~~
	~~<div style="position:absolute;left:420px;top:250px;">~~
	~~<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>~~
	~~</div>~~
	Die Umschaltung selbst wird in ein Label integriert, das den betreffenden Datenwert aus dem Reading auch gleich anzeigt:		Die Umschaltung selbst wird in ein Label integriert, das den betreffenden Datenwert aus dem Reading auch gleich anzeigt:
	~~<div~~		<ftui-label class="size-1" [text]="PowerFlow:power_battery \| fix(2) \| ftui_sp_power()" unit=" kW">
	~~style="position:absolute;left:460px;top:210px">~~		</ftui-label>
	<ftui-label class="size-1" [text]="PowerFlow:power_battery \| fix(2) \| ftui_sp_power()" unit=" kW">
	</ftui-label>
	~~</div>~~


	[[Kategorie:FHEM Tablet UI V3]]		[[Kategorie:FHEM Tablet UI V3]]

Pahenning am 17. Februar 2025 um 14:42 Uhr

2025-02-17T14:42:13Z

← Nächstältere Version		Version vom 17. Februar 2025, 16:42 Uhr
Zeile 24:		Zeile 24:
	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.		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==		==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		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>		<script>
	const ftui_sp_power = () => input => sp_power(input);		const ftui_sp_power = () => input => sp_power(input);

	function sp_power(power) {		function sp_power(power) {
	var a = document.getElementById('pf_sp');		var a = document.getElementById('pf_sp');
Zeile 49:		Zeile 48:
	</script>		</script>
	Die notwendige Verschiebung bei der Richtungsumkehr (durch <code>scale(-1,1)</code>, 135 Pixel horizontal) muss durch Versuch und Irrtum festgestellt werden.		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.
	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.		In der Funktion sind ''r_h_l'', ''g_h_r'' und ''b_t'' die lokalen IDs der Füllgradienten, z.B.
Zeile 64:		Zeile 62:
	</svg>		</svg>
	Der Pfeil selbst wird ebenfalls mit SVG definiert,		Der Pfeil selbst wird ebenfalls mit SVG definiert,
	~~<!-- Speicher Ladung Pfeil -->~~
	<div style="position:absolute;left:420px;top:250px;">		<div style="position:absolute;left:420px;top:250px;">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 405 150" width="400px"		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 405 150" width="400px"
Zeile 73:		Zeile 70:
	</div>		</div>
	Die Umschaltung selbst wird in ein Label integriert, das den betreffenden Datenwert aus dem Reading auch gleich anzeigt:		Die Umschaltung selbst wird in ein Label integriert, das den betreffenden Datenwert aus dem Reading auch gleich anzeigt:
	~~<!-- Speicher Ladeleistung -->~~
	<div		<div
	style="position:absolute;left:460px;top:210px">		style="position:absolute;left:460px;top:210px">

Pahenning: Die Seite wurde neu angelegt: „==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: