UI-SVG animation using SVG parameters as variables

Dashboard
1

Hello, I'm doing an object rotate using ui-svg. Everything is ok!

image
image1230×686 27.1 KB

However, if I need to change something in the svg, the center of the object will be changed. Is there a way to use other object parameter as a variable? Maybe something like:

0,#my_svg_object.cx,#my_svg_object.cy

Here is the group that I'm rotating:

<g id="Group_ShaftFacePlate-2">
        <circle fill="#cccccc" cx="49.213001" cy="56.247002" r="48.535" id="seojgso" />
        <circle fill="#4c4c4c" cx="49.212002" cy="56.192001" r="13.852" id="circle53182" />
        <circle fill="#b2b2b2" cx="49.212002" cy="56.247002" r="12.836" id="circle53184" />
        <path fill="#4c4c4c" d="M68.469,89.188M61.6,77.251c0,0,8.9,-4.955,11.126,-14.415C74.989,53.218,70.383,44.03,70.383,44.03l12.049,-6.869c0,0,6.645,10.347,4.617,25.225C86.924,63.3,86.466,65.091,86.261,65.99C82.75,81.383,68.469,89.188,68.469,89.188Z" id="C1_1" />
        <path fill="#4c4c4c" d="m68.446,23.104m-6.855,11.944c0,0,-8.761,-5.195,-18.056,-2.355C34.086,35.58,28.467,44.186,28.467,44.186L16.466,37.234c0,0,5.594,-10.95,19.469,-16.689c0.853,-0.353,2.631,-0.858,3.51,-1.134c15.068,-4.717,29.001,3.693,29.001,3.693Z" id="C1_2" />
        <path fill="#4c4c4c" d="m11.26,56.306m13.771,-0.059c0,0,-0.1,10.185,7.018,16.802c7.236,6.727,17.5,7.273,17.5,7.273l0.004,13.869c0,0,-12.279,0.652,-24.202,-8.475C24.617,85.155,23.288,83.87,22.609,83.248C10.971,72.578,11.26,56.306,11.26,56.306Z" id="C1_3" />
      </g>

I tried to use the config bellow:

image
image1240×676 24.6 KB

2

Hi @thalesmaoa,

I can imagine that fixed center coordinates might indeed change.
We had another question about rotating around the center. See here.
Perhaps you can get ideas from that discussion.

Bart

3

Hi @BartButenaers, thanks! I think I'm able to change it by message without a problem using:

msg.payload.command = "update_attribute";
msg.payload.selector = "#Move_C1";
msg.payload.attributeName = "from";
msg.payload.attributeValue = `0,${center_x},${center_y}`;

My major doubt is how to get the element position from svg without rechecking it. I will read again the topic...

Thanx

4

I'm sorry to insist, but is there a way to get svg information before passing the message?

5

So the rotation around the center is solved. Did I understand that correctly? If so, it would be nice if you could share a very simple flow with only one shape and an inject node. Then I can share that on the readme page.

Can you explain a bit more what you want to achieve. And you want to get the coordinates of an element. But you don't want to recheck: do you mean you don't want to get the coordinates via a separate message, but instead using again a parameter?

6

Thanks @BartButenaers. Let me try to clarify the problem.

I'm working with animation, which is different from a simple rotation. This animation operate continuously over time. The ui-svg package implements it very well.

My question is underneath that.

Let us imagine that I need to change something in the drawing, for example, the position of some rotating gear. I have a total of 10 gears! When i do that, I will need to manually change the center of the gears for the Animation.

I'm looking a way to perform that without using a lot of ctrl+c / ctrl+v.
My main idea is to request the svg info like:

var gear_01_cx = get_center_from_svg()

Later, instead of using numbers, I can use variables.

Another solution is to find a way to create an animation without informing the center. But I'm not sure how to create a continuously animation using css. The example provided in the other topic only perform a single rotation changing the drawing.

7

I don't see the 0,${center_x},${center_y} in your screenshot. Did that not work?

So you have 10 gears that are working together. Which means that they all need to be moved together. Two things that popup in ly mind:

  • Add a class "gear" to all the gear elements, and use selector ".gear" to apply a message to all gears at once.
  • Put the gears in an svg group, and move the entire group.

And where do you want to write that Javascript code? The svg node allows you to execute custom Javascript code, as soon as an event occurs (e.g. when an input message arrives). Is that what you are talking about?

8

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