FTUI Snippets: Unterschied zwischen den Versionen

Aus FHEMWiki
Keine Bearbeitungszusammenfassung
Zeile 14: Zeile 14:
           data-icon="fa-home" data-background-icon="fa-square" ></div>
           data-icon="fa-home" data-background-icon="fa-square" ></div>
         <div data-type="label" class="inline w1x">Home</div>
         <div data-type="label" class="inline w1x">Home</div>
    </div>
    </div>
     <div>
     <div>
         <div data-type="switch" data-device="dummy1"
         <div data-type="switch" data-device="dummy1"
Zeile 21: Zeile 21:
           data-icon="fa-bed" data-background-icon="fa-square" ></div>
           data-icon="fa-bed" data-background-icon="fa-square" ></div>
         <div data-type="label" class="inline w1x">Night</div>
         <div data-type="label" class="inline w1x">Night</div>
    </div>
    </div>
     <div>
     <div>
         <div data-type="switch" data-device="dummy1"
         <div data-type="switch" data-device="dummy1"
Zeile 28: Zeile 28:
           data-icon="fa-car" data-background-icon="fa-square" ></div>
           data-icon="fa-car" data-background-icon="fa-square" ></div>
         <div data-type="label" class="inline w1x">Away</div>
         <div data-type="label" class="inline w1x">Away</div>
    </div>
    </div>
    <div>
    <div>
        <div data-type="switch" data-device="dummy1"
        <div data-type="switch" data-device="dummy1"
          data-get-on="Wert4" data-get-off="!on"
          data-get-on="Wert4" data-get-off="!on"
          data-set-off="" class="red"
          data-set-off="" class="red"
          data-icon="fa-suitcase" data-background-icon="fa-square" ></div>
          data-icon="fa-suitcase" data-background-icon="fa-square" ></div>
        <div data-type="label" class="inline w1x">Holiday</div>
        <div data-type="label" class="inline w1x">Holiday</div>
      </div>
    </div>
</li>
</li>
</source>
</source>

Version vom 8. August 2016, 19:58 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="!on"
     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="!on"
     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>