Animation SVG object by node-red-contrib-ui-svg

General
1

Dears,

I am using the node-red-contrib-ui-svg to shows an industrial dashboard. I would have an animation where a rectangle can be expand and retract, to show like filling tank moviment. But I don't get find the correct effect using the Animate guide of the svg node. Can someone help me?

Thanks

2

Hi @bobfield,

Your question looked very simple to me. Just animation a gradientFill offset property and we are ready. But it seems indeed not that easy. Although I thought I have already created something like that. But can't find it anymore, so perhaps I didn't...

So I wouldn't know at the moment how to animate the fill of any shape.

However I managed to implement something for a rectangle:

liquid_level

[{"id":"7e84c549.092b4c","type":"inject","z":"f6f2187d.f17ca8","name":"Start animation","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"trigger_animation\",\"selector\":\"[id^='box_height_animation']\",\"action\":\"start\"}","payloadType":"json","x":1020,"y":340,"wires":[["030150f711975909"]]},{"id":"5310b15.10e675","type":"inject","z":"f6f2187d.f17ca8","name":"Stop animation","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"trigger_animation\",\"selector\":\"[id^='box_height_animation']\",\"action\":\"stop\"}","payloadType":"json","x":1020,"y":380,"wires":[["030150f711975909"]]},{"id":"030150f711975909","type":"ui_svg_graphics","z":"f6f2187d.f17ca8","group":"eac9211dd6c76f9b","order":1,"width":0,"height":0,"svgString":"<svg width=\"200\" height=\"200\" viewBox=\"0 0 200 200\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"50\" y=\"50\" width=\"100\" height=\"150\" style=\"fill:CornflowerBlue\"></rect>\n<rect x=\"50\" y=\"50\" width=\"100\" height=\"150\" style=\"fill:white\" id=\"water_rectangle\"></rect>\n<rect x=\"50\" y=\"50\" width=\"100\" height=\"150\" style=\"stroke:black;fill:none\"></rect>\n</svg>\n","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[{"id":"box_height_animation","targetId":"water_rectangle","classValue":"","attributeName":"height","transformType":"rotate","fromValue":"0","toValue":"150","trigger":"msg","duration":"4","durationUnit":"s","repeatCount":"1","end":"freeze","delay":"1","delayUnit":"s","custom":""}],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n    color: var(--nr-dashboard-widgetColor);\n    fill: currentColor !important;\n}\ndiv.ui-svg path {\n    fill: inherit;\n}","name":"","x":1260,"y":340,"wires":[[]]},{"id":"eac9211dd6c76f9b","type":"ui_group","name":"Rectangle animation demo","tab":"b7631828414c3b00","order":1,"disp":true,"width":"6","collapse":false,"className":""},{"id":"b7631828414c3b00","type":"ui_tab","name":"SVG stuff","icon":"dashboard","disabled":false,"hidden":false}]

However it is more a workaround, that contains 3 rectangles on top of each other:

  1. First I draw a blue filled rectangle
  2. On top of that I draw a white filled rectangle
  3. On top of that I draw a non-filled rectangle to show a black border

I animate the height of the white rectangle. Because if you only create 1 (blue filled) rectangle and you animate its height, then the water will fill from top to down (instead from bottom to top). Because the Y axis is going downwards.

If anybody knows a cleaner solution, don't hesistate to share it here!!!!!!

Bart

3

Not sure about cleaner (or even 100% relevant) but similar & maybe useful to someone...

1 Like
4

Hi Steve,

Thanks for the link! I had yesterday also tried to use a fill gradient to accomplish this, but after a number of experiments I quitted. And then I started the above flow by using duplicate shapes on top of each other.

Tonight I found a solution, and I have written a new tutorial on our wiki page, which for example explains how to fill any path simply using a linear gradient:

svg_fill_path

Note that I failed to create an animation, by animating the offset of the linear gradient automatically. Not sure why it fails, because in this StackOverflow discussion they say it can be done (using percent offset values).

1 Like
5

Hi BartButenaers,

Thanks for your help. Your solution solved my problem. It brings a great help for my application.

Best regards,

Roberto

1 Like
6

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