Up next in 10
Touch GFX #3. Send data to UI || Sampling from the GUI task || MVP
9 views
Mar 11, 2023
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ TouchGFX PART2 :::: https://youtu.be/vy1c1LbypuM TouchGFX PART4 :::: https://youtu.be/tK3jP5GIeHU 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-3-sending-data-to-ui-mvp/ ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech *******Join the Membership******* https://www.youtube.com/channel/UCkdqtSMnhYuMsJkyHOxiPZQ/join
View Video Transcript
0:09
[Music]
0:16
hello and welcome to controllers Tech
0:20
I have already made a few videos on the
0:23
touch gfx and among those videos there
0:26
are the ones where I covered the model
0:27
view presenter design pattern
0:30
after some of you pointed out some
0:32
irregularities in those videos I have
0:35
decided to remake them
0:37
I have done more research on this topic
0:39
and now these videos will be as per the
0:42
guidelines provided by the SD itself
0:45
they have also provided some examples on
0:48
how to write the code and these videos I
0:50
am going to make will keep those
0:52
examples in mind
0:54
so today's video is basically the video
0:57
number three in the touch gfx here is
0:59
and today we will cover how to send the
1:02
data from the MCU to the UI
1:04
I have here a PDF explaining the back
1:07
end communication
1:09
for now I will just point out the main
1:11
highlights in this PDF and you can read
1:14
the entire thing later the download link
1:17
is in the description
1:19
as mentioned here the model class has a
1:21
tick function which is called every
1:23
frame and can be implemented to look out
1:26
for events
1:27
the model class also has a pointer to
1:30
the active presenter in order to be able
1:32
to notify the UI of these events
1:35
there are two ways of interfacing with
1:37
the surrounding system either by
1:39
sampling from the GUI task or by
1:42
sampling from another task
1:44
we will cover both these methods but
1:46
today we will see the first one that is
1:49
sampling from the GUI task itself
1:52
if our requirement is not very time
1:55
critical we can directly sample from the
1:57
GUI task
1:59
and to do that we can directly call our
2:02
functions inside the tick function
2:05
we will see this in today's video
2:08
so let's start the touch gfx and create
2:11
a new project
2:13
I am using F750 Discovery board
2:17
give some name to the project and click
2:20
create
2:21
I have here the background image along
2:24
with two more icons to indicate the
2:26
light on and off
2:28
I extracted these icons from the SDS
2:32
examples
2:33
let's add the background image to our
2:35
project
2:37
this is going to be the background image
2:40
now I am adding a second image and this
2:43
will indicate the light is off
2:45
let's change the name of this image to
2:48
light off
2:49
let's add another image the light on
2:52
I am superimposing it on the light off
2:55
image
2:56
change its name to light on
2:59
now disable the visibility for this
3:01
image
3:02
basically when I press the button this
3:05
image will be set visible and it will
3:07
indicate the light is on
3:09
and when the button is released the
3:12
image will not be visible and the light
3:14
off image will show up
3:16
I am adding one text area where I will
3:19
show the ADC value from the
3:21
potentiometer
3:22
I have already explained the text area
3:25
you can check out the video on the top
3:27
right corner
3:29
I am adding a wild card for the ADC
3:31
value
3:33
I want to display the values from 0 to
3:35
100 so 3 bytes are enough
3:38
set the wildcard buffer to one extra
3:41
byte four bytes in this case
3:44
I am using default typography here
3:47
we also need to set the range for
3:50
wildcard characters so go to text
3:52
typography and set the range under the
3:55
typography you are using 20 to 7e hexa
3:58
covers the entire range of useful ASCII
4:01
characters
4:02
this is all the setup we need let's
4:05
generate the code now
4:07
let's first see the simulator if things
4:09
are all fine
4:12
all right everything seems okay here
4:15
now we need to write the code so go to
4:18
files then go to the project folder
4:21
stm32 Cube ID and open the project in
4:24
Cube ID
4:29
here is our main file let's build the
4:32
project once to see if it builds fine
4:36
we need to edit the files in the GUI
4:39
folder and we will start with the model
4:41
first
4:42
as we discussed earlier we will sample
4:45
from the GUI task that is from The Tick
4:48
function itself
4:50
I am going to add a physical button it
4:52
is already present on the board I will
4:55
just enable it in the cube MX
4:57
the button has been grounded by default
4:59
and when clicked it will pull the line
5:01
to vdd
5:05
let's open the cube MX to enable some
5:07
components
5:17
the button is connected to the pin p i11
5:21
let's set it as input
5:23
I am pulling the pin Low by default and
5:26
when pressed it will be pulled High
5:29
let's also configure ADC
5:32
I am using ADC 3 Channel 0. the pin pa0
5:37
will be used as the ADC pin
5:40
the resolution is kept at 12 bits so our
5:43
data will vary between 0 and 4095.
5:47
I am leaving everything else to default
5:50
even the mode is not continuous as we
5:52
will manually do the conversion
5:55
click save to generate the project
5:58
I use the adc3 channel 0 because the pin
6:02
pa0 is available for the physical
6:04
connection on the board
6:12
let's sample the button state in the
6:14
tick function
6:16
here the below code will only run if the
6:19
simulator is not running
6:21
we will first read the pin pi 11. if the
6:25
pin is high the button State variable
6:27
will be set to true
6:31
and if the pin is low the button State
6:34
variable will be set to false
6:38
we will now Define this button State
6:41
variable
6:44
open the model header file and Define
6:47
the Boolean variable here
6:51
now initialize the variable with some
6:54
state in the source file
6:56
this default state will also be used by
6:59
the simulator
7:04
so we have some errors and that is
7:06
because we haven't defined the header
7:08
file for those functions
7:10
let's define the main header file as it
7:13
already contains all the necessary
7:15
headers
7:20
all right now we have to send this
7:22
button state to the UI and that's where
7:24
the MVP design pattern comes in
7:27
the model sends the data to the
7:29
presenter which then sends the data to
7:32
The View
7:33
the view is responsible for displaying
7:35
this data on the UI
7:37
in order to send the data to the
7:39
presenter we will use the pointer which
7:41
is described in the PDF
7:46
this pointer is nothing but the model
7:48
listener
7:51
the model listener will call the
7:53
function set light and pass the button
7:55
State as the argument to the function
7:58
this satellite function is not defined
8:01
yet so we will Define it in the model
8:03
listener header file
8:09
since this function is being called in
8:12
the presenter we also need to Define it
8:14
in the presenter header file
8:20
now in the presenter source file we will
8:23
write the code for this function
8:25
here we will call the same function in
8:28
the view and pass the state as the
8:30
argument of the function
8:32
so again we will Define the function in
8:34
the view header file and then write the
8:37
code in the view source file here as we
8:40
discussed we will toggle the visibility
8:42
of the light on image
8:44
so the state will simply set the
8:46
visibility true or false depending on
8:49
whether the button is pressed or not
8:51
after setting the visibility make sure
8:54
to invalidate the image
8:59
there seems to be some error
9:02
it is because I didn't save the view
9:04
header file so it was unable to find the
9:06
function definition
9:08
keep in mind that you need to save the
9:10
header files manually after making
9:12
modifications the build button does not
9:15
save the header files
9:17
all right everything is good so far
9:19
let's quickly see if the simulator is
9:21
running fine
9:28
the simulator runs all right and the
9:31
light is off
9:32
this is because we initialized the
9:34
button state with a false parameter
9:36
anyway let's flash this to the board and
9:39
see the results
9:41
here are the two buttons on the board
9:44
the black is the reset button and the
9:47
blue is the one connected to Pi 11. I am
9:50
going to press this button to turn the
9:52
light on
10:03
so you can see whenever the button is
10:06
pressed and for as long as the button is
10:08
pressed the light is on
10:10
our sampling from the GUI task is
10:12
working all right
10:14
let's add the ADC to our code now
10:17
first we need to define the ADC Handler
10:20
externally
10:24
now let's write the code to read ADC
10:26
values
10:28
first start the ADC
10:30
then pull for conversion to be completed
10:33
I am adding the time out of 10
10:35
milliseconds
10:37
since autocomplete isn't working here
10:39
you can see the functions in the ADC
10:42
source file itself
10:47
now we will read the ADC value and store
10:50
it in the 16-bit variable
10:54
finally stop the ADC
10:59
I am going to use this map function
11:01
which I took from the Arduino source
11:03
code to map the ADC values to 0 to 100
11:06
range
11:08
we will Define this ADC valve variable
11:11
later
11:12
we want to map the value variable the
11:14
input minimum is zero maximum is
11:18
4095. the output minimum should be zero
11:21
and the maximum should be 100.
11:24
the mapped values will be stored in the
11:26
ADC valve variable
11:28
so let's define this variable first
11:32
now initialize the variable with some
11:34
value in the model source file
11:39
now we need to pass this ADC value to
11:43
the view so we will follow the same
11:45
steps we did for the button
11:47
the model listener will call the
11:49
function set ADC and pass the value as
11:51
the parameter
11:54
let's define this function in the model
11:56
listener header file
12:03
since the function is being called in
12:05
the presenter we need to also Define the
12:08
function in the presenter
12:10
in the presenter source file we will
12:12
call the same function in the view and
12:15
pass the value as the parameter
12:18
since the function is being called in
12:20
the view we also need to Define it in
12:22
the view header file
12:26
now finally we will write the function
12:28
in the view source file
12:30
here we need to convert the integral
12:33
value to the characters first
12:35
you can refer to the code from the
12:37
screen view base source file
12:40
here the text Area 1 buffer is the
12:42
wildcard buffer we created and this is
12:45
where the characters will be stored
12:47
we are converting the integer variable
12:49
Val here
12:51
after the characters have been saved in
12:53
the buffer just invalidate the text area
12:56
let's quickly see the process again
12:59
here we are sampling the data in and we
13:02
task
13:03
then the model listener will call the
13:05
function set ADC in the presenter
13:07
the presenter will call the same
13:09
function in The View
13:11
and finally The View will display the
13:14
data in the UI
13:15
let's build the code now before loading
13:19
it to the board let's quickly check the
13:21
simulator
13:24
the project runs just fine with ADC
13:27
value being 50 what we initialized the
13:30
variable with
13:33
let's Flash the code to the board
13:40
here is how the connection is
13:43
the potentiometer is powered with 3.3
13:46
volts
13:47
the yellow wire is the signal wire and
13:50
is connected to the adc3 channel 0 that
13:53
is the PIN PA 0.
14:16
the ADC is working fine with range as we
14:20
set between 0 to 100. the button is also
14:24
responding well
14:26
so we saw how to sample the data from
14:28
the GUI task
14:30
this method is good enough if the
14:32
requirement is not very time critical
14:35
remember that the display has the
14:37
refresh rate of 60 hertz that is 60
14:40
frames per seconds
14:42
in case you don't want the values to
14:44
update very fast you can add a counter
14:47
and then perform the sampling after
14:49
every third or fourth count
14:51
in the next video we will see how to
14:54
sample by creating another task
14:57
this is it for the video
14:59
you can download the code from the link
15:01
in the description
15:03
leave comments in case of any doubt
15:06
keep watching and have a nice day ahead