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.
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.
Category
🤖
TechTranscript
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.