Get Started with ESP32: Lesson 04 - Create a Drawing Board with LovyanGFX

[Music] [Applause] [Music] hi everyone welcome to the fourth lesson of the crow panel esp32 HMI Series in this lesson I will teach you how to create a small drawing board using the crow panel esp32 HMI board since the 2.4 in 2.8 in and 3.5 in boards use the TFT espi Library while the 4.3 in 5 in and 7in in boards utilize the Lan gfx Library this lesson will be divided into two parts the first half will demonstrate how to create a small drawing board using a 5-in board and the second half will use a 2.4in board for the demonstration you can choose which part to watch based on the board you are using first we'll demonstrate the use of the 5-in board and the same steps can be applied to the 4.3 in and 7in boards to create the small drawing board open the course file and find the code used in this lesson select the code that is compatible with the 4.3 in 5 in and 7 in boards if you're not sure where to download the course files please refer to the video description below which contains the download link you can also find the download link on the products wiki page the code for this lesson is very similar to that of the second lesson in the second lesson I demonstrated how to install and configure the the display and touch driver code for the screen once you have correctly configured the drivers and pins you can utilize the drawing and touch functions provided by the Lan gfx library in this lesson we will be using the get touch function which is quite simple to use just like the fill screen and fill Circle functions we demonstrated earlier first there will be a Boolean value used to store the result returned by the get touch function the get touch function is designed to detect whether a touch event has occurred when a touch is detected the X and Y coordinates of the touch are saved in the variables touch X and touch y respectively at the same time the function will return a True Value when the return value is true the draw Circle function below will be executed drawing a white dot with a diameter of five at the coordinates where the touch occurred additionally the coordinates of the touch will be printed in the serial Port of course you can replace the draw Circle function with any other drawing function you prefer to do this click sketch open the library manager search for love Yan gfx and click more info to navigate to The Love Yan gfx GitHub page here you can find a wide range of drawing functions and swap out the draw Circle function with any of them based on your personal taste all right after understanding the touch function you'll realize how simple it is to create a small drawing board all you need to do is draw a circle at the coordinates where the touch occurs now let's upload the code to the board to see the effect Click On Tools select the corresponding chip in board oh suddenly I remembered that I haven't checked if the settings in the gfx con for H file have been configured for a 5 in board yes indeed I forgot to make the necessary modifications let's change it to the macro that corresponds to the 5in board now let me recheck the compilation settings the chip should be set to esp32 S3 Dev module since I'm not utilizing lvgl I'll just leave it at the default setting next for psram it should be set to Opi psram lastly connect the board to the computer select the corresponding serial port and click compile the compilation process is rather slow so I have accelerated the footage for this part once the compilation is complete you will observe the screen undergoing a full screen color trans position ending in a black screen at this point you can begin drawing on the screen all right that's the end of the demonstration for creating a drawing board using 4.3 in 5 in or 7in boards next we will proceed to demonstrate the process of creating a drawing board using 2.4 in 2.8 in or 3.5 in boards open the course file and find the code for this lesson note that the code is universal for 2.4 in 2.8 in and 3.5 in displays if you are not sure where to download the course file you can find the download link in the introduction of this video or on the products wiki page after opening the code you'll notice a prominent comment reminding you to configure the TFT espi library before using this code however since I've already demonstrated the steps for installing configuring and using this library in detail in the second lesson this class will focus on how to use this library to create a drawing board however if you have already installed this library and are comfortable with its usage you can simply use the preconfigured setup file I have provided locate the user setup. file for the corresponding screen size in the course files and copy it into the TFI Library folder to complete the configuration then back to the Arduino IDE in the second lesson I have demonstrated the effect of drawing pictures with the TFT SPI Library but did not mention the touch related functions the drawing board in this lesson will use the touch function get touch because in the user setup do file the display and touch drivers and pins have already been set up so there is no need for additional configuration when using this function next let's take a look at how to use the get touch function when you call this function it will detect whether a touch event has occurred if a touch is detected the function will save the coordinates of the touch point in the first and second parameters which are the variables touch X and touch y respectively Additionally the function will return a True Value this return value can be used as a flag for touch events allowing you to execute the appropriate code when a touch occurs for example you can fill a white circle at the touch coordinates and print the coordinates to the serial Port so if I touch these specific points it will fill a c ccle at each of those coordinates and if the points I touch are connected it will form a line which is the effect of the drawing board I am trying to create let me upload this code to the board and see how it works before uploading the code it's important to review the compilation settings make sure that the chip is set to esp32 room da module after that connect the board to your computer and select the appropriate serial port once everything is set click on compile since the compilation process takes a while I'll speed up this part of the video Once the upload is complete you'll see the screen first undergo a full screen color change and then it will turn black at this point you can start drawing on the screen yes this is exactly the drawing board effect I wanted however I'm quite curious to see what the effect would be if we replace the fill Circle function with drawing a triangle or a rectangle why don't you give it a try and let me know all right that's the end of this lesson if you find this video helpful please don't forget to subscribe to my channel see you next time [Music]

Channel: Elecrow

Views: 1,176

Keywords: esp32 project, arduino, esp32, elecrow, esp32 screen, crowpanel

Id: BYEHY7w0MEg

Length: 7min 47sec (467 seconds)

Published: Mon May 13 2024