Up next in 10
Touch GFX #7. How to Implement Keyboard
25 views
Apr 8, 2023
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ TouchGFX PART6 :::: https://youtu.be/RJlwEMCTgsM TouchGFX PART8 :::: https://youtu.be/4G1nDkjvkY8 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-7-how-to-implement-on-screen-keyboard/ ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech *******Join the Membership******* https://www.youtube.com/channel/UCkdqtSMnhYuMsJkyHOxiPZQ/join
View Video Transcript
0:09
foreign
0:11
[Music]
0:18
hello and welcome to controllers Tech
0:21
this is the seventh video in the stm32
0:24
touch gfx series and today we will see
0:27
how to add a keyboard to our application
0:30
keyboard is not provided by the touch
0:32
gfx directly but they have provided an
0:35
example of using it
0:37
I extracted the necessary files from
0:39
that example modified them a little and
0:42
prepared a tutorial about how to add the
0:44
keyboard to our UI the links to all the
0:48
files is in the description of this
0:49
video
0:51
let's start the touch gfx and create a
0:54
new project
0:55
I am using the same
0:58
stm32f750 Discovery board
1:01
give some name to the project and click
1:04
finish
1:05
first of all I am adding the background
1:08
image to the project
1:13
now I am adding two boxes with borders
1:15
one for the name and another one for the
1:18
age
1:20
on top of these boxes I am adding the
1:23
text area to display the text of course
1:28
let's rename this as the text area name
1:34
here we will use the wildcard and I am
1:37
setting the wildcard buffer to 20 bytes
1:43
we will add another text area and do the
1:46
same configuration
1:51
let's add more text areas to indicate
1:54
the fields
2:06
now we will add the flex buttons to
2:09
these boxes
2:10
these buttons will be used to pull out
2:13
the keyboard
2:14
we will reduce the alpha to zero so that
2:17
the buttons are not visible at all
2:21
when the keyboard shows up there will be
2:24
two more buttons
2:30
here I am adding an OK button
2:33
this button will read the keyboard data
2:35
and display it on the text area field
2:38
and then close the keyboard
2:42
then there is the exit button which will
2:45
be used to Simply close the keyboard
2:51
we will set both the buttons invisible
2:53
now and they will show up only when the
2:56
keyboard shows up
3:01
now let's add the interactions
3:04
first when the name button is clicked we
3:07
will call a virtual function name
3:09
clicked
3:13
similarly when the age button is clicked
3:15
another virtual function age clicked
3:18
will be called
3:21
we will call the similar virtual
3:23
functions for the exit button and the OK
3:26
button
3:30
that's all for the designing part let's
3:32
move to the texts section now
3:35
all the text areas in my design are
3:37
using the default typography so here I
3:40
am changing the fonts to bold
3:43
also set the Wild Card range for these
3:46
text areas
3:47
you can see all the fonts have been
3:49
changed to bold now
3:52
let's generate the project once
3:57
here I have the folder called keyboard
3:59
things and it contains everything we
4:02
need to add the keyboard to our project
4:06
first go to images and copy all these
4:09
images to our assets folder
4:13
[Music]
4:18
[Music]
4:20
now copy all the header files into GUI
4:23
include GUI common
4:28
[Music]
4:36
copy the source file into GUI Source vui
4:40
common
4:41
I extracted these files from the touch
4:43
gfx keyboard example and as I mentioned
4:47
earlier I modified them a little
4:49
like I added a function to get the
4:51
keyboard buffer and another function to
4:54
clear the buffer
4:59
in the touch gfx project you can see the
5:02
images we copied in the assets folder
5:05
now open the Excel file present in the
5:08
folder
5:10
here we have to create these three
5:13
typographies
5:15
so create the first typography and name
5:18
it display
5:22
these are the Wild Card characters for
5:25
this typography and this is the wildcard
5:29
range
5:33
similarly create another typography and
5:36
name it mode
5:37
it doesn't have any wild card characters
5:39
so leave them empty
5:42
then the third one is named as keyboard
5:44
and copy the characters and range to it
5:47
[Music]
6:02
now open this image from the folder we
6:06
have to create a text group and add
6:08
texts according to this picture
6:11
make sure you keep the same ID the
6:13
typography the alignment Etc
6:16
so create everything as per the picture
6:21
[Music]
6:26
[Music]
6:33
foreign
6:36
[Music]
6:38
that is all the setup we need to do
6:40
click here to generate the project again
6:48
let's open the project in Cube IDE
6:51
here you should be able to see the
6:53
custom keyboard source file
6:56
if not then regenerate the project and
6:58
refresh it in Cube IDE
7:01
our entire working will be in the view
7:03
source file so let's open it
7:06
open the view header file and Define a
7:09
new custom keyboard
7:11
I am naming it keyboard
7:14
now in the source file inside the screen
7:17
view function we will set the position
7:19
of the keyboard
7:21
I already have the coordinates for the
7:23
best fit of the keyboard
7:25
we have the X position the Y position
7:27
the width and the height
7:30
after setting the position call the add
7:33
function to add the keyboard
7:35
let's build the code and run the
7:37
simulator to see if the keyboard is
7:39
showing up or not
7:41
we also need to include the custom
7:43
keyboard header file which is in the GUI
7:46
common folder
7:47
we are going to run the simulator after
7:49
every change we make so to confirm
7:52
things are working fine
7:59
so the keyboard is showing up on the
8:01
screen and the keys are working fine
8:11
also note that the default buffer size
8:13
is set to 18 this is basically the
8:16
number of characters the keyboard can
8:18
store at a time
8:19
now we will first Define the interaction
8:22
functions we created during the GUI
8:24
design
8:25
go to screen 1 view base header file and
8:29
copy all these functions
8:31
since we are working in the view file we
8:34
need to paste them in the view header
8:36
file
8:39
the keyboard should not show up on its
8:41
own so after adding the keyboard we will
8:44
set its visibility to false
8:46
and invalidate it after making changes
8:51
now let's write the name clicked
8:53
function first
8:55
when the name button is clicked we want
8:57
the keyboard to show up so set the
8:59
keyboard visibility to true
9:09
along with the keyboard we also want the
9:12
exit button and the OK button to show up
9:18
[Music]
9:37
or write the code Bill's fine now so
9:40
let's see the simulator
9:42
here you see the keyboard is hidden and
9:45
when I click on the name box the
9:47
keyboard and the button shows up
9:54
just like the name clicked function the
9:57
age-clicked function will also have the
9:59
same behavior
10:00
there will be a little difference
10:02
between them but we will add it later
10:05
now when the exit button is clicked we
10:07
will hide the keyboard along with the
10:09
two buttons
10:11
and a similar behavior for the OK button
10:20
let's see this much part in the
10:22
simulator
10:35
so everything is working as per the
10:38
expectations so far
10:40
now we also need to retrieve the
10:42
keyboard data and display it on the name
10:45
and age field
10:46
let's create two variables first the
10:49
name mod and the hmod
10:52
now when the name box is clicked the
10:54
name mod variable will set to 1 and when
10:57
the age box is clicked the Age mod
10:59
variable will set to 1. this will
11:02
basically help us to identify the source
11:04
of the keyboard buffer whether the
11:06
buffer contains the name data or the age
11:09
data when the exit button is clicked
11:12
both the variables will reset to zero
11:15
now when the OK button is clicked we
11:18
will check which variable is set to 1.
11:21
if the name mod is set to 1 that means
11:23
the buffer holds the name data and hence
11:26
we will update the name text field with
11:28
the buffer data the buffer contains the
11:31
ASCII characters so simply the string
11:33
copy function will work
11:35
I have defined the function get buffer
11:38
in the custom keyboard source file and
11:40
it is used to retrieve the buffer
11:42
similarly if the age box was clicked we
11:45
will update the age text field
11:52
after updating the text fields we will
11:55
clear the keyboard buffer using the
11:57
function clear buffer
12:06
the being buffer is uppercase
12:09
[Music]
12:15
[Music]
12:21
all right the code Bill's fine so let's
12:25
test the simulator
12:30
[Music]
12:35
as you can see the keyboard is working
12:37
as expected and the data is being
12:40
displayed on the text fields
12:44
everything is fine so let's Flash the
12:47
code to the board
12:51
[Music]
13:09
[Music]
13:25
[Music]
13:27
foreign
13:34
[Music]
13:38
so I hope you understood how to add the
13:40
keyboard to the application
13:43
in the next video we will retrieve this
13:45
keyboard data and send it using the uart
13:49
that will basically be the sending data
13:51
from UI to the MCU
13:54
the link to download the files is in the
13:57
description below
13:58
leave comments in case of any doubt
14:01
keep watching and have a nice day ahead
#Programming
#Software