ESP Terminal with 3.5_ SPI Capacitive Touch Display

JustForFun

Order Here: https://www.elecrow.com/esp-terminal-3-5-inch-320-480-spi-tft-capacitive-touch-display-with-ov2640-camera.html?idd=6  Elecrow sent me this cute little 320x480 ESP32-S3 based SPI capacitive 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 am going to unbox and show you guys how to program and use this cute little touchscreen from Elecrow using SqareLine Studio. You can order this touch screen display from www.elecrow.com. ------------------------------------------------------------------------------------  Thanks again for checking my post. I hope it helps you. If you want to support me subscribe to my YouTube Channel: https://www.youtube.com/user/tarantula3  Video: https://youtu.be/7ZQPPWMv1uQ Full Blog Post:  Links --------- Product Info: https://www.elecrow.com/wiki/esp-terminal-with-35inch-spi-capacitive-touch-display.html GitHub: https://github.com/tarantula3/CrowPanel-ESP32-Terminal-3.5-SPI Squareline Studio: https://squareline.io/pricing LVGL WiKi: https://docs.lvgl.io/master/intro/index.html SquareLine Studio Wiki: https://docs.squareline.io/docs/widgets/ Elecrow How To: https://www.youtube.com/watch?v=ugoiicPM6U0 Where To Byy: https://www.elecrow.com/esp-terminal-3-5-inch-320-480-spi-tft-capacitive-touch-display-with-ov2640-camera.html?idd=6 Tech Support Email: techsupport@elecrow.com  Support My Work ----------------------------- BTC: 1Hrr83W2zu2hmDcmYqZMhgPQ71oLj5b7v5 LTC: LPh69qxUqaHKYuFPJVJsNQjpBHWK7hZ9TZ DOGE: DEU2Wz3TK95119HMNZv2kpU7PkWbGNs9K3 ETH: 0xD64fb51C74E0206cB6702aB922C765c68B97dCD4 BAT: 0x9D9E77cA360b53cD89cc01dC37A5314C0113FFc3 LBC: bZ8ANEJFsd2MNFfpoxBhtFNPboh7PmD7M2 COS: bnb136ns6lfw4zs5hg4n85vdthaad7hq5m4gtkgf23 Memo: 572187879 BNB: 0xD64fb51C74E0206cB6702aB922C765c68B97dCD4 MATIC: 0xD64fb51C74E0206cB6702aB922C765c68B97dCD4  Thanks, ca again in my next tutorial.

Transcript

00:00Elekrao sent me this cute little 320 x 480, ESP32 S3 based, SPI captive touch display

00:08with OV2640 camera.

00:10I am going to use this screen to create a touch panel for my home automation system.

00:15In this video, I am going to unbox and show you guys how to program and use this cute

00:20little touch screen from Elekrao using SquareLine Studio.

00:24You can order this touch screen display from elekrao.com.

00:28The product link is in the description below.

00:38I will start the video by unboxing the screen, followed by explaining its features and specifications.

00:44Then we will have a look at all the supported programming platforms.

00:47Then I will show you guys the step-by-step instructions for setting up an Arduino IDE

00:52for programming this screen, followed by creating a simple user interface using the SquareLine

00:57Studio.

00:58Next, I will show you guys my PHP MySQL based smart home web app.

01:02My aim is to create a user interface similar to my smart home web app for the screen.

01:07Finally, I will show you guys how I created the Arduino based smart home web app for the

01:12touch screen.

01:14So, this is what arrived in the mail.

01:17Inside the box is a USB-A to USB-C data cable and the main touch screen display.

01:23The screen is equipped with a powerful ESP32-S3 chip and supports 2.4GHz Wi-Fi and Bluetooth

01:305, providing powerful computing and processing capabilities to your IoT applications.

01:35Combined with a microphone, 2MP camera interface, and a buzzer, this screen is very user-friendly

01:41and can be used in various DIY projects, smart agricultural projects, smart home, and monitoring

01:48applications.

01:49The PCB sits inside a cute-looking black acrylic case.

01:52There are two M3 screw holes for mounting the unit on a RAM mount.

01:56There are four Crotel plug-and-play interfaces for interfacing the screen with various Crotel

02:01sensors.

02:02There is a LiPo battery socket for standalone battery-operated applications, a reset and

02:07a boot button, an USB Type-C port for powering on and uploading sketches, an I2C port, an

02:13UART for sending clockless serial data, and a microSD card slot.

02:18All right, let's plug in the USB cable and let's see if the screen comes pre-loaded with

02:22any applications.

02:24As you can see, the screen comes pre-loaded with the LVGL graphics demo.

02:28The screen is very responsive and can display crystal-clear images, text, graphics, menu

02:34items, and lots of other graphical objects.

02:37The rest of the screen specifications are all listed on the screen.

02:43You can program the screen using VS Code, Arduino IDE, Espressif, IDF, ESPHome, LVGL,

02:51MicroPython, and PlatformIO.

02:53In this tutorial, I'm going to use the SquareLine Studio to generate the user interface and

02:58Arduino IDE to program the ESP microcontroller.

03:02SquareLine Studio is a next-generation drag-and-drop UI editor for developing beautiful UIs for

03:07your embedded devices.

03:09You can create custom components using the built-in widgets, adding style, animation,

03:14and events for the screen.

03:16Starting from images, bar graphs, line graphs, pie charts, menu items, checkboxes, the screen

03:21can handle a rich source of widgets.

03:24SquareLine Studio is free for personal use.

03:26The latest version is 1.4.2 and is available for Windows, Linux, and macOS.

03:32You can download it from squareline.io.

03:37To get the screen to work with Arduino IDE and LVGL library, we need to make some config

03:42changes to the Arduino IDE.

03:45Let's first install the ESP32 board package.

03:47Please install version 2.0.8 before installing the latest one.

03:52If you first install the latest one, you will get a missing library error when you compile

03:56your code.

03:57Once installed, let's configure the ESP32 board.

04:01Go to Board, ESP32, and then select ESP32 S3 Dev Module.

04:06And select the correct COM port under the Ports section.

04:09In my case, it is COM9.

04:11Scroll down and select the flash mode as QIO 80MHz and PSRAM as OPI PSRAM.

04:18Now let's install the LVGL library.

04:21For this demo, I'm installing LVGL library version 8.3.6.

04:26We also need to install the Lovyan GFX Graphics library.

04:30After installing the LVGL library, we need to configure few of its parameters.

04:34Go to the Arduino Libraries folder and open the LVGL folder.

04:37Copy the Demos and Examples folder into the SRC folder.

04:41If you don't do this, you will get an error about missing demo and example codes during

04:46your compilation.

04:47Now, copy the lvgl-conf-template.h and paste it in the Arduino Libraries folder.

04:54Rename the file to lv-conf.h and open it for editing.

04:58Go to line number 15 and change the value from 0 to 1.

05:02Then go to line number 88 and change the value from 0 to 1.

05:06Next, scroll down to line number 730 and change the value of the line number 730 and 732 and

05:12change the value from 0 to 1.

05:14If you are using any custom font, then enable the fonts that you are using in this section.

05:19Now you need to download the demo code from my GitHub repository.

05:23This is the framework that you can use to write your own code.

05:26Please make sure you download the SPI version of the code.

05:30Once downloaded, unpack the code at any location of your choice and then go to the lvgl-spi-folder.

05:37Open the INO file and make sure you have ui.h file included in the header section.

05:42Double check line number 33 and make sure you see SPI in there.

05:47Then scroll down and verify that a function called to ui-init is present on line number

05:53177.

05:54Now, change the baud rate to 115200 baud.

05:57That's it.

05:58Your Arduino IDE is now all set to program the screen.

06:01Alright, let's create a simple user interface using the SquareLine Studio.

06:06Fire up the app and click on the create icon.

06:10Then select Electro option and scroll down and click on the ESP32 terminal with Arduino

06:15IDE option.

06:17Give your project a name and hit the create button.

06:19By default, you'll see a 320x480 blank white screen in the editor.

06:24Let's first change the background color of the screen to black.

06:27Click the style main option from the right panel and enable the bg color under background.

06:32Then you can either pick a color from the color palette or you can manually enter the

06:36hex code in the text box.

06:37To add a button, click on the button icon on the left panel.

06:41This will add a blue color button at the center of the screen.

06:44Then click on the label icon to add a label to the button.

06:47Change the text of the label from the right panel by modifying the text under the text

06:51option.

06:52Drag the sides of the button to change its size.

06:55Now click on the screen icon from the left panel to add a second screen to the stage.

07:00Change the background color to purple and add a button to the screen.

07:04To add a png image to the screen, click on the add files into assets button and then

07:08browse for the file.

07:10Try to add tiny files to your project to avoid out of memory errors during compilation.

07:15Insert the image and then drag and drop it to wherever you want on the screen.

07:19You can also add some text to the image by adding a new label to it.

07:23Now let's add some actions to the buttons.

07:26Select one of the button and then click on add event button from the right panel.

07:30In my case, I want the screen to change from screen 1 to screen 2 and vice versa.

07:35So my trigger will be click and action will be change screen to screen 1 or screen 2 respectively.

07:41I am also adding a transition of move right or move left when the buttons are clicked.

07:46Then repeat the same steps for the second button.

07:49Once done, hit the play button on the top and then test the UI components by clicking

07:53the buttons.

07:54Yay!

07:55That works.

07:56Now, let's create the UI package and load it to the screen.

07:58To do so, we need to go to the folder where we saved our lvgl underscore spi underscore

08:03ino file.

08:04Grab the location of the folder and paste it to the file export locations under the

08:09project settings.

08:10Next, click the export menu and select the export UI files from the list.

08:15Once exported, you will see a massive list of .c and .h files in the selected location.

08:21Now, double click and open the lvgl underscore spi underscore folder and launch the lvgl

08:26underscore spi underscore ino file using Arduino IDE.

08:31Connect the USB cable to the screen, then press and hold the boot button and briefly

08:35press the reset button and finally release the boot button.

08:38You will see on the serial monitor that the ESP32 terminal has entered download mode.

08:44Then go ahead and compile and upload the code.

08:46Please keep in mind that the program includes the memory intensive lvgl library, so the

08:51upload process will take way longer than any other code.

08:54Just be patient and wait for it to complete.

08:57Once the upload is done, you need to restart the board either by pressing the reset button

09:01or by unplugging and replugging the USB cable.

09:04Boom!

09:05Everything works as expected.

09:07So here is a glimpse of my smart home web application.

09:10The application is hosted on a Raspberry Pi home server.

09:14The front end of the app is created using PHP and the data is stored in a MySQL database.

09:19Various sensors installed in my house send their data to the Raspberry Pi server.

09:24The data is then saved in the MySQL database and is presented to the user using Google

09:29Charts.

09:30Using a PC or mobile, I can access this app from anywhere inside the house.

09:35I have also set up port forwarding on my router which allows me to access this app from anywhere

09:40in the world.

09:41Now, I am going to use this screen to create a touch panel for my home automation system.

09:47Using the SquareLine Studio, I am creating the front end for the touch screen.

09:50The work is still under progress, however, I have migrated fair bit of the web application

09:56to the touch screen.

09:57Let's do a quick test using the built-in simulator to make sure everything works as

10:01expected.

10:02Bingo!

10:03That looks pretty decent, isn't it?

10:12So, let's go ahead and load the screens to the touch screen.

10:18Same as before, press and hold the boot button and briefly press the reset button and finally

10:23release the boot button.

10:25You will see on the serial monitor that the ESP32 terminal has entered download mode.

10:30Then go ahead and compile and upload the code.

10:34So, this is how my final setup looks like.

10:36With 2x power supply modes to choose from, this screen can be used either by hooking

10:41it up to a USB port or can be used as a standalone screen with a rechargeable battery pack.

10:47The best thing is, if you have any issues with the screen, there is a tech team to provide

10:51you with their valuable technical support.

Category

Transcript

Recommended