Button Iconify animated icon stops quickly, how to "reload" it to animate again?

Dashboard
1

Hi !!
I try to build a weather dashboard using iconify and a dashboard push button.

One of the icon I'd like to use is this one:

The animation of rain drop is quite short (maybe less than hald a second).

So I was thinking: maybe I could "reload"/"restart" the icon every few seconds, so it would animate in an intermittent way.

But if I send the same icon several time to my button, nothing happen.

Is there a way I could say the button "please reload/reanimate the icon for me" :slight_smile:

it seems to affect only some icons (rain, snow..) while some other just move continuously (sun, wind...)

2

What you can do is to modify the svg to have repeated animations, save it to your static folder use as custom icon
Here's the modified svg, rains all the time.

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 512 512"><defs><linearGradient id="meteoconsRainFill0" x1="99.5" x2="232.6" y1="30.7" y2="261.4" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f3f7fe"/><stop offset=".5" stop-color="#f3f7fe"/><stop offset="1" stop-color="#deeafb"/></linearGradient><linearGradient id="meteoconsRainFill1" x1="1381.3" x2="1399.5" y1="-1144.7" y2="-1097.4" gradientTransform="rotate(-9 8002.567 8233.063)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0b65ed"/><stop offset=".5" stop-color="#0a5ad4"/><stop offset="1" stop-color="#0950bc"/></linearGradient><linearGradient id="meteoconsRainFill2" x1="1436.7" x2="1454.9" y1="-1137" y2="-1089.7" gradientTransform="rotate(-9 8009.537 8233.037)" href="#meteoconsRainFill1"/><linearGradient id="meteoconsRainFill3" x1="1492.1" x2="1510.3" y1="-1129.3" y2="-1082.1" gradientTransform="rotate(-9 8016.566 8233.078)" href="#meteoconsRainFill1"/><symbol id="meteoconsRainFill4" viewBox="0 0 350 222"><path fill="url(#meteoconsRainFill0)" stroke="#e6effc" stroke-miterlimit="10" stroke-width="6" d="m291 107l-2.5.1A83.9 83.9 0 0 0 135.6 43A56 56 0 0 0 51 91a56.6 56.6 0 0 0 .8 9A60 60 0 0 0 63 219l4-.2v.2h224a56 56 0 0 0 0-112Z"/></symbol><symbol id="meteoconsRainFill5" viewBox="0 0 129 57"><path fill="url(#meteoconsRainFill1)" stroke="#0a5ad4" stroke-miterlimit="10" d="M8.5 56.5a8 8 0 0 1-8-8v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-8 8Z" opacity="1">
<animateTransform repeatCount="indefinite" id="meteoconsRainFill6" additive="sum" attributeName="transform" begin="0s; x1.end+.33s" dur=".67s" type="translate" values="0 -60; 0 60"/><animate id="meteoconsRainFill7" attributeName="opacity" begin="0s; y1.end+.33s" dur=".67s" keyTimes="0; .25; 1" values="0; 1; 0"/></path><path fill="url(#meteoconsRainFill2)" stroke="#0a5ad4" stroke-miterlimit="10" d="M64.5 56.5a8 8 0 0 1-8-8v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-8 8Z" opacity="1"><animateTransform repeatCount="indefinite" id="meteoconsRainFill8" additive="sum" attributeName="transform" begin=".33s; x2.end+.33s" dur=".67s" type="translate" values="0 -60; 0 60"/><animate id="meteoconsRainFill9" attributeName="opacity" begin=".33s; y2.end+.33s" dur=".67s" keyTimes="0; .25; 1" values="0; 1; 0"/></path><path fill="url(#meteoconsRainFill3)" stroke="#0a5ad4" stroke-miterlimit="10" d="M120.5 56.5a8 8 0 0 1-8-8v-40a8 8 0 0 1 16 0v40a8 8 0 0 1-8 8Z" opacity="1"><animateTransform repeatCount="indefinite" id="meteoconsRainFilla" additive="sum" attributeName="transform" begin="-.33s; x3.end+.33s" dur=".67s" type="translate" values="0 -60; 0 60"/><animate id="meteoconsRainFillb" attributeName="opacity" begin="-.33s; y3.end+.33s" dur=".67s" keyTimes="0; .25; 1" values="0; 1; 0"/></path></symbol></defs><use width="350" height="222" href="#meteoconsRainFill4" transform="translate(81 145)"/><use width="129" height="57" href="#meteoconsRainFill5" transform="translate(191.5 343.5)"/></svg>
3

Thank you !!
I will have to struggle a bit with style & sizing, but it works !!

4

This rise a new question... is it possible to sent some svg code to set a button icon directly from flow msg ?

Background : for example change animation speed based on rain rate

5

Yes. You can prepare CSS and use class names to apply different styles (including animation speeds)

Read the built in help for the node - it tells you how to set classes on a node via a msg property

1 Like
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.