Dashboard- svg problem

[JeromeVISUALS]

Hi all !

I want to use the contrib-ui-svg to get the SVG layout from a hardware controller. I have a test file which is working great in chrome browser, and also tested fine in Method Draw Vector Editor :

However I can't get it to work in Dahboard, I only get a very small part of the drawing. ( the internal node SVG editor does not work as well) .
I tried with code pasted into the node, injected "replace_svg" , with "" escaped or not.... no luck.

The dashboard layout for group and node is set to the max size....

Any idea ?

Thanks !

[JeromeVISUALS]

Hi, no one as an idea ?

here is the node with embedded SVG code , if it helps :

[{"id":"16a953b2.21beec","type":"ui_svg_graphics","z":"8c726783.556348","group":"2908388b.8114b8","order":0,"width":"30","height":"36","svgString":"<svg >\n\t\t<defs>\n\t\t    <linearGradient id=\"frontplate\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n\t\t      <stop offset=\"0%\" style=\"stop-color:rgb(99, 171, 235);stop-opacity:1\" />\n\t\t      <stop offset=\"50%\" style=\"stop-color:rgb(25, 108, 173);stop-opacity:1\" />\n\t\t      <stop offset=\"100%\" style=\"stop-color:rgb(26, 90, 147);stop-opacity:1\" />\n\t\t    </linearGradient>\n\t\t    <linearGradient id=\"topedge\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n\t\t      <stop offset=\"0%\" style=\"stop-color:rgb(13,13,13);stop-opacity:1\" />\n\t\t      <stop offset=\"8%\" style=\"stop-color:rgb(39,39,39);stop-opacity:1\" />\n\t\t      <stop offset=\"15%\" style=\"stop-color:rgb(60,60,60);stop-opacity:1\" />\n\t\t      <stop offset=\"92%\" style=\"stop-color:rgb(76,76,76);stop-opacity:1\" />\n\t\t      <stop offset=\"100%\" style=\"stop-color:rgb(40,40,40);stop-opacity:1\" />\n\t\t    </linearGradient>\n\t\t    <linearGradient id=\"bottomedge\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n\t\t      <stop offset=\"0%\" style=\"stop-color:rgb(86,86,86);stop-opacity:1\" />\n\t\t      <stop offset=\"12%\" style=\"stop-color:rgb(61,61,61);stop-opacity:1\" />\n\t\t      <stop offset=\"92%\" style=\"stop-color:rgb(38,38,38);stop-opacity:1\" />\n\t\t      <stop offset=\"100%\" style=\"stop-color:rgb(37,37,37);stop-opacity:1\" />\n\t\t    </linearGradient>\n\t\t    <linearGradient id=\"sides\" x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n\t\t      <stop offset=\"0%\" style=\"stop-color:rgb(24,24,24);stop-opacity:1\" />\n\t\t      <stop offset=\"1%\" style=\"stop-color:rgb(47,47,47);stop-opacity:1\" />\n\t\t      <stop offset=\"1.2%\" style=\"stop-color:rgb(62,62,62);stop-opacity:1\" />\n\t\t      <stop offset=\"8%\" style=\"stop-color:rgb(80,80,80);stop-opacity:1\" />\n\t\t      <stop offset=\"89%\" style=\"stop-color:rgb(36,36,36);stop-opacity:1\" />\n\t\t      <stop offset=\"93%\" style=\"stop-color:rgb(41,41,41);stop-opacity:1\" />\n\t\t      <stop offset=\"99%\" style=\"stop-color:rgb(36,36,36);stop-opacity:1\" />\n\t\t      <stop offset=\"100%\" style=\"stop-color:rgb(52,52,52);stop-opacity:1\" />\n\t\t    </linearGradient>\n\t\t  </defs>\n\t\t  <style>\n\t\t\t\ttext {font-family:Sans,Arial;}\n\t\t    .sections {\n\t\t    \tstroke: white;\n\t\t    \tstroke-width: 3;\n\t\t    \tfill: gray;\n\t\t    \tfill-opacity: 0.4;\n\t\t    \tstroke-opacity: 0.2;\n\t\t    \tstroke-dasharray: 20, 10;\n\t\t\t   }\n\t\t  </style>\n\t\t<rect width=\"2940\" height=\"172\" x=\"50\" y=\"67\" style=\"fill:url(#topedge);\" />\n\t\t<rect width=\"2940\" height=\"1380\" x=\"50\" y=\"239\" style=\"fill:url(#frontplate);\" />\n\t\t<rect width=\"2940\" height=\"180\" x=\"50\" y=\"1619\" style=\"fill:url(#bottomedge);\" />\n\t\t<rect width=\"60\" height=\"1743\" x=\"0\" y=\"63\" style=\"fill:url(#sides);\" rx=\"10\" ry=\"10\" />\n\t\t<rect width=\"60\" height=\"1743\" x=\"2980\" y=\"63\" style=\"fill:url(#sides);\" rx=\"10\" ry=\"10\" />\n\n\t\t<rect width=\"1052\" height=\"260\" x=\"110\" y=\"270\" rx=\"10\" ry=\"10\" class=\"sections\"/>\n\t\t<rect width=\"1052\" height=\"60\" x=\"110\" y=\"530\" rx=\"10\" ry=\"10\" class=\"sections\"/>\n\t\t<rect width=\"1390\" height=\"140\" x=\"110\" y=\"630\" rx=\"10\" ry=\"10\" class=\"sections\"/>\n\t\t<rect width=\"700\" height=\"140\" x=\"1500\" y=\"630\" rx=\"10\" ry=\"10\" class=\"sections\"/>\n\t\t<rect width=\"2090\" height=\"175\" x=\"110\" y=\"980\" rx=\"10\" ry=\"10\" class=\"sections\"/>\n\t\t<rect width=\"2090\" height=\"175\" x=\"110\" y=\"1355\" rx=\"10\" ry=\"10\" class=\"sections\"/>\n\t</svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":true,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"both","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":"150","name":"svg-graphics","x":970,"y":180,"wires":[["4672821a.2f296c"]]},{"id":"2908388b.8114b8","type":"ui_group","name":"Floorplan test","tab":"a28ff08f.3a822","order":1,"disp":true,"width":"30","collapse":false},{"id":"a28ff08f.3a822","type":"ui_tab","name":"SVG","icon":"dashboard","disabled":false,"hidden":false}]

[BartButenaers]

Hi Jerome,
Have you searched for other discussions about svg dimensions (like e.g. this one)? I see in your svg string above that you have an svg tag without ´width´, ´height´ or ´viewbox´ attributes, so you might start by adding those. I don't work with Node-RED temporarily, so can't give you an updated flow. But you can find many examples on the web, e.g. here.
Bart

[JeromeVISUALS]

Thanks Bart.

Did not know these were mandatory info as the svg would load fine in a browser... I just played with group and node sizes.

Will dig into it, and come back with results.

Cheers

Jerome

[BartButenaers]

@JeromeVISUALS

I just played with group and node sizes.

That way you only tell the Node-RED dashboard how may space it should make available for the SVG. But you also have to tell the SVG to make use of that available space, by filling it. Otherwise you end up with a lot of empty space...

[JeromeVISUALS]

Hi Bart,

thanks a lot for helping me moving in the right direction. Still have some tuning to do, but I can see improvment here

Have a great day.

Jerome