Up next in 10
Touch GFX #5. How to Send UART data to GUI || Sample from Interrupt
Mar 25, 2023
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ TouchGFX PART4 :::: https://youtu.be/tK3jP5GIeHU TouchGFX PART6 :::: https://youtu.be/RJlwEMCTgsM TouchGFX Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8giOsk-C4BCOwSHtbXqTNb1W STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8gga7xeUUJ-bRUbeChfTOOBd DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/touchgfx-5-data-from-uart-to-ui/ ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech *******Join the Membership******* https://www.youtube.com/channel/UCkdqtSMnhYuMsJkyHOxiPZQ/join
View Video Transcript
0:00
foreign
0:01
[Music]
0:04
Tech
0:06
[Music]
0:12
this is the fifth video in the stm32
0:15
touch gfx series and today we will see
0:18
how to send the uart data to the UI
0:21
I have already covered how we can sample
0:23
from a GUI task from the interrupt and
0:26
from another task and display the data
0:29
on the UI
0:30
this video is kind of an extension to
0:33
what we did so far
0:34
so far the data we sent consists of only
0:37
numbers and it was easier to send them
0:39
in a queue but the data received from
0:42
the uart will be a set of characters
0:44
words or sentences so using a simple
0:47
queue won't be possible
0:49
I have covered the queues in my rtos
0:52
video series where I covered the simple
0:54
queue and the structured cue
0:57
today we will use this structured queue
1:00
to send the data to the GUI
1:02
we will see them in a while let's start
1:05
the touch gfx and create a new project
1:08
I am using my usual F750 Discovery board
1:13
give some name to the project and click
1:16
create
1:17
first of all we will add a background
1:19
image to the UI
1:24
I just want to display the uart data so
1:27
let's add a text area to this screen
1:30
make sure you uncheck the auto size and
1:33
now adjust the text area as per your
1:35
requirement
1:38
the data is going to be received from
1:40
the uart so we need to add a wildcard
1:43
here
1:44
I am going to receive a maximum of 256
1:47
characters at once so set the wildcard
1:50
buffer at one higher than that
1:57
now go to text typographies
2:00
here I am making the font a little bit
2:02
bold
2:07
Now define the wildcard range
2:11
20 to 7e hexa covers all the useful
2:13
ASCII characters
2:15
this is it for the GUI setup let's
2:18
generate the code now
2:23
go to file project folder Cube ID and
2:27
open the project in Cube IDE
2:30
let's make some changes in the ioc file
2:33
first
2:35
the uart one is already enabled
2:39
the pins used are pa9 and pb7
2:43
here in the schematics you can see the
2:45
pin pa9 is the virtual com TX pin and
2:49
pv7 is the RX pin
2:52
since it's already selected I don't need
2:54
to enable the uart
2:56
so I am just going to enable the
2:59
interrupt for the uart one
3:01
now we need to add a queue to transfer
3:03
the data to the GUI task
3:08
so go to free rtos tasks and cues and
3:13
add a queue
3:14
since data from the uart is not going to
3:16
come at a very high rate two elements
3:19
are enough
3:20
I am setting the element size as integer
3:22
for now but we will change it later in
3:25
the code
3:26
this is it for the cube MX click save to
3:29
generate the project
3:32
let's build the code once
3:39
all right let's create an array to store
3:42
the data received from the uart
3:57
now when the default task runs for the
3:59
first time we will call the function
4:01
received to idle in the interrupt mode
4:04
it is necessary that you call this
4:06
function after the kernel has started as
4:09
we will be using the queue related
4:10
functions in the interrupt Handler
4:13
receive to idle will receive the uart
4:15
data until an idle line arrives and when
4:18
it does it triggers an interrupt
4:21
the interrupt will call the Callback
4:24
function RX event callback
4:28
before we go ahead and write the
4:30
Callback let's define our structure for
4:32
the queue
4:34
I am defining it in the main header file
4:36
so that it can be linked to the touch
4:38
gfx files also
4:41
the structure will have two members an
4:43
integer variable to store the size of
4:45
the data and a character array to
4:47
contain the data itself
4:50
now in the main file Define a pointer to
4:53
the uart data structure
4:57
let's write the Callback function now
5:01
here the size variable is the size of
5:04
the data we receive from the uart
5:07
let's write a terminating character to
5:09
represent the end of the data
5:11
now we will send the data to the queue
5:15
OS message getspace Returns the space
5:17
available in the queue we will only send
5:20
the data if there is some space in the
5:22
queue
5:23
first copy the data stored in the RX
5:26
data variable to our pointer to the
5:28
structure
5:29
since there is one additional byte the
5:32
size will be size Plus 1.
5:35
Now update the size member of the
5:37
structure
5:38
now send the structure using the OS
5:41
message put function
5:43
the message pointer will be the address
5:45
of the pointer we created
5:47
I am keeping the priority and time out
5:50
to zero
5:51
this means the function will only send
5:54
the data to the queue if it has some
5:55
space in it
5:57
since the hall disables the interrupt
5:59
after a single trigger call the same
6:02
function to re-initialize it
6:04
there is one more step left in the main
6:06
file
6:07
the uart Q we created using the cube MX
6:11
still has integer size as the size of
6:14
each element
6:15
so update it to the size of the
6:17
structure
6:25
looks like a spelling mistake here
6:29
also we need to include the string
6:31
header file for string copy function
6:34
let me type cast this to character
6:36
pointer 2.
6:38
so we have successfully sent the data to
6:41
the queue now we need to receive it
6:44
the data will be received in the model
6:46
tick function so let's open the model
6:48
source file
6:50
we will start with the header inclusion
6:52
first
6:56
include the main.h and cmsys2.h
7:02
now we need to define the uartq
7:14
let's also Define a new pointer to the
7:17
uart's data struct it will be used to
7:20
receive the data from the queue
7:22
now in the model header file Define an
7:25
array where the received data will be
7:27
stored
7:30
all right let's write the tick function
7:33
to receive the data
7:35
OS message get count Returns the number
7:38
of messages in the queue
7:40
if there is some message we will receive
7:43
it using the function OS message get
7:46
the message pointer will be the address
7:48
of the pointer to the uart data
7:50
structure
7:51
If the message is received successfully
7:53
the function returns OS okay
7:56
here we will again copy the data from
7:59
the structure to the array we created
8:01
and finally the model listener will call
8:04
the function uart data in the presenter
8:07
the pointer to the array will be passed
8:09
as the parameter to this function
8:12
this function is not defined yet so we
8:15
will first Define it in the model
8:16
listener header file
8:18
and then Define it in the presenter
8:20
header file
8:23
now in the presenter source file the
8:26
same function will be called in The View
8:30
so Define the function in the view
8:32
header file and we will finally write it
8:35
in the view source file
8:41
here we will use the string copy
8:43
function as the uart data contains only
8:46
characters and we can directly display
8:48
it on the UI
8:50
so we will copy the data from the
8:52
parameter to the text area buffer and
8:55
finally validate the text area so for
8:58
the changes to take effect
9:00
if you want to enable the word wrap you
9:03
need to add one more line here
9:05
we will set the white text action and we
9:08
will set it to word wrap
9:11
so this is it let's build the code now
9:19
I forgot to close this definition here
9:22
also we need to include the C string for
9:25
the string copy function
9:30
the code builds fine so let's flash it
9:33
to the board
9:38
I am using the Hercules serial monitor
9:41
to send the data via the uart
9:43
[Music]
9:55
foreign
9:57
[Music]
9:59
foreign
10:05
[Music]
10:14
just fine
10:16
let's send some big data to check the
10:19
word wrap
10:22
it is working fine too
10:24
let me send a big paragraph now
10:36
since the total characters are more than
10:39
256 the data was received in two parts
10:42
and you can see the second half of it
10:45
let me delete a few characters
10:49
[Music]
10:58
now it displays fine
11:01
so you saw how we received the data from
11:03
the uart and then sent it to the GUI
11:05
task using the structured queue this is
11:08
it for this video
11:10
I hope you understood how to display the
11:13
uart data on the UI I will continue with
11:16
the touch gfx series and we'll cover
11:19
some more elements in upcoming videos
11:22
you can download the code from the link
11:24
in the description
11:26
leave comments in case of any doubt
11:29
keep watching and have a nice day ahead