More understanding on SVG new page

[AungKL]

Continuing the discussion from Node-red-contrib-ui-svg example flow not working properly:

Hi,
I've basic knowledge of SVG drawing, but I don't understand the drawing of SVG of that example. My question is not directly related to node red, but I cannot just continue to work.
Can anyone explain how to draw SVG for new page as described in above example? It's something like overlay drawing. I've attached node red file (json) as well.

Regards,
Aung
HMI New Page.json (24.0 KB)

[Steve-Mcl]

@AungKL

It's something like overlay drawing

Yes, it uses layers & shows / hides the layers.

Unfortunately (and @BartButenaers will correct me if necessary) the author of the built in editor removed the layer manager feature so your options are...

1. Pay for his "expert profile" to get access to layer manager
2. Create layers by hand or by using another SVG node instance then copy/paste the SVG generated into one SVG node in <g> tags
   1. Look in the SVG tab - you will see page 2 is a g (group) element and is hidden by default <g id="page2" display="none">
   2. Look at the "event" TAB and you will see how the main page is hidden and page 2 is shown
3. Use an external SVG editor & paste SVG into the SVG tab
   1. use the same layout of groups (defaulted to hidden) for your additional pages

[BartButenaers]

Yes indeed, the explanation of @Steve-Mcl is 100% correct.

[AungKL]

Thank you very much, now I can see page2.
I think I need to learn more on SVG, which book or web link do you recommend?

Regards,
Aung