Up next in 10
Buttons on Nextion Display || STM32 || Control LED
0 views
Sep 8, 2020
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ NEXTION PART2 :::: https://youtu.be/90fT-ljWod4 NEXTION PART4 :::: https://youtu.be/2OLpirqJ-ds Nextion STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8ghpqVWBqwpZ7Z5v5ZtmF_Yy STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8gga7xeUUJ-bRUbeChfTOOBd DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/wp-content/uploads/2020/08/NEXTION_BUTTONS_LED_F4.zip ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech *******Join the Membership******* https://www.youtube.com/channel/UCkdqtSMnhYuMsJkyHOxiPZQ/join
View Video Transcript
0:12
[Music]
0:19
hello
0:20
everyone welcome to controllers tech
0:24
this is another video in the next ian
0:26
display series
0:28
and today we will see how to use buttons
0:32
on the display
0:34
how to get the input from the display
0:36
and use it to control the led on the mcu
0:40
let's start with the next ian editor
0:42
first
0:44
create a new project here i will fast
0:48
forward through the initial setup you
0:50
can check out previous videos if you
0:52
don't understand it
1:08
[Music]
1:09
now for the background i will use a
1:12
picture
1:14
you need to first add the picture to the
1:16
library and then select it from here
1:24
now add a button to the display i am
1:28
going to add one more
1:36
this is button b0 and it will show the
1:39
text
1:40
on
1:52
you can modify its look like change the
1:54
background color
1:56
or text color anything you want
1:59
this is button b1 and the text shown
2:02
will be
2:06
off
2:10
now pay attention to this window here
2:13
this is basically touch event and we can
2:15
configure
2:16
what the button should send when we
2:18
press it
2:20
this is the release event it sends the
2:22
configured data
2:23
on the release of the button i am
2:26
selecting the component id
2:28
to see what it actually sends when we
2:30
press it
2:32
let's compile this we got some
2:35
positioning
2:36
error these buttons are a bit out of the
2:39
display bound
2:46
now everything is fine let's debug
2:50
this here you can see when the button
2:53
was released
2:54
it sent some hexadecimal codes
2:58
here the first byte is start byte then
3:00
page number
3:01
then button id then its value and then
3:04
we have the end sequence
3:07
note that button id for the on button is
3:10
0.02
3:12
similarly when the off button is
3:14
released it sent the same sequence
3:17
except the button id 0 cross 0 3.
3:21
we can work with that default code also
3:23
but it's better
3:24
if we define our own string sequence
3:31
first of all i wanted to send some start
3:34
character
3:36
you can use any start character
3:42
next it should send the page number
3:46
this will be handy when we will work
3:48
with multiple pages
3:50
next it should send the button id
3:54
print s is to indicate that it should
3:56
send the string format for the button id
4:00
p0 is the button object id is the id
4:04
and comma 1 means the id should be 1
4:06
character long
4:08
and in the end we will send some
4:11
terminating character
4:13
i will put the same code in the off
4:15
button and make some necessary changes
4:18
like change the button object
4:25
let's compile and debug it to see what
4:28
output will we get
4:40
so here we have the start character the
4:42
page number
4:43
the button id and the end character
4:50
you can see the same output from the off
4:52
button
4:53
this type of string format is easier to
4:56
work with
4:56
as we already know what to expect from
4:59
the buttons
5:00
let's upload this to our nextion display
5:09
i am using the ttl method to upload this
5:12
code
5:14
you can see that the usb to serial
5:16
device is connected to com4
5:19
i have already shown this in the
5:21
previous videos
5:23
connections will be as shown in the
5:25
picture
5:35
so the uploading is done
5:41
now let's go to the cube id and create a
5:44
project for this
5:52
i am using stm32f446re
6:06
first of all i am selecting external
6:08
crystal for the main clock
6:11
i will connect the display to uart4
6:14
make sure that you select the board rate
6:16
of 9600
6:18
it won't work with other board rates
6:22
also enable the interrupt and in the end
6:25
i will show you how can we use interrupt
6:27
for this entire process
6:34
let's go to the clock setup i have 8
6:37
megahertz hse
6:39
crystal and i want the clock to run at
6:41
maximum frequency
6:48
let's enable the led also as we need to
6:51
toggle it using the buttons
7:05
so here is our main file first of all i
7:09
am creating an array to store four bytes
7:16
i am using four bytes because that's
7:18
what the button is going to send
7:20
when we press and release it
7:28
now in the while loop let's receive four
7:30
bytes of data from the uart
7:37
i am giving one second timeout in case
7:40
if the data is not received
7:43
this received data will be stored in rx
7:45
data array
7:47
as you can see the sequence of bytes
7:50
first byte is start character
7:52
second is page number and the third byte
7:55
is the button id
8:02
when i press and release the on button
8:05
it sends its id
8:06
which is 2 and the off buttons id is 3.
8:14
so we will check the third byte in the
8:16
array
8:19
if the third byte is two this will turn
8:22
the led on
8:32
similarly if the third byte is three it
8:35
will turn the led off
8:41
let's build this code we don't have any
8:44
errors
8:45
so let's flash it
8:51
you can see the display have the same
8:53
background and the buttons too
8:57
when i release the on button the led
8:59
turns on
9:00
and when i release the off button led
9:03
turns off
9:13
notice here that it works with release
9:16
and not with the press
9:17
as we programmed it to do
9:26
let's go back to our next ian editor now
9:30
there is one more type of button
9:32
available that is
9:33
dual state button basically
9:36
it have two different states on and off
9:41
let's give some string on this button
9:56
again we will write the custom code for
9:59
the touch release event
10:05
object name is bt 0.
10:11
i will keep the start character and the
10:14
page number same as earlier
10:16
here again we want the button to send
10:18
the id and along with the id
10:21
it should send the value also
10:37
let's debug it to see the output
10:52
as you can see the button id is 4
10:55
and the value is 1. this means that the
10:58
button is in state 1.
11:01
the rest of the values are same as
11:03
before
11:04
if i press it again it sends a new value
11:07
that is zero
11:08
indicating its new state
11:16
now our data is 5 bytes long for the
11:18
dual state button
11:19
so i will add some dummy character here
11:21
too
11:23
this way we will have to only look for 5
11:25
bytes
11:26
and it will be easier to program the
11:28
reception
11:29
[Music]
11:34
let's upload the new program to the
11:40
display
11:42
so it's done let's go back to the cube
11:46
id
11:46
now
11:50
resize the array to 5 bytes
11:57
i will just add new code to this one
12:06
[Music]
12:09
if the button id is 4 that means the
12:11
dual state button is pressed
12:14
now we will look for the value
12:22
if the value is zero the led will turn
12:25
off
12:25
and if the value is one the led will
12:28
turn on
12:42
let's flash it to the mcu
12:53
[Music]
13:04
you can see all three buttons working
13:07
perfectly
13:19
as i mentioned in the beginning i will
13:21
also show
13:22
how to use it with the interrupt so that
13:25
we don't have to wait for the data to
13:27
arrive
13:28
hall you aren't receive it will use the
13:31
interrupt to receive the five bytes of
13:33
data
13:34
once the five bytes are received rx
13:37
complete callback function will be
13:39
called
13:40
and that's where we will write the rest
13:41
of the program
13:45
just copy these all operations inside
13:48
the callback function
13:50
also make sure that you call the receive
13:52
it function in the end of the callback
13:56
let's delete it as it's not needed
13:58
anymore
14:00
you can perform some other operations in
14:02
the while loop
14:04
it's time to build and flash
14:11
you can see the things are working as
14:13
they should
14:19
this is it for the video i hope you
14:22
understood it
14:24
you can do more with these buttons like
14:26
modifying their background
14:28
their fonts or even more
14:36
i will leave the link for the code and
14:38
the hmi file
14:39
in the description in the next video
14:43
we will see some graphics goodbye for
14:46
now
14:48
keep watching and have a nice day