Up next in 10
Riverdi STM32 Display #2. How to control LED using Buttons on the Display
2 views
Jun 3, 2023
Purchase the Products shown in this video from :: https://riverdi.com/product-category/stm32-embedded-displays/?pr=26938 ________________________________________________________________________________________ Riverdi STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8ghdUXJkp6eMQ5p8tYhj-Xc9 STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8gga7xeUUJ-bRUbeChfTOOBd DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/riverdi-stm32-display-2-led-control-using-buttons/ ________________________________________________________________________________________ ******* 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:00
foreign
0:01
[Music]
0:04
Tech
0:06
[Music]
0:12
a lot of you guys requested me to do
0:14
this so here I am today with another
0:17
video on the rivety display
0:20
we will see how to use the button on the
0:23
display to control the LED attached to
0:25
the MCU
0:26
this seems like a very easy topic but if
0:29
you have a rivety display you know how
0:32
challenging it is
0:33
the method I am going to use isn't going
0:35
to be an easy one but it will be a
0:38
universal method for a lot of things
0:40
you can use the same method to display
0:43
the data from uart any sensor pretty
0:46
much anything I have covered so far in
0:48
the touch gfx
0:50
I am using the latest version of the
0:52
touch gfx that is
0:54
4.21.4 but rivety has mentioned that
0:57
they only support the version 4.20
1:01
I have already tested this version and
1:04
it works fine
1:05
although you won't see the bsp folder
1:08
generated like it used to generate on
1:10
the version 20.
1:12
I am not going to use any BSB replated
1:15
files so this is fine with me
1:18
here I am creating a new project with
1:21
the rivety display
1:23
first of all I am adding a background
1:25
image to this project
1:27
I already have a
1:30
1280x800 ping image for the background
1:34
let's add a text area to display the LED
1:37
status
1:39
I don't want the auto size
1:42
choose the alignment the typography
1:45
Etc
1:48
now go to text typography and add the
1:52
wildcard range to this typography
2:00
we will use the wildcard for the text
2:03
area and the buffer size will be 10
2:05
bytes
2:14
the default status for the LED is set to
2:17
off
2:18
now let's add the buttons to turn the
2:20
LED on and off
2:22
I am using the flex button so that I can
2:25
resize it as per my need
2:28
I will modify this button to look a
2:30
little more attractive so under the
2:32
visual element click add and select icon
2:36
now in the icon option we will add some
2:38
button icon to our button
2:41
I am using this Clay theme as it has
2:43
some good circular icons
2:46
the image size should be less than the
2:48
button size
2:50
choose the images for the button
2:52
released and button pressed
2:55
now remove the button with border
2:57
element so that the background is
2:59
removed
3:00
let me adjust the button size so that
3:03
the image fits a little more perfectly
3:06
all right let's name this button as the
3:08
on button
3:10
we need to create one more button the
3:12
off button so we will just copy this
3:15
button and change some things
3:30
now the buttons have been created so we
3:33
will also Define the interactions
3:36
when the on button is clicked it will
3:38
call a new virtual function the on
3:41
clicked
3:42
similarly when the off button is clicked
3:45
the off-clicked function will be called
3:50
that is it for the designing let's
3:52
generate the project now
3:54
open the project in the cube ID
4:03
here is the project structure
4:06
let's take a look at the
4:08
gpio.c file
4:10
here some pins are already configured
4:13
for certain purposes so when you choose
4:15
a certain pin to be an input or output
4:17
pin make sure not to choose from these
4:21
I need one pin to be configured as
4:23
output where I can connect the LED to
4:26
let's quickly see the data sheet to see
4:29
the availability of the pins
4:31
I have this particular display from
4:34
rivity
4:35
here is the link to download the
4:37
datasheet
4:39
all right as you already know we have
4:42
the expansion connector on the display
4:44
which can be used to connect gpio i2c
4:48
SPI
4:50
Etc
4:51
I will use one of the pins from this
4:53
connector to be used as the output pin
4:56
I am going to use this pa5 but this is
4:59
already being used as the DAC pin
5:03
so we need to First disable the
5:05
initialization of this pin as the DAC
5:07
pin and then initialize it as the output
5:10
pin
5:11
here in the DAC source file you can see
5:14
the pin pa5 is being used as the DAC
5:17
output pin
5:19
so go to the main file and comment out
5:22
the DAC initialization function
5:26
now we will initialize the pin in the
5:28
output mode
5:30
if you know the initialization code
5:32
write it or you can refer to the
5:36
gpio.c file
5:38
here this pin is being initialized in
5:40
the output push-pull mode so I will copy
5:43
this part
5:45
let's write a function LED in it
5:51
we also need the definition of
5:53
initialization structure
5:58
also reset the pin before initializing
6:01
it
6:04
now change the gpio port to
6:08
gpioa and the PIN to pin 5.
6:11
make sure the clock for the respective
6:13
Port is enabled if not then enable
6:16
yourself
6:18
now in the main function call the LED
6:21
init function to initialize the LED pin
6:23
as output
6:27
let's build the code once
6:30
we have few warnings but that's all
6:32
right
6:33
as I mentioned in the beginning I will
6:36
use a harder but more common method to
6:38
control this led
6:40
I am going to create a new task to Blink
6:43
the LED and Q to transfer the data from
6:46
GUI to the MCU
6:48
a much better way of approaching this is
6:50
to create a new source file to write our
6:53
code
6:54
this way we will have our code separated
6:56
from the predefined one and whenever
6:58
needed we will only make changes in that
7:01
particular file
7:03
so I am creating a new source file my
7:06
file.c and a new header file my file.h
7:11
now we need to move these files to the
7:14
main project folder where the rest of
7:16
the files are stored open the newly
7:18
created file in the system Explorer
7:21
now we will move these files to a
7:24
different location
7:25
go to the main project folder CM7 core
7:29
source
7:31
move the dot C file here and dot h file
7:34
in the include folder
7:38
now both the files have been removed
7:41
from the IDE
7:42
so we will link the source file to the
7:45
core directory
7:49
make sure you link relative to the
7:51
project location
7:53
now we have the file here and we can
7:55
write it
7:56
we will start with certain inclusions
7:59
so here I have included the main header
8:02
file my file header cmsys OS for the
8:06
rtos
8:07
task header file for the task related
8:10
functions and Q header file for the
8:12
queue related functions
8:14
next we will create a task and a queue
8:17
we need to First create the attributes
8:20
for the task and the queue if you don't
8:23
know the functions for the same you can
8:25
refer to the free
8:27
rtos.c file let's copy the attributes of
8:31
the default task
8:32
now we will change the word default with
8:35
the LED
8:37
so we have the LED task handle and the
8:39
LED task attributes
8:41
now create the attributes for the queue
8:45
let's define the LED Q handle
8:50
the Q attributes just require the name
8:53
parameter
9:03
next we need to create the task and the
9:06
queue let's write a separate function to
9:09
create the LED task
9:17
the start LED task function will be
9:20
defined later
9:21
all right let's create the queue now
9:26
the size of the queue should be one
9:28
element and the element size is the size
9:31
of the integer
9:33
basically this is going to be an integer
9:35
Q with one element this is because we
9:38
only need to transfer with a 1 or a zero
9:41
now we will write the start LED task
9:45
again I am taking the reference from the
9:47
start default task I have covered this
9:50
part in detail in the previous touch gfx
9:53
videos
9:54
we will first check if there is some
9:57
message in the queue
10:03
if there is we will copy the message
10:05
into the variable LED state
10:16
let's define the integral variable LED
10:19
state
10:22
now the LED state will be set as per the
10:25
value of the LED State variable
10:27
this task will run every 10 milliseconds
10:30
but the LED will only set when there is
10:32
some data in the queue that is when the
10:35
button is pressed
10:37
Define the start LED task at the
10:40
beginning
10:41
so we create the task attributes and the
10:44
queue attributes
10:46
then we create the task and the queue
10:49
and in the end we write the task
10:51
function
10:53
we need to Define these initialization
10:55
functions in the my file header file
11:07
now go to the main file
11:10
include the my file header
11:17
and initialize the task and the queue
11:19
after the free rtos initialization
11:22
function
11:31
now we will write the code for the GUI
11:34
open the GUI folder and we will start
11:37
with the screen one view source file
11:40
we have defined the interactions when
11:42
the buttons are clicked so we first need
11:44
to Define these functions in the view
11:46
header file
11:55
now when the on button is pressed the on
11:58
clicked function will be called and here
12:00
we will call the LED control function in
12:02
the presenter and pass the parameter
12:05
true
12:09
we also need to display the LED status
12:11
in the text area so first use the string
12:14
copy function to copy the LED on string
12:16
to the text area buffer and then
12:19
invalidate the text area
12:21
similarly when the off-clicked function
12:23
is called we will pass the force
12:25
parameter to the LED control function
12:27
and update the text area with the string
12:30
LED off
12:31
now we need to define the LED control
12:34
function in the presenter
12:40
here we will call the same function in
12:43
the model and also pass the state as the
12:45
parameter
12:48
we also need to Define this function in
12:51
the presenter header file
12:58
finally we will write the main code in
13:01
the model file
13:10
first include the cmsis OS header file
13:13
so that we can write the Q functions
13:16
include the my file header also
13:22
Now define the ledq handle as the
13:25
external variable
13:32
in the LED control function first check
13:35
if there is some space available in the
13:37
queue
13:41
if it is then put the message in the
13:44
queue
13:45
the message is the state variable that
13:47
is being passed from The View file
13:50
let's build the code now
13:53
we have to Define this in the model
13:55
header file also
14:02
I'll write the code builds fine
14:05
but it will show an error when you flash
14:07
it via the touch gfx so let's fix that
14:10
too
14:11
open the project folder and go to the
14:14
root folder
14:15
here go inside the GCC folder and edit
14:19
the make file for CM7
14:21
scroll down till you see the board C
14:24
files section
14:30
we need to add one more file for the
14:32
compilation
14:34
so add the my file.c here
14:39
save the make file and open the touch
14:42
gfx again
14:44
let's see the simulator first
14:56
the project is running fine on the touch
14:58
gfx so let's flash it to the board
15:10
target has been flashed successfully
15:14
here you can see in logs my file.c was
15:18
also compiled and therefore there was no
15:20
error
15:21
let's see the project working on the
15:24
board
15:37
you can see the LED is responding well
15:40
and the text area is showing the status
15:46
so everything is working well
15:48
I will continue with the rivety display
15:51
and make more videos covering the uart
15:53
and some sensor
15:56
we will continue with this file we
15:58
created today and add more functions to
16:00
it
16:01
this is it for the video
16:04
I hope this video sheds some light on
16:07
how to work with rivety display
16:09
the link to download the code is in the
16:12
description below
16:14
leave comments in case of any doubt
16:17
keep watching and have a nice day ahead