FTUI Widget Input: Unterschied zwischen den Versionen

Aus FHEMWiki
K (Beispiel hinzugefügt)
(Anpassung von <source>-Tags nach <syntaxhighlight>)
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]]

Version vom 26. Juli 2017, 19:57 Uhr

Das Input Widget ist ein Widget für FHEM Tablet UI, mit dem ein Eingabefeld für Text erstellt werden kann.

Attribute

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

Klasse Beschreibung
wider 15px Abstand rund um das Element
w1x Einfache fixe Breite
w2x Doppelte fixe Breite
w3x Dreifache fixe Breite
large Setzt die Größe des Elementes auf 125%
big Setzt die Größe des Elementes auf 150%
notransmit Verhindert den Versand von Befehlen an FHEM

Hinweise

data-device und data-get können Referenzen (jQuery Selektor) auf Select Widgets sein, um dynamisch die Quelle derselben zu verändern.

Beispiele

Text an Device senden

<div data-type="label">Wichtige Nachricht an Mitbewohner:</div>
<div data-type="input"
     data-device="Dummy1"
	 data-get="state"
     data-value="Standardtext"></div>

FTUI Widget Input 01.png

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).

<div class="hbox">
  <div data-type="input"
       id="sendTask"
       class="notransmit"></div>
  <div data-type="link"
       class="round"
       data-icon="fa-feed"
       data-device="MyList"
       data-set="addTask"
       data-value="#sendTask">OK</div>
 </div>

FTUI Widget Input 03.png

Befehlsstruktur aufbauen

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

FTUI Widget Input 02.png