cancel
Showing results for 
Search instead for 
Did you mean: 

STM32 with TouchGFX - Updating UI background image at runtime

Ricko
Associate III

Hi,
I am new to STM32 so this might seem a basic question... I am thinking of using one to interface to this round touch display:
https://thepihut.com/products/3-4inch-dsi-round-touch-display-800x800   
and ideally use TouchGFX for the UI/code.

The application is a simple vending machine. And while in standby it displays a static picture (an advert or logo) and this picture needs to be updated by the local vending machine outlet through a USB pen drive or micro SD card (and needs to be a very simple process like insert the pen drive or uSD card then press a button to update)

Some questions if someone could please help:

1) is it possible to change the background image at runtime?

2) If so, how? Do I just copy literally byte by byte the new image into the (FLASH I assume?) memory location storing the current image initially programmed by TouchGFX?

3) what format (file type) is the image stored into the micro by TouchGFX initially?

4) for round displays, how it the image stored? Like a square image with transparent (or disregarded) corner areas? Or as a circle (which would obviously save some memory)?

5) where can I find a list of displays that are already setup in TouchGFX?

 

Thank you for your help

 

 

1 ACCEPTED SOLUTION

Accepted Solutions
GaetanGodart
ST Employee

Hello @Ricko and welcome to the community!

 


1) is it possible to change the background image at runtime? 

 

 Yes.

 

2) If so, how? Do I just copy literally byte by byte the new image into the (FLASH I assume?) memory location storing the current image initially programmed by TouchGFX?


There is many way.


The simplest way is to set 2 images as background, one on top of the other. When you want to show the second background, simply set the first background not visible like so:

background1.setVisible(false);
background1.invalidate();

 

!!! Spoiler for question 3 !!!
A more complexes way is to change the bitmap of the image, because the images are stored as bitmaps.
You can find the ID of your bitmap in the BitmapDatabase.cpp file that is located in generated/images/src.
See the API documentation here : classtouchgfx_1_1_bitmap 
See an example of bitmap change of an image here : ui-components/images/image 

Finally, you can create a dynamic bitmap at runtime but this is clearly overkill.

 


3) what format (file type) is the image stored into the micro by TouchGFX initially?


Bitmap 😀 c.f. read answer to question 2.

 


4) for round displays, how it the image stored? Like a square image with transparent (or disregarded) corner areas? Or as a circle (which would obviously save some memory)?

 

They are stored as regular images.
If you have images that are transparent (or solid color) outside of the circle where they are displayed, you could save a lot of memory by compressing the images :

GaetanGodart_0-1716466006921.png

You could however save flash by disregarding the pixels outside the circle displayed for the framebuffer by enabling the GFX MMU but I am not very familiar with it : graphic-memory-optimization-with-stm32-chromgrc-stmicroelectronics.pdf 

If memory is critical in your project, I invite you to watch this video : How to TouchGFX: Save flash memory 

 


5) where can I find a list of displays that are already setup in TouchGFX?


You can find all the board + display combo already setup (by us or by our partners) by simply clicking "New", then "Create" and then you will see all the board + display combo already setup and you can search a specific board :

GaetanGodart_1-1716466269511.png

 

If this comment answer your question, I invite you to select it as "best answer".

regards,

Gaetan Godart
Software engineer at ST (TouchGFX)

View solution in original post

9 REPLIES 9
urbito
Senior

- You can put an image in top of the screen in runtime.

 

- TouchGFX has its own API to update background, images, widgets, etc, you dont need to change the content of the bytes in memory.

 

- TouchGFX would take any JPG or PNG image and work from that.

 

- Have not work with this before.

 

- You can download TouchGFX software and there you have all the oficial boards/displays you can work with. If there is no board/display for your requeriments, you would have to build your own hardware and firmware.

Thank you @urbito ! 🙂

Could not find how to setup a custom display (round or not), where can I find that documentation or examples (preferable videos if they are available)?

 

Thank you

All the documentation and videos available:

Introduction | TouchGFX Documentation 4.21

Greetings

GaetanGodart
ST Employee

Hello @Ricko and welcome to the community!

 


1) is it possible to change the background image at runtime? 

 

 Yes.

 

2) If so, how? Do I just copy literally byte by byte the new image into the (FLASH I assume?) memory location storing the current image initially programmed by TouchGFX?


There is many way.


The simplest way is to set 2 images as background, one on top of the other. When you want to show the second background, simply set the first background not visible like so:

background1.setVisible(false);
background1.invalidate();

 

!!! Spoiler for question 3 !!!
A more complexes way is to change the bitmap of the image, because the images are stored as bitmaps.
You can find the ID of your bitmap in the BitmapDatabase.cpp file that is located in generated/images/src.
See the API documentation here : classtouchgfx_1_1_bitmap 
See an example of bitmap change of an image here : ui-components/images/image 

Finally, you can create a dynamic bitmap at runtime but this is clearly overkill.

 


3) what format (file type) is the image stored into the micro by TouchGFX initially?


Bitmap 😀 c.f. read answer to question 2.

 


4) for round displays, how it the image stored? Like a square image with transparent (or disregarded) corner areas? Or as a circle (which would obviously save some memory)?

 

They are stored as regular images.
If you have images that are transparent (or solid color) outside of the circle where they are displayed, you could save a lot of memory by compressing the images :

GaetanGodart_0-1716466006921.png

You could however save flash by disregarding the pixels outside the circle displayed for the framebuffer by enabling the GFX MMU but I am not very familiar with it : graphic-memory-optimization-with-stm32-chromgrc-stmicroelectronics.pdf 

If memory is critical in your project, I invite you to watch this video : How to TouchGFX: Save flash memory 

 


5) where can I find a list of displays that are already setup in TouchGFX?


You can find all the board + display combo already setup (by us or by our partners) by simply clicking "New", then "Create" and then you will see all the board + display combo already setup and you can search a specific board :

GaetanGodart_1-1716466269511.png

 

If this comment answer your question, I invite you to select it as "best answer".

regards,

Gaetan Godart
Software engineer at ST (TouchGFX)
GaetanGodart
ST Employee

Hello @Ricko ,

 

Have you bene able to move forward regarding your question?

 

Regards,

Gaetan Godart
Software engineer at ST (TouchGFX)

Thank you @GaetanGodart for checking up on this.

Working on it at the moment. I am waiting for the client to confirm which round display he wants to use and the UI design.

 

GaetanGodart
ST Employee

Great, keep us updated! 😊

Gaetan Godart
Software engineer at ST (TouchGFX)

Hello @Ricko ,

 

Have you been able to move forward with your project?

If one of the previous comment helped you solve your issue, I invite you to select it as "best answer".

If you are still encountering problems, I invite you to give us more information so we can help you.

 

Regards,

Gaetan Godart
Software engineer at ST (TouchGFX)
Ricko
Associate III

Hi @GaetanGodart 

the client asked for refinement in specs so haven't yet fully worked on this. I just posted another question relevant and related to this.

I will mark as solution the above and then if I need to I will post a new question.

Thank you