How can I draw bitmap?

[Wiser1201]

Hi there. I have an image that I want to draw in a certain location and in as many as I need. I found the function HAL::lcd().drawPartialBitmap. I tried to call it from the view class in my function, like HAL::lcd().drawPartialBitmap(myBitmapId, point.x, point.y, bitmapRect). But it seems that it only works from the MyViewClass::draw() function. Just a picture widget won't work for me because I need to draw the same picture many times in different places. Places and quantities are dynamic. How can I do this?

[GaetanGodart]

Hello @Wiser1201 and welcome to the community!

TouchGFX provides a way to draw triangles (or any polygon) with the shape widget :

To add triangles at runtime, you should use the add function (make sure to delete them after with the delete function).
However, it is not recommended to dynamically add widgets at runtime in embedded devices because of memory problems/limitations.
If you still want to go this route, you can know more in those threads:

• https://community.st.com/t5/stm32-mcus-touchgfx-and-gui/possibility-of-dynamically-creating-ui-components-pre-screen/m-p/657347
• https://community.st.com/t5/stm32-mcus-touchgfx-and-gui/adding-containers-widgets-not-declared-in-screenview-hpp/m-p/681913
• https://community.st.com/t5/stm32-mcus-touchgfx-and-gui/how-to-add-custom-container-during-runtime/m-p/642792
• https://community.st.com/t5/stm32-mcus-touchgfx-and-gui/add-widgets-line-etc-at-run-time/td-p/100166

If that answered your question, I invite you to select this message as "best answer". :smiling_face_with_smiling_eyes:

Regards,

[Wiser1201]

Hello. Thanks for the answer! I read about the Shape widget in your documentation. And I also looked at the linkes you dropped. I'll give you a specific example so you understand what I want. We have a game "Snake". Let's say we have a snake of some size. The next frame has arrived and we need to move it. Here is how it's can be done properly:
1. Delete snake's tail. Then redraw a background in this place.
2. Move snake's head forward.
3. Add one element of snake's body before the head.
That's all. I don't need to redraw entire screen for this operation.
And one more thing. When I need increase snake's length I can just draw new tail before the old one.
Summary: Since the size of the snake is dynamic, the images either must be pre-defined, like:
touchgfx::Image AllPossibleImagesOfSnakesBody[MAP_SIZE];
Or create them dynamically, but that's wrong. Or just redraw. That's why I'm looking for how to do this. I need something like: 
void ClearArea(Point coord, Rect areaToClear);
void DrawImageOrColor(Point coord, Rect areaToClear, ...);
What can you advise?

[GaetanGodart · Accepted solution]

Hello @Wiser1201 ,

In the case of a snake game, I would use some tricks to not use an undefined number of elements on my UI.

I assume from what you said earlier that there is 3 different assets, one is the head, one is the body and can be repeated and the last one is the tail.

Since the snake game is a tile based game we have a limited amount of tiles and possible positions, so I could simply put an image on each tile and load the corresponding bitmap (head, body, tail or nothing) for each of the images based on the state of the game.

But something smarter (and maybe it would work for your project) would be to only have 3 image widget, one loaded with head, one with body and one with tail.
When the snake moves, first you invalidate the 3 images, then one tile ahead, you move the head image where it is going, you move the body image where the head previously was and move to tail image where the last body part was, then you invalidate the 3 images again. The key here is that only the head and tail are invalidated so the body will not be changed even if there is no image there.

Maybe this solution is what you need because you said "Just a picture widget won't work for me because I need to draw the same picture many times in different places".
The solution works in the snake example because you only draw the picture once per tick but if you wanted to draw the picture more than once per tick (ex: one of the fruits makes the snake gain 2 length), you would need more image.
If this solution work for you, it would save you memory and computation power (because you invalidate only the necessary area) but it might be a bit tricky to implement and prone to error if someone work on the project after you without knowledge of the project.

Regards,