Up next in 10
TOUCH GFX #2. Counter || Text Area || Wildcards
11 views
Nov 4, 2021
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ TouchGFX PART1 :::: https://youtu.be/rGxDZPYcWIs TouchGFX PART3 :::: https://youtu.be/Y7d6-59YQu8 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-2-how-to-use-textarea-and-wildcards/ ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech *******Join the Membership******* https://www.youtube.com/channel/UCkdqtSMnhYuMsJkyHOxiPZQ/join
View Video Transcript
0:01
[Music]
0:10
hello everyone
0:12
welcome to controllers tech
0:14
this is the second video for the touch
0:16
gfx and today we will see how to create
0:19
a counter on the display which can be
0:21
controlled using the buttons
0:24
the main purpose of the video is to
0:26
introduce the concept of how to use the
0:28
wildcards and how to display text on the
0:31
screen
0:32
this will make a little easier when i
0:34
will cover some topics like displaying
0:36
sensors data or creating menu etc
0:41
so let's start today's video and we will
0:43
create a new project with touch gfx
0:49
select the board give the name to the
0:51
project and click create
0:58
first of all i am going to add a
1:01
background image
1:06
i already have a image for my display
1:09
size
1:15
i am adding one more image which will be
1:18
used as the background for the counter
1:27
now we need to add the text area
1:32
also add the two buttons which will be
1:35
used to increase and decrease the
1:37
counter
1:43
change the trigger to touch
1:46
i have the images for these buttons so i
1:48
am going to include those images here
1:53
this will be image when the button is
1:55
released
2:02
and this will be the image when the
2:04
button is pressed
2:06
similarly add the images for the second
2:08
button
2:26
now comes the important part the text
2:28
area
2:30
first go to text and typographies
2:36
there are 3 default typographies here
2:39
and if you want to use either of them
2:40
its ok
2:42
but i am going to create a new
2:44
typography and lets name it counter
2:47
choose the font type and then choose the
2:50
size
2:52
now under the wildcard ranges type the
2:54
range you want to assign for this
2:56
typography
2:58
for example i am using it for the
3:00
counter so i need only the numbers from
3:03
zero to nine
3:05
but in case if you are using text you
3:07
need to set the range for the alphabets
3:10
both for lower and upper case
3:12
so let's keep it only numbers for now
3:19
now we will include the wildcard
3:22
the wildcard is used where the values
3:25
are going to change in the runtime
3:30
and this value field is where the value
3:33
will be updating
3:35
click on the wildcard give some initial
3:37
value to it and also check the use
3:39
wildcard buffer
3:46
i am using the 5 bytes for this buffer
3:49
you can use as per your requirement
3:57
all right let's uncheck the auto size
4:00
and we will manually resize the area
4:08
everything looks ok here let's change
4:11
the color to white
4:12
and change the typography to counter
4:16
this counter typography is the one we
4:18
just created
4:21
so everything is set for the counter and
4:24
now we will add the interactions for the
4:26
two buttons we are using
4:30
go to interactions and add a new
4:33
interaction
4:35
it will trigger when the button is
4:36
clicked
4:38
the down button is flex button one
4:40
once the button is pressed we will call
4:43
a new function let's call it down
4:45
clicked
4:50
similarly we will create another
4:53
interaction for the up button and the
4:55
function it will call is up clicked
4:59
before loading the code to the board
5:02
let's try to run it in the simulator
5:13
everything seems ok
5:15
so generate the code
5:21
now go to the code folder go to cube ide
5:25
and open the project
5:45
if you remember from the first tutorial
5:48
we can make changes in the gui folder
5:51
the function that we created in the
5:52
interactions we need to declare them in
5:55
the screen view dot h-p-p
6:03
in case you forgot the functions they
6:05
are located in screen view base header
6:08
file
6:13
let's copy the function and paste in the
6:15
screen view header file
6:22
we will also create a variable to keep
6:24
the track of the count
6:30
now go to the screen view source file
6:33
and here we will write the functions
6:52
let's start with the up clicked
6:57
if the up button is pressed this
6:59
function will be called and here we will
7:01
increment the counter
7:06
now we need to display the counter value
7:08
and to do that we will first convert it
7:10
to the string format
7:12
here we use the sn printf are the same
7:21
text area 1 buffer is the buffer
7:23
assigned for text area 1.
7:26
which is the name of our element
7:29
since we are converting the unsigned
7:31
16-bit integer the format will be u
7:35
after assigning value to the buffer we
7:37
will invalidate the area so the changes
7:39
can take place on the display
7:45
we will do the same for the down clicked
7:47
function but we will decrease the
7:48
counter value here
8:02
i guess i forgot to close the statement
8:05
somewhere
8:09
all right whenever you make any changes
8:11
in the header file make sure you save
8:14
the file
8:15
the build does not save these changes
8:19
i am not going to flash the code just
8:21
yet let's first try the simulation
8:33
all right the up button is working fine
8:37
even the down button is okay but the
8:40
problem occurs when we go below zero
8:47
let's restrict our counter to zero
8:52
i am going to use the signed integer
8:54
instead
8:56
and if the counter is less than zero the
8:58
counter will be zero
9:03
also change the format specifier
9:08
let's try the simulation again
9:19
you can see the counter is restricted to
9:21
zero now
9:25
let's flash the code to our board now
9:52
so everything is working fine and as
9:55
expected
9:56
what will happen if i comment out this
9:59
line
10:00
if we go below zero we should be able to
10:02
see the negative values on the counter
10:04
now
10:19
this is showing the 1 but instead of
10:21
minus its showing this question mark
10:28
well there is a good reason for this
10:31
and to know it we will go back to the
10:33
typographies
10:35
this question mark is the fallback
10:37
character
10:39
if you remember we have declared a range
10:41
for this typography
10:43
so whenever something outside the range
10:45
arrives it's going to display the
10:48
fallback character
10:50
that means if we want to display the
10:52
minus symbol we need to define it here
10:54
first
10:56
to define the characters we will use the
10:58
wildcard characters
11:01
here i am defining the minus sign if you
11:04
want to include more characters you can
11:06
define them all separated by comma
11:13
all right we have defined the character
11:15
so let's see if we can get the negative
11:17
sign
11:20
i am going to run it in the simulation
11:22
first
11:25
all right you can see the negative sign
11:27
is displaying just fine now
11:34
let's generate the code so that we can
11:37
flash it to the board
11:56
you can see everything is working as
11:58
expected
11:59
one last thing i want to show you guys
12:01
here
12:03
like i mentioned in the beginning while
12:05
using the wildcard this value file is
12:07
used for the values that changes during
12:10
the run time
12:11
let me demonstrate this in a better way
12:14
so here i am writing some text and then
12:17
i will use the value field after this
12:19
text
12:20
let's run the simulator
12:23
you can see the text remains as it is
12:25
and the changes are only taking place in
12:27
the value field
12:29
this explains the proper usage of the
12:31
wild card
12:33
if you want the two separate values you
12:35
can add another wild card and control it
12:38
separately
12:41
this is it for this video
12:43
i hope you guys understood the concept
12:46
of wild cards
12:48
in the next video i will continue will
12:50
the wild cards and we will use it to
12:53
display some sensors data
12:55
that's it for today
12:57
you can download the code from the link
12:59
in the description
13:01
leave comments in case of any doubt
13:04
keep watching and have a nice day ahead
13:09
[Music]
#Programming
#Software