FTUI Widget Symbol - Versionsgeschichte

Pahenning am 3. August 2024 um 08:47 Uhr

2024-08-03T08:47:24Z

← Nächstältere Version		Version vom 3. August 2024, 10:47 Uhr
Zeile 1:		Zeile 1:
	Das [[{{PAGENAME}}\|Widget Symbol]] ist ein Widget für [[FHEM Tablet UI]], mit dem - ggf. gesteuert durch ein reading - ein Symbol dargestellt wird. Dieses Widget generiert nur eine Anzeige; es besitzt keine Möglichkeit zur Interaktion.		Das [[{{PAGENAME}}\|Widget Symbol]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem - ggf. gesteuert durch ein reading - ein Symbol dargestellt wird. Dieses Widget generiert nur eine Anzeige; es besitzt keine Möglichkeit zur Interaktion.

	<gallery widths="600" height="200">		<gallery widths="600" height="200">
Zeile 171:		Zeile 171:
	Als Alternative zum Symbol-Widget kommt u.U. das [[FTUI Widget Pagebutton]] in Betracht, welches ebenfalls über Icons und Farben Zustände visualisieren kann und zusätzlich bei Betätigung eine Unterseite aufruft.		Als Alternative zum Symbol-Widget kommt u.U. das [[FTUI Widget Pagebutton]] in Betracht, welches ebenfalls über Icons und Farben Zustände visualisieren kann und zusätzlich bei Betätigung eine Unterseite aufruft.

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

OdfFhem: "Einstellung für Warnung" hinzugefügt

2019-05-30T19:57:48Z

"Einstellung für Warnung" hinzugefügt

@@ Zeile 14: / Zeile 14: @@
 |}
-Einstellung bei zwei Werten
+===Einstellung bei zwei Werten===
 {| class="wikitable"
 !Attribut !! Beschreibung !! Default-Wert !! Beispiel
@@ Zeile 21: / Zeile 21: @@
 |-
 |'''data-get-off''' ||Wert für off ||<nowiki>false|0|off|closed</nowiki>||
 |-
 |'''data-icon''' ||Name des Symbols||ftui-window||
@@ Zeile 43: / Zeile 35: @@
 |}
-Einstellung bei mehreren Werten
+===Einstellung bei mehreren Werten===
 {| class="wikitable"
 !Attribut !! Beschreibung !!Default Wert !! Beispiel
@@ Zeile 71: / Zeile 63: @@
 *''data-get-on'' und ''data-get-off'' können nicht gemeinsam mit ''data-states'' verwendet werden
 *reine Zahlen-Arrays bei ''data-states'' müssen '''aufsteigend''' sortiert werden.}}
 ==CSS-Klassen==

Ulm32b: /* Attribute */ data-warn-fixed ergänzt.

2018-10-27T11:50:22Z

Attribute: data-warn-fixed ergänzt.

← Nächstältere Version		Version vom 27. Oktober 2018, 13:50 Uhr
Zeile 27:		Zeile 27:
	\|-		\|-
	\|'''data-warn-color'''\|\|Schriftfarbe des Warnhinweises\|\|\|\|		\|'''data-warn-color'''\|\|Schriftfarbe des Warnhinweises\|\|\|\|
			\|-
			\|'''data-warn-fixed'''\|\|Anzahl Nachkommastellen im Warnhinweis\|\|0\|\|
	\|-		\|-
	\|'''data-icon''' \|\|Name des Symbols\|\|ftui-window\|\|		\|'''data-icon''' \|\|Name des Symbols\|\|ftui-window\|\|

Ulm32b: /* Attribute */ data-warn-color ergänzt

2018-10-26T22:54:47Z

Attribute: data-warn-color ergänzt

← Nächstältere Version		Version vom 27. Oktober 2018, 00:54 Uhr
Zeile 22:		Zeile 22:
	\|'''data-get-off''' \|\|Wert für off \|\|<nowiki>false\|0\|off\|closed</nowiki>\|\|		\|'''data-get-off''' \|\|Wert für off \|\|<nowiki>false\|0\|off\|closed</nowiki>\|\|
	\|-		\|-
	\|'''data-get-warn''' \|\|Wert für Warnmeldung (Rote Zahl am Rand) \|\|-1 (=aus)\|\|		\|'''data-get-warn''' \|\|Wert für Warnmeldung (Rote (=default) Zahl am Rand) \|\|-1 (=aus)\|\|
			\|-
			\|'''data-warn-background-color'''\|\|Hintergrundfarbe des Warnhinweises\|\|\|\|
			\|-
			\|'''data-warn-color'''\|\|Schriftfarbe des Warnhinweises\|\|\|\|
	\|-		\|-
	\|'''data-icon''' \|\|Name des Symbols\|\|ftui-window\|\|		\|'''data-icon''' \|\|Name des Symbols\|\|ftui-window\|\|
Zeile 35:		Zeile 39:
	\|-		\|-
	\|'''data-off-color''' \|\|Farbe für OFF-Zustand. \|\|#505050\|\|		\|'''data-off-color''' \|\|Farbe für OFF-Zustand. \|\|#505050\|\|
	\|-
	\|}		\|}

Drhirn: /* Attribute */

2018-03-22T08:58:01Z

Attribute

Ulm32b: Beispiel in Tabelle verschoben.

2018-03-21T23:29:28Z

Beispiel in Tabelle verschoben.

← Nächstältere Version		Version vom 22. März 2018, 01:29 Uhr
Zeile 46:		Zeile 46:
	\|'''data-icons''' \|\|Array mit Icons zu data-states Array \|\|		\|'''data-icons''' \|\|Array mit Icons zu data-states Array \|\|
	\|-		\|-
	\|'''data-classes''' \|\|Array mit Klassen zu data-states Array \|\|data-classes='["bg-red blink","bg-yellow","bg-green"]'		\|'''data-classes''' \|\|Array mit Klassen zu data-states Array. Beispiel: data-classes='["bg-red blink","bg-yellow","bg-green"]' \|\|
	\|-		\|-
	\|'''data-background-icons''' \|\|Array mit Icons zu data-states Array \|\|		\|'''data-background-icons''' \|\|Array mit Icons zu data-states Array \|\|

Ulm32b: data-classes ergänzt

2018-02-23T09:42:36Z

data-classes ergänzt

← Nächstältere Version		Version vom 23. Februar 2018, 11:42 Uhr
Zeile 45:		Zeile 45:
	\|-		\|-
	\|'''data-icons''' \|\|Array mit Icons zu data-states Array \|\|		\|'''data-icons''' \|\|Array mit Icons zu data-states Array \|\|
			\|-
			\|'''data-classes''' \|\|Array mit Klassen zu data-states Array \|\|data-classes='["bg-red blink","bg-yellow","bg-green"]'
	\|-		\|-
	\|'''data-background-icons''' \|\|Array mit Icons zu data-states Array \|\|		\|'''data-background-icons''' \|\|Array mit Icons zu data-states Array \|\|

Ulm32b: Hinweis auf Pagebutton eingefügt.

2018-02-16T01:12:19Z

Hinweis auf Pagebutton eingefügt.

← Nächstältere Version		Version vom 16. Februar 2018, 03:12 Uhr
Zeile 132:		Zeile 132:
	</syntaxhighlight>		</syntaxhighlight>
	[[Datei:Bsp class warn.png]]		[[Datei:Bsp class warn.png]]


			==Hinweise==
			Als Alternative zum Symbol-Widget kommt u.U. das [[FTUI Widget Pagebutton]] in Betracht, welches ebenfalls über Icons und Farben Zustände visualisieren kann und zusätzlich bei Betätigung eine Unterseite aufruft.

	[[Kategorie:FHEM Tablet UI\|Symbol]]		[[Kategorie:FHEM Tablet UI\|Symbol]]

Drhirn: Hinweis auf die Unmöglichkeit, data-get-on gemeinsam mit data-states zu verwenden. Diesbezüglich auch das Beispiel geändert

2018-02-15T12:27:12Z

Hinweis auf die Unmöglichkeit, data-get-on gemeinsam mit data-states zu verwenden. Diesbezüglich auch das Beispiel geändert

← Nächstältere Version		Version vom 15. Februar 2018, 14:27 Uhr
Zeile 60:		Zeile 60:
	\|}		\|}

	data-get-on, data-get-off ~~and~~ data-states akzeptieren auch reguläre Ausdrücke (RegEx). Möglich sind auch Animationen, z.B. Blinken.		{{Hinweis\|
			*''data-get-on'', ''data-get-off'' und ''data-states'' akzeptieren auch reguläre Ausdrücke (RegEx). Möglich sind auch Animationen, z.B. Blinken.
	~~Bitte beachten: Reine~~ '''Zahlen-Arrays''~~' bei~~ data-states müssen '''aufsteigend ~~sortiert~~''' werden.		*''data-get-on'' und ''data-get-off'' können nicht gemeinsam mit ''data-states'' verwendet werden
			*reine Zahlen-Arrays bei ''data-states'' müssen '''aufsteigend''' sortiert werden.}}

	==CSS-Klassen==		==CSS-Klassen==
Zeile 106:		Zeile 107:
	<div data-type="symbol"		<div data-type="symbol"
	data-device="dDummy3"		data-device="dDummy3"
	~~data-get-on="[\d]+"~~
	~~data-get-off="!on"~~
	data-states='["100","([7][5-9])\|([8-9][0-9])","([5-6][0-9])\|([7][0-4])","([2][5-9])\|([3-5][0-9])","([0-9])\|([1][0-9])\|([2][0-4])"]'		data-states='["100","([7][5-9])\|([8-9][0-9])","([5-6][0-9])\|([7][0-4])","([2][5-9])\|([3-5][0-9])","([0-9])\|([1][0-9])\|([2][0-4])"]'
	data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'></div>		data-icons='["fa-battery-4","fa-battery-3","fa-battery-2","fa-battery-1","fa-battery-0"]'></div>

Ulm32b: Bild für Bsp Türsymbol mit class=warn eingefügt (Code war schon vorhanden).

2018-02-07T00:54:42Z

Bild für Bsp Türsymbol mit class=warn eingefügt (Code war schon vorhanden).

← Nächstältere Version		Version vom 7. Februar 2018, 02:54 Uhr
Zeile 132:		Zeile 132:
	</div>		</div>
	</syntaxhighlight>		</syntaxhighlight>
			[[Datei:Bsp class warn.png]]

	[[Kategorie:FHEM Tablet UI\|Symbol]]		[[Kategorie:FHEM Tablet UI\|Symbol]]

← Nächstältere Version		Version vom 22. März 2018, 10:58 Uhr
Zeile 9:		Zeile 9:

	{\| class="wikitable"		{\| class="wikitable"
	! HTML Attribut !! Beschreibung !! Default Wert		! HTML Attribut !! Beschreibung !! Default Wert !! Beispiel
	\|-		\|-
	\| data-get \|\| Name des Readings, welches ausgelesen wird \|\| STATE		\| data-get \|\| Name des Readings, welches ausgelesen wird \|\| STATE \|\|
	\|}		\|}

	Einstellung bei zwei Werten		Einstellung bei zwei Werten
	{\| class="wikitable"		{\| class="wikitable"
	!Attribut !! Beschreibung !! Default-Wert		!Attribut !! Beschreibung !! Default-Wert !! Beispiel
	\|-		\|-
	\|'''data-get-on''' \|\|Wert für on \|\|<nowiki>true\|1\|on\|open</nowiki>		\|'''data-get-on''' \|\|Wert für on \|\|<nowiki>true\|1\|on\|open</nowiki>\|\|
	\|-		\|-
	\|'''data-get-off''' \|\|Wert für off \|\|<nowiki>false\|0\|off\|closed</nowiki>		\|'''data-get-off''' \|\|Wert für off \|\|<nowiki>false\|0\|off\|closed</nowiki>\|\|
	\|-		\|-
	\|'''data-get-warn''' \|\|Wert für Warnmeldung (Rote Zahl am Rand) \|\|-1 (=aus)		\|'''data-get-warn''' \|\|Wert für Warnmeldung (Rote Zahl am Rand) \|\|-1 (=aus)\|\|
	\|-		\|-
	\|'''data-icon''' \|\|Name des Symbols\|\|ftui-window		\|'''data-icon''' \|\|Name des Symbols\|\|ftui-window\|\|
	\|-		\|-
	\|'''data-background-icon''' \|\|Hintergrundsymbol \|\|		\|'''data-background-icon''' \|\|Hintergrundsymbol \|\|\|\|
	\|-		\|-
	\|'''data-on-background-color''' \|\|Hintergrundfarbe für ON-Zustand. \|\|#aa6900		\|'''data-on-background-color''' \|\|Hintergrundfarbe für ON-Zustand. \|\|#aa6900\|\|
	\|-		\|-
	\|'''data-off-background-color''' \|\|Hintergrundfarbe für OFF-Zustand. \|\|#505050		\|'''data-off-background-color''' \|\|Hintergrundfarbe für OFF-Zustand. \|\|#505050\|\|
	\|-		\|-
	\|'''data-on-color''' \|\|Farbe für ON-Zustand. \|\|#aa6900		\|'''data-on-color''' \|\|Farbe für ON-Zustand. \|\|#aa6900\|\|
	\|-		\|-
	\|'''data-off-color''' \|\|Farbe für OFF-Zustand. \|\|#505050		\|'''data-off-color''' \|\|Farbe für OFF-Zustand. \|\|#505050\|\|
	\|-		\|-
	\|}		\|}
Zeile 40:		Zeile 40:
	Einstellung bei mehreren Werten		Einstellung bei mehreren Werten
	{\| class="wikitable"		{\| class="wikitable"
	!Attribut !! Beschreibung !!Default Wert		!Attribut !! Beschreibung !!Default Wert !! Beispiel
	\|-		\|-
	\|'''data-states''' \|\|Array für states \|\|		\|'''data-states''' \|\|Array für states \|\|\|\|
	\|-		\|-
	\|'''data-icons''' \|\|Array mit Icons zu data-states Array \|\|		\|'''data-icons''' \|\|Array mit Icons zu data-states Array \|\|\|\|
	\|-		\|-
	\|'''data-classes''' \|\|Array mit Klassen zu data-states Array. ~~Beispiel:~~ data-classes='["bg-red blink","bg-yellow","bg-green"]' \|\|		\|'''data-classes''' \|\|Array mit Klassen zu data-states Array.\|\|\|\|data-classes='["bg-red blink","bg-yellow","bg-green"]'
	\|-		\|-
	\|'''data-background-icons''' \|\|Array mit Icons zu data-states Array \|\|		\|'''data-background-icons''' \|\|Array mit Icons zu data-states Array \|\|\|\|
	\|-		\|-
	\|'''data-colors''' \|\|Array mit Farben zu data-states Array \|\|		\|'''data-colors''' \|\|Array mit Farben zu data-states Array \|\|\|\|
	\|-		\|-
	\|'''data-background-colors''' \|\|Array mit Hintergrundfarben zu data-states Array \|\|		\|'''data-background-colors''' \|\|Array mit Hintergrundfarben zu data-states Array \|\|\|\|
	\|-		\|-
	\|'''data-hide'''\|\|Reading zum Verstecken des Elementes. Das Element verschwindet, wenn der Wert mit '''data-hide-on''' übereinstimmt.\|\|'STATE'		\|'''data-hide'''\|\|Reading zum Verstecken des Elementes. Das Element verschwindet, wenn der Wert mit '''data-hide-on''' übereinstimmt.\|\|'STATE'\|\|
	\|-		\|-
	\|'''data-hide-on'''\|\|Zeichenkette, bei der das Element versteckt wird\|\|<nowiki>'true\|1\|on'</nowiki>		\|'''data-hide-on'''\|\|Zeichenkette, bei der das Element versteckt wird\|\|<nowiki>'true\|1\|on'</nowiki>\|\|
	\|-		\|-
	\|'''data-hide-off'''\|\|Zeichenkette, bei der das Element angezeigt wird\|\|'!on'		\|'''data-hide-off'''\|\|Zeichenkette, bei der das Element angezeigt wird\|\|'!on'\|\|
	\|-		\|-
	\|}		\|}