Hvac graphic animation gif format

[Gus83]

hi all
I would like to add some graphics to the dashboard
this are gif's format and to put them together probably need canvas
can someone help me with this any idea?
i haven't done it yet but the point is when you received a massage or hit a button
the animation starts or stops when you push back the button
thanks in advance

[madhouse]

Not sure if it helps or not, but you may want to try the node-red-contrib-animate-gif node. It works with buffers, so if you're trying to assemble something together into GIF format, combining buffers should make that happen. In any case, it may provide you with what you're looking for.

[Gus83]

hi madhouse
thanks a lot for your respond
i actually download that node but unfortunately i don't know how to use it
do you have any example?
what to you mean by buffer.
i do know how to use the function node and handle massages but know how to integrate the animation.
thanks

[hotNipi]

As far I know, the gif animation can't be controlled with JavaScript. But what you can do, is to have static version and the animated gif presented as image at the page and then you you only need to change the src of that image. Presenting images on dashboard with ui_template node is described many times here in forum.

[madhouse]

do you have any example?

No, unfortunately I don't. Whenever I find myself in a pinch, I go hunting for nodes that may have already solved my problem. There should be documentation on that node if the creator took the time to make it. All you have to do is type the node name into a search engine and it should pull up the node page.

what to you mean by buffer.

A buffer is more or less an unformatted portion of a message. You have data coming in, but Javascript doesn't know what to do with it yet, nor does Node-Red. This would be something like if you had something controlling items in your house that had control registers you were reading. Javascript (Node-Red) receives something like one or two bytes, but doesn't know what it is. When you run it through an algorithm, you can turn it into something meaningful like temperature, light color and so on. In the case of GIFs, Node-Red has nothing to interpret it natively. So when you read the file, it means nothing. It becomes a buffer item as the file isn't being parsed into anything meaningful. But when you run it through a GIF display algorithm, it takes the raw file and parses it into something meaningful. In this case, a (potentially) animated image.

The first place I would start is to do this. Click on the node in your flow. Click the i (information tab) in the dashboard debug area and then click the book next to the magnifying glass half way down to pull up any information the creator of the node put together. It may tell you how to use the node with the inputs and outputs and what goes on each. The information is out there, it just may take some looking. And if all else fails, trial and error until you have a solution. But you should be close at this point.