Up next in 10
LVGL on STM32 - PART 6 || How to store Assets into External Flash || QSPI
2 views
May 11, 2024
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ LVGL STM32 PART 5 :::: https://youtu.be/0--7qFmWZMQ LVGL STM32 PART 7 :::: https://youtu.be/i20WndTTlgA LVGL STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8ghGES4CUTjHTn_G4gly_atz STM32 QSPI Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8ggM_4kmzQF4JAStU4lN07z3 STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8gga7xeUUJ-bRUbeChfTOOBd DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/lvgl-on-stm32-part-6/ ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech *******Join the Membership*******
View Video Transcript
0:01
[Music]
0:09
hello and welcome to controller Tech as
0:12
the title says in this video we will
0:15
cover how to utilize the external flash
0:17
memory along with the
0:19
lvgl we will use the qsp to interface
0:22
the external flash memory which will be
0:25
used to store the assets used in the
0:27
lvgl I have already covered a few videos
0:30
on lvgl with SDM 32 and you can assume
0:34
this video as the continuation in that
0:36
series itself I have also covered a few
0:39
videos in the qsp series where we saw
0:42
how to perform read write erase and even
0:46
how to create an external loader to
0:48
write the data into the external flash
0:51
memory this video will not explain much
0:53
about the qbi rather we will focus on
0:56
integration with the
0:58
lvgl in the previous video we saw how to
1:02
use the lvgl with the fsmc display and
1:05
we will continue with the same project
1:08
today let's build the code to confirm
1:10
everything is fine all right we now need
1:14
to enable the qbi peripheral in the Cub
1:16
MX so let's open the ioc
1:20
file here you can see the schematic of
1:22
the discovery board I am using it
1:26
already has a quad SBI flash memory
1:28
attached to it
1:30
I am going to configure the pins as per
1:32
this setup let's enable quad SBI bank
1:36
one with quad SBI
1:38
lines I have enabled bank one because
1:41
that is how the actual Hardware is
1:43
connected to the
1:45
MCU the four data pins are connected to
1:48
pf6 7 8 and
1:51
9 let's configure this pf7 to the quad
1:54
SBI
1:56
io2 pin pb2 is connected to the clock
1:59
and pg6 is the Cs pin let's configure
2:03
the pin pb2 as the quad SBI clock and
2:06
the pin pg6 is already configured as the
2:09
Cs pin let's configure the quad SBI
2:13
parameters now the system is running at
2:16
100 MHz and this flash memory does
2:19
support the transfer rate more than 100
2:22
MHz anyway I am setting the prescaler to
2:25
one so the quad SBI clock will be
2:28
reduced to 50 MHz
2:31
let's set the fifo threshold to four
2:33
this is as per the instructions
2:35
explained in my qbi
2:38
tutorial the sample shifting is by half
2:41
cycle next is The Flash
2:44
size this is the formula to calculate
2:47
the flash
2:48
size the size is 21 for 32 megabits
2:52
memory so it will be 22 for the 64
2:55
megabits and 23 for the 128 megabits
3:00
let's set the flash size to 23 as I have
3:03
128 megabits of flash memory we also
3:08
need to check the box to generate
3:09
separate files for C and
3:12
H go to pin settings and make sure all
3:15
the pins are configured at maximum
3:18
speed if they are not then you can
3:21
select all pins scroll down and set the
3:24
speed to maximum here all right now go
3:28
to the project manager code generator
3:30
check the box to generate separate
3:33
files that is all we need to configure
3:36
click save to generate the
3:38
project I have already explained how to
3:41
proceed from here we need to copy the
3:44
quad SBI Library files to the file
3:47
generated by the Cub
3:49
MX you can get these files from the SD's
3:52
GitHub page
3:54
itself I already have the file from my
3:56
test project so I will use the function
3:59
from it let's copy the required data
4:02
from the files into our project files
4:41
here the flash size is defined for the
4:44
128 megabits memory I got these files
4:48
from the SD's quad SBI project for the
4:51
f412 discovery board I have already made
4:55
videos covering the famous w25 Q Series
4:58
in the qbi mode mode so you can also use
5:01
it anyway I will make a video soon
5:04
covering the lvgl with w25 Q flash where
5:08
we will load the entire lvgl from the
5:10
external flash itself we will quickly
5:13
test if everything is working fine let's
5:16
initialize the CSP quad SBI and then put
5:20
the memory in the memory mapped mode in
5:23
this mode the MCU will see the external
5:26
flash memory as an internal memory and
5:28
we can directly perform memory
5:31
operations let's modify the flash scrip
5:34
file now here is the internal flash
5:37
already defined so I will copy it and
5:40
modify it for the external flash memory
5:43
I'm naming it qbi with origin address at
5:47
90 million hex and the size is 16
5:50
MB now let's define a memory region
5:54
where we will relocate our data this
5:56
memory region should be in the qbi which
5:59
we defined just
6:05
now all right now I am defining a buffer
6:08
which will be relocated to the external
6:11
flash we will do this by adding a
6:13
section attribute which will point to
6:15
the same location that we defined in the
6:17
flash
6:20
script now perform a read operation to
6:23
check if everything is working fine
6:26
let's build the project now here you you
6:29
can see the qbi memory is being shown in
6:32
the memory detailed tab if it does not
6:35
get updated you can click this refresh
6:38
button to update it or if you want the
6:41
ID to update it automatically after each
6:43
build go to the ID
6:45
settings then expand the SDM 32 Cube
6:49
section and click on build views
6:52
settings here set this to Auto and click
6:55
save to save this
6:57
configuration you must click on either
6:59
the main file or the source folder for
7:02
it to get updated all right let's debug
7:05
the project to check if it is
7:09
working open the memory Tab and add the
7:12
new memory location 90 million
7:17
hex I am going to set a break point here
7:20
at the memory mapped mode statement we
7:23
have hit the break point and you can see
7:26
that the memory content is not being
7:28
displayed let's step over this statement
7:32
the memory mapped mode is now enabled
7:35
and you can see content of the memory
7:37
now we still don't have the data we
7:39
defined and that is because I forgot to
7:42
add the external loader to the debug
7:45
configuration it is necessary to write
7:47
new data to the flash memory let's add
7:50
the external loader to our debug
7:53
configuration I am using the F 412g
7:57
Discovery board and here is the load of
7:59
for the same if you have a custom board
8:02
you can check out my video in the qbi
8:05
series explaining the external loader
8:08
all right let's debug the project again
8:11
here I am adding the breakpoint again
8:15
there is no data being shown right now
8:18
once we step over this statement we have
8:21
the data we defined so the memory mapped
8:24
mode is working fine and we can now
8:26
utilize it to store the lvgl assets the
8:29
external flash here is the previous
8:32
project we worked on the Square line
8:35
Studio I am going to add a few images to
8:38
this project and a button will be used
8:41
to cycle between the images I already
8:44
have four images of the required
8:46
resolution in the Ping format let's add
8:49
these images into the
8:54
Assets Now click the image widget to add
8:57
the image and under the asset section
8:59
select the image repeat the process to
9:02
add other images as
9:13
well now add the button to the end so
9:16
that it will be displayed on top of all
9:18
the images let me rename the images
9:21
starting from 1 to
9:27
four now we have all four images visible
9:30
but they are on top of each other to
9:33
display only one image at a time we need
9:36
to hide other images click on the image
9:39
that you want to hide then click on
9:41
flags and check the hidden flag the
9:45
image is Now hidden we will hide three
9:47
images so that when the screen turns on
9:50
we at least have one image in the
9:52
background during runtime we will modify
9:56
this hidden flag to change the
9:57
visibility of all these images is when
10:00
the button is clicked an event will
10:02
trigger and here we will call the
10:04
function button clicked we will write
10:07
this function in the ID itself all right
10:10
that is all we need to do with the
10:12
studio click save to save the project
10:16
now click export to export the UI files
10:20
we now need to copy the UI folder
10:22
generated to our project
10:34
now refresh the project once and you
10:36
should see the updated UI folder inside
10:38
the
10:46
drivers here you can see the image data
10:49
in the hex format for the respective
10:51
images let's open the event source file
10:54
to write the button call back function
10:57
these functions are from the previous
10:59
project so let me remove them let's
11:02
include the main file and Define an
11:04
integer to keep track of the button
11:06
count when the button is clicked we will
11:09
increment the num variable if the
11:12
variable is two we need to show the
11:14
image two the image one is already
11:18
loaded with the screen so we need to
11:20
hide it also LV object clear flag is
11:24
used to clear any set flag from the
11:26
object we need to clear the hidden flag
11:29
flag so that the image can be shown on
11:31
the screen the object name is UI image 2
11:35
and the flag we are looking for is flag
11:38
hidden so clearing the hidden flag will
11:40
show image two and now we will add the
11:43
hidden flag to image
11:51
one when the button is clicked again the
11:54
num variable will increment three and
11:57
now we will show image three and hide
12:00
image
12:07
two similarly when the num variable is
12:11
four we will show image four and hide
12:13
image three if the variable is one we
12:17
will show image one and hide image
12:24
4 since we have only four Images we need
12:27
to reset the variable to zero here or
12:30
else it will increment to five in the
12:32
next click that is all let's build the
12:36
project now here you can see the flash
12:39
occupancy is around 780 Koby which is
12:43
too much as this board has 1 mbte of
12:46
flash storage it can accumulate four or
12:49
five images easily but if you have less
12:52
storage like 500 kiloby then you
12:55
definitely need to store the images in
12:57
the external flash
12:59
I will show in a while how to do that
13:03
here in the memory details tab you can
13:05
see each image occupies around 112 Koby
13:09
of memory so four images in total
13:11
occupies 450
13:14
Koby most of the mcus cannot afford this
13:17
much memory for the images and this is
13:20
where the external flash comes in before
13:23
we proceed with the external flash let's
13:26
run the project once so that we can
13:28
compare it with our afterwards when we
13:29
will push the image data to the external
13:32
flash here you can see the screen has
13:35
the background image with the button on
13:37
top when I am pressing the button the
13:40
background images are
13:42
changing everything is working smoothly
13:45
as it is expected from internal
13:48
flash now we will push the images to the
13:51
external flash
13:52
memory earlier we discussed the section
13:55
attribute used to relocate the data to
13:58
the external memory
14:00
we will use this section attribute to
14:02
the image data generated in the UI
14:12
folder you can write this attribute
14:14
anywhere in this definition but it is
14:16
better to write after the lvgl attribute
14:19
itself let's copy it and paste it in the
14:22
other image data as well let's build the
14:26
project again you can see the Flash
14:29
usage has been reduced and instead the
14:31
450 Koby of qbi is
14:35
used even in the memory details you can
14:38
see that the images have been shifted to
14:40
the new
14:45
location let's run this project
14:57
now everything is is working fine with
15:00
external flash
15:01
also the images are loading just as they
15:04
were during the internal
15:06
flash so we got the lvgl assets to load
15:10
from the external flash memory using the
15:13
qbi
15:14
peripheral this method works fine if you
15:17
have the internal flash around more than
15:19
400
15:20
kiloby but if the flash memory is very
15:23
low say around 256 kiloby then even the
15:28
basic lvg L cannot fit into it in such
15:32
cases we need to load the entire lvgl
15:35
from the external
15:37
flash basically we will perform the xip
15:40
execute in place we will cover how to do
15:44
this in the upcoming video with the stdm
15:46
32
15:48
h750 and the w25 Q Series qbi flash
15:53
memory this is it for
15:55
today I hope you understood how to use
15:58
the external flash memory to save images
16:01
used by the
16:02
lvgl you can download the code from the
16:05
link in the
16:07
description leave comments in case of
16:09
any doubt keep watching and have a nice
16:13
day ahead
#Programming