Optimized way of implementing a arrow flow animation with 40 sequnce of images changing every 50ms

AdarshKale

Hello QT experts!
I am currently facing problems with memory consumption and consuming more CPU for animating the arrow flow with the sequence of images.

Implementation is as follows:
I have a 50ms repeat timer which will change the image path of the Image element.
it runs indefinitely on that QML page until we get a signal to stop it.

With this approach, I am facing a High CPU usage problem.
for a few minutes, it runs smoothly, but later the animation slows down and gets stuck, and none of the UI elements are responsive,
CPU usage goes up more than 80% and available memory reduces time by time.

Can anyone suggest implementing this in a better way with the sequence of images?
Thanks
Have a wonderful Day!!!

sierdzio

@AdarshKale said in Optimized way of implementing a arrow flow animation with 40 sequnce of images changing every 50ms:

Can anyone suggest implementing this in a better way with the sequence of images?

Come on, how can we help if you don't show any of your code? Please show us your implementation and then we can try to help.

From your description it sounds like you have a memory leak in your animation code. But that is only a guess based on symptoms.

jeremy_k

@AdarshKale said in Optimized way of implementing a arrow flow animation with 40 sequnce of images changing every 50ms:

Can anyone suggest implementing this in a better way with the sequence of images?

Use an image file with embedded frames and AnimatedImage.

AdarshKale

I am using QT - 5.15 version
Code snippet

Item
{
    property string arrowImagePath: ""
    property int arrowFlowSignal:0
    Image
    {
        id: arrowFlowimage
        cache: false
        source: arrowImagePath 
    }
    Timer
    {
        id: arrowFlowTimer
        running: false
        repeat: true
        interval: 50
        onTriggered: 
        {   
            arrowImagePath = "Arrow_Flow_"+arrowCount+".png"
            if(arrowCount >= 39)
            {
                arrowCount = 0
            }
            arrowCount++;
        }
    }
    
    Connections{
        target: XYZmodel
        function: onSignalReceived()
        {
            arrowFlowSignal= XYZModel.getArrowFlowStatus()
            if(arrowFlowSignal === 0)
            {
                arrowFlowTimer.start()
            }
            else
            {
                arrowFlowTimer.stop()
            }
        }
    }
}

sierdzio

ah, I thought you have implementation for this in C++.

As said, use AnimatedImage, or since this looks like a simple loop without any branching logic - just convert your images into a movie or GIF and play it using Image or Qt Multimedia. This way you will use components which are highly optimized for exactly this purpose.

If you really, really want to stay with plain Image and timer, consider using asynchronous and modifying cache. To optimize rendering, set Image dimensions and make sure all your PNG files have exactly the same size. Then also set fillMode to Pad to make sure there is no extra processing time wasted on resizing the images.

AdarshKale

@sierdzio, @jeremy_k
Thanks, I will try these approaches

AdarshKale

Hello QT Enthusiasts!!!
Inline to the above implementation, Since arrowImagePath = "Arrow_Flow_"+arrowCount+".png" is overwritten everytime the timer expires,
Is there any chance of memory consumption/memory leak if we run this timer for very long time?

sierdzio

I don't think this can leak.

AdarshKale

@sierdzio Then what would be the use of cache in the Image QML widget?
The memory is getting full after 15-20mins causing the system to hang.
If I use cache to false, then the CPU is getting HIGH due to accessing the image every time from the RAM.

Is there any way to restrict the Cache memory? so that only let's say 20 images can be cached and will be overwritten by the newer ones?

sierdzio

Then maybe covert your images to a GIF or MNG and use AnimatedImage instead?