Up next in 10
Interface LVGL with STM32 Low Memory Controllers || Parallel Display
0 views
Jan 22, 2022
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ Watch the TFT Video :: https://youtu.be/UTeNyY_g5i0 STM32 Playlist :: https://www.youtube.com/playlist?list=PLfIJKC1ud8gga7xeUUJ-bRUbeChfTOOBd DOWNLOAD THIS PROJECT FROM :::: https://github.com/controllerstech/STM32/tree/master/LVGL/Simple_F446 ________________________________________________________________________________________ ******* 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 Join the Telegram Group https://t.me/controllerstechdiscuss
View Video Transcript
0:08
[Music]
0:17
hello everyone
0:19
welcome to controllers tech
0:22
a lot of you guys requested a video on
0:24
the lvgl so today we will see how to
0:27
make it work
0:29
i am going to use a parallel display for
0:31
today's tutorial and if you remember i
0:34
have already covered a video on these
0:36
displays
0:37
i would advise that you first watch that
0:39
video and make sure your display works
0:42
as in this video i will focus only on
0:44
the lvgl part
0:47
i will be using the same library here
0:49
also along with the lvgl of course
0:53
if you are using any spi based display
0:56
make sure you already have the working
0:58
display drivers
1:00
this video does not shows how to make
1:02
the display work but rather it's about
1:04
the lvgl integration on a working
1:07
display
1:08
also one more important thing before i
1:10
start the video this library does not
1:13
support the touch interface as i have
1:15
not implemented it yet
1:18
but i am planning to do it soon and i
1:20
will update the code on the github
1:22
itself
1:24
so let's start the video now
1:27
first of all we need to download the
1:29
library files so search for the lvgl
1:32
github
1:37
here download the entire project
1:51
now extract the zip file and also open
1:54
the official website
1:59
on the website go to the developers
2:02
section
2:06
here you can see there is a guide for
2:08
porting so open it
2:11
open the first step in it
2:20
here is the extracted folder
2:23
we don't need everything in it like
2:25
demos is not needed along with that
2:27
zephyr folder
2:29
i will keep it though since i am not
2:31
going to include them anyway
2:34
rename this folder to lvgl
2:38
let's keep that aside open the cube ide
2:41
and create a new project
2:43
i am using
2:45
f446re controller
2:48
give some name to the project and click
2:50
finish
2:52
first set up the clock
3:02
i am running the system at maximum
3:04
possible clock
3:21
here these are the files from the
3:23
previous video where we interfaced some
3:26
parallel displays
3:28
user setting contains the definitions
3:30
for the pins and i am going to keep them
3:33
same
3:34
if you want to use different pins i
3:37
would suggest you to watch the previous
3:38
video as i have explained it there
3:42
my advice would be that you keep the
3:44
pins same as they are shown here
3:47
here the rd pin is the input pin and the
3:50
rest are all the output pins
3:53
let's set the p-a-0 as input and change
3:57
its name to r-d
3:59
similarly define other pins as output
4:02
and name them as per the file
4:16
now go to the gpio select all the pins
4:20
and change their maximum output speed to
4:23
very high or whatever you have maximum
4:36
that's it for the cube mx configuration
4:38
click save to generate the project
4:43
so our project has been generated now we
4:46
will add the lvgl
4:49
open the project folder and copy the
4:51
lvgl into the root of the folder
4:58
we also need to add the display library
5:01
files into the project
5:03
so copy the source files into the source
5:06
directory and header files into the
5:08
include directory
5:25
now go inside the lvgl and copy this
5:28
configuration template file
5:35
paste it in the main project folder and
5:37
remove the template from the name
5:49
now refresh the project so that the new
5:52
files can show up here
5:59
open the lvgl configuration file and
6:02
change this 0 to 1.
6:04
this will enable the configuration
6:07
this configuration file can be used to
6:10
enable or disable the functions that you
6:12
want in the library
6:14
for example the color depth is set to 16
6:17
for the rgb 565 display the one i am
6:20
using
6:22
you can read about the configuration
6:24
file here and change the options
6:26
accordingly
6:27
if your controller have less ram and
6:29
flash sizes you need to disable a lot of
6:32
options so read about them and change
6:34
them as per your requirement
6:37
i am leaving everything to default for
6:39
now
6:40
next we need to include the lvgl folder
6:43
in the source path
6:51
open the project properties go to c c
6:54
plus plus general path and symbols
6:57
source location
7:04
click add folder and select lvgl folder
7:08
click apply to save the changes
7:18
let's build the code once
7:27
we have 32 warnings but it's all right
7:32
let's start writing the main file
7:35
first of all we need to include the lvgl
7:38
related files
7:44
these 2 dots and a slash means that we
7:46
are going up a level
7:48
right now we are in the main file so one
7:51
of these means we will reach the core
7:53
folder
7:58
and another will take us to the root of
8:00
the project folder
8:05
now in the root folder we will go inside
8:07
the lvgl and then include the lvgl
8:10
header file
8:19
similarly we are also including the lv
8:22
examples header file
8:26
you can change these based on your
8:28
project structure
8:30
also include the lcd lvgl header file
8:34
this file basically connects the display
8:37
drivers to the lvgl library which we
8:40
will see in a while
8:42
let's build the code once
8:49
everything seems good there are no
8:51
errors so far
8:53
let's see the lcd lvgl source file now
8:58
here in this file we have the display
9:01
frame buffer
9:02
because of the less memory available in
9:04
the microcontroller i cannot create a
9:07
buffer large enough to store all the
9:08
pixels for the display
9:11
this is why i am going to flush one row
9:13
at a time and this frame buffer have a
9:16
size equal to the width or height
9:18
whatever is bigger
9:20
next important thing is the display in
9:22
it function
9:24
before we see this let's take a look at
9:26
the guide again
9:30
here are the steps given for the
9:32
initialization of the lvgl
9:36
first we need to call the lv init
9:38
function which we will do later in the
9:40
main file itself
9:42
then we have to initialize the drivers
9:45
here we need to initialize the lv
9:47
display driver along with the lcd
9:50
display driver also
9:59
next we need to register the display and
10:01
input drivers
10:03
since there is no input driver for now i
10:06
am only registering the lv display
10:08
driver
10:10
finally the steps 4 and 5 we will see
10:13
them later
10:24
this part you might remember from the
10:25
tft video
10:27
here we will set some rotation to the
10:30
display and here we are intimating the
10:32
lvgl that the display has been rotated
10:36
the rotation is a parameter of the
10:38
function so we will input it in the main
10:40
file itself
10:42
the next function is the tft flush
10:45
function
10:46
this will basically set the pixels
10:48
according to the data saved in the frame
10:51
buffer
10:52
first it checks for the screen area and
10:54
if everything is all right we go next
10:57
as i mentioned earlier because of the
11:00
low memory available i am going to flush
11:02
one row at a time
11:04
so for every one row we store the column
11:07
data into the frame buffer
11:09
i tried flushing a single pixel at a
11:11
time but as expected the entire process
11:14
was very slow
11:16
if you have enough memory you can store
11:18
all the data into the frame buffer
11:20
itself
11:22
we can even use the dma 2d feature of
11:24
the st which is available in some
11:27
microcontrollers
11:29
i will put all these different methods
11:31
on the github soon but for now let's
11:33
just go with flushing one row at a time
11:36
after saving the row data into the frame
11:39
buffer i am calling the function fill
11:41
frame buffer
11:42
this function will set the pixels as per
11:45
the data in the frame buffer
11:47
the implementation of this function is
11:49
very simple
11:51
actually i took the function fill
11:53
rectangle and modified it a little
11:56
so instead of flushing the entire
11:58
rectangle it flushes one row only
12:05
once we have finished flushing all the
12:07
rows we will call the function lv
12:09
display flush ready
12:11
of course the flashing is a bit more
12:13
complicated than this and it involves
12:15
flush callback and other things but this
12:18
here is the simplest implementation
12:21
if you guys want another video of
12:23
showing lvgl on a more sophisticated
12:26
controller like h series mcu which will
12:29
show the use of dma also and how we can
12:32
use the different ways of flushing the
12:34
frame buffer to the display
12:36
let me know in the comments
12:39
or if you have low memory available on
12:41
the controller go ahead with this one
12:44
next we need to include a timer for the
12:46
lvgl and therefore we will make some
12:49
modifications in the interrupt file
12:57
here in the systick handler call the
12:59
function lv tick ink and pass the value
13:02
1 to indicate 1 millisecond
13:15
this is it for the setup now let's write
13:18
the main code
13:24
inside the main function call the lv
13:27
init function
13:33
now initialize the display i am setting
13:35
the rotation to 3.
13:38
give some delay so that everything is
13:40
initialized properly
13:42
now for the demonstration purpose i will
13:45
use one of the examples provided in the
13:47
library itself
13:55
let's use the animated example
13:58
i am using this animation 2 example
14:07
call it once in the main function
14:12
now inside the while loop call the
14:14
function lv task handler and also use
14:18
some small delay
14:22
let's build it
14:27
everything seems ok so far also check
14:30
the ram and flash usage
14:32
using animated example takes more memory
14:35
of course
14:36
let's run the project now
15:01
you can see the animation playing on the
15:03
display
15:04
this example is provided by the lvgl by
15:07
default and it works perfectly
15:10
now i will show one more thing where i
15:13
will print a counter on the display
15:23
we can look for the examples in the text
15:25
area widget section
15:40
let's try this one simple text area
15:44
we don't need to add the button event
15:46
handler
15:51
copy this part and we will modify this
15:54
later
16:06
first we are creating the text area
16:09
then setting the text area to display in
16:11
one line only
16:13
this is the alignment of the text area
16:18
let's change it to center
16:24
remove the event callback
16:34
delete this also as we don't need this
16:37
part
16:38
i am removing all the button related
16:40
code too
16:50
let's check some other functions
16:51
available for text area
16:59
add text is used to add the text where
17:01
the cursor is pointing
17:05
set text can be used to set the text in
17:08
the text area
17:10
it replaces everything and put the text
17:12
from the beginning
17:14
let's use this set text function
17:17
the object name is t-a and the text we
17:20
want to display is hello world
17:33
uncomment this and call the function we
17:36
just created
17:56
seems like this function is already
17:58
defined in the examples
18:05
let's rename this and try again
18:20
everything seems good so far so flash
18:23
the code to the board
18:40
you can see the lcd
18:42
displaying the hello world in a text box
18:46
now i will implement the counter
18:48
create a variable which can increment
18:54
let's add another function to update the
18:56
text on the display
18:58
we need to utilize the object so the
19:00
object must have been defined globally
19:07
define one buffer which can hold the
19:09
string format for the counter
19:16
now we will use the s printf to convert
19:18
the number to the string and store the
19:21
string into the buffer we created
19:23
increment the index variable
19:26
and finally use the settext function to
19:29
set the text in the object
19:31
we will call this update text function
19:33
in the while loop so that the new
19:35
counter value can update on the display
19:38
all right let's build and flash the code
19:41
to the board
20:01
you can see the counter is updating
20:04
so everything is working pretty fine
20:07
you can use other examples test them and
20:10
modify them according to your
20:12
requirement
20:13
i will try to update the touch interface
20:16
to this library and update the code on
20:18
github also let me know in the comments
20:21
if you want to see the lvgl integration
20:24
in more advanced controllers like h7
20:26
series which can use dma or the entire
20:29
frame buffer in one flush
20:32
this is it for the video
20:34
you can download the code from the link
20:36
in the description
20:38
keep an eye on the github for the update
20:40
regarding the touch interface
20:43
that's all for now
20:45
keep watching and have a nice day ahead
20:50
[Music]
21:03
you
#Engineering & Technology
#Programming
#Software