Flow widget

Tags: #<Tag:0x00007fedd27bfaf8>

Hi everyone, I hope you are safe and well.

I created a widget to animate my energy flow on a dashboard. An example can be seen here…

or without the exciting animation, in this image (the widget is just the line with animated arrows, all the icons are just uploaded pictures.):

The code is here.

It’s a pretty basic animated gif but it has achieved what I was hoping for. Options include black or white and thresholds for slow and fast flow. You are welcome to suggest improvements. If anyone would like to suggest how I could draw the animation in html instead of using gifs, that might be something I could look at during lockdown!


The animation for the 3-phase waveforms in ‘Learn’ is SVG. The basic drawing was done in Inkscape, then the file edited by hand to animate.

Most browsers will handle SVG.

Interesting. I like the smoothness!

The whole file is 17.2 kB, and a big chunk, about half, is the waveforms. The script to animate is 36 lines, less than 900 Bytes.


Thinking about it - you might be able to do it with CSS directly in the web browser, without using an animated image file.

1 Like