Animated weather icons: May I have your votes please

[Lokonli]

As reported in another post the animated weather icons used in Dashticz result in quite some processor load.

Further, I found a bug that leads to further increasing processor load over time.

The current animated weather icons within Dashticz make use of relatively old (?) technology (canvas block).

To reduce processor load two alternatives exist:
* SVG icons
* HTML/CSS

Examples of SVG icons:
https://bas.dev/projects/weather-icons
https://www.amcharts.com/free-animated- ... her-icons/

Examples of css/html based weather icons:
https://devsnap.me/css-weather-icons

For now, I think I will go for: https://bas.dev/projects/weather-icons

weathericons.jpg (27.55 KiB) Viewed 1698 times

The picture above shows static, non-animated weather icons, because the forum doesn't support svg files. If you want to see animated versions click on one of the links.

Please let me know your preference this week. This weekend I'll remove the current animated weather icons, and replace them with the alternative solution that is having most votes.

[EdwinK]

I like the one from https://bas.dev/projects/weather-icons

[madpatrick]

looking good !
I'll also go for : https://bas.dev/projects/weather-icons

Does it need any change in the blocks ?

[epost]

I like the one from https://bas.dev/projects/weather-icons

[Krenstik]

I love this as well:

https://bas.dev/projects/weather-icons

[HansieNL]

I like these icons: https://www.alessioatzeni.com/portfolio/meteocons/
Is it possible to have an option to use your own icons or make that things too complex?

[Lokonli]

Most votes for Bas.
First proto is working:

basmilius.jpg (71.99 KiB) Viewed 1651 times

The icons are animated (but you can't see)

This are the line-icons. There is also set of filled icons.

I will check Alessio as well.

[Lokonli]

I like these icons: https://www.alessioatzeni.com/portfolio/meteocons/
Is it possible to have an option to use your own icons or make that things too complex?

This are static icons, but they are easy to add. I'll do that as well.

[Lokonli]

I've just released 3.8.7

There is a new block parameter for the weatherblock: icons

Set this to 'line', 'fill', 'static' or 'meteo'.

weather_icons.jpg (93.58 KiB) Viewed 1559 times

The top 3 icon sets in the picture are dynamic icons (but you can't see in the static picture above)

[EdwinK]

Like it

[sammyke007]

I like it a lot!
One request: is a static 'line' (with color) also an option please?

[Lokonli]

I like it a lot!
One request: is a static 'line' (with color) also an option please?

You have to change the svg files a little. I don't have plans to do that, but you can do it yourself.

Create a new folder: ./custom/weathericons/linestatic
Copy all files from ./img/weathericons/line to ./custom/weathericons/linestatic

set the weather block parameter 'icons' to 'linestatic'

Open the svg files in the linestatic folder, and remove the transform part.
As an example, for 01d.svg (rotating sum) remove the following part to make it static:

Code: Select all

<animateTransform attributeName="transform" dur="45s" from="0 32 32" repeatCount="indefinite" to="360 32 32" type="rotate"/>

You can also change colors if needed. The following part defines the color, which can be easily changed as well:

Code: Select all

stroke="#f59e0b"

Enjoy

If more people ask for the static line icons, I'll add them as predefined set.

[jake]

I like it too.

The icons are quite a bit bigger than previous ones and therefore taking more real estate than is good for my layout. Can they be scaled through css? If so, how can this be done?

[Lokonli]

I like it too.

The icons are quite a bit bigger than previous ones and therefore taking more real estate than is good for my layout. Can they be scaled through css? If so, how can this be done?

See here for a temporarily fix:
viewtopic.php?p=283390#p283390

I'll make the icons somewhat smaller.

[sammyke007]

I like it a lot!
One request: is a static 'line' (with color) also an option please?

You have to change the svg files a little. I don't have plans to do that, but you can do it yourself.

Create a new folder: ./custom/weathericons/linestatic
Copy all files from ./img/weathericons/line to ./custom/weathericons/linestatic

set the weather block parameter 'icons' to 'linestatic'

Open the svg files in the linestatic folder, and remove the transform part.
As an example, for 01d.svg (rotating sum) remove the following part to make it static:

Code: Select all

<animateTransform attributeName="transform" dur="45s" from="0 32 32" repeatCount="indefinite" to="360 32 32" type="rotate"/>

You can also change colors if needed. The following part defines the color, which can be easily changed as well:

Code: Select all

stroke="#f59e0b"

Enjoy

If more people ask for the static line icons, I'll add them as predefined set.

Already on it, but I'll have to continue with the last files later this evening. If you like, I can merge it to your branch after testing?

[madpatrick]

I like it too.

The icons are quite a bit bigger than previous ones and therefore taking more real estate than is good for my layout. Can they be scaled through css? If so, how can this be done?

See here for a temporarily fix:
viewtopic.php?p=283390#p283390

I'll make the icons somewhat smaller.

I like this size. If you ask me it much better

[Lokonli]

I like it too.

The icons are quite a bit bigger than previous ones and therefore taking more real estate than is good for my layout. Can they be scaled through css? If so, how can this be done?

See here for a temporarily fix:
viewtopic.php?p=283390#p283390

I'll make the icons somewhat smaller.

I like this size. If you ask me it much better

The big ones or the small ones? (I'm talking about the icons now)

[madpatrick]

Uhhhh. I think the big ones.
I didn’t change any setting, but did only the git update yesterday.
The icons were changed to the animated afterwards.
So, the default setting or default icons ?

How can i check this?

[whoami]

I like it a lot!
One request: is a static 'line' (with color) also an option please?

You have to change the svg files a little. I don't have plans to do that, but you can do it yourself.

Create a new folder: ./custom/weathericons/linestatic
Copy all files from ./img/weathericons/line to ./custom/weathericons/linestatic

set the weather block parameter 'icons' to 'linestatic'

Open the svg files in the linestatic folder, and remove the transform part.
As an example, for 01d.svg (rotating sum) remove the following part to make it static:

Code: Select all

<animateTransform attributeName="transform" dur="45s" from="0 32 32" repeatCount="indefinite" to="360 32 32" type="rotate"/>

You can also change colors if needed. The following part defines the color, which can be easily changed as well:

Code: Select all

stroke="#f59e0b"

Enjoy

If more people ask for the static line icons, I'll add them as predefined set.

Yes please, thank you for adjusting this.
Static coloured icons I would appreciate.

It still looks like the animated icons are still using a lot of cpu.
Do you see any improvements?

[sammyke007]

Yeah, I'm using an "older" Huawei Mediapad T5 and static is a lot better instead of moving. It keeps lagging. Old tab, I know, but good enough for Dashzticz.

You can pull the latest beta, it contains the 'linestatic' option since 7/12/21.