I want to make an injection node that modifys the inner html/SVG code within my node-red-contrib-ui-svg element to add an extra shape to my SVG drawing when triggered
Can any one provide me with an example code to programatically add a shape (e.g. a rectangle) to the SVG dashboard (within the node-red-contrib-ui-svg) I think it cab be done by using the "set_attribute" (this will add the attribute if it does not already exist).... but I am not sure on the required coding??
I think this is acheivable, but I can't figure out the method?
To turn the question around... why wouldn't it be sufficient to add the shape beforehand and just hide it by default? And then toggle it with a message.
Hi Michael,
In our current version of the svg node we have not added the ability to add shapes via input messages. Reason is simple: once we do that, users will want thise shapes to become clickable and so on... Perhaps we will add that in the (near) future, but at the moment Steve and I are rather busy...
P.S. @Steve-Mcl correct me if incorrect or incomplete!
Bart
What @kuema says is quite logical and relevant as you will be able to address the hidden element by name/class. I do this in the HMI sample to show/hide pages.
If you truly need to add / remove elements dynamically, it is possible but you lose some of the nice features of the node like events as they are generated at initialisation only.
If you search the forum I did post an example using the update_text command to add SVG elements into an empty <g> on a HMI sample
I also added an alias for update_text (I can't remember off top of my head - something like innerHtml - check the built in documentation).
Thanks for the information. I was looking to see if there was a method to dynamically add an element.... but wasn't aware of the limitations. I wanted to try and come up with a method of populating an SVG page from a database or CMS. e.g. the dynamic floor plan is loaded for a certain user and then each of the sensors set on top in their relevant locations for that room.
As you say, I could use a generic floor plan with say a hundred (hidden) sensors/icons, and then just unhide any required ones and change the X,Y position and colour etc....
Can a displayed image/Icon be changed e.g. from a square to a circle (or is this restricted in that the shape has to be loaded before hand)??
if it is an image of a square (or anything else), you can set_attribute to set the source dynamically
if its a font-awesome font you can use update_text to change the fa-book to fa-something (@BartButenaers we really should collect all the examples from the beta and release threads)
if its an existing element in SVG source you can (as per documentation) set_attribute or update_text to your hearts content.
