GUI background advice

[JPabl.1]

Hi there TouchGFX team!

I'm working on a GUI that monitors several values, like in the screenshot. 

 

What is the best way to create those gray blocks. Should I add a background image will all the circle + gray boxes + text, and then render the values. Or should I create circle + gray boxes + text using widgets? 

Also, whats the best way to create those gray boxes? 

 

Thanks a lot in advance

[Peter BENSCH]

Well, if the grey boxes with rounded sides and the green circle are static objects, you should define them together as a background image and place the changing numerical values in front of them. This also has the advantage over permanent generation with a widget of saving valuable computing time and thus improving the response time of your overall system.

The question of how you should create these grey boxes depends on whether you want to create them as a background image or with the STM32. In the latter case, you can render them quite time-consuming or calculate them more easily with an STM32U5 with NeoChrom Vector Graphics GPU.

Hope that helps?

Regards
/Peter

[GaetanGodart]

Hello @JPabl.1 ,

 

As @Peter BENSCH said, if the boxes won't move, you can simply integrate them directly on the background image (if you use a background image).

Otherwise, there is 2 ways to create these boxes :

1. Create an image (on Canva for instance) with transparent background, then import it to you project, add it to an image widget and you are done. This is fast, even when you want to do complex shapes. However, images takes a lot of space so remember to compress the image in TouchGFX Designer.
2. Create your box or shape using the shape widgets available in TouchGFX Designer such a circle or rectangle. You can add a rectangle then add 2 semi-circles on the sides to create that shape. This solution is the most optimized but can take a bit of time if you want to do complex shapes (not your case).

 

I hope this helps! :smiling_face_with_smiling_eyes:
If this comment or another on answers your question, I invite you to select it as "best answer".

 

Regards,