Animated images with thousands of .PNGs slows down a TouchGFX Designer. Looking for alternative approaches.

[scott.sp]

Hello,

I’m working on device equipped with STM32H753 and LCD (320x240), 16 MiB of SDRAM (available for caching will be about 13 MiB) and SD card (SDMMC interface) that will be used also for storing images for TouchGFX.

In some cases device shall display a few animations. Initially we’ve thought that animation will be stored as sequence of .PNGs and use of AnimatedImage widget. Amount of images depends in given animation, but let say that will be a at least one thousand of PNGs. After loading almost all PNGs and “indexing�? by TouchGFX Designer it slowed down to unusable state. Source files (.cpp) generated for images had size about 2.5 GB. We wanted that TouchGFX will be aware of each .PNG to generate IDs and use each for caching (we think that not all images will fit into SDRAM to accomplish full caching). The second reason for doing in that way was a unified procedure to extract binary with bitmaps and use it for external loader (TGX uses specific linker section for all images).

After reaching problems described above, I think that we need to redesign our approach for playing animations. So I’m looking for some practical information, guidance, some demos with similar use case. Any help in this topic will be appreciated.

[Martin KJELDSEN · Accepted solution]

Hi @scott.sp​,

Sorry to hear the designer is having performance issues with that many images. As a temporary fix, writing this code by hand should be no problem. I don't expect this component to change all that much, am i right? Just copy the code to your concrete sub-class in the gui/ folder. TouchGFX will still generate IDs as long as the images are in the assets folder (which they are) - The designer "secretly" calls the core tools in the framework which are the same being called by our makefiles, for instance.

I'll talk to the designer team. We're still partly in a documentation-bubble here, but i hope we'll get back to work on the core product very soon

/Martin

[Martin KJELDSEN]

Can i just ask - Whats the purpose for that many images? Are you sure you're not really after a small video?

/Martin

[scott.sp]

Hello,

sorry for the late response but this task was on hold for while.

I've some update regarding pictures for animations. So currently we have 14 351 .pngs that suppose to be a few different animations (animated buttons, some small tutorial for user).

TouchGFX Designer performance issues starts just after coping directory with animations .pngs to assets/images directory. Starting TouchGFX, or doing any change in canvas, for example adding new screen, or adding / moving widget causes TouchGFX Designer to freeze (processing) for couple of minutes.

We have two main purposes of these animations:

• animated buttons, checkboxes - these animations are short, images are small. And definitely will be used with AnimatedImage widget,
• a few short tutorials for user - these animations are longer, and images are almost big as screen size, but are not dynamic (I mean action that will be animated).

Idea with short videos is interesting, but is there any widget that supports this? I'm worry about performance issues because assets like images will be stored on SDCard. And if animation will be converted into common video format then we must convert each frame to RGB format (bitmap). Also when using images we though to use L8 format whenever possible to save space, but with common video formats is not possible I suppose?