Create and Export Stunning UI with SquareLine Studio for ESP32 Display | LVGL Tutorial

hey everyone how's it going in order to help you make the most of the esp32 display series development boards this video tutorial is going to show you how to use Square line Studio to export UI files and integrate them into your own projects for display this tutorial is applicable to the esp32 display 2.4 inch 2.8 inch and 3.5 inch boards throughout this explanation I'll be demonstrating with the esp32 display 3.5 inch board you can find the download links for the libraries and example codes used in this tutorial at the bottom of the product page so pay close attention and see how I go about it Step 1 designing UI first we open the square line Studio software click on create then Arduino choose Arduino with TFT underscore SPI now let's take a look here you can set the name and path for this UI project the important thing is that we need to set the resolution according to the board we're using since we're using a 3.5 inch board we need to fill in the resolution for a 3.5 inch board here if you're unsure about the resolution of your board you can find it on the product page of the elecro website from there we can see that the resolution for a 3.5 inch board is 480 times 320. next is the color depth we'll choose 16-bit lastly pay attention to the lvgl version you need to select the version number based on the lvgl library in your Arduino Library directory you can check it here first we open the Arduino software and click on sketch then we go to include library and find manager libraries from there we search for lvgl here we can see the version number of lvgl that I am using is 8.3.6 next we click on Create and then click on overwrite over here you can see this white space and this is how it will appear on our board down at the bottom left there's a bunch of widgets for us to play with you can add any widget you like even pictures so let's give it a shot and try adding a picture click on ADD image and then on the right you can pick the photo you want to display but oh look there's no images listed yet we gotta add some first click on ADD file into assets and pick the photo you want to add once you do you'll see a pop-up in the assets section then go back and select the image for the image widget and there you have it super easy right now let's add another button we can easily change the color and other settings of the button on the right sidebar and also freely adjust its size on the interface labels are also a commonly used widget we can easily modify the content of the label and make style adjustments in the same place lastly let's add some meaningful actions to the button first select the button then at the bottom of the right sidebar you'll find a button to add events click on it and now you can choose the trigger condition for the event based on your needs after that select the action you want to be triggered there are plenty of actions to choose from so pick the one that suits your needs once you're done click on ADD this will create an action under the event you just need to fill in the specific details of this action Additionally you can add more actions under this event if needed once the interface is designed we can click on this triangle and square line studio will simulate how this interface would look on the board we can click on the buttons to give it a try hmm it looks just like we imagined now we need to export the designed interface into a file that Arduino can use first click on file and open project settings look for file export choose the project export path and the interface export path finally enter lvgl and click on apply change to complete the setup click on export and then export UI file you'll get a prompt saying the export was successful step 2. add the UI to the project now we can find the exported UI files in the designated UI export path we need to copy all these UI files to the directory of the demo file foreign we also need to make a modification to two files that were copied from the screens and images folders change dot dot UI to UI and save the changes all right so far we've simply moved the UI files into the demo directory but we haven't actually added the UI interface to the demo program yet now let's open the demo program and see how we can add the UI into it first we can see in the code that there is a macro defined as use underscore UI based on the code it seems that whether this macro is defined or not will determine whether we use the lvgl library and the UI exported from Square line Studio the UI underscore init function is from the ui.c file in the exported UI if the use underscore UI macro is defined the program will execute it however if this macro is not defined the compiler will not compile the parts related to lvgl in that case the board will execute a different part of the program and display different colors on the board in the main loop at the bottom if the use underscore UI macro is defined lvgl clock will be triggered every five milliseconds this part is essential and cannot be omitted without it the lvgl interface May crash during run time in addition to the use underscore UI macro we also need to define a macro based on the board we are using this macro will automatically modify the resolution and touch calibration parameters for lvgl in this case I am using a 3.5 inch board and I have already declared the macro display underscore 35 in the code if you are using a 2.4 inch board please declare display underscore 2 4. step 3. configure the TFT espi library before flushing the program we also need to configure the TFT underscore SPI library to provide screen driver support for our program first locate the TFT underscore SPI library in the Arduino Library directory if you're unsure of the library directory's path you can open the Arduino software and click on file open preferences in the Sketchbook location field you can find the address of the Arduino Library directory after opening the TFT underscore SPI Library locate the user underscore setup.h file and open it here we need to select the screen driver based on the board we are using for the 3.5 inch board we will be using the ili 9488 screen driver so in this file we need to configure it to use the ili 9488 screen driver if you're unsure you can find this information on the elecro product page next we need to set the screen resolution which can also be found on the product page for the 3.5 inch Ford the resolution is 480 times 320. then we have the backlight pin you need to verify if it's correct based on the board circuit diagram this is the PIN used for the screen and should be confirmed from the circuit diagram but if you're using the configuration file provided by elecro you don't need to modify it and that's correct and with that the TFT underscore SPI library is now configured and ready to go step 4. configure the compilation environment click on tools under board find esp32 Arduino and select esp32 def module find flash mode and choose qio locate partition scheme and select huge app find psram and choose disable [Music] step 5. compiling and uploading the code before uploading the code we need to put the board into download mode [Music] first press and hold the boot Button then press the reset button and finally release the boot Button next we can proceed to upload the code [Music] alright after successfully uploading the program we can check the relevant information from the information bar at the bottom now let's restart the board and see the results well look who's back little kitty the results are impressive grab your board and give it a try thanks for watching [Music]

Channel: Elecrow

Views: 11,531

Keywords: lvgl, esp32, esp32 lvgl tutorial, esp32 lvgl, lvgl esp32, esp32 display, esp32 tutorial, lvgl example, esp32 iot, esp32 tft, esp32 project, esp32 s3, esp32 projects, esp32 programming, esp32 t display, esp32 arduino

Id: Ls0uLyeAgiw

Length: 9min 46sec (586 seconds)

Published: Wed Sep 27 2023