Beginner help with node - Change fill color SVG Graphics

[nodebeginner]

Node: (node-red-contrib-ui-svg)

I'm just a beginner and I'm starting to toy around with Node Red and I'm running into some trouble with changing the fill color of one of my SVG images with the inject node. Tutorials online are fine but I can't seem to get the payload to go through to the graphics node. I'm unsure on what to actually put into the payload, as it never seems to work. Can somebody quickly walk me through from start to finish with an example?

[BartButenaers]

@nodebeginner

Tutorials online are fine but I can't seem to get the payload to go through to the graphics node.

Hi @nodebeginner,
Welcome to the forum!
It is a bit hard to tell from your screenshot what you have tried already. It is always advised to export a part from your flow, and share it here ...

Did you use the following example flow from our readme page on Github?

For me that example still works fine to change the color of the camera icon, as soon as I click on the inject node's button ...

[nodebeginner]

Yes I've seen it. It's just not entirely clear for me what to actually type in because I'm so new. I believe the picture you sent refers to adding events, but I'm still lost on how to properly use input binds and what to put into the inject node.

[BartButenaers]

Here is a much simpler flow to get you started:

[{"id":"8f0e54d7.4d1668","type":"ui_svg_graphics","z":"d9a54719.b13a88","group":"8d3148e0.0eee88","order":1,"width":"14","height":"10","svgString":"<svg preserveAspectRatio=\"none\" x=\"0\" y=\"0\" viewBox=\"0 0 900 710\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\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=\"banner\" x=\"10\" y=\"16\" fill=\"black\" stroke=\"black\" font-size=\"35\" text-anchor=\"left\" alignment-baseline=\"middle\" stroke-width=\"1\">This is the #banner</text>\n  <circle id=\"pir_living\" cx=\"310\" cy=\"45\" r=\"5\" stroke-width=\"0\" fill=\"#FF0000\" />\n  <text id=\"cam_living_room\" x=\"310\" y=\"45\" font-family=\"FontAwesome\" fill=\"green\" stroke=\"green\" font-size=\"35\" text-anchor=\"middle\" alignment-baseline=\"middle\" stroke-width=\"1\"></text>\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":560,"y":500,"wires":[[]]},{"id":"588ccdd4.5ad384","type":"inject","z":"d9a54719.b13a88","name":"fill with red","topic":"","payload":"{\"command\":\"update_style\",\"selector\":\"#cam_living_room\",\"attributeName\":\"fill\",\"attributeValue\":\"red\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":320,"y":500,"wires":[["8f0e54d7.4d1668"]]},{"id":"3272d837.2122e8","type":"inject","z":"d9a54719.b13a88","name":"fill with blue","topic":"","payload":"{\"command\":\"update_style\",\"selector\":\"#cam_living_room\",\"attributeName\":\"fill\",\"attributeValue\":\"blue\"}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":330,"y":540,"wires":[["8f0e54d7.4d1668"]]},{"id":"8d3148e0.0eee88","type":"ui_group","z":"","name":"Floorplan test","tab":"93e19e4f.b80ed","disp":true,"width":"14","collapse":false},{"id":"93e19e4f.b80ed","type":"ui_tab","z":"","name":"SVG","icon":"dashboard","disabled":false,"hidden":false}]

It contains a fontawesome icon (for the camera), with id "cam_living_room":

In the inject node, I apply a "fill" style with color red to the element with that id:

{
    "command": "update_style",
    "selector": "#cam_living_room",
    "attributeName": "fill",
    "attributeValue": "red"
}

This is the result:

I will create a wiki page on my Github repository with this example.
Should add some more tutorials to the wiki, but no time for that at the moment...

[nodebeginner]

Ok got it. Turns out I was using the wrong "command" for the inject node. Thanks!

[BartButenaers]

I have added a new tutorial to the SVG node's wiki page, which explains how to change a style attribute (e.g. fill color) in two ways: as an SVG fill attribute, or as a CSS style fill attribute. Hopefully that makes it easier to understand for other users...