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

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431>\
**Category:** Share Your Nodes\
**Created:** [17 August 2019 22:41 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431 "2019-08-17T22:41:20Z")\
**Posts on this page:** 20\
**Page:** 2

<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:** [18 August 2019 23:24 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/21 "2019-08-18T23:24:27Z")

</div>

> [@Steve-Mcl](#):
>
> I was gonna suggest use the id as default topic

Hey Steve (@Steve-Mcl),  
The version on Github has now 3 columns for clickable shapes:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/94ad8bba9e8598c2eed24affb5d8ea42aa882dc2.png)  
Which results in this output message:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/252e981083902c17f54062acfdbccf31498ba9c8.png)  
When an element ID is entered, the value will be copied to the both other columns as default value (only when those columns are still empty !!):

![svg_clone_topic_payload](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/6/6e65659d0c9a1abd9e8b2f7d4acd75764baa3f61.gif)  
Due to the large number of open issues, I will implement the TypedInput as soon as I am retired 😉  
Remark: the payload format isn't yet as requested by @bakman2, but for JSON again I need a typedInput (and I'm rather short of free time since my holidays are over ...)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [18 August 2019 23:38 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/22 "2019-08-18T23:38:40Z")

</div>

I've implemented the typed input several times in various projects. I could help out?

---

<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:** [19 August 2019 06:20 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/23 "2019-08-19T06:20:55Z")

</div>

Hi Steve,  
I have implemented it also several times, but too much other things to do. So a PR is more than welcome!! Thanks for offering your help!

Just one thing: I would only add the '_ **json** _' option, if you don't mind. Then you can fill it automatically with the following (as discussed above with @bakman2):

```auto
"payload": {
  "elementId": "myCircle",
  "event": "clicked"
}

```

I wouldn't add the other options (like global/bool/...). We have discussed such designs already in the past (I think on the old Node-RED forum), and since then I only stick to the minimal... But perhaps others can join this discussion and convince me 🥶

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [19 August 2019 06:24 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/24 "2019-08-19T06:24:36Z")

</div>

Stick with minimal. Easier to grow later if required, than shrink.

---

<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:** [19 August 2019 06:26 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/25 "2019-08-19T06:26:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [19 August 2019 06:44 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/26 "2019-08-19T06:44:45Z")

</div>

You were already convinced. I was just reminding you.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [19 August 2019 13:04 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/27 "2019-08-19T13:04:10Z")

</div>

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 👼

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?** 🙏

[Someone once told me](https://discourse.nodered.org/t/flogger-the-advanced-logging-node/12382/43) 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...

```auto
{
 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...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/2aa3863e150e2a1418e186e24eb04e89a6cb973d.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/2ec930ec7d489d4bde7aed6d4d6f9a82ee46dc93.png)

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

 ![ui-svg](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/5/56497ac36f4e673ce7d1650a816b3826cc3a5ee3.gif)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 August 2019 13:35 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/28 "2019-08-19T13:35:50Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![drmibell](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/drmibell/32/8424_2.png) [@drmibell](https://discourse.nodered.org/u/drmibell)\
**Post date:** [19 August 2019 14:53 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/29 "2019-08-19T14:53:59Z")

</div>

> [@Steve-Mcl](#):
>
> Someone once told me

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

---

<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:** [19 August 2019 21:24 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/30 "2019-08-19T21:24:26Z")

</div>

Hi Steve (@Steve-Mcl),

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

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 `msg.nodename.xxx`. 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:

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

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

---

<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:** [19 August 2019 21:42 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/31 "2019-08-19T21:42:38Z")

</div>

> [@BartButenaers](#):
>
> the user can decide by **himself**

Tut-tut Mr Butenaers!!

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [19 August 2019 21:48 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/32 "2019-08-19T21:48:19Z")

</div>

Gonna take several re-reads 😉

Will sort something tomorrow.

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [20 August 2019 06:38 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/33 "2019-08-20T06:38:33Z")

</div>

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

---

<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:** [20 August 2019 07:57 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/34 "2019-08-20T07:57:58Z")

</div>

> [@krambriw](#):
>
> view the live video in a small pop-up window

Hi Walter,  
That is indeed something I also have been thinking of. One of my Github [issues](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/10) 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](https://github.com/bartbutenaers/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 ...

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [20 August 2019 08:12 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/35 "2019-08-20T08:12:59Z")

</div>

Very cool indeed!!!  
BR Walter

---

<div class="post-metadata">

**Author:** ![Dodong](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dodong/32/11363_2.png) [@Dodong](https://discourse.nodered.org/u/Dodong)\
**Post date:** [27 August 2019 04:45 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/36 "2019-08-27T04:45:16Z")

</div>

Hi Bart

I have been to verify import this flow into Node-red , but still error on program look like below  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/7/7c48e8c2f19125b4b9e740926bbe1055631c0f01.png)  
and i try to install flow  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/e/e14710dfcb26a7bdc99914488ced5da70f88fc1f.png) but cann't running well.

Please advise if any step is wrong.

Thank you  
Dodong

---

<div class="post-metadata">

**Author:** ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)\
**Post date:** [27 August 2019 05:08 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/37 "2019-08-27T05:08:46Z")

</div>

Wrong node installed, that is the problem you have

---

<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:** [27 August 2019 06:18 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/38 "2019-08-27T06:18:54Z")

</div>

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.  
Bart

---

<div class="post-metadata">

**Author:** ![mikeyd0407](https://avatars.discourse-cdn.com/v4/letter/m/3bc359/32.png) [@mikeyd0407](https://discourse.nodered.org/u/mikeyd0407)\
**Post date:** [28 August 2019 08:01 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/39 "2019-08-28T08:01:38Z")

</div>

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

Michael

---

<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:** [28 August 2019 08:08 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431/40 "2019-08-28T08:08:13Z")

</div>

> [@mikeyd0407](#):
>
> might be good is to have some associated text

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.

> [@mikeyd0407](#):
>
> Also, can the SVG and elements be used to change themselves on click

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

[Previous page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-svg-feedback-request/14431.md?page=1)

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