Dynamic Bitmap Background Transparency Implementation

[TesterSAM]

Hi, 

I would like to capture a TextArea's content and use it with TextureMapper for scaling animation and a blurry filter effect on the bitmap data.

However, there is noise for the TextArea background in HW, but the simulator result is perfect. 

The reasons for using TextureMapper with Bitmap Data:

• the TextArea content will be updated
• the screen background will be updated
• filter effect function will be applied to the TextArea's content
• Able to implement the scaling & fade animation

 

How to create a Bitmap Data with Font/image's content without a noisy background?

----------------------------------------------------------------------------

STM32U5G9-DK Result (noise for the Background):

Simulator Result (expected):

----------------------------------------------------------------------------

The Dynamic Bitmap creation (Reference to advanceAnimationContainer.cpp in Text Animation Demo):

TestFont1Bitmap = Bitmap::dynamicBitmapCreate(Container.getWidth(), Container.getHeight(), Bitmap::ARGB8888);
	touchgfx_printf("TestFont1Bitmap %d \n", TestFont1Bitmap);
	if (TestFont1Bitmap != BITMAP_INVALID)
	{
		FontTM.setBitmap(TestFont1Bitmap);
		FontTM.setPosition(50, 50, Container.getWidth(), Container.getHeight());
		FontTM.setBitmapPosition(0, 0);

		Container.setCacheBitmap(TestFont1Bitmap);
		Container.enableCachedMode(true);
		Container.updateCache();

		Container.setAlpha(0);
		FontTM.setupAnimation(AnimationTextureMapper::SCALE, 0.8f, 62, 0, EasingEquations::linearEaseInOut);
		FontTM.startAnimation();
	}

 ---------------------------------------------------------------------------------------------------------

Please feel free to download the project for your testing.

 

 

[PeterVang]

Hello,

The noise you see in the dynamic bitmaps comes from the memory not being initialized. You can e.g. fix this by inserting the following between line 4 and 5 in your code snippet above:

memset((void*)TestFont1Bitmap.getData(), 0, TestFont1Bitmap.getWidth() * TestFont1Bitmap.getHeight() * 4);

Be aware that you might see another glitch (with the text characters being "scrambled") when reprogramming a running board. This can be solved by power-cycling the board or by inserting the following code to the last user code section of MX_DCACHE2_Init function in main.c:

 /* USER CODE BEGIN DCACHE2_Init 2 */
 // Ensure that GPU2D texture cache does not hold any out-dated data from previous application
 __HAL_RCC_GPU2D_CLK_ENABLE();
 HAL_DCACHE_Invalidate(&hdcache2);
 /* USER CODE END DCACHE2_Init 2 */

Note: This code is already included when using the project template for STM32U5G9J-DK2 from TouchGFX Designer 4.26.0 and forward.

Best regards,

Peter

[TesterSAM]

@PeterVang Thank you so much. The Noise background issue is fixed.

 

I got another issue that I tried to apply a Blur function to the Bitmap data, the simulator could review the result, but the Hardware failed. 

Any idea about this issue?

Any Demo/ Example that applied a filter effect to the Bitmap Data?

Any plan to add a built-in filter feature in TouchGFX in the feature?

---------------------------------------------------------------------------------------------------

STM32U5G9-DK result:

Radius = 1	Missing TextureMapper "FontTM"
Radius = 2	Triggered HardFault

 

Simulator result:

Radius = 1	Normal
Radius = 2	Normal

 

 

 

 

[PeterVang]

Hello,

I can see that you have an issue with your tempBuffer:

uint8_t* tempBuffer = new uint8_t[width * height * 4];

This requires 10000 bytes, but you have only allocated 0x200 bytes for heap in your linker script:

_Min_Heap_Size = 0x4000; /* required amount of heap */

As a result your tempBuffer overlaps with your bitmapCacheBuffer, and the dynamic bitmap adresses are therefore corrupted. You could try to make your heap large enough or use static allocation for your tempBuffer.

[TesterSAM]

@PeterVang Thank you for your feedback, and sorry for the late reply. 

Yes, I did not consider the heap usage. HW could show the blurred bitmap data after increasing the min heap size.

It led to another consideration about the RAM usage.

The example project I provided uses "ARGB8888" in the LTDC Pixel Parameters config. It could show the Dynamic Bitmap with a transparent background. However, the RAM resource limited the project could not set a double framebuffer. STM32U5G9-DK2 only contains 3MB RAM, and the performance would be limited by the bandwidth if using external RAM.

 

Generally, using "RGB565" as LTDC Pixel Parameters config with Texture Mapper could show a transparent background PNG image. The PNG image was converted to a bitmap. So, I would expect that an ARGB8888 format Bitmap data could also able to shown with a transparent background under  "RGB565" as LTDC Pixel Parameters config.

 

Is that MUST using "ARGB8888" in the LTDC Pixel Parameters config for the Dynamic Bitmap with a transparent background?

If no, could you point out which setting is required.

 

 

 

 

[PeterVang]

You need your dynamic bitmap to be ARGB8888 to handle the transparency, but you can set your framebuffer color depth independent of this. TouchGFX framework, ChromART and NeoChrom will handle the conversion between the format of your bitmaps and your framebuffer.

It rarely makes sense to set the framebuffer format to ARGB8888, since you rarely need your actual framebuffer to have transparency. So you can reduce the framebuffer RAM size to 75% by switching the framebuffer format (LTDC layer 0 format) to RGB888 without any loss of quality. You can also (like you suggest) reduce the framebuffer RAM size to 50% by changing to RGB565, but can lead to some display banding because of the reduced color space.

You can take a look at the TouchGFX Board Setup that we provide in TouchGFX Designer "Create" menu. This is set up to use RGB565 double framebuffer:

 

[TesterSAM]

I tried the TouchGFX-generated project to review the Pixel parameters in LTDC.

 

LCD setup from: https://community.st.com/t5/stm32-mcus-touchgfx-and-gui/how-to-create-argb8888-dynamic-bitmap-on-rgb565-platform/m-p/835516

static LCD32bpp lcd32;

#define BITMAP_CACHE_SIZE (400*400+32*4) //Size of the bigest cacheable container + meta data

LOCATION_PRAGMA_NOLOAD("TouchGFX_Framebuffer")
uint32_t bitmapCacheBuffer[BITMAP_CACHE_SIZE] LOCATION_ATTRIBUTE_NOLOAD("TouchGFX_Framebuffer");

FrontendApplication::FrontendApplication(Model& m, FrontendHeap& heap)
 : FrontendApplicationBase(m, heap)
{
	HAL::getInstance()->setAuxiliaryLCD(&lcd32);

 Bitmap::setCache((uint16_t*)bitmapCacheBuffer, sizeof(bitmapCacheBuffer), 2);
}

The Container & Bitmap setup code:

void Case4CusContainer::initialize()
{
 Case4CusContainerBase::initialize();

 touchgfx_printf("TouchGFX Project case2\n");

 SetupBitmap();
}


void Case4CusContainer::SetupBitmap()
{
	ImageBitmap = Bitmap::dynamicBitmapCreate(240, 325, Bitmap::ARGB8888);
	touchgfx_printf("ImageBitmap :%d\n", ImageBitmap);

	if(ImageBitmap != BITMAP_INVALID)
	{
		uint8_t* const bitmapPixels = (uint8_t*)Bitmap::dynamicBitmapGetAddress(ImageBitmap);
		memset(bitmapPixels, 0, ImageBitmap.getWidth() * ImageBitmap.getHeight() * 2);	// HW Fixed Noise Background issue

		HAL::getInstance()->drawDrawableInDynamicBitmap(ImageTM, ImageBitmap);

		BitmapTM.setBitmap(ImageBitmap);
		BitmapTM.setPosition(560, 0, 240, 325);
		BitmapTM.setBitmapPosition(0, 0);

		BitmapTM.setupAnimation(AnimationTextureMapper::SCALE, 1.0f, 0, 0, EasingEquations::linearEaseInOut);
		BitmapTM.startAnimation();
	}
}

----------------------------------------------------------------------------------------------------------------------------------------------------------

My expected Result would be: 

1. Copy the Image TextureMapper content, and convert into ARGB8888 Bitmap format, and place it into the a new Texture Mapper.

2. Set the new Texture Mapper location on Top of the orange region. 

----------------------------------------------------------------------------------------------------------------------------------------------------------

Here is my test result:

	LTDC Config	TouchGFX	Dynamic Bitmap	Result
case	Pixel Parameters	Frambuffer Pixel Format	Frambuffer Strategy	Buffer Location	Format	Sim	HW
1	RGB565	RGB565	Double Buffer	By Allocation	ARGB8888	Fail (no "7" display on top of the orange region)	Fail (no "7" display on top of the orange region)
2	ARGB8888	ARGB8888	Singal Buffer (RAM resouce)	By Allocation	ARGB8888	Matched to my expected result	Matched to my expected result

 

It is failure to show the ARGB8888 Dynamic Bitmap Data under RGB565 pixel parameters config in LTDC. 

Please found the attached files for reference.

 

[PeterVang]

Hello,

It is not completely clear to me what you want to achieve. But if you just want to copy a bitmap into a dynamic bitmap you can simply do it like this:

#include <images/BitmapDatabase.hpp>
void Case4CusContainer::SetupBitmap()
{
 ImageBitmap = Bitmap::dynamicBitmapCreateCopy(BITMAP_NUNITOMEDIUM_NEAR_7_ID);
	touchgfx_printf("ImageBitmap :%d\n", ImageBitmap);

	if(ImageBitmap != BITMAP_INVALID)
	{
		BitmapTM.setBitmap(ImageBitmap);
		BitmapTM.setPosition(560, 0, 240, 325);
		BitmapTM.setBitmapPosition(0, 0);

		BitmapTM.setupAnimation(AnimationTextureMapper::SCALE, 1.0f, 500, 0, EasingEquations::linearEaseInOut);
		BitmapTM.startAnimation();
	}
}

This works to animate the "7" on top of the orange box in your RGB565 project. Then you can also get rid of the ImageTM widget.

[PeterVang]

Ok, then you need to use an auxiliary LCD32 to render the dynamic bit. I can see that you already tried to add this to your project in FrontendApplication, but maybe you where missing this important line (since your dynamic bitmap content is a texture mapper):

lcd32.enableTextureMapperAll();

 I have also added an example project here, does what I think you want to do. This uses RGB565 framebuffer and can run in both Simulator and on target by clicking Run Target in TouchGFX Designer.

[TesterSAM]

@PeterVang Thank you so much. Now the Dynamic Bitmap issue is fixed.

[amb]

Hello @TesterSAM 

I posted another thread about your topic ,but I never have a solution .

Solved: How to create ARGB8888 dynamic bitmap on RGB565 pl... - STMicroelectronics Community

Can you do me a favor and test draw a circle on your cacheable container and see what happend? I believe your cacheable container is ARGB8888 and your ltdc display is RGB565？

Best Regard

Andy