# \[Announce\] node-red-contrib-ui-svg
**URL:** https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063
**Category:** Share Your Nodes
**Created:** [23 October 2019 21:38 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063 "2019-10-23T21:38:54Z")
**Posts on this page:** 20
**Page:** 2
### Author:  [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)
#### Post date: [30 October 2019 12:29 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/23 "2019-10-30T12:29:03Z")
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
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [30 October 2019 14:51 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/24 "2019-10-30T14:51:41Z")
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...
- What version of dashboard?
- What browser?
Also, please export your flow and paste it here between 3 back ticks
`````
`like this`
`````
Cheers.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [30 October 2019 15:12 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/25 "2019-10-30T15:12:04Z")
We just need a "raw" version that we can integrate with uibuilder now 😉
---
### Author:  [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)
#### Post date: [30 October 2019 15:37 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/26 "2019-10-30T15:37:29Z")
Here it is.
The flow is the one that comes from the documentation of
> **[node-red-contrib-ui-svg](https://flows.nodered.org/node/node-red-contrib-ui-svg)**
>
> A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard
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":"","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}] ` ` `
---
### Author:  [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)
#### Post date: [30 October 2019 15:56 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/27 "2019-10-30T15:56:27Z")
arghh, after the update all my flows have lost the links between each node.
That's not cool
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [30 October 2019 16:14 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/28 "2019-10-30T16:14:22Z")
> [@Jean-Luc](#):
>
> Node v11.15.0
That is not a supported version. 10.x is the recommended, 12.x should be ok.
[https://nodered.org/docs/faq/node-versions](https://nodered.org/docs/faq/node-versions)
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [30 October 2019 16:42 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/29 "2019-10-30T16:42:07Z")
> [@Jean-Luc](#):
>
> The dashboard is: node-red-dashboard 2.14.0
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.
---
### Author:  [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)
#### Post date: [30 October 2019 16:54 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/30 "2019-10-30T16:54:18Z")
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 🤫
```auto
```
---
### Author:  [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)
#### Post date: [31 October 2019 18:29 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/31 "2019-10-31T18:29:36Z")
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.
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [31 October 2019 21:32 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/32 "2019-10-31T21:32:54Z")
Can dashboard elements such as gauges be overlaid on the svg?
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [31 October 2019 21:46 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/33 "2019-10-31T21:46:27Z")
Hey @Colin,
based on this [discussion](https://discourse.nodered.org/t/dashboard-ui-node-in-popup/14640) I don't think it is possible. But I might be mistaken ...
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [1 November 2019 08:25 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/34 "2019-11-01T08:25:31Z")
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.
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [1 November 2019 09:47 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/35 "2019-11-01T09:47:09Z")
Not easily possible. You can of course use a (static) image as a backdrop
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [1 November 2019 10:18 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/36 "2019-11-01T10:18:36Z")
> [@Colin](#):
>
> want them permanently there as part of the dashboard
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](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/12) 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...
---
### Author:  [@Colin](https://discourse.nodered.org/u/Colin)
#### Post date: [1 November 2019 10:36 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/37 "2019-11-01T10:36:04Z")
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.
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [1 November 2019 11:32 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/38 "2019-11-01T11:32:43Z")
At this point I suspect you are in ui-builder territory
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [1 November 2019 11:51 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/39 "2019-11-01T11:51:11Z")
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:
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [1 November 2019 13:18 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/40 "2019-11-01T13:18:10Z")
> [@TotallyInformation](#):
>
> Unfortunately, the svg editor isn't working as I thought?
Julian (@TotallyInformation),
That is indeed confusing. We still have an open [issue](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/32) 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 ...
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [1 November 2019 13:30 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/41 "2019-11-01T13:30:55Z")
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.
---
### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [1 November 2019 13:45 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/42 "2019-11-01T13:45:30Z")
J - off topic - but ...
I have used the [remark.js](https://remarkjs.com/#1) and impress.js libraries to create presentations in markdown - and of course in that you can have links, svg, live data etc....
[Previous page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063.md?page=1)
[Next page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063.md?page=3)