FTUI Widget Input - Versionsgeschichte

Pahenning am 2. August 2024 um 15:00 Uhr

2024-08-02T15:00:31Z

← Nächstältere Version		Version vom 2. August 2024, 17:00 Uhr
Zeile 1:		Zeile 1:
	Das [[{{PAGENAME}}\|Input Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Eingabefeld für Text erstellt werden kann.		Das [[{{PAGENAME}}\|Input Widget]] ist ein Widget für [[FHEM Tablet UI V2]], mit dem ein Eingabefeld für Text erstellt werden kann.

	<gallery>		<gallery>
Zeile 75:		Zeile 75:
	[[File:FTUI_Widget_Input_02.png]]		[[File:FTUI_Widget_Input_02.png]]

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

OdfFhem: "autoclear" und "autoselect" integriert

2019-05-30T09:29:21Z

"autoclear" und "autoselect" integriert

← Nächstältere Version		Version vom 30. Mai 2019, 11:29 Uhr
Zeile 27:		Zeile 27:
	{\|class="wikitable"		{\|class="wikitable"
	!Klasse!!Beschreibung		!Klasse!!Beschreibung
	{{FTUI Klasse\|wider}}{{FTUI Klasse\|w1x}}{{FTUI Klasse\|w2x}}{{FTUI Klasse\|w3x}}{{FTUI Klasse\|large}}{{FTUI Klasse\|big}}{{FTUI Klasse\|notransmit}}		{{FTUI Klasse\|wider}}{{FTUI Klasse\|w1x}}{{FTUI Klasse\|w2x}}{{FTUI Klasse\|w3x}}{{FTUI Klasse\|large}}{{FTUI Klasse\|big}}{{FTUI Klasse\|notransmit}}{{FTUI Klasse\|autoclear}}{{FTUI Klasse\|autoselect}}
	\|}		\|}
	~~{{Todo\|Neue Klasse autoclear und autoselect definieren und einfügen.}}~~

	==Hinweise==		==Hinweise==

Baumbuwe: catsort

2018-01-26T14:04:54Z

catsort

← Nächstältere Version		Version vom 26. Januar 2018, 16:04 Uhr
Zeile 76:		Zeile 76:
	[[File:FTUI_Widget_Input_02.png]]		[[File:FTUI_Widget_Input_02.png]]

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

Ulm32b: Hinweis autoselect

2018-01-18T23:50:24Z

Hinweis autoselect

← Nächstältere Version		Version vom 19. Januar 2018, 01:50 Uhr
Zeile 29:		Zeile 29:
	{{FTUI Klasse\|wider}}{{FTUI Klasse\|w1x}}{{FTUI Klasse\|w2x}}{{FTUI Klasse\|w3x}}{{FTUI Klasse\|large}}{{FTUI Klasse\|big}}{{FTUI Klasse\|notransmit}}		{{FTUI Klasse\|wider}}{{FTUI Klasse\|w1x}}{{FTUI Klasse\|w2x}}{{FTUI Klasse\|w3x}}{{FTUI Klasse\|large}}{{FTUI Klasse\|big}}{{FTUI Klasse\|notransmit}}
	\|}		\|}
	{{Todo\|Neue Klasse autoclear definieren und einfügen.}}		{{Todo\|Neue Klasse autoclear und autoselect definieren und einfügen.}}

	==Hinweise==		==Hinweise==

Ulm32b: Hinweis autoclear eingefügt.

2018-01-18T23:46:02Z

Hinweis autoclear eingefügt.

← Nächstältere Version		Version vom 19. Januar 2018, 01:46 Uhr
Zeile 29:		Zeile 29:
	{{FTUI Klasse\|wider}}{{FTUI Klasse\|w1x}}{{FTUI Klasse\|w2x}}{{FTUI Klasse\|w3x}}{{FTUI Klasse\|large}}{{FTUI Klasse\|big}}{{FTUI Klasse\|notransmit}}		{{FTUI Klasse\|wider}}{{FTUI Klasse\|w1x}}{{FTUI Klasse\|w2x}}{{FTUI Klasse\|w3x}}{{FTUI Klasse\|large}}{{FTUI Klasse\|big}}{{FTUI Klasse\|notransmit}}
	\|}		\|}
			{{Todo\|Neue Klasse autoclear definieren und einfügen.}}

	==Hinweise==		==Hinweise==

Markusbloch: Anpassung von -Tags nach

2017-07-26T17:57:58Z

Anpassung von <source>-Tags nach <syntaxhighlight>

← Nächstältere Version		Version vom 26. Juli 2017, 19:57 Uhr
Zeile 35:		Zeile 35:
	==Beispiele==		==Beispiele==
	===Text an Device senden===		===Text an Device senden===
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="label">Wichtige Nachricht an Mitbewohner:</div>		<div data-type="label">Wichtige Nachricht an Mitbewohner:</div>
	<div data-type="input"		<div data-type="input"
Zeile 41:		Zeile 41:
	data-get="state"		data-get="state"
	data-value="Standardtext"></div>		data-value="Standardtext"></div>
	</~~source~~>		</syntaxhighlight>
	[[File:FTUI_Widget_Input_01.png]]		[[File:FTUI_Widget_Input_01.png]]

	===Text erst nach Klick auf Link-Widget absenden===		===Text erst nach Klick auf Link-Widget absenden===
	In das ''Input-Widget'' kann ein Text angegeben werden. Die Klasse ''notransmit'' führt aber dazu, dass er nicht abgesendet wird. Die geschieht erst nach dem Klick auf das ''Link-Widget'', welches die zu sendenden Daten vom ''Input-Label'' ausliest (''data-value'').		In das ''Input-Widget'' kann ein Text angegeben werden. Die Klasse ''notransmit'' führt aber dazu, dass er nicht abgesendet wird. Die geschieht erst nach dem Klick auf das ''Link-Widget'', welches die zu sendenden Daten vom ''Input-Label'' ausliest (''data-value'').
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div class="hbox">		<div class="hbox">
	<div data-type="input"		<div data-type="input"
Zeile 58:		Zeile 58:
	data-value="#sendTask">OK</div>		data-value="#sendTask">OK</div>
	</div>		</div>
	</~~source~~>		</syntaxhighlight>
	[[File:FTUI_Widget_Input_03.png]]		[[File:FTUI_Widget_Input_03.png]]

	===Befehlsstruktur aufbauen===		===Befehlsstruktur aufbauen===
	<~~source~~ lang="html">		<syntaxhighlight lang="html">
	<div data-type="select" data-items='["dummy1","dummy2","dummy3","dummy4"]' id="sendDev" class="notransmit w3x"></div>		<div data-type="select" data-items='["dummy1","dummy2","dummy3","dummy4"]' id="sendDev" class="notransmit w3x"></div>
	<div data-type="select" data-items='["STATE","warn1","warn2","webCmd","room"]' id="sendParam" class="notransmit w3x"></div>		<div data-type="select" data-items='["STATE","warn1","warn2","webCmd","room"]' id="sendParam" class="notransmit w3x"></div>
Zeile 72:		Zeile 72:
	class="notransmit w3x centered"></div>		class="notransmit w3x centered"></div>
	<div data-type="link" class="round centered" data-icon="fa-feed" data-device="#sendDev" data-set="#sendParam" data-value="#sendValue">OK</div>		<div data-type="link" class="round centered" data-icon="fa-feed" data-device="#sendDev" data-set="#sendParam" data-value="#sendValue">OK</div>
	</~~source~~>		</syntaxhighlight>
	[[File:FTUI_Widget_Input_02.png]]		[[File:FTUI_Widget_Input_02.png]]

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

Drhirn: Beispiel hinzugefügt

2017-02-11T14:23:32Z

Beispiel hinzugefügt

@@ Zeile 3: / Zeile 3: @@
 <gallery>
 File:FTUI_Widget_Input_01.png
 File:FTUI_Widget_Input_02.png
 </gallery>
@@ Zeile 42: / Zeile 43: @@
 </source>
 [[File:FTUI_Widget_Input_01.png]]
 ===Befehlsstruktur aufbauen===

Drhirn: /* Hinweise */

2017-02-09T08:21:16Z

Hinweise

← Nächstältere Version		Version vom 9. Februar 2017, 10:21 Uhr
Zeile 30:		Zeile 30:

	==Hinweise==		==Hinweise==
	'''data-device''' und '''data-get''' können Referenzen (jQuery Selektor) auf [[FTUI Widget Select\|Select Widgets]] sein, um dynamisch die Quelle derselben zu verändern~~. Siehe Beispiel [[#Befehlsstruktur aufbauen]]~~.		'''data-device''' und '''data-get''' können Referenzen (jQuery Selektor) auf [[FTUI Widget Select\|Select Widgets]] sein, um dynamisch die Quelle derselben zu verändern.

	==Beispiele==		==Beispiele==

Drhirn: Die Seite wurde neu angelegt: „Das Input Widget ist ein Widget für FHEM Tablet UI, mit dem ein Eingabefeld für Text erstellt werden kann. File:FTUI_Widget_I…“

2017-02-08T20:05:45Z

Die Seite wurde neu angelegt: „Das [[{{PAGENAME}}|Input Widget]] ist ein Widget für FHEM Tablet UI, mit dem ein Eingabefeld für Text erstellt werden kann. <gallery> File:FTUI_Widget_I…“

Neue Seite

Das [[{{PAGENAME}}|Input Widget]] ist ein Widget für [[FHEM Tablet UI]], mit dem ein Eingabefeld für Text erstellt werden kann.

<gallery>
File:FTUI_Widget_Input_01.png
File:FTUI_Widget_Input_02.png
</gallery>

==Attribute==
{|class="wikitable"
!Attribut
!Beschreibung
!Standard-Wert
!Beispiel
|-
|'''data-get'''||Reading, aus dem der angezeigte Text ausgelesen wird||||data-get="state"
|-
|'''data-set'''||Name des Readings, welches verändert werden soll||||data-set="Message"
|-
|'''data-cmd'''||Kommando, welches an FHEM gesendet werden soll (z.B. setstate, set, setreading, trigger)||set||data-cmd="setreading"
|-
|'''data-value'''||Standardwert, der angezeigt wird, wenn das Reading leer ist||||data-value="nichts da"
|}

==CSS Klassen==
{|class="wikitable"
!Klasse!!Beschreibung
{{FTUI Klasse|wider}}{{FTUI Klasse|w1x}}{{FTUI Klasse|w2x}}{{FTUI Klasse|w3x}}{{FTUI Klasse|large}}{{FTUI Klasse|big}}{{FTUI Klasse|notransmit}}
|}

==Hinweise==
'''data-device''' und '''data-get''' können Referenzen (jQuery Selektor) auf [[FTUI Widget Select|Select Widgets]] sein, um dynamisch die Quelle derselben zu verändern. Siehe Beispiel [[#Befehlsstruktur aufbauen]].

==Beispiele==
===Text an Device senden===
<source lang="html">
<div data-type="label">Wichtige Nachricht an Mitbewohner:</div>
<div data-type="input"
data-device="Dummy1"
data-get="state"
data-value="Standardtext"></div>
</source>
[[File:FTUI_Widget_Input_01.png]]

===Befehlsstruktur aufbauen===
<source lang="html">
<div data-type="select" data-items='["dummy1","dummy2","dummy3","dummy4"]' id="sendDev" class="notransmit w3x"></div>
<div data-type="select" data-items='["STATE","warn1","warn2","webCmd","room"]' id="sendParam" class="notransmit w3x"></div>
<div data-type="input"
data-device="#sendDev"
data-get="#sendParam"
id="sendValue"
data-value="127"
class="notransmit w3x centered"></div>
<div data-type="link" class="round centered" data-icon="fa-feed" data-device="#sendDev" data-set="#sendParam" data-value="#sendValue">OK</div>
</source>
[[File:FTUI_Widget_Input_02.png]]

[[Kategorie:FHEM Tablet UI]]