LVGL (Light and Versatile Graphics Library) is the most popular free and open-source embedded graphics library. It allows you to create beautiful user interfaces for any MCU, MPU, and display type. In this guide, we will set up LVGL on an ESP32 microcontroller with a cheap ILI9341 display.

Hardware Requirements

• ESP32 Development Board (e.g. ESP32-WROOM-32D)
• ILI9341 2.8-inch SPI TFT LCD display
• Breadboard and jumper wires

Wiring Diagram

Installing Libraries in PlatformIO

Add the following dependencies to your platformio.ini:

[env:esp32dev]
platform = espressif32
board = esp32dev
framework = arduino
monitor_speed = 115200
lib_deps =
    lvgl/lvgl@^8.3.9
    bodmer/TFT_eSPI@^2.5.31

Initializing the Display & LVGL

We need to register a display buffer and a driver callback. Here is the basic structure of the initialization function:

#include <lvgl.h>
#include <TFT_eSPI.h>

TFT_eSPI tft = TFT_eSPI();

/* Change to your screen resolution */
static const uint16_t screenWidth  = 320;
static const uint16_t screenHeight = 240;

static lv_disp_draw_buf_t draw_buf;
static lv_color_t buf[ screenWidth * 10 ];

/* Display flushing */
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 );

    tft.startWrite();
    tft.setAddrWindow( area->x1, area->y1, w, h );
    tft.pushColors( ( uint16_t * )&color_p->full, w * h, true );
    tft.endWrite();

    lv_disp_flush_ready( disp );
}

void setup()
{
    Serial.begin( 115200 );

    lv_init();
    tft.begin();
    tft.setRotation( 1 ); /* Landscape */

    lv_disp_draw_buf_init( &draw_buf, buf, NULL, screenWidth * 10 );

    /* Initialize the display driver */
    static lv_disp_drv_t disp_drv;
    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 );
}

Conclusion

Once initialized, you can use LVGL widgets such as buttons, charts, dials, and sliders to build modern dashboard interfaces. In the next part, we will explore touch calibration and setting up event handlers.