FTUI Widget Weather: Unterschied zwischen den Versionen

Aus FHEMWiki
(Anpassung von <source>-Tags nach <syntaxhighlight>)
(→‎Attribute: Attribut ''data-warn'' hinzugefügt)
Zeile 15: Zeile 15:
|-
|-
|'''data-get'''||Reading, dessen Wettertext in ein Icon umgewandelt werden soll||||data-get="fc0_weatherDay"
|'''data-get'''||Reading, dessen Wettertext in ein Icon umgewandelt werden soll||||data-get="fc0_weatherDay"
|-
|'''data-warn'''||Reading, dessen Inhalt als rotes Kennzeichen angezeigt wird.||||
|-
|-
|'''data-imageset'''||Bildersammlung, mit der die Wetterlagen dargestellt werden. Derzeit: [http://www.alessioatzeni.com/meteocons/ meteocons], [https://kleinklima.de/ kleinklima] und [https://erikflowers.github.io/weather-icons/ weathericons]||meteocons||data-imageset="kleinklima"
|'''data-imageset'''||Bildersammlung, mit der die Wetterlagen dargestellt werden. Derzeit: [http://www.alessioatzeni.com/meteocons/ meteocons], [https://kleinklima.de/ kleinklima] und [https://erikflowers.github.io/weather-icons/ weathericons]||meteocons||data-imageset="kleinklima"

Version vom 28. Oktober 2017, 17:47 Uhr

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.

  • FTUI Widget Weather 01.png
  • FTUI Widget Weather 02.png

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-warn Reading, dessen Inhalt als rotes Kennzeichen angezeigt wird.
data-imageset Bildersammlung, mit der die Wetterlagen dargestellt werden. Derzeit: meteocons, kleinklima und weathericons meteocons data-imageset="kleinklima"
Für data-imageset="weathericons" zusätzlich
data-device-type "YahooCode" oder "WindDirection" (Wert in Grad) data-device-type="WindDirection"

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

Um auf hellen Hintergründen meteocons-Icons besser erkennbar darzustellen, kann ein Webkit-Filter verwendet werden. Statt wie hier direkt im HTML, kann der Filter auch in einer eigenen CSS-Datei definiert werden. 

<div class="cell big" data-type="weather" data-device="Wetter" data-get="condition" data-imageset="meteocons" style="-webkit-filter: sepia(100%); filter: sepia(100%);"></div>

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 Symbol mit Min- und Max-Temperatur

FTUI Widget Weather 03.png 

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

Detaillierte Wetteranzeige mit Vorhersage für den Folgetag

FTUI Widget Weather 04.png

index.html 
<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>
Abgerufen von „http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Weather&oldid=23081“