Busy indicator implementation

[KNara.2]

Hi All,

I'm trying to implement a busy indicator.

I have a set of 24 images generated as frames from .gif file.

I used couple of techniques.

First one being texture mapper to rotate a single .png  and the smoothness of the busy indicator rotation is not great.

Second I tried using animation by adding all 24 images to the project (along with conversion to L8 format) and the same issue persists. There also seems to be a overlap in the head part of the busy indicator.

How can perfection in the rotation of busy indicator be achieved?

Could L8 format images be the culprit which is causing the busy indicator to look uneven?

Will using more images provide more smooth rotation?

Should I explore using SVG image format? Please suggest a solution for achieving more rotation of busy loader.

 

[liaifat85]

The L8 format might limit the quality and smoothness of the animation due to the limited color palette. Consider using a higher color depth format like RGBA or RGB to maintain better image quality.

[KNara.2]

We chose L8 so that the final binary that is generated is of less size.

We will try using RGB and RGBA as you suggested.

Please do guide me on any other way a busy indicator may be implemented using the images provided in a more better way?

[Mohammad MORADI ESFAHANIASL]

Hello @KNara.2 ,

You can use a texture mapper to implement the rotation and the rotation should be done in code to make it smooth. You can take a look at this post on forum which is pretty similar to your question:
https://community.st.com/t5/stm32-mcus-touch-gfx-and-gui/create-a-loading-spinner-animation-using-texturemapper-in/m-p/605470

I hope this helps you,
Good luck