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.

• MaTouch ESP32-S3 7” Parallel TFT with Touch

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

• Software support: 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.

However, if you want to realize it using Arduino,the following is needed:

• Add some library to Arduino libraries is needed,more detail you can click here.
• This is the mf_Lvgl library, you can add it to your Arduino libraries to replace the LVGL library.

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:

• LVGL is a user interface library primarily focused on display functionality, but it lacks user interaction capabilities. So, I need something to help me touch or interact with the screen.

    static lv_indev_drv_t indev_drv;
    lv_indev_drv_init(&indev_drv);
    indev_drv.type = LV_INDEV_TYPE_POINTER;
    indev_drv.read_cb = my_touchpad_read;
    lv_indev_drv_register(&indev_drv);

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;
  }
}

Implement and register a function which can copy the rendered image to an area of your display:

    lv_disp_drv_init(&disp_drv);
    disp_drv.hor_res = screenWidth;
    disp_drv.ver_res = screenHeight;
    disp_drv.flush_cb = my_disp_flush;
    disp_drv.draw_buf = &draw_buf;
    lv_disp_drv_register(&disp_drv);

void my_disp_flush(lv_disp_drv_t *disp, const lv_area_t *area, lv_color_t *color_p)
{
  uint32_t w = (area->x2 - area->x1 + 1);
  uint32_t h = (area->y2 - area->y1 + 1);


#if (LV_COLOR_16_SWAP != 0)
  gfx->draw16bitBeRGBBitmap(area->x1, area->y1, (uint16_t *)&color_p->full, w, h);
#else
  gfx->draw16bitRGBBitmap(area->x1, area->y1, (uint16_t *)&color_p->full, w, h);
#endif


  lv_disp_flush_ready(disp);
}

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

// #define SCREEN_HD
#define SCREEN_NORMAL


#define TFT_BL 10


#ifdef SCREEN_HD
#define SCREEN_W 1024
#define SCREEN_H 600
#endif


#ifdef SCREEN_NORMAL
#define SCREEN_W 800
#define SCREEN_H 480
#endif


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 */);
#endif

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

The raw code.

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?