A custom, scriptable SVG shape

[algismo]

I have a challenge in my project to make a custom view of an industrial process. The view must be dynamic, adapt to TAG values fetched from controllers. I can't just draw objects statically with SVG/FUXA and change colors, show/hide them or change position.

I was brooding on this topic for a while thinking how would it be best to make this happen in FUXA. There are no easy options to make a custom gauge/control. That could be an option.

Then I thought that a sriptable SVG shape would be exactly what I need here. So I started making one in FUXA. My rough plan is:

1. Add a new button among other shapes, called "Scripted Shape".
2. When added to editor, it would be a simple, empty SVG rectangle. The rectangle would act as a surface for drawing other SVG objects.
3. In custom settings dialog it will be possible to configure: custom javascript file location (or FUXA script function name); multiple tags to be available for the script.
4. To the script the base rectangle will be available. Then user with a java-script can dynamically create SVG objects and manipulate SVG dom and attributes based on tag values.

What do you think? Has anybody better ideas?

[unocelli]

Hi, yes, I love the idea, that's why I had planned in the Resources area and to be able to create like a library of complex SVG shapes with graphic scripts, and all by defining only variables. Then when adding to the Views, via a dialog you associate the variables with the desired tags.

Also give the possibility to import and browse the SVG chapes libraries from an external server, so that they can be sharer between the users.

[MatthewReed303]

@unocelli How do we use the resources to create SVGs and animations etc

[kevin100702]

https://github.com/bartbutenaers/node-red-contrib-ui-svg This is a component of node-red, which provides some operation methods for SVG. I think his approach has certain reference value.