[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

11 Likes

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 ...

2 Likes

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.

1 Like