[ANNOUNCE] node-red-contrib-ui-svg : version 2.0.0

Hi folks,
The 2.0.0 release of the SVG node is finally ready :champagne: :partying_face:

Months later as I had expected, but the lack of free time is killing me ...
This version contains the following new features:

  • Pan and zoom support (both mouse support and gesture support for mobile devices).

  • Control panning and zooming via input messages

  • Support style binding

    image

  • Support removal of attributes via input messages.

  • Support adding new elements via input messages (and apply Event tabsheet entries automatically to dynamically added elements).

  • Support removing elements via input messages.

  • Send coordinates (of multiple coordinate systems) and bounding box (of the element that received the event) in msg.event of the output message: !BREAKING CHANGE! because the old output message field have been moved to the new 'event' property (to become similar to the other UI nodes, as discussed here).

  • Extra validations of input messages, to simplify troubleshooting.

  • Possibility to have server side logging of client side errors, to simplify troubleshooting (e.g. on mobile devices where access to the browser console log is very difficult).

  • Adding events via input messages.

  • Removing events via input messages.

  • Support animations of transformations:

    svg_animate_transform

  • The readme page and info panel have been redesigned quite a lot.

  • The wiki contains new tutorials.

  • A series of example flows are available via the flow editor Import menu:

    image

  • Fix animation end which was not freezing.

  • Fix to support case insensitive commands.

  • Fix of undefined msg.selector in output message: !BREAKING CHANGE! because msg.elementId now contains the real element id instead of the CSS selector.

Unfortunately there are two breaking changes, which is why I needed to switch to a major version 2.x.x. The breaking changes (and the required actions) are listed on top of the readme page.

Would be nice if somebody could test something ...

The new version can be installed directly from Github (from your Node-RED folder), since it is not on NPM yet:

npm install bartbutenaers/node-red-contrib-ui-svg

I hope to publish it on NPM next week(end).

TODO: I need to check whether local images are still being displayed correctly...

Have fun with it !!!!
Bart

6 Likes

Hi Bart,
Just tried the new version.
All seems well except for a warning message saying...

14 Jul 07:25:04 - [warn] [ui_svg_graphics:a8ff2a4b.ca2d98] The specified msg.topic is not supported.

I've deleted this in my function block that connects to SVG.

I'll try out some of the 'new' features later.

Hey David, thanks for testing!
You can send some commands via msg.topic as is explained on the updated readme page:

image

I assume you have both a command in msg.topic and somewhere in your msg.payload. The 2.0.0 version then gives a warning, because it uses the command in the payload and not in topic.

Is this something you can confirm, or share the message that results in this warning ...

What you have assumed is true.
I've now set msg.payload = ""; rather than deleting it.
Works fine now without any warnings.

1 Like

The 2.0.0 version is now finally on the Github master branch...
At last, it now contains everything that I wanted:

  • Some last demos have been added to the readme page.

  • It is now possible to use also local private images, which will be visualized both in DrawSvg and the Node-RED dashboard.

    image

    Which is convenient for those who don't want to make their image public available for everybody on the web...

  • Since lots of users have been struggling to show images in their SVG drawing, I have now written a tutorial about this on the wiki.

When no huge problems are reported, I will publish it on NPM by the end of the week ...

3 Likes

As of now it is available on npm:

image

4 Likes

Version 2.0.1 is available to fix an issue with user-attribute based bindings:

image

4 Likes

Had to create version 2.0.2 already...
Because I used matchAll for a regular expression, and it seems that is supported only from NodeJs version 12.0.0 and above :frowning:

image

It is a pity that it is lately very hard to find beta release testers, because now I have to fix everything in a production version...

1 Like

This topic was automatically closed after 60 days. New replies are no longer allowed.