[FTUI 2] - Weather_Widget für Wettericons

[somansch]

Nachdem es leider keinen Maintainer für das bisheriger "weather_widget" mehr gibt und die Veränderungen bzgl. Verfügbarkeit der Wetterdienste sehr umfassend sind, habe ich mich entschlossen, das bisherige Widget zu aktualisieren und zu vereinfachen!

• API für "Yahoo" geht nicht mehr
• API für "Wunderground" ist eingestellt (seit April 2019 ausschliesslich für Besitzer einer Wetterstation mit neuer API)
• Wetter-Modul wurde von @CoolTux für "DarkSky" und "OpenWeather" umgestellt https://forum.fhem.de/index.php/topic,95823.0.html
• Wetter-Modul wurde von @Loredo für "Wunderground" erweitert https://forum.fhem.de/index.php/topic,59646.msg931682.html#msg931682
• neues Wetter-Modul für "DWD Open Data" (Deutscher Wetterdienst) von @jensb https://forum.fhem.de/index.php/topic,83097.0.html

Vorweg: Ich bin kein Entwickler, habe lediglich den bestehenden Code nach meinen Anforderungen vereinfacht 

Der bisherige Code basierte auf Übersetzungen und war somit sprachabhängig, fehleranfällig und kompliziert. Folgende Änderungen sind in der neuen Version umgesetzt:

• sprachunabhängig
• basierend auf Icon-Beschreibungen der Wetterdienste
• Halbierung des Codes mit besserer Verständlichkeit
• erweiterbar mit weiteren Wetterdiensten und Icons
• aktuelle Unterstützung des Weather-Moduls (DarkSky, OpenWeather und Wunderground), ProPlanta, DWD Open Data, Netatmo und Visualcrossing
• aktuell vier Icon-Sets unterstützt: kleinklima, meteocons, weathericons, animierte Icons von amcharts und neue animierte Icons von bas

Das Mappen der entsprechenden Icons zu den entsprechenden Wetterdienst-Stati ist hierbei die größte Herausforderung:

• DarkSky liefert 12 Zustände (minimale Unterscheidung zw. Tag und Nacht)
• Visualcrossing liefert 16 Zustände (volle Unterscheidung zw. Tag und Nacht)
• OpenWeather liefert 16 Zustände (volle Unterscheidung zw. Tag und Nacht)
• Wunderground liefert 47 Zustände (volle Unterscheidung zw. Tag und Nacht)
• ProPlanta liefert 28 Zustände (volle Unterscheidung zw. Tag und Nacht)
• DWD liefert 100 Zustände!!! (volle Unterscheidung zw. Tag und Nacht - "SunUp" muss definiert sein)
• Netatmo liefert 230 Zustände!!! (volle Unterscheidung zw. Tag und Nacht)

Dagegen stehen dann die Icon-Sets, welche ebenfalls unterschiedlich in der Granularität der Anzeige sind. Daraus resultieren im Moment ca. 2100 Mappings!!! Im Anhang findet ihr die Mapping-Übersicht (Icon Mapping.pdf), um einen Eindruck zu bekommen und evtl. Verbesserungen vorzuschlagen.

Für die Tests habe ich mir 4 Dummy-Devices mit den entsprechenden Zuständen definiert und dann sämtliche Varianten in einer Webseite zusammengefasst (siehe weather_widget_overview.png im Anhang).

Attribute:
data-device (FHEM-Device, welches die Wetterdaten bereitstellt)
data-get (WICHTIG:
Weather-Modul DarkSky, OpenWeather und Wunderground "fcx_iconAPI" oder "hfcx_iconAPI"
ProPlanta "fcx_weatherxxIcon" (d.h. ein bisheriges Reading ohne "Icon" muss geändert werden!)
DWD "fcx_x_ww"
Netatmo "fcx_symbol_x"
Visualcrossing "days_xx_hours_xx_icon"
data-imageset ("kleinklima", "meteocons", "weathericons", "amcharts" oder "bas")
data-device-type ("WindDirection" wie bisher - funktioniert ausschliesslich mit data-imageset="weathericons"!)

Die animierten Icons von amCharts könnt ihr auf https://www.amcharts.com/free-animated-svg-weather-icons/ sehen. Die neuen animierten Icons von bas könnt ihr auf https://bas.dev/projects/weather-icons oder im Wiki-Beitrag anschauen: https://wiki.fhem.de/wiki/FTUI_Widget_Weather. Bis auf die neuen "bas" Icons werden alle anderen Icons per FHEM Update verteilt. Falls dies bei euch nicht funktioniert, könnt ihr einfach den Inhalt der "weather.zip" (im Anhang) in den Ordner "/opt/fhem/www/images/default/weather" kopieren. Falls ihr nur zusätzlich die "bas" Icons braucht, könnt ihr den Inhalt von "bas_animated_icons.zip" in den existierenden Ordner kopieren.

Im Anhang eine Übersicht über alle Icons ("weather_widget_overview.png", "amCharts-overview_custom.gif" und "bas-overview_custom.gif").

Zum Testen könnt ihr die "widget_weather.js" nach fhem/www/tablet/js kopieren. Bei Problemen, einfach ein Update in FHEM machen, dann bekommt ihr die Version v3.1 wieder.


PS: Ich werde neue Versionen immer in diesem ersten Post aktualisieren!

Viele Grüße
Andreas


v2.1 vom 06.02.2019
- hinzugefügt 10d und 10n für OpenWeather
- hinzugefügt "amCharts" animierte Wetter-Icons

v2.2 vom 07.02.2019
- gefixt: Größenklassen "amCharts"

v2.3 vom 11.02.2019
- gefixt: Icon für aktuelles Wetter bei ProPlanta

v2.4 vom 11.02.2019
- gefixt: "kleinklima" Namen an Standardinhalt des images-Verzeichnis angepasst

v2.5 vom 17.02.2019
- hinzugefügt: Tag/Nacht Unterscheidung für "DWD" (Dank auch an sinus61)

v2.6 vom 19.02.2019
- optimiert: Tag/Nacht Unterscheidung für "DWD" (Dank auch an Knallkopp_02)
- hinzugefügt: zusätzliche "amcharts" Icons mit Mappings (sind in "weather.zip" bereits enthalten)

v2.7 vom 05.03.2019
- optimiert: Tag/Nacht Unterscheidung für "DWD" (Dank auch an Knallkopp_02) - gibt jetzt ein Reading bei DWD "SunUp", dieses muß noch im DWD Modul aktiviert werden über das Hinzufügen im Attribut "forecastProperties"
- hinzugefügt: Unterstützung von "WindDirection" aus dem Orginal Widget - somit abwärts kompatibel!

v2.8 vom 14.03.2019
- optimiert: Tag/Nacht Unterscheidung für "DWD" mit Fallback zu "d" falls SunUp nicht definiert ist
- hinzugefügt: Netatmo Mapping für "amcharts"
- hinzugefügt: "amcharts" Icon "windy.svg" mit Mapping (ist in der weather.zip enthalten)
- hinzugefügt: DWD Mappings für 68,69,83,84,89,90,97

v2.9 vom 18.03.2019
- hinzugefügt: Netatmo Mapping für "kleinklima"

v3.0 vom 04.05.2019
- hinzugefügt: Netatmo Mapping für "weathericons" und "meteocons"
- hinzugefügt: Wunderground Mapping für sämtliche Icon-Sets

v3.1 vom 05.05.2019 - wird seit 05.06.2019 per FHEM update verteilt
- gefixt: kleinklima Mapping für "n14"

v3.2 vom 12.12.2019
- hinzugefügt: unabhängige Größendefinition des Warn-Icons möglich (siehe Ergänzung im Wiki)

v3.3 vom 03.05.2020
- gefixt: Proplanta Mapping mit größerem Forcast (>7 Tage)

v3.4 vom 04.12.2020
- gefixt: Proplanta Mapping für n10/t10 (Schnee) und n11/t11 (Schneeregen)

v4.0 vom 12.01.2021
- hinzugefügt: zusätzliche animierte "bas" Icons mit Mappings (sind in "weather.zip" enthalten bzw. separat in "bas_animated_icons.zip")

v4.1 vom 30.03.2021
- hinzugefügt: weitere animierte "bas" Icons mit Mapping für Proplanta (sind in "weather.zip" enthalten bzw. separat in "bas_animated_icons.zip")

v4.2 vom 19.12.2021
- hinzugefügt: Unterstützung für Wetterdienst "Visualcrossing" incl. iconset2 (siehe https://www.visualcrossing.com/resources/documentation/weather-api/defining-icon-set-in-the-weather-api/

v4.3 vom 25.06.2022
- gefixt: Netatmo Mapping für 130000 und 230000

[setstate]

Das klingt schon mal alles sehr gut. Am besten gefällt mir: Halbierung des Codes mit besserer Verständlichkeit

Ich habe mir das .js mal runtergeladen und mein aktuelle Widget ersetzt. Ergebnis: die Wetter Icons werden bei mir nicht mehr angezeigt. Ich benutze PROPLANTA. Da muss ich mal überprüfen, woran das liegt.

Code Auswählen Erweitern

<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="big"></div>

Aber erst einmal - vielen Dank.

Edit:
- data-imageset hat kein default
- meine aktuellen PROPLANTA Werte werden nicht gemappt:'heiter', 'wolkig', 'stark bewölkt'usw.

[esk]

Hi somansch,

darksky sieht gut aus. Danke.

esk

[somansch]

Das klingt schon mal alles sehr gut. Am besten gefällt mir: Halbierung des Codes mit besserer Verständlichkeit

Ich habe mir das .js mal runtergeladen und mein aktuelle Widget ersetzt. Ergebnis: die Wetter Icons werden bei mir nicht mehr angezeigt. Ich benutze PROPLANTA. Da muss ich mal überprüfen, woran das liegt.

Code Auswählen Erweitern

<div data-type="weather" data-device="AgroWeather" data-get="fc0_weatherDay" class="big"></div>

Aber erst einmal - vielen Dank.

Edit:
- data-imageset hat kein default
- meine aktuellen PROPLANTA Werte werden nicht gemappt:'heiter', 'wolkig', 'stark bewölkt'usw.

Hallo setstate,

super, dass du dich hier gleich mal einklinkst  .

Bezüglich Definition bei ProPlanta, muss ein anderes Reading verwendet werden: statt "fc0_weatherDay" muss es jetzt "fc0_weatherDayIcon" sein. Dies ist notwendig, da keine umfangreiche Übersetzungen der Texte des Wetterzustands sprachabhängig gepflegt werden müssen. Ich werde es nochmal besser hervorheben im ersten Post.

Bezüglich eines defaults für "data-imageset" war bisher nichts im Modul. Wenn du mir kurz den Code für solch ein Default gibst, nehme ich es gerne auf. Bin leider kein Entwickler  .

Viele Grüße
Andreas

[Otto]

Hi,

ich nutze Dark Sky und bei der condition steht "Leicht bewölkt" und als iconAPI steht "partly-cloudy-night"

Übersetzt wird durch die widget_weather.js in "wi wi-day-sunny"

Finde ich irgendwie blöd, steht zwar so in der FAQ, aber verwirrt

Code Auswählen Erweitern

'partly-cloudy-night': 'wi wi-day-sunny', // nicht "wi wi-partly-cloudy-night", siehe DarkSky API FAQ: https://darksky.net/dev/docs/faq

[somansch]

Hi,

ich nutze Dark Sky und bei der condition steht "Leicht bewölkt" und als iconAPI steht "partly-cloudy-night"

Übersetzt wird durch die widget_weather.js in "wi wi-day-sunny"

Finde ich irgendwie blöd, steht zwar so in der FAQ, aber verwirrt

Code Auswählen Erweitern

'partly-cloudy-night': 'wi wi-day-sunny', // nicht "wi wi-partly-cloudy-night", siehe DarkSky API FAQ: https://darksky.net/dev/docs/faq

Hallo Otto,
ja, das finde ich auch nicht optimal. Leider wird dieses Reading so von DarkSky befüllt. Eine Anzeige eines "Leicht Bewölkt" Symbols mit Mond wäre sicher noch verwirrender in der Tagesvorschau  . Das Reading des Wetterzustands bringt auch nichts, hier sehe ich folgende Nachteile:

• keine Unterscheidung zwischen Tag und Nacht
• unzählige Varianten - wirf mal einen Blick in die Tabelle am Beispiel DWD
• unzählige Schreibweisen ö vs. oe vs. ö
• was ist mit anderen Sprachen?
• zusammengefasst: zu unflexibel, zu fehleranfällig und zu pflegeaufwändig

Meiner Meinung nach wäre die perfekte Lösung, DWD mit seinen 100 Zuständen zu nutzen. Leider fehlt dort die Unterscheidung zwischen Tag und Nacht . Dies könnte man jedoch evtl. mit einem user-reading im DWD lösen, welches dann z.B. statt "45", "45d" als Reading generiert, wenn fcx_time eine Tageszeit ist.

Besser noch, der Modul Maintainer setzt dieses zusätzliche Reading.

Viele Grüße
Andreas

[Knallkopp_02]

ich klinke mich hier auch mal mit ein, da ich auch noch immer an der Darstellung/Umsetzung arbeite.

Finde deinen Grundgedanken nicht schlecht, alles zu vereinfachen. Die Idee alles mit Zahlen zu machen ist gut, da es dadurch keine Probleme mehr mit den Sprachen geht. "Einfach" 100 Grafiken für die Zustände zu machen wäre gut.

Ich hätte zum Thema Tag/Nacht sowie der Umsetzung mit den 100 DWD Wertten einen Vorschlag.
Ich habe vor langer langer Zeit ein Programm namens Samurize benutzt und war darüber an einen Grafiker gekommen, der damals Grafiken für das Weather Widget für Samurize gemacht hat. Wie wäre es Ihn anzuschreiben, ob er noch aktiv ist, und ob er evtl seine Grafiken für diese Bedürfnisse anpasst/erweitert. Eswäre gut wenn das jemand "offizielles" von Fhem macht, damit es Gewichtung bekommt.
So hätten wir schanmal eine größere Auswahl an Grafiken.

Das waren die damaligen Grafiken https://www.deviantart.com/jyrik/art/Weather-Icons-Shiny-5215175

Mit der Tag/Nacht Geschichte hatte ich dir ja vor einger Zeit mal meine Umsetzung zukommen lassen.

Frage an alle die irgendeinen Wetteranbieter nutzen, gibt es bei allen eine Wert für die Uhrzeit bei den Reading, bei DWD weiß ich es, da gibt es einen, der TIME heißt. Könnte man daraus irgendwie was generieren, das habe ich noch nicht getestet, aktuell generiere ich das aus der Nummer des Readings (0-7), was auch super klappt.

Hier mal ein Datensatz, den DWD generiert, damit man mal vergleichen kann, was man überhaupt bekommt

Code Auswählen Erweitern


fc0_0_DD         174
fc0_0_FF          7
fc0_0_FX1       13
fc0_0_Neff       69
fc0_0_RR6c      0.00
fc0_0_TTT        0
fc0_0_time       01:00
fc0_0_ww        2
fc0_0_wwP      1.00
fc0_0_wwd      Bewölkung unverändert


Gruß

[somansch]

Mit der Tag/Nacht Geschichte hatte ich dir ja vor einger Zeit mal meine Umsetzung zukommen lassen.

Frage an alle die irgendeinen Wetteranbieter nutzen, gibt es bei allen eine Wert für die Uhrzeit bei den Reading, bei DWD weiß ich es, da gibt es einen, der TIME heißt. Könnte man daraus irgendwie was generieren, das habe ich noch nicht getestet, aktuell generiere ich das aus der Nummer des Readings (0-7), was auch super klappt.

Kannst du das nochmal posten?

[somansch]

Neue animierte Wetter-Icons experimentell verfügbar  .

Siehe Aktualisierung im ersten Post.

Viel Spaß damit
Andreas

[Knallkopp_02]

Habe Dir eine PM zukommen lassen.

[remo]

Vielen Dank für eure tolle Arbeit!
Sieht echt klasse aus!

Eine Skalierung der animierten Icons wäre jetzt noch super.
Ich habe auch etwas getestet, aber größer als Standard habe ich es leider auch nicht hinbekommen...

[somansch]

Vielen Dank für eure tolle Arbeit!
Sieht echt klasse aus!

Eine Skalierung der animierten Icons wäre jetzt noch super.
Ich habe auch etwas getestet, aber größer als Standard habe ich es leider auch nicht hinbekommen...

Danke für die Blumen. Ich hoffe, dass sich @setstate diesbezüglich noch einbringt. Ich versuche gerade zu verstehen, wie man am besten mit SVG-Dateien umgeht. Im Moment sind sie einfach als Bild mit image-Tag eingebunden....

[somansch]

Vielen Dank für eure tolle Arbeit!
Sieht echt klasse aus!

Eine Skalierung der animierten Icons wäre jetzt noch super.
Ich habe auch etwas getestet, aber größer als Standard habe ich es leider auch nicht hinbekommen...

Habe das Problem jetzt gefixt. Man kann ganz normal mit den bekannten Klassen die Größe anpassen. Neue Version im ersten Post bereitgestellt.

[Otto]

Hi somansch,

sieht gut aus.

OT: Eine Frage frage zum Layout. Was bedeuten die Pfeile bei der gefühlten Temp ? Und wie machst du das? UN wie hast du die deutschen Wochentage hinbekommen.

[remo]

Ich steh auf dem Schlauch.
Gestern habe ich die amcharts-Icons nicht groß bekommen,
heute mit der neuen JS bekomme ich sie nicht klein

Code Auswählen Erweitern

<div class="small" data-device="WetterdatenDarkSky" data-get="fc1_iconAPI" data-type="weather" data-imageset="amcharts"></div>