bartbutenaers / node-red-contrib-ui-svg

A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard
Apache License 2.0
93 stars 27 forks source link

Change an animation attribute #80

Closed RaspiZG closed 3 years ago

RaspiZG commented 3 years ago

I try in different ways and nothing works. I need to change a parameter value in a defined animation. Example obraz

I would like to pass From: 480, To: 550 via payload send. I need to do this multiple times and with different values. It will be very hard to define all the necessary animations. About 50 objects in various places and animations

I am asking for help or information if it is possible

PS. This node is magnificent

bartbutenaers commented 3 years ago

Hi @RaspiZG, So the problem is that you have 50 objects each with their own animations, so it is not doable to add them all via the "Animations' tabsheet. Is that correct?

An animation can only be applied to a single element!!! So unfortunately it is not possible to use a CSS selector (instead of the target element id), to apply the animation to multiple elements. We have experimented with that at the time being, but we failed to accomplish that.

Not sure how I could workaround it. I could introduce a selector, but then the "animation id" would have to become readonly, because - if N objects are selected - then N animations would be created, each with their own unique animation id. Would that be a solution for your problem perhaps? Bart

RaspiZG commented 3 years ago

I don't want to animate 50 objects at once. Only one, and the next in a moment. I just want to control via msg.payload - change From -> To, which is different than defined in animations (I know how to start etc.). Sometimes the position of an object changes (I know how to do it too) and I would like to change the animations too. I will not animate multiple objects at once. Does tabsheet animations have a limited number of entries?

bartbutenaers commented 3 years ago

I'm not at my computer so I cannot test this now. But can't you send an input message with following payload?

[
     {
        "command": "update_attribute",
        "selector": "#your_animation_id
        "attributeName": "from",
        "attributeValue": "your_new_from_value"
     },
     {
        "command": "update_attribute",
        "selector": "#your_animation_id",
        "attributeName": "to",
        "attributeValue": "your_new_to_value"
     }      
]

Never tried it...

Don't know how many animations can be added.

RaspiZG commented 3 years ago

Great - it works! I tried different, but no such command. Thanks a lot

bartbutenaers commented 3 years ago

You are welcome! Nice to hear that it works