7 "screen Display Based on LVGL

Hi everyone, we already konw we can develop UI using the LVGL graphics library.（If you haven't learned about it, you can click here ）

And an interesting thing I found today is that different resolutions will affect the display on the same size screen, so I display the Widgets demo on the 7 "screen which has 2 versions of resolution, 1024*600 and 800*480, and compare them to how they act with LVGL.

Supplies

• MaTouch ESP32-S3 7” Parallel TFT with Touch

The board has exactly 2 versions of resolution, and can run LVGL

• Software support: Arduino

Step 1: Widgets Demo Based on Arduino

There are many LVGL demos , and what I choose is Widgets demo, it is the most well known LVGL demo. If you have ported LVGL to a board just call "lv_demo_widgets();" to start this demo on your device.

There are many LVGL demos , and what I choose is Widgets demo, it is the most well known LVGL demo. If you have ported LVGL to a board just call "lv_demo_widgets();" to start this demo on your device.

Step 2: Firmware

Add the all.c files in the Widgets demo assets to project :

• Which include the image information ;

Add the the lv_demo_widgets.c and lv_demo_widgets.h in the Widgets demo to project;

• They are key files to call "lv_demo_widgets();";

Add the touch.h to my project;

• Modify the touchpad function according to the pre-set functions in touch.h, and pass the state of the touchpad to the LVGL graphics library.

void my_touchpad_read(lv_indev_drv_t *indev_driver, lv_indev_data_t *data)
{
  if (touch_has_signal())
  {
    if (touch_touched())
    {
      data->state = LV_INDEV_STATE_PR;


      /*Set the coordinates*/
      data->point.x = touch_last_x;
      data->point.y = touch_last_y;
    }
    else if (touch_released())
    {
      data->state = LV_INDEV_STATE_REL;
    }
  }
  else
  {
    data->state = LV_INDEV_STATE_REL;
  }
}

• When I use the GFX library， it is needed to define the GFX Library For the Arduino Interface pin.

Arduino_ESP32RGBPanel *bus = new Arduino_ESP32RGBPanel(
    GFX_NOT_DEFINED /* CS */, GFX_NOT_DEFINED /* SCK */, GFX_NOT_DEFINED /* SDA */,
    40 /* DE */, 41 /* VSYNC */, 39 /* HSYNC */, 42 /* PCLK */,
    45 /* R0 */, 48 /* R1 */, 47 /* R2 */, 21 /* R3 */, 14 /* R4 */,
    5 /* G0 */, 6 /* G1 */, 7 /* G2 */, 15 /* G3 */, 16 /* G4 */, 4 /* G5 */,
    8 /* B0 */, 3 /* B1 */, 46 /* B2 */, 9 /* B3 */, 1 /* B4 */
);


#ifdef SCREEN_NORMAL
Arduino_RPi_DPI_RGBPanel *gfx = new Arduino_RPi_DPI_RGBPanel(
    bus,
    800 /* width */, 0 /* hsync_polarity */, 210 /* hsync_front_porch */, 30 /* hsync_pulse_width */, 16 /* hsync_back_porch */,
    480 /* height */, 0 /* vsync_polarity */, 22 /* vsync_front_porch */, 13 /* vsync_pulse_width */, 10 /* vsync_back_porch */,
    1 /* pclk_active_neg */, 16000000 /* prefer_speed */, true /* auto_flush */);
#endif


#ifdef SCREEN_HD
Arduino_RPi_DPI_RGBPanel *gfx = new Arduino_RPi_DPI_RGBPanel(
    bus,
    SCREEN_W /* width */, 1 /* hsync_polarity */, 40 /* hsync_front_porch */, 48 /* hsync_pulse_width */, 128 /* hsync_back_porch */,
    SCREEN_H /* height */, 1 /* vsync_polarity */, 13 /* vsync_front_porch */, 3 /* vsync_pulse_width */, 45 /* vsync_back_porch */,
    1 /* pclk_active_neg */, 16000000 /* prefer_speed */, true /* auto_flush */);

The more detail you can click Add LVGL into your project.

The raw code.

Step 3: Result

From the video, you can see that the resolution 1024 version has higher display effects, while lower FPS, and the resolution 800 version has lower display effects, while higher FPS.

The result is that the high-resolution version is better suited for static displays, while the low-resolution version is better suited for dynamic displays.

So which version do you prefer?