0:10
hello and welcome to controllers tech
0:13
a lot of you guys requested this so
0:16
today i am starting the touch gfx series
0:21
i guess you have already tried some
0:23
experiments with the touch gfx and you
0:26
already know how to create a project for
0:29
so i will just keep this video to the
0:31
point where i will connect the gfx to
0:36
this is the first video in the series
0:38
and today we will see how to toggle the
0:40
led using the button on the display so
0:44
let's start the touch gfx designer
0:50
click create and choose your board
0:54
if you are doing this first time you
0:56
will need an internet connection or else
0:59
it won't show anything
1:03
stm32f750 discovery board
1:06
give the name to the project and click
1:14
all right we got our blank project
1:17
there are a lot of things here which we
1:19
will cover in the future videos
1:22
today we will start with the simple
1:24
image let's add the image to our display
1:30
if you click on the image you will get
1:32
its properties on the right
1:35
like the name its location etc
1:39
to add the image click this image and
1:46
if you don't have any image you can
1:48
choose from the pre-loaded backgrounds
1:53
they are available for pretty much every
1:57
or else click add and choose the image
2:00
the image should be in the ping format
2:04
i already have one created for
2:06
backgrounds so this will be our
2:08
background image and now we will add a
2:11
button on the display
2:15
i am adding this toggle button as we are
2:17
going to toggle the led
2:24
here are the properties for this button
2:27
you can choose the style here
2:32
or how will it look if pressed or
2:36
let's keep the default state to pressed
2:39
so it will be in on state by default
2:42
all right the button has been created
2:45
now what will happen when we press this
2:49
well we need to define that and to do
2:51
that we will add the interaction
2:58
this interaction will trigger when the
3:02
the button is this one that we created
3:06
in the action you can choose whatever
3:08
action you want but for toggling the led
3:11
we will call a new virtual function
3:13
which we will define later in the code
3:16
the name for the function let's keep it
3:21
interaction name let's keep it same
3:25
so that's it for the design part
3:28
click here to generate the code
3:42
this is the touch gfx folder we will go
3:45
back to project and open the cube id
3:55
inside the application user we have our
4:10
here the generated folder is generated
4:13
based on our setup and we can't modify
4:17
the gui folder is where we can write our
4:20
code for the application
4:22
we will check these in a while let's
4:24
open the cube mx setup first
4:32
this setup is configured for qsb air
4:35
flash sdram display library and other
4:40
here we will just add the things we need
4:44
for example here in this project i want
4:47
to control the led so set the led pin as
4:51
there is no on-board led on this board
4:54
but here you can see pin pk3 is the
4:57
display backlight control pin
4:59
so i will control this with the button i
5:03
this pin is already set as output so i
5:06
don't need to configure anything
5:09
let's go back to our project
5:14
screen 1 view base is where the code is
5:16
generated for the elements on the screen
5:20
here is the image and this is the button
5:27
the button calls the button callback
5:30
which further calls the toggle led
5:33
like i said earlier we can't do any
5:36
modification in these files so we will
5:38
copy this function and we will modify
5:47
open the screen1 view
5:49
now open the header file
5:54
here we have to add the function first
5:57
so add the virtual void toggle led
6:00
save it and go back to the source file
6:04
here we will write the code for the
6:07
this is defined in class screen 1 view
6:11
before we write the code to toggle the
6:12
led let's run the project once
6:28
you can see the toggle button and the
6:34
so the toggle button is working well
6:37
let's go back to the project
6:41
here first we will get the state of the
6:47
if the state is true we will turn on the
6:59
else the led will be off
7:06
we got some error about the hull
7:09
include the whole library according to
7:18
and now everything is fine
7:21
let's flash it to the board again
7:37
you can see the display is turning off
7:40
and it only turns on when i tap the
7:43
so we were able to toggle the led using
7:46
the button on the display
7:50
there is one more thing i want to
7:53
let's try to run the simulator
8:01
the reason is that we are using some
8:03
code which depends on external factors
8:12
so let's exclude all the whole related
8:14
code from the file and now try to run
8:30
if you write a code that depends on any
8:33
other variable which is external to the
8:35
generated files the simulator can not
8:39
we will see more to this in the near
8:43
this is it for the video
8:45
i hope you understood the process for
8:47
controlling the led using the button
8:50
the next video will cover the counter on
8:52
the display and how to change the value
8:54
of this counter using various methods
8:57
the code is very big so i will only
9:00
upload the necessary files
9:02
you can download it from the description
9:06
leave comments in case of any doubt
9:08
keep watching and have a nice day ahead
