UI-SVG ANIMATION by MESSAGE

Dashboard
3

@intergus,

Welcome to Discourse!!

There are a number of issues with your message:

  1. You pass 2 commands in a single message, but you don't have an array. Instead you should have something like this:

    msg.payload = [ {
   // Command 1
},
{
   // Command 2
} ]

    How were you able to send such a payload without getting syntax errors? Because that is even no valid Javascript object...

  2. The "animate" command does not exist. When you read my documentation, you would see that it is "trigger_animation" instead.

    If you would have enabled this setting:

    image

    You would have seen this error indicating it:

    image

  3. The "timingAttributes" does not exist either. Not sure where you got that one? Because I can't even find it anywhere in my documentation.

It is only possible to start or stop an existing animation, which you have specified in the config screen (in the Animation tabsheet). It is not possible to create a new animation from scratch via an input message.

I have quickly assembled an example flow:

image

[{"id":"21bae8584b1425c6","type":"ui_svg_graphics","z":"f3e346780eaa6c3c","group":"28cdac6db4804909","order":14,"width":0,"height":0,"svgString":"<svg x=\"0\" y=\"0\" height=\"100\" viewBox=\"0 0 100 100\" width=\"100\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n<circle id=\"circle_alarm\" cx=\"50\" cy=\"50\" r=\"40\" stroke=\"black\" stroke-width=\"3\" fill=\"green\" /></svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[{"id":"alarm_animation","targetId":"circle_alarm","classValue":"","attributeName":"opacity","transformType":"rotate","fromValue":"0","toValue":"1","trigger":"msg","duration":"1","durationUnit":"s","repeatCount":"0","end":"restore","delay":"1","delayUnit":"s","custom":""}],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":true,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"https://localhost:1880/drawsvg_local/edrawsvg.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 !important;\n}","name":"","x":1360,"y":120,"wires":[[]]},{"id":"1ed420f472e18a45","type":"inject","z":"f3e346780eaa6c3c","name":"Start animation","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"command\":\"update_style\",\"selector\":\"#circle_alarm\",\"attributeName\":\"fill\",\"attributeValue\":\"red\"},{\"command\":\"trigger_animation\",\"selector\":\"#alarm_animation\",\"action\":\"start\"}]","payloadType":"json","x":1140,"y":120,"wires":[["21bae8584b1425c6"]]},{"id":"d75e61f5f21230f4","type":"inject","z":"f3e346780eaa6c3c","name":"Slow down to 5 second","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"command\":\"update_attribute\",\"selector\":\"#alarm_animation\",\"attributeName\":\"dur\",\"attributeValue\":\"5s\"}]","payloadType":"json","x":1120,"y":160,"wires":[["21bae8584b1425c6"]]},{"id":"b078804dec55fb56","type":"inject","z":"f3e346780eaa6c3c","name":"Change animation attribute to radius","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"command\":\"update_attribute\",\"selector\":\"#alarm_animation\",\"attributeName\":\"attributeName\",\"attributeValue\":\"r\"},{\"command\":\"update_attribute\",\"selector\":\"#alarm_animation\",\"attributeName\":\"from\",\"attributeValue\":\"0\"},{\"command\":\"update_attribute\",\"selector\":\"#alarm_animation\",\"attributeName\":\"to\",\"attributeValue\":\"40\"}]","payloadType":"json","x":1080,"y":200,"wires":[["21bae8584b1425c6"]]},{"id":"28cdac6db4804909","type":"ui_group","name":"Two-way interaction demo","tab":"3667e211.c08f0e","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"3667e211.c08f0e","type":"ui_tab","name":"Network diagram","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

The 3 inject buttons in order:

  1. How to start an existing animation (which is defined in the Animation tabsheet).
  2. How to change the duration of an existing animation.
  3. How to change a series of animation attributes, to start animating the radius instead of the opacity.

In this flow, 2 and 3 change the attributes of the animation element. Indeed an animation is an SVG element, which is a child element of an SVG shape element.

Demo:

demo_animation

Bart

2 Likes