Get Started with ESP32: Lesson 05 - LVGL Demo Test

[Music] [Applause] [Music] hey everyone welcome to the fifth lesson in the crow panel esp32 HMI display series tutorials in this class I'll guide you through how to display an lvgl demo on the crow panel esp32 display before we get started I'm sure some of you are wondering what's the lvgl library all about great question lvgl is a graphics library that allows us to easily design beautiful interfaces using its provided functions but you might also be asking why do we need lvgl if we already have loveen gfx or TFT espi installed well the Lan gfx and TFT espi libraries primarily provide display and touch driver functions for our boards while they can be used to design interfaces it's quite challenging for beginners as it involves writing a lot of code with lvgl you can create buttons labels sliders graphs and more with just a few functions therefore more and more people are beginning to learn and use the lvgl library due to the different display driver libraries used by the screens this video will be divided into two parts in the first part I'll demonstrate using a 5in board but all the operations will also be applicable to 4.3 in and 7in Boards in the second part I'll demonstrate using a 2.4 in board and all the operations will work for 2.8 in and 3.5 in boards as well you can choose which part to watch based on the board you're using now I'll start with the demonstration using the 5-in board open the course files locate the code folder for the fifth lesson and open the corresponding code based on your board size after opening the code you'll see comments related to lvgl reminding you that when you want to use lvl's demos you need to include the LV demos and LV examples header files since the main focus of this lesson is to utilize lvl's demos you don't need to make any changes to this part moving on to the configuration of the display and touch related driver code based on the comments you'll need to open the gfx init header file there will also be comments guiding you on how to configure it depending on the size of your board select the appropriate macro to use the compiler will compile the display and touch driver code for the corresponding size based on on the macro you use assuming you're using a 4.3 in board you'll need to uncomment the macro for 4.3 in and comment out the others but for this lesson I'm using a 5-in board so I'll only keep the macro for 5 in uncommented all right we finished configuring the display and touch drivers now it's time to install and configure the lvgl library there are quite a few steps in this process so please don't miss any of them click on sketch then and find include Library open the library manager and search for lvgl here let's select version 8.3.1 to keep it consistent with mine why because later in the course we'll be using a software called squareline studio and the current latest version of this software only supports 8.3.1 where can you find this information you can go to the squareline studio website click here to go to the download page and locate the release note here it will tell you about each version's updates and the compatible lvgl versions okay now you know why we're selecting this version right go back to the Arduino IDE and click to install the lvgl library while it's installing I'll tell you about Square line studio and why we need it don't worry about the previous steps right now just ignore that part so squareline studio is a graphical UI design software in this program you can drag and drop controls from the widget panel in the lower left corner to the center of the screen which helps you quickly design interfaces plus it has a simulation feature which is pretty cool right no rush I'll teach you how to use it in the next class the lvgl library is already installed but we need to configure some important settings click on file open preferences and copy the path under Sketchbook location this path will take you directly to the library directory in the library directory find the lvgl library and locate the file named lvc template. copy this file into the library directory and rename it to lvon f.h this is the configuration file for the lvgl library which it uses to compile the necessary code during each compilation next open it with an editing tool and start configuring the settings first change this to one according to the comments to enable the content in this file once you've done that scroll down and find LV mem custom this is related to lvl's memory management settings which require you to estimate and set the size of the memory pool however it's quite cumbersome to use so you can change this to one to use the standard libraries memory management function it will automatically allocate space for you so you don't have to worry about errors caused by a too small memory pool continuing to scroll down find LV tick custom and change it to one to use the Arduino libraries tick function after making this modification you're only left with one more step open the search function and search for demo when you find demo usage you'll see a macro called lvus demo widgets this macro represents presents the lvgl demo named widgets which is used in the example code for this class therefore in the configuration file you need to set this macro to one absolutely in addition to widgets there are other lvgl demos like Benchmark stress and Music In general the way to use them is to set the macro for the desired demo to one and modify the example code to call the corresponding functions all right click save and then close this file the lvgl configuration file is now modified however there's a crucial step remaining to successfully compile this example code open the lvgl library folder and copy the demos and examples folders into the SRC folder otherwise the compiler won't be able to find these folders and their contents during compilation now I've completed all the installation and configuration and we're ready to compile the code but if you're curious about how lvgl and love yfx are connected pay attention to the next part of my explanation it might be helpful for you if not you can skip this section first these two middle lines represent variables used as data buffers lvgl recommends setting them to about 1/10th of the screen size as larger values won't have a significant impact next this is lvl's display driver which which actually utilizes the Lan gfx libraryies pixel drawing function this allows lvgl to leverage that pixel drawing function to render any widget at any location next we have the lvgl touch driver which leverages the touch driver function from the loveen gfx library it passes the captured touch information as parameters to the lvgl touch driver function at this point you should understand why you need to use another Graphics Library when working with the lvgl library and how the lvgl library interfaces with the display driver and touch driver let's examine what the setup function does first it initializes the serial Port followed by the initialization of the io ports next comes the display initialization and immediately after that the initialization of lvgl including the display driver and touch driver finally it loads the lvgl widgets demo lastly in the loop function there is a timer Handler function that runs continuously this function is responsible for periodically executing lvgl tasks with a current interval of 5 mm which is the recommended value if the timer Handler function is not executed for a prolonged period the program will crash and the screen will free all right the analysis of the example code is now complete next you'll need to configure the compilation settings and upload the code click on tool and select the corresponding board talk chip from the list if you're unsure how to configure the compilation settings based on your board please refer to the content from the first lesson as the compilation process can take quite a while incorrect configurations can waste a lot of your time so it's crucial to ensure that the settings are correct once you've configured everything click on up upload since the upload process can also be lengthy I'll speed up this part of the video Once the code upload is complete you'll see this interface on your screen this demo features various widgets that you can interact with all right that's it for the demonstration of the 4.3 in 5 in and 7in Boards next I'll demonstrate the steps for the 2.4 in 2.8 in and 3.5 in boards locate the example code for the fifth lesson and open the one that is compatible with 2.4 in 2.8 in and 3.5 in displays before compiling and uploading this example code there are three steps you need to take first configure the TFT espi Library second install and configure the lvgl library third modify the example code all right let's start with the first step since I already demonstrated in detail in the second lesson how to configure the TFT espi Library based on the board's Hardware I won't go into it again here in the course files find the preconfigured user setup file based on your board size and copy it into the TFT espi Library if you're not sure about the libraryies path you can click on file then open preferences the Sketchbook location path can help you locate the library directory next open the library directory locate the TF teesi library and replace the existing user setup file with the one you copied after replacing the first step is complete moving on to the second step installing and configuring the lvgl library in the example code you can see that it includes some lvgl header files along with some comments since the main focus of this lesson is to display the lvgl demo on the screen we don't need to make any changes to these header files however we need to install and configure the lvgl library first so that these header files can be found click on sketch then include library and open the library manager next search for lvgl here let's select version 8.3.1 to keep it consistent with mine why because later in the course we'll be using a software called squareline studio and the current latest version of this software only supports reports 8.3.1 where can you find this information you can go to the squareline studio website click here to go to the download page and locate the release note here it will tell you about each version's updates and the compatible lvgl versions you may be wondering what is square line studio and why should we learn to use it for now you can ignore the part about creating a project in square line Studio I'll explain that in detail in the next lesson however within this software you can drag and drop necessary components onto your interface and arrange them freely it's such a simple and quick UI design tool that I can't think of any reason not to use it all right let's head back to the Arduino IDE select version 8.3.1 and install it after installation you'll also need to configure the lvgl library to do that find the lvgl Library folder locate the LV confer template. file within it copy it to the library directory and rename it to lvon Doh this is the configuration file for the lvgl library and it's used by the library to compile the necessary code during each compilation next open it with an editing tool and start configuring the settings first change this to one according to the comments to enable the content in this file once you've done that scroll down and find LV mem custom this is related to lvl's memory management settings which require you to estimate and set the size of the memory pool however it's quite cumbersome to use so you can change this to one to use the standard libraries memory management functions it will automatically allocate space for you so you don't have to worry about errors caused by a too small memory pool continuing to scroll down find LV tick custom and change it to one to use the Arduino libraryies tick function after making this modification you're only left with one more step open the search function and search for demo when you find demo usage you'll see a macro called LV use demo widgets this macro represents the lvgl demo named widgets which is used in the example code for this class therefore in the configuration file you need to set this macro to one absolutely in addition to widgets there are other lvgl demos like Benchmark stress and Music In general the way to use them is to set the macro for the desired demo to one and modify the example code to call the corresponding functions all right click save and then close this file the lvgl configuration file is now modified however there's there's a crucial step remaining to successfully compile this example code open the lvgl library folder and copy the demos and examples folders into the SRC folder otherwise the compiler won't be able to find these folders and their contents during compilation the process of configuring lvgl might seem a bit lengthy but the good news is that the second step is now complete moving on to the third step modifying the example code based on the comments you'll need to determine which macro to use based on the board you're using using different macros will compile and utilize different initialization data for resolution and touch functionality assuming you're using a 3.5 in board you would need to comment out all the macros except for the one for the 3.5 in board when compiling the compiler will only compile the code specific to the 3.5 in display however for this lesson I'm using a 2.4in board so I'll only need to keep the macro for the 2.4in display uncommented all right the three steps are now complete but if you're curious about how the TFT espi library and the lvgl library are actually connected please don't skip this part this is the display driver for lvgl but if you pay close attention you'll notice that it essentially calls functions from the TF ft espi library to draw a pixel and here's the touch driver for lvgl similarly you'll see that it utilizes functions provided by the TFT espi library to detect touch events and retrieve their parameters next in the setup function we initialize various functionalities the serial Port IO ports display and touch drivers and then lvgl including its display and touch callback function finally we load the lvgl demo after the setup function has been executed the loop function begins to run inside this function you need to continuously execute the LV timer Handler function which handles lvl's tasks it's crucial to execute this function regularly and not for too long according to the lvgl documentation it's recommended to run it every 5 Ms if it's not executed for a long time the VG program will crash and the display will freeze all right after understanding the entire example code let's see if this lvgl demo runs properly on the board by uploading it click on tools and configure the compilation information if you're not sure how to configure the compilation based on your board's Hardware I recommend you go back and watch the first lesson as the compilation process can take quite a while and incorrect configuration will waste a lot of your time finally click upload since the uploading process takes a while I'll speed up this part of the video Once the upload is complete you'll see a screen like this it looks very smooth with no lags and you can see the effects of various components on the screen all right that's all for this lesson if you found this video helpful please don't forget to subscribe to my channel see you in the next lesson

Channel: Elecrow

Views: 3,437

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

Id: lkN_amp8X2Q

Length: 18min 31sec (1111 seconds)

Published: Mon May 13 2024