Wrong conversion of an .png image. Wrong gradient effect.

[Fernando Cola]

Hello i'm porting TouchGFX to a custom board using STM32F429 and a custom 800x480 16bit display.

I'm having trouble when I try to add a .png image on the TouchGFX designer. For some reason, if the .png file have any gradient effect, the resulting image will not display correctly on the physical display.

Here are some examples:

This is the example application i'm trying to show on the display.

This is how the colors are displayed on the physical display:

Notice how the gradients effects are displayed on the display.

My TouchGFX project is using the follow dithering configurations:

# Optional additional compiler flags
 
user_cflags := -DUSE_BPP=16
 
# Settings for image converter output format
 
alpha_dither := yes
 
# Dither algorithms: 0 (no dither), 1 (Floyd-Steinberg), 2 (Jarvis, Judice and Ninke), 3 (Stucki)
 
dither_algorithm := 2
 
opaque_image_format := RGB565
 
non_opaque_image_format := ARGB8888

Any suggestion on how to move forward?

Thank you in advance.

[Martin KJELDSEN]

Hi @Fernando Cola​,

You cannot represent gradients well with RGB565. Try switching to 24bpp (Depending on how your project is setup up you may also need to manually declare the lcd class as LCD24bpp instead of LCD16bpp).

user_cflags := -DUSE_BPP=24

There's no way around that. Either use 24bpp, accept less than perfect gradients or use assets that don't have any gradients if you want it to look good, but can't afford a 24bpp framebuffer =)

Best regards,

/Martin

[Fernando Cola]

Hello @Martin KJELDSEN​ , I've changed to an 24bpp display but i'm still not representing gradients well.

I'm not sure if I'm using the right configurations for my application. I'm using STM32Cube IDE.

Some of my configurations:

###############################################################################
# This file is part of the ST-TouchGFX 4.9.3 distribution.
# Copyright (C) 2017 Draupner Graphics A/S <http://www.touchgfx.com>.
###############################################################################
# This is licensed software. Any use hereof is restricted by and subject to the
# applicable license terms. For further information see "About/Legal Notice"
# in ST-TouchGFX Designer or in your ST-TouchGFX installation directory.
###############################################################################
# Relative location of the TouchGFX framework from root of application
touchgfx_path := touchgfx/
 
# Optional additional compiler flags
user_cflags := -DUSE_BPP=24
 
# Settings for image converter output format
alpha_dither := yes
# Dither algorithms: 0 (no dither), 1 (Floyd-Steinberg), 2 (Jarvis, Judice and Ninke), 3 (Stucki)
dither_algorithm := 2
opaque_image_format := RGB888
non_opaque_image_format := ARGB8888
 
# Settings for image converter screen orientation (empty string =
# default value, -rotate90 rotates the image 90 degrees)
screen_orientation :=
 
# Settings for Hardware accelerated text rendering on STM32F4 and F7
# devices. Must correspond to value of bitsPerPixel for font to have
# any effect. If A4 blitcap is enabled for target specific HAL the
# fontconverter must generate compliant data format, otherwise
# resulting in a DMA Controller Configuration Error.
text_data_format := A4
 
# Setting for the textconverter. Identical texts across all languages
# are mapped to the same memory region to save internal flash memory
remap_identical_texts := yes
# Location of the TouchGFX Environment
touchgfx_env := C:/TouchGFX/4.10.0/env

NoDMA dma;
NoTouchController tc;
static LCD24bpp display;
static uint16_t bitdepth = 24;
namespace touchgfx
{
void touchgfx_init()
{
	uint16_t dispWidth = 800;
	uint16_t dispHeight = 480;
 
	HAL& hal = touchgfx_generic_init<STM32F4HAL>(dma, display, tc, dispWidth, dispHeight, 0, 0, 0);
 
	hal.setFrameBufferStartAddress((uint16_t*)frameBuf0, bitdepth, true, true);
 
	hal.setTouchSampleRate(2);
	hal.setFingerSize(1);
 
	// By default frame rate compensation is off.
	// Enable frame rate compensation to smooth out animations in case there is periodic slow frame rates.
	hal.setFrameRateCompensation(false);
 
	// This platform can handle simultaneous DMA and TFT accesses to SDRAM, so disable lock to increase performance.
	hal.lockDMAToFrontPorch(false);
 
	mcuInstr.init();
 
	//Set MCU instrumentation and Load calculation
	hal.setMCUInstrumentation(&mcuInstr);
	hal.enableMCULoadCalculation(true);
}
}

void MX_LCD_Init(void) 
{ 
 LTDC_LayerCfgTypeDef pLayerCfg;
 
/* De-Initialize LTDC */
  HAL_LTDC_DeInit(&hltdc);
/* Configure LTDC */
 
  hltdc.Instance = LTDC;
  hltdc.Init.HSPolarity = LTDC_HSPOLARITY_AL;
  hltdc.Init.VSPolarity = LTDC_VSPOLARITY_AL;
  hltdc.Init.DEPolarity = LTDC_DEPOLARITY_AL;
  hltdc.Init.PCPolarity = LTDC_PCPOLARITY_IPC;
 
// Transcrito China
  hltdc.Init.HorizontalSync = 80;
  hltdc.Init.VerticalSync = 10;
 
  hltdc.Init.AccumulatedHBP = 90;
  hltdc.Init.AccumulatedVBP = 20;
  hltdc.Init.AccumulatedActiveW = 890 ;
  hltdc.Init.AccumulatedActiveH = 500;
  hltdc.Init.TotalWidth = 900;
  hltdc.Init.TotalHeigh = 510;
 
  hltdc.Init.Backcolor.Blue = 0x0;
  hltdc.Init.Backcolor.Green = 0x0;
  hltdc.Init.Backcolor.Red = 0x0;
 
  if (HAL_LTDC_Init(&hltdc) != HAL_OK)
  {
    Error_Handler( );
  }
 
  pLayerCfg.WindowX0 = 0;
  pLayerCfg.WindowX1 = 800;
  pLayerCfg.WindowY0 = 0;
  pLayerCfg.WindowY1 = 480;
//  pLayerCfg.PixelFormat = LTDC_PIXEL_FORMAT_RGB565;
  pLayerCfg.PixelFormat = LTDC_PIXEL_FORMAT_RGB888;
  pLayerCfg.Alpha = 255;
  pLayerCfg.Alpha0 = 0;
  pLayerCfg.BlendingFactor1 = LTDC_BLENDING_FACTOR1_CA;
  pLayerCfg.BlendingFactor2 = LTDC_BLENDING_FACTOR2_CA;
  pLayerCfg.FBStartAdress = 0xC0000000;
  pLayerCfg.ImageWidth = 800;
  pLayerCfg.ImageHeight = 480;
  pLayerCfg.Backcolor.Blue = 0x0;
  pLayerCfg.Backcolor.Green = 0x0;
  pLayerCfg.Backcolor.Red = 0;
 
  if (HAL_LTDC_ConfigLayer(&hltdc, &pLayerCfg, 0) != HAL_OK)
  {
    Error_Handler( );
  }
}

SystemClock -

void SystemClock_Config(void)
{
  RCC_OscInitTypeDef RCC_OscInitStruct = {0};
  RCC_ClkInitTypeDef RCC_ClkInitStruct = {0};
  RCC_PeriphCLKInitTypeDef PeriphClkInitStruct = {0};
 
  __HAL_RCC_PWR_CLK_ENABLE();
  __HAL_PWR_VOLTAGESCALING_CONFIG(PWR_REGULATOR_VOLTAGE_SCALE1);
 
  RCC_OscInitStruct.OscillatorType = RCC_OSCILLATORTYPE_LSI|RCC_OSCILLATORTYPE_HSE;
  RCC_OscInitStruct.HSEState = RCC_HSE_ON;
  RCC_OscInitStruct.LSIState = RCC_LSI_ON;
 
  RCC_OscInitStruct.PLL.PLLState = RCC_PLL_ON;
  RCC_OscInitStruct.PLL.PLLSource = RCC_PLLSOURCE_HSE;
  RCC_OscInitStruct.PLL.PLLM = 25;
  RCC_OscInitStruct.PLL.PLLN = 336;
  RCC_OscInitStruct.PLL.PLLP = RCC_PLLP_DIV2;
//  RCC_OscInitStruct.PLL.PLLQ = 7;
 
  if (HAL_RCC_OscConfig(&RCC_OscInitStruct) != HAL_OK)
  {
    Error_Handler();
  }
  /** Initializes the CPU, AHB and APB busses clocks 
  */
  RCC_ClkInitStruct.ClockType = RCC_CLOCKTYPE_HCLK|RCC_CLOCKTYPE_SYSCLK
                              |RCC_CLOCKTYPE_PCLK1|RCC_CLOCKTYPE_PCLK2;
  RCC_ClkInitStruct.SYSCLKSource = RCC_SYSCLKSOURCE_PLLCLK;
  RCC_ClkInitStruct.AHBCLKDivider = RCC_SYSCLK_DIV1;
  RCC_ClkInitStruct.APB1CLKDivider = RCC_HCLK_DIV4;
  RCC_ClkInitStruct.APB2CLKDivider = RCC_HCLK_DIV2;
 
  if (HAL_RCC_ClockConfig(&RCC_ClkInitStruct, FLASH_LATENCY_5) != HAL_OK)
  {
    Error_Handler();
  }
  PeriphClkInitStruct.PeriphClockSelection = RCC_PERIPHCLK_LTDC;
  PeriphClkInitStruct.PLLSAI.PLLSAIN = 420;
  PeriphClkInitStruct.PLLSAI.PLLSAIR = 6;
  PeriphClkInitStruct.PLLSAIDivR = RCC_PLLSAIDIVR_4;
  if (HAL_RCCEx_PeriphCLKConfig(&PeriphClkInitStruct) != HAL_OK)
  {
    Error_Handler();
  }
}

Any ideas ?

Thank you in advance

[Martin KJELDSEN · Accepted solution]

I don't think anything in your configuration stands out. Could it be your RGB connections to the display? Do you actually have 8 linesfor each color?

[Fernando Cola]

Hi Martin, you nailed it. Yesterday I revised the LCD GPIO configurations and turns out some pins were wrongly assigned. I fixed and the display is working properly with the gradients now. This was very tricky because since solid RGB colors were fine and we got confused thinking that the display didn't support RGB888 colors.

Thanks!

[Martin KJELDSEN]

Nice! Good job 🙂

/Martin