FTUI Widget Rotor

Das Rotor Widget ist ein Widget für FHEM Tablet UI, welches mehrere Widgets an der selben Stelle nacheinander anzeigen kann. Der Wechsel vom einen zum anderen Widget erfolgt durch konfigurierbare Effekte (z.B. Überblendung)

• 
• 

Attribute

Attribut	Beschreibung	Standard-Wert	Beispiel
data-delay	Zeit - in Millisekunden - bis das nächste Element in der Liste angezeigt wird	3500	data-delay="1000"

Hinweise

• Wird keine Klasse angegeben, die den Animationseffekt beschreibt (class=""), wird auch keine Animation verwendet

CSS Klassen

Klasse	Beschreibung
rotate	Vertikaler Rotationseffekt
fade	Element wird aus-, das nächste in der Liste eingeblendet

Beispiele

Wechsel zwischen zwei verschiedenen Labels

In diesem Beispiel wird einfach zwischen zwei verschiedenen Labels mit einem Überblendungseffekt umgeschalten.

<div data-type="rotor" class="fade">
  <ul>
    <li>
      <div data-type="label">Label 1</div>
    </li>
    <li>
      <div data-type="label">Label 2</div>
    </li>
  </ul>
</div>

Umschalten zwischen Tagen eines Wetterberichts

<div data-type="rotor" class="fade">
  <ul>
    <li>
      <div data-type="label">Heute</div>
      <div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay"></div>
      <div data-type="label" data-device="AgroWeather" data-get="fc0_weatherDay"></div>
      <div data-type="label" data-device="AgroWeather" data-get="fc0_tempMax"></div>
    </li>
    <li>
      <div data-type="label">Morgen</div>
      <div data-type="weather" data-device="AgroWeather" data-get="fc1_weatherDay"></div>
      <div data-type="label" data-device="AgroWeather" data-get="fc1_weatherDay"></div>
      <div data-type="label" data-device="AgroWeather" data-get="fc1_tempMax"></div>
    </li>
  </ul>
</div>