Announce node-red-contrib-ui-svg : feedback request

Hey Dave,
Don't know how you do it, but with a single sentence you managed again to convince me :rofl:

1 Like

You were already convinced. I was just reminding you.


hmmmm, so where to start?

I know - I'll start with - I really don't mean to step on anyone's toes or upset anyone - I only wish to help :angel:

I understand @bakman2 request for "event": "clicked" but to force this into payload? Surely payload is what the user wants to send?

I know we could force the output to "payload": { "elementId": "myCircle", "event": "clicked" } but what would be the point of using a typedInput? The typedInput provides the kind of flexibility that makes node-red super convenient.

I find permitting the user to specify his own payload (be that a timestamp, bool, JSON etc) greatly reduces the need for extra change nodes afterwards.

Could we please compromise? :pray:

Someone once told me when they wish to include extra information in a msg (but not necessarily want it in the payload), to avoid collisions and to provide consistency, they add an object to the msg like msg.nodename.props & include whatever they need to. I took that on board & find it very useful.

e.g. imagine this msg structure...

 ui_sgv: {
  event: "click",
  elementId: "myCircle",
  coordinates: { x: 27, y: 33 }
 topic : "camera/1/ptz"
 payload : { pan: 90, tilt: 120, zoom: 3 }
  • msg.ui_sgv is auto generated & includes whatever extra useful info we wish (and is extensible)
  • msg.topic and msg.payload are whatever the user desired (as entered in the form).

I much prefer this means of topic/payload and it is in line with many of the better nodes including (to name a few) inject, trigger, dashboard ui_button...

I have already added (on my local copy of your code) the typed input & it works great. So to round this off & hopefully I have sold it to you, this is a demo of it...

1 Like

I understand @bakman2 request for "event": "clicked" but to force this into payload? Surely payload is what the user wants to send?

Leave me out of it :wink:

My request was just to have a property that represents what it is, your suggestion sounds just as great :cowboy_hat_face:

1 Like

Pleased I could help. Also pleased to see this settled amicably.

Hi Steve (@Steve-Mcl),

Nice demo!!!!
Since you are offering your help, I will try to go for your compromise :wink:

Only the msg.nodename proposal is not really my cup of tea. Don't get me wrong: I certainly see the advantages of it, but it isn't something I'm used to work with in Node-RED. If all nodes would work like that, most probably it wouldn't have triggered the little voice in my head ...

I would like to have my data being send in the msg.payload, and you want it to be in the By adding an extra TypedInput (for message field), the user can decide by himself where the data needs to go. This is something I have seen in lot's of other nodes, inclusive a series of my own nodes.

For example:


This typedInput has only 1 type ('msg'). And when another field name is entered, we could change the name of the second column (to match the field name). Then it becomes obvious where the data is going to end in the output message....

Does this make sense? If yes, then I will inform my lawyer that we have an agreement for a PR...

1 Like

Tut-tut Mr Butenaers!!

1 Like

Gonna take several re-reads :wink:

Will sort something tomorrow.

Don't know if this has been mentioned but with the cameras on the map, would it not be a key feature to view the live video in a small pop-up window? Some right click command...view live or just by hovering the cursor over the symbol would bring up the live video window

1 Like

Hi Walter,
That is indeed something I also have been thinking of. One of my Github issues is to put the (screen) coordinates in the output message. That message can be handled in your flow like you wish. Would like to build (in the near future) a new UI node that can display a popup context menu (at the specified screen location, which means where you have clicked or in the middle of the screen, or ...). But a user could also use the output message to show a popup with my node-red-contrib-ui-camera-viewer (once it is completed ...).

Summarized: as soon as our output messages contain the coordinates, you can do whatever you like ...


Very cool indeed!!!
BR Walter

Hi Bart

I have been to verify import this flow into Node-red , but still error on program look like below
and i try to install flow
image but cann't running well.

Please advise if any step is wrong.

Thank you

Wrong node installed, that is the problem you have

Hi @Dodong,
this node was a very early alpha version, so it isn't available on NPM yet (which means it isn't available via your Node-RED menu palette). You need to install it directly from Github, as you can see in the installation command on top of my readme page on Github.

Hi BartButenaers

I love the idea of this project and I think it will be a great addition to Node Red.

One feature that might be good is to have some associated text (editable at runtime) avaialable under (or above) an element icon. The use case for this could be to show the current room temperature of a temperature sensor located in a building or the operational status of a device (e.g. online or offline for a security camera)

Also, can the SVG and elements be used to change themselves on click - for example, you start by showing a top level overview of a builind, then when a floor is clicked the SVG drawing is changed to draw the floor plan (along with new elements) for the clicked level?

Kind regards


Hi Michael (@mikeyd0407),
You can always have a look at the open/closed issues to have an idea of the direction we are going. The next beta will contain a large list of new functionalities. One of those is the ability to change the content of "text" elements. So then you can locate a "text" element below your FontAwesome icon to display e.g. the temperature.

When you click an item, you get an output message. Based on that output message you can compose a new input message to update your drawing. It is up to the users to decide what they do with the output messages in their flows. Also the input/output message functionality will have lots of more options in the next beta...

Already done & will be in the beta release.

Yes, perfectly possible in the imminent beta.

As for ETA... Soon.

Bart and I are putting finishing touches on over the coming days before publishing to npm for everyone to evaluate.

Hope I didn't let too much it of the bag @BartButenaers.

1 Like

From now it is official: the node-red-contrib-ui-svg and the (related) node-red-contrib-ui-contextmenu nodes are not my own property anymore. Steve has offered to join forces, and he has done an awful good job on helping me developing both nodes. In fact - due to my lack of spare time last week - he has done most of the development. We will implement a series of smaller issues and extend the documentation, and then publish a next beta version ...


This alpha version is now end of life, and most information in this discussion is obsolete...
We have completely rewritten this SVG node, and announced a new beta version here.
So please don't post comments here anymore, but navigate to the above link instead!