So I tried to use this node with your demo, and for the moment it doesn't work. In the dashboard, the plan is not displayed correctly, I have all the code of all my flows that are displayed with it at the end of the group (see screenshot). I obviously have something that's stuck, but right now I have no idea where it's coming from. Do you have any idea?
Debian Buster on a Pi3
Node v11.15.0
NPM 6.12.0
Glad you like it.
As you are familiar with SCADA/HMI I'd be interested in getting your feedback and ideas once you're up and running and have had a chance to evaluate.
Regarding your issue...
Also, please export your flow and paste it here between 3 back ticks
```
like this
```
Cheers.
We just need a "raw" version that we can integrate with uibuilder now 
Here it is.
The flow is the one that comes from the documentation of
The dashboard is: node-red-dashboard 2.14.0
The browsers are Firefox 69 and Chrome Version 77. The same defect on both.
I see that the dashboard can be updated to version 2.17.1 I will update it as soon as possible
The flow:
[{"id":"4e63fd00.2495bc","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"1ff77b84.a2b57c","type":"debug","z":"4e63fd00.2495bc","name":"Floorplan output","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","x":380,"y":200,"wires":[]},{"id":"b801c558.a5fb1","type":"ui_svg_graphics","z":"4e63fd00.2495bc","group":"c1b5b3dc.7b73f","order":1,"width":"14","height":"10","svgString":"<svg preserveAspectRatio=\"none\" x=\"0\" y=\"0\" viewBox=\"0 0 900 710\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <image width=\"889\" height=\"703\" id=\"background\" xlink:href=\"https://www.roomsketcher.com/wp-content/uploads/2016/10/1-Bedroom-Floor-Plans.jpg\"/>\n <circle id=\"pir_living\" cx=\"310\" cy=\"45\" r=\"5\" stroke-width=\"0\" fill=\"#FF0000\"/>\n <text id=\"camera_living\" x=\"310\" y=\"45\" font-family=\"FontAwesome\" fill=\"blue\" stroke=\"black\" font-size=\"35\" text-anchor=\"middle\" alignment-baseline=\"middle\" stroke-width=\"1\"></text>\n</svg>","clickableShapes":[{"targetId":"#camera_living","action":"click","payload":"camera_living","payloadType":"str","topic":"camera_living"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":180,"y":200,"wires":[["1ff77b84.a2b57c"]]},{"id":"c1b5b3dc.7b73f","type":"ui_group","z":"","name":"Floorplan test","tab":"2a142a56.c4529e","disp":true,"width":"14","collapse":false},{"id":"2a142a56.c4529e","type":"ui_tab","z":"","name":"SVG","icon":"dashboard","disabled":false,"hidden":false}]
arghh, after the update all my flows have lost the links between each node.
That's not cool
That is not a supported version. 10.x is the recommended, 12.x should be ok.
https://nodered.org/docs/faq/node-versions
That might be the issue. It's quite old indeed. Please let us know once you're all updated and running once more if that fixed things.
Ps. As you're on a PI, I'd strongly recommend running the installation script detailed in the docs. It should put most things right.
Thank you for all this important information. I will read the proposed documentation and make these updates. I will keep you informed as soon as I have been able to make progress on the subject.
It comes back to my mind that all that is missing now is a "simple" solution for H.A High Availability. For example a Node-Red cluster or master slave solution. I have read some proposed solutions but they are not accessible to me and my limited Linux skills.
Sorry don't hit me I come from the Windows world 
There you go, after really breaking everything.
And fortunately I had Daily backup and help from my son for Linux, the updates allowed me to run the demos offered with SVG.
Time remains to be found to test various scenarios.
Can dashboard elements such as gauges be overlaid on the svg?
Hey @Colin,
based on this discussion I don't think it is possible. But I might be mistaken ...
Is that talking about the same question? I don't want them to popup, I want them permanently there as part of the dashboard.
I suppose though that in fact what I am asking for is one dashboard element overlapping another, which just may not be possible.
Not easily possible. You can of course use a (static) image as a backdrop
Ah ok. One option I can think of is using an SVG based gauge, so everything is SVG.... If you search e.g. in google for "gauge svg codepen", you will find a lot of examples. You could add such a gauge as an SVG symbol, and use it wherever you want on your floorplan. Via input messages you can then control the status of each gauge separately.
I did a similar experiment some time ago for a sprinkler. As you can see there I have used CSS variables inside my symbol to be able to control it easily afterwards via input messages. And if somebody could create such a gauge symbol and share it with the community, that would be awesome. But unfortunately I don't have the time to develop all those different symbols myself. Otherwise I wouldn't have time left to create new nodes...
Yes, I had considered those options. I presume I can have more than svg node on the dashboard, so I suppose I could fit svg nodes round the other nodes, but it would be a bit cludgy obviously.
At this point I suspect you are in ui-builder territory
Just trying the node for the first time - I wanted to try loading an SVG saved from a PowerPoint presentation.
Unfortunately, the svg editor isn't working as I thought?
Edge live throws an error on opening:
The other browsers refuse to allow interaction with the icons in the Document menu that would let me upload a file. Can I not do that?
No console errors from Vivaldi:
Various warnings and errors in Edge Dev:
Julian (@TotallyInformation),
That is indeed confusing. We still have an open issue to remove those menu items. I have always did copy/paste my SVG in the "Source" tabsheet, and then open it with DrawSvg. Only in the latest beta(s) we have positioned DrawSvg as the way to go (instead of manually typing the SVG source itself). So perhaps we need to have a look at those two menu items again ...
But I have very little free time at the moment, due to personal issues. And Steve (@Steve-Mcl) is also very busy at the moment. So it might take some time to implement your request ...
Not a problem Bart, fully understand time issues.
There do appear to be a few usability issues with the embedded editor unfortunately. But I already realised I should paste the svg code in manually. Just not as nice to do: open in text editor, select all, copy, close, open the node, paste, format, ....
Not really spent much time with SVG previously, always found it too complex.
However, the idea of creating an SVG based presentation in PowerPoint, exporting then being able to drive it from Node-RED is very interesting.
That needs a simple presentation wrapper around the SVG and there are a few of those.
Combined with uibuilder, a VueJS component - actually maybe 2, 1 for the slideshow, 1 for each "page" of the slideshow where each page is an SVG - is interesting. The page SVG exposing its elements so that you can control everything from an incoming msg like you do with your node.
Possibly also the ability to control the slideshow itself from incoming msg's - that way, you can have a fully automated dashboard display that would change page when something interesting happens but otherwise perhaps does a standard rotation every minute.
Food for thought indeed.
J - off topic - but ...
I have used the remark.js and impress.js libraries to create presentations in markdown - and of course in that you can have links, svg, live data etc....
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy
