ESP Terminal with 3.5" SPI Capacitive Touch Display

Elekrao sent me this cute little 320 by 480 ESP32 S3 based SPI captive touch display with OV2640 camera. I am going to use this screen to create a touch panel for my home automation system. In this video, I'm going to unbox and show you guys how to program and use this cute little touchscreen from Elekrao using SquareLine Studio. You can order this touchscreen display from elekrao.com. The product link is in the description below. I will start the video by unboxing the screen followed by explaining its features and specifications. Then we will have a look at all the supported programming platforms. Then I will show you guys the step-by-step instructions for setting up an Arduino IDE for programming this screen, followed by creating a simple user interface using the SquareLine Studio. Next, I'll show you guys my PHP MySQL based smart home web app. My aim is to create a user interface similar to my smart home web app for the screen. Finally, I'll show you guys how I created the Arduino based smart home web app for the touchscreen. So, this is what arrived in the mail. Inside the box is a USB-A to USB-C data cable and the main touchscreen display. The screen is equipped with a powerful and supports 2.4 GHz Wi-Fi and Bluetooth 5, providing powerful computing and processing capabilities to your IoT applications. Combined with a microphone, 2-megapixel camera interface and a buzzer, this screen is very user-friendly and can be used in various DIY projects, smart agricultural projects, smart home and monitoring applications. The PCB sits inside a black acrylic case. There are two M3 screw holes for mounting the unit on a RAM mount. There are four Crotel plug-and-play interfaces for interfacing the screen with various Crotel sensors. There is a LiPo battery socket for standalone battery-operated applications, a reset and a boot button, an USB Type-C port for powering on and uploading sketches, an I2C port and UART for sending clockless serial data and a microSD card slot. Alright, let's plug in the USB cable and let's see if the screen comes pre-loaded with any applications. As you can see, the screen comes pre-loaded with the LVGL graphics demo. The screen is very responsive and can display crystal clear images, text, graphics, menu items and lots of other graphical objects. The rest of the screen specifications are all listed on the screen. You can program the screen using VS Code, Arduino IDE, Espressif, IDF, ESPHome, LVGL, MicroPython and PlatformIO. In this tutorial, I'm going to use the SquareLine Studio to generate the user interface and Arduino IDE to program the ESP microcontroller. SquareLine Studio is a next-generation drag-and-drop UI editor for developing beautiful UIs for your embedded devices. You can create custom components using the built-in widgets, adding style, animation and events for the screen. Starting from images, bar graphs, line graphs, pie charts, menu items, checkboxes, the screen can handle a rich source of widgets. SquareLine Studio is free for personal use. The latest version is 1.4.2 and is available for Windows, Linux and macOS. You can download it from squareline.io. To get the screen to work with Arduino IDE and LVGL library, we need to make some config changes to the Arduino IDE. Let's first install the ESP32 board package. Please install version 2.0.8 before installing the latest one. If you first install the latest one, you will get a missing library error when you compile your code. Once installed, let's configure the ESP32 board. Go to Board, ESP32 and then select ESP32-S3 Dev Module. Then select the correct COM port under the Ports section. In my case, it is COM9. Scroll down and select the flash mode as QIO 80MHz and PSRAM as OPI-PSRAM. Now, let's install the LVGL library. For this demo, I'm installing LVGL library version 8.3.6. We also need to install the Lovyan GFX graphics library. After installing the LVGL library, we need to configure few of its parameters. Go to the Arduino Libraries folder and open the LVGL folder. Copy the Demos and Examples folder into the SRC folder. If you don't do this, you will get an error about missing demo and example codes during your compilation. Now, copy the LVGL underscore conf underscore template dot h and paste it in the Arduino Libraries folder. Rename the file to LV underscore conf dot h and open it for editing. Go to line number 15 and change the value from 0 to 1. Then go to line number 88 and change the value from 0 to 1. Next, scroll down to line number 730 and change the value of the line number 730 and 732 and change the value from 0 to 1. If you are using any custom font, then enable the fonts that you are using in this section. Now, you need to download the demo code from my GitHub repository. This is the framework that you can use to write your own code. Please make sure you download the SPI version of the code. Once downloaded, unpack the code at any location of your choice and then go to the LVGL underscore SPI underscore folder. Open the INO file and make sure you have UI dot h file included in the header section. Double check line number 33 and make sure you see SPI in there. Then scroll down and verify that a function called to UI underscore init is present on line number 177. Now, change the baud rate to 115200 baud. That's it. Our Arduino IDE is now all set to program the screen. All right, let's create a simple user interface using the SquareLine Studio. Fire up the app and click on the create icon. Then select electro option and scroll down and click on the ESP32 terminal with Arduino IDE option. Give your project a name and hit the create button. By default, you'll see a 320 by 480 blank white screen in the editor. Let's first change the background color of the screen to black. Click the style main option from the right panel and enable the BG color under background. Then you can either pick a color from the color palette or you can manually enter the hex code in the text box to add a button. Click on the button icon on the left panel. This will add a blue color button at the center of the screen. Then click on the label icon to add a label to the button. Change the text of the label from the right panel by modifying the text under the text option. Drag the sides of the button to change its size. Now click on the screen icon from the left panel to add a second screen to the stage. Change the background color to purple and add a button to the screen. To add a PNG image to the screen, click on the add files into assets button and then browse for the file. Try to add tiny files to your project to avoid out of memory errors during compilation. Insert the image and then drag and drop it to wherever you want on the screen. You can also add some text to the image by adding a new label to it. Now let's add some actions to the buttons. Select one of the button and then click on add event button from the right panel. In my case, I want the screen to change from screen one to screen two and vice versa. So my trigger will be clicked and action will be change screen to screen one or screen two respectively. I am also adding a transition of move right or move left when the buttons are clicked. Then repeat the same steps for the second button. Once done, hit the play button on the top and then test the UI components by clicking the buttons. Yay! That works. Now let's create the UI package and load it to the screen. To do so, we need to go to the folder where we saved our lvgl underscore SPI underscore INO file. Grab the location of the folder and paste it to the file export locations under the project settings. Next, click the export menu and select the export UI files from the list. Once exported, you will see a massive list of .c and .h files in the selected location. Now double click and open the lvgl underscore SPI underscore folder and launch the lvgl underscore SPI underscore INO file using Arduino IDE. Connect the USB cable to the screen then press and hold the boot button and briefly press the reset button and finally release the boot button. You will see on the serial monitor that the ESP32 terminal has entered download mode. Then go ahead and compile and upload the code. Please keep in mind that the program includes the memory intensive lvgl library so the upload process will take way longer than any other code. Just be patient and wait for it to complete. Once the upload is done, you need to restart the board either by pressing the reset button or by unplugging and replugging the USB cable. Boom! Everything works as expected. So here is a glimpse of my smart home web application. The application is hosted on a Raspberry Pi home server. The front end of the app is created using PHP and the data is stored in a MySQL database. Various sensors installed in my house send their data to the Raspberry Pi server. The data is then saved in the MySQL database and is presented to the user using Google Charts. Using a PC or mobile, I can access this app from anywhere inside the house. I have also set up port forwarding on my router which allows me to access this app from anywhere in the world. Now I'm going to use this screen to create a touch panel for my home automation system. Using the square line studio, I am creating the front end for the touch screen. The work is still under progress, however, I have migrated fair bit of the web application to the touch screen. Let's do a quick test using the built-in simulator to make sure everything works as expected. Bingo! That looks pretty decent, isn't it? So let's go ahead and load the screens to the touch screen. Same as before, press and hold the boot button and briefly press the reset button and finally release the boot button. You will see on the serial monitor that the ESP32 terminal has entered download mode. Then go ahead and compile and upload the code. So this is how my final setup looks like. With 2x power supply modes to choose from, this screen can be used either by hooking it up to a USB port or can be used as a standalone screen with a rechargeable battery pack. The best thing is, if you have any issues with the screen, there's a tech team to provide you with their valuable technical support. Thanks again for watching this video. I hope it helps you. If you want to support me, you can subscribe to my channel and watch my other videos. Thanks. See you again in my next video. Bye now.