# Need some help with UI-SVG
**URL:** https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119
**Category:** Dashboard
**Created:** [2 April 2020 22:09 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119 "2020-04-02T22:09:50Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [2 April 2020 22:09 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/1 "2020-04-02T22:09:50Z")
hi
so i need this features:
1- enable or disable svg by msg payload of course
2- change svg element to another
for that i use this trick but it's hard if you need more element change:
hide all element with svg attribut
move element you want to use in place with x,y
display this element with svg attribut
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [3 April 2020 01:00 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/2 "2020-04-03T01:00:02Z")
Hi,
> [@d0d04m3](#):
>
> so i need this features:
Apart from No2 (which I dont understand) all of these features already exist.
If you share a sample flow, with some SVG with the elements IDs / classes set & provide a list of things you have tried (with the elements ID / Class / CSS selector) and what you want them to do (show/hide/change attribute), I'm sure someone will try to help.
As it stands, you're unlikely to get someone to draw an SVG and animate it for you.
Especially since we put umpteen demos and instructions in the [readme](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/master/README.md).
HINTS:
- For showing and hiding elements, use the [Input Binding](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/master/README.md#control-via-messages) feature to set **`visibility`** to `visible` or `hidden`
- alternatively, for showing and hiding elements, use the [Control Messages](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/master/README.md#control-via-messages) `set_attribute` to set **`visibility`** to `visible` or `hidden`
- To show / hide 1 object, you can use `elementId` or `selector`
- To show / hide multiple objects, you can use `selector` set appropriately.
Once you have these working, you can use the same logic for setting position `x` / `y` and almost any attribute of almost any element
### **The possibilities are pretty much limited only by your imagination.**
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [3 April 2020 07:50 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/3 "2020-04-03T07:50:09Z")
Note that there are also some step-by-step _ **tutorials** _ available on the [wiki](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki), to avoid that we need to explain those things ove and over again in this forum. If I need to add a tutorial for something, please let me know.
---
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [3 April 2020 10:17 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/4 "2020-04-03T10:17:20Z")
ok
first thx to all for replay
am missing something to my post
1 -enable or disable click of SVG by msg payload of course
yes I need disable click
so this flow include tow element different id but some SVG
first element active click event
for secondary element no have any event for click
so if i need to enable click :
- hide secondary element
- move first element to x,y
- show first element
and if disabled
- hide first element
- move second element to same x,y
- finally show this element
for part tow same past technics but different SVG
and diable click or enable it optional
OK am now create flow for tow parts and post it soon
---
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [3 April 2020 13:14 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/5 "2020-04-03T13:14:02Z")
so this exp for ID
I need this features without coding to next update if possible
```auto
[{"id":"a84fa999.411aa8","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"3303e3e4.acfcec","type":"ui_svg_graphics","z":"a84fa999.411aa8","group":"f2f01e3.cbfc4e","order":1,"width":"14","height":"10","svgString":"","clickableShapes":[{"targetId":"#cam_living_room","action":"click","payload":"camera_living","payloadType":"str","topic":"camera_living"}],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"outputField":"","editorUrl":"http://drawsvg.org/drawsvg.html","directory":"","name":"","x":520,"y":180,"wires":[[]]},{"id":"8c464964.2924a8","type":"inject","z":"a84fa999.411aa8","name":"enable click","topic":"eneble click","payload":"[{\"command\":\"update_style\",\"selector\":\"#e1_living_room\",\"attributeName\":\"visibility\",\"attributeValue\":\"hidden\"},{\"command\":\"update_style\",\"selector\":\"#cam_living_room\",\"attributeName\":\"visibility\",\"attributeValue\":\"visible\"}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":230,"y":120,"wires":[["3303e3e4.acfcec"]]},{"id":"16d4af33.2b4a71","type":"inject","z":"a84fa999.411aa8","name":"disable click","topic":"eneble click","payload":"[{\"command\":\"update_style\",\"selector\":\"#cam_living_room\",\"attributeName\":\"visibility\",\"attributeValue\":\"hidden\"},{\"command\":\"update_style\",\"selector\":\"#e1_living_room\",\"attributeName\":\"visibility\",\"attributeValue\":\"visible\"}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":230,"y":160,"wires":[["3303e3e4.acfcec"]]},{"id":"90431a50.dfa6c8","type":"inject","z":"a84fa999.411aa8","name":"change element","topic":"","payload":"[{\"command\":\"update_style\",\"selector\":\"#e1_icon\",\"attributeName\":\"visibility\",\"attributeValue\":\"hidden\"},{\"command\":\"update_style\",\"selector\":\"#e3_icon\",\"attributeName\":\"visibility\",\"attributeValue\":\"visible\"}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":220,"y":220,"wires":[["3303e3e4.acfcec"]]},{"id":"6131371.f6bc3c8","type":"inject","z":"a84fa999.411aa8","name":"reset element","topic":"eneble click","payload":"[{\"command\":\"update_style\",\"selector\":\"#e3_icon\",\"attributeName\":\"visibility\",\"attributeValue\":\"hidden\"},{\"command\":\"update_style\",\"selector\":\"#e1_icon\",\"attributeName\":\"visibility\",\"attributeValue\":\"visible\"}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":260,"wires":[["3303e3e4.acfcec"]]},{"id":"f2f01e3.cbfc4e","type":"ui_group","z":"","name":"Group 1","tab":"8907ffb8.fed04","order":1,"disp":true,"width":"25","collapse":false},{"id":"8907ffb8.fed04","type":"ui_tab","z":"","name":"SVG3","icon":"dashboard","order":4,"disabled":false,"hidden":false}]
```
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [3 April 2020 13:16 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/6 "2020-04-03T13:16:12Z")
> [@d0d04m3](#):
>
> I need this features without coding to next update if possible
I'm sorry, I don't understand what you're saying here. Can you try to explain a bit better please?
---
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [3 April 2020 13:24 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/7 "2020-04-03T13:24:03Z")
ok
I need command to change event to enable click or disable like that
```auto
{
"command": "update_event",
"selector": "#xxx",
"eventname": "click",
"eventValue": "enable"
}
```
and one more to change element
````auto
{
"command": "update_event",
"selector": "#xxx",
"eventname": "change",
"newelement": "#yyy"
}```
````
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [3 April 2020 15:07 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/8 "2020-04-03T15:07:49Z")
Hi,
I understand your request to allow events to be (de)activated via an input message.
> [@d0d04m3](#):
>
> and one more to change element
That is not clear to me. You want us to intercept the [change even](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)t, which is - as far as I know - an _ **HTML** _ event (that is triggered when an , or value is changed by the user) and not an SVG event. We only support these events on SVG shapes: "click", "dblclick", "contextmenu", "mouseover", "mouseout", "mouseup", "mousedown", "focus", "focusin", "focusout", "blur", "keyup", "keydown", "touchstart", "touchend" Or do you mean that we have to copy the event handlers from element #xxx to element #yyy? If so, can you please explain clearly what you want to achieve with this. Because I'm not tempted to implement something like that...
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [3 April 2020 15:47 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/9 "2020-04-03T15:47:10Z")
It seems to me that you can simply have a switch node after the SVG node. If you want to prevent the click event doing something, you can do it at the node-red side.
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [3 April 2020 17:04 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/10 "2020-04-03T17:04:57Z")
But the shapes would stay 'clickable', I mean the cursor will still change when hoovering such a shape. Which gives expectations...
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [3 April 2020 17:09 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/11 "2020-04-03T17:09:43Z")
What about setting CSS [pointer-events](https://css-tricks.com/almanac/properties/p/pointer-events/)?
If that works, then it could be done using existing methods.
---
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [3 April 2020 19:52 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/12 "2020-04-03T19:52:27Z")
> [@BartButenaers](#):
>
> I understand your request to allow events to be (de)activated via an input message.
yes exactly because some times I need activated or deactivated According to condition
---
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [3 April 2020 19:56 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/13 "2020-04-03T19:56:52Z")
> [@BartButenaers](#):
>
> That is not clear to me. You want us to intercept the [change even](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)t, which is - as far as I know - an _ **HTML** _ event (that is triggered when an , or value is changed by the user) and _ **not** _ an _ **SVG** _ event.
>
> We only support these events on SVG shapes: _"click", "dblclick", "contextmenu", "mouseover", "mouseout", "mouseup", "mousedown", "focus", "focusin", "focusout", "blur", "keyup", "keydown", "touchstart", "touchend"_
>
> Or do you mean that we have to copy the event handlers from element #xxx to element #yyy? If so, can you please explain clearly what you want to achieve with this. Because I'm not tempted to implement something like that...
I need to change svg element completely with another one
not hide original element and show target element
if possible of course
---
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [3 April 2020 20:01 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/14 "2020-04-03T20:01:37Z")
> [@Steve-Mcl](#):
>
> It seems to me that you can simply have a switch node after the SVG node. If you want to prevent the click event doing something, you can do it at the node-red side.
yes I known for that
I talking about deactivated click in dashboard
---
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [3 April 2020 20:09 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/15 "2020-04-03T20:09:12Z")
> [@BartButenaers](#):
>
> But the shapes would stay 'clickable', I mean the cursor will still change when hoovering such a shape. Which gives expectations...
yes that is the point I am talking about
I am building SCADA APP to control and monitor the High voltage power Distribution
and any wrong expectations will cause disasters and
It can kill people
---
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [3 April 2020 20:10 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/16 "2020-04-03T20:10:58Z")
> [@Steve-Mcl](#):
>
> What about setting CSS [pointer-events](https://css-tricks.com/almanac/properties/p/pointer-events/)?
>
> If that works, then it could be done using existing methods.
I will look at it
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [3 April 2020 20:20 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/17 "2020-04-03T20:20:16Z")
> [@d0d04m3](#):
>
> Distribution
> and any wrong expectations will cause disasters and
> It can kill people
If you are serious, then I suggest you stop immediately and use an IEEE Safety approved PLC and HMI not a homebrew application. We hold no responsibility for any bad outcome.
---
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [3 April 2020 20:31 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/18 "2020-04-03T20:31:39Z")
I use RTU (remote terminal unit) and connected with HMI with MQTT Protocol
and RTU analyze all command received by H.M.I and talk with switchgear from ABB which control the Distribution high voltage .
---
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [3 April 2020 20:46 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/19 "2020-04-03T20:46:28Z")
> [@Steve-Mcl](#):
>
> It seems to me that you can simply have a switch node after the SVG node. If you want to prevent the click event doing something, you can do it at the node-red side.
Steve,
I just mean that currently if we make a shape clickable, that the mouse pointer changes shape to a hand:
So I can assume that there are some use-case in which you dynamically want to make a shape clickable or not. When it becomes non-clickable: no output message will be sent _ **and** _ the cursor won't change shape anymore. It seems a rather easy change, just need to test it...
> [@d0d04m3](#):
>
> I need to change svg element completely with another one
That is a larger change, since we would have to allow the input message to contain all the new shape properties (which also need to be validated and so on...). And it most probably might have impact on the clickable shapes, bindings, ... So don't think we are going to add that soon.
> [@d0d04m3](#):
>
> any wrong expectations will cause disasters and It can kill people
In this case I'm afraid that Steve is 100% right. We have developed this node to do fun stuff, but if a wrong cursor shape is already enough to kill people... Then you will need to use other software that is designed for this kind of applications.
---
### Author:  [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)
#### Post date: [3 April 2020 21:26 UTC](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119/20 "2020-04-03T21:26:35Z")
thanks to all replay
[Next page](https://discourse.nodered.org/t/need-some-help-with-ui-svg/24119.md?page=2)