Up next in 10
Touch GFX #6. How to run Multiple Screen Project || Reverse MVP
4 views
Feb 11, 2023
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ TouchGFX PART5 :::: https://youtu.be/x3RSn304_UE TouchGFX PART7 :::: https://youtu.be/Tkz9099a7a4 STM32 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/how-to-build-a-multiscreen-project-using-touchgfx-stm32f7/ ________________________________________________________________________________________ ******* 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 sixth video in the touch gfx
0:15
series and today we will see how to make
0:17
a multi-screen project
0:19
there are some issues we have to face
0:21
when building a multiple screen project
0:24
I will first explain those issues and
0:27
later we will see how to resolve them
0:30
this video also explains the reverse MVP
0:33
method where the view gets the data from
0:35
the user and the presenter stores that
0:38
data into the model
0:40
the data can be again retrieved by The
0:42
View when needed
0:44
we will first see the issue we face with
0:47
the multiple screens
0:49
let's start the touch gfx and create a
0:52
new project
0:54
I am using the
0:56
stm32f750 discovery board
1:00
give the name to the project and click
1:03
create
1:04
let's first add the background image to
1:06
our project
1:08
I already have a ping image of this size
1:12
now let's add a button to change the
1:14
screen
1:17
I am going to put one icon on it to
1:20
indicate the next screen
1:34
let's add another screen to the project
1:38
I am adding one more button on it to go
1:40
back to the previous screen
1:48
now let's add some components to the
1:51
first screen
1:52
here I am adding a toggle button and a
1:56
text area
2:09
we need to add the wildcard as the text
2:12
value is not going to be fixed and it
2:15
will change as per the button state
2:22
I am changing the typography to large
2:29
we also need to use the wildcard buffer
2:32
I am keeping the size to 5.
2:35
now to to text typography and here we
2:38
need to add the wildcard range for the
2:40
large typography since we are using that
2:43
one
2:44
I am setting the range from 20 to 7e
2:47
hexa as it covers all the ASCII
2:49
characters
2:51
all right our design for screen one is
2:54
done now let's add some interactions to
2:56
this screen
2:58
first I will add the interaction for
3:00
changing the screen when the flex button
3:02
is pressed
3:04
you can select the screen change
3:06
animation as you desire
3:08
now I am adding one more interaction
3:10
which we'll call a new function when the
3:13
toggle button is pressed
3:15
we will write this toggle pressed
3:17
function later in our ID
3:20
this completes our screen one let's
3:22
design the screen to now
3:25
here I am adding a slider and a text
3:28
area
3:29
we need to use the wild card again and I
3:32
am selecting the large typography same
3:35
as the screen one
3:37
the idea is when we move the slider its
3:40
value will update in the text area field
3:43
the slider's value can vary from 0 to
3:46
100 so we need a bigger area to
3:49
accumulate three digits
3:51
the wildcard range is anyway defined for
3:54
the large typography so we don't need to
3:57
worry about it
3:58
now let's add some interactions to this
4:01
screen
4:02
first I will add the interaction for
4:04
changing the screen when the flex button
4:07
is pressed it will change to screen 1.
4:12
the next interaction will be called when
4:15
the slider's value is changed
4:17
in that case we will call a new function
4:20
slider updated which we will write later
4:23
in our IDE
4:25
all right this is it for the designing
4:28
we have two screens the first one has
4:31
the toggle button whose state will be
4:33
updated in the text area and the second
4:35
screen has the slider whose value will
4:38
be updated in the text area
4:40
let's generate the code now
4:43
we will see the issue with the multiple
4:46
screens but I am going to run this in
4:48
the simulator for now
4:52
all right here is our simulator and
4:55
let's toggle the button to on
4:57
I don't expect the values in the text
5:00
area to update for now as we didn't
5:02
write the code yet
5:04
let's change the screen and move the
5:07
slider
5:08
now if we go back to the previous screen
5:10
the toggle button has been reset to off
5:13
State
5:14
and if you check the slider it has also
5:17
been reset to zero
5:19
so this is the main issue
5:22
basically when we switch back to the
5:24
screen the components will reset to
5:27
their original values irrespective of
5:29
what values we set
5:31
if you are feeding the values from the
5:33
microcontroller like ADC or uart data
5:37
you don't need to worry about them since
5:39
MCU is anyway keep updating them
5:42
but for the rest they will reset back to
5:45
their original state
5:47
so now we will see how to save the state
5:50
of these components and how we can set
5:52
them to their recent State when the
5:54
screen is switched back
5:56
let's open the project folder
5:59
Now navigate to the cube ID folder and
6:02
open the project in Cube ID
6:05
our project has been loaded
6:08
here navigate to application user GUI
6:11
and open the screen 1 view source file
6:15
you can take the reference from the
6:17
screen one view base file
6:19
here is the function we defined in the
6:22
interaction and now we will write the
6:25
code in it
6:26
but first we need to Define this
6:28
function in the screen 1 view header
6:30
file
6:31
now let's write the code for this
6:33
function
6:36
so basically when the toggle button is
6:38
pressed we want to first update the text
6:41
area with the value equivalent to button
6:43
state
6:46
here we will store the value 1 or 0 to
6:50
the text area buffer depending on the
6:52
current state of the button
6:56
and now to update the text area just
7:00
invalidate it
7:05
let's quickly see if this is working all
7:07
right
7:10
build the code and then launch the
7:12
simulator
7:16
here you can see the text area is
7:19
responding as per the state of the
7:20
toggle button
7:22
but if we switch the screen it still
7:24
goes back to the reset form
7:27
we will fix that now
7:30
so basically we need to store this state
7:32
in the model but we have to go through
7:34
the presenter
7:36
according to the model view present a
7:38
pattern Whenever there is a user event
7:40
in the view it should be passed to the
7:42
presenter which will then store it in
7:44
the model and later the model will send
7:47
the data to the presenter which will
7:49
then update The View with this data
7:52
so whenever the toggle button is pressed
7:54
we will call the function save toggle
7:57
button which is defined in the presenter
7:59
and pass the state of the button to this
8:01
function
8:04
we need to First Define this function in
8:07
the presenter so open the presenter
8:09
header file and create a function save
8:11
toggle button with parameter as the
8:13
Boolean variable
8:19
now when this function is called in the
8:22
presenter we will call the same function
8:24
in the model and pass the value of the
8:26
button state
8:33
we will create a similar definition in
8:35
the model header file
8:42
let's define a Boolean function to
8:45
retrieve the state of the button
8:49
we will also Define a Boolean variable
8:52
which will hold the current state of the
8:54
toggle button
8:55
now in the model source file when the
8:58
save toggle button function is called we
9:01
will update the variable with the
9:02
current state of the button
9:06
but first we need to initialize the
9:08
variable in the model source file
9:17
and when the function to retrieve the
9:20
button state is called we will simply
9:22
return the current state of the button
9:28
the get toggle button will be called by
9:30
the presenter
9:32
basically when the screen 1 will switch
9:35
in this activate function in the
9:37
presenter will be automatically called
9:40
inside this function we will call
9:42
another function set toggle state which
9:44
we will Define in The View later and
9:46
pass the button state from the model
9:49
we don't need to Define anything in the
9:51
presenter for this operation since the
9:53
presenter is simply connecting the model
9:55
to The View
9:57
now in the view we will first Define the
9:59
function set toggle state
10:04
and now inside this function we will
10:07
force the button state to have the state
10:09
stored in the model
10:13
since the text area also relies on the
10:16
button State we will again update the
10:18
text area with the new value
10:23
or write the code builds just fine
10:27
let's see the working in the simulator
10:30
now you can see the button state is the
10:33
same as what it was before we made the
10:35
switch
10:37
so screen one is working as expected
10:40
let me quickly go over it one more time
10:46
this function toggle pressed is called
10:49
whenever we click the toggle button
10:51
here we are calling the function save
10:54
toggle button in the presenter and we
10:57
are passing the current state of the
10:58
button to it
11:00
then in the presenter we will call the
11:02
same function in the model and forward
11:05
the value we receive from The View
11:07
in the model we save the state of the
11:10
button to the Boolean variable we
11:12
created
11:13
now whenever the screen one switches in
11:16
the activate function in the presenter
11:18
will be called
11:20
inside this function we will call
11:22
another function set toggle state which
11:25
is defined in the view and pass the
11:27
button state which we have retrieved
11:29
from the model
11:30
when this function is called in the view
11:32
it will force the button with the new
11:35
state and also update the text area
11:37
according to the state
11:39
that completes the procedure for screen
11:42
one let's write the code for screen 2.
11:45
the process is similar to what we did
11:47
for screen one so I will fast forward
11:50
this part
11:51
the slider updated function will be
11:54
called when the slider reports the
11:56
change in the value
11:58
we will Define this function in the
12:00
screen 2 View and then write the code
12:03
here we will update the text area with
12:06
the slider value and finally pass the
12:09
slider value to the presenter using the
12:11
function save slider
12:13
this presenter will call the same
12:15
function in the model and pass the value
12:18
to it
12:22
in the model we will store the slider's
12:25
value in the variable we defined slide a
12:27
value
12:40
now when the screen 2 switches in the
12:43
activate function in the presenter will
12:45
be called which will retrieve the value
12:47
from the model and pass the value to The
12:50
View
12:51
in The View when the function set slider
12:54
will be called it will simply update the
12:57
slider and the text area with the
12:59
current value
13:00
this process is exactly the same as what
13:03
we did for screen one
13:05
the model is common for all the screens
13:07
so you can also use it to share the data
13:10
between the screens
13:12
let's build and test this in the
13:15
simulator first
13:29
you can see the text area is responding
13:32
as per the slider value
13:34
also the screen 2 is now able to hold
13:37
the values even after switching out
13:40
so we have the things working as
13:42
expected
13:43
both the screens are able to restore the
13:46
states of their components
13:48
let's flash this on our board and we
13:51
will test the final project on the board
13:53
itself
13:54
so here we have successfully loaded the
13:57
project on the board
14:10
everything is working as expected
14:13
so I hope you understood how to use the
14:16
MVP to save the state of the components
14:19
and how we restore them when the screen
14:21
switches on
14:22
this is it for the video
14:25
you can download the code from the link
14:27
in the description
14:29
keep watching and have a nice day ahead
14:36
[Music]
14:47
foreign