ESP32-S3 SPI Resistive Touch 2.4” LVGL

The 2.4-inch MaTouch display has just been released. It presents high-resolution and clear display effects with great visual performance. Furthermore, this screen has excellent compatibility with Squareline Studio and LVGL, and operates smoothly.

So we made this project. The article describes the usage of Squareline to design and program an interface through Arduino; the visual interface facilitates development and automatically exports the UI code. It then goes through Arduino for secondary development. The following sections describe how to use and design them.

1. MaTouch Lite ESP32-S3 SPI Resistive Touch 2.4" ST7789*1pcs
2. Mabee_TVOC and eCO2 SGP30 & Temperature and Humidity SHT31*1pcs(special design to reduce the heat affects with air, more details can be learnt in Blog)
3. USB cable*1pcs

1. Before you use it, you need to add the relevant simplified packages in Squareline Studio according to this wiki.
2. Click on "Create-->Arduino", select the “Arduino with TFT_eSPI”.
3. Add the image we need, click “ADD FILE INTO ASSETS,” and select the image you downloaded.
4. Set the background you like.
5. Add a Panel 1 and set its size and position. Set the background image to be semi-transparent so that the data can be clearly seen while blending in with the background of the screen, resulting in a more aesthetically pleasing display.
6. Add text and images to Panel 1 to enhance the display of the interface and make it more diverse.
7. Continue to add Panel 2, Panel 3, and Panel 4 in the same way, and add the corresponding text and images.
8. Add the corresponding images and text at the appropriate position on Screen 1.
9. Export the project and select the address where you want to save it.

1. Click on the code project document that you just exported.
2. Copy “lv_conf.h” into the “src” folder in the lvgl in libraries.
3. Modify the configuration in User_Setup.h
4. Copy these files into the Arduino library.
5. Download the corresponding library for NS2009 from GitHub and add it to the folder containing ui.ino.
6. Connect the Mabee module correctly to the ESP32-S3 module.
7. Open ui.ino.
8. Download the required libraries for the program from the Arduino IDE.
9. Add the Wi-Fi library and set you ssid and password to get network time. Add Wifi initialization and display time function.
10. After connecting to Wi-Fi, the device synchronizes Beijing Time via the Alibaba Cloud NTP network time server, then parses and formats the time before displaying it on the screen. Note: Users in different regions can set the parameters "ntpServer" and "gmtOffset_sec" to obtain the local time.
11. Add the NS2009 library and add the touch-to-wake function.
12. The equipment first collects temperature and humidity data using SHT31. Then, the absolute humidity is calculated through the getAbsoluteHumidity function and passed to SGP30 for environmental compensation. Finally, the eCO₂and TVOC detection values are output by SGP30.
13. Select and set the parameters in the Tools menu.
14. Verify it and upload.

Follow the steps above, and then you'll have a nice UI on your Matouch Lite 2.4". Try it yourself if you are interested.

Source code can be found on our GitHub page.

We've also put together a fantastic video to show you the project in more detail, so be sure to check it out if you're interested!