In this tutorial, we’ll dive into the rapid development of graphical user interfaces (GUIs) for an ESP32-based display module using LVGL, EEZ Studio, and Visual Studio Code with PlatformIO.
We’ll be working with the 4.3-inch capacitive touch ESP32 display module from Sunton, an affordable option featuring an 800x480 pixel IPS RGB display and a USB Type-C programming interface. With minimal code adjustments, the demonstrations in this tutorial can also be adapted for use with other ESP32-based display modules, such as the CrowPanel displays from Elecrow and the gen4-ESP32 series from 4D Systems.
By the end of this tutorial, you’ll have built an application featuring multiple screens and a variety of interactive widgets, including buttons, bars, arcs, labels, a text area, and a keyboard. These widgets will interact with the serial port and control external components like LEDs, a buzzer, and a potentiometer.
To design and layout the screens and widgets quickly, we’ll use EEZ Studio, an open-source design tool that generates LVGL-compatible code. LVGL, coupled with the LovyanGFX library, will handle rendering of the GUI on the ESP32 display module. We’ll use Visual Studio Code with PlatformIO to develop the code that allows these widgets to interact with external components.
This tutorial also highlights a streamlined approach to GUI development by separating the UI design from the business logic. EEZ Studio manages the graphical interface, while Visual Studio Code handles the backend logic. We avoid manually modifying the LVGL code generated by EEZ Studio, as these changes would be overwritten with each update to the design. Additionally, the process is simplified by eliminating the need for tedious and error-prone manual copying and pasting of multiple files during UI development. Visual Studio Code’s auto-complete feature further enhances efficiency by automatically detecting and listing widget names from the generated UI.
Links
EEZ Studio
https://github.com/eez-open/studio/releases
Visual Studio
https://code.visualstudio.com/download
PlatformIO IDE
https://platformio.org
Getting Started with ESP32 - Step-By-Step Tutorial
https://www.youtube.com/watch?v=tc3Qnf79Ny8
4.3-inch Capacitive-touch ESP32 Sunton Display Product Page and Documentation
https://www.makerfabs.com/sunton-esp32-s3-4-3-inch-ips-with-touch.html
Elecrow CrowPanel Displays
https://www.elecrow.com/catalogsearch/result/?q=crowpanel
4D Systems gen4 ESP32 Series
https://4dsystems.com.au/products/gen4-esp32-series/
Repository for the code used in this tutorial
https://github.com/ffodGit/esp32-8048s043-getting-started-00
Chapters
00:00:00 Introduction
00:02:49 Requirements
00:04:22 VS Code Project Setup
00:07:12 Initialize a Git Repository
00:07:52 EEZ Studio Project Setup
00:11:13 Modifying LVGL Objects
00:13:38 Adding Buttons and Handling LVGL Events
00:18:01 Multiple-screen Navigation
00:21:51 External LED Control using an LVGL Button
00:26:09 Buzzer Control
00:28:08 PWM Control using an LVGL Arc
00:33:24 Updating Label Value during Runtime
00:35:21 Displaying ADC Input Values using LVGL Bar Objects
00:42:12 LVGL Alphanumeric Keyboard
00:47:04 Using the LVGL Keyboard as a Numeric Input
00:49:27 Disabling the LVGL System Monitor
00:50:24 Thank You!
@lvgl
@EEZOpen
@code
@EspressifSystems
@Elecrow
@4DSystems