`Enhancement` Change weather colours to higher saturation

[illuzn]

Enhancement Summary

The current weather colours are very low saturation change them to higher saturation

Detailed Description

The NSPanel has a very low contrast ratio. Colours that look good on a desktop computer or laptop look awful on the NSPanel. Currently, the NSPanel weather colours on the home screen and the forecast pages look awful because they are too similar to white.

This is an even greater problem if you use brightnesses less than 100% - giving you much less contrast to work with as a base.

I suggest changing them to these colours which I meticulously selected and contributed to Lovelove UI:

clear-night: [150, 150, 100]
cloudy: [75, 75, 75]
exceptional: [255, 50, 50]
fog: [150, 150, 150]
hail: [200, 200, 200]
lightning: [200, 200, 0]
lightning-rainy: [200, 200, 150]
partlycloudy: [150, 150, 150]
pouring: [50, 50, 255]
rainy: [100, 100, 255]
snowy: [150, 150, 150]
snowy-rainy: [150, 150, 255]
sunny: [255, 255, 0]
windy: [150, 150, 150]
windy-variant: [255, 125, 125]

I'd do this myself but I don't know how to use the HMI editor and these colours seem to be hard coded into there.

Additional Context

In my experience, the screen looks nothing like:

and much more like (exposure adjusted to reflect human viewing conditions):

[edwardtfn]

Those icons are currently picture files, with black background, as this Nextion model can't deal with transparency. I can export those pictures later and share with you, if you wanna play with those. There's also a request on #1444 to have animated icons. If I have the sequence of icons I can definitely arrange to animate those programmatically (as animations are also not supported by this Nextion model).

Change those to mdi icons is also one possibility, then transparency is embedded and will make happy all the people trying to change the background. The downsize here is that those icons are always monochromatic. We can have your proposed colors for different icons, but it will be always a single color. I like the multi-color thing, but I can leave without that.

A third option, probably a bit more complex, is to draw the icons dynamically. Then again transparency will be OK. ESPHome have some native methods for this and adapt to Nextion might not be a big issue, however the ESPHome implementation draws pixel by pixel, which will certainly be too slow for Nextion serial commands, but if we can find icons instructions based on regulars shapes commands (circle, square, lines, etc.) we would be able to reduce the number of commands and make that viable.

[illuzn]

Just so I know the limits how much spare hmi space do we have?

Animated icons would depend on that.

[edwardtfn]

I don't know the answer for that. The current TFT files are bellow 8Mb for normal files and bellow 12Mb for CJK. The display's total memory is 16Mb, but I don't know that means it will support something very close to that.

Anyways, the resolution is quite low, with only 65536 colors, so the images are not the ones consuming most of the memory... The fonts are the ones.

[edwardtfn]

I've just exported all pics to this folder: https://github.com/Blackymas/NSPanel_HA_Blueprint/tree/dev/dev/ui/eu/pics

You will find other pics there, but the ones used for weather are:

      weather:
        sunny: '{{ 2 if sun_is_up else 15}}'  # some weather providers returns "sunny" for "clear-night"
        cloudy: 3
        rainy: 4
        pouring: 5
        snowy: 6
        hail: 7
        snowy_rainy: 7
        snowy-rainy: 7
        fog: 8
        windy: 9
        windy_variant: 9
        windy-variant: 9
        lightning: 10
        partlycloudy: '{{ 11 if sun_is_up else 12}}'
        lightning_rainy: '{{ 13 if sun_is_up else 14}}'
        lightning-rainy: '{{ 13 if sun_is_up else 14}}'
        execptional: '{{ 13 if sun_is_up else 14}}'
        clear_night: 15
        clear-night: 15
        unknown: 1
        unavailable: 1

[edwardtfn]

If you wanna play with animation, a good way with Nextion is to have all the frames merged in a single picture side by side, so a 100x100 picture with 10 frames will result in a 1000 x 100 pic, so the single picture is loaded and a timer will crop different parts of the picture in a sequence, making the animation. It's not perfect, but it works and it's easier than controlling hundreds of images (and I think there's a short limit for the number of pics also).

[edwardtfn]

This is the source of the icons used on that example from #1444: https://github.com/pkissling/clock-weather-card/tree/master/src/icons/fill/svg

But I can anticipate Nextion can't handle svg files directly.