[FTUI3ß] Andere Wettericons

somansch · 20 Januar 2021, 22:30:48

Hallo liebe FTUI3 Gemeinde,

bisher habe ich mich noch nicht viel mit FTUI 3 auseinandergesetzt und auch noch keine laufende Umgebung.

Ich habe mir die "weather.map.js" mal angeschaut. Prinzipiell ist das der richtige Ansatz: globale Wetterzustände definieren, Iconsets zu diesen Wetterzuständen zu mappen und dann Readings der Wetter in Wetterzuständen zuzuweisen.

Um jedoch die volle Unterstützung der Tag/Nacht Unterscheidung, als auch sämtliche Wetterzustände von DarkSky, OpenWeather, Wunderground, ProPlanta, DWD Open Data und Netatmo und die teileise unterschiedliche Vielfalt der Iconsets abzudecken, sind die momentan 18 definierten Wetterzustände viel zu wenig.

Beim Blick in das Mapping von FTUI 2 https://forum.fhem.de/index.php?action=dlattach;topic=96954.0;attach=145603 seht ihr, dass ich dort vom DWD die 100 Wetterbeschreibungen (Spalte V) als Start genommen habe (Zahlen 0-99 + "Warnung"). Dann habe ich auch noch Spalten für die Unterscheidung Tag/Nacht des Wetterzustands. Selbst das ist nicht ausreichend, da es manchmal die Kombination gab, dass z.B. das Iconset keine Unterscheidung für Tag/Nacht liefert bzw. der Wetterdienst selbst.

Für die v3 würde ich versuchen, es von vorn herein besser aufzusetzen, also ca. 120 Wetterzustände definieren. Warum 120? Nun, im Moment werden "global" 40 Wetterzustände gemappt bzw. genutzt, diese jedoch teilweise mit Tag/Nacht Unterscheidung und teilweise Neutral, also 3 * 40 = 120

. Die Zustände könnten dann namentlich ungefähr so aussehen:

0-D (steht für Zustand Wolkenlos - Tag bzw. Day
0-N (steht für Zustand Wolkenlos - Nacht bzw. Night
0-U (steht für Zustand Wolkenlos - Neutral bzw. universal
1-D (steht für Zustand leicht bewölkt - Tag bzw. Day
1-N (steht für Zustand leicht bewölkt - Nacht bzw. Night
1-U (steht für Zustand leicht bewölkt - Neutral bzw. universal
...

Weiterhin sollte bei Proplanta das Icon-Reading verwendet werden, da nur dort die Unterscheidung zwischen Tag und Nacht möglich ist. Hier ist natürlich noch das Problem, wie in der "weather.map.js" aus dem Reading, z.B. https://www.proplanta.de/wetterdaten/images/symbole/t3.gif ein t3 wird

.

Hier fehlt mir das Wissen und im Moment auch eine Testumgebung, bin aber gern bereit meinen Input zum Mapping zu liefern.

Die Iconsets sollten in separaten Ordnern innerhlab des icons/weather-Ordners vorgehalten werden, so umgeht man die Gefahr von Duplikaten, also kleinklima, meteocons, weathericons, amcharts und bas. Für bas die Unterordner fill und line zu nutzen, finde ich auch gut. Habe bei FTUI 2 nur die "line" drin, finde ich chicker

.

Viele Grüße
Andreas

Risiko · 18 April 2021, 14:57:36

Hallo Zusammen,

ich habe mir die Arbeit von somansch zu nutze gemacht und die Icons von https://bas.dev/projects/weather-icons eingebaut.
Die Icons gibt es hier: https://forum.fhem.de/index.php/topic,96954.0.html
Die weather.map.js anbei oder hier: https://github.com/risiko79/ftui/blob/risiko79/new_weather_provider_and_icons/www/ftui/components/weather/weather.map.js.
Mal schauen, ob setstate es aufnimmt (request liegt vor)

Verwendung:

Code Auswählen


<ftui-weather
        provider="proplantaICON"
        icon-set="bas" 
        [condition]="device:fc0_weather06Icon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"
</ftui-weather>

Mit dem neuen Provider werden auch Tag und Nachticons bei proplanta unterschieden.
Die Icons müssen unter ./icons/weather/bas liegen.

Risiko

mr_petz · 18 April 2021, 17:50:34

Hatte ich hier im FTUI3 Thread auch schon angefangen:
https://forum.fhem.de/index.php/topic,115259.msg1135896.html#msg1135896

Ich hatte da noch zusätzlich von mir erstellte Icons hinzugefügt...
Wenn du die nicht hast, kannst du die gerne übernehmen...
Mir ging es hier vorallem um die Nacht-Icons...

Gruß Thomas

Risiko · 18 April 2021, 19:23:48

Danke. Hatte ich übersehen. Schaue bei Gelegenkeit nochmal detaillierter darüber, aber wie mir scheint, hast du einfach provider und verschiedene iconsets gemischt --> Finde ich nicht gut.

Bei meiner Variante muss man die weather.component.js nicht anfassen, um die Nachticons von 'kleinklima' oder' 'bas' verwenden zu können.
In der weather.map.js gibt es noch das Icon-Set 'proplantaFHEM', um die vorhanden kleinklima icons aus images/default/weather zu verwenden.

mr_petz · 18 April 2021, 20:26:49

Ja, das war halt auf die schnelle...

Gut wäre halt wenn du die fair-day/night und ~~rain-snow~~ mit rein nimmst.
Kannst du auch in meiner map rauslesen zu welchen proplanta Icon die gehören...
Danke und Gruß

Edit: bas hat sleet (Schneeregen) hinzugefügt... fehlt noch fair-day/night

Dracolein · 11 November 2021, 08:26:24

Hallo zusammen,

ich verweise auf mein Posting hier ( https://forum.fhem.de/index.php/topic,115259.msg1186036.html#msg1186036 )

Zitat
heute morgen wird mir browserübergreifend anstelle des WeatherIcons ein "N/A" angezeigt.
Der aktuelle Wert des Proplanta-Device-Readings "weatherIcon" lautet:
Code Auswählen Erweitern
https://www.proplanta.de/wetterdaten/images/symbole/n12.gif

Meine FTUI3 Definition dieses Abschnitts:

Code Auswählen

<ftui-weather  style="--icon-height: 0em,0em" size="7"[b] icon-set="kleinklimaFHEM"[/b] provider="proplantaICON" path="../images/default/weather/" [condition]="WetterProplanta:weatherIcon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"></ftui-weather>

Freundlicherweise hat mr_petz schon eine Ursachenanalyse dokumentiert, ich zitiere:

Zitat
Hi, HAZE_NIGHT (n12) gibt es nicht als mapping zum haze_night.png für kleinklimaFHEM in der weather.map.js.
haze_night.png icon ist in der map FOGGY_NIGHT (n13).
Dafür gibt es aber kein foggy_night.png icon von kleinklima?
Es müsste also HAZE_NIGHT (n12) und FOGGY_NIGHT(n13) auf haze_night.png zielen...
Es sei denn es gibt ein foggy_night.png.

Darum muss sich aber Risiko oder setstate kümmern...
LG mr_petz

edit:

Das passende Icon für den Readingwert

Code Auswählen

https://www.proplanta.de/wetterdaten/images/symbole/t12.gif
ist leider auch noch nicht korrekt weitergeleitet --> N/A

yersinia · 11 November 2021, 10:21:25

Zitat von: Dracolein am 11 November 2021, 08:26:24Meine FTUI3 Definition dieses Abschnitts:
Code Auswählen Erweitern
<ftui-weather style="--icon-height: 0em,0em" size="7"[b] icon-set="kleinklimaFHEM"[/b] provider="proplantaICON" path="../images/default/weather/" [condition]="WetterProplanta:weatherIcon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')"></ftui-weather>

Ich hoffe, das ist ein Kopierfehler. Denn so baut man das nicht auf.

Code Auswählen

<ftui-weather  style="height: 0em; width: 0em;"
           size="7"
           provider="proplantaICON"
           icon-set="kleinklimaFHEM"
           path="../images/default/weather/"
           [condition]="WetterProplanta:weatherIcon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')">
</ftui-weather>

Sicher, dass

Code Auswählen

[condition]="WetterProplanta:weatherIcon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')

dann auch t12 zurückliefert?

Dies ergibt nach weather.map.js dann HAZE, was wiederum -wie mr.petz schreibt- nicht definiert ist für kleinklimaFHEM.
Du kannst in der weather.map.js in der Zeile 94 folgende neue Zeile hinzufügen:

Code Auswählen

HAZE: '../images/default/weather/haze.png',

Die Adaption von weather.map.js ist aber ein Thema für den Hauptthread imho.

mr_petz · 11 November 2021, 10:35:11

Zitat von: yersinia am 11 November 2021, 10:21:25
...
Die Adaption von weather.map.js ist aber ein Thema für den Hauptthread imho.

Ich denke da es einmal diesen Thread gibt, dann kann man hier auch weiter machen wenn es um das mapping vom weather geht...
Allgemeine Sachen zur Konfiguration/Definition sollten aber weiterhin im Hauptthread landen...
lg

Dracolein · 14 November 2021, 07:35:49

Zitat von: yersinia am 11 November 2021, 10:21:25
Ich hoffe, das ist ein Kopierfehler. Denn so baut man das nicht auf.

Ne, kein Kopierfehler, ich habe diverse Zeilen "einzeilig" im Editor strukturiert, um viele weitere Zeilen zu vermeiden, allerdings ohne mir groß was dabei zu denken, weil es letztlich bei mir funktioniert hat.
Gern würde ich dazulernen, drum gefragt: was ist abgesehen von der besseren Lesbarkeit der "technische" Unterschied zu Deinem obigen Beispiel?

Generell wäre ein Anfängerleitfaden hilfreich, in dem die Strukturierung erklärt ist, z.B. auch wie man Codepassagen in andere Dateien auslagert und wann/warum man dies tun sollte. Ich habe mir diverse Vorgehensweisen abgeschaut und nachgebaut, jedoch ohne den tatsächlichen Grund zu kennen.
Meine neue auf FTUI3 basierende index.html hat inzwischen die 1.800 Codezeilen längst überschritten und deren Ladezeit an schwachen Geräten hat spürbar gelitten.

Wär das vll. einen eigenen Thread wert?

OdfFhem · 14 November 2021, 09:52:44

@yersinia

Aktuell treten bei proplanta die Symbole n12 und t12 häufig auf, was Nebel (fog) anzeigen soll. Aber eher bei uhrzeit- bzw. tageszeitabhängigen Angaben. Habe ich die Frage richtig verstanden oder hattest Du andere "Bedenken" ?

@Dracolein

Ein Vergleich der beiden Codeteile zeigt inhaltlich schon einige Unterschiede. Ob die Angaben in einer Zeile oder aufgeteilt in mehreren Zeilen stehen, spielt eigentlich keine Rolle - @yersinia hat das vermutlich der besseren Lesbarkeit im Forum wegen so dargestellt; ständiges Scrollen ist nicht unbedingt förderlich für eine Analyse ...

Wichtiger ist, dass man z.B. die bold-Klammer niemals so verwendet, immer die "richtigen" style-Attribute verwendet, ...

mr_petz · 14 November 2021, 10:44:32

Wichtig wäre hier in erster Linie das fixen/adden vom mapping der n12 und t12 icons fürs icon-set="kleinklimaFHEM"!
Wie gesagt sollte das Risiko oder setstate in die Hand nehmen.

ps.: Dracolein wollte bestimmt nur das icon-set="kleinklimaFHEM" mit b html-tags im Beitrag hervorheben was aber im code-tag nicht funktioniert...

LG

Dracolein · 14 November 2021, 11:12:36

Zitat von: mr_petz am 14 November 2021, 10:44:32
ps.: Dracolein wollte bestimmt nur das icon-set="kleinklimaFHEM" mit b html-tags im Beitrag hervorheben was aber im code-tag nicht funktioniert...
LG

Jetzt kapier ich erst, was Euch aufgefallen war

Und genau so war es eigentlich gedacht; meine Intention war das Hervorheben des von mir verwendeten Icon-Sets

yersinia · 14 November 2021, 19:19:47

Zitat von: OdfFhem am 14 November 2021, 09:52:44Aktuell treten bei proplanta die Symbole n12 und t12 häufig auf, was Nebel (fog) anzeigen soll. Aber eher bei uhrzeit- bzw. tageszeitabhängigen Angaben. Habe ich die Frage richtig verstanden oder hattest Du andere "Bedenken" ?

Ja, liefert dann auch

Code Auswählen

[condition]="WetterProplanta:weatherIcon | replace('https://www.proplanta.de/wetterdaten/images/symbole/','') | replace('.gif','')

entsprechend n12/t12 zurück? (Mir geht es darum sicherzustellen, dass die Rückgabewerte hier auch entsprechend der Mappingtabelle sind)

Ja, neben dem

Code Auswählen

[b] icon-set="kleinklimaFHEM"[/b]
finde ich auch dies komisch:

Code Auswählen

style="--icon-height: 0em,0em"
Warum hier eine Variable?

Darüberhinaus, @Dracolein, hast du das mal versucht?

Zitat von: yersinia am 11 November 2021, 10:21:25Dies ergibt nach weather.map.js dann HAZE, was wiederum -wie mr.petz schreibt- nicht definiert ist für kleinklimaFHEM.
Du kannst in der weather.map.js in der Zeile 94 folgende neue Zeile hinzufügen:
Code Auswählen Erweitern
HAZE: '../images/default/weather/haze.png',

Dracolein · 14 November 2021, 19:36:23

Zitat von: yersinia am 14 November 2021, 19:19:47
Ja, neben dem
[...]
finde ich auch dies komisch:
Code Auswählen Erweitern
style="--icon-height: 0em,0em"
Warum hier eine Variable?

Darüberhinaus, @Dracolein, hast du das mal versucht?

Dazu kann ich was produktives beitragen

Die Variable wurde mir empfohlen, um die Problematik des optisch zusammengeschobenen kleinklima.Icons zu beheben (siehe hier: https://forum.fhem.de/index.php/topic,115259.msg1185845.html#msg1185845 ). Weiter oben im Thread sind Screenshots von mir verlinkt.

Die Änderung in der weather.map.js habe ich ebend durchgeführt.

Dracolein · 21 November 2021, 10:05:37

Moin zusammen,

aktuell ein N/A Darstellungsfehler des besagten kleinklima-Sets, hier wird aktuell gerade in den Readings:
"weatherIcon" =

Code Auswählen

https://www.proplanta.de/wetterdaten/images/symbole/t12.gif
"weather" =

ZitatNebel

angezeigt.

edit:
ach, ich hab ein Update all durchlaufen lassen; die weather.map.js Änderung wurde überschrieben

edit2:
haze.png = Sonne mit etwas Nebel als Icon
fog.png = Nebelbank

Habe so gemacht:

Code Auswählen

HAZE: '../images/default/weather/fog.png',