FTUI Widget Rotor: Unterschied zwischen den Versionen

Aus FHEMWiki
K (Typo)
Zeile 1: Zeile 1:
Das [[{{PAGENAME}}|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)
Das [[{{PAGENAME}}|Rotor Widget]] ist ein Widget für [[FHEM Tablet UI]], welches mehrere Widgets an derselben Stelle nacheinander anzeigen kann. Der Wechsel vom einen zum anderen Widget erfolgt durch konfigurierbare Effekte (z.B. Überblendung).


<gallery>
<gallery>
Zeile 27: Zeile 27:
==Beispiele==
==Beispiele==
===Wechsel zwischen zwei verschiedenen Labels===
===Wechsel zwischen zwei verschiedenen Labels===
In diesem Beispiel wird einfach zwischen zwei verschiedenen Labels mit einem Überblendungseffekt umgeschalten.
In diesem Beispiel wird einfach zwischen zwei verschiedenen Labels mit einem Überblendungseffekt umgeschaltet.
<source lang="html">
<source lang="html">
<div data-type="rotor" class="fade">
<div data-type="rotor" class="fade">

Version vom 13. Februar 2017, 22:59 Uhr

Das Rotor Widget ist ein Widget für FHEM Tablet UI, welches mehrere Widgets an derselben 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 umgeschaltet.

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

FTUI Widget Rotor 01.gif

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>

FTUI Widget Rotor 02.gif