# How to change svg circle attribute based on msg.payload and msg.topic?
**URL:** https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366
**Category:** Dashboard
**Created:** [24 November 2019 22:36 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366 "2019-11-24T22:36:10Z")
**Posts on this page:** 13
**Page:** 1
### Author:  [@gr1nch](https://discourse.nodered.org/u/gr1nch)
#### Post date: [24 November 2019 22:36 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366/1 "2019-11-24T22:36:10Z")
Hi,
I've been struggling with this for hours, trawling this forum and the internet generally and trying things which have not worked, so any help would be greatly appreciated!
I am trying to write code which will automatically change the attribute "stroke" of circle elements. The trigger is incoming msg.payload and msg.topic which I can see working with debug. What I can't get right is the correct syntax.
``
I want to change stroke whenever msg.topic = "lightEast", then if msg.payload = "ON" set white as the colour and #999999 when "OFF".
This is the template flow
```auto
```
---
### Author:  [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [24 November 2019 22:39 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366/2 "2019-11-24T22:39:38Z")
Are you using the core `template` node, or the dashboard `ui_template` node?
(Just checking, because they are not interchangeable)
---
### Author:  [@gr1nch](https://discourse.nodered.org/u/gr1nch)
#### Post date: [24 November 2019 22:40 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366/3 "2019-11-24T22:40:40Z")
This code is in a `ui_template` node. Part if the flow and the dashboard widget created (East is broken).
 
---
### Author:  [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [24 November 2019 23:34 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366/4 "2019-11-24T23:34:48Z")
I suspect that the values need to be enclosed in single/double quotes.
`{{msg.payload == "ON" ? "'white'" : "'#999999'"}}`
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [25 November 2019 02:23 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366/5 "2019-11-25T02:23:20Z")
> [@gr1nch](#):
>
> This code is in a `ui_template` node
As far as I remember it is not possible to use mustache syntax inside the ui\_template. `Edit`: The very first example code in the ui\_template node shows the use of the ternary operator. That is not JavaScript neither Mustache syntax. I assume it is therefore angular (I am not acquainted with angular).
What you want can be achieved by using a core template node in front of the ui\_\_template. You can use CSS variables for the dynamic part.
Below flow shows what I mean. I used colors white and lime for "ON" and "OFF".
```auto
[{"id":"d5558149.45357","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"83d7f84c.882178","type":"inject","z":"d5558149.45357","name":"","topic":"","payload":"ON","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":120,"wires":[["ee171f48.62ff5"]]},{"id":"5f56c187.17054","type":"inject","z":"d5558149.45357","name":"","topic":"","payload":"OFF","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":110,"y":180,"wires":[["ee171f48.62ff5"]]},{"id":"d0543cef.6eded","type":"template","z":"d5558149.45357","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n\n\n\n\n\n\n\n\n\n\n","output":"str","x":460,"y":160,"wires":[["7798d2c6.33436c"]]},{"id":"5f4cca83.07a184","type":"debug","z":"d5558149.45357","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":770,"y":160,"wires":[]},{"id":"ee171f48.62ff5","type":"change","z":"d5558149.45357","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload = \"ON\" ? \"white\" : \"lime\"","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":280,"y":160,"wires":[["d0543cef.6eded","4ba84199.d4975"]]},{"id":"4ba84199.d4975","type":"debug","z":"d5558149.45357","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":460,"y":220,"wires":[]},{"id":"7798d2c6.33436c","type":"ui_template","z":"d5558149.45357","group":"27ca2e6c.f90442","name":"","order":5,"width":0,"height":0,"format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":620,"y":160,"wires":[["5f4cca83.07a184"]]},{"id":"27ca2e6c.f90442","type":"ui_group","z":"","name":"G1","tab":"2fc358ed.0a4b48","disp":false,"width":"12","collapse":false},{"id":"2fc358ed.0a4b48","type":"ui_tab","z":"","name":"T","icon":"dashboard","disabled":false,"hidden":false}]
```
---
### Author:  [@gr1nch](https://discourse.nodered.org/u/gr1nch)
#### Post date: [26 November 2019 01:52 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366/6 "2019-11-26T01:52:48Z")
@Andrei thanks so much for your example, especially as you took my code and made it work 😉
I used your example and realised I needed more functionality, which needed a rethink in system design.
This is how the remote control disc is looking now:
Because of these extra features needed I expanded on your ideas and I'll tell you what they are in case its of interest.
1. I have 4 security lights each powered by a Sonoff and 4 PIRs that each supply power to a Sonoff - all Sonoffs talk mqtt to my broker. So these 8 things are all decoupled and can act independently or, with logic, cooperatively. For example one PIR can switch one or more lights on, whilst also alerting me.
2. I want a dashboard item (the disc) that has the current state of all four lights (on/off) and with the ability to react to "click" events so each arc is a button toggling the power to the respective light - this I am having problems with! (I just opened a separate post on that issue: [How to make an svg circle element on click, in a mustache template, output topic/payload?](https://discourse.nodered.org/t/how-to-make-an-svg-circle-element-on-click-in-a-mustache-template-output-topic-payload/18424)
This is what I have so far and it all works swimmingly apart from the onclick stuff and that I can't seem to get the lightbulb in the centre try as I might!
Flow (first time I exported a bunch of wired nodes, hopefully all the wires stay in place)...
```auto
[{"id":"ed975584.ac23e8","type":"mqtt in","z":"e12bb044.9f8c","name":"","topic":"stat/security/light/north/POWER","qos":"0","datatype":"auto","broker":"7b5262ba.b63abc","x":650,"y":700,"wires":[["36a20f33.61d7","27962cfe.50c1e4"]]},{"id":"76487476.6a573c","type":"mqtt in","z":"e12bb044.9f8c","name":"","topic":"stat/security/light/west/POWER","qos":"0","datatype":"auto","broker":"7b5262ba.b63abc","x":650,"y":820,"wires":[["c90ffd67.4b98c","27962cfe.50c1e4"]]},{"id":"88c47026.ad73d","type":"mqtt in","z":"e12bb044.9f8c","name":"","topic":"stat/security/light/south/POWER","qos":"0","datatype":"auto","broker":"7b5262ba.b63abc","x":650,"y":780,"wires":[["30028040.92d3d","27962cfe.50c1e4"]]},{"id":"60ed2b3d.61b2e4","type":"mqtt in","z":"e12bb044.9f8c","name":"","topic":"stat/security/light/east/POWER","qos":"0","datatype":"auto","broker":"7b5262ba.b63abc","x":650,"y":740,"wires":[["4d55c146.de4b5","27962cfe.50c1e4"]]},{"id":"cfbc3ca.98ddec","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/east/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":1210,"y":740,"wires":[]},{"id":"e2bba51d.783c18","type":"ui_button","z":"e12bb044.9f8c","name":"","group":"e6654390.323a7","order":3,"width":3,"height":3,"passthru":false,"label":"East","tooltip":"","color":"{{payload}}","bgcolor":"","icon":"fa-lightbulb-o fa-x4","payload":"toggle","payloadType":"str","topic":"","x":1010,"y":740,"wires":[["cfbc3ca.98ddec"]]},{"id":"4d55c146.de4b5","type":"function","z":"e12bb044.9f8c","name":"On or OFF ?","func":"if (msg.payload === \"ON\"){\n msg.payload = \"white\";\n} else {\n msg.payload = \"red\";\n } \n return msg;\n","outputs":1,"noerr":0,"x":870,"y":740,"wires":[["e2bba51d.783c18"]]},{"id":"36a20f33.61d7","type":"function","z":"e12bb044.9f8c","name":"On or OFF ?","func":"if (msg.payload === \"ON\"){\n msg.payload = \"white\";\n} else {\n msg.payload = \"red\";\n } \n return msg;\n","outputs":1,"noerr":0,"x":870,"y":700,"wires":[["1617fedc.aa02b1"]]},{"id":"1617fedc.aa02b1","type":"ui_button","z":"e12bb044.9f8c","name":"","group":"e6654390.323a7","order":2,"width":3,"height":3,"passthru":false,"label":"North","tooltip":"","color":"{{payload}}","bgcolor":"","icon":"fa-lightbulb-o fa-x4","payload":"toggle","payloadType":"str","topic":"","x":1010,"y":700,"wires":[["39f40233.49d2fe"]]},{"id":"39f40233.49d2fe","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/north/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":1210,"y":700,"wires":[]},{"id":"30028040.92d3d","type":"function","z":"e12bb044.9f8c","name":"On or OFF ?","func":"if (msg.payload === \"ON\"){\n msg.payload = \"white\";\n} else {\n msg.payload = \"red\";\n } \n return msg;\n","outputs":1,"noerr":0,"x":870,"y":780,"wires":[["6181e0d1.8d4a7"]]},{"id":"6181e0d1.8d4a7","type":"ui_button","z":"e12bb044.9f8c","name":"","group":"e6654390.323a7","order":5,"width":3,"height":3,"passthru":false,"label":"South","tooltip":"","color":"{{payload}}","bgcolor":"","icon":"fa-lightbulb-o fa-x4","payload":"toggle","payloadType":"str","topic":"","x":1010,"y":780,"wires":[["1b047495.f374cb"]]},{"id":"1b047495.f374cb","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/south/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":1210,"y":780,"wires":[]},{"id":"c90ffd67.4b98c","type":"function","z":"e12bb044.9f8c","name":"On or OFF ?","func":"if (msg.payload === \"ON\"){\n msg.payload = \"white\";\n} else {\n msg.payload = \"red\";\n } \n return msg;\n","outputs":1,"noerr":0,"x":870,"y":820,"wires":[["b10446c6.6e47b8"]]},{"id":"b10446c6.6e47b8","type":"ui_button","z":"e12bb044.9f8c","name":"","group":"e6654390.323a7","order":4,"width":3,"height":3,"passthru":false,"label":"West","tooltip":"","color":"{{payload}}","bgcolor":"","icon":"fa-lightbulb-o fa-x4","payload":"toggle","payloadType":"str","topic":"","x":1010,"y":820,"wires":[["f3a31f17.5d8e1"]]},{"id":"f3a31f17.5d8e1","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/west/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":1210,"y":820,"wires":[]},{"id":"9fcbadbf.c7383","type":"comment","z":"e12bb044.9f8c","name":"Toggle Buttons with State","info":"","x":170,"y":640,"wires":[]},{"id":"8217a47b.e51678","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/north/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":370,"y":700,"wires":[]},{"id":"66729b86.f6f604","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/east/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":370,"y":740,"wires":[]},{"id":"d6cdc865.7a3d98","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/south/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":370,"y":780,"wires":[]},{"id":"259fa12b.1bb59e","type":"mqtt out","z":"e12bb044.9f8c","name":"","topic":"cmnd/security/light/west/power","qos":"0","retain":"true","broker":"7b5262ba.b63abc","x":370,"y":820,"wires":[]},{"id":"f1a4b005.fb9d2","type":"inject","z":"e12bb044.9f8c","name":"Initialize","topic":"","payload":"\"\"","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":140,"y":760,"wires":[["8217a47b.e51678","66729b86.f6f604","d6cdc865.7a3d98","259fa12b.1bb59e"]]},{"id":"e5c9e76c.eba358","type":"debug","z":"e12bb044.9f8c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1170,"y":900,"wires":[]},{"id":"973388ad.18b348","type":"template","z":"e12bb044.9f8c","name":"","field":"template","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n\n\n\n\n\n\n\n\n\n\n","output":"str","x":820,"y":900,"wires":[["b3a47ca5.17f69"]]},{"id":"b3a47ca5.17f69","type":"ui_template","z":"e12bb044.9f8c","group":"e6654390.323a7","name":"Quadrants","order":7,"width":"4","height":"4","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":990,"y":900,"wires":[["e5c9e76c.eba358"]]},{"id":"27962cfe.50c1e4","type":"function","z":"e12bb044.9f8c","name":"update Light state","func":"// this takes an incoming mqtt stat command and \n// and uses the data to write out a global variable\n\n// capatilzation function\nfunction capitalizeFirstLetter(string) {\n return string.charAt(0).toUpperCase() + string.slice(1);\n}\n\n// regex to get quadrant from msg.topic (mqtt topic)\nvar myRe = /.*light\\/(\\w+)\\/POWER/g;\n\n// set & get quadrant data\nvar rawquadrant = myRe.exec(msg.topic);\nvar quadrant = capitalizeFirstLetter(rawquadrant[1]);\n\n// set quadrant data\nvar quadrantState = [];\nquadrantState[0] = \"stateLight\".concat(quadrant);\nquadrantState[1] = msg.payload;\n\nvar quadrantStateColour = [];\nquadrantStateColour[0] = \"stateLightColour\".concat(quadrant);\nquadrantStateColour[1] = msg.payload === \"ON\" ? \"white\" : \"dimgray\";\n\n// set global variables\nglobal.set(quadrantState[0],quadrantState[1]);\nglobal.set(quadrantStateColour[0],quadrantStateColour[1]);\n\nreturn msg;","outputs":1,"noerr":0,"x":610,"y":900,"wires":[["973388ad.18b348"]]},{"id":"7b5262ba.b63abc","type":"mqtt-broker","z":"","name":"phoscon","broker":"192.168.1.8","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"e6654390.323a7","type":"ui_group","z":"","name":"Security","tab":"78f6af5d.516ad","order":1,"disp":true,"width":"6","collapse":false},{"id":"78f6af5d.516ad","type":"ui_tab","z":"","name":"Lighting","icon":"fa-lightbulb-o","order":1,"disabled":false,"hidden":false}]
```
---
### Author:  [@Andrei](https://discourse.nodered.org/u/Andrei)
#### Post date: [26 November 2019 11:46 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366/7 "2019-11-26T11:46:27Z")
Hi @gr1nch, I am happy that I could help you to advance a little in your project. Surely I will have a look in your other post later today.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [26 November 2019 12:05 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366/8 "2019-11-26T12:05:59Z")
Is this a duplicate thread because I could swear that I'd commented on this?
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?
Of course, I also have an example you could use as a basis using uibuilder if you don't actually need Dashboard 😉
---
### Author:  [@hotNipi](https://discourse.nodered.org/u/hotNipi)
#### Post date: [26 November 2019 12:53 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366/9 "2019-11-26T12:53:59Z")
> [@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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline)**
>
> The dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box's text and inline-level contents. It also indicates the default alignment baseline of any boxes participating in baseline alignment in the...
> **[text-anchor - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor)**
>
> The text-anchor attribute is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text where the wrapping area is determined from the inline-size property relative to a given point.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [26 November 2019 15:03 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366/10 "2019-11-26T15:03:38Z")
See my reply in the other thread which includes a path that eliminates the need for FontAwesome.
---
### Author:  [@gr1nch](https://discourse.nodered.org/u/gr1nch)
#### Post date: [27 November 2019 00:11 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366/11 "2019-11-27T00:11:48Z")
@Andrei that would be much appreciated thank you. This help is all so encouraging that I already feel that sticking with Node-Red and trying to also contribute is definitely worthwhile.
---
### Author:  [@gr1nch](https://discourse.nodered.org/u/gr1nch)
#### Post date: [27 November 2019 00:32 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366/12 "2019-11-27T00:32:19Z")
> [@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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline)
> [text-anchor - SVG: Scalable Vector Graphics | MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor)
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?](https://discourse.nodered.org/t/how-to-make-an-svg-circle-element-on-click-in-a-mustache-template-output-topic-payload/18424)
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [27 November 2019 00:35 UTC](https://discourse.nodered.org/t/how-to-change-svg-circle-attribute-based-on-msg-payload-and-msg-topic/18366/13 "2019-11-27T00:35:30Z")
> [@gr1nch](#):
>
> I see you like uibuilder
Well, that's what happens when you invest a lot of time creating something 😉