How add circles in svg based on number of incoming inputs

[Ganesh]

Hi
I have around 250 Tags in database for every tag I want to display a circle on SVG Image , and the number of tags in dB keep varying , with it the circles in SVG should also vary
Ex = if I have 50 Tags in dB then the SVG image should show 50 circles ,if its 100 then the SVG image should show 100 circles likewise,
Can anyone tell me how to do this .
Thankyou & Regards

[BartButenaers]

Hi @Ganesh,
Is there anything you have tried/searched already?
And do you need to display that svg inside the Node-RED dashboard, or something else?

In case you want to show it in the dashboard, here is a tutorial about how to achieve that for a single circle. If you need N circlles, then you need to add some logic to repeat this N times. I don't know where (x,y) you want to draw the circles, or which which size (radius) because you haven't mentioned any of that.

Bart

[Ganesh]

Hi @BartButenaers ,

as you can see in above image I have an SVG image inside the Node-RED dashboard , in above image we have 8 Zones , and the no of circle will be shown in any one of these Zones, and the X and Y positions are the center point of these zones which will be stored in dB
number of circles is equal to no of Tag ID in dB so there will N number of circles varying from 0 to 250 more or less , circle radius is 10
can you provide an example or method how to achieve this
Thanks & Regards

[BartButenaers]

1. Install the node-red-contrib-ui-svg node
2. Read the tutorial that I have given you above.
3. Now you know how to display a circle. You can now all your rectangles, by modifying the svg source manually or via the drawsvg editor.
4. Add an svg text element below each rectangle, to show your nulbers afterwards.
5. Inject messages to add circles dynamically to your drawing and messages to update the numbers in your text elements. See here which kind of messages can be injected.

[Ganesh]

Hi @BartButenaers
I was able to do what you have told for one circle , can you give an example on how add to N numbers of circles using single logic and each circles having different label/element ID and different x & Y locations , in SVG Node
would Help out a lot with what I am trying to do.
Thank you & Regards

[BartButenaers]

@Ganesh,

Here is an example flow:

[{"id":"cd43b95ab3573f07","type":"ui_svg_graphics","z":"5b027e373754636b","group":"28cdac6db4804909","order":1,"width":"9","height":"5","svgString":"<svg x=\"0\" y=\"0\" height=\"100%\" viewBox=\"0 0 100 100\" width=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:svg=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n    <text id=\"circle_count\" x=\"50\" y=\"50\" style=\"fill:red\">--</text>\n</svg>","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":false,"showBrowserEvents":false,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"cssString":"div.ui-svg svg{\n    color: var(--nr-dashboard-widgetColor);\n    fill: currentColor !important;\n}\ndiv.ui-svg path {\n    fill: inherit;\n}","name":"","x":690,"y":280,"wires":[[]]},{"id":"e64174ac8a490b40","type":"function","z":"5b027e373754636b","name":"Create messages","func":"// The input message contains your circles\nvar circles = msg.payload || [];\n\n// Remove all existing circles\nnode.send({\n    payload: {\n        command: \"remove_element\", \n        selector: \"circle\"\n    }\n})\n\nvar circleCount = circles.length;\n\nfor(var i=0; i<circleCount; i++) {\n    circle = circles[i];\n    \n    node.send({\n        payload: {\n            command: \"add_element\", \n            elementType: \"circle\",\n            elementId: \"circle_\" + i, \n            elementAttributes: {\n                cx: circle.x,\n                cy: circle.y,\n                r: circle.radius\n            },\n            elementStyleAttributes: {\n              fill: \"red\",\n              stroke: \"black\"\n            },\n            textContent: i\n        }\n    })\n}\n\n// Show the number of circles\nnode.send({\n    payload: {\n        command: \"update_text\",\n        selector: \"#circle_count\",\n        textContent: circleCount\n    }\n})","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":490,"y":280,"wires":[["cd43b95ab3573f07"]]},{"id":"fa8f2940f16e1421","type":"inject","z":"5b027e373754636b","name":"Inject circles","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"x\":10,\"y\":10,\"radius\":8},{\"x\":20,\"y\":10,\"radius\":8},{\"x\":30,\"y\":10,\"radius\":8},{\"x\":40,\"y\":10,\"radius\":8},{\"x\":50,\"y\":10,\"radius\":8},{\"x\":60,\"y\":10,\"radius\":8},{\"x\":70,\"y\":10,\"radius\":8},{\"x\":80,\"y\":10,\"radius\":8},{\"x\":90,\"y\":10,\"radius\":8}]","payloadType":"json","x":290,"y":280,"wires":[["e64174ac8a490b40"]]},{"id":"28cdac6db4804909","type":"ui_group","name":"Circle demo","tab":"8bbab1b47b8e87c8","order":1,"disp":true,"width":"10","collapse":false,"className":""},{"id":"8bbab1b47b8e87c8","type":"ui_tab","name":"SVG","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

When you press the button, a message will be injected containing circles. The function node will create messages to delete all the previous circles in the drawing, create new circles and show the circle count in the text field:

The readme page contains a LOT of info about how to do stuff, and there are also tutorials on the wiki.

Now you have a basic flow to get started. You can create whatever shapes you want, and manipulate them via input messages (as you can see in the numerous examples available).

[Ganesh]

Hi @BartButenaers
Thanks for the example !