[Announce] node-red-contrib-ui-svg

Hi folks,

After some beta releases, Steve (@Steve-Mcl) and I proudly announce that our node-red-contrib-ui-svg node is finally available on NPM (version 1.2.2). :champagne: :partying_face: :beer: :birthday:

image
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), 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

17 Likes

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

Joe

2 Likes

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

2 Likes

Great work, thanks for all the effort!!

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!

4 Likes

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

Hi @pelajossss,

We use DrawSvg from a cloud service, which is hosted at 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
  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 ...

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

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.

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

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

Hi
I attach two photos,
I hope that helps.

Greetings

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

image

And what is inside your SVG source tabsheet?

image

Here it is..

Seems that "se ha bloqueado la carga del contenido activo mixto" means "load of mixed active content has been blocked". Thanks to Google translate :wink:

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!!

A quick note:

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

The issue is that Firefox sometimes rejects Digicert signed certificates:

image

This post seems to have a possible solution:

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.

Hi
I change Switching the Editor URL to HTTPS as "dustinw" said
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 :sweat_smile:

2 Likes

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

1 Like