Need some help with UI-SVG

[d0d04m3]

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

[Steve-Mcl]

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.

HINTS:

• For showing and hiding elements, use the Input Binding feature to set visibility to visible or hidden
• alternatively, for showing and hiding elements, use the Control 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.

[BartButenaers]

Note that there are also some step-by-step tutorials available on the 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.

[d0d04m3]

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

[d0d04m3]

so this exp for ID
I need this features without coding to next update if possible

[{"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":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" preserveAspectRatio=\"none\" x=\"0\" y=\"0\" viewBox=\"0 0 900 710\" width=\"100%\" height=\"100%\">\n  <defs id=\"svgEditorDefs\">\n    <symbol xmlns=\"http://www.w3.org/2000/svg\" id=\"f358\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 512 512\">\n      <path d=\"M504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zM212 140v116h-70.9c-10.7 0-16.1 13-8.5 20.5l114.9 114.3c4.7 4.7 12.2 4.7 16.9 0l114.9-114.3c7.6-7.6 2.2-20.5-8.5-20.5H300V140c0-6.6-5.4-12-12-12h-64c-6.6 0-12 5.4-12 12z\" />\n    </symbol>\n    <polygon id=\"svgEditorIconDefs\" style=\"fill:rosybrown;\" />\n    <symbol xmlns=\"http://www.w3.org/2000/svg\" id=\"f35b\" preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 512 512\">\n      <path d=\"M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm292 116V256h70.9c10.7 0 16.1-13 8.5-20.5L264.5 121.2c-4.7-4.7-12.2-4.7-16.9 0l-115 114.3c-7.6 7.6-2.2 20.5 8.5 20.5H212v116c0 6.6 5.4 12 12 12h64c6.6 0 12-5.4 12-12z\" />\n    </symbol>\n  </defs>\n  <rect id=\"svgEditorBackground\" x=\"0\" y=\"0\" width=\"900\" height=\"710\" style=\"fill: none; stroke: none;\" />\n  <image width=\"889\" height=\"703\" id=\"background\" xlink:href=\"https://www.roomsketcher.com/wp-content/uploads/2016/10/1-Bedroom-Floor-Plans.jpg\" />\n  <text id=\"cam_living_room\" x=\"201.23126220703125\" y=\"45\" font-family=\"FontAwesome\" fill=\"green\" visibility= \"visible\" stroke=\"green\" font-size=\"35\" text-anchor=\"middle\" alignment-baseline=\"middle\" stroke-width=\"1\"></text>\n  <text id=\"e1_living_room\" x=\"201.23126220703125\" y=\"45\" font-family=\"FontAwesome\" fill=\"green\" visibility= \"hidden\" stroke=\"green\" font-size=\"35\" text-anchor=\"middle\" alignment-baseline=\"middle\" stroke-width=\"1\"></text>\n  <use xlink:href=\"#f358\" x=\"334.8606262207031\" y=\"27.265259566266394\" width=\"65.81948799999998\" height=\"65.81948799999998\" id=\"e1_icon\" style=\"fill:red;\" visibility= \"visible\" />\n  <use xlink:href=\"#f35b\" x=\"334.8606262207031\" y=\"27.265259566266394\" width=\"65.81948799999998\" height=\"65.81948799999998\" id=\"e3_icon\" style=\"fill:red;\" visibility= \"hidden\"/>\n</svg>","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}]

[Steve-Mcl]

@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?

[d0d04m3]

ok
I need command to change event to enable click or disable like that

{
       "command": "update_event",
       "selector": "#xxx",
       "eventname": "click",
       "eventValue": "enable"
   }

and one more to change element

{
       "command": "update_event",
       "selector": "#xxx",
       "eventname": "change",
       "newelement": "#yyy"
   }```

[BartButenaers]

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

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

[BartButenaers]

But the shapes would stay 'clickable', I mean the cursor will still change when hoovering such a shape. Which gives expectations...

[Steve-Mcl]

What about setting CSS pointer-events?

If that works, then it could be done using existing methods.

[d0d04m3]

@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

[d0d04m3]

@BartButenaers

That is not clear to me. You want us to intercept the change event, 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

[d0d04m3]

@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

[d0d04m3]

@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

[d0d04m3]

@Steve-Mcl

What about setting CSS pointer-events?

If that works, then it could be done using existing methods.

I will look at it

[Steve-Mcl]

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

[d0d04m3]

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 .

[BartButenaers]

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

[d0d04m3]

thanks to all replay