FTUI Widget Label - Versionsgeschichte

Pahenning am 3. August 2024 um 08:49 Uhr

2024-08-03T08:49:53Z

← Nächstältere Version		Version vom 3. August 2024, 10:49 Uhr
Zeile 139:		Zeile 139:
	</syntaxhighlight>		</syntaxhighlight>
	[[File:FTUI_Widget_Label_03.png]]		[[File:FTUI_Widget_Label_03.png]]
	~~[[Kategorie:FHEM Tablet UI]]~~

	===Zwei Labels in einer Textzeile===		===Zwei Labels in einer Textzeile===

Pahenning am 2. August 2024 um 14:59 Uhr

2024-08-02T14:59:23Z

← Nächstältere Version		Version vom 2. August 2024, 16:59 Uhr
Zeile 1:		Zeile 1:
	Das [[{{PAGENAME}}\|Label Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Reading eines FHEM-Devices in Textform angezeigt werden kann.		Das [[{{PAGENAME}}\|Label Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem ein Reading eines FHEM-Devices in Textform angezeigt werden kann.

	<gallery>		<gallery>
Zeile 209:		Zeile 209:
	</syntaxhighlight>		</syntaxhighlight>

	[[Kategorie:FHEM Tablet UI\|Label]]		[[Kategorie:FHEM Tablet UI V2\|Label]]

Sinus61: /* Attribute */

2019-02-25T17:14:45Z

Attribute

← Nächstältere Version		Version vom 25. Februar 2019, 19:14 Uhr
Zeile 22:		Zeile 22:
	\|'''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'''\|\|Multipliziert Wert des Readings mit angegebener Zahl\|\|1\|\|data-factor="3.6"
	\|-		\|-
	\|'''data-color'''\|\|Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe\|\|\|\|data-color="red"		\|'''data-color'''\|\|Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe\|\|\|\|data-color="red"

Sinus61: /* Attribute */

2019-02-25T16:55:24Z

Attribute

← Nächstältere Version		Version vom 25. Februar 2019, 18:55 Uhr
Zeile 21:		Zeile 21:
	\|-		\|-
	\|'''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-color'''\|\|Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe\|\|\|\|data-color="red"		\|'''data-color'''\|\|Fester Wert oder '''Device:Reading''' eines Devices für die Label-Farbe\|\|\|\|data-color="red"

Sinus61: /* CSS Klassen */

2019-02-23T13:42:26Z

CSS Klassen

← Nächstältere Version		Version vom 23. Februar 2019, 15:42 Uhr
Zeile 57:		Zeile 57:
	{\|class="wikitable"		{\|class="wikitable"
	!Klasse!!Beschreibung		!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\|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}}
	\|}		\|}

Sinus61: /* Attribute */

2019-02-23T13:37:39Z

Attribute

← Nächstältere Version		Version vom 23. Februar 2019, 15:37 Uhr
Zeile 26:		Zeile 26:
	\|'''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-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"]' data-classes='["blink","blurry","shake"]'		\|'''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'''\|\|Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert\|\|\|\|data-limits='[1,15,30]'

Sinus61: /* Attribute */

2019-02-23T13:35:16Z

Attribute

← Nächstältere Version		Version vom 23. Februar 2019, 15:35 Uhr
Zeile 26:		Zeile 26:
	\|'''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-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"]'		\|'''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"]' 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'''\|\|Ein Array numerischer oder RegEx Werte für den Vergleich mit dem aktuellen Wert\|\|\|\|data-limits='[1,15,30]'

Sinus61: /* Hinweise */

2019-01-25T14:31:45Z

Hinweise

← Nächstältere Version		Version vom 25. Januar 2019, 16:31 Uhr
Zeile 85:		Zeile 85:
	* Textlänge begrenzen: <code>data-substitution="toString().substr(0,30)"</code>		* Textlänge begrenzen: <code>data-substitution="toString().substr(0,30)"</code>
	* [[Regulärer Ausdruck\|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code>		* [[Regulärer Ausdruck\|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code>
	* <code>data-substitution="weekdayshort"</code>
	* Datums-/Zeitumwandlungen (Eingangsformat: YYYY-MM-DD HH:MI:SS oder DD.MM.YYYY):		* Datums-/Zeitumwandlungen (Eingangsformat: YYYY-MM-DD HH:MI:SS oder DD.MM.YYYY):
	** Tag:Monat: <code>data-substitution="toDate().ddmm()"</code>		** Tag:Monat: <code>data-substitution="toDate().ddmm()"</code>
Zeile 96:		Zeile 95:
	*** Mon, Die, etc.: <code>data-substitution="toDate().eee()"</code>		*** Mon, Die, etc.: <code>data-substitution="toDate().eee()"</code>
	*** Mo, Di, etc.: <code>data-substitution="toDate().ee()"</code>		*** Mo, Di, etc.: <code>data-substitution="toDate().ee()"</code>
			*** Mo, Di, etc.: <code>data-substitution="weekdayshort"</code>
	** einen Zeitraum (langes Format): <code>data-substitution="toDate().ago()"</code>		** einen Zeitraum (langes Format): <code>data-substitution="toDate().ago()"</code>
	** einen Zeitraum (kurzes Format):<code>data-substitution="toDate().ago('hh:mm:ss')"</code>		** einen Zeitraum (kurzes Format):<code>data-substitution="toDate().ago('hh:mm:ss')"</code>

Sinus61: /* Hinweise */

2019-01-25T14:28:43Z

Hinweise

← Nächstältere Version		Version vom 25. Januar 2019, 16:28 Uhr
Zeile 83:		Zeile 83:
	;Funktionsweise(n) von ''data-substitution'':		;Funktionsweise(n) von ''data-substitution'':
	* Ein Array an Ersetzungen: <code>data-substitution='["on","Lampe ist an","off","Lampe ist aus"]'</code>		* Ein Array an Ersetzungen: <code>data-substitution='["on","Lampe ist an","off","Lampe ist aus"]'</code>
			* Textlänge begrenzen: <code>data-substitution="toString().substr(0,30)"</code>
	* [[Regulärer Ausdruck\|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code>		* [[Regulärer Ausdruck\|RegEx]], die auf dem Wert angewandt werden soll. Standard RegEx-Schreibweise wird erwartet (s/regex/subst/modifier): <code>data-substitution="s/no soundplayer active//g"</code>
	* <code>data-substitution="weekdayshort"</code>		* <code>data-substitution="weekdayshort"</code>

Drhirn: /* Textfarbe bei bestimmten Grenzwerten ändern */

2019-01-15T09:07:03Z

Textfarbe bei bestimmten Grenzwerten ändern

← Nächstältere Version		Version vom 15. Januar 2019, 11:07 Uhr
Zeile 126:		Zeile 126:

	===Textfarbe bei bestimmten Grenzwerten ändern===		===Textfarbe bei bestimmten Grenzwerten ändern===
	Mit dem Label-Widget kann die Textfarbe je nach bestimmten Grenzwerten geändert werden. In diesem Beispiel ist die Farbe blau, ~~sobald~~ die Temperatur ~~gleich oder kleiner 18°~~ ist, grün ab ~~20° und~~ rot ~~ab 23°~~.		Mit dem Label-Widget kann die Textfarbe je nach bestimmten Grenzwerten geändert werden. In diesem Beispiel ist die Farbe blau, solange die Temperatur unter 20° liegt. Ab 20° ist sie grün. Und ab 23° rot.
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<div data-type="label"		<div data-type="label"