[Announce] node-red-contrib-ui-svg (final beta) UPDATE V1.2.1

Share Your Nodes
1

Hi folks,

Some time ago I have announced an alpha version of node-red-contrib-ui-svg, to create interactive SVG (vector graphics) drawings in Node-RED:

The use cases can vary from a simple round button, to a complex animated floorplan of your entire house and garden...

Got a lot of useful feedback, but it was a hell of a job to start implementing. Fortunately @Steve-Mcl immediately proposed to help me, and he has been a tremendous partner in crime. So thanks a lot Steve for all your spare time!!!!!!

We decided not continuing the previous discussion, because this beta version is a complete rewrite (and we don't want to confuse users with obsolete information). So let's start from scratch here ...

The node contains a lot of new features, so please have a look our Github readme page for a complete overview and some animations. A small summary:

  • Enter raw SVG source (incl. beautification)
  • Draw your SVG visually with the DrawSvg cloud drawing tool
  • Update your SVG dynamically via input messages
  • Bind shape attributes to input message fields
  • Create customizable output messages for lots of events (click, double click, ...)
  • Fontawesome icon support
  • ...

Since the previous version was an early alpha, we haven't added any migration code to convert any previous tests. But from now on, we will add migration code for next beta releases. This way we will avoid that users (who help us testing) will have to redraw everything again in a next beta.

We recently also got some great assistance from Joseph Liard, the creator of DrawSvg. He is currently busy adding new functionality to his drawing editor, to make sure we can integrate DrawSvg even better into Node-RED:

  • We already received an offline version, which would allow offline Node-RED installations (that cannot connect to his cloud solution) to offer a drawing editor. More about this soon...
  • Currently FontAwesome icons cannot be added via DrawSvg, but have to be entered manually into the SVG source.
  • Currently local images can only be searched from the machine where the dashboard is being viewed, but not from the machine where the Node-RED flow is running (e.g. Raspberry Pi).
  • ...

So we will need at least one extra next beta version, before we publish this node on NPM! This means you will have to install our node directly from the Github repository (see the command at the top of our readme page).

We hope you will have lots of fun with this node, and are looking forward to your 'constructive' feedback!

Steve and Bart

13 Likes
2

Reserving this slot for some decent screenshots.

Update1...

This was a simple HMI demo I did using the databinding capabilities...

2019-08-29_13-30-09.gif
2019-08-29_13-30-09.gif1278Ă—800 764 KB

The source flow of this demo is supplied in the built in demos

6 Likes
3

Demo - Integration with DrawSvg

This demo demonstrates how the DrawSvg drawing editor can be used to create a circle with id = "mycircle". Once saved, the circle will appear in the node's SVG source. And after deploy, the circle will be drawn in the dashboard:

svg_demos_1
svg_demos_1.gif702Ă—374 601 KB

Demo - Start animation via input msg

This demo demonstrates how an animation can be added to the circle (with id = "mycircle") to animate 3 radius from 1 to 30 in 3 seconds:

svg_demos_2

You can also see that we have introduced as much autocomplete fields as possible, which allows you to select id's instead of having to enter them manually (to avoid mistakes as much as possible).

Demo - Send output msg on event

This demo demonstrates how to send an output messages, when the circle (with id = "mycircle") is being clicked:

svg_demos_3
svg_demos_3.gif765Ă—390 417 KB

As you can see the payload (or any other field) and the topic contents are both customizable...

7 Likes
4

Gentlemen, you are absolutely crazy. What a great tool. Thanks a lot.

Node-RED will become a lot sexier with this, in particular for Smart Homes.

Chapeau!

2 Likes
5

Hi Bart,
I've just seen your post about your UI-SVG node/widget.

Well you have disrupted what I had planned to do today as I've just installed SVG-graphics and your examples and am completely HOOKED on it.

Thanks for creating such a useful tool, I'm going to have so much fun discovering just what I can do with it.

Must dash as I want to get back to getting up the learning curve.

Thanks again for developing UI-SVG-graphics and sharing it with the community.

3 Likes
6

Bart

I have been waiting for the beta and watching the development. I have not tried it yet, but thanks for the great work.

1 Like
7

Great work!

Now I am torn, I wanted to move to uibuilder for my new Dashboard... including an SVG floor plan.
Damn you, Bart! Now I really have to try your new node. :laughing:

2 Likes
8

Apologies to Julian (@TotallyInformation) :rofl:

1 Like
9

I think I will make the move to uibuilder anyway for the other things I have planned, because I need more control over the page layout than the Dashboard can provide. Not to mention the performance gain, Angular can get pretty heavy on the Pi.

But why not go both routes and integrate one into the other :thinking: At least for the floor plan, because your solution takes a lot of work off the shelf. :+1:

1 Like
10

@BartButenaers when we were developing this node, I considered starting a conversation about splitting the SVG node into 2 parts so that it could be used in uibuilder.

I cant remember why I didnt raise it but I seem to remember thinking there were some design hurdles or it was too closely coupled to dashboard & thus it was a flawed idea?

Perhaps if @TotallyInformation were to come on board with us & figure out a way to decouple it from dashboard (or make dashboard/uibuilder an option in the node config) we can support uibuilder too?

Thoughts?

2 Likes
11

I'd definitely like the idea, but uibuilder is not tied to a specific UI framework. I can't think of a generic solution of integrating it. Only Julian (@TotallyInformation) would know... :grinning:

If you use uibuilder with Vue, then maybe there could be a Vue component for the SVG visualization part...:thinking:

12

@Steve-Mcl, was thinking something similar when reading the discussion. But I didn't have time yet to investigate uibuilder, so I don't dare to give any advise in that direction...

13

But perhaps if we want to discuss svg in uibuilder, we should do that in a separate discussion. We have to avoid that our testers get lost in heavy technical stuff...

1 Like
14

I'm missing the :+1: feature in Discourse that Github provides.

But yes, makes sense.

Nevertheless, before I can think about a floor plan, I need to do the wiring of my doors and windows. Something I had planned for today, until you distracted me... :laughing:

1 Like
15

Hi Bart,
When I try to click the 'Editor' button at the bottom of the window, I get this message...

Drawing Editor (No URL)

Any ideas what I'm missing ?

16

On the settings tab, there should be a URL. If not, try clicking the button along side the input box

17

Thanks Steve,
For anyone else who has this issue, simply click on the SVG-Graphics node, then select the 'Settings' tab and refresh the Editor URL link by pressing the anticlockwise arrow.

ScreenShot012

ScreenShot013

ScreenShot014

18

I don't get it. The Editor URL field should be filled with the DrawSvg cloud URL by default:

defaults: {
   ...
   editorUrl: {value: "http://drawsvg.org/drawsvg.html"},
   ...
},

And indeed when I install it from Github on a fresh Node-RED, then the URL field is filled be default.
No idea why it is empty in your use case. There is no other code snippet that could clear the value ...

19

Steve (@Steve-Mcl),
Think I found the cause. Some test flows on the readme page have been made with an older version of our node, when our node didn't had the editor url field yet... When you import such a flow (like @dynamicdave probably did), the node gets an empty editor url.

We just need to do following steps for every flow on our readme (and in the examples directory):

  1. import the test flow in Node-RED.
  2. hit the Editor URL refresh button
  3. export the test flow and update it on the readme page

Will do that tonight, but won't be early ...

20

I think this is sensible.

I think I'd need to understand more about what your node does and how it works.

In theory, if you have a core that can be split like uibuilder itself is - e.g. a back-end Node and a front-end library, then it should be easy enough to have an integration that leverages uibuilder without being locked in to it.

I continue to think about where uibuilder goes next and high on the priority list is a way to enable other nodes to make use of uibuilder. For example, I'm thinking that the configuration for uibuilder may need to move out of the node itself and into a configuration node - that way, other nodes could link to the URL and the websocket without having to do anything themselves.

It is possible though that there are other ways to let an "external" node know how to connect to the socket? Perhaps just an API that lets a node request the Socket.IO end-point?

Again, this is certainly a possibility. Obviously I've been thinking about the best approach to creating standard components for uibuilder and I'm leaning towards a focus on Vue for that. But, if you don't need to restrict yourself to Vue then don't :slight_smile:

So please let's take this to a separate thread and explore what the need is so that we can propose some approaches.

1 Like