search

bartbutenaers / node-red-contrib-ui-svg

A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard
Apache License 2.0
94 stars 27 forks source link

Wiki recommendation: add path elements via msg #110

Closed structure7 closed 2 years ago

structure7 commented 2 years ago

Thank you for your work on this project!

I am able to use the wiki example for adding a circle via msg, but do you have similar examples for paths (lines) and other geometry?

My use case is a green h200 line that represents a closed sliding door, that I would like to change to a red h100 when it is open. I can change the color, but I am uncertain of how to create the msg object to alter the existing path/line.

For example, I am looking to create a msg.payload to modify this: <path d="M1400,1095h200" style="fill:none;stroke:darkgreen;stroke-width:18px" id="masterSlidingDoor"/> to this <path d="M1400,1095h100" style="fill:none;stroke:red;stroke-width:18px" id="masterSlidingDoor"/>.

However, I am also interested in the method to create a new path via msg. Thank you.

Also, I noticed #85 however I don't think it is suiting my use case.

bartbutenaers commented 2 years ago

Hi @structure7,

I have created a new tutorial on the wiki.

Is that enough info for users to get started with this? I won't be adding tutorials for every geometry shape, because that is just to time consuming. When people know how to draw a circle, I expect that they will do some homework to find out themselves how to draw a rectangle...

Please don't forget to close this issue, if the tutorial contains enough information. Bart

structure7 commented 2 years ago

That was great, thank you very much! In the meantime I learned how to use bindings (attribute d) to arrive at the same place, but wanted to do more programmatically. The tutorial is just what I was looking for, and I'd like to contribute some tutorials as well as I make my way through it. Also, I found the discussions on the Node-RED forum. Thanks again to you and @Steve-Mcl .