There are number of options to reuse a single group of N svg elements all over the place:
- The new SVG symbols with own coordinate system (i.e. own viewport)
- The old SVG definitions
- ...
But since I want to keep it simple, I think the SVG definitions are the way to go. Otherwise I'm afraid that user will become crazy of all the viewports ...
A simple example of something I was thinking about:
<svg>
<defs>
<g id="sprinkler_widget">
<!-- Here will be all the N svg elements (incl. 'animate' elements) that can represent and animate a sprinkler -->
</g>
</defs>
<!-- Let' put the first sprinkler on my floorplan -->
<use x = "100" y = "100" xlink:href = "#sprinkler_widget"/>
<!-- And let's put another sprinkler on my floorplan at another location -->
<use x = "200" y = "150" xlink:href = "#sprinkler_widget"/>
</svg>
So this way you have 1 sprinkler definition, whick I can (re)use N times at different locations in my SVG drawing. Although I'm not sure whether I can animate them separately: will need to test that if I have time ...
But where does a user needs to find the sprinkler_widget definition?
- He can search on my Github page for examples and paste them manually in his SVG editor
- I could add a number of widgets in my node (which people have shared with me), and I insert the definitions automatically when I see that the are 'use'd somewhere ... But what if a user uses an external tool to edit his SVG? Then he doesn't have the definitions, so he cannot create no 'use' elements for them ...
[EDIT 11:54] Perhaps can do it like this:
- Users contribute their widget to my node (via pull-request for example)
- When you edit the SVG string manually, you can just use it. I will add the definition automatically when I see it is being used. Then only the used definitions are being send to the dashboard afterwards, to reduce connection bandwith...
- When you want to edit the SVG string via an editor: I have another Github issue to integrate the SVG-edit editor with this node. In that case I could:
- automatically include ALL definitions in the SVG string (when I send the string to the editor).
- so you can use the definitions now in the SVG-edit editor.
- when you return back to Node-RED, I remove those definitions again from the SVG string (since the definitions that are used will be included automatically afterwards : see point '2')
