SVG Animation Rotation Direction

Hello
i am working on ship direction (COG) i want to make a picture by SVG node of a boat and i want this picture to rotate with the value injected
for example if inject 30° the picture rotate to direction 30° like compass
can anyone help me please and thank you

Hi @Youssef

I don't do SVG (plenty here who do)

But here is something I just wrote that may be a solution.
it simply uses CSS:

  • transition-duration (to animate the change)
  • transform (rotate)

The rotate deg is injected via payload

<img id="MyImage" style="border-radius:50%; transition-duration:500ms; transform:rotate(0deg);" src="data:image/png;base64,iVBO..."/>

<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg) {
      // Do something when msg arrives
      $("#MyImage").css({'transform':`rotate(${msg.payload}deg)`});
    }
  });
})(scope);
</script>

Apr-06-2024 08-44-49

I just use a template node to create the image, and apply the CSS to it

[{"id":"694db1d8a08f774b","type":"ui_template","z":"2d7bf6e3.84c97a","group":"09241c3f7d3522ab","name":"","order":6,"width":0,"height":0,"format":"<img id=\"MyImage\" style=\"border-radius:50%;transition-duration: 500ms;transform: rotate(0deg);\" src=\"data:image/png;base64,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\"/>\n\n<script>\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n      // Do something when msg arrives\n      $(\"#MyImage\").css({'transform':`rotate(${msg.payload}deg)`});\n    }\n  });\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1730,"y":700,"wires":[[]]},{"id":"9abf7a14a44bb549","type":"inject","z":"2d7bf6e3.84c97a","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"45","payloadType":"str","x":1525,"y":700,"wires":[["694db1d8a08f774b"]]},{"id":"3ae10bb41d6e8355","type":"inject","z":"2d7bf6e3.84c97a","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"90","payloadType":"str","x":1530,"y":745,"wires":[["694db1d8a08f774b"]]},{"id":"8572fb7070625113","type":"inject","z":"2d7bf6e3.84c97a","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"str","x":1520,"y":655,"wires":[["694db1d8a08f774b"]]},{"id":"bac62f6ce31461f1","type":"inject","z":"2d7bf6e3.84c97a","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"180","payloadType":"str","x":1530,"y":790,"wires":[["694db1d8a08f774b"]]},{"id":"09241c3f7d3522ab","type":"ui_group","name":"Group 1","tab":"83f943cd04824277","order":1,"disp":true,"width":6},{"id":"83f943cd04824277","type":"ui_tab","name":"Tab 2","icon":"dashboard","order":2}]
3 Likes

You might need to use transform origin to set the centre of rotation, if 0,0 is not what you want. Also look at transfer-box which can be useful.

1 Like

that's exactly what i need thank you but i just want to know how you upload the image and it is possible to do it like the picture the ship turn and the circle stable which indicates the north and west sidess
431788096_1367290230610118_18702313052031597_n (2)

your picture is in the first line of the template code ... src="data:image xxxxxxxxxx"

it is online picture ?
and how i cand fix one picture and rotate the other
thank youu

If you want to show an online picture you need to do it like this:

<img id="MyImage" style="border-radius:50%; transition-duration:500ms; transform:rotate(0deg);" src="url_to_your_online_picture"/>

In this cas the ivBO... part is an image that has been base64 encoded. You can do that easily using an online image base64 encoder like e.g. this one, and paste the string into your drawing. That way your image will always be there, even if your system is offline.

But personally I don't really understand why you need an image for something simple like this. Why you don't just use an SVG drawing tool and draw everything in SVG: your ship, a text "north", a text "west" and so on. Then you inject messages to change the number of degrees, which rotate only your ship and change the number of the degrees text.

The choice is up to you, but I wouldn't be using any images in your case.

Some extra decision for you: The flow shared by @marcus-j-davies is for the old Node-RED dashboard, because you added the tag 'dashboard'. You need to specify whether you want that, or if you are starting with a new dashboard, because then I would go for the new Node-RED dashboard D2.

If you are using the old dashboard, you can also use my node-red-contrib-ui-svg node. But I have not migrated that yet to dashboard D2, so then you need to use a template node (like marcus did above in his flow for the old dashboard). Note that Marcus his template node code from above is for AngularJs (old dashboard) and won't work in the new dashboard (which needs VueJs code).

Bart

1 Like