Up next in 10
LVGL on STM32 - PART 2 || Implement Touch || Create UI using Squareline Studio
9 views
Oct 7, 2023
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ LVGL PART 1 :::: https://youtu.be/SnrHpcujpyU LVGL PART 3 :::: https://youtu.be/CGJId4o8x58 LVGL STM32 Series Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8ghGES4CUTjHTn_G4gly_atz STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8gga7xeUUJ-bRUbeChfTOOBd DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/lvgl-on-stm32-part-2/ ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech *******Join the Membership******* https://www.youtube.com/channel/UCkdqtSMnhYuMsJkyHOxiPZQ/join
View Video Transcript
0:07
[Music]
0:14
hello and welcome to controllers Tech
0:17
this is the second video in the stm32
0:20
lvgl series and as I mentioned in the
0:24
previous video today we will integrate
0:26
the touch with the lvgl
0:28
we will also build a GUI application
0:30
using the square line studio and see how
0:33
to implement the UI with our project
0:36
here I have the library files for the
0:39
touch framework that is xpt2046
0:44
I hope you have the same libraries for
0:46
the display you are using
0:48
just like we used the template for the
0:51
display driver we will use another
0:53
template for the touch driver
0:55
you can locate the template in the
0:57
similar Way by scrolling down the input
0:59
driver interface page
1:02
change the lvgl version to 8.3
1:06
here you can see the template for the
1:08
touch driver
1:09
I am also going to copy some functions
1:12
from another project I covered on
1:14
interfacing the
1:15
ili9341 with the touch gfx
1:19
in the previous video we saw how to
1:21
integrate the lvgl with the stm32
1:24
project
1:25
we will continue where we left the
1:28
previous video
1:29
the touch interface uses SBI so we need
1:32
to enable another SPI in the cube MX
1:36
let's see the pin out first
1:38
here are the pins needed for the touch
1:41
interface
1:42
we have the clock pin CS pin data in
1:46
which is the mossy pin and data out the
1:49
Miso pin
1:50
here you can see how they are connected
1:54
we have the interrupt pin also but I am
1:57
not using it for now
1:58
the lvgl template doesn't need the
2:01
interrupt pin so we will not force it
2:03
for now
2:04
when I tested the button on the display
2:07
it was responding fine so I did not
2:09
bother with the interrupt pin but I did
2:12
get some unwanted touches so I guess we
2:15
might need to use it in future
2:16
especially when we will cover the slider
2:19
or scrolling items
2:21
so let's not connect it for now and if
2:24
needed we will add it in future projects
2:27
I am using the SPI 2 for the touch
2:30
interface
2:32
enable the SBI in the full duplex mode
2:36
enable the interrupt for the SBI
2:39
the data size should be 8 Bits and let's
2:42
keep the board rate around 5 megabits
2:44
per second
2:46
let me remap the SPI pins as per my
2:49
connection
2:53
set the Cs pin as output and if you are
2:56
using this Library make sure to name it
2:58
as TCS
3:00
all right that's all for the
3:02
configuration click save to generate the
3:05
project
3:08
now add the touch library to the project
3:11
copy the C file in the source directory
3:14
and head a file in the include directory
3:18
just like the LCD controller file we
3:20
created for connecting the LCD drivers
3:22
to the lvgl we will also create a touch
3:25
controller to connect the touch drivers
3:27
to the lvgl
3:37
copy the indef template code from the
3:39
GitHub and paste them in the respective
3:42
files
3:47
let me delete these extra lines
4:08
here we will include the touch
4:10
controller header file and fix this lvgl
4:13
header file inclusion
4:15
this file has the initialization code
4:18
for the different input devices like
4:20
touchpad Mouse button keypad
4:24
Etc
4:25
I will just leave the touchpad related
4:27
code and delete the rest of them
4:43
all right let's include the main header
4:46
file the LCD header file and the touch
4:49
driver header file
4:53
the indefinite function contains the
4:56
touchpad in it this is where we will
4:58
initialize our touchpad driver
5:00
so let's initialize the xpt2046
5:05
the touchpad read function does not need
5:08
any user code
5:09
touchpad is pressed and touchpad get X Y
5:12
are the functions where we need to input
5:14
the code for the respective operations
5:17
as I mentioned earlier I am going to use
5:20
the touch controller file from another
5:22
project
5:24
I don't even understand how these
5:26
functions work but anyway we will make
5:28
it work
5:32
this code is utilized by the touch gfx
5:35
to sample the touch so I am putting it
5:38
in the touchpad pressed function
5:43
notice here that the X and Y are the
5:46
actual touch points that are passed to
5:48
the touch gfx
5:50
but the lvgl function does not have any
5:53
parameters
5:55
so we will create a structure to store
5:57
these values
6:02
now store the touch Point data in the
6:05
structure
6:08
touchpad get X Y is used to read the
6:12
touch Point data here you can see the
6:15
function is called after the touch is
6:17
detected and the points are stored in
6:19
the variable's last X at last y
6:22
since we have the data stored in the
6:24
structure we defined we can directly
6:26
pass the value to these variables here
6:30
this method works for now so I am going
6:32
with it
6:34
I might change the implementation in the
6:36
future videos when there will be more
6:38
complicated touch inputs like sliders or
6:41
scrollers
6:42
I am not sure if this method will work
6:45
with those touches
6:46
anyway it depends on your touch driver
6:49
and what kind of Library you have for
6:51
the same
6:52
that's all for the touch controller
6:54
let's build the code now
6:57
we got a few warnings but that's all
6:59
right
7:00
now we will see how to use the square
7:03
line Studio create our project and
7:06
include the files in the stm32 project
7:09
you can find the studio link on the lvgl
7:12
website itself
7:14
you can register and get a license it's
7:17
free for the personal use
7:19
download and install the studio from
7:22
here
7:25
if you are running it on Mac OS with a
7:28
Hubble silicon you need to check this
7:30
open with Rosetta all right let's launch
7:34
the square line studio now
7:36
I am just continuing with the trial
7:40
click on Create and here you can see the
7:42
available platforms
7:44
just click on the desktop and then
7:47
eclipse
7:48
let's create a folder where the project
7:50
files will be saved
7:58
give some name to the project here
8:01
set the screen resolution for the
8:04
display
8:04
you can set rotation shape
8:07
Etc
8:08
make sure to choose the correct color
8:10
depth and the lvgl version should match
8:13
with the one we have downloaded
8:16
let's create the project
8:18
here you can see the screen in the
8:20
middle on the right side we have the
8:22
properties of the components and on the
8:25
left we have different components
8:26
available
8:28
I don't want the white background so I
8:30
am changing it to red
8:36
let's add a button to the screen
8:43
I am also adding a label on this button
8:46
that says change color
8:48
now we need to add the click event for
8:51
this button
8:52
so select the button and then add event
8:56
the event name is event1 and it will be
8:59
triggered when the button is clicked
9:01
for the action we will call a function
9:05
click add to add the function
9:08
the function name is going to be button
9:10
one clicked
9:11
so when the button is clicked the
9:14
function button one clicked will be
9:15
called
9:16
we will write the code inside this
9:19
function later in the ID itself
9:22
you can go to Project settings and
9:24
modify the project properties
9:27
I am going to add the path where the UI
9:29
files will export to
9:32
let's create a new folder here and name
9:35
it UI
9:36
the UI files will export inside this
9:39
folder so we can easily copy them to our
9:42
project
9:43
modify the project properties as per
9:46
your requirement
9:47
then save the project and generate the
9:50
UI files
9:52
if you check the project folder now you
9:55
should see the UI folder got populated
9:57
with some files
9:59
let's copy this UI folder and we will
10:02
paste it inside our sdm32 project folder
10:06
I am pasting it beside the lvgl folder
10:09
so that it will be easier to locate
10:12
now open the ID and refresh the project
10:16
you should be able to see the UI folder
10:19
here
10:20
we still need to add the UI folder to
10:22
our project path just like we added the
10:25
lvgl folder
10:27
we follow the same method to add it to
10:29
the project path
10:33
all right now include the UI header file
10:36
in the main file
10:39
and after initialization is over call
10:41
the function UI in it to initialize the
10:44
UI
10:45
this is the initialization function
10:47
which initializes everything we created
10:50
on the screen
10:51
the UI Event Source file contains the
10:54
events created during the designing
10:57
here is the button one clicked event we
11:00
created
11:01
we will write the code inside this
11:03
function which will be called when the
11:05
button is clicked
11:07
let's Define a variable index to keep
11:10
track of how many times the button has
11:12
been clicked
11:13
we will increment this variable each
11:16
time the button it clicked
11:18
if the variable has a value equal to 1
11:21
we will change the background color of
11:23
the screen
11:24
here is the function which can be used
11:27
for the same
11:29
this is the color which will be set
11:32
similarly if the variable has the value
11:34
2 we will change it to some other color
11:38
I am doing it five times and after that
11:41
the index variable will reset to zero
11:43
and everything will start from the
11:45
beginning
11:46
I am just setting random colors here
11:55
all right let's build the code now
11:59
we have an error in the UI header file
12:02
this lvgl should be included like this
12:09
actually you can set this in the project
12:11
properties itself
12:18
I also forgot a very important thing
12:21
we need to include and initialize the
12:24
touch driver in the main file
12:26
so include the touch control ahead of
12:29
file and after the display has been
12:31
initialized initialize the touch driver
12:34
let's build the code again
12:40
we have no errors here so let's flash it
12:43
to the board
12:49
you can see the UI has been loaded on
12:52
the display
12:53
the button is responding well and the
12:55
colors are changing as expected
12:58
so we included the touch driver in our
13:00
project and we also saw how to use the
13:03
square line Studio to design the UI for
13:06
our display
13:07
I hope you understood the video
13:09
the link to download the code is in the
13:12
description of this video
13:14
leave comments in case of any doubt
13:17
keep watching and have a nice day ahead