ESP32-ILI9488-TFT_eSPI-LVGL8.3.6 Color problems

How-to
,
1

Before posting

  • Get familiar with Markdown to format and structure your post

Description

Hi.
I am getting strange colors on background of panels, when running the SquareLine project on my board.
I attached 2 screenshots, first with the project from SuqareLine were you can see the desired colors, second with actual screen. The logo(png) on the top of UI is rendering colors normal.

I am using esp32-wrover-ie-n16r8 with ILI9488 with LVGL 8.3.6, TFT_eSPI

The code of first panel:

ui_PanStandard = lv_obj_create(ui_main);
    lv_obj_set_width(ui_PanStandard, 120);
    lv_obj_set_height(ui_PanStandard, 160);
    lv_obj_set_x(ui_PanStandard, -160);
    lv_obj_set_y(ui_PanStandard, 32);
    lv_obj_set_align(ui_PanStandard, LV_ALIGN_CENTER);
    lv_obj_clear_flag(ui_PanStandard, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_PRESS_LOCK | LV_OBJ_FLAG_CLICK_FOCUSABLE |
                      LV_OBJ_FLAG_GESTURE_BUBBLE | LV_OBJ_FLAG_SNAPPABLE | LV_OBJ_FLAG_SCROLLABLE | LV_OBJ_FLAG_SCROLL_ELASTIC |
                      LV_OBJ_FLAG_SCROLL_MOMENTUM | LV_OBJ_FLAG_SCROLL_CHAIN);     /// Flags
    lv_obj_set_style_bg_color(ui_PanStandard, lv_color_hex(0xD55D25), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_PanStandard, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_color(ui_PanStandard, lv_color_hex(0xCA4B0F), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_opa(ui_PanStandard, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_border_width(ui_PanStandard, 4, LV_PART_MAIN | LV_STATE_DEFAULT);

Code used for test to render red or green or blue on panel background:
lv_obj_set_style_bg_color(ui_PanSportyParty, lv_color_make(255,0,0), LV_PART_MAIN | LV_STATE_DEFAULT);

Using this lv_color_make(255,0,0) on panel background, show correct color(red) or blue or green.

LVGL config:
#define LV_COLOR_DEPTH 16

What I am doing wrong?

UI Screen need it

SquareLine
SquareLine977×701 78.3 KB

Rendered screen

ILI9488
ILI94881920×1284 269 KB

2

This is a test with red, green and blue on panels background.

ILI9488_test
ILI9488_test1920×1266 268 KB

3

Is your display SPI or RGB 16 connected? Simply 255 test isnt perfect for you missed bits order.

4

It is SPI.

build_flags = 
  -D USER_SETUP_LOADED=1
  ;-D TFT_RGB_ORDER=TFT_RGB
  ;-D TFT_SDA_READ
  
  ; Display config
  -D ILI9488_DRIVER
  -D ILI9486_DRIVER

  ;-D TFT_MISO=19
  -D TFT_MOSI=23
  -D TFT_SCLK=18
  -D TFT_CS=15
  -D TFT_DC=2
  -D TFT_RST=4
  -D TOUCH_CS=13
  -D TFT_BL=27
  -D TFT_BACKLIGHT_ON=1

  -D SMOOTH_FONT
  -D LOAD_GLCD=1
  -D LOAD_GFXFF
  
  ; SPI tuning
  -D SPI_FREQUENCY=40000000
  -D SPI_READ_FREQUENCY=20000000
  -D SPI_TOUCH_FREQUENCY=2500000

I had to use both driver ILI9488 and ILI9486 to make it work as I found on a forum of TFT_eSPI.

5

flush cb and colorswap setup? Too show code for up image …

6

I found the write setup:

-D TFT_INVERSION_ON=1
-D ILI9488_DRIVER (only this driver)

Full configuration of TFT_eSPI

build_flags = 
  -D USER_SETUP_LOADED=1
  -D TFT_INVERSION_ON=1
  
  ; Display config
  -D ILI9488_DRIVER

  -D TFT_MOSI=23
  -D TFT_SCLK=18
  -D TFT_CS=15
  -D TFT_DC=2
  -D TFT_RST=4
  -D TOUCH_CS=13
  -D TFT_BL=27
  -D TFT_BACKLIGHT_ON=1

  -D SMOOTH_FONT=1
  -D LOAD_GLCD=1
  -D LOAD_GFXFF=1
  
  ; SPI tuning
  -D SPI_FREQUENCY=40000000
  -D SPI_READ_FREQUENCY=20000000
  -D SPI_TOUCH_FREQUENCY=2500000

Thank’s, now everything looks write.