Up next in 10
STM32 FSMC || LCD PART 3 || Add LVGL & Create UI in SquareLine Studio
5 views
Apr 21, 2024
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ FMC PART1 :::: https://youtu.be/QURw04sQ--Y FMC PART2 :::: https://youtu.be/4-B8A-bwj4E STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8gga7xeUUJ-bRUbeChfTOOBd DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/stm32-fmc-how-to-add-touch-interface-to-the-lcd/ ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech *******Join the Membership******* https://www.youtube.com/channel/UCkdqtSMnhYuMsJkyHOxiPZQ/join Join the Discord Server https://discord.gg/D32JE5wKyD
View Video Transcript
0:01
[Music]
0:09
hello and welcome to controllers Tech
0:12
this is the third video in the SDM 32
0:15
fsmc series connecting the LCD in
0:17
parallel mode and today we will add the
0:20
lvgl to our display in the previous
0:23
videos we have covered how to interface
0:25
the display using the fsmc and how to
0:28
add the touch to the display
0:30
today we will add the lvgl to this
0:33
display and finally use the square line
0:36
Studio to create an user interface which
0:38
will include the buttons and a text
0:40
counter on the
0:41
display I have already covered a few
0:44
videos on the lvgl which includes how to
0:47
add the library to the display how to
0:49
add the touch driver and how to use the
0:51
square line
0:52
Studio since all that has already been
0:55
covered I will not explain everything in
0:58
this video
1:00
here we have the project from the
1:01
previous video and we will continue with
1:04
the same
1:05
today let's open the project folder to
1:08
copy the lvgl
1:10
library I have the lvgl folder here
1:13
downloaded from their
1:15
GitHub I have downloaded the same
1:18
version 8.3 which I used in the entire
1:21
lvgl
1:22
playlist let's copy the lvgl folder
1:26
inside the driver's folder in the
1:27
project directory
1:30
now open the lvgl folder and copy the
1:33
lvgl configuration template next to the
1:35
project folder
1:37
itself rename the file to lvc
1:39
conference.
1:41
H let's open the cube ID and refresh the
1:46
project here you can see the lvgl folder
1:49
and the configuration file has been
1:51
added to the project now we need to add
1:54
the lvgl to the path so open the project
1:57
properties go to c c Plus+ build setting
2:01
compiler include paths here we will add
2:05
the lvgl folder with respect to the
2:08
project
2:09
workspace now open the lvgl
2:12
configuration file and change the 0o to
2:15
one this will enable the lvgl
2:19
configuration here you can see the color
2:21
depth is set to 16 make sure you set the
2:24
right one as per the
2:26
display now we need to add the display
2:29
port template to our project which will
2:31
be used to connect the library to the
2:34
display these templates can be accessed
2:36
inside the examples porting
2:39
folder here we will start with the LV
2:42
Port display
2:44
template let's copy the content of this
2:46
file and we will paste them inside the
2:49
LCD controller file we created in the
2:51
previous
2:56
projects let's enable these functions by
2:58
setting it to one one remove this
3:01
inclusion file as we will copy the
3:04
content of the header file in the LCD
3:06
controller header file
3:08
itself next we need to define the
3:10
display
3:12
resolution the display resolution is
3:14
240x
3:17
240 let's include the SD 7789 H2 header
3:21
file as we would need to use some
3:23
function from it the LV Port display
3:27
initialization function calls the
3:29
display
3:31
initialization inside this function we
3:33
will initialize our
3:35
display then we have different
3:37
strategies for the frame
3:39
buffer I have already explained them in
3:41
detail in the lvgl series videos but
3:45
anyway I will give a brief description
3:47
here the single buffer strategy use is
3:50
only one buffer since we have only one
3:53
buffer the lvgl needs to wait for the
3:56
buffer to flush before it can write the
3:58
new content to the buffer
4:00
the double buffer strategy uses two
4:02
buffers where one buffer is used to
4:04
flush the content to the display while
4:07
the lvgl can write the new content to
4:09
the other buffer using two buffers
4:12
requires more RAM and since we have
4:14
enough RAM here I am going to use this
4:17
double buffer strategy
4:19
itself let me comment out the others we
4:23
need to change the display buffer to two
4:25
here the next function we need to change
4:28
is the display a flush
4:30
function let's delete this part first we
4:34
will first calculate the height and
4:36
width of the area to be
4:41
modified now we will set the display
4:44
window for the area to be
4:46
modified the X position is the start of
4:49
the x coordinate y position is the start
4:51
of the y-coordinate width and height are
4:54
already
4:56
calculated next we can call the draw
4:58
bitmap function to print the content on
5:00
the
5:01
display but this function takes the
5:03
entire bit map image as the parameter
5:06
and hence I am not going to use it here
5:09
instead we have another function for it
5:11
draw RGB
5:13
image we can use this function to draw a
5:16
part of the
5:18
image the X and Y positions are the
5:20
starting point of the image X size is
5:23
width and Y size is height and at last
5:27
we will pass the color data to it
5:30
once the color data has been flushed the
5:32
display flush ready function is called
5:35
so that the lvgl can Flash the next
5:38
buffer all right that is all we need to
5:41
modify in the display port source
5:43
file now let's copy the content of the
5:46
display port header file and paste them
5:49
in the LCD controller header file make
5:52
sure to modify this inclusion to lvgl
5:56
Doh let's build the code once to check
5:59
for any any
6:00
errors next we have to add the touch
6:02
interface drivers to the lvgl so copy
6:05
the content of the port inp template
6:13
file we will add the touch interface to
6:16
the LCD Touch file we created in the
6:18
previous
6:20
tutorial let's delete this inclusion and
6:23
fix the lvgl header file I am only using
6:27
the touch interface so here I I am
6:29
removing the rest of the input devices
6:32
from this file this file is actually
6:35
common for all kinds of inputs supported
6:37
by the lvgl like button Mouse keypad
6:41
encoder
6:42
Etc you can keep them but I don't prefer
6:45
them to be here all right now the LV
6:49
Port indf init function will be called
6:51
from the main file and this function
6:53
only initializes the
6:55
touchpad we need to write our code to
6:58
initialize the touch pad here let's
7:01
include the ft6 by 06 header file so
7:05
that we can call its functions here we
7:08
will first call the ft6 by 06 in it
7:11
function and if you remember from the
7:13
last video the device address is 70 hex
7:17
Now call the TS start function to start
7:20
the touch
7:21
sensing the lvgl will itself call the
7:24
touch bed read function at a fixed
7:26
interval inside this function it first
7:29
checks if the touch bad is pressed and
7:31
if it is the function get XY is called
7:34
to read the coordinates the touch pad is
7:37
pressed function is where the touch is
7:39
detected so here we will call our
7:41
equivalent function TS detect touch we
7:45
know that this function returns either
7:47
one or two when it detects the touch and
7:49
if that happens we will return true
7:53
otherwise false will be returned now the
7:56
function touchpad get XY is used to read
8:00
the
8:01
coordinates here we will call the
8:03
equivalent function TS getxy and pass
8:06
the parameter of the main function the
8:09
function expects un sign 16bit integer
8:12
but the LV coordinates are type sign 16
8:15
bit so let's typ cast these variables
8:18
before passing them to the function that
8:21
is all we need to do for the touch
8:24
interface now copy the content of the
8:26
indef port header file and copy it to
8:29
the LCD touch header
8:35
file let's build the code to check for
8:38
any errors we have an issue with this if
8:41
statement so let me remove
8:49
it all right everything builds fine now
8:53
now we will modify the main file let me
8:56
delete the code from the previous
8:58
tutorial
8:59
first include the lvgl header file along
9:03
with the LCD controller and touch header
9:06
files now in the main function call the
9:09
LV in it function to initialize the
9:12
lvgl then call the LV Port display in it
9:16
to initialize the display driver and the
9:18
LV port in Def in it to initialize the
9:21
touch
9:21
interface inside the while loop call the
9:24
LV timer Handler every 5
9:27
milliseconds now open the interrupt
9:29
source file and include the lvgl header
9:33
file inside the Cy tick Handler call the
9:36
LV ticking function and pass the
9:38
parameter one to
9:41
it we have configured the lvgl for our
9:44
display now we will create a user
9:46
interface in the Square line Studio I am
9:49
using the same version
9:52
1.3.2 which I used throughout the lvgl
9:55
series let's create a new eclipse-based
9:58
project here here set the project folder
10:02
and give it a name the display size is
10:05
240x 240 pixels the color depth is 16bit
10:11
and I am using the lvgl version
10:14
8.3 click create to create the project
10:18
let's add the text area to this screen
10:21
you can modify the text area as per your
10:24
requirement
10:31
here I am changing the text color to
10:33
Black and the text font size to
10:44
20 let's add a button to this
10:50
screen here I am changing the background
10:53
color when the button is pressed let's
10:56
quickly test if it is working
10:59
you can see the color is changing
11:01
whenever the button is pressed let's add
11:03
a label to this button and we will call
11:06
it up basically the text counter will
11:09
increment whenever this button is
11:11
pressed now add one more button and
11:14
label it
11:23
down we need to add events for these
11:26
buttons so that we can use them to
11:28
increase and decrease the counter I am
11:31
calling the functions up clicked and
11:33
down clicked when the buttons are
11:35
pressed later we will write the code
11:38
inside these
11:39
functions open the project settings and
11:42
change the lvgl include path to lvg
11:46
L.H create a new folder where the user
11:49
interface related file will be
11:55
stored now export the UI files next next
11:59
we will copy the UI folder we just
12:01
created to the project
12:09
folder I am copying the UI folder inside
12:12
the driver folder itself just beside the
12:14
lvgl
12:22
directory now refresh the project once
12:24
and you can see the UI folder in the
12:27
driver directory we need to include the
12:30
UI folder to the path so let's do it in
12:33
the project
12:49
settings include the UI header file in
12:52
the main file after the lvgl has been
12:55
initialized call the UI in it to
12:58
initialize the UI
13:00
let's build it once to check for errors
13:03
we do have an error and that is in the
13:05
UI screen file it says that the font
13:08
size 20 is
13:10
undefined actually I have set the font
13:13
size 20 in the UI but it has not be
13:15
enabled in the lvgl configuration file
13:19
let's open the configuration file here
13:22
are the fonts defined set the font 20 to
13:26
one let's build it again we don't have
13:30
any errors now so let's flash it to the
13:35
board there was a little issue with the
13:38
display and it was because the width and
13:40
height were not calculated properly we
13:43
needed to add a one here let's flash it
13:46
again to the
13:52
board here you can see the UI has been
13:55
loaded to the display but when I try to
13:58
tap on the button
13:59
they don't register the touches instead
14:02
the touches are being registered when I
14:04
am pressing some other part of the
14:06
screen actually the screen is flipped
14:09
90° but the touch controller is using
14:12
the original
14:13
orientation that is why the buttons are
14:16
being assumed at the bottom of the
14:18
screen to fix this we need to modify the
14:21
touch readings being fed to the
14:24
lvgl inside the touch bad get XY
14:27
function after reading the touch code
14:29
coordinates we will first store them in
14:31
other
14:32
variables Now update the X and Y
14:35
coordinates using each other's
14:38
values basically we are shifting the
14:40
touch coordinates data 90° to the left
14:44
now we will write the UI event
14:47
functions let's include the main header
14:49
file and the standard IO header file
14:53
Define the integer variable num to keep
14:55
track of the counter and the array num
14:57
Char which will be be used to store the
15:00
num value in the character
15:02
format now when the up button is pressed
15:05
the upclick function will be
15:08
called here we will increment the
15:10
variable
15:11
num then s printf is used to convert the
15:14
variable's value to the character
15:17
format now we need to print this array
15:20
to the text area we can use the function
15:23
LV text area set text to do this
15:32
now clear the data stored in the numcha
15:35
so that there is no residue in the array
15:38
we do the same when the down clicked
15:40
function is
15:42
called instead of incrementing the
15:44
variable here we will decrease it all
15:48
right our final code is ready so let's
15:50
build and Flash it to the
15:56
board you can see the touches are now
15:58
get getting registered at the correct
16:01
location pressing the up button
16:03
increases the counter and the down
16:06
button is decreasing the counter
16:09
value since we have defined the num
16:11
variable as an integer it can go
16:14
negative
16:15
also so everything is working fine with
16:18
our display which is connected via the
16:21
fsmc you can try our lvgl videos also
16:25
and try to make a better
16:27
UI this is it it for the
16:29
video I hope everything was clear you
16:33
can download the code from the link in
16:35
the
16:36
description keep watching and have a
16:39
nice day ahead