UI-SVG ANIMATION by MESSAGE

[intergus]

Sorry for my english, i am spanish.

I need create one animation by message. i dont trigger, i need create. I dont understand why is a problem with sentence similar by example:

    msg.payload = {
       "command": "update_style",
       "selector": "#circle_alarm",
       "attributeName": "fill",
       "attributeValue": "red"
    },
    {
      "command": "animate",
      "selector": "#circle_alarm",
      "attributeName": "opacity",
      "timingAttributes": {
          "dur": "1s", 
          "values": "0;1;0", 
          "repeatCount": "indefinite", 
          "begin": "0.1"
      }
    }

This will be very interesting for a bigger dinamic control of the elements or entities of a SVG in our dashboards.

Anybody with a solution for control by message of one animation?
Thanks
another one, sorry by my english

[intergus]

I can create 2 circles.
One with color neutral and visibility=visible and another with color red and the animation write in the code of the SVG and this last circle with visibility=hidden.
With this only need change the attribute visibility of the 2 circles, but i think than this is fudge!!

[BartButenaers]

@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:

   

   You would have seen this error indicating it:

   

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:

[{"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:

Bart