STM32 with TouchGFX - Updating UI background image at runtime

[Ricko]

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

 

 

[urbito]

- 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.

[Ricko]

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

[urbito]

All the documentation and videos available:

Introduction | TouchGFX Documentation 4.21

Greetings

[GaetanGodart]

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 :grinning_face: 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 :

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 :

 

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

regards,

[GaetanGodart]

Hello @Ricko ,

 

Have you bene able to move forward regarding your question?

 

Regards,

[Ricko]

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]

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,

[GaetanGodart]

Great, keep us updated! :smiling_face_with_smiling_eyes:

[Ricko]

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