Design Like a Pro: Create and Export Stunning UI with SquareLine Studio for ESP32 Display

hey everyone how's it going today's video is all about helping you make the most out of the esp32 display series development boards I'll show you step by step how to use Square line Studio to export UI files and incorporate them into your own projects for display this video will cover eloquro esp32 display 4.3 inch 5.0 inch and 7.0 inch boards in addition courses for the 2.4 inch 2.8 inch and 3.5 inch boards are also currently being recorded eloquai not only provides product information but also offers a wide range of courses for users to learn if you are looking to learn programming in electronic fabrication eloquro will be your best choice so sit tight and pay close attention to see exactly how I work my magic step 1 designing UI first let's open up the square line Studio software click on create Arduino and select Arduino with TFT underscore espi now take a look here you can set the name and location for this UI project the important thing is to configure the resolution based on the board you're using since we're using a 5.0 inch board we need to enter the resolution for the 5.0 inch board right here if you're unsure about the resolution of your specific board you can find it on the product page of the electro website from there we can see that the resolution for the 5.0 inch board is 800 times 480. next let's consider the color depth the 5.0 inch board has a color depth of 16 bits lastly pay attention to the lvgl version this selection depends on the version number of the lvgl library in your Arduino Library directory you can check that right here open up the Arduino software click on sketch then go to include library and find manage libraries search for lvgl from here we can see that the version number of lvgl I'm using is 8.3.6 next click on Create and then click on overwrite here in this white area we can see how it will appear on our board in the bottom left corner we have a variety of widgets to choose from let's give it a try and start by adding a button up here we can freely adjust the size of the button next let's add a label we can modify the content displayed on the label right here we can also change the font color here and adjust the font size here if you want to change the background color of the entire screen you can modify it right here next let's add another screen and perform the same operations within this screen as well alright we've added two buttons within the screen however if these buttons don't trigger any action when pressed they will be meaningless so let's add events to these buttons we can select the condition for the button to trigger an event from here let's choose release below we can choose what action to trigger let's select change screen once selected click on ADD change to screen 2. when using lvgl it's important to note that when switching screens we shouldn't just switch screens but also delete the previous screen otherwise after some time it may lead to memory leaks so we also need to add an event to delete the previous screen for this button let's go back to screen 2 and perform the same operation on button 2. once we've finished all the design we can simulate it within the software click on this triangular button and we can preview the uice effect on the board right here once we have completed the UI design we need to export it as a file that can be used on the development board click on file and find Project setting here we need to select the export directory for this UI project [Music] it's organized I recommend creating a new folder for each project in this line fill in lvgl.h now everything is set up click on apply change once the export path is set we can proceed to export the designed UI file click on export and then click on export UI file alright following the prompts our designed UI has been successfully exported Step 2 adding UI to the project in the previous step we have exported the designed UI files in this step we need to add these files to our project lastly we need to locate the exported UI files these are the UI files exported by squareline Studio we need to copy all these exported files to the demo directory among these these five files must be copied to the project directory during the UI design process we didn't use any additional components fonts or images so these folders are empty and no files were generated however since we designed two screens we still need to copy the contents of the screens folder to the demo directory additionally we need to make some modifications to the exported files open UI underscore screen 1.c and UI underscore screen 2.c change include.ui.h to include ui.h the changes up until this step we have only moved the UI files to the demo directory without actually importing the UI into the demo therefore we still need to open the demo program and make some modifications first and foremost the most important step is to define the use UI flag in the demo program we use this flag to determine whether to use the lvgl UI interface if you don't want to use it you can comment it out from here you can see that when it is commented out the demo program will display color switching between red blue yellow and green on the board however if you define USC underscore UI the demo program will run the UI underscore init function which is from the ui.c file generated by square line Studio Additionally the demo program needs to include the header file for the UI otherwise you will encounter error prompts during compilation this header file is from the Arduino gfx Library which provides the screen driver code for the board here the demo program provides a hint and we need to decide which line to Define based on the board we are using currently I am using a 5.0 inch board so I need to uncomment the line display underscore 50. below is the screen driver configuration code the compiler will selectively compile this code based on the content we defined above since I defined display underscore 50 the compiler will compile the screen driver configuration code related to the 5.0 inch board for me below is the driver interface code related to the lvgl library this part specifically deals with the display driver interface code we only need to interface the function that draws a single Pixel with the corresponding function in the lvgl library the following section is the touchdriver interface code here we simply need to pass the coordinate information obtained from the touch driver to the touch function in the lvgl library lastly these last two lines of code provide the clock for lvgl it triggers every 5 milliseconds if we don't provide a clock for lvgl it will crash during one time after demonstrating how to configure the display part of the demo program we also need to understand the touch part open the touch.h file which contains the code related to the touch driver based on the previous text points we can determine that if we are using a 5.0 inch or 7.0 inch board we need to uncomment the code related to gt911 however if we are using a 4.3 inch board we need to uncomment the code related to xpt2046 currently we are using a 5.0 inch board so we just need to uncomment the code related to gt911 step 3. configure the compilation environment all right after completing all the previous steps we can now upload the program to the board and see the results but before that we need to ensure that the compilation environment is set correctly firstly click on tools and select esp32 Dev module in the board option under flash mode select qio80 megahertz in the partition scheme choose huge app for psim select OPI swam 4. compiling and uploading the code alright everything is set up and ready let's put the board into download mode and click on upload [Music] first the reset button wants and release it finally release the boot Button now the board has successfully entered download mode upload the code great after the successful upload of the program we can check the relevant information from the information bar at the bottom now let's restart the board to see the effects looks amazing doesn't it why don't you grab your board and give it a try yourself thanks for watching [Music]

Channel: Elecrow

Views: 14,997

Keywords: esp32 tutorial, esp32 arduino, esp32, SquareLine Studio, ESP32 Display, SquareLine, create ui, esp32 lvgl

Id: TcWvxw61U_w

Length: 9min 39sec (579 seconds)

Published: Fri Sep 08 2023