I would like to develop an animation that would look like this. This is an example:
I'm not sure where to start, not being a developer at all, I'm wondering if there is a tool like Node red that would allow me to achieve this goal.
I already used the SVG node into NR to change the colors of a drawing according to defined thresholds. (Thanks to @BartButenaers )
Now when to make this kind of animation there is a gap.
So my request is:
Do you have ideas, tracks to carry out an animation which is controlled by variables, conditions.
Typically the direction of the current, to name but one, which goes left, right, up or down. Obviously this should be displayed in the dashboard
I am well aware of my limited skills and this idea is perhaps too ambitious for a non-programmer. But I did manage to build a whole set with Node red, maybe there is such a tool to build an animation. Nothing ventured, nothing gained.
Thanks to all the Node red community for your feedbacks.
Surely this animation was created with CSS which is a language for animation, effects, decoration, etc. (so it is a domain specific language). It is not difficult to learn however it takes time to reach a level where you would produce such nice effects.
You can find some ideas here. Personally I would animate the stroke-dashoffset css property. Because the you apply a dashed style to your line, and then you animate the offset, which means the dashes will start moving along the line.
By increasing or decreasing the offset, you can specify in which direction the dashes will have to move.
You can also apply this to e.g. polylines, if you need angles like in your screenshot.
@Andrei So yes indeed, this animation comes from there and this person is indeed using CSS. I think indeed that the effort is great to just make an animation
@BartButenaers Nice example of a dot following a line. So I'm thinking that there must be a tool that allows you to draw and then generate code. What seems complicated to me is to animate it according to the energy flows which can go in all directions according to the state of the consumers / producers.
I will obviously dive into stroke-dashoffset, I understand the idea, however I think I'm starting from too far
I wonder if with the help of the node-red-contrib-ui-media I could not simply display pre-made Gif images in the screen according to the different possible states. There aren't many of them. It's not the most elegant thing to do, but it's quickly within my capabilities
Seems that they use (in your linked page) another css property offset-distance, which they change from 0% to 100%. There will be multiple ways to achieve this. I'm always having a hard time with css...
