Up next in 10
ESP32#12 ESP SPI LCD || PART 3 || Add Touch Interface to LCD
Jun 7, 2025
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ Watch SPI LCD PART2 :::: https://youtu.be/n0UTBTj21sk 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-12-esp-spi-lcd-part3/ ________________________________________________________________________________________ ******* 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:09
hello and welcome to controllers tech
0:12
this is the 12th video in the ESB32
0:15
series using the expressive ID and today
0:18
we will continue with the small series
0:20
interfacing the SBI based display with
0:22
ESP32
0:25
in the previous video we saw how to
0:27
include the LVGL graphic library to our
0:30
project we also saw how to use the
0:33
Square Line Studio to design the UI and
0:36
how to use the UI files in the
0:39
project today we will implement the
0:41
touch functionality for the display we
0:45
will use the same method that we used
0:47
for interfacing the
0:49
LCD you must know the touch controller
0:52
connected to the LCD
0:54
the ILI 9341 display I am using has the
0:59
XPT2046 touch interface
1:01
controller this is the ESPCD touch
1:04
driver for this
1:06
controller let's download the archive
1:09
and extract it we will continue
1:12
modifying the project from the previous
1:14
tutorial but first we need to get the
1:16
format for interfacing the touch
1:18
controller let's open the IDE and create
1:22
a new expressive project create the
1:25
project using the SBI LCD touch
1:28
template let's look for the code related
1:31
to touch
1:36
interface here is the LVGL touch call
1:40
back
1:40
function copy it somewhere in a separate
1:44
file let's continue browsing the main
1:47
file now here are another set of
1:50
functions needed for the touch
1:52
functionality
1:54
let's copy them in the separate file too
1:57
note that the touch is configured after
1:59
completely configuring the LCD just
2:02
before creating the LVGL task we will do
2:06
it in the same way in our
2:08
project we do not need anything else
2:10
from this template project so let's
2:13
delete it i have downloaded the project
2:16
from the previous tutorial let's load
2:18
this project to the
2:20
IDE
2:24
here is the main
2:26
file note that I deleted the LVGL folder
2:30
before uploading the project on the
2:33
website but the IDF component file has
2:36
the dependency for the LVGL version
2:40
9.2.2 also note that the managed
2:42
components folder contains only one
2:45
folder right now let's build this
2:48
project once the project builds
2:51
successfully and note that the LVGL
2:54
library is added to the managed
2:56
components
2:57
folder basically the ID automatically
3:00
downloaded the library as the dependency
3:03
for the same was added in the components
3:05
file it does not matter where the folder
3:08
is located as long as the project builds
3:11
fine let me delete the
3:14
ST7735 dependency from this project as I
3:17
am not using it anymore
3:20
let's add the dependency for the
3:24
XPT2046 now copy the
3:27
XPT2046 folder to the components folder
3:30
inside the
3:31
project let me delete the
3:34
ST7735 related files and folders as I
3:37
will just focus on ILI
3:40
9341 let's build the project again to
3:43
check for
3:44
errors there are no errors so let's
3:47
proceed ahead
3:51
include the
3:54
XPT2046 header file now we will add the
3:58
functions which we copied from the
3:59
template
4:01
project this is a callback function
4:04
called by the LVGL to detect the
4:09
touch inside the function we will first
4:12
read the touchpad data then the function
4:16
get coordinates is used to detect the
4:19
touch this function returns true when a
4:22
touch is detected otherwise it returns
4:27
false if the touch is detected the
4:30
touchpad coordinates are copied into the
4:32
LVGL indef data
4:37
structure the next set of functions are
4:40
used to initialize the touch driver
4:43
let's copy these functions after running
4:45
the
4:49
UI this code is written for some other
4:52
driver so let's change it to
4:57
XPT2046 now we need to configure the CS
5:00
pin for the touch let's take a look at
5:02
the connection diagram once here you can
5:06
see the touch and display both are
5:08
connected to the same SBI pins the data
5:11
in pin of the touchpad is connected to
5:13
the mossy pin whereas the data out pin
5:16
is connected to the miso pin clock pin
5:19
is connected to the clock itself the
5:22
chip select pin needs to be different
5:24
and that is why it is connected to the
5:28
GPIO2 let's define the CS pin for the
5:31
touchpad
5:34
here since we are using the same SBI for
5:38
both LCD and touch the SBI host also
5:41
needs to be the same this function adds
5:45
a new panel to the SBI the touch panel
5:48
next we need to define the touchpad
5:51
resolution which is basically the same
5:53
as the LCD the rest of the configuration
5:56
will remain unchanged for now we will
5:59
see later if something needs to be
6:02
modified
6:04
let's delete this condition from here i
6:07
am not using the ESP logs so I will use
6:10
the print f here to print this on the
6:12
console let's change the driver name
6:15
here to
6:17
XPT2046 these functions initialize the
6:20
LVGL input driver it first creates a new
6:24
input device driver then set the device
6:28
type to pointer type then it connects
6:31
the input device to the display next it
6:34
connects the input device to the
6:36
touchpad driver finally it sets the call
6:39
back for the input
6:42
device let's go to this call back
6:45
function here if the touch is detected
6:48
we will print something on the console
6:51
this is just to make sure that the touch
6:53
is being detected that is all let's
6:56
build the project once there are no
7:00
errors so let's flash it to the board
7:03
here you can see the UI from the
7:05
previous tutorial is running on the
7:07
board the touch driver has been
7:10
initialized
7:11
successfully let's touch on the display
7:14
now you can see that the string is
7:16
printing on the console each time the
7:18
touch is detected on the display so
7:22
everything is working fine so far now we
7:25
will create an UI on the Square Line
7:27
Studio to test the touch
7:30
functionality i am using the LVGL
7:33
version
7:34
9.2.2 so I am selecting the same here
7:38
let's create a folder where the square
7:40
line project will be stored the display
7:43
size is 240x 320 and the color depth is
7:47
16 bits i am going to create a very
7:50
simple UI to test the touch
7:52
functionality
7:53
let's add a button and a text area the
7:57
text area will display the screen number
8:00
i will add one more screen to this
8:02
project and the button will be used to
8:05
change the screens on the
8:11
display let's add a label to this button
8:14
i am calling it next we will add an
8:17
event to this button when the button is
8:19
clicked we will change the screen but we
8:23
need to first create a second screen
8:25
here all right when the button is
8:28
clicked on screen one the screen will
8:30
change to screen two we can also add
8:33
some animation for this screen change
8:36
you can test the project by clicking
8:38
this play button on the top you can see
8:41
the screen is changing just fine let's
8:45
modify screen two now here the text area
8:48
will display screen two and the button
8:51
label will display previous we will also
8:54
add an event to this button when it is
8:57
pressed the screen will change back to
8:58
screen one let's quickly test this
9:01
project on the studio itself all right
9:05
everything is working fine here let's
9:08
add the spinner to both the screens
9:13
i am modifying the color of the elements
9:16
on screen
9:22
too all right everything is working fine
9:25
in the studio let's open the project
9:29
settings here we will set the path to
9:31
export the UI
9:33
files also set the LVGL include path to
9:38
LVGL.h that is all apply these changes
9:41
and export the UI files to the UI folder
9:44
we just created now delete the existing
9:48
UI folder in the project and copy the UI
9:51
folder we just created we need to modify
9:54
the sources in the CMake list
9:59
file copy the sources from the UI folder
10:03
and replace the ones in the main folder
10:09
since these files are inside the UI
10:11
folder we need to add the folder path
10:14
here to the source
10:18
files save this C make list file and
10:22
close it now the UI is already
10:24
initialized in the main function so we
10:27
do not need to do anything here let's
10:30
build the project once to check for
10:32
errors there are no errors here so flash
10:35
the project to the board here you can
10:38
see the new UI has been loaded on the
10:41
display let's tap on the button to
10:44
change the screen you can see the touch
10:46
is being detected but the button is not
10:50
responding but if I tap at the lower
10:52
half of the screen the button responds
10:54
and the screen changes to screen two the
10:58
second button also responds to the touch
11:00
at the same location
11:02
this means that the touchpad coordinates
11:05
are not aligned correctly with the
11:07
display since the error seems to be in
11:09
terms of the y-axis let's mirror the
11:12
y-axis of the touchpad also you must
11:15
have noted that the display animation
11:17
was very slow we can fix it by reducing
11:21
the threshold time in the LVGL port task
11:25
the value of this variable is 100 so
11:28
this makes the threshold time equals to
11:30
20 milliseconds
11:32
let's reduce it to 2
11:34
milliseconds all right let's build and
11:36
flash the project to the board again you
11:40
can see that the touch coordinates are
11:41
fixed and now the tap on the button is
11:44
responding just fine also note that the
11:47
animations are a lot smoother
11:49
comparatively now we need to fix the
11:52
text size on the display the text size
11:56
during the design was fine but here it
11:58
is bigger than the elements
12:03
let's open the SDK
12:05
configuration browse down to LVGL
12:08
configuration and here you will see the
12:11
font usage section i set the font size
12:14
to 20 in the previous project the
12:17
default font size is also set to 20 that
12:20
is why the fonts are bigger than what we
12:22
designed in the studio the studio uses
12:25
the default size of 14 so let's set the
12:29
same here now save this SDK
12:32
configuration build and flash the
12:34
project to the board again you can see
12:37
the fonts are now smaller and they fit
12:39
the elements just like how we designed
12:41
it the touch is also working fine the
12:45
buttons are responding well and the
12:47
animations are also smooth so now we
12:51
have the touch functionality working on
12:53
our ILI 9341 display you can use the
12:57
square line studio to build more
12:59
projects and test them this is it for
13:02
the video i hope you understood how to
13:05
implement the touch functionality to the
13:08
display connected to
13:10
ESB32 you can download the project from
13:12
the link in the description leave
13:15
comments in case of any doubt keep
13:18
watching and have a nice day ahead
#Programming
#Science
#Software