FTUI Widget Rotor: Unterschied zwischen den Versionen
Drhirn (Diskussion | Beiträge) K (Bilder korrigiert) |
(Anpassung von <source>-Tags nach <syntaxhighlight>) |
||
| Zeile 26: | Zeile 26: | ||
===Wechsel zwischen zwei verschiedenen Labels=== | ===Wechsel zwischen zwei verschiedenen Labels=== | ||
In diesem Beispiel wird einfach zwischen zwei verschiedenen Labels mit einem Überblendungseffekt umgeschaltet. | In diesem Beispiel wird einfach zwischen zwei verschiedenen Labels mit einem Überblendungseffekt umgeschaltet. | ||
< | <syntaxhighlight lang="html"> | ||
<div data-type="rotor" class="fade"> | <div data-type="rotor" class="fade"> | ||
<ul> | <ul> | ||
| Zeile 37: | Zeile 37: | ||
</ul> | </ul> | ||
</div> | </div> | ||
</ | </syntaxhighlight> | ||
[[File:FTUI_Widget_Rotor_01.gif]] | [[File:FTUI_Widget_Rotor_01.gif]] | ||
===Umschalten zwischen Tagen eines Wetterberichts=== | ===Umschalten zwischen Tagen eines Wetterberichts=== | ||
< | <syntaxhighlight lang="html"> | ||
<div data-type="rotor" class="fade"> | <div data-type="rotor" class="fade"> | ||
<ul> | <ul> | ||
| Zeile 57: | Zeile 57: | ||
</li> | </li> | ||
</ul> | </ul> | ||
</div></ | </div></syntaxhighlight> | ||
[[File:FTUI_Widget_Rotor_02.gif]] | [[File:FTUI_Widget_Rotor_02.gif]] | ||
[[Kategorie:FHEM Tablet UI]] | [[Kategorie:FHEM Tablet UI]] | ||
Version vom 26. Juli 2017, 19:57 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>
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>