Up next in 10
NEXTION GUAGE and PROGRESS BAR || STM32
0 views
Dec 13, 2020
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ NEXTION PART5 :::: https://youtu.be/gsF8nstpJQ8 NEXTION PART7 :::: https://youtu.be/c_svhAuk5mw 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/12/GAUGE.zip ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech *******Join the Membership******* https://www.youtube.com/channel/UCkdqtSMnhYuMsJkyHOxiPZQ/join
View Video Transcript
0:18
[Music]
0:26
hello
0:26
everyone welcome to controllers tech
0:31
today in this video we will see how to
0:33
use
0:34
gauge and progress bar on nextion
0:36
display
0:40
let's start by creating the project in
0:42
next ian editor
0:44
first
0:49
create the project folder here
0:53
give some name and click save
0:56
select your nextion model and select the
1:00
display orientation here
1:05
first of all we need to download a gauge
1:07
background
1:09
let's google for some
1:26
this one seems good for our job
1:29
let's go to this website
1:35
this is 600 by 600 pixels and it's
1:39
perfect
1:40
let's download it we need to reduce its
1:44
size so it can fit the display
1:47
let's open it with
1:52
i have the height here as 240 pixels
1:56
so i will reduce it to the same size
1:59
go to image scale image and reduce the
2:02
size here
2:10
[Music]
2:11
let's export it in the same png format
2:14
[Music]
2:21
i am going to create a background now
2:24
the size should be same as the display
2:27
size
2:28
and add that image as a layer here
2:40
[Music]
2:42
i am going to keep a progress bar on the
2:44
left here
2:49
let's export this final image
3:12
we need to add the image to our project
3:23
add the image box to the display and
3:26
include the gauge image
3:33
so this will be our background on the
3:35
display
3:37
let's add a progress bar
3:47
i am going to select the vertical type
4:10
now at the gauge
4:18
if you don't want this white background
4:20
select the background as cropped image
4:27
and select the same image that is in the
4:40
background
4:43
let's change that pointer color and its
4:54
thickness
4:57
adjust it also try with different values
5:00
to check if the pointer fits the gauge
5:13
[Music]
5:20
okay it's perfect fit now let's add the
5:23
number box to this
5:26
use the cropped image as the background
5:39
we also need to add fonts here
5:42
you can generate them if you don't have
5:47
[Music]
5:50
let's try and put a value to see if it
5:52
fits the number box
5:59
great it fits perfectly
6:07
[Music]
6:11
let's test some values on the gauge here
6:20
[Music]
6:26
we don't want the pointer to go here
6:28
[Music]
6:31
so 315 indicates the minimum value on
6:35
the gauge
6:41
but remember this gauge can only rotate
6:43
between 0 to 360.
6:47
if i try to go higher than 360
6:50
it will simply not take that value this
6:53
360 and zero are the same positions
6:58
let's try to look for the highest value
7:02
[Music]
7:11
so 225 is the maximum value we can have
7:16
keeping that in mind let's create the
7:18
project with cube id
7:20
[Music]
7:29
i am using stm32f446re controller
7:34
give some name to the project and click
7:36
finish
7:43
first of all i am selecting the external
7:45
crystal for the clock
7:53
i will be connecting the display to the
7:55
uart4
7:57
make sure you keep the board rate to
8:00
9600
8:06
let's do the clock setup now
8:12
i have eight megahertz oscillator and i
8:14
want the system to run at maximum clock
8:21
click save to generate the project now
8:36
let's first define the end commands
8:38
these must be sent after every command
8:41
to the nextion
8:42
[Music]
8:44
create a function to send the value to
8:46
the gauge
8:55
here first define a buffer to hold some
8:58
values
9:02
now copy the data to be sent into the
9:06
buffer
9:14
and now we will send the buffer to the
9:16
uart
9:17
[Music]
9:20
and finally send the end commands
9:24
let's build it once
9:34
we need to include s t d i o for the s
9:37
printf
9:38
function now if you remember that the
9:41
initial value for the gauge was 315
9:45
so we will add 315 to every value
9:50
and since the gauge can have the maximum
9:52
value of 360
9:54
if the value is higher than 360 we will
9:57
subtract 360 from the value
10:08
now another function to send the data to
10:10
the number box
10:17
we basically have the same data here
10:27
the same steps for sending the data to
10:29
the progress bar
10:30
also basically you can just create a
10:34
single function for all these values
10:42
now in the while loop we will send the
10:44
values to all the elements
10:47
i am using 270 because that's the limit
10:50
for my gauge setup
10:53
first i will send it to the gauge
10:56
the object name is z0 and the value
10:59
field is
11:12
val
11:23
next send to the number
11:26
here the object field is n 0 and the
11:29
value field is val
11:49
now before sending the value to the
11:51
progress bar i am going to modify the
11:54
color of the bar
11:55
based on the value colors will vary from
11:58
green
11:59
to yellow to orange to red based on the
12:02
value
12:04
if the value is less than 160 we will
12:07
send
12:07
2016 to this field
12:15
the object name for the bar is j0 and
12:18
the color field is pco
12:21
2016 is the code for the green color
12:24
here you can get different codes for the
12:27
different colors
12:29
and then based on different values we
12:31
will send the command to change the
12:33
color of the bar
12:40
now we will convert the value to the
12:42
percentage so that we can send it to the
12:45
progress bar
12:55
and finally send the value to the value
12:58
filed in the progress bar
13:09
i will add a small delay here
13:23
we need to upload this to the nextion
13:25
display first
13:37
i have connected the display to the ftdi
13:40
which is connected to com4
13:46
let's start the upload
13:53
you can see the data is being written to
13:55
the display
13:59
and we are done and the images are
14:01
loaded successfully
14:05
let's upload the code to the board too
14:20
here we go
14:28
this flickering effect remains with the
14:30
default gauge
14:32
if you want to remove it you need to
14:34
make your own gauge with different set
14:37
of pictures
14:38
i will do that in another video
14:52
we can also simulate the gauge in the
14:54
editor
14:55
but for that we need to send the serial
14:57
data to the computer
14:59
and in my nucleo board i have to use
15:01
uart 2 for that purpose
15:13
and i will change these uart4 to you
15:15
arc2
15:24
in the editor select the debugging and
15:26
select user mcu input
15:32
select the com port and press start
15:41
now i will load the code into the board
15:45
you can see it's pretty smooth here
15:47
compared to the actual display
16:04
[Music]
16:10
[Music]
16:18
[Music]
16:24
[Music]
16:37
let me just reduce the delay to 10
16:39
milliseconds
16:44
[Music]
16:49
yes it's a bit faster now
16:57
this is it for this video i hope you
17:00
enjoyed it
17:02
you can download the code and the gauge
17:05
file from the link in the description
17:08
keep watching and have a nice day ahead
17:19
you
#Multimedia Software
#Programming