Feature Request: Animate svg cell-ids (e.g. changing size)

[fjkbit]

Hi, in the old flowcharting panel there was the option to animate your svg. e.g. displaying filling levels of a tank or vessel by changing the height of an form based on your data.

So far I didn't see the option to animate your svgs yet. Any plans to integrate this in your .yaml?

Thanks for your info!

[andymchugh]

I'm not planning to add general animation support at the moment. I added the draw.io flowAnimation as a unique drive because you get it in draw.io just by selecting a check box.

But I could add a general purpose dom-element-attribute drive if that's wanted. i.e. changing the dimensions of a rect, circle, etc. based off of timeseries.

In yaml, was thinking about doing that based off of cell-id->elementType->attribute. i.e. on cell-abc (which identifies a dom element tree), drive elemetType='rect', attribute='width' based off of data. It sounds like that could give you the 'fill' levels you describe whilst keeping the panel ignorant of the content. As the attribute has to pre-exist this would also be compatible with the dompurify step that's done prior to adjustments. Would that be useful to you?

[fjkbit]

This sounds like a plan. I'd have to manipulate my query a bit to get the relation right but in general this could work. Thanks for your quick response and your dev dedication!

[andymchugh]

OK, great. Will get this done.

[andymchugh]

When I looked into this there was a way to do fill levels leveraging clip-path, so I've added a fillLevel drive that under the hood leverages clip-path. With this change you don't get the ability to adjust anything's size, but you do get the ability to apply a fill-level to pretty much any shape, including shapes drawn with lines via 'path'. See yaml_defs for the config change.

This is now landed and will be in the next build. Can you confirm (conceptually) this meets your ask?

[fjkbit]

Hi Andy, This is actually a pretty nice Solution and absolutely a legit way for my Problem. last time I did a workaround with multiple elements. This wont be needed now. Thanks for implementing this! When are you planning to publishing your built? Kind regards

[andymchugh]

great :). It should be out in a week or two.

[andymchugh]

This is now published as part of 1.13.0.

There's a demonstration dashboard

and the corresponding svg

and the corresponding yaml

[fjkbit]

Hi I just wanted to give you feedback, that your implementation works perfectly once you get the hang of it! Thanks for your dedication for this plugin! This gives so many visualization options!

[andymchugh]

Great 🙂. Thanks for the feedback