Up next in 10
How to Communicate with STONE HMI Display via the UART
1 views
Aug 9, 2022
Purchase the Products shown in this video from::: https://store.stoneitech.com/ ________________________________________________________________________________ Getting Started with Stone HMI Display :: https://youtu.be/wo9yeyiAUFc ________________________________________________________________________________ ******* 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 Follow me on Instagram https://www.instagram.com/controllerstech/ For more info, visit https://www.controllerstech.com
View Video Transcript
0:01
[Music]
0:09
hello and welcome to controllers tech
0:13
few months ago we covered a video about
0:15
getting started with the stone display
0:19
recently they contacted me and they
0:20
wanted to go further with the tutorial
0:23
on interfacing this display with a
0:25
microcontroller
0:27
so we will be continuing with this
0:29
series for a couple of more videos
0:32
i decided to go with the stm32 first and
0:35
later i'll make more videos for arduino
0:38
and esp32 also
0:41
since i need to do some basic
0:42
explanation first like what exactly do
0:45
we get in the output when we press a
0:47
button or what data do we need to send
0:49
in order for it to be displayed on the
0:51
lcd
0:53
so i have decided to make an
0:54
introductory video which will cover some
0:57
basics about the data formatting of this
0:59
h-m-i display
1:01
this video is not related to any
1:03
microcontroller but it's purely based on
1:06
how we can control the display using the
1:08
uart
1:10
once you get the sense of it we will
1:12
start covering the microcontrollers one
1:14
by one
1:16
let's start with the video now
1:19
if you remember in the end of the
1:21
previous video we discussed using the
1:23
instruction sets to interface a
1:25
microcontroller with this display
1:28
well we will take a look at that part
1:29
again but in a more detail and more
1:32
practical way
1:34
here is the picture of the pcb board
1:36
that comes along with this display and
1:39
you can see the connection
1:41
it is the same as we had in the previous
1:44
video 2.
1:45
the lcd basically communicates in the rs
1:49
232 format but then we have the max 2 32
1:52
chip on this board which will do the
1:54
conversion to the ttl format
1:58
i have connected the mini usb between
2:00
this board and the computer and you can
2:02
see the com13 in the device manager
2:06
let's start the video and we will make a
2:08
new project with the stone designer
2:11
by the way the software is not available
2:14
on their website so you have to email
2:16
them and hopefully they will send it to
2:19
you
2:20
go to the project select the new project
2:24
give the name to the project select
2:27
project folder select screen size keep
2:30
the board rate to 11 5 200 and click
2:33
create
2:38
on the desktop here i have two buttons
2:40
and a background image which is resized
2:43
to fit the display
2:45
to add the images to the project under
2:47
the resources click on the image tab
2:50
then click add and select the images you
2:52
want to add
2:54
i have all the images in the png format
3:00
here all the images are included in the
3:03
project now
3:05
to add the background image we can drag
3:07
and drop the image on the display
3:10
let me set the coordinates so that it
3:13
fits the display properly
3:19
not much of the configuration is needed
3:21
here just in the background image
3:23
section select the image
3:29
all right now we can see the image
3:32
next we will add the buttons to the
3:34
display
3:42
if you note here the button size is 1 64
3:45
by 1 64.
3:52
we will also use the same size for the
3:54
button
4:05
the button has different states but
4:07
first we will configure the normal state
4:10
the name of this button is button 1 the
4:13
text on the button will be on and let's
4:15
use the default fonts
4:21
the font color will be white and the
4:23
font size is 32.
4:29
choose the background image for the
4:31
button and we will make the background
4:33
transparent
4:41
all right let's adjust the margin a
4:43
little
4:49
the button still has a border around it
4:52
so i am making it transparent
4:54
this was the setting for the normal mode
4:57
and when we press this button it's going
4:59
to look like this
5:01
of course we don't want this and we will
5:04
keep it similar to how it looked in the
5:05
normal mode
5:07
so that means we need to configure
5:09
everything again so the button doesn't
5:11
change when it's being pressed
5:14
except for the fact that i am giving a
5:16
little bit of extra margin from the
5:18
bottom
5:19
this makes the text shift a little
5:20
upwards and it will give us the feel of
5:23
pressing the button
5:24
so we have configured the on button and
5:27
now we need to do the same for the off
5:29
button
5:30
but since i don't want to go through the
5:32
entire process again we can just copy
5:35
this and paste
5:36
and here we have a copy of the on button
5:39
now we will modify this a little and
5:42
make it look like an off button
5:50
so the on button is the copy and the off
5:52
button is the original one
5:54
all right now let's give some decent
5:56
names to these buttons as these names
5:59
are going to be a very important part of
6:01
our code
6:02
for simplicity i want to keep the names
6:05
in a way that the length remains same
6:07
for both
6:08
this will make it easier for us in the
6:10
programming part
6:12
of course we can use names with
6:14
different lengths but you will see the
6:16
advantage of this when we will write the
6:18
code for the microcontroller
6:21
so the led01 is for the on button and
6:24
the led002 is for the off button
6:27
on pressing these button the display
6:29
will send the data via the uart
6:33
now let's add one more element which can
6:35
display the data that it will receive
6:37
from the uart
6:39
label is the element which is used to
6:42
print some string or a value on this
6:44
display
6:46
a little bit of configuration is needed
6:48
here
6:55
all right everything is done
6:58
now save the project and then click
7:00
debug download and now we will choose
7:04
the project folder
7:06
the project has been saved
7:08
now we need to copy the project into the
7:11
display so go to the project folder
7:13
there you will see this default folder
7:17
copy this and paste it in the mass
7:19
storage folder of the stone display
7:28
this is it now we just need to reset the
7:31
display but before that let's open the
7:33
serial monitor
7:35
the usb is connected to com 13.
7:39
let's also open the instruction set
7:42
this is instruction set 1.5 and you can
7:46
get it from the support page under the
7:48
user manual
7:53
this will help us with the understanding
7:55
of how the data is transmitted between
7:57
the mcu and the display
8:00
here is how the mcu needs to send the
8:03
data to the display
8:05
the data must consist of the frame
8:06
header then the data itself and the
8:09
frame tail in the end
8:11
similarly when the display sends the
8:14
data to the mcu it sends the header then
8:17
the command then the length of the data
8:19
then the data itself followed by the
8:21
frame tail and two bytes of crc
8:25
we will see this in working in a while
8:32
all right let's reset the module now
8:48
the new project is loaded successfully
8:51
all right let's click the on button
8:57
you can see some weird characters on the
8:59
serial monitor
9:01
let's change this data to hex
9:04
now we have a better understanding of
9:06
what has been received and we will
9:08
understand it more through the
9:09
instruction set manual
9:14
let's check the button section
9:16
here you can see the format for the
9:18
button response
9:21
if we change the data back to the ascii
9:23
format we can see something similar on
9:25
the monitor
9:27
the first 3 bytes are the frame header
9:29
and then we have the data starting with
9:32
1 0 0 1.
9:34
everything has been explained in detail
9:37
like this particular instruction
9:39
represents the system key delivery
9:42
here we have the same
9:44
the next 2 bytes represent the length of
9:47
the data which is the combination of the
9:49
widget name and its value
9:52
in our case we have the length of 6
9:54
bytes
9:55
this is the length of the widget name
9:58
and its value
10:00
as per the data we received the widget's
10:02
name is led01 which is 5 bytes and 1
10:06
byte is for the value
10:09
the value of the widget is 1.
10:16
then we have the next 3 bytes for the
10:18
frame tail which will be the same for
10:20
everything
10:22
and finally the last 2 bytes for the crc
10:26
this completes one data frame when the
10:29
button is pressed
10:31
but soon after pressing the button we
10:33
released it and that's why we have
10:35
another data frame which consists of
10:37
exactly the same format except the value
10:40
here is 2.
10:42
so when we press the button the value is
10:45
1 and when we release it the value is 2.
10:49
this completes the button click event
10:52
so if i keep the button in pressed state
10:55
1 complete frame will be transmitted and
10:57
you can see the value is 1.
11:00
and when i release this button another
11:02
frame is transmitted with the value 2.
11:06
if we press the off button exactly the
11:09
same thing will happen but this time the
11:11
button name is led02
11:14
basically when we will interface this
11:16
with our microcontroller we will look
11:18
for these button names and based on what
11:21
button was clicked we will change the
11:23
state of the led
11:27
now let's do the label
11:35
the label can be used to print the text
11:37
on the display or print some value
11:41
we will try both but let's start with
11:44
the text
11:45
this here is the data frame we need to
11:47
send in order to print the text on the
11:50
label
11:51
before we send this data frame let's
11:54
understand this
11:57
we start with the frame header followed
12:00
by the command code which is set text
12:03
since we want to print the text
12:05
then we have the type of the element
12:07
which is the label in our case then the
12:10
name of the widget followed by what text
12:13
you want to print
12:14
and finally the frame tail to indicate
12:17
the end of the data
12:19
we have the widget name as label 1 the
12:22
one we input while creating the label
12:25
this here will be the text that will be
12:27
printed on the label
12:29
press send to send the data to the
12:31
display
12:33
you can see the text printed on the
12:35
display
12:36
the buttons work as usual without any
12:38
issues
12:40
let's print hello world instead
12:50
just like text we can directly print the
12:53
numerical values
12:57
let's change this to label 1 and send
13:00
this
13:02
here we have the value printed on the
13:04
display
13:13
so we saw what data the display sends
13:15
when we press the buttons on it and what
13:17
data do we need to send in order to
13:19
display some text or value on it
13:22
we will utilize this information when we
13:25
will interface this with our micro
13:26
controller
13:28
we will continue with the stm 32 first
13:31
and then later move to e esp32 and
13:34
finally arduino
13:36
this is it for today's video
13:39
i hope you understood how the display
13:41
uses the uart to communicate
13:44
the video for the stm32 will come out
13:47
very soon
13:49
leave comments in case of any doubt
13:52
keep watching and have a nice day ahead
13:57
[Music]
14:06
so
14:08
[Music]