Up next in 10
ESP32#11 ESP SPI LCD || PART 2 || Implement LVGL || Create UI using Squareline Studio
Mar 29, 2025
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ Watch SPI LCD PART1 :::: https://youtu.be/KSbHMMgzI00 Watch SPI LCD PART3 :::: https://youtu.be/oFR_8NNiIlE Component registry page :::: https://components.espressif.com/ ESP32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8ghS_i2Yky2actXWbQoqrscN DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/esp32-11-esp-spi-lcd-part2/ ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech *******Join the Membership******* https://www.youtube.com/channel/UCkdqtSMnhYuMsJkyHOxiPZQ/join
View Video Transcript
0:09
hello and welcome to controllers tech
0:12
this is the 11th video in the ESP32
0:15
series using the expressive IDE and
0:18
today we will continue with the small
0:20
series covering the SPI displays in
0:23
ESP32 in the previous video we saw how
0:26
to connect the display how to configure
0:28
it and how to draw a bit map on it today
0:32
we will see how to implement the LVGL
0:35
graphic library to our
0:37
project i am going to continue with the
0:40
project I created in the previous video
0:42
so please watch that video if you
0:44
haven't i am not going to discuss the
0:47
basic interfacing part rather we will
0:50
focus on implementing the LVGL
0:53
we will also see how to load the UI
0:55
created using the Square Line Studio
0:58
into our
0:59
project let's open the LVGL
1:02
documentation to see if there is any
1:04
porting guide for
1:06
ESP32 here under the chip vendors we
1:09
have
1:09
ESP32 NXP SD32
1:13
etc let's open the guide for ESP32
1:18
as you can see here there is not enough
1:20
information on porting this
1:22
library although if you check the SDM32
1:26
guide there are steps mentioned in
1:29
details for ESP32 they have mentioned
1:32
that the simplest way to integrate it is
1:34
by using the ESBLVGL port i tried using
1:39
this port but it is complicated compared
1:42
to the one which we will use in this
1:44
tutorial
1:45
as I mentioned I am going to continue
1:48
with the project created in the previous
1:51
video here is the project i have named
1:54
it part two but it is the same we will
1:58
use the same component method which we
2:01
used in the previous video to include
2:03
the LCD
2:04
library so open the component registry
2:07
page again here you can see the LVGL
2:11
component let's open it here you can
2:15
select the library version you want to
2:17
use i will go with the latest
2:21
9.2.2 let's download this archive and
2:24
unzip it now copy this LVGL folder
2:28
inside our component folder which we
2:31
created in the previous video this
2:34
folder is used to store the components
2:36
we will use in this project and LVGL is
2:39
one of them
2:41
now open the IDF component.yiml file and
2:45
add the LVGL dependency to this file you
2:49
can copy the dependency from the LVGL
2:51
page
2:52
itself here we are using the version
2:57
9.2.2 all right let's build the project
3:00
once to check for
3:01
errors there are no errors so let's
3:05
proceed ahead
3:07
let's delete this hello file as we do
3:09
not need it
3:10
anymore instead include the LVGL header
3:14
file inside the main function delete
3:17
these functions and leave only the
3:19
display
3:20
initialization i have prepared one
3:23
template file which includes all the
3:25
functions we need to port
3:27
LVGL i will leave the link to this
3:30
template file in the description of this
3:32
video this file has two sections
3:36
let's copy the upper section and paste
3:39
it outside the main
3:42
function let me put an indication here
3:45
which says the LVGL starts from here
3:49
let's go back to the template file now
3:52
copy the second half of this file and
3:54
paste it inside the main function but
3:57
leave the display initialization at the
4:03
beginning we need to do some inclusion
4:07
now let's include syslock header file
4:11
parameter header file and ESB timer
4:13
header file the timer file is for the
4:16
ESB timer we are creating
4:20
here let's build the project once all
4:24
right all the errors are gone now let's
4:26
understand the LVGL implementation
4:30
after initializing the display in the
4:32
main function we will call the function
4:34
LV in it to initialize the LVGL library
4:38
you can see all the necessary steps
4:40
required to add LVGL to your project in
4:43
the documentation itself as mentioned
4:46
here we need to first initialize the
4:48
library then initialize the drivers
4:51
connect the tick interface display
4:53
interface and any input device interface
4:56
and then call the timer handler every
4:58
few milliseconds to manage the LVGL
5:02
timers so after initializing the LVGL
5:06
library we create a LVGL display then
5:10
create buffers to store the pixel data i
5:13
am using two buffers lvgl can draw into
5:17
one buffer while the content of the
5:18
other buffer is sent to the display in
5:21
the
5:21
background this way the rendering and
5:24
refreshing of the display become
5:26
parallel
5:27
operations also note that the buffer
5:30
size is set for 20
5:32
lines this function will initialize the
5:35
above buffer and here we are using the
5:37
partial frame buffer strategy
5:40
next we will associate the LCD panel
5:42
handle with our LVGL
5:45
display this way the LCD driver will be
5:48
connected to the LVGL display driver
5:52
next set the color format of the
5:54
display
5:56
il9341 uses
5:58
RGB565 in fact most of the SBI based
6:02
displays use the same
6:04
format next we will set the flush call
6:06
back
6:08
this call back will be used to copy the
6:10
pixel data into the display
6:13
area this call back function is already
6:16
defined outside the main
6:18
function here you can see inside this
6:21
call back first of all we call another
6:23
function port update call back this port
6:27
update call back is responsible for
6:29
setting the rotation of the display as I
6:33
mentioned in the previous video we use
6:35
the combination of the swap and mirror
6:37
functions to rotate the display after
6:40
setting the rotation the flush call back
6:43
will swap the RGB bite order to fix the
6:46
Indianness and finally it will call the
6:49
draw function to draw the color data
6:51
into the provided area after setting the
6:55
call back function I am also setting the
6:57
rotation to
7:00
180° after initializing the display
7:03
driver we need to connect the tick
7:06
interface to do this we will first
7:09
create an ESP timer the function LVGL
7:13
tick is the callback function for this
7:15
timer and it is defined outside the main
7:18
function after creating the timer we
7:21
will start it to run
7:22
periodically inside the timer call back
7:25
we will tell the LVGL about how much
7:28
time has elapsed after setting up the
7:31
timer we will also define a call back
7:33
for the flush ready
7:35
notification this call back will
7:37
basically call the LVGL flush ready
7:40
function the purpose is to inform the
7:42
LVGL that the color data is ready to be
7:45
flushed on the display the LVGL will
7:48
then call the flush function to send the
7:51
data to the display all the
7:53
initialization is complete now so we
7:56
will create a demo UI for the display
7:59
but before doing that we must acquire
8:01
the mutx as the LVGL is not thread safe
8:05
the UI I am calling here is a very basic
8:08
one it just prints hello world on the
8:11
center of the display finally we need to
8:14
manage the LVGL timer handle so we
8:17
create a task with a bigger stack size
8:21
this task will keep calling the timer
8:23
handler function so the LVGL can
8:25
function properly all right that is all
8:29
let's flash this project to the
8:34
board you can see hello world is printed
8:37
on the
8:39
display we can also manage the LVGL
8:42
configuration from the SDK configuration
8:45
of the IDE itself here you can see the
8:48
option for LVGL
8:51
configuration you can manage the
8:53
configuration based on which things you
8:55
need for the project
8:57
for example I want a bigger font size so
9:00
I am changing the default font size to
9:03
20 let me uncheck the 14 here let's
9:07
build and flash the project
9:12
again you can see the size of the string
9:15
has been increased with this change so
9:18
we are able to successfully implement
9:20
the LVGL library with our project now we
9:24
will see how to create a UI with square
9:27
line studio and then implement the UI in
9:30
our project let's open the square line
9:34
studio there are already many examples
9:37
provided here but we will use them later
9:39
after implementing the touch
9:41
functionality click on create and choose
9:44
the LVGL version earlier we downloaded
9:48
the version
9:49
9.2.2 so we need to use the same version
9:52
in the studio also click on the Eclipse
9:56
for PC now let's configure the project
10:00
choose the folder where you want to
10:02
store the project files set the
10:05
resolution of the display here i don't
10:08
want to rotate the display the shape is
10:10
rectangle but the color depth is 16 bit
10:13
for the
10:14
RGB565 click on create to create the
10:17
project here you can see the basic
10:20
layout for the studio on the left side
10:23
we have different widgets controllers
10:26
visualizers
10:28
etc i want to display an image so let's
10:31
choose this widget on the right side you
10:35
can see all the properties related to
10:37
the image we can modify them as per our
10:41
requirement first of all we need to add
10:43
the image into assets i already have an
10:47
image of the same resolution as the
10:49
display the image is in the ping format
10:53
here you can see the image has been
10:55
copied into the
10:57
assets now under the image properties
11:00
select the image from the assets and now
11:03
the image has been loaded to the
11:06
screen let's also put one spinner at the
11:09
top of this mage again we can change the
11:12
properties of this spinner for example I
11:16
am changing the ark color to red once
11:19
the project is ready open the project
11:22
settings here we need to add the path
11:24
where the UI files will be exported
11:28
inside the project folder itself I am
11:30
creating a new folder named UI this is
11:34
where the files will export to also
11:37
input
11:38
lvg.h in the lvg path click apply change
11:42
to save this
11:44
configuration now go to export and click
11:47
export UI files the UI files will export
11:51
to the UI folder we created here you can
11:55
see the folder has been populated with
11:57
different files we need all these files
12:00
in our project so let's copy this entire
12:04
folder inside our main folder we still
12:07
need to add the libraries manually so
12:10
open the cmake list inside the UI folder
12:13
and copy all the source files now open
12:17
the cmake list of the main folder paste
12:20
the copied source files here in front of
12:22
the main C here the files will not be
12:26
directly accessible so we need to
12:28
include the folder path in front of them
12:31
also include the UI directory here that
12:34
is all let's build the project once all
12:38
right we do not have any errors so let's
12:41
proceed inside the main file include the
12:44
UI header file and finally inside the
12:48
main function we will call UI to
12:50
initialize the UI that is all let's
12:54
build and flash the project to the
12:57
board you can see the UI has been loaded
13:00
on the display but the colors are not
13:06
accurate actually the color order in the
13:09
ESBLCD configuration is set to RGB let
13:12
me change it to BGR as I mentioned in
13:16
the previous video you can change the
13:18
color order if you see some discrepancy
13:20
in the color let's build and flash the
13:23
project again you can see the LCD is now
13:27
displaying accurate colors the spinner
13:30
is also rotating just as we designed in
13:32
the studio so we are able to interface
13:35
the LVGL with the ESP32 using the ESB ID
13:40
we also saw how to use the square line
13:43
studio to design the UI and then how to
13:46
use the UI in our project we will
13:49
implement the touch functionality in the
13:51
next video of this series later we will
13:54
design a more sophisticated UI which
13:57
will include some touch events too this
14:00
is it for the video you can download the
14:03
project from the link in the description
14:06
leave comments in case of any doubt keep
14:09
watching and have a nice day ahead
#Programming
#Software