How to change svg circle attribute based on msg.payload and msg.topic?

[gr1nch]

@TotallyInformation

Is this a duplicate thread because I could swear that I'd commented on this?

Not really, but the project is the same. This thread is about processing incoming data into the UI to change UI elements - now solved thanks to you guys. The other thread is about making on click events work to send custom topic/payloads out.

@TotallyInformation

Anyway, my comment was: have you tried the SVG Dashboard extension node? I think this is the kind of thing that it was designed for?

Yes, I tried it but the code I have possibly (in its current form) confuses the svg node as no on click events work with it.

@TotallyInformation

Of course, I also have an example you could use as a basis using uibuilder if you don't actually need Dashboard

I see you like uibuilder . I installed it to try it out but currently your "Clickable Dial" code renders fine but I get not on click events.

@hotNipi

@gr1nch

get the lightbulb in the centre

Texts in svg aligned by using coordinates (pixels or percentages) and additionally baseline and anchor adjustments.

If you have center of your svg known, adjust text with icon to be x=50% and y=50% (or in pixels if needed)
then add dominant-baseline="middle" text-anchor="middle" inline and you should have centered icon.

dominant-baseline - SVG: Scalable Vector Graphics | MDN
text-anchor - SVG: Scalable Vector Graphics | MDN

Thanks @hotNipi. I read the dominant-baseline doc as you suggested but did not understand it at all as I do not have enough pre-knowledge to make sense of it. However I added your code snippet to my "clickable dial" and the lightbulb centres sweetly. I changed the x value back to 50% and adjusted the y value down to 47% to make it aesthetically pleasing to my eye.

@TotallyInformation

See my reply in the other thread which includes a path that eliminates the need for FontAwesome.

I tried to find that but the only FontAwesome reference in the thread was in the OP - How to make an svg circle element on click, in a mustache template, output topic/payload?