# UI-SVG attributeValue of an attributeName?

**URL:** <https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445>\
**Category:** Dashboard\
**Created:** [8 April 2020 09:29 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445 "2020-04-08T09:29:05Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [8 April 2020 09:29 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/1 "2020-04-08T09:29:05Z")

</div>

How to get attributeValue of an attributeName svg element?  
exp  
\<svg ..... fill:red......\>

wen set attributeName -\> fill I get red

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 April 2020 09:34 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/2 "2020-04-08T09:34:02Z")

</div>

What is your question?

Do you want to get a value...

> [@d0d04m3](#):
>
> How to get attributeValue

Or set attributeValue...

> [@d0d04m3](#):
>
> wen set attributeName fill I get red

In clear terms and some example code (if possible), please clarify.

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [8 April 2020 10:34 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/3 "2020-04-08T10:34:08Z")

</div>

get Value not Set

> ## Control via messages
> 
> Most of the SVG information can be manipulated by sending input messages to this node.  
> Supported commands include...
> 
> - update\_text
> - update\_innerHTML
> - update\_attribute
> - set\_attribute
> - update\_style
> - set\_style

```auto
so I need get_attribute command
  {
        "command": "get_attribute",
        "selector": "#xxx",
        "attributeName": "fill",
      
    }

```

return msg.payload : red

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 April 2020 10:44 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/4 "2020-04-08T10:44:42Z")

</div>

Thank you, that is clearer.

This is not currently possible but it's something that could be considered.

Please raise an issue [here](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues) and myself or @BartButenaers will consider it. Please include a link to this forum post in your GitHub issue.

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [8 April 2020 10:46 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/5 "2020-04-08T10:46:37Z")

</div>

ok thanks to replay

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [8 April 2020 11:09 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/6 "2020-04-08T11:09:41Z")

</div>

Hi Steve (@d0d04m3),

I have closed the new (duplicate) issue, since somebody else already asked the same question last week: see this [issue](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/51). But I don't see how we can build a reliable solution.

Summarized why I see a problem:  
Suppose N of these floorplans are currently being displayed (where N can be zero). Indeed somebody can have multiple wall-mounted tablets in his house, so the floorplan might be visible at the same time N times. _If you send a request to get the value of an element id, then you will get N responses. Where N can be 0 which means no response at all_ (e.g. when no dashboard is currently started or none of the dashboards is currently showing the tabsheet with the floorplan).

Summarized I can have duplicate output messages or no output message at all. Not sure how this can be of any practical use to anybody...

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 April 2020 11:25 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/7 "2020-04-08T11:25:31Z")

</div>

And thats why I tagged you Bart 🙂

I hadnt considered local (client side) animations that may have changed a style or attribute value of the DOM - I was considering node-red would query the SVG in the singular server-side (the single node-red ui-svg) node instance (obviously on thinking about this longer than 30s - i remember its client side once deployed). More in-depth than first glance!

@d0d04m3 I dont think this is going to happen anytime soon.

as a workaround I can only recommend you hold a context memory copy of what you set.

e.g. if you animate a circles fill to 'red' based on topic "lamp/status"''s payload, then store "lamp/status"''s payload in `flow.context` & when you need to know the value, you can retrieve the value from `flow.context`

[working with context](https://nodered.org/docs/user-guide/context)

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [8 April 2020 12:00 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/8 "2020-04-08T12:00:04Z")

</div>

> [@BartButenaers](#):
>
> I have closed the new (duplicate) issue, since somebody else already asked the same question last week: see this [issue](https://github.com/bartbutenaers/node-red-contrib-ui-svg/issues/51). But I don't see how we can build a reliable solution.

thanks to replay

> [@Steve-Mcl](#):
>
> e.g. if you animate a circles fill to 'red' based on topic "lamp/status"''s payload, then store "lamp/status"''s payload in `flow.context` & when you need to know the value, you can retrieve the value from `flow.context`
> 
> [working with context](https://nodered.org/docs/user-guide/context)

ok no problem  
I make an array to store all current value of element but  
I have more 100 element  
and update this value when any value changed its hard

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 April 2020 12:14 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/9 "2020-04-08T12:14:11Z")

</div>

A lookup object is far easier (and faster) than an array.

e.g.

#### function code - Storing payload in flow context based on topic

```auto
let myStore = flow.get("myStore") || {};
myStore[msg.topic] = msg.payload;
flow.set("myStore", myStore )'

```

#### function code - getting value out of flow context based on topic

```auto
let myStore = flow.get("myStore") || {};
msg.payload = myStore[msg.topic]; 
return msg;

```

Thats it - no array to search, no hardcoding - works for storing & retrieving objects / arrays / numbers / strings

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [8 April 2020 13:08 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/10 "2020-04-08T13:08:25Z")

</div>

> [@Steve-Mcl](#):
>
> A lookup object is far easier (and faster) than an array.
> 
> e.g.

its works  
very thank

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [8 April 2020 15:12 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/11 "2020-04-08T15:12:56Z")

</div>

> [@Steve-Mcl](#):
>
> (client side) animations that may have changed a style or attribute value of the DOM - I was considering node-red would query the SVG in the singular server-side

And that is why I tagged you Steve 😉

- I was indeed thinking about getting all the information from the _ **client-side** _ DOM tree:

- But like you say, the information could also be get on the _ **server-side** _. Something like this I assume:

And then indeed there is also the problem of the animated values. But I think we can use the [animVal](https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedString/animVal) instead of the baseVal for animated attributes??

Anyway seems quite some work to me. Although I understand that it could be useful...

Any thoughts?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [8 April 2020 15:16 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/12 "2020-04-08T15:16:57Z")

</div>

> [@BartButenaers](#):
>
> Any thoughts?

Yes, put it on the [back burner](https://dictionary.cambridge.org/dictionary/english/on-the-back-burner) 🙂

Its a [can of worms](https://dictionary.cambridge.org/dictionary/english/can-of-worms) Bart 😃

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [8 April 2020 15:19 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/13 "2020-04-08T15:19:56Z")

</div>

Hey,  
I wasn't aware that your nickname was "The backburner" ... 🤣

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [9 April 2020 12:57 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/14 "2020-04-09T12:57:56Z")

</div>

I have some trouble with the last solve

> [@d0d04m3](#):
>
> its works  
> very thank

![up1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/e/be1c676dda257ddff9336fed0e1046e47515d4f2.png)

when update something in server-side and deploy node-red  
all context still in memory  
but SVG reset all value of element

![up2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9f0f786beb224fbed7239b2d25b4cd89736f1512.png)

and cant turn "on" again it's deactivated

![Up3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/f/df49631711f05b9e414f5e9470c34504d48b6808.png)

because data value not equal between context and SVG  
so when received new data and check it into context its found  
but in your SVG not real existing  
so it forces me to wait for next incoming data for a new update each value  
or make send a command to another side to send me all value for the latest image of the system  
it is hard for me to continue the build my project any deploy fetch-all data from another side

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [9 April 2020 15:01 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/15 "2020-04-09T15:01:32Z")

</div>

Hi, to me it seems normal that the SVG is in the initial state again after a deploy. And that you need to get the current status of the switches (after a deploy) and send those to the SVG node to visualize them. And of course - as long as we haven't implemented a server side DOM tree (see my sketch above) - unfortunately you also would need to update your context. Although that is how I see it, but I might be mistaken...

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [9 April 2020 16:46 UTC](https://discourse.nodered.org/t/ui-svg-attributevalue-of-an-attributename/24445/16 "2020-04-09T16:46:17Z")

</div>

I am afraid that lost data received while I am in the deploy process  
So I will make an Interrogation general to restore all current value of the system after deploy finished