UI-SVG - Animation

Dashboard
1

Hello I have been working with the UI-SVG node, and I would like to get one step further.

Screenshot 2021-03-04 at 12.33.46
Screenshot 2021-03-04 at 12.33.461984×1344 409 KB

I have installed some door sensors and manage to have my house blueprint update.

e.g Door Close

Screenshot 2021-03-04 at 12.21.17
Screenshot 2021-03-04 at 12.21.17848×802 236 KB

Door Open

Screenshot 2021-03-04 at 12.22.17
Screenshot 2021-03-04 at 12.22.17814×672 46.3 KB

I manage this by sending the following command

msg.payload=[
{
"command": "update_style",
"selector": "#porta_da_sala",
"attributeName": "stroke",
"attributeValue": "red"
},
{
"command": "set_attribute",
"selector": "#porta_da_sala",
"attributeName": "x2",
"attributeValue": "210"
},
{
"command": "set_attribute",
"selector": "#porta_da_sala",
"attributeName": "y2",
"attributeValue": "1410"
}

]
My question is

In order to have a more clear indication that the door is open how could I animate this ( or any other suggestions indications)

Screenshot 2021-03-04 at 12.21.34
Screenshot 2021-03-04 at 12.21.34552×750 33.4 KB

considering underling the SVG

" path id="PORTA_TESTE" d="M676,1335 v-46 a46,46 0 0,0 -46,46 z" style="fill:red;fill-opacity: 1;stroke:black;stroke-width:1;stroke-dasharray: 20;"/>"

2

You could add the 2 elements and use visibility attribute

<rect id="door1_open_element" x="20" y="20" width="80" height="80" visibility="visible" /> <!-- open -->
<rect id="door1_closed_element" x="120" y="20" width="80" height="80" visibility="hidden"/> <!-- closed-->

send

[
  {
     "command": "set_attribute",
     "selector": "#door1_closed_element",
     "attributeName": "visibility",
     "attributeValue": "visible"
  },
  {
     "command": "set_attribute",
     "selector": "#door1_open_element",
     "attributeName": "visibility",
     "attributeValue": "hidden"
  }
]
3

Hi Steve

Thank you very much for your answer, albeit I might not have explain very well.
What you presented I already have, my main issue is how to animate this quarter pie, build as path,
"
path id="PORTA_TESTE" d="M676,1335 v-46 a46,46 0 0,0 -46,46 z" style="fill:red;fill-opacity: 1;stroke:black;stroke-width:1;stroke-dasharray: 2 "

4

what do you mean animate it? in what way?

5

that´s the question ... with circles I change the radius and it looks like a sonar.
In this case since its a path i dont know how to do it
I just want something that raises attentions ... blinking ... changing shape..
Thank you

6

ok, so not really a node-red question, more an SVG question.

What you are looking for is the animate tag

There are lots of resources out there.

some good demos and details here

Much of this can also be achieved in the ui-svg "animations" tab

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.