Add background image and Screen Jerks arounds

Description

I used SquareLine IDE to create a project. Everything was working perfectly, until I added a bitmap image to the background. The screen dsiplays the image perfectly well, but now the GUI seems to jump around every second or so.

What MCU/Processor/Board and compiler are you using?

ESP32 S3, 8048S043 - 4.3inch LCD with Capacative Touch TFT

What LVGL version are you using?

8.3.7

What do you want to achieve?

Stable image render, with no jumping image. I am using platformio with Visual Studio Code, and the Arduino framewok (not expressif ).

What have you tried so far?

I tried with no background image, but as soon as I add an image (tried several images), the screen render jumps around. Note the screen supports 24 bits per pixel color format.

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

#define LV_ATTRIBUTE_MEM_ALIGN
const LV_ATTRIBUTE_MEM_ALIGN uint8_t ui_img_br_bmp_24bpp_png_data[] = {
    0xC5,0x30,0xC5,0x30,0xC5,0x30,0xC5.......
};
const lv_img_dsc_t ui_img_br_bmp_24bpp_png = {
    .header.always_zero = 0,
    .header.w = 800,
    .header.h = 480,
    .data_size = sizeof(ui_img_br_bmp_24bpp_png_data),
    .header.cf = LV_IMG_CF_TRUE_COLOR,
    .data = ui_img_br_bmp_24bpp_png_data
};

Then in screen_init function
ui_BackgroundImage = lv_img_create(ui_PCDisplayMain);
    lv_img_set_src(ui_BackgroundImage, &ui_img_br_bmp_24bpp_png);
    lv_obj_set_width(ui_BackgroundImage, LV_SIZE_CONTENT);   /// 1
    lv_obj_set_height(ui_BackgroundImage, LV_SIZE_CONTENT);    /// 1
    lv_obj_set_align(ui_BackgroundImage, LV_ALIGN_CENTER);
    lv_obj_add_flag(ui_BackgroundImage, LV_OBJ_FLAG_ADV_HITTEST);     /// Flags
    lv_obj_clear_flag(ui_BackgroundImage, LV_OBJ_FLAG_SCROLLABLE);      /// Flags

my Arduino loop

void loop()
{
   lv_timer_handler(); /* let the GUI do its work */

    //every 200th loop
    ui_update(timeLabelMemory, dateLabelMemory); 
    screen_update();
}

void screen_update()
{
  //update all labels with dynamic data just read from wifi web service etc, an example....
  lv_label_set_text_fmt(ui_GPUFanRevs,  "%d", pc_data.GPUFanRevs);
}

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

Hi @jam4t ,

Personally I have only gotten involved with Arduino in the last couple of weeks, it seems there may be issues when using it with this board see this post also… I suspect there is some issue with the drivers. I was unable to get debugging to work with Arduino in a sensible time frame and left that approach…

If you or anyone else has got the debugging to work for the ESP32S3 with Arduino if the configuration were shared I would be willing to take a look.

I have one of these boards myself and I have now got the ESP-IDF Eclipse plugin running in Windows 10 including the debugger and I am working on a port for this board with that environment as I personally find the Arduino environment somewhat primitive, slow and cumbersome and with no debugging it’s really difficult to work on. I am working on it in my spare time so it won’t be available in the immediate future.

If you are interested in using the port I will share it with you if that is helpful…

Kind Regards,

Pete

Hi @pete-pjb

Many thanks for the offer to share the port to allow me to debug the device with the Arduino Framework. Please forward me the details this would be very helpful. I havent debugged an S3 yet - only ESP32- AI thinker CAM chips - which were super slow and a bit tempremental.

Actually, when you mention the Arduino framework as potentially having problems with drivers, its made me realise I should also try to move to the espressif framework just to test out that theory - so I will also migrate the code over to that framework.

Hi @jam4t ,

This issue might be related to this I am currently experimenting with my own setup.

Kind Regards,

Pete

Hi @jam4t ,

My conclusion is the issue is related to this ESP32 forum post which goes through it all and ends up with the creation of the ‘bounce buffer’ in the LCD ESP32 RGB panel API. Unfortunately as far as I can see this has not been implemented for Arduino so I think you will need to move away from that platform if you want to fix the problem.

Personally I managed to achieve a stable display using the RGB Panel example in ESP-IDF V5.1, I used it on Windows 10 with Eclipse and the ESP-IDF plugin.

In the example I enabled the bounce buffer. This appears to be the key to the problem for me.

Code Here:

    esp_lcd_rgb_panel_config_t panel_config = {
        .data_width = 16, // RGB565 in parallel mode, thus 16bit in width
        .psram_trans_align = 64,
        .num_fbs = LCD_NUM_FB,
		.bounce_buffer_size_px = 10 * LCD_H_RES,    // ***This is the magic line!***
        .clk_src = LCD_CLK_SRC_DEFAULT,
        .disp_gpio_num = PIN_NUM_DISP_EN,
        .pclk_gpio_num = PIN_NUM_PCLK,
        .vsync_gpio_num = PIN_NUM_VSYNC,
        .hsync_gpio_num = PIN_NUM_HSYNC,
        .de_gpio_num = PIN_NUM_DE,
        .data_gpio_nums = {
            PIN_NUM_DATA0,
            PIN_NUM_DATA1,
            PIN_NUM_DATA2,
            PIN_NUM_DATA3,
            PIN_NUM_DATA4,
            PIN_NUM_DATA5,
            PIN_NUM_DATA6,
            PIN_NUM_DATA7,
            PIN_NUM_DATA8,
            PIN_NUM_DATA9,
            PIN_NUM_DATA10,
            PIN_NUM_DATA11,
            PIN_NUM_DATA12,
            PIN_NUM_DATA13,
            PIN_NUM_DATA14,
            PIN_NUM_DATA15,
        },
        .timings = {
            .pclk_hz = LCD_PIXEL_CLOCK_HZ,
            .h_res = LCD_H_RES,
            .v_res = LCD_V_RES,
            // The following parameters should refer to LCD spec
            .hsync_back_porch = 40, //40
            .hsync_front_porch = 20, //20
            .hsync_pulse_width = 10, //1
            .vsync_back_porch = 20, //8
            .vsync_front_porch = 10, //4
            .vsync_pulse_width = 5, //1
            .flags.pclk_active_neg = true,
        },
        .flags.fb_in_psram = true, // allocate frame buffer in PSRAM
    };

Please note I didn’t get debugging to work with Arduino sorry…

Also the board we are both using (ESP32 S3, 8048S043 - 4.3inch LCD with Capacative Touch TFT) does not support debugging out of the box at a hardware level either. The ESP32 chips USB is not routed out, the onboard USB connector is connected to the ESP32 chips UART via a converter chip, which can be used for programming but not debugging… I had to take a soldering iron to the board cut tracks and move the touch controller I/O to different pins to get the USB debugger working it is not at all straightforward :woozy_face:

I hope that helps.

Hi Pete,

Wow what an achievement, thanks so much for resolving this. I will try using the espressif SDK then with the fix you found. I’m sure this will help a lot of people who are purchasing this board. Maybe I can find the time to port the fix over to the Arduino framework as well.

I think this shows that most of the complex problems on this will be fixed on the espressif framework first, as the Arduino framework is really just a tinkering SDK. I would imagine anyone bringing something like this to production would choose espressif over the Arduino framework. Although having said that, if the board doesn’t support JTAG/Debugging OTB, then maybe something like this would never even get to production, not if it has basic hardware limitations.

I’ll keep this post updated as I try the fix, and port it over to Arduino framework.

Thanks again @pete-pjb

Hi pete-pjb,

I tried to get the LCD RGB example to work in the 5.1 espressig SDK, it compiles and runs, but I get no image at all now.

Could you send me your main source file

rgb_lcd_example_main.c

and also the projects config file

sdkconfig

I presume you changed all the settings for the ESP32S3 using

idf.py menuconfig

I think I changed everything but runtime UART log is showing me is runs, and has drawn the Scatter Chart without crashing - but I just get a blank screen

I (929) example: Register display driver to LVGL I (939) example: Install LVGL tick timer I (939) example: Display LVGL Scatter Chart

Once I have code that is running and working - I can see the bounce code and see if its worth moving it to the arduino framework - as I am using that for my project (evewwn though with Visual Stduio Code and platformio).

Hi @jam4t ,

I created a specific project which I can’t share publicly give me a bit of time and I will post the demo project complete…

Kind Regards,

Pete

Hi @jam4t ,

I have attached a basic project created in Eclipse IDE for C/C++ Developers Version: 2023-06 (4.28.0) after adding the ESP-IDF plugin from the Eclipse marketplace.

It also has a quick hacked together touch control for the gt911 chip.

I hope it is helpful to you.
rgb_panel.zip (44.0 KB)

Kind Regards,

Pete

1 Like

Thanks again @pete-pjb

I took your example and built it and it works. I changed a lot more of the config in my example which is why it probably wasn’t working.

When I run the example you gave me, I don’t see any glitching either with the Bounce buffer either enabled or disabled. The scatter graph displays perfectly. I will try moving the clk back to 18, and then see if I can port my project (which definetly does glitch), to see if this fixes the issue.

1 Like

Hi @jam4t ,

Just in case you need a VSCode/ESP-IDF version see this post.

Kind Regards,

Pete