[FTUI3ß] Andere Wettericons

Begonnen von grossmaggul, 06 Januar 2021, 14:19:07

Vorheriges Thema - Nächstes Thema

grossmaggul

Hallo,

vorweg, ich habe jetzt mal einen extra Thread geöffnet, weil der Hauptthtread zu FTUI3 inzwischen doch recht unübersichtlich ist.
Vielleicht sollte man das in Zukunft grundsätzlich so machen und im Hauptthread nur noch Featurewünsche oder Bugs besprechen.

Nun zu meinem Problem, ich würde gerne diese Icons https://bas.dev/projects/weather-icons in das weather Modul einbinden. Ich habe das Set heruntergeladen und in www/ftui/wi-svg abgelegt.
Nur, wie erreiche ich jetzt, daß diese Icons bei der entsprechenden Wettersituation benutzt werden. Ich habe mir den Source mal angesehen, werde da aber nicht so recht schlau daraus. ::)


gm
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

octek0815

Zitat von: grossmaggul am 06 Januar 2021, 14:19:07
Hallo,

vorweg, ich habe jetzt mal einen extra Thread geöffnet, weil der Hauptthtread zu FTUI3 inzwischen doch recht unübersichtlich ist.
Vielleicht sollte man das in Zukunft grundsätzlich so machen und im Hauptthread nur noch Featurewünsche oder Bugs besprechen.

Nun zu meinem Problem, ich würde gerne diese Icons https://bas.dev/projects/weather-icons in das weather Modul einbinden. Ich habe das Set heruntergeladen und in www/ftui/wi-svg abgelegt.
Nur, wie erreiche ich jetzt, daß diese Icons bei der entsprechenden Wettersituation benutzt werden. Ich habe mir den Source mal angesehen, werde da aber nicht so recht schlau daraus. ::)


gm

So... https://forum.fhem.de/index.php/topic,115259.msg1118740.html#msg1118740

oder so...

Für Nacht:

<ftui-icon
     path="./icons/weather/animate"
     [name]="System_Proplanta_Wetter:weather | map('`Regen`:partly-cloudy-night-rain, `Regenschauer`:partly-cloudy-night-rain, `Leichter Regen`:partly-cloudy-night-rain, `Leichter Regen m&ouml;glich`:partly-cloudy-night-rain, `Leichter Regen`:partly-cloudy-night-rain, `Spr&uuml;hregen`:drizzle, `Nieselregen m&ouml;glich`:partly-cloudy-night-drizzle, `wolkig`:partly-cloudy-night, `heiter`:partly-cloudy-night, `Leicht bew&ouml;lkt`:partly-cloudy-night, `&Uuml;berwiegend bew&ouml;lkt`:partly-cloudy-night, `bedeckt`:cloudy, `Bedeckt`:cloudy, `stark bew&ouml;lkt`:cloudy, `Stark bew&ouml;lkt`:cloudy, `klar`:clear-night, `Klar`:clear-night, Schneeregen:partly-cloudy-night-snow, `M&auml;&szlig;iger Schnee`:partly-cloudy-night-snow, `Schneefall`:partly-cloudy-night-snow, `Schnee`:partly-cloudy-night-snow, `Schneeschauer`:partly-cloudy-night-snow, `Leichter Schneefall m&ouml;glich`:partly-cloudy-night-snow, `unterschiedlich bew&ouml;lkt, vereinzelt Schauer und Gewitter`:sunny-sleet-storm, `Gewitter`:thunderstorms, `Nebel`:mist')">
</ftui-icon>


Für Tag:

<ftui-icon
     path="./icons/weather/animate"
     [name]="System_Proplanta_Wetter:weather | map('`Regen`:partly-cloudy-day-rain, `Regenschauer`:partly-cloudy-day-rain, `Leichter Regen`:partly-cloudy-day-rain, `Leichter Regen m&ouml;glich`:partly-cloudy-day-rain, `Leichter Regen`:partly-cloudy-day-rain, `Nieselregen m&ouml;glich`:partly-cloudy-day-drizzle, `Spr&uuml;hregen`:drizzle, `wolkig`:partly-cloudy-day, `heiter`:partly-cloudy-day, `Leicht bew&ouml;lkt`:partly-cloudy-day, `&Uuml;berwiegend bew&ouml;lkt`:partly-cloudy-day, `bedeckt`:cloudy, `Bedeckt`:cloudy, `stark bew&ouml;lkt`:cloudy, `Stark bew&ouml;lkt`:cloudy, `sonnig`:clear-day, `Sonnig`:clear-day, Schneeregen:partly-cloudy-day-snow, `M&auml;&szlig;iger Schnee`:partly-cloudy-day-snow, `Schneefall`:partly-cloudy-day-snow, `Schnee`:partly-cloudy-day-snow, `Schneeschauer`:partly-cloudy-day-snow, `Leichter Schneefall m&ouml;glich`:partly-cloudy-day-snow, `unterschiedlich bew&ouml;lkt, vereinzelt Schauer und Gewitter`:sunny-sleet-storm, `Gewitter`:thunderstorms, `Nebel`:mist')">
</ftui-icon>

grossmaggul

#2
O.K., danke.
FHEM auf Debian Buster Server, 2 x nanoCUL868, 1xnanoCUL465; Homematic, MAX, MiLight, HUE,  2 x Gosund SP1

somansch

Hallo in die Runde,

ich klinke mich hier jetzt auch mal ein, da ich ja das aufwändige Mapping in "FTUI 2" gemacht habe:https://forum.fhem.de/index.php/topic,96954.0.html

Ich habe im "FTUI 3" Thread auf diesen neuen Thread hier verwiesen  ;) :https://forum.fhem.de/index.php/topic,115259.msg1120064.html#msg1120064

PS: Ich mache für FTUI 2 gerade das Mapping der animierten "Bas-SVGs" (https://bas.dev/projects/weather-icons), da sie mir auch besser als die amcharts gefallen.

Viele Grüße
Andreas

ToM_ToM

Hey die Icons sind echt cool. Aber wie macht ihr das denn mit der Animation?

VG, Thomas
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

somansch

Zitat von: ToM_ToM am 17 Januar 2021, 20:54:38
Hey die Icons sind echt cool. Aber wie macht ihr das denn mit der Animation?

VG, Thomas

Die SVGs sind bereits animiert  ;)

torte

moin,

hier mal meine weather.map.js hab da mal angefangen für OpenWeatherAPI ich hab aber noch die Kleinklima mit PNG
Bestimmt nicht vollständig!!

Grüße
Torte

yersinia

#7
Zitat von: torte am 19 Januar 2021, 07:00:07hab da mal angefangen für OpenWeatherAPI ich hab aber noch die Kleinklima mit PNG
Bestimmt nicht vollständig!!
Thx! :) ich habe das um bas(fill|line) und weathericons ergänzt.

Irgendwie fehlen noch Wetterzustände wie Hagel/Hail - somansch hatte eigtl in seinem FTUI2 weather-widget ein gutes mapping. Kann man das nicht in die Matrix übertragen?

Wird es eigentlich die iconsets (kleinklima, bas, weathericons etc.) mit FTUI3 mitgeben oder soll der Endanwender sich das selbst besorgen?



Edit: Anhang in #14
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

torte

Zitat von: yersinia am 19 Januar 2021, 11:02:18
Wird es eigentlich die iconsets (kleinklima, bas, weathericons etc.) mit FTUI3 mitgeben oder soll der Endanwender sich das selbst besorgen?

Ich hoffe das somansch das übernimmt  :P  und setstate dann die weather.maps.js dann übernimmt.

ToM_ToM

ZitatDie SVGs sind bereits animiert

Kannst du mir einen Tipp geben wie ich das einbinden muss?
Die weather.map.js habe ich hier heruntergeladen und ersetzt.
Aber wie wird die eingebunden? Habe folgendes probiert und bekomme zwar Icons angezeigt, diese sind aber nicht animiert.


<ftui-weather class="size-5" [condition]="Wetter_MA_Proplanta:weather" providerSet="basfill"></ftui-weather>

<ftui-icon path="./icons/weather/bas/fill/all" [name]="Wetter_MA_Proplanta:weather | map('`Regen`:partly-cloudy-night-rain, `Regenschauer`:partly-cloudy-night-rain, `Leichter Regen`:partly-cloudy-night-rain, `Leichter Regen m&ouml;glich`:partly-cloudy-night-rain, `Leichter Regen`:partly-cloudy-night-rain, `Spr&uuml;hregen`:drizzle, `Nieselregen m&ouml;glich`:partly-cloudy-night-drizzle, `wolkig`:partly-cloudy-night, `heiter`:partly-cloudy-night, `Leicht bew&ouml;lkt`:partly-cloudy-night, `&Uuml;berwiegend bew&ouml;lkt`:partly-cloudy-night, `bedeckt`:cloudy, `Bedeckt`:cloudy, `stark bew&ouml;lkt`:cloudy, `Stark bew&ouml;lkt`:cloudy, `klar`:clear-night, `Klar`:clear-night, Schneeregen:partly-cloudy-night-snow, `M&auml;&szlig;iger Schnee`:partly-cloudy-night-snow, `Schneefall`:partly-cloudy-night-snow, `Schnee`:partly-cloudy-night-snow, `Schneeschauer`:partly-cloudy-night-snow, `Leichter Schneefall m&ouml;glich`:partly-cloudy-night-snow, `unterschiedlich bew&ouml;lkt, vereinzelt Schauer und Gewitter`:sunny-sleet-storm, `Gewitter`:thunderstorms, `Nebel`:mist')"></ftui-icon>


VG, Thomas
Hardware: BananaPi, Busmaster CUL, SanDisk 16GB Ultra SD, 16 GB USB-Stick | Software: Armbian, FHEM 5.8

octek0815

Zitat von: ToM_ToM am 19 Januar 2021, 21:25:25
Kannst du mir einen Tipp geben wie ich das einbinden muss?
Die weather.map.js habe ich hier heruntergeladen und ersetzt.
Aber wie wird die eingebunden? Habe folgendes probiert und bekomme zwar Icons angezeigt, diese sind aber nicht animiert.


<ftui-weather class="size-5" [condition]="Wetter_MA_Proplanta:weather" providerSet="basfill"></ftui-weather>

<ftui-icon path="./icons/weather/bas/fill/all" [name]="Wetter_MA_Proplanta:weather | map('`Regen`:partly-cloudy-night-rain, `Regenschauer`:partly-cloudy-night-rain, `Leichter Regen`:partly-cloudy-night-rain, `Leichter Regen m&ouml;glich`:partly-cloudy-night-rain, `Leichter Regen`:partly-cloudy-night-rain, `Spr&uuml;hregen`:drizzle, `Nieselregen m&ouml;glich`:partly-cloudy-night-drizzle, `wolkig`:partly-cloudy-night, `heiter`:partly-cloudy-night, `Leicht bew&ouml;lkt`:partly-cloudy-night, `&Uuml;berwiegend bew&ouml;lkt`:partly-cloudy-night, `bedeckt`:cloudy, `Bedeckt`:cloudy, `stark bew&ouml;lkt`:cloudy, `Stark bew&ouml;lkt`:cloudy, `klar`:clear-night, `Klar`:clear-night, Schneeregen:partly-cloudy-night-snow, `M&auml;&szlig;iger Schnee`:partly-cloudy-night-snow, `Schneefall`:partly-cloudy-night-snow, `Schnee`:partly-cloudy-night-snow, `Schneeschauer`:partly-cloudy-night-snow, `Leichter Schneefall m&ouml;glich`:partly-cloudy-night-snow, `unterschiedlich bew&ouml;lkt, vereinzelt Schauer und Gewitter`:sunny-sleet-storm, `Gewitter`:thunderstorms, `Nebel`:mist')"></ftui-icon>


VG, Thomas

Hallo Thomas,

deine Zeilen im Code sind doppelt. Entweder du nutzt <ftui-weather> oder du baust dir mit <ftui-icon> ein eigenes mapping.
Voraussetzung ist aber das dir die bas SVG icons herunterlädst und diese im entsprechenden Ordner platzierst.

Wenn du die weather.map.js von yersinia nimmst musst du in die Datei reinschauen und die Icons entsprechend kopieren.
Und wenn du dein eigenes Icon-Mapping mit <ftui-icon> machst, hast du ja selbst die Wahl über path.

Ich nutze derzeit ein eigenes Mapping mit <ftui-icon> solange das hier noch in Entwicklung ist, damit ich nicht ständig nachbessern muss.
Das klappt sehr gut.

Ich habe in FHEM ein device (Reading) welches zwischen Tag und Nacht umschaltet bei Sonnenauf und -untergang.
Dadurch kann ich die Animierten Tag und Nacht Icons von bas nutzen.

Hier mein FTUI3 Code...


<ftui-column [hidden]="System_Wetter_Tag_Nacht:state | map('`Nacht`:false, `Tag`:true')">
    <ftui-icon path="./icons/weather/animate" [name]="System_DarkSky_Wetter:condition | map('`Regen`:partly-cloudy-night-rain, `Regenschauer`:partly-cloudy-night-rain, `Leichter Regen`:partly-cloudy-night-rain, `Leichter Regen m&ouml;glich`:partly-cloudy-night-rain, `Leichter Regen`:partly-cloudy-night-rain, `Spr&uuml;hregen`:drizzle, `Nieselregen m&ouml;glich`:partly-cloudy-night-drizzle, `wolkig`:partly-cloudy-night, `heiter`:partly-cloudy-night, `Leicht bew&ouml;lkt`:partly-cloudy-night, `&Uuml;berwiegend bew&ouml;lkt`:partly-cloudy-night, `bedeckt`:cloudy, `Bedeckt`:cloudy, `stark bew&ouml;lkt`:cloudy, `Stark bew&ouml;lkt`:cloudy, `klar`:clear-night, `Klar`:clear-night, Schneeregen:partly-cloudy-night-snow, `M&auml;&szlig;iger Schnee`:partly-cloudy-night-snow, `Schneefall`:partly-cloudy-night-snow, `Schnee`:partly-cloudy-night-snow, `Schneeschauer`:partly-cloudy-night-snow, `Leichter Schneefall m&ouml;glich`:partly-cloudy-night-snow, `unterschiedlich bew&ouml;lkt, vereinzelt Schauer und Gewitter`:sunny-sleet-storm, `Gewitter`:thunderstorms, `Nebel`:mist')"></ftui-icon>
</ftui-column>
<ftui-column [hidden]="System_Wetter_Tag_Nacht:state | map('`Nacht`:true, `Tag`:false')">
    <ftui-icon path="./icons/weather/animate" [name]="System_DarkSky_Wetter:condition | map('`Regen`:partly-cloudy-day-rain, `Regenschauer`:partly-cloudy-day-rain, `Leichter Regen`:partly-cloudy-day-rain, `Leichter Regen m&ouml;glich`:partly-cloudy-day-rain, `Leichter Regen`:partly-cloudy-day-rain, `Nieselregen m&ouml;glich`:partly-cloudy-day-drizzle, `Spr&uuml;hregen`:drizzle, `wolkig`:partly-cloudy-day, `heiter`:partly-cloudy-day, `Leicht bew&ouml;lkt`:partly-cloudy-day, `&Uuml;berwiegend bew&ouml;lkt`:partly-cloudy-day, `bedeckt`:cloudy, `Bedeckt`:cloudy, `stark bew&ouml;lkt`:cloudy, `Stark bew&ouml;lkt`:cloudy, `sonnig`:clear-day, `Sonnig`:clear-day, Schneeregen:partly-cloudy-day-snow, `M&auml;&szlig;iger Schnee`:partly-cloudy-day-snow, `Schneefall`:partly-cloudy-day-snow, `Schnee`:partly-cloudy-day-snow, `Schneeschauer`:partly-cloudy-day-snow, `Leichter Schneefall m&ouml;glich`:partly-cloudy-day-snow, `unterschiedlich bew&ouml;lkt, vereinzelt Schauer und Gewitter`:sunny-sleet-storm, `Gewitter`:thunderstorms, `Nebel`:mist')"></ftui-icon>
</ftui-column>


Ich hoffe ich konnte dir hiermit ein wenig Licht ins Dunkel bringen.

VG
Olli

yersinia

das ^- was octek0815 schreibt und du musst, wenn du ftui-weather nutzen möchtest, das icon-set definieren:
<ftui-weather class="size-5" [condition]="Wetter_MA_Proplanta:weather" icon-set="basfill"></ftui-weather>

Die Pfade der SVGs aus 'meiner' weather.map.js sind (das Wurzelverzeichnis in eckigen Klammern):
basfill: [/opt/fhem/www/ftui/]icons/weather/bas/fill/all
basline: [/opt/fhem/www/ftui/]icons/weather/bas/line/all
weathericons: [/opt/fhem/www/ftui/]icons/weather/wi

und der Vollständigkeit-halber:
kleinklima: [/opt/fhem/www/ftui/]icons/weather/kleinklima
meteocons*: [/opt/fhem/www/ftui/]icons
*: (default wenn icon-set nicht angegeben und wird durch FTUI mitgeliefert)

Einen Ordner weather gibt es noch nicht, der muss angelegt werden. Und die entsprechenden SVGs dann dorthin kopiert werden.

Aus der bas-Quelle den Ordner production wählen (und dann production/* -> icons/weather/bas/*).

Insgesamt bin ich aber mit den bas icons nicht soooooo glücklig - sie skalieren schlecht und sehen auf einem dunklen Hintergrund nicht so gut aus mMn. Aber vielleicht ist das nur der erste Eindruck.
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

octek0815

Zitat von: yersinia am 20 Januar 2021, 08:47:06
Insgesamt bin ich aber mit den bas icons nicht soooooo glücklig - sie skalieren schlecht und sehen auf einem dunklen Hintergrund nicht so gut aus mMn. Aber vielleicht ist das nur der erste Eindruck.

Echt?


yersinia

viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

yersinia

#14
Anbei noch ein Update um den Zustand klar hinzuzufügen:
    klar: 'CLOUDLESS',
viele Grüße, yersinia
----
FHEM 6.3 (SVN) on RPi 4B with RasPi OS Bullseye (perl 5.32.1) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl