FTUI Widget Weather: Unterschied zwischen den Versionen

Aus FHEMWiki
(Die Seite wurde neu angelegt: „{{Todo|V1.0, Bitte prüfen}} Das [[{{PAGENAME}}|Widget Weather]] wandelt Bezeichnungen von Wetterlagen in Icons um. Die Daten können durch FHEM-Module wie …“)
 
K (Verweis auf FTUI ergänzt)
Zeile 1: Zeile 1:
{{Todo|V1.0, Bitte prüfen}}
{{Todo|V1.0, Bitte prüfen}}


Das [[{{PAGENAME}}|Widget Weather]] wandelt Bezeichnungen von Wetterlagen in Icons um. Die Daten können durch FHEM-Module wie [[PROPLANTA]], [[OPENWEATHER]] und [[Weather]] bereitgestellt werden. Icon-Sets [http://www.alessioatzeni.com/meteocons/ meteocons] und [https://kleinklima.de/ kleinklima] werden mit FHEM geliefert.
Das [[{{PAGENAME}}|Widget Weather]] ist ein Widget für [[FHEM Tablet UI]], das Bezeichnungen von Wetterlagen in Icons umwandelt. Die Daten können durch FHEM-Module wie [[PROPLANTA]], [[OPENWEATHER]] und [[Weather]] bereitgestellt werden. Icon-Sets [http://www.alessioatzeni.com/meteocons/ meteocons] und [https://kleinklima.de/ kleinklima] werden mit FHEM geliefert.


<gallery>
<gallery>

Version vom 10. Februar 2017, 06:59 Uhr

Todo: V1.0, Bitte prüfen


Das Widget Weather ist ein Widget für FHEM Tablet UI, das Bezeichnungen von Wetterlagen in Icons umwandelt. Die Daten können durch FHEM-Module wie PROPLANTA, OPENWEATHER und Weather bereitgestellt werden. Icon-Sets meteocons und kleinklima werden mit FHEM geliefert.

Attribute

Attribut Beschreibung Standard-Wert Beispiel
data-device FHEM-Device, welches die Wetterdaten bereitstellt data-device="Proplanta"
data-get Reading, dessen Wettertext in ein Icon umgewandelt werden soll data-get="fc0_weatherDay"
data-imageset Bildersammlung, mit der die Wetterlagen dargestellt werden. Derzeit: meteocons oder kleinklima meteocons data-imageset="kleinklima"


CSS Klassen

Klasse Beschreibung
mini Setzt die Größe des Elementes auf 50%
tiny Setzt die Größe des Elementes auf 60%
small Setzt die Größe des Elementes auf 80%
normal Setzt die Größe des Elementes auf 100%
large Setzt die Größe des Elementes auf 125%
big Setzt die Größe des Elementes auf 150%
bigger Setzt die Größe des Elementes auf 200%
tall Setzt die Größe des Elementes auf 350%
grande Setzt die Größe des Elementes auf 600%
gigantic Setzt die Größe des Elementes auf 144px
transparent Element erscheint komplett durchscheinend (somit nicht sichtbar; opacity: 0)
half-transparent Element ist halb durchscheinend (opacity: 0.5)

Hinweise

Die über die Devices verfügbaren umfangreichen Wetterdaten liefern eine wesentlich differenziertere Beschreibung der Wetterlage, als mit diesem Widget darstellbar ist. Sinnvoll ist deshalb eine Kombination des Weather-Widgets mit FTUI_Widget_Label, ggf. auch wind_direction.

Gelegentlich wird berichtet, dass einzelne Bilder nicht optimal auf die readings abgestimmt seien. In solchen Fällen bitte im Forum posten, damit die Zuordnungen verbessert werden können.

Beispiele

Einfaches Widget

<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherDay" data-imageset="meteocons" class="cell"></div>
<div data-type="label" data-device="Proplanta" data-get="fc0_weatherDay" class="cell"></div>
<div data-type="label" data-device="Proplanta" data-get="fc0_tempMin" data-unit="%B0C%0A" class="cell inline"></div>
<div data-type="label" data-device="Proplanta" data-get="fc0_tempMax" data-unit="%B0C%0A" class="cell inline"></div>

FTUI Widget Weather 03.png


Komplexe Anwendung

<li data-row="1" data-col="1" data-sizex="4" data-sizey="4">
<div class="sheet">
<div class="row">		
<div class="col-1-3">
<div data-type="label" class="cell top-space narrow">morgens</div>
<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherMorningIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="Proplanta" data-get="fc0_weatherMorning" class="cell top-narrow"></div>
<div data-type="label" data-device="Proplanta" data-get="fc0_temp06" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
</div>

<div class="col-1-3">
<div data-type="label" class="cell top-space narrow">mittags</div>
<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherDayIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="Proplanta" data-get="fc0_weatherDay" class="cell top-narrow"></div>
<div data-type="label" data-device="Proplanta" data-get="fc0_temp12" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
</div>

<div class="col-1-3">
<div data-type="label" class="cell top-space narrow">abends</div>
<div data-type="weather" data-device="Proplanta" data-get="fc0_weatherEveningIcon" data-imageset="kleinklima" class="cell"></div>
<div data-type="label" data-device="Proplanta" data-get="fc0_weatherEvening" class="cell top-narrow"></div>
<div data-type="label" data-device="Proplanta" data-get="fc0_temp18" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#5858FA","white"]'></div>
</div>
</div>

</div>

<div class="container top-space-3x">
<div data-type="label" class="cell bigger darker">Morgen</div>
</div>

<div class="sheet">
<div class="row">		

<div class="col-1-3">
<div data-type="label" class="cell top-space darker">morgens</div>
<div data-type="weather" data-device="Proplanta" data-get="fc1_weatherMorningIcon" data-imageset="kleinklima" class="cell half-transparent"></div>
<div data-type="label" data-device=”Proplanta" data-get="fc1_weatherMorning" class="cell top-narrow darker"></div>
<div data-type="label" data-device="Proplanta" data-get="fc1_temp06" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#a3a3fc","grey"]'></div>
</div>

<div class="col-1-3">
<div data-type="label" class="cell top-space darker">mittags</div>
<div data-type="weather" data-device="Proplanta" data-get="fc1_weatherDayIcon" data-imageset="kleinklima" class="cell half-transparent"></div>
<div data-type="label" data-device="Proplanta" data-get="fc1_weatherDay" class="cell top-narrow darker"></div>
<div data-type="label" data-device="Proplanta" data-get="fc1_temp12" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#a3a3fc","grey"]'></div>
</div>

<div class="col-1-3">
<div data-type="label" class="cell top-space darker">abends</div>
<div data-type="weather" data-device="Proplanta" data-get="fc1_weatherEveningIcon" data-imageset="kleinklima" class="cell half-transparent"></div>
<div data-type="label" data-device="Proplanta" data-get="fc1_weatherEvening" class="cell top-narrow darker"></div>
<div data-type="label" data-device="Proplanta" data-get="fc1_temp18" data-unit="%B0C%0A" class="cell bigger" data-limits='[-50,0]' data-colors='["#a3a3fc","grey"]'></div>
</div>

</div>
</div>

</li>

FTUI Widget Weather 04.png