# Node-red-contrib-ui-svg execute js from message

**URL:** <https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502>\
**Category:** General\
**Created:** [21 October 2021 09:36 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502 "2021-10-21T09:36:08Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![samuelbras](https://avatars.discourse-cdn.com/v4/letter/s/74df32/32.png) [@samuelbras](https://discourse.nodered.org/u/samuelbras)\
**Post date:** [21 October 2021 09:36 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/1 "2021-10-21T09:36:08Z")

</div>

Hi @BartButenaers!!

How can i click the button by message input?

I need to execute a js function by input message. I thought I'd add a hidden button and click it by message.  
How can i make this feature?

Best Regards

Samuel Brás

---

<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:** [21 October 2021 16:04 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/2 "2021-10-21T16:04:00Z")

</div>

@samuelbras,  
That is something I don't support yet. Will need to add it as a new feature.  
Can you create a public question from this?  
Then others can follow our discussion.  
Bart

---

<div class="post-metadata">

**Author:** ![samuelbras](https://avatars.discourse-cdn.com/v4/letter/s/74df32/32.png) [@samuelbras](https://discourse.nodered.org/u/samuelbras)\
**Post date:** [21 October 2021 16:20 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/3 "2021-10-21T16:20:23Z")

</div>

Hi @BartButenaers the topic is public.

I have to do somting to try solve the problem.

---

<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:** [21 October 2021 16:37 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/4 "2021-10-21T16:37:15Z")

</div>

Ok thanks!  
I will have a look tonight whether I can easily add such a feature ...

---

<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:** [21 October 2021 21:02 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/5 "2021-10-21T21:02:35Z")

</div>

Hi @samuelbras,

I have implemented a proposal of this feature request on Github. You can install it (from within your .node-red folder) like this:

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

```

This is how it would work:

1. Apply a JS event handler of type _"Input msg"_:

2. As you can see (in the above screenshot), we convert the input message to json and show it in an alert popup message.

3. When I now inject a message, the "input msg" event javascript handler will be triggered. This means the input message will be displayed in the alert popup dialog:

Would be nice if you could test this and give me feedback!

---

<div class="post-metadata">

**Author:** ![samuelbras](https://avatars.discourse-cdn.com/v4/letter/s/74df32/32.png) [@samuelbras](https://discourse.nodered.org/u/samuelbras)\
**Post date:** [25 October 2021 10:05 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/6 "2021-10-25T10:05:02Z")

</div>

Hi @BartButenaers

I will test your solution this week.

---

<div class="post-metadata">

**Author:** ![samuelbras](https://avatars.discourse-cdn.com/v4/letter/s/74df32/32.png) [@samuelbras](https://discourse.nodered.org/u/samuelbras)\
**Post date:** [4 November 2021 11:55 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/7 "2021-11-04T11:55:55Z")

</div>

Hi @BartButenaers

I have updated my node-red to the latest version and update with your version but I don't have that option input msg available.

---

<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:** [4 November 2021 12:06 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/8 "2021-11-04T12:06:25Z")

</div>

Have you refreshed your browser window?

---

<div class="post-metadata">

**Author:** ![samuelbras](https://avatars.discourse-cdn.com/v4/letter/s/74df32/32.png) [@samuelbras](https://discourse.nodered.org/u/samuelbras)\
**Post date:** [4 November 2021 14:10 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/9 "2021-11-04T14:10:08Z")

</div>

yes, I have also restared the computer

---

<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:** [4 November 2021 19:41 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/10 "2021-11-04T19:41:36Z")

</div>

I have reinstalled it from Github again, it here it is displayed correctly:

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

Did you execute the `npm install bartbutenaers/node-red-contrib-ui-svg` within your .node-red folder? Otherwise you have two different versions installed, and you will be running the old version...

And otherwise do you see any errors in your browser console log (where you are displaying the flow editor)? If not, then I give up...

---

<div class="post-metadata">

**Author:** ![samuelbras](https://avatars.discourse-cdn.com/v4/letter/s/74df32/32.png) [@samuelbras](https://discourse.nodered.org/u/samuelbras)\
**Post date:** [4 November 2021 20:11 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/11 "2021-11-04T20:11:22Z")

</div>

Hi @BartButenaers you can't give up 🙂

I have do the comand again and it work. Tomorrow I will do my tests

---

<div class="post-metadata">

**Author:** ![samuelbras](https://avatars.discourse-cdn.com/v4/letter/s/74df32/32.png) [@samuelbras](https://discourse.nodered.org/u/samuelbras)\
**Post date:** [5 November 2021 13:33 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/12 "2021-11-05T13:33:28Z")

</div>

Hi @BartButenaers  
I have encountred one problem.  
If I have the option Don't send click events in case of a double click event, this button ony done the double click.

Other problem is the alert message only occurs when I click in any button.  
I have to make a sample to try.

My sugestion is to define a message type do fier this kind of events, because I can have lots os input message, and only need / want to execute if a specific message arrive. In my case, I need only if is a GPS message.

Also If the message is of type databind it not fier.

---

<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:** [5 November 2021 16:36 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/13 "2021-11-05T16:36:11Z")

</div>

@samuelbras,  
Can you please add a 'simple' example flow, and explain the steps I need to do to reproduce the issues?

> [@samuelbras](#):
>
> My sugestion is to define a message type do fier this kind of events

Can you please give an example, to make sure I understand you correctly?  
Thanks!

---

<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:** [15 November 2021 22:23 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/14 "2021-11-15T22:23:31Z")

</div>

> [@samuelbras](#):
>
> If I have the option Don't send click events in case of a double click event, this button ony done the double click.

This is now hopefully fixed on Github. More details [here](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/97#issuecomment-969374604)

> [@BartButenaers](#):
>
> Can you please give an example, to make sure I understand you correctly?

Would be nice if you could explain (clearly) what the problem is, because your issues prevent me from releasing major 2.3.0 release of the SVG node...

---

<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:** [15 November 2021 22:36 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/15 "2021-11-15T22:36:55Z")

</div>

> [@samuelbras](#):
>
> Also If the message is of type databind it not fier.

That should also be fixed on Github. So would be nice if you could test that again...

---

<div class="post-metadata">

**Author:** ![samuelbras](https://avatars.discourse-cdn.com/v4/letter/s/74df32/32.png) [@samuelbras](https://discourse.nodered.org/u/samuelbras)\
**Post date:** [16 November 2021 09:22 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/16 "2021-11-16T09:22:36Z")

</div>

Hi @BartButenaers

I have been out, sorry  
I will make a example today.

---

<div class="post-metadata">

**Author:** ![samuelbras](https://avatars.discourse-cdn.com/v4/letter/s/74df32/32.png) [@samuelbras](https://discourse.nodered.org/u/samuelbras)\
**Post date:** [16 November 2021 10:13 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/17 "2021-11-16T10:13:53Z")

</div>

Hi @BartButenaers

```auto
[{"id":"795769ff.1d2ab8","type":"ui_svg_graphics","z":"e9e5c0eb.489de","group":"8d3148e0.0eee88","order":2,"width":"24","height":"14","svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:drawsvg=\"http://www.drawsvg.org\" id=\"svgMap\" x=\"0\" y=\"0\" viewBox=\"0 0 1920 1200\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\n\n<!-- Add here your SVG shapes (circles, rectangles, ...) -->\n<!-- Or remove everything, if you want to paste an entire drawing (<svg...>...</svg>).-->\n<g id=\"group1\" style=\"display:block\" x=\"0\" y=\"0\" width=\"1642\" height=\"1040\">\n <text id=\"topicPos100\" class=\"gridElement \" transform=\"translate(72 64)\">index</text>\n <text id=\"topicDesc100\" class=\"gridElement \" transform=\"translate(171 64)\" style=\"font-weight:bold\">\n This is the group one</text>\n <line id=\"line100\" class=\"cls-objectiveSeparator 100\" x2=\"1600\" transform=\"translate(20 100)\">\n</g>\n<text id=\"btngroupChange\" x=\"0\" y=\"300\" class=\"material-icons cls-Grey noselect\" \n style=\"font-size:128px;\">swap_horizontal_circle</text>\n<style>\n.cls-objectiveSeparator {\n stroke: #e5e5e5;\n stroke-width: 3px;\n }\n </style>\n</svg>","clickableShapes":[],"javascriptHandlers":[{"selector":"#btngroupChange","action":"click","sourceCode":"//toggle map to objective\nalert('one click');\n"},{"selector":"#btngroupChange","action":"dblclick","sourceCode":"//toggle map to objective\nalert('double click');"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":true,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit !important;\n}","name":"","x":1120,"y":840,"wires":[[]]},{"id":"8d3148e0.0eee88","type":"ui_group","name":"7Shield","tab":"1a3b3b7a.dfdbf5","order":1,"disp":false,"width":"24","collapse":false},{"id":"1a3b3b7a.dfdbf5","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":true}]

```

I added a button with the two events, click and doubleClick. each sends a message. The problem is that only doubleclick works.

---

<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:** [16 November 2021 21:21 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/18 "2021-11-16T21:21:23Z")

</div>

Evening @samuelbras,  
Thanks for the example!

> [@samuelbras](#):
>
> each sends a message

I assume you don't mean an output message, but a simple alert popup message?

Here it works as I expect. You have enabled this option:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/0/e0ceced9ab3e728fc175dd7a577f3c5daa771dd1.png)

And it behaves like this:

- When I single click the button, the I get a popup message with the text "single click".
- When I double click the button, the I get a popup message with the text "double click".

Seems ok to me ...

> [@BartButenaers](#):
>
> > [@samuelbras](#):
> >
> > If I have the option Don't send click events in case of a double click event, this button ony done the double click.
> 
> This is now hopefully fixed on Github. More details [here](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/97#issuecomment-969374604)

Have you installed my fix from Github yesterday (and refreshed your browser window)?? Because otherwise I can imagine you still have the same problem ...

---

<div class="post-metadata">

**Author:** ![samuelbras](https://avatars.discourse-cdn.com/v4/letter/s/74df32/32.png) [@samuelbras](https://discourse.nodered.org/u/samuelbras)\
**Post date:** [17 November 2021 10:20 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/19 "2021-11-17T10:20:40Z")

</div>

Hi @BartButenaers

I've already installed your Github version and the click and doubleclick are working as expected.

Now the msg input doesn't work as I expected. In other words, the event is only triggered when clicking on the screen or an svg button and not when the message arrives.

```auto
[{"id":"b9b3ef06.04792","type":"ui_svg_graphics","z":"e9e5c0eb.489de","group":"8d3148e0.0eee88","order":2,"width":"24","height":"14","svgString":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns:drawsvg=\"http://www.drawsvg.org\" id=\"svgMap\" x=\"0\" y=\"0\" viewBox=\"0 0 1920 1200\" width=\"100%\" height=\"100%\" preserveAspectRatio=\"xMidYMid meet\">\n\n<!-- Add here your SVG shapes (circles, rectangles, ...) -->\n<!-- Or remove everything, if you want to paste an entire drawing (<svg...>...</svg>).-->\n<g id=\"group1\" style=\"display:block\" x=\"0\" y=\"0\" width=\"1642\" height=\"1040\">\n <text id=\"topicPos100\" class=\"gridElement \" transform=\"translate(72 64)\">index</text>\n <text id=\"topicDesc100\" class=\"gridElement \" transform=\"translate(171 64)\" style=\"font-weight:bold\">\n This is the group one</text>\n <line id=\"line100\" class=\"cls-objectiveSeparator 100\" x2=\"1600\" transform=\"translate(20 100)\">\n</g>\n<text id=\"btngroupChange\" x=\"0\" y=\"300\" class=\"material-icons cls-Grey noselect\" \n style=\"font-size:128px;\">swap_horizontal_circle</text>\n<style>\n.cls-objectiveSeparator {\n stroke: #e5e5e5;\n stroke-width: 3px;\n }\n </style>\n</svg>","clickableShapes":[],"javascriptHandlers":[{"selector":"#btngroupChange","action":"click","sourceCode":"//toggle map to objective\nalert('one click');\n"},{"selector":"#btngroupChange","action":"dblclick","sourceCode":"//toggle map to objective\nalert('double click');"},{"selector":"","action":"msg","sourceCode":"alert('input message')"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":true,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n color: var(--nr-dashboard-widgetColor);\n fill: currentColor !important;\n}\ndiv.ui-svg path {\n fill: inherit !important;\n}","name":"","x":1120,"y":1000,"wires":[[]]},{"id":"791c9664.98d078","type":"inject","z":"e9e5c0eb.489de","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"command\":\"add_element\",\"elementType\":\"text\",\"elementId\":\"top140\",\"elementAttributes\":{\"class\":\"gridElement\"},\"elementStyleAttributes\":{},\"textContent\":\"77\"},{\"command\":\"add_element\",\"elementType\":\"text\",\"elementId\":\"topicPos140\",\"elementAttributes\":{\"class\":\"gridElement\"},\"elementStyleAttributes\":{},\"textContent\":\"4/5\"},{\"command\":\"add_element\",\"elementType\":\"text\",\"elementId\":\"text140\",\"elementAttributes\":{\"class\":\"gridElement \"},\"elementStyleAttributes\":{},\"textContent\":\"Text\"},{\"command\":\"add_element\",\"elementType\":\"line\",\"elementAttributes\":{\"class\":\"cls-objectiveSeparator \",\"x2\":\"1600\"}}]","payloadType":"json","x":910,"y":1000,"wires":[["b9b3ef06.04792"]]},{"id":"8d3148e0.0eee88","type":"ui_group","name":"7Shield","tab":"1a3b3b7a.dfdbf5","order":1,"disp":false,"width":"24","collapse":false},{"id":"1a3b3b7a.dfdbf5","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":true}]

```

Is it possible to filter by msg input type? It's just that I have a lot of msg input but it only matters when the message is of a type.  
For example, when a message changes the element's color, I want to take an action. Is it possible to do this?

---

<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:** [17 November 2021 22:23 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502/20 "2021-11-17T22:23:08Z")

</div>

> [@samuelbras](#):
>
> the event is only triggered when clicking on the screen or an svg button and not when the message arrives.

No that is **NOT** true. If you should add a `debugger` statement in your code and open the developer tools, then you will automatically arrive at that breakpoint as soon as you inject a message. So the event handler is called but the browser requires to have the focus, which means it will only display the alert afterwards as soon as you click the browser window:

![demo_msg_js_event_alert](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/5/45dc7910485ac1b9dff6a64ba9b841210fe79048.gif)

When you change your `alert` statement to e.g. `$("#btngroupChange").css("color", "red");` then you will see that your input message triggers your js event handler immediately:

![demo_msg_js_event](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a0b38146044e444a505fc2a9cc8a3652ed2473f2.gif)

- The 'normal' js event handlers are being triggered when you execute an action on an SVG shape, e.g. you click it. But then you are already busy in the same window as where you want to show the alert, so the window has already focus.
- The input msg triggered js event handlers is to do some background stuff. But now you want to use it to show an alert, which browsers don't like. That seems very normal to me because people don't like that you start displaying popups in their web app. If you want to find a workaround, please be my guest. But it is not something I am going to digg into.

> [@samuelbras](#):
>
> Is it possible to filter by msg input type? It's just that I have a lot of msg input but it only matters when the message is of a type

You can filter the message yourself inside your js event handler, based on the values in the message. I have now added a new feature on Github (which you need to install), to allow you to set the `msg.topic` to value _ **"custom\_msg"** _. In that case the message will not be used for anything else by the SVG node, so you can put in the message whatever data you like.

For example set the color based on the payload value:

![custom_msg_demo](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/c/5cfe0e6c3c6359ebafc6edce9890c5f55c2a7930.gif)

I have also added a similar example to the [readme](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/master/docs/tabsheet_js.md#input-msg-event) page.

[Next page](https://discourse.nodered.org/t/node-red-contrib-ui-svg-execute-js-from-message/52502.md?page=2)