Tutorial Series Sponsor PCBWay Website. They have discount on 4&6 layers PCBs and you can get extra free coupons using the link below: https://www.pcbway.com/setinvite.aspx?inviteid=582640
In this tutorial I am sharing with you guys my experiment with ESP32S3 1.9 inch TFT T-Display development board from Lyligo, where I have managed to integrate LVGL display graphic library with ESP-IDF to build my own simple user interface and share my work on GitHub repository below.
I have also tested the board factory firmware to test the display capabilities.
The implemented code is explained in details. You can use lv_conf.h file as a reference for LVGL library configuration.
| Supported Targets | ESP32 | ESP32-S2 | ESP32-S3 |
|---|
LVGL is an open-source graphics library for creating modern GUIs. It has plenty of built-in graphical elements with low memory footprint, which is friendly for embedded GUI applications.
This example can be taken as a skeleton of porting the LVGL library onto the esp_lcd driver layer. Note that, this example only focuses on the display interface, regardless of the input device driver.
The whole porting code is located in this main file, and the UI demo code is located in another single file.
The UI will display two images (one Espressif logo and another Espressif text), which have been converted into C arrays by the online converting tool, and will be compiled directly into application binary.
This example is constructed by IDF component manager, all the external dependency will be handled by the CMake build system automatically. In this case, it will help download the lvgl from registry, with the version specified in the manifest file.
This example uses the esp_timer to generate the ticks needed by LVGL. For more porting guides, please refer to LVGL porting doc.
- An ESP development board
- An Intel 8080 interfaced (so called MCU interface or parallel interface) LCD
- An USB cable for power supply and programming
The connection between ESP Board and the LCD is as follows:
ESP Board LCD Screen
┌─────────────┐ ┌────────────────┐
│ │ │ │
│ 3V3 ├─────────────►│ VCC │
│ │ │ │
│ GND ├──────────────┤ GND │
│ │ │ │
│ DATA[0..7] │◄────────────►│ DATA[0..7] │
│ │ │ │
│ PCLK ├─────────────►│ PCLK │
│ │ │ │
│ CS ├─────────────►│ CS │
│ │ │ │
│ D/C ├─────────────►│ D/C │
│ │ │ │
│ RST ├─────────────►│ RST │
│ │ │ │
│ BK_LIGHT ├─────────────►│ BCKL │
│ │ │ │
└─────────────┘ └────────────────┘
The GPIO number used by this example can be changed in lvgl_example_main.c.
Especially, please pay attention to the level used to turn on the LCD backlight, some LCD module needs a low level to turn it on, while others take a high level. You can change the backlight level macro EXAMPLE_LCD_BK_LIGHT_ON_LEVEL in lvgl_example_main.c.
Run idf.py set-target esp32s3 which will set the target architecture to that of the T-Display-S3 and rebuild the sdkconfig file from sdkconfig.defaults.
Run idf.py -p PORT build flash monitor to build, flash and monitor the project. A fancy animation will show up on the LCD as expected.
The first time you run idf.py for the example will cost extra time as the build system needs to address the component dependencies and downloads the missing components from registry into managed_components folder.
(To exit the serial monitor, type Ctrl-].)
See the Getting Started Guide for full steps to configure and use ESP-IDF to build projects.
I (0) cpu_start: Starting scheduler on APP CPU.
I (418) example: Turn off LCD backlight
I (418) gpio: GPIO[2]| InputEn: 0| OutputEn: 1| OpenDrain: 0| Pullup: 0| Pulldown: 0| Intr:0
I (428) example: Initialize Intel 8080 bus
I (438) example: Install LCD driver of st7789
I (558) example: Turn on LCD backlight
I (558) example: Initialize LVGL library
I (558) example: Register display driver to LVGL
I (558) example: Install LVGL tick timer
I (558) example: Display LVGL animationFor any technical queries, please open an [issue] (https://github.com/espressif/esp-idf/issues) on GitHub. We will get back to you soon.
