Up next in 10
ESP32#10 ESP SPI LCD || PART 1 || Interface LCD using inbuilt library || ILI9341 || ST7735
Mar 22, 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 LCD drivers guide :::: https://docs.espressif.com/projects/esp-idf/en/stable/esp32/api-reference/peripherals/lcd.html ESP32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8ghS_i2Yky2actXWbQoqrscN DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/esp32-10-esp-spi-lcd-part1/ ________________________________________________________________________________________ ******* 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 controller Tech
0:12
this is the 10th video in the ESP 32
0:15
series using the espressive IDE and
0:17
today we will start a small series
0:20
covering how to interface different
0:22
displays with the
0:24
sp32 we will use the official Library
0:27
components provided by the ESP itself
0:30
we will first see how to use these
0:32
components to start the basic
0:34
functionality of the display and later
0:36
we will implement the lvgl to use the
0:39
display at its full
0:41
potential today in this tutorial I will
0:43
focus on how to connect aspi based
0:46
display to
0:47
es32 and how to get it
0:50
working I am going to show the method
0:52
for two very famous displays I
0:55
9341 and st7735
1:00
both displays use SPI for communication
1:02
hence we do not need to modify a lot in
1:05
the
1:05
code here is how the 2.8 in I 9341
1:11
display is connected to the
1:13
s32 the display is powered with 3.3
1:17
volts from the ESB 32
1:19
itself the Cs pin is connected to pin 5
1:23
reset is connected to pin 22 DC is
1:26
connected to pin 21 Mossy is connected
1:29
to pin 2 3 Clock is connected to pin 18
1:32
and miso is connected to pin
1:35
19 the LED backlight is connected to the
1:38
pin 4 but you can also connect it to 3.3
1:42
Vols I have not connected the touch
1:44
related pins yet we will implement the
1:47
touch in the upcoming video of this
1:49
series all right let's start the
1:52
espressive ID and create a new
1:54
espressive IDF
1:56
project if you search for LCD here this
1:59
P LCD touch is a fully functioning
2:02
project for I
2:04
9341 but as I mentioned earlier we will
2:07
see how to do it for any display out
2:10
there so let's create a blank project
2:12
and we will add all the required things
2:15
ourselves all right the project has been
2:18
created and here we have our main
2:20
file now we need stepbystep instructions
2:24
for adding the display using the inbuilt
2:26
ESB
2:28
functions here you can find find the
2:30
same I will leave the link to this page
2:32
in the description of the video they
2:35
have provided the instructions for SPI
2:38
based LCDs i2c based LCDs and even the
2:42
parallel connected
2:44
LCDs today we will just focus on the SBI
2:47
based
2:49
LCDs before we start following these
2:51
instructions let's open this espressive
2:54
component
2:55
registry here you can search for the
2:58
display controller or any other
3:00
component you want there are a lot of
3:03
results for I
3:05
9341 but make sure you open the one with
3:07
the s spcd in it now download the
3:11
archive and extract it we need to copy
3:15
this folder in our
3:17
project let's create a new folder in our
3:19
project and name it
3:22
components this is where we will place
3:25
all the components we are using in this
3:28
project now copy the ESP LCD folder
3:32
inside the components
3:33
folder next we need to link this
3:36
component to our
3:38
project to do so we need to create a yml
3:42
file inside the main folder I am just
3:46
going to copy it from the escd folder
3:49
and paste it in the main folder delete
3:52
everything from it but leave the
3:54
dependencies part come to the second
3:57
line and give one space here
4:00
now we need to add the ESP LCD
4:03
dependency go back to the component page
4:06
and copy this part alone now paste it
4:10
just after the space this part is the
4:13
version of the component Library give a
4:16
colon after the name and put the version
4:19
in the
4:20
quotation now we have added the LCD
4:22
dependency in our project so let's build
4:25
it once all right the project builds
4:28
fine so let's start
4:30
inclusions we will first include the es
4:33
lcdi L 9341 header file next include all
4:38
the header files related to escd panel
4:42
we will remove if some of them are not
4:44
used in the project but include all of
4:46
them for
4:52
now all right now let's go to the
4:55
instructions page and follow the
4:57
instructions to add the display first of
5:00
all we need to create a SBI Bus Let's
5:04
copy this entire code from here we
5:07
should create a separate function just
5:09
to initialize the display this will make
5:12
it easier when we will add the lvgl
5:15
related functions in our project there
5:18
are a lot of Errors regarding the pin
5:20
definition here let's define these pins
5:25
the first is the SBI clock pin let's
5:28
take a look at the PIN diagram again the
5:31
clock pin is connected to the pin
5:34
18 this should be 18 here similarly
5:38
Define other pins used in the project as
5:45
well the clock mossi and miso pins have
5:49
been defined and we are not using the
5:51
quad SBI therefore they are set to minus
5:54
one Max transfer size is basically the
5:57
maximum number of pixels in one on SBI
6:00
transaction by default it is set to 80
6:04
lines we just need to define the LCD
6:07
horizontal
6:08
resolution let's also Define the
6:11
vertical resolution next Define the LCD
6:14
host basically the SBI we are using I am
6:18
using the vbi as the pins are connected
6:21
according to it I have explained it in
6:24
the previous SBA video all right the SBI
6:28
has been configured and initialized now
6:31
next we need to allocate an LCD iio
6:34
device handle from the SBI bus you can
6:37
read about the steps in this guide
6:39
itself I will just copy this code inside
6:42
our initialization function let me fix
6:46
these pin names first all right now
6:49
comes the new
6:51
definitions the pixel clock determines
6:53
how quickly the esp32 can send data to
6:56
update the LEDs thus controlling the ref
6:59
fresh rate and animation speed I am
7:02
setting it to 20
7:04
mahz the command and parameter bits set
7:07
the bit width of the command and
7:09
parameter I 9341 uses an 8bit wide
7:13
command and parameter so let's set it to
7:16
eight transaction Q depth determines how
7:20
many transactions can be queed up in the
7:22
SBI the new panel iOS SBI function will
7:26
attach this panel to the SBI bus let's
7:29
define this IO handle AS Global it might
7:32
be used by other functions outside the
7:34
display
7:36
initialization next we will install the
7:38
LCD Controller
7:44
driver let me fix this reset pin
7:50
naming I am defining this LCD panel
7:53
handle AS Global
7:57
again note that the RGB order is set to
8:00
BGR by default I 9341 works with the BGR
8:06
order so this is fine but if you have
8:09
any issues with colors on your display
8:11
you can change the order to
8:13
RGB the bits per pixel is sector
8:16
16 most of the commonly used displays
8:20
work with RGB 565 which uses 2 bytes per
8:24
pixel so a value of 16 is fine here
8:27
change this according to the display you
8:30
are using this example here is created
8:33
for
8:34
st7789 so I am changing it to I
8:38
9341 all the LCD libraries you will
8:41
download from the component registry
8:43
will have a similar function just like
8:45
here in the I
8:48
9341 our display driver has been
8:50
installed let's see the steps to
8:53
initialize the display now as mentioned
8:56
here in the I/O operations first we need
8:59
to reset the display and then initialize
9:02
it let's do the same inside our
9:05
initialization function we can use the
9:08
Swap and mirror functions together to
9:10
rotate the display we will see this
9:13
later next we will use the display onoff
9:17
function to turn the display on or off
9:20
setting the parameter to True will turn
9:23
the display on finally we can use the
9:26
draw bit map function to draw the bit
9:28
map on the display playay but the
9:30
backlight has not been enabled yet if
9:33
you have connected the backlight pin to
9:35
3.3 Vols you can skip this part I have
9:40
defined a pin for the backlight so I
9:42
will first set the pin direction to
9:44
output and then set the PIN to high so
9:47
to turn the backlight
9:50
on all right now inside the main
9:53
function we will first call the display
9:56
initialization
9:57
function now we need to print something
10:00
on the
10:01
display this method of interfacing the
10:03
display is exclusively used for adding
10:06
some other graphic Library like
10:09
lvgl therefore we do not have any
10:11
function for printing strings or drawing
10:14
shapes even for drawing a single Pixel
10:17
instead there is only one function to
10:19
draw the bit map therefore I have this
10:23
small bit map image for
10:25
testing I have also converted it to CR
10:28
array format
10:30
you can do that using some image
10:32
converter like the one offered by the
10:35
lvgl here select the image choose the
10:38
format and click
10:40
convert the lvgl will obviously convert
10:43
it in the lvgl format
10:46
types therefore I have replaced them
10:49
with the general unsigned integer type I
10:52
have also included the standard integer
10:55
type header file we will copy it inside
10:58
the main folder do not open this file as
11:02
es ID will start naming each element of
11:05
the array and the ID will be stuck for a
11:08
very long time inside the main file
11:12
include the hello C file now inside the
11:15
main function after initializing the
11:18
display call the function to draw the
11:20
bit map I am starting the drawing from 0
11:24
0 the image width is 100 pixels and the
11:27
height is 50 pixels
11:30
the array name is hello map that is all
11:34
let's build the project and Flash it to
11:36
the
11:38
board you can see the display is working
11:42
fine we have the bit map on the display
11:45
but it is mirrored this is not a problem
11:48
because when we use the lvgl with this
11:50
Library the lvgl itself will take care
11:53
of rotation and mirroring but just to
11:57
demonstrate the rotation I am calling
11:59
the swap function before drawing the bit
12:01
map setting the parameter true will swap
12:05
the X and Y AIS let's build and Flash
12:08
the project again now you can see the
12:11
bit map has been rotated and we can see
12:14
the correct orientation of the bit map
12:17
so the library works fine with the I
12:20
9341 let me quickly show another display
12:23
I have with me
12:25
st7735 the pinout of this board is the
12:29
same as the I
12:31
9341 only the Miso pin is missing
12:35
therefore I can simply connect the
12:37
display in the same manner as I
12:40
9341 let's make the changes in the code
12:43
now first of all redefine the LCD
12:47
resolution the
12:49
st7735 works with RGB scheme so
12:53
configure it here now we will add the
12:56
library in the same manner as we did for
12:58
the IL
13:00
99341 first download the library from
13:03
the component registry then copy the
13:06
folder inside the components folder you
13:10
can see the
13:11
st7735 source file has all the same
13:14
functions as we had in the I
13:21
9341 now include the
13:23
st7735 header
13:27
file then add the dependen see in the
13:29
component. yml
13:46
file now let's build the project once
13:50
finally we will install The
13:52
st7735 Controller driver the rest of the
13:56
code will remain the same as we used in
13:58
case of VI Li
14:01
9341 let's build and Flash the project
14:03
to the board you can see the display is
14:07
working fine but the bit map is mirrored
14:10
again let's call the mirror function to
14:13
mirror the bit map around the Y
14:19
AIS build and Flash the project to the
14:22
board again you can see the bit map is
14:25
oriented correctly now basically we can
14:29
use a combination of Swap and mirror
14:31
functions to rotate the display when we
14:34
implement the lvgl it will be handled by
14:37
lvgl itself so we were able to interface
14:41
the SBI based displays using the
14:44
official LCD driver from
14:46
especially it will help us implement the
14:49
lvgl easily which we will cover in the
14:51
next video this is it for the video you
14:55
can download the project from the link
14:57
in the description
14:59
leave comments in case of any doubt keep
15:03
watching and have a nice day ahead