# \[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:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [23 October 2019 21:38 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/1 "2019-10-23T21:38:54Z")

</div>

Hi folks,

After some beta releases, Steve (@Steve-Mcl) and I proudly announce that our [node-red-contrib-ui-svg](https://github.com/bartbutenaers/node-red-contrib-ui-svg) node is finally available on NPM (version **1.2.2** ). 🍾 🥳 🍺 🎂

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/543292683a279e4d163bee97c1e188af6ebe4c95.png)  
We have spend an awful lot of free time on it, so we hope you enjoy it. Now it is finally possible to create dual-way interactive vector graphics in your Node-RED dashboard, for example to create a floorplan to control your smart home.

We would also like to thank again our partner Joseph Liard (the author of [DrawSvg](http://www.drawsvg.org/home-en.html#tools)), for implementing our feature requests to integrate his drawing editor into our node.

All '_constructive_' feedback is more than welcome!

Have fun!!

Steve and Bart

---

<div class="post-metadata">

**Author:** ![jmorris644](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jmorris644/32/31964_2.png) [@jmorris644](https://discourse.nodered.org/u/jmorris644)\
**Post date:** [23 October 2019 22:24 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/2 "2019-10-23T22:24:19Z")

</div>

That is great news!! Congratulations. I look forward to playing with it even more!!

Joe

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [24 October 2019 04:32 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/3 "2019-10-24T04:32:07Z")

</div>

Nice work you both. 😀  
I will switch to the NPM version right away.

---

<div class="post-metadata">

**Author:** ![mtoko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mtoko/32/138_2.png) [@mtoko](https://discourse.nodered.org/u/mtoko)\
**Post date:** [24 October 2019 08:53 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/5 "2019-10-24T08:53:37Z")

</div>

Great work, thanks for all the effort!!

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [24 October 2019 09:27 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/6 "2019-10-24T09:27:07Z")

</div>

It's good to see corroboration between forum members jointly developing great nodes, whilst still involving the community every step of the way.  
Nice work guy's!

---

<div class="post-metadata">

**Author:** ![pelajossss](https://avatars.discourse-cdn.com/v4/letter/p/b782af/32.png) [@pelajossss](https://discourse.nodered.org/u/pelajossss)\
**Post date:** [24 October 2019 19:31 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/7 "2019-10-24T19:31:57Z")

</div>

Hello  
I am not a programmer, I am an electrician, I really like the Node-red, it helps us a lot with automations.

I try to test your node.  
I can't open the Open SVG Editor, a white window appears and blocks the Node-red.

Node-Red is on an Odroid C-1 with Ubuntu 18.04.  
https: // ip: 1880 -\> self-signed  
nodejs 10.17  
npm 6.12

It has been tested since.  
.- Debian Buster firefox a chrome.  
.- Windows 10 Opera and the latest version of Firefox.

Good job ,,,, regards

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [24 October 2019 20:07 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/8 "2019-10-24T20:07:42Z")

</div>

Hi @pelajossss,

We use DrawSvg from a **cloud service** , which is hosted at [http://www.drawsvg.org/drawsvg.html](http://www.drawsvg.org/drawsvg.html).

1. Is that URL filled in on your 'Settings' tabsheet (if not you can click the refresh button after it)?  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9b2677063126d3e241c44da42cae72cdc152e9eb.png)
2. The pc's where your browser are running, are those connected to the internet? Because without internet connection, it won't work ...

**[EDIT]** Have done a quick test via Firefox on Windows 10, and it works fine here ...

---

<div class="post-metadata">

**Author:** ![pelajossss](https://avatars.discourse-cdn.com/v4/letter/p/b782af/32.png) [@pelajossss](https://discourse.nodered.org/u/pelajossss)\
**Post date:** [24 October 2019 20:19 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/9 "2019-10-24T20:19:31Z")

</div>

Hi  
If the Odroid-C1 is always connected, it is the board with which we do the tests.  
Yes, the URL is fine, in Settings and we can enter from chromium to it, and the editor works.  
But from Node-Red not

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 October 2019 20:32 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/10 "2019-10-24T20:32:23Z")

</div>

Hi all, if you are interested in SVG, I note that Microsoft have just updated Office (if you have the Office 365 version) to let PowerPoint output slides as SVG images. Not tried it yet but maybe useful for some folk to create SVG data to work with.

---

<div class="post-metadata">

**Author:** ![pelajossss](https://avatars.discourse-cdn.com/v4/letter/p/b782af/32.png) [@pelajossss](https://discourse.nodered.org/u/pelajossss)\
**Post date:** [24 October 2019 20:45 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/11 "2019-10-24T20:45:29Z")

</div>

Hi again  
I have installed Node-Red and the SVG node in a clean VM windows10.  
If it works ... I can access and open the editor

But when I try to access with https, the editor pop-up window is blocked.

Can the error be caused by access through https ???

regards

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [24 October 2019 20:54 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/13 "2019-10-24T20:54:42Z")

</div>

> [@pelajossss](#):
>
> Can the error be caused by access through https ???

That is a good question. Thanks for narrowing the problem!!!  
My test system didn't have https, so it 'might' be a problem...  
_**Do you see any errors in Chrome's console log (developer tools)?**_  
Perhaps it cannot load the jsChannel library (from the Node-RED server), which is responsible for the communication between our node and DrawSvg...

**Can you access the library manually,** via the same hostname that you use to access your flow editor?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/99dd69b8b122f9ae2bf8123f0fa552f103049dd5.png)

---

<div class="post-metadata">

**Author:** ![pelajossss](https://avatars.discourse-cdn.com/v4/letter/p/b782af/32.png) [@pelajossss](https://discourse.nodered.org/u/pelajossss)\
**Post date:** [24 October 2019 21:08 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/14 "2019-10-24T21:08:24Z")

</div>

Hi  
I attach two photos,  
I hope that helps.

 ![Captura%20de%20pantalla_2019-10-24_23-04-19](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/167d9b455554eb92899ec90be2a319887536775e.png)

 ![Captura%20de%20pantalla_2019-10-24_23-05-35](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/64b408549494417cef84fe0e855895a40031fcf7.png)

Greetings

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [24 October 2019 21:11 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/15 "2019-10-24T21:11:28Z")

</div>

@pelajossss,  
Damn that seems to be all normal ...  
Can you have a look in the console log, whether there are any errors:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/813b9a912fc408364a30e1b6bc141594c8ac766b.png)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [24 October 2019 21:13 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/16 "2019-10-24T21:13:04Z")

</div>

And what is inside your SVG source tabsheet?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f4f0a006c94c98147d94b299a54b518a39229b98.png)

---

<div class="post-metadata">

**Author:** ![pelajossss](https://avatars.discourse-cdn.com/v4/letter/p/b782af/32.png) [@pelajossss](https://discourse.nodered.org/u/pelajossss)\
**Post date:** [24 October 2019 21:17 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/17 "2019-10-24T21:17:02Z")

</div>

Here it is..

 ![Captura%20de%20pantalla_2019-10-24_23-13-02](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/2577498b319a625c28c3e2904756d0278d27b4be.png)

 ![Captura%20de%20pantalla_2019-10-24_23-15-03](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/a93709740e42e8d9883961b422591c1d83ac4f75.png)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [24 October 2019 21:34 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/18 "2019-10-24T21:34:03Z")

</div>

Seems that "_se ha bloqueado la carga del contenido activo mixto_" means "_load of mixed active content has been blocked_". Thanks to Google translate 😉

Seems that Node-RED is delivered over **https** , but our `RED.httpAdmin` endpoint is delivering the jschannel.js file via **http**. Such _mixed content_ (i.e. both https and http) is blocked by default by recent browsers. I will have a look at it next weekend. If anybody knows how to solve it, please let me know!!

---

<div class="post-metadata">

**Author:** ![dustinw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dustinw/32/3426_2.png) [@dustinw](https://discourse.nodered.org/u/dustinw)\
**Post date:** [24 October 2019 21:58 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/19 "2019-10-24T21:58:22Z")

</div>

A quick note:

Switching the Editor URL to HTTPS might help. BUT while [https://drawsvg.org/drawsvg.html](https://drawsvg.org/drawsvg.html) seems to work fine in Chome, it is giving an: `Error code: SEC_ERROR_UNKNOWN_ISSUER` error in FireFox:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/39c3acba9b6860b6ab6a7fc9e30489d06d195a6f.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 October 2019 23:49 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/20 "2019-10-24T23:49:57Z")

</div>

The issue is that Firefox sometimes rejects Digicert signed certificates:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/8a60f8c53a21b05bc76473e0d568176ac2edc710.png)

This post seems to have a possible solution:

> **[Firefox does not accept some (any?) DigiCert certificates](https://discussion.fedoraproject.org/t/firefox-does-not-accept-some-any-digicert-certificates/752)**
>
> Since the last Firefox upgrade, I cannot open any page that uses a DigiCert certificate. This affects big sites such as linkedin dot com, ebay dot com, transferwise dot com, and ironically blog dot mozilla dot org. This is on an up-to-date Fedora 28...

Not tried that but I am seeing the same issue on FireFox dev.

Possibly related to Mozilla removing trust from Symantec CA's - Digicert later brought the remainder of Symantec's CA service but Mozilla continued to remove trust. Presumably this resulted in some fallout along the way.

---

<div class="post-metadata">

**Author:** ![pelajossss](https://avatars.discourse-cdn.com/v4/letter/p/b782af/32.png) [@pelajossss](https://discourse.nodered.org/u/pelajossss)\
**Post date:** [25 October 2019 09:44 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/21 "2019-10-25T09:44:32Z")

</div>

Hi  
I change Switching the Editor URL to HTTPS as "dustinw" said  
[https://drawsvg.org/drawsvg.html](https://drawsvg.org/drawsvg.html)

Yes, now it works, on my Debian Buster  
.- Firefox 68.2.0esr (64-bit)  
.- Chromium 76.0

Regards

Google translator very good tool for me too 😅

---

<div class="post-metadata">

**Author:** ![Jean-Luc](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jean-luc/32/89996_2.png) [@Jean-Luc](https://discourse.nodered.org/u/Jean-Luc)\
**Post date:** [30 October 2019 12:19 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063/22 "2019-10-30T12:19:58Z")

</div>

Hello,  
What a breakthrough for NodeRed. For me it was the missing piece. This software is now almost equal to a SCADA (Supervisory Control and Data Acquisition). There was the engine, the Influxdb, Grafana or Telegraf style databases for graphics, interfaces to every bus, applications imaginable and now a graphic part like SCADA. Really really good. Really Bravo!  
I have been a keen user for a year and I am having fun with this tool.  
/Jean-Luc

[Next page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg/17063.md?page=2)