[FTUI 2] - Weather_Widget für Wettericons

[Knallkopp_02]

Hallo somansch,

Habe die letzten Tage mit der Erweiterung von Jens testen können.
Habe dazu das Reading genutzt um den Tag/Nacht für die icons zu generieren, funktioniert perfekt bislang.

Habe das so umgesetzt, wie deine Änderung für Time nur mit SunUp.

[EDIT] zu früh gefreut, irgendwas stimmt bei mir noch nicht, es werden nur Nacht-Icons erstellt.

[EDIT] nun geht es wirklich, Anfängerfehler: "=", "==" und "===" ist nicht das gleiche

Gruß

[somansch]

Hi Knallkopp,

schickst du mir deine Änderung per PN, dann kommt das in die nächste Version rein.

PS: Ich habe mir inzwischen auch eine Netatmo geholt und bin schon fleißig am testen. Ich werde die "unmögliche" Herausforderung (https://forum.fhem.de/index.php/topic,53500.msg454191.html#msg454191; "Und ehe jemand fragt: Man kann kein Wettermodul draus machen...") annehmen und das Mapping für alle 4 Icon-Sets und die über 200 Zustände realisieren. Dauert halt...


Danke und Gruß
Andreas

[Ulm32b]

[...]die Unterstützung für die Windrichtung hat nur über den Yahoo Code und ausschliesslich mit den "weathericons" funktioniert. Dieses neue "Weather-Widget" soll ausschliesslich Wetterzustände in Wettericons übersetzen und dabei flexibel für neue Wetterdienste und Iconsets sein.

Wenn ich mich recht erinnere, war aber die Umsetzung der Windrichtung ziemlich simpel:
Das Windrosen-Icon wurde einfach entsprechend der Gradangabe der Windrichtung innerhalb eines Mappings (ich glaub sogar im CSS-file) gedreht. Diese Ausgabe von Gradzahlen stellen meines Wissens die meisten APIs ohnehin zur Verfügung, oder?

eine interessante Diskussion. Eventuell nehme ich die Darstellung der Windrichtung wieder rein. Geht jedoch ausschliesslich mit "weathericons"!

Die Situation ist allein von den Begrifflichkeiten her bereits jetzt etwas unübersichtlich: "WindDirection" ist einerseits ein eigenständiges Widget (das mit der Windrose) ohne Maintenance, andererseits eine Ausprägung des Attributes "data-device-type" in "Weather", welches die Darstellung der Windrichtung (den Windvektor) erzeugt.

Ich sehe folgende Optionen:

• Ist-Zustand: Es gibt zwei verschiedene Weather-Widgets unter gleichem Namen: Das offzielle (per Update verbreitete) und das in diesem Thread bereitgestellte (mit oder ohne "WindDirection").
• Das neue "Weather" wird ohne "WindDirection" zur offziellen Version heraufgestuft.
• "Weather" wird abwärtskompatibel ausgerüstet (indem "WindDirection" integriert wird) und zur offziellen Version heraufgestuft.
• Der Windvektor wird als zweite Darstellungsoption in "WindDirection" integriert (quasi "WindDirection"in "WindDirection") und entfällt in "Weather".

Meine Einschätzung:

zu 1. Führt zwangsläufig zu Missverständnissen. Auch bei anderen Widgets (wdtimer, chart) gibt es diese m.E. suboptimale Konstellation.
zu 2. Würde manchen Blutdruck ansteigen lassen.
zu 3. Keine Probleme zu erwarten, aber nicht so systematisch wie 4.
zu 4. Saubere Trennung zwischen Visualisierung der Wetterlage "weather" und Windrichtung "WindDirection" (letzteres in zwei Varianten, die man "wind-rose" und "wind-vector" nennen könnte). Betroffene müssten ihren Code ändern. Nachzügler melden sich noch mindestens bis zum Herbst (vgl. die data-on-color-Story).

In die engere Wahl würde ich 3 und 4 nehmen.

[somansch]

Die Situation ist allein von den Begrifflichkeiten her bereits jetzt etwas unübersichtlich: "WindDirection" ist einerseits ein eigenständiges Widget (das mit der Windrose) ohne Maintenance, andererseits eine Ausprägung des Attributes "data-device-type" in "Weather", welches die Darstellung der Windrichtung (den Windvektor) erzeugt.

Ich sehe folgende Optionen:

• Ist-Zustand: Es gibt zwei verschiedene Weather-Widgets unter gleichem Namen: Das offzielle (per Update verbreitete) und das in diesem Thread bereitgestellte (mit oder ohne "WindDirection").
• Das neue "Weather" wird ohne "WindDirection" zur offziellen Version heraufgestuft.
• "Weather" wird abwärtskompatibel ausgerüstet (indem "WindDirection" integriert wird) und zur offziellen Version heraufgestuft.
• Der Windvektor wird als zweite Darstellungsoption in "WindDirection" integriert (quasi "WindDirection"in "WindDirection") und entfällt in "Weather".

Meine Einschätzung:

zu 1. Führt zwangsläufig zu Missverständnissen. Auch bei anderen Widgets (wdtimer, chart) gibt es diese m.E. suboptimale Konstellation.
zu 2. Würde manchen Blutdruck ansteigen lassen.
zu 3. Keine Probleme zu erwarten, aber nicht so systematisch wie 4.
zu 4. Saubere Trennung zwischen Visualisierung der Wetterlage "weather" und Windrichtung "WindDirection" (letzteres in zwei Varianten, die man "wind-rose" und "wind-vector" nennen könnte). Betroffene müssten ihren Code ändern. Nachzügler melden sich noch mindestens bis zum Herbst (vgl. die data-on-color-Story).

In die engere Wahl würde ich 3 und 4 nehmen.

Ich habe mich für Variante 3 entschieden  , da Variante 4 noch mehr Verwirrung erzeugt und auch jemand dort erstmal diese Funktion integrieren muß...

Im ersten Post gibt es die v2.7, welche wieder die "WindDirection" unterstützt, also abwärtskompatibel! Ebenso wurde die Tag/Nacht Unterscheidung für DWD verbessert, da dort jetzt ein Reading "SunUp" existiert, welches an Hand vom Sonnenstand die Unterscheidung trifft (danke an Knallkopp_02 für die Zuarbeit!).

Viele Grüße
Andreas

[sinus61]

Mir war bisher nichtmal aufgefallen, dass das Weather Widget auch die Windrichtung darstellen kann/konnte

Aber es gibt ja das WindDirection Widget, was ja funktioniert und eine andere Windrose lässt sich wie im verlinkten Thread auch ohne Widget darstellen. Wenn man das WindDirection Widget erweitert sollte dann aber auch ohne externes Iconset funktioniert und die Darstellung wirklich gezeichnet werden.

[somansch]

So, nach unzähligen Stunden hier die erste Version für Netatmo! Diese beinhaltet erstmal "nur" die 230 Mappings für die "amcharts". So kann dann das Ergebnis für die Wochenvorschau aussehen  .

Ist noch keine v2.8, daher auch noch nicht im ersten Post angehängt. Bitte um Feedback.

Vom Netamo Forecast Device einfach die Readings: "symbol", "fcx_symbol_day" oder "fcx_symbol_night" nutzen, z.B.:

Code Auswählen Erweitern

<div class="small readonly" data-type="weather" data-device="netatmo_forecast" data-get="fc0_symbol_day" data-imageset="amcharts"></div>

Viel Spaß beim Testen!

Viele Grüße
Andreas

[Helmi55]

Herzlichen Dank für die tolle Arbeit.
Hab es jetzt umgesetzt - allerdings wird bei fc1_symbol_day das icon nicht angezeigt ist ein 110000 Icon - es ist in der weather.js aber enthalten?? Auch das 210000 Nacht Icon funkt nicht

Code Auswählen Erweitern

<div class="sheet">
                    <div class="row">
                        <div class="cell-20">
                        <div data-type="label" data-device="netatmo_forecast" data-get="fc0_sunrise" data-part="2" data-pre-text="SR  " class="cell inline small"></div>
                        <div data-type="label" data-device="netatmo_forecast" data-get="fc0_sunset" data-part="2" data-post-text="  SS" class="cell inline small"></div>
                  <div data-type="label" data-device="netatmo_forecast" data-get="fc0_day" class="small"></div>
            <div data-type="weather" data-device="netatmo_forecast" data-get="fc0_symbol_day" data-imageset="amcharts" class="mini"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc0_temp_min" data-unit="%B0C%0A"  class="cell inline big" ></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc0_temp_max" data-unit="%B0C%0A"  class="cell inline big" ></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc0_rain" data-post-text= "  mm Regen" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc0_sun" data-post-text= "  Sonnenstunden" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc0_uv" data-post-text= "  UV - Index" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc0_windgust" data-pre-text="Wind  " data-post-text="  km/h"class="cell small"></div>
                        </div>
                        <div class="cell-20">
                        <div data-type="label" data-device="netatmo_forecast" data-get="fc1_sunrise" data-part="2" data-pre-text="SR  " class="cell inline small"></div>
                        <div data-type="label" data-device="netatmo_forecast" data-get="fc1_sunset" data-part="2" data-post-text="  SS" class="cell inline small"></div>
                  <div data-type="label" data-device="netatmo_forecast" data-get="fc1_day" class="small"></div>
            <div data-type="weather" data-device="netatmo_forecast" data-get="fc1_symbol_day" data-imageset="amcharts" class="mini"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc1_temp_min" data-unit="%B0C%0A"  class="cell inline big" ></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc1_temp_max" data-unit="%B0C%0A"  class="cell inline big" ></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc1_rain" data-post-text= "  mm Regen" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc1_sun" data-post-text= "  Sonnenstunden" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc1_uv" data-post-text= "  UV - Index" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc1_windgust" data-pre-text="Wind  " data-post-text="  km/h"class="cell small"></div>
                        </div>
                        <div class="cell-20">
                        <div data-type="label" data-device="netatmo_forecast" data-get="fc2_sunrise" data-part="2" data-pre-text="SR  " class="cell inline small"></div>
                        <div data-type="label" data-device="netatmo_forecast" data-get="fc2_sunset" data-part="2" data-post-text="  SS" class="cell inline small"></div>
                  <div data-type="label" data-device="netatmo_forecast" data-get="fc2_day" class="small"></div>
            <div data-type="weather" data-device="netatmo_forecast" data-get="fc2_symbol_day" data-imageset="amcharts" class="mini"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc2_temp_min" data-unit="%B0C%0A"  class="cell inline big" ></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc2_temp_max" data-unit="%B0C%0A"  class="cell inline big" ></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc2_rain" data-post-text= "  mm Regen" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc2_sun" data-post-text= "  Sonnenstunden" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc2_uv" data-post-text= "  UV - Index" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc2_windgust" data-pre-text="Wind  " data-post-text="  km/h"class="cell small"></div>
                        </div>
                        <div class="cell-20">
                       <div data-type="label" data-device="netatmo_forecast" data-get="fc3_sunrise" data-part="2" data-pre-text="SR  " class="cell inline small"></div>
                        <div data-type="label" data-device="netatmo_forecast" data-get="fc3_sunset" data-part="2" data-post-text="  SS" class="cell inline small"></div>
                  <div data-type="label" data-device="netatmo_forecast" data-get="fc3_day" class="small"></div>
            <div data-type="weather" data-device="netatmo_forecast" data-get="fc3_symbol_day" data-imageset="amcharts" class="mini"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc3_temp_min" data-unit="%B0C%0A"  class="cell inline big" ></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc3_temp_max" data-unit="%B0C%0A"  class="cell inline big" ></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc3_rain" data-post-text= "  mm Regen" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc3_sun" data-post-text= "  Sonnenstunden" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc3_uv" data-post-text= "  UV - Index" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc3_windgust" data-pre-text="Wind  " data-post-text="  km/h"class="cell small"></div>
                        </div>
                        <div class="cell-20">
                        <div data-type="label" data-device="netatmo_forecast" data-get="fc4_sunrise" data-part="2" data-pre-text="SR  " class="cell inline small"></div>
                        <div data-type="label" data-device="netatmo_forecast" data-get="fc4_sunset" data-part="2" data-post-text="  SS" class="cell inline small"></div>
                  <div data-type="label" data-device="netatmo_forecast" data-get="fc4_day" class="small"></div>
            <div data-type="weather" data-device="netatmo_forecast" data-get="fc4_symbol_day" data-imageset="amcharts" class="mini"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc4_temp_min" data-unit="%B0C%0A"  class="cell inline big" ></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc4_temp_max" data-unit="%B0C%0A"  class="cell inline big" ></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc4_rain" data-post-text= "  mm Regen" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc4_sun" data-post-text= "  Sonnenstunden" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc4_uv" data-post-text= "  UV - Index" class="cell small"></div>
<div data-type="label" data-device="netatmo_forecast" data-get="fc4_windgust" data-pre-text="Wind  " data-post-text="  km/h"class="cell small"></div>
                        </div>
                       
                    </div>

LG
Helmut

[Helmi55]

Hallo alles gut
das Problem sitzt vor dem Bildschirm. Hab deinen Beitrag vom Start gelesen und jetzt habe ich natürlich noch die
aktuelle weather.zip installiert und nun funkt es tadellos. Danke.

[somansch]

Hallo alles gut
das Problem sitzt vor dem Bildschirm. Hab deinen Beitrag vom Start gelesen und jetzt habe ich natürlich noch die
aktuelle weather.zip installiert und nun funkt es tadellos. Danke.

Hallo Helmut,

es freut mich, dass es jetzt funktioniert. Jedoch wundere ich mich, dass erst alle "amcharts" Icons vollständig angezeigt wurden, nachdem du die Icons aus dem Zip von meinem ersten Post heruntergeladen hast. Eigentlich sollten alle Icons inzwischen per FHEM Update aktualisiert werden?! Hier der Stand vom SVN: https://svn.fhem.de/trac/browser/trunk/fhem/www/images/default/weather

Hattest du schon evtl. schon einmal manuell vorher einen Teil der SVGs von amcharts kopiert?

Viele Grüße
Andreas

[Helmi55]

Guten Morgen,
Also mein Fhem ist Revision 18841. nicht tagesaktuell .........
Würdest du mir (uns) einen Teil deiner FTUI html zur Verfügung stellen?
Den Teil wie oben abgebildet. Icon für Sonnenstunden usw.

Danke für die tolle Arbeit. Nice day
Lg Helmut

[tomster]

Mal eine Verständnisfrage, die nur am Rande mit dem Widget zu tun hat:

Bei DWD Opean Data wird ja bei einigen Stationen die Sonennscheindauer im Reading "SunD" ausgegeben. Laut Beschreibung vom DWD ist der angegebene Wert jedoch die Sonnenscheindauer des Vortags.
Damit kann ich im FTUI natürlich keine Templates nutzen, da ich ja für die übrigen Werte eines Tages z.B. fc0_3_xxxx benutzen muss, für SunD müsste es jedoch fc1 sein. Oder habe ich hier ein Denkproblem?

[matlen67]

Halli Hallo. Ich bin gerade dabei mein tablet-ui umszustellen.
Leider bekomme eine Fehlermeldung. Übersehe ich da irgendwas? oder ist im widget_weather.js was kaputt?

Code Auswählen Erweitern


widget_weather.js:674
TypeError: elem.matchDeviceReading is not a function


Hier mein tablet-ui code

Code Auswählen Erweitern


<div data-type="weather"
data-device="MyWeather"
data-get="hfc1_iconAPI"
data-imageset="kleinklima"
        style="width:100px"
class="centered"></div>


[somansch]

Guten Morgen,
Also mein Fhem ist Revision 18841. nicht tagesaktuell .........
Würdest du mir (uns) einen Teil deiner FTUI html zur Verfügung stellen?
Den Teil wie oben abgebildet. Icon für Sonnenstunden usw.

Danke für die tolle Arbeit. Nice day
Lg Helmut

Hallo Helmut,
irgendwas scheint mit dem FHEM Update der Images nicht so ganz zu funktionieren, d.h. das würde erklären, warum manchen Icons nicht unter "/opt/fhem/www/images/default/weather" existieren und es erst nach einem manuellem Kopieren klappt.

Meinen FTUI Code im Anhang. Ich verwende Flex in Kombination mit Templates und angepasstem CSS. Wird also nicht 1:1 ohne den Rest funktionieren  . Daher der Verweis auf meinen gesamten Code im User Demo Thread: https://forum.fhem.de/index.php/topic,37378.msg885401.html#msg885401

Viele Grüße
Andreas

[somansch]

Halli Hallo. Ich bin gerade dabei mein tablet-ui umszustellen.
Leider bekomme eine Fehlermeldung. Übersehe ich da irgendwas? oder ist im widget_weather.js was kaputt?

Code Auswählen Erweitern


widget_weather.js:674
TypeError: elem.matchDeviceReading is not a function


Hier mein tablet-ui code

Code Auswählen Erweitern


<div data-type="weather"
data-device="MyWeather"
data-get="hfc1_iconAPI"
data-imageset="kleinklima"
        style="width:100px"
class="centered"></div>


Welche weather_widget Version verwendest du? Aus dem automatischen Update oder eine Version aus diesem Thread?

Viele Grüße
Andreas

[matlen67]

Die aus Post 1 V2.7