FTUI Widget Bar - Versionsgeschichte

Pahenning am 4. Juni 2025 um 15:43 Uhr

2025-06-04T15:43:14Z

← Nächstältere Version		Version vom 4. Juni 2025, 17:43 Uhr
Zeile 1:		Zeile 1:
	Das [[{{PAGENAME}}\|Bar Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem ein Reading eines FHEM-Devices in Form eines horizontalen Balkens mit rundem Querschnitt angezeigt wird.		Das [[{{PAGENAME}}\|Bar Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem ein Reading eines FHEM-Devices in Form eines horizontalen Balkens mit rundem Querschnitt angezeigt wird. Für die entsprechende Darstellung in FTUI3, siehe [[FTUI3 Widget Bar]].

	Es ist nicht in den Standard-Widgets von FTUI2 enthalten, sondern wurde 2019 in		Es ist nicht in den Standard-Widgets von FTUI2 enthalten, sondern wurde 2019 in

Pahenning am 7. August 2024 um 08:04 Uhr

2024-08-07T08:04:41Z

← Nächstältere Version		Version vom 7. August 2024, 10:04 Uhr
Zeile 39:		Zeile 39:
	Dazu muss im ersten Schritt eine Widget-Datei widget_bar.js erstellt werden, die (mit		Dazu muss im ersten Schritt eine Widget-Datei widget_bar.js erstellt werden, die (mit
	den korrekten Rechten) im Verzeichnis /opt/fhem/www/tablet/js gespeichert wird.		den korrekten Rechten) im Verzeichnis /opt/fhem/www/tablet/js gespeichert wird.
			<div class="mw-collapsible mw-collapsed">
			Code:<div class="mw-collapsible-content">
	<pre>		<pre>
	/* FTUI Plugin		/* FTUI Plugin
Zeile 164:		Zeile 165:
	};		};
	</pre>		</pre>
			</div></div>
	==Auf der FTUI-Seite==		==Auf der FTUI-Seite==
	Die Seite, auf welcher das Bar-Widget angezeigt werden soll, benötigt einerseits eine unsichtbare Region, deren sichtbare Kopien später das Widget enthalten werden.		Die Seite, auf welcher das Bar-Widget angezeigt werden soll, benötigt einerseits eine unsichtbare Region, deren sichtbare Kopien später das Widget enthalten werden.
Zeile 175:		Zeile 177:

	Außerdem wollen wir natürlich die Farben des Widgets durch schicke Gradienten darstellen, und benötigen die grafische Struktur des Widgets. Dazu gibt es eine SVG-Region, die wegen einer Breite und Höhe von jeweils Null Pixel unsichtbar ist. Also gleich im Anschluss an die unsichtbare HTML-Division von oben:		Außerdem wollen wir natürlich die Farben des Widgets durch schicke Gradienten darstellen, und benötigen die grafische Struktur des Widgets. Dazu gibt es eine SVG-Region, die wegen einer Breite und Höhe von jeweils Null Pixel unsichtbar ist. Also gleich im Anschluss an die unsichtbare HTML-Division von oben:
			<div class="mw-collapsible mw-collapsed">
			Code:<div class="mw-collapsible-content">
	<pre>		<pre>
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
Zeile 250:		Zeile 254:
	</svg>		</svg>
	</pre>		</pre>
			</div></div>
	[[Kategorie:FHEM Tablet UI V2\|Bar]]		[[Kategorie:FHEM Tablet UI V2\|Bar]]

Pahenning am 4. August 2024 um 10:32 Uhr

2024-08-04T10:32:24Z

← Nächstältere Version		Version vom 4. August 2024, 12:32 Uhr
Zeile 31:		Zeile 31:
	\|'''data-unit'''\|\|Einheit nach Zahl hinzufügen\|\|\|\|data-unit="m³"		\|'''data-unit'''\|\|Einheit nach Zahl hinzufügen\|\|\|\|data-unit="m³"
	\|-		\|-
	\|'''data-interval'''\|\|Anzahl Millisekunden, nach denen das Widget aktualisiert werden soll\|\|0 -> kein Auto-Refresh\|\|data-interval="10"		\|'''data-interval'''\|\|Anzahl Millisekunden, nach denen das Widget aktualisiert werden soll\|\|0 -> kein Auto-Refresh\|\|data-interval="5000"
	\|}		\|}
	<references/>		<references/>

Pahenning: /* Auf der FTUI-Seite */

2024-08-04T10:31:11Z

Auf der FTUI-Seite

← Nächstältere Version		Version vom 4. August 2024, 12:31 Uhr
Zeile 169:		Zeile 169:
	<pre>		<pre>
	<div style="visibility:hidden">		<div style="visibility:hidden">
	<svg id="svg200x150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 225" width="200px" height="150px"> </svg>		<svg id="svg200x150" xmlns="http://www.w3.org/2000/svg"
			viewBox="0 0 300 225" width="200px" height="150px"> </svg>
	</div>		</div>
	</pre>		</pre>

	Außerdem wollen wir natürlich die Farben des Widgets durch schicke Gradienten darstellen, und benötigen die grafische Struktur des Widgets. Dazu gibt es eine SVG-Region, die wegen einer Breite und Höhe von ~~jeweil sNull~~ Pixel unsichtbar ist. Also gleich im Anschluss an die unsichtbare HTML-Division von oben:		Außerdem wollen wir natürlich die Farben des Widgets durch schicke Gradienten darstellen, und benötigen die grafische Struktur des Widgets. Dazu gibt es eine SVG-Region, die wegen einer Breite und Höhe von jeweils Null Pixel unsichtbar ist. Also gleich im Anschluss an die unsichtbare HTML-Division von oben:
	<pre>		<pre>
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"		<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	viewBox="0 0 10 10" width="0px" height="0px">		viewBox="0 0 10 10" width="0px" height="0px">
	<defs>		<defs>
	<!-- white-snowwhite -->		<!-- white-snowwhite -->

Pahenning am 4. August 2024 um 10:30 Uhr

2024-08-04T10:30:01Z

← Nächstältere Version		Version vom 4. August 2024, 12:30 Uhr
Zeile 5:		Zeile 5:

	<gallery>		<gallery>
			File:Widget_bar_1.png
			File:Widget_bar_2.png
			File:Widget_bar_3.png
	</gallery>		</gallery>

Zeile 30:		Zeile 32:
	\|-		\|-
	\|'''data-interval'''\|\|Anzahl Millisekunden, nach denen das Widget aktualisiert werden soll\|\|0 -> kein Auto-Refresh\|\|data-interval="10"		\|'''data-interval'''\|\|Anzahl Millisekunden, nach denen das Widget aktualisiert werden soll\|\|0 -> kein Auto-Refresh\|\|data-interval="10"
	\|}

	~~==CSS Klassen==~~
	~~{\|class="wikitable"~~
	~~!Klasse!!Beschreibung~~
	{{FTUI Klasse\|small}}{{FTUI Klasse\|large}}{{FTUI Klasse\|big}}{{FTUI Klasse\|bigger}}{{FTUI Klasse\|thin}}{{FTUI Klasse\|bold}}{{FTUI Klasse\|red}}{{FTUI Klasse\|green}}{{FTUI Klasse\|blue}}{{FTUI Klasse\|orange}}{{FTUI Klasse\|darker}}{{FTUI Klasse\|timestamp}}{{FTUI Klasse\|w1x}}{{FTUI Klasse\|w2x}}{{FTUI Klasse\|w3x}}{{FTUI Klasse\|circleborder}}{{FTUI Klasse\|squareborder}}{{FTUI Klasse\|bg-limit}}{{FTUI Klasse\|icon square}}{{FTUI Klasse\|icon round}}{{FTUI Klasse\|truncate}}{{FTUI Klasse\|fixedlabel}}{{FTUI Klasse\|blink}}{{FTUI Klasse\|blurry}}{{FTUI Klasse\|shake}}
	\|}		\|}
	<references/>		<references/>
Zeile 169:		Zeile 165:
	</pre>		</pre>
	==Auf der FTUI-Seite==		==Auf der FTUI-Seite==
	Die Seite, auf welcher das Bar-Widget angezeigt werden soll, benötigt ~~einerseit~~ eine unsichtbare ~~SVG-~~Region, deren sichtbare Kopien später das Widget enthalten werden.		Die Seite, auf welcher das Bar-Widget angezeigt werden soll, benötigt einerseits eine unsichtbare Region, deren sichtbare Kopien später das Widget enthalten werden.
	Dazu muss irgendwo auf dieser Seite eine HTML-Division eingebaut werden, gerne direkt nach dem <body>-Tag.		Dazu muss irgendwo auf dieser Seite eine HTML-Division eingebaut werden, gerne direkt nach dem <body>-Tag.
	<pre>		<pre>
	<div style="visibility:hidden">		<div style="visibility:hidden">
	<svg id="svg200x150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 225" width="200px"		<svg id="svg200x150" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 225" width="200px" height="150px"> </svg>
	height="150px"> </svg>
	</div>		</div>
	</pre>		</pre>

	Außerdem wollen wir natürlich die Farben des Widgets durch schicke Gradienten darstellen, und benötigen die grafische Struktur des Widgets. Dazu gibt es eine SVG-Region, die wegen einer Breite und Höhe von jeweil sNull Pixel unsichtbar ist. Also gleich im Anschluss an die unsichtbare HTML-Division von oben:		Außerdem wollen wir natürlich die Farben des Widgets durch schicke Gradienten darstellen, und benötigen die grafische Struktur des Widgets. Dazu gibt es eine SVG-Region, die wegen einer Breite und Höhe von jeweil sNull Pixel unsichtbar ist. Also gleich im Anschluss an die unsichtbare HTML-Division von oben:
	<pre>		<pre>

Pahenning am 4. August 2024 um 10:19 Uhr

2024-08-04T10:19:32Z

← Nächstältere Version		Version vom 4. August 2024, 12:19 Uhr
Zeile 1:		Zeile 1:
	Das [[{{PAGENAME}}\|Bar Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem ein Reading eines FHEM-Devices in Form eines horizontalen Balkens angezeigt wird.		Das [[{{PAGENAME}}\|Bar Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem ein Reading eines FHEM-Devices in Form eines horizontalen Balkens mit rundem Querschnitt angezeigt wird.

	Es ist nicht in den Standard-Widgets von FTUI2 enthalten, sondern wurde		Es ist nicht in den Standard-Widgets von FTUI2 enthalten, sondern wurde 2019 in
			<ref>P.A.Henning: <i>Smart Home mit FHEM</i>, Carl Hanser Verlag München 2019, 341 Seiten, ISBN 978-3-446-45873-4</ref> veröffentlicht. Zur Benutzung bitte den Anweisungen unter [[#Installation\|Installation]] folgen.

	<gallery>		<gallery>
Zeile 27:		Zeile 28:
	\|-		\|-
	\|'''data-unit'''\|\|Einheit nach Zahl hinzufügen\|\|\|\|data-unit="m³"		\|'''data-unit'''\|\|Einheit nach Zahl hinzufügen\|\|\|\|data-unit="m³"
	\|-
	~~\|'''data-substitution'''\|\|Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen\|\|\|\|siehe [[#Hinweise]]~~
	\|-		\|-
	\|'''data-interval'''\|\|Anzahl Millisekunden, nach denen das Widget aktualisiert werden soll\|\|0 -> kein Auto-Refresh\|\|data-interval="10"		\|'''data-interval'''\|\|Anzahl Millisekunden, nach denen das Widget aktualisiert werden soll\|\|0 -> kein Auto-Refresh\|\|data-interval="10"
Zeile 38:		Zeile 37:
	{{FTUI Klasse\|small}}{{FTUI Klasse\|large}}{{FTUI Klasse\|big}}{{FTUI Klasse\|bigger}}{{FTUI Klasse\|thin}}{{FTUI Klasse\|bold}}{{FTUI Klasse\|red}}{{FTUI Klasse\|green}}{{FTUI Klasse\|blue}}{{FTUI Klasse\|orange}}{{FTUI Klasse\|darker}}{{FTUI Klasse\|timestamp}}{{FTUI Klasse\|w1x}}{{FTUI Klasse\|w2x}}{{FTUI Klasse\|w3x}}{{FTUI Klasse\|circleborder}}{{FTUI Klasse\|squareborder}}{{FTUI Klasse\|bg-limit}}{{FTUI Klasse\|icon square}}{{FTUI Klasse\|icon round}}{{FTUI Klasse\|truncate}}{{FTUI Klasse\|fixedlabel}}{{FTUI Klasse\|blink}}{{FTUI Klasse\|blurry}}{{FTUI Klasse\|shake}}		{{FTUI Klasse\|small}}{{FTUI Klasse\|large}}{{FTUI Klasse\|big}}{{FTUI Klasse\|bigger}}{{FTUI Klasse\|thin}}{{FTUI Klasse\|bold}}{{FTUI Klasse\|red}}{{FTUI Klasse\|green}}{{FTUI Klasse\|blue}}{{FTUI Klasse\|orange}}{{FTUI Klasse\|darker}}{{FTUI Klasse\|timestamp}}{{FTUI Klasse\|w1x}}{{FTUI Klasse\|w2x}}{{FTUI Klasse\|w3x}}{{FTUI Klasse\|circleborder}}{{FTUI Klasse\|squareborder}}{{FTUI Klasse\|bg-limit}}{{FTUI Klasse\|icon square}}{{FTUI Klasse\|icon round}}{{FTUI Klasse\|truncate}}{{FTUI Klasse\|fixedlabel}}{{FTUI Klasse\|blink}}{{FTUI Klasse\|blurry}}{{FTUI Klasse\|shake}}
	\|}		\|}
			<references/>

	=Installation=		=Installation=
Zeile 253:		Zeile 253:
	</svg>		</svg>
	</pre>		</pre>
			[[Kategorie:FHEM Tablet UI V2\|Bar]]

Pahenning am 4. August 2024 um 09:36 Uhr

2024-08-04T09:36:06Z

← Nächstältere Version		Version vom 4. August 2024, 11:36 Uhr
Zeile 4:		Zeile 4:

	<gallery>		<gallery>
	~~File:FTUI_Widget_Label_01.png~~
	~~File:FTUI_Widget_Label_02.png~~
	~~File:FTUI_Widget_Label_03.png~~
	~~File:FTUI_Widget_Label_04.png~~
	~~File:FTUI_Widget_Label_05.png~~
	</gallery>		</gallery>

Pahenning: /* Installation */

2024-08-04T09:35:03Z

Installation

@@ Zeile 44: / Zeile 44: @@
 =Installation=
 Dazu muss im ersten Schritt eine Widget-Datei widget_bar.js erstellt werden, die (mit
 den korrekten Rechten) im Verzeichnis /opt/fhem/www/tablet/js gespeichert wird.
@@ Zeile 170: / Zeile 171: @@
      return me;
 };
 </pre>

Pahenning: /* Attribute */

2024-08-04T09:22:01Z

Attribute

← Nächstältere Version		Version vom 4. August 2024, 11:22 Uhr
Zeile 18:		Zeile 18:
	!Beispiel		!Beispiel
	\|-		\|-
	\|'''data-get'''\|\|Name des Readings, dessen Wert angezeigt werden soll\|\|\|\|data-get="~~measured-temp~~"		\|'''data-device'''\|\|Name des Device, dessen Reading angezeigt werden soll\|\|\|\|data-get="G.Verb"
			\|-
			\|'''data-get'''\|\|Name des Readings, dessen Wert angezeigt werden soll\|\|\|\|data-get="power"
	\|-		\|-
	\|'''data-part'''\|\|[[Regulärer Ausdruck\|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll\|\|\|\|		\|'''data-part'''\|\|[[Regulärer Ausdruck\|RegEx]] oder Nummer des Wortes, nach welcher der angezeigte Text gefiltert werden soll\|\|\|\|
Zeile 24:		Zeile 26:
	\|'''data-fix'''\|\|Angegebene Anzahl an Dezimalstellen einhalten\|\|(-1 -> nicht numerisch)\|\|		\|'''data-fix'''\|\|Angegebene Anzahl an Dezimalstellen einhalten\|\|(-1 -> nicht numerisch)\|\|
	\|-		\|-
	\|'''data-~~factor~~'''\|\|~~Multipliziert Wert des Readings mit angegebener Zahl~~\|\|1\|\|data-~~factor="3.6"~~		\|'''data-max'''\|\|Zahlenwert, bei welchem der Balken zu 100% gefüllt ist\|\|1\|\|data-max="20.0"
	\|-
	~~\|'''data-color'''\|\|Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe\|\|\|\|data-color="red"~~
	\|-
	~~\|'''data-colors'''\|\|Ein Array von Farben. Welche Farbe für das Label verwendet wird, wird durch das ''data-limits''-Attribut bestimmt\|\|\|\|data-colors~~='["~~red","yellow","green"]'~~
	\|-
	~~\|'''data-classes'''\|\|Ein Array von CSS-Klassen~~. ~~Welche Klasse verwendet wird, hängt vom zutreffenden Wert im ''data-limits''-Attribut ab\|\|\|\|data-classes='["bg-red","bg-yellow","bg-green"]' <br>~~
	~~data-classes='["blink","blurry","shake"]'~~
	\|-
	~~\|'''data-limits'''\|\|Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert\|\|\|\|data-limits='[1,15,30]'~~
	\|-
	~~\|'''data-limits-get'''\|\|Name des Readings, von dem die Werte für den Vergleich mit dem data-limits-Array geholt werden\|\|data-get\|\|data-limits-get="Dummy01:Limits~~"
	\|-		\|-
	\|'''data-~~limits-part~~'''\|\|~~Filtern nach~~ Wert, ~~Position eines Wertes in einer Leerzeichen-getrennte Liste oder RegEx~~\|\|~~'-1' -> alle~~\|\|		\|'''data-color'''\|\|Fester Wert für die Farbe des Balkens. Erlaubte Werte hängen von den Definitionen im SVG-Teil ab, siehe unten. Mit dem unten gegebenem Beispiel sind erlaubte Farben "red", "green", "bue", "pink", "orange" \|\|\|\|data-color="pink"
	\|-		\|-
	\|'''data-unit'''\|\|Einheit nach Zahl hinzufügen\|\|\|\|data-unit="~~%B0C%0A~~"		\|'''data-unit'''\|\|Einheit nach Zahl hinzufügen\|\|\|\|data-unit="m³"
	\|-		\|-
	\|'''data-substitution'''\|\|Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen\|\|\|\|siehe [[#Hinweise]]		\|'''data-substitution'''\|\|Verschiedene Funktionen, um den empfangenen Wert durch etwas anderes zu ersetzen\|\|\|\|siehe [[#Hinweise]]
	\|-		\|-
	\|'''data-~~pre-text'''\|\|Text, der vor dem empfangenen Wert stehen soll\|\|\|\|data-pre-text="Es ist "~~		\|'''data-interval'''\|\|Anzahl Millisekunden, nach denen das Widget aktualisiert werden soll\|\|0 -> kein Auto-Refresh\|\|data-interval="10"
	\|-
	~~\|'''data-post-text'''\|\|Text, der nach dem empfangenen Wert sehen soll\|\|\|\|data-post-text=" Grad warm"~~
	\|-
	~~\|'''data-hide'''\|\|Name des Readings, nach dessen Wert das Widget angezeigt werden soll oder nicht\|\|STATE\|\|data-hide="power-on"~~
	\|-
	~~\|'''data-hide-on'''\|\|Wert, bei dem das Widget versteckt wird\|\|true,1,on\|\|data-hide-on="on"~~
	\|-
	~~\|'''data-hide-off'''\|\|Wert, bei dem das Widget angezeigt wird\|\|!on\|\|data-hide-off="!on"~~
	\|-
	~~\|'''data-hideparents'''\|\|jQuery-Selector, um auch die Eltern-Elemente zu verstecken\|\|\|\|data-hideparents="#Name"~~
	\|-
	~~\|'''data-refresh~~'''\|\|Anzahl ~~Sekunden~~, nach denen das Widget aktualisiert werden soll\|\|0 -> kein Auto-Refresh\|\|data-~~refresh~~="10"
	\|}		\|}

Pahenning: /* Installation */

2024-08-04T09:10:36Z

Installation

← Nächstältere Version		Version vom 4. August 2024, 11:10 Uhr
Zeile 77:		Zeile 77:

	"use strict";		"use strict";

	//

	function depends_bar() {		function depends_bar() {