Flow widget

Emoncms
1

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…

http://emonpi.yoursupport.biz/dashboard/view?id=9

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

flow-dashboard
flow-dashboard733×431 29.7 KB

The code is here.
https://github.com/cmcgerty/dashboard/tree/master/widget/flow

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!

Cheers
Colin

2

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.

3

Interesting. I like the smoothness!

4

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.

2 Likes
5

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
6

Hi.

As suggested above, I’ve changed this animation to CSS and it’s much smoother now. It’s also better supported in more browsers.

http://emonpi.yoursupport.biz/dashboard/view/flow

I’m really satisfied with this little project, I may find an old tablet and mount it in the kitchen or something. If you were logged in you’d be able to click on the icons for more details. The simple black and white battery is also a widget.

I think this sort of simple view is an example of how emonCMS can boil down what it’s great at and make it really accessible to more people so they aren’t forced to use Owl Intuition!

1 Like