[ANNOUNCE] Layer manager in SVG nodes

Hi folks,

Some time ago, @Steve-Mcl shared a demo to simulate a HMI device via our Svg-Node. To accomplish that, Steve had to draw a number of screens that will be shown one by one in the dashboard. However he had a big issue to draw those screens with DrawSVG (= the SVG editor that we have integrated into our Svg node): DrawSvg had no layer manager, which means that - while designing a screen - that all other screens were also visible. So it was a mess of multiple screens rendered all together, which is very hard to work with.

To solve that problem, I have contacted again Joseph Liard (the author of DrawSvg). And although this functionality was not on his roadmap, he has been so kind to implement a layer manager in DrawSvg 7.6. :partying_face: :champagne: So I would like to thank Joseph again for supporting our community!!

The layer manager from DrawSvg 7.6 is now available in both our SVG nodes:

  • node-red-contrib-ui-svg uses the DrawSvg cloud editor, which is upgraded to 7.6. So there is no new version of this node available, since only the cloud editor is upgraded...
  • node-red-contrib-drawsvg has been upgraded to version 1.1.0, which can host a local version of DrawSvg 7.6.

The layer manager is available in the top menu:
image
Here is a small demo that demonstrates how easy it has become to work with layers, e.g. to draw all your FontAwesome icons on a separate layer (and every layer can be showed or hided):

BTW Joseph has provided some showcases, for those who want tot start using his layer manager:
http://drawsvg.org/drawsvg.html#showcase:manage-layers
http://drawsvg.org/drawsvg.html#showcase:style-layers
http://drawsvg.org/drawsvg.html#showcase:change-layer

Have fun with it!
Bart

Great !, the option of using it offline makes its use much easier.
Only a small mistake:
this makes me nervous
image

Hi Anxo,
I have fixed the typo on Github, so will be fixed on npm with the next release. Meanwhile try to keep your nerves under control ...

FYI version 1.2.0 is now available in the palette:

image

This contains an offline edition of DrawSvg version 8.0, which offers horizontal/vertical line drawing, triangle drawing, ... The full release notes from DrawSvg can be found here.