Up next in 10
LVGL on Riverdi STM32-H7 Embedded Display || How to implement & build UI
8 views
Oct 21, 2023
Purchase the Products shown in this video from :: https://riverdi.com/product-category/stm32-embedded-displays/?pr=26938 ________________________________________________________________________________________ LVGL PART 2 :::: https://youtu.be/314AZlk_MZc Riverdi STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8ghdUXJkp6eMQ5p8tYhj-Xc9 Download the External Loader from :::: https://drive.google.com/file/d/1gUB85dc3E_Zvk4OEqkr0zDT_mvIauKXg/view?usp=share_link LVGL STM32 Series Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8ghGES4CUTjHTn_G4gly_atz STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8gga7xeUUJ-bRUbeChfTOOBd DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/lvgl-on-riverdi-stm32-h7-display/ ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech
View Video Transcript
0:10
[Music]
0:17
hello and welcome to controllers Tech
0:20
today I brought to you yet another video
0:23
on the rivy SDM 32 embedded display this
0:27
time I have the 7in H7 based display and
0:30
we are going to see how to use the lvgl
0:33
on these rivid
0:34
displays I have already covered the
0:36
rivid SDM 32 H7 based 10in display and
0:41
SDM 32 u5 based 5 in display if you
0:45
think the first one is too big for your
0:47
application and the second is too small
0:50
then this 7in display will just fit your
0:54
requirement despite having a 7-in screen
0:57
it has a pretty high resolution of 1,000
1:00
24x 600
1:02
pixels the display is built on the SDM
1:05
32h 757 micro controller which has 2 MB
1:09
of Flash and 1 mbte Ram other than that
1:13
rivid also provides a 64 megab of quad
1:16
SBI Flash and a 8 MB of SD ram the
1:21
display supports all the H7 based
1:23
peripherals and they are pre-initialized
1:26
when the code is
1:27
generated we already know the
1:30
capabilities of the SDM 32 H7 mcus and
1:34
these rivy SDM 32 embedded displays have
1:37
those capabilities along with a stunning
1:39
display design and smaller form
1:41
factor let's see the display in
1:45
person here you can see the 7-in screen
1:48
on the front the back of the display
1:51
contains the ports for different
1:52
peripherals with the SDM 32 MCU at the
1:56
center of it we have the port for rs23
1:59
32 and a port for
2:03
rs485 on the top we have a USB port and
2:06
a power port to supply the power we have
2:10
a swd port for connecting the SD Link at
2:14
the bottom we have the port for haptic
2:16
feedback and two FD comp
2:19
ports we have a 40 pin expansion
2:21
connector which can be used to interface
2:24
other peripherals like SBI i2c uart ADC
2:29
Etc
2:30
we also have the connector for the
2:32
ethernet
2:33
module we can connect the poe module the
2:37
power over ethernet module from rivid
2:40
itself I will cover the ethernet using
2:43
this Poe module in the next video of the
2:46
rivy
2:47
series we also have a micro SD card
2:50
holder and a coin battery
2:53
holder we also have a rivy bus connector
2:56
which can be used to connect the
2:58
external display
3:00
I am using a 12vs 1 amps adapter to
3:03
power the
3:04
board here you can see I have connected
3:07
the adapter pins to the pin one and pin
3:09
six of the power
3:11
connector let's power the board
3:26
now I have loaded the lvgl music demo
3:29
into it you can see the animation and
3:33
the response of the display in this
3:50
demo now let's connect the SD link to
3:53
the S swd
3:58
port
4:12
you can purchase the display from their
4:14
official website
4:15
itself you can also customize the
4:18
display as the
4:20
requirement they also provide the
4:22
documents like the display drawing the
4:24
3D file
4:26
Etc let's open the data sheet
4:37
as mentioned here the display can
4:39
support a wide range of voltages between
4:41
6 Vols to 48
4:43
Vols I am using a 12vs 1 amps adapter to
4:47
power the
4:49
board here is the pinout for the power
4:52
port and I am using the pin one and pin
4:55
six to power this display we have the
4:58
pinouts for all the ports available on
5:00
the board like USB RS 232 485 FD can Etc
5:07
if you are connecting another SD link
5:09
you need to connect all the pins
5:11
mentioned here to their respective pins
5:13
on the SD
5:17
link here we have the expansion Port
5:20
which has the pins for different
5:21
peripherals and IOS as I mentioned in
5:25
the beginning today's video is about
5:27
implementing the lvgl on this display
5:30
recently rivy has created some new
5:33
repositories with lvgl for their
5:37
displays let's download the zip for the
5:40
7in
5:44
display the lvgl folder is inside the
5:48
middleware folder but we need to
5:50
download the lvgl directory separately I
5:54
have mentioned in my previous lvgl
5:57
videos that we will be using version 8
5:59
.3 in this series this is to ensure that
6:03
we can work with the square line studio
6:06
so let's download version
6:08
8.3 let's extract the downloaded
6:17
files open the rivy folder middleware
6:21
third party
6:23
lvgl here you can see the lvgl folder
6:26
along with the configuration file the
6:29
folder is empty and here we will copy
6:32
the lvgl directory we downloaded
6:35
separately rename the folder to lvgl and
6:39
copy it to the location all right
6:42
everything is set so let's open the ID
6:44
and import the rivid lvgl project into
6:54
it here you can see the project
6:57
structure we have the L vgl folder with
7:00
content inside it just like the rest of
7:03
the rivy projects we have seen here also
7:06
all the peripherals are pre-initialized
7:11
here is the main file let's build the
7:15
project and we will load it to the board
7:19
I am not changing anything we will load
7:21
the default project un modified there
7:24
are no errors so let's open the Run
7:27
configuration to flash the project
7:30
there is no configuration provided in
7:32
the project let's create a new
7:34
configuration by double clicking here go
7:38
to the debugger Tab and scroll down to
7:41
external loaders the loader is not
7:44
present in the project folder so we need
7:46
to manually copy it it uses the same MCU
7:50
as the 10-in display so if you have the
7:53
loader from that project you can use the
7:55
same loader if you don't have the loader
7:58
I will leave the link to the loader in
8:00
the description below click add to add
8:03
the loader I already have the loader
8:06
file now locate the loader and click
8:10
Okay now click apply to save the
8:13
configuration and click run to flash the
8:15
project to the
8:17
board the project has been loaded to the
8:21
board you can see the display showing
8:24
the default demo widgets the touch
8:27
response is pretty good just like the
8:30
other displays from rivid the animations
8:33
are smooth and you can see despite being
8:35
lightweight the lvgl is as capable as
8:38
any other graphic Library out
8:55
there let's quickly take a look at the
8:58
display port file
9:00
I have already shown in my previous lvgl
9:03
videos that this file is used to link
9:05
the display drivers to the lvgl drivers
9:08
they are using a single buffer to flush
9:10
64 rows at a time here is the buffer
9:15
initialization then register the display
9:18
and set the dimensions in the
9:20
lvgl the flush callback is set to
9:23
display flush function the dma 2 is
9:26
being used with the transfer finished
9:28
callback set to flush complete function
9:31
this is the flush complete call back
9:33
function which gets called once the dma2
9:36
finishes the
9:37
transfer here we notify the lvgl that we
9:40
are ready for the next transfer by
9:43
calling the function flush ready then we
9:46
have the display flush function which is
9:48
used to flush the content to the display
9:52
I have shown its implementation in the
9:54
previous lvgl videos where we used the
9:57
dma to send the data to the IL Li
10:00
9341 rivy here uses the dma2 to send the
10:04
data to the display frame buffer dma2 is
10:08
generally used for the memory to memory
10:10
data transfer and hence if the LCD frame
10:13
buffer lies in the internal or external
10:15
RAM you can use it for the
10:18
transfer this is the source address
10:20
which is the color data we need to
10:23
send and the destination address is set
10:26
here they are actually retrieving the
10:29
frame buffer address from the ltdc
10:32
itself if you check the ltdc
10:35
initialization you can see the frame
10:37
buffer address is set to D million hex
10:40
which is the start address of the SD ram
10:43
so the dma2 is transferring the data
10:45
from the SRAM 1 to the SD ram lvgl used
10:50
to provide the functions to transfer the
10:52
data via dma2 but recently they have
10:55
made it a bit more
10:57
complicated hence the rivi is using a
10:59
direct approach here by directly using
11:02
the registers to do so you can check the
11:05
dma2 registers to understand the values
11:09
set for each
11:10
register the display is a RGB
11:14
8888 so each pixel uses four bytes in
11:17
the
11:17
memory this makes the buffer size for 64
11:20
rows equal to 256
11:24
bytes the buffer is currently stored in
11:26
the D1 Ram but you can store it in the
11:29
D2 Ram also by setting the appropriate
11:32
attribute to it let's take a look at the
11:35
main
11:36
file here you can see after the lvgl
11:39
initialization the widgets demo is being
11:42
loaded which you just saw running on the
11:44
display let's comment it out and we will
11:47
run the Benchmark to see the display
11:50
capability we need to include the
11:53
Benchmark header file
11:55
Also let's build and Flash the code to
11:57
the board
12:09
I am fast forwarding this
12:21
part you can see the results here I got
12:25
the weighted FPS at 98 which was around
12:28
15 when I did the same for the I
12:31
9341 you can see more details about the
12:34
Benchmark by scrolling the list all
12:37
right we are going to build the G using
12:39
the square line studio so let's open the
12:48
app click create select desktop and then
12:52
select the eclipse on PC let's set a new
12:56
folder for the project give some snake
12:59
to the project the screen resolution is
13:03
1,024 by 600 pixels the color depth is
13:08
32bit the lvgl version is
13:13
8.3.3 let's set the Dark theme click
13:16
create to create the project we have the
13:20
screen here with a dark
13:22
background let's add a text area to the
13:27
screen
13:33
I am setting the placeholder text to
13:36
[Music]
13:43
000000 Let's also make the fonts a bit
13:57
bigger
14:05
let's set a slider also you can style
14:09
the components as per your need there
14:11
are a lot of styling options
14:27
here you can click on the play mode to
14:30
see simulation of the
14:33
screen the slider range is set from 0 to
14:37
100 so I am not modifying it what I want
14:40
to achieve is when the slider reports a
14:43
new value it should be displayed in the
14:45
text area also we will set a pwm output
14:49
pin in the cube MX the slider value can
14:53
vary from 0 to 100 so this change will
14:56
also reflect in the duty cycle of the p
14:58
pwm signal we will measure this change
15:02
with a logic analyzer click on the
15:05
slider and add an event the event name
15:08
is event one and it will be triggered
15:10
when the slider value is
15:12
changed here we will call a new function
15:15
slider changed which we will write later
15:18
in the ID click on file and go to
15:21
Project
15:22
settings we need to create a new folder
15:25
where the exported files will be saved
15:28
we also need to provide the path the
15:31
lvgl header file this is the same as how
15:34
we have included in the project fil so
15:40
far all right now click on export and
15:44
Export the UI
15:47
files the UI files are stored in the
15:49
folder that we set
15:53
earlier we will copy this folder inside
15:56
our project folder I am keep keeping it
15:59
beside the lvgl itself since the lvgl
16:02
folder is already included in the path
16:05
we don't need to include the UI folder
16:08
separately here in the UI screen source
16:10
file you can see all the components we
16:13
added has been
16:18
initialized to add the UI to the display
16:21
we need to First include the UI header
16:23
file in the main
16:27
file and after the lvgl initialization
16:30
is over initialize the UI let's build
16:33
the code
16:37
now we have an error in the inclusion
16:40
here actually it should have been the
16:43
uiui
16:44
Doh let's build it again there is
16:48
another error about the
16:49
fonts actually these fonts are not
16:52
initialized by default so we need to
16:54
initialize them manually you can
16:57
initialize them in the the lvgl
16:59
configuration file by setting the value
17:02
to one all right now we don't have any
17:05
errors so let's flash it to the
17:09
board here the UI has been loaded to the
17:12
display the slider is responding pretty
17:15
well the value in the text area is not
17:18
updating yet as we haven't written the
17:20
code for the same all right we set an
17:23
event in the UI which calls the function
17:25
slider changed when the slider value is
17:28
Chang changed this function can be found
17:31
in the event source file and here we
17:33
will write the code for whatever we want
17:35
to do with this value before we proceed
17:38
with this let's open the Cub MX so that
17:41
we can set the pwm output pin I am going
17:45
to use the timer one channel one to
17:47
Output the pwm wave this is connected to
17:51
the pin
17:52
pk1 let's see the timer one
17:56
configuration the channel one is already
17:58
already configured in the pwm mode and
18:01
you can see the pin pk1 is the pwm
18:04
output pin if you check the clock
18:07
section and hover on the APB one timer
18:10
clock you can see that it is the timer
18:12
one output clock right now is at 240
18:17
mahz let's set the prescaler to 96 which
18:21
will reduce the timer one clock to 2.5
18:24
MHz I am setting the auto reload value
18:27
to 100
18:28
and this will further reduce the timer
18:30
clock to 25
18:32
khz also note that the auto reload of
18:35
100 also corresponds to the 100% duty
18:39
cycle the duty is calculated out of 100
18:43
so each value in the compare register
18:45
will act as
18:46
percentage I am leaving the rest of the
18:49
configuration to default click save to
18:52
generate the
18:53
project here I have a six pin connector
18:57
but I am only going to use use one pin
18:59
on it the pwm pin is pin number 11 on
19:03
the expansion
19:08
connector here I am connecting the PIN
19:11
to the logic analyzer input so that we
19:14
can measure the pwm
19:18
signal all right after initializing the
19:21
UI start the timer in the pwm mode I am
19:26
using timer one channel one
19:30
now we will edit the event source file
19:33
include the main header file and the
19:35
standard Dio header
19:40
file Define a character array to store
19:43
four characters this is where we will
19:46
store the slider value after converting
19:48
it to the character format now once the
19:51
slider value is changed the function
19:53
slider changed will be called here we
19:56
will first read the slider a value and
19:59
store it in the variable value now use
20:02
the S printf to convert and store the
20:04
data in the character
20:09
format let's set the buffer to the text
20:12
area so that it can display the slider's
20:15
value also we will set the slider's
20:18
value to the capture compare register of
20:20
the timer one this will change the duty
20:23
cycle of the pwm signal let's build the
20:26
code now I am going to use the logic
20:29
analyzer to measure the pwm signal so
20:32
let's open the software there are no
20:35
errors so Flash the code to the
20:50
board we are getting the output on the
20:53
analyzer let's change the
20:57
slider
21:02
you can see the width of the signal is
21:04
varying as per the slider's
21:08
value the slider is set at 42 right now
21:13
and here the width of the signal is also
21:22
42% now the slider is at
21:25
76 and we got the same width on the
21:27
analy
21:28
2 so the pwm signal Duty percentage
21:32
changes with the slider's value our code
21:35
is working fine here let me add one led
21:39
to see its brightness change as we move
21:41
the slider I have connected a 100 ohm
21:45
resistor between the LED and ground I
21:48
took the ground pin from the power
21:50
connector itself the positive terminal
21:53
of the LED is connected to the pwm
21:57
PIN
21:59
let's move the slider
22:02
now you can see the LED brightness
22:05
changes as we move the slider the
22:08
voltage of the pwm pin varies between 0
22:11
to 3.3 volts as the slider value changes
22:14
from 0 to 100 this is why the brightness
22:18
is changing so we got the lvgl to work
22:22
on the rivid SDM 32 embedded display we
22:26
made the UI using the square line Studio
22:29
modified the project from Cub MX and
22:31
flashed the entire project using the
22:33
cube ID itself you can purchase this
22:37
display from the rivy website itself
22:40
check out more documents for the display
22:43
you can even customize the order as per
22:45
your need this is it for the video let
22:48
me know what you think about lvgl versus
22:51
touch gfx on these SDM 32 embedded
22:55
displays the link to download the code
22:57
is in the description of this video keep
23:01
watching and have a nice day
23:23
ahead
#Consumer Electronics
#Electronics & Electrical