FTUI Snippets: Unterschied zwischen den Versionen

Aus FHEMWiki
Keine Bearbeitungszusammenfassung
K (Überschriftlevel angepasst; Beispielcode auf "source" Formatierung umgestellt; Bilder auf "float right" umgestellt)
Zeile 1: Zeile 1:


= Spezialfälle für Switch Widget =
== Spezialfälle für Switch Widget ==


==Vier Buttons für HomeStatus==
=== Vier Buttons für HomeStatus ===
[[Datei:Ftui_homestatus_buttons.png|mini|rechts]]


[[Datei:Ftui_homestatus_buttons.png]]
<source lang="html4strict">
 
<pre>
<li data-row="1" data-col="9" data-sizex="2" data-sizey="3">
<li data-row="1" data-col="9" data-sizex="2" data-sizey="3">
     <header>HOMESTATUS</header>
     <header>HOMESTATUS</header>
Zeile 38: Zeile 37:
       </div>
       </div>
</li>
</li>
</pre>
</source>
 
==Switch funktioniert wie ein Push Widget, aber zeigt auch Status an, wie ein Symbol Widget==
 
[[Datei:FTUI_Taster-mit-Switch.png]]


<pre>
=== Switch funktioniert wie ein Push Widget, aber zeigt auch Status an, wie ein Symbol Widget ===
[[Datei:FTUI_Taster-mit-Switch.png|mini|rechts]]
<source lang="html4strict">
<div data-type="switch" data-device="dummy1"
<div data-type="switch" data-device="dummy1"
     data-get-on="auf"
     data-get-on="auf"
Zeile 63: Zeile 60:
     data-icon="fa-arrow-down">
     data-icon="fa-arrow-down">
</div>
</div>
</pre>
</source>


==Variante 2 (Mehrfach Auslösen möglich)==
=== Variante 2 (Mehrfach Auslösen möglich) ===
 
<source lang="html4strict">
<pre>
<div data-type="switch" data-device="dummy1"
<div data-type="switch" data-device="dummy1"
   data-states='["zu","mittel","auf"]'
   data-states='["zu","mittel","auf"]'
Zeile 80: Zeile 76:
   data-icon="fa-arrow-down">
   data-icon="fa-arrow-down">
</div>
</div>
</pre>
</source>
 
 
 


[[Kategorie:Code Snippets]]
[[Kategorie:Code Snippets]]

Version vom 31. Juli 2016, 13:20 Uhr

Spezialfälle für Switch Widget

Vier Buttons für HomeStatus

Ftui homestatus buttons.png
<li data-row="1" data-col="9" data-sizex="2" data-sizey="3">
    <header>HOMESTATUS</header>
    <div>
        <div data-type="switch" data-device="dummy1"
          data-get-on="Wert1" data-get-off="!on"
          data-set-off="" class="green"
          data-icon="fa-home" data-background-icon="fa-square" ></div>
        <div data-type="label" class="inline w1x">Home</div>
     </div>
    <div>
        <div data-type="switch" data-device="dummy1"
          data-get-on="Wert2" data-get-off="!on"
          data-set-off="" class="blue"
          data-icon="fa-bed" data-background-icon="fa-square" ></div>
        <div data-type="label" class="inline w1x">Night</div>
     </div>
    <div>
        <div data-type="switch" data-device="dummy1"
          data-get-on="Wert3" data-get-off="!on"
          data-set-off="" class="orange"
          data-icon="fa-car" data-background-icon="fa-square" ></div>
        <div data-type="label" class="inline w1x">Away</div>
     </div>
     <div>
         <div data-type="switch" data-device="dummy1"
           data-get-on="Wert4" data-get-off="!on"
           data-set-off="" class="red"
           data-icon="fa-suitcase" data-background-icon="fa-square" ></div>
         <div data-type="label" class="inline w1x">Holiday</div>
      </div>
</li>

Switch funktioniert wie ein Push Widget, aber zeigt auch Status an, wie ein Symbol Widget

FTUI Taster-mit-Switch.png
<div data-type="switch" data-device="dummy1"
     data-get-on="auf"
     data-get-off="zu"
     data-set-on="auf"
     data-set-off=""
     data-on-background-color="#ad3333"
     data-off-background-color="#32a054"
     data-icon="fa-arrow-up">
</div>
<div data-type="switch" data-device="dummy1"
     data-get-on="zu"
     data-get-off="auf"
     data-set-on="zu"
     data-set-off=""
     data-on-background-color="#ad3333"
     data-off-background-color="#32a054"
     data-icon="fa-arrow-down">
</div>

Variante 2 (Mehrfach Auslösen möglich)

<div data-type="switch" data-device="dummy1"
  data-states='["zu","mittel","auf"]'
  data-background-colors='["green", "gray", "red"]'
  data-fhem-cmd="set dummy1 auf"
  data-icon="fa-arrow-up">
</div>
<div data-type="switch" data-device="dummy1"
  data-states='["zu","mittel","auf"]'
  data-background-colors='["red", "gray", "green"]'
  data-fhem-cmd="set dummy1 zu"
  data-icon="fa-arrow-down">
</div>