FTUI Snippets: Unterschied zwischen den Versionen

Aus FHEMWiki
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 43: Zeile 43:


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


Zeile 68: Zeile 66:


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



Version vom 30. Juli 2016, 23:42 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

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