Up next in 10
Numbers, Floats, QR Code, HotSpots in Nextion Display || STM32
0 views
Apr 4, 2021
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ NEXTION PART6 :::: https://youtu.be/0_CT1EXXBK4 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/2021/04/TUT_NEXION_NUM_QR.zip ________________________________________________________________________________________ ******* 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
View Video Transcript
0:17
hello
0:18
everyone welcome to another video in
0:21
nextion display series
0:24
today i will cover the remaining
0:25
features in the next ian display
0:27
and that would be sending numbers
0:30
sending floats
0:31
hotspots and finally the qr code
0:35
so let's start by creating the project
0:37
in nextion editor
0:42
give some name to this file and select
0:45
the display type
0:48
i will use the vertical orientation
0:50
today
0:55
let's add one more page to make it more
0:57
interesting
1:02
we will add the hotspot first and i am
1:05
going to turn the entire display into a
1:07
hotspot
1:08
so basically i can touch anywhere on
1:10
this display
1:13
and what happens when we touch this
1:15
hotspot
1:18
well we will make it send its id
1:24
let's test this quickly
1:29
as you can see it's sending 0 1 when we
1:32
touch it
1:34
we will make use of it when we write the
1:36
program
1:38
let's go to page 1 and add one more
1:40
hotspot here
1:45
now we can't make it send its id again
1:47
or else we won't be able to
1:49
differentiate which one of them is
1:51
sending the value 1.
1:53
so we will make it send zero to
1:57
let's test it too
2:01
this is that first page and it's sending
2:03
a one
2:05
by the way to change the page just type
2:08
page
2:09
and space followed by the page number
2:12
and we are on page 1 now as you can see
2:16
it's ending
2:16
2 followed by some zeros
2:20
but we will program the microcontroller
2:22
to receive only one byte from the uart
2:24
so we will be getting two from this page
2:28
this completes the hotspot setup
2:33
now on the page zero i am going to add
2:35
the blocks for the number
2:37
and the float
2:48
we need to add some fonts also
2:51
i have already created them in my
2:53
previous videos
2:55
but anyway you can create the fonts from
3:02
here
3:05
now you can see the default values that
3:07
is zero
3:17
the number value is a sign 32-bit
3:20
integer
3:21
and you can see the limit for the values
3:28
you can also change the format to other
3:30
than decimal values
3:34
now about the float values as you can
3:38
see here
3:38
the value is again a 32-bit signed
3:41
integer
3:43
this means we can't directly write the
3:44
float values into the display
3:47
but we need to send the integer value
3:49
instead
3:50
this parameter vvs1 decides the position
3:54
of the decimal point
3:56
if i change this to 2 see the decimal
3:59
point has been shifted to 2 places
4:03
and yes this is the key to write float
4:06
values
4:07
let's test these
4:11
first i will write the number and you
4:14
can see it's being displayed
4:16
now let's write to the float as you can
4:19
see
4:20
it's displaying with two decimal places
4:24
and if i change the values of the vvs1
4:27
the decimal place shifts respectively
4:30
i hope you understood how these things
4:32
are going to work
4:38
now let's go to page 1 and add the qr
4:41
code
4:56
here we have the text field which the qr
4:59
code will respond to
5:02
and this is the maximum length of the
5:04
characters let's increase it to 50.
5:07
now remember one very important thing
5:10
as you see on the right some fields are
5:13
green
5:14
and the rest are black the green fields
5:17
are the ones
5:18
whose values can be modified during the
5:20
run time
5:22
but the black fields should be fixed
5:24
before loading the code into the display
5:27
this means that we can't modify this
5:29
length field
5:30
once it is set but we can modify the
5:34
text anytime
5:36
so this is it now let's upload this to
5:38
our display
5:40
i am using uart to do the uploading
5:43
it's finished successfully now let's go
5:47
to the cube ide and create a new project
5:56
i will be using f446re
6:00
give some name to this and click finish
6:06
in the cube mx first of all i am setting
6:09
the crystal for the clock
6:13
here i have eight megahertz crystal and
6:15
i want the controller to run at 180
6:18
megahertz
6:23
i am going to use uart4 to transfer data
6:26
to the nextion
6:30
set the board rate at 9600.
6:34
let's enable the uart interrupt also
6:37
this is because we will be receiving
6:39
data from the next ian display
6:41
and it's better to receive it in the
6:43
interrupt mode
6:45
click save to generate the project
6:52
let's start writing the program now
6:55
let's create a function to send the
6:57
number to the display
7:00
the parameters are the object name and a
7:02
32-bit signed integer
7:04
that you want to send create a buffer to
7:08
store the string that we will send
7:13
now s printf will copy the data into the
7:16
buffer
7:19
we will be sending the value field
7:26
the value field is the value of the
7:27
number and the object name is
7:29
n0 for this number block
7:40
and now we will use the whole uart
7:42
transmit to send the buffer to the
7:56
display
7:58
these end commands will be sent after
8:00
every data to indicate the end of data
8:03
transfer
8:04
so send the end commands to indicate the
8:07
end of transfer
8:11
and finally free the memory from the
8:13
buffer
8:17
similarly this is the function to send
8:19
the float to the display
8:29
here as you can see the float also
8:32
accepts the 32-bit integer as the value
8:36
and v-v-s-1 sets the decimal places
8:40
we will make certain changes in this
8:42
function so that this function can take
8:45
the float value as the parameter
8:47
but of course you have to specify the
8:50
decimal places you need in that value
8:53
here first of all we will convert the
8:55
float to the integer
8:57
by multiplying with 10 to the power of
8:59
the decimal places
9:07
then we will send to the display how
9:10
many decimal places we need
9:17
this can be done by updating this vvs1
9:20
field
9:23
and we will send this buffer to the
9:25
display
9:27
now send the actual number by using the
9:29
same steps
9:30
but instead of vvs1 we will be sending
9:33
the value field
9:35
before going any further let's test this
9:38
much part
9:39
first we have a lot of warnings
9:42
because we haven't included the
9:43
libraries
9:45
here you can see the id is asking us to
9:48
include all these
9:52
we still have three warnings
9:55
this is because s printf accepts the
9:57
character array
9:59
so we can typecast it here
10:08
so we are good now in the main function
10:12
let's send the number first the object
10:15
name is n
10:16
0 and the value is one two three four
10:19
five
10:19
six seven eight similarly in the float
10:23
function
10:23
the object name is x zero and input some
10:27
float value
10:28
i am looking for three decimal places
10:35
let's run it now
10:48
you can see the values are being
10:49
displayed in their respective positions
10:53
the float value is not so accurate
10:56
as we are not taking any drastic
10:58
measures for high accuracy
11:00
i will advise you to not use very high
11:02
values in float
11:04
keep your values in 7 digits and it will
11:07
work well
11:09
now i am changing the decimal places to
11:11
2.
11:13
and you can see it reflects on the
11:14
display
11:16
so this part is fine
11:23
let's write another function for the qr
11:26
code
11:27
here also the parameter will be the
11:29
object name
11:31
and the pointer to the string that you
11:33
want the qr code for
11:35
we will use the same format like the
11:40
others
11:44
here instead of value field we have the
11:46
text field
12:08
now we need to receive data also
12:11
to do that we will use the interrupt and
12:14
once the data is received
12:16
the interrupt callback will be called
12:28
let's define a variable to store the
12:30
received data
12:33
inside the callback function we will
12:35
first check if the data received is from
12:37
the first hotspot
12:38
or from the second hotspot
12:44
if it is from the first hotspot which is
12:47
on page zero
12:48
we will send the command to go to the
12:50
page one
13:00
now remember that we have to send the
13:02
end commands also
13:04
to indicate the end of transfer
13:07
similarly if the received
13:08
data is from second hotspot we will go
13:11
to the page zero
13:13
inside the main function call the uart
13:16
receive it
13:17
and receive only one byte since this
13:20
pre-generated code disables the
13:22
interrupt after each execution
13:24
we need to put it in the callback
13:26
function also to manually enable it
13:28
again
13:30
okay let's check if the hotspots are
13:32
working
13:40
as you can see when i am touching the
13:42
empty space
13:43
which is the hot spot the pages are
13:45
changing
13:47
so everything is fine till now
13:54
now let's take it to the next level
13:58
define some variables
14:05
we will update these variables inside
14:07
the while loop
14:08
and then send them to the display
14:19
this process will repeat every 500
14:21
milliseconds
14:26
let's run it again
14:37
you can see the values are updating but
14:39
the float is updating really fast
14:44
let's modify this a little more in the
14:47
callback function
14:48
i am resetting their values
14:56
before the while loop begins let's send
14:58
some string to the qr also
15:22
now it is perfect
15:28
the hotspots are working well the values
15:32
are also resetting whenever we move
15:34
between the pages
15:36
so i tried to test the qr code and it's
15:39
not working
15:41
after debugging a little more i have
15:43
found that we need to do some correction
15:45
in our code
15:47
let's see it right now we are on the
15:50
page zero
15:51
and if we send the string to the qr it
15:54
is returning the error
15:56
so let's go to the page 1 and now send
16:00
the string
16:01
you can see it's updated so this means
16:05
that
16:05
before sending the string to the qr we
16:08
need to be on the page
16:09
that have the qr also the string should
16:13
be in the double quote
16:15
and before sending this string we need
16:18
to go to the page 1.
16:34
do
16:37
let's run it now
16:42
i am using my phone to scan the code
16:49
and you can see the string here so the
16:52
qr code works well
16:55
you can enter any string here and it not
16:58
necessarily needs to be a website
17:01
just remember to go to the page where
17:03
the qr code is
17:06
this is basically it for the next ian
17:08
display
17:09
i will make one or two more videos about
17:11
multiple page menu
17:13
or some fancy buttons but this is it for
17:16
the feature related videos
17:18
i have the basic model and it only
17:20
supports these features
17:23
if you want any other type of video on
17:25
the next ian
17:26
let me know in the comment section i
17:29
will try to cover it too
17:32
this is it for this video i hope the
17:35
things were clear
17:37
you can download the code from the
17:39
description
17:41
keep watching and have a nice day ahead