Up next in 10
LVGL on STM32 - PART 5 || How to use the KEYBOARD on Display
4 views
Nov 12, 2023
Purchase the Products shown in this video from :: https://controllerstech.store ________________________________________________________________________________________ LVGL PART 4 :::: https://youtu.be/Natecq4TJso LVGL PART 6 :::: https://youtu.be/68YwDGQaW-I LVGL STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8ghGES4CUTjHTn_G4gly_atz STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8gga7xeUUJ-bRUbeChfTOOBd DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/lvgl-on-stm32-part5/ ________________________________________________________________________________________ ******* 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:09
hello and welcome to controllers Tech
0:12
this is the fifth video in the lvgl
0:15
series and today we will see how to use
0:17
the keyboard on the display we will use
0:20
the keyboard to enter some information
0:22
like name and password and then retrieve
0:25
this information by the MCU and it to
0:27
the computer via the uart
0:30
the main part of this project is going
0:32
to be the UI design so we will start
0:35
with that let's start the squareline
0:38
studio and create a new
0:41
project set the project folder and let's
0:44
name it
0:45
keyboard the screen resolution is
0:48
320x 240
0:51
pixels the color depth is 16 for this I
0:55
9341
0:56
LCD click create to create the project
1:01
we need two text areas one for the name
1:04
and another one for the
1:06
password let's add the first text area
1:09
and I am renaming it to the text area
1:12
name now add the second text area and
1:15
rename it to text area pass let's add
1:19
the labels for the text
1:25
areas the text areas should be in on
1:28
line mode and I am also modifying the
1:31
placeholders for both of
1:36
them note the wi positions for the text
1:39
areas and the labels as we would need
1:41
them in a
1:47
while now add the keyboard and align it
1:51
as per the
1:56
requirement you can check the UI in the
1:58
play mode
2:01
all right let's hide the keyboard by
2:03
default and we will show it when needed
2:07
let's add the event for the text area
2:10
name the event one will trigger when the
2:12
text area is
2:14
focused here we will set the basic
2:17
property basically we will transform the
2:20
text areas and the labels to new
2:22
positions so that they do not hide under
2:25
the
2:26
keyboard here I am changing the Y
2:28
position of the text area name and the
2:31
label one Let's test it in the play
2:35
mode this is not the position I was
2:38
expecting let me change it to minus 100
2:42
all right this is fine the text area and
2:45
the label will move to this position
2:47
when it is clicked we will add the same
2:50
transformation for the text area pass
2:52
and the label
2:58
too
3:00
this will make up enough space for the
3:02
keyboard at the bottom of the
3:04
display along with the transformation we
3:07
also want to show the keyboard when the
3:09
text area is in the
3:11
focus so here I am adding the action to
3:14
modify the flag set the target object as
3:18
the keyboard and remove the hidden flag
3:21
you can see the keyboard shows up when
3:24
the text area name is in the
3:26
focus now we also want to hide the
3:28
keyboard again and set the text area to
3:31
their default positions when the focus
3:33
is removed from the text area to do this
3:37
we will add another event here we will
3:40
add the same properties but we will
3:42
reset their why transformations to their
3:44
default
3:58
positions
4:06
also we will set the keyboard hidden
4:08
flag so the keyboard can hide Let's test
4:14
it the keyboard shows up when the text
4:17
area is in focus and when I click
4:19
outside the text area their position
4:21
resets back to default and the keyboard
4:24
hides so this is working fine so far now
4:29
we will add the same properties for the
4:31
text area
4:32
pass all right I have added the events
4:35
three and four for the text area
4:38
pass let's text it now everything is
4:42
working as
4:43
expected also note that the position
4:46
does not reset when we switch Focus from
4:48
one text area to the another still when
4:51
we type something on the keyboard it
4:53
does not show up in any text area so we
4:57
need to assign the keyboard to a text
4:59
area
5:00
when the textt area name is in Focus we
5:03
will add one more action and that is to
5:05
set the keyboard
5:07
Target here we will assign the keyboard
5:10
one to the text area
5:12
name similarly when the text area passes
5:15
in Focus we will assign the keyboard one
5:18
to the text area
5:24
pass you can see the keyboard data is
5:27
now being displayed on the text
5:30
areas since the text area passes for the
5:33
password let's enable the password mode
5:39
here you can see the text is being shown
5:42
as the password now we can also set the
5:46
maximum length for the text
5:48
areas here I am setting the eight
5:51
characters limit for the
5:53
password Let's test it
5:58
now
6:00
you can see that I am not able to type
6:02
more than eight characters here let me
6:05
change this to 10
6:10
characters also I am setting the limit
6:12
for the name to 15
6:17
characters our UI is almost complete now
6:22
we still need to send the data entered
6:24
here to the
6:25
MCU we will do this by adding an event
6:28
to the keyo
6:29
board here I left this set Target to
6:32
empty as we are setting it in the text
6:34
area
6:36
events let's add the event for the
6:38
keyboard which will trigger when it is
6:42
ready basically this will trigger when
6:45
this okay button is
6:47
clicked here we will call a function
6:50
keyboard done and we will write this
6:52
function later in the
6:57
code go to project settings and choose
7:01
the UI folder to save the UI
7:07
files our lvgl inclusion is lvgl Doh
7:11
throughout the project click on export
7:14
to export the UI
7:17
files here is the project from the
7:19
previous video on
7:21
lvgl we will remove the previous UI
7:24
folder and copy the new folder that we
7:27
created just now
7:53
this project contains some extra
7:55
definitions like LEDs ADC Etc
7:59
let's remove them from the project
8:05
first I am leaving the uart as it is as
8:08
it will be needed in today's project
8:15
Also let's delete the previously added
8:28
code
8:39
there is not much to write in the code
8:41
let's open the UI Event Source file
8:44
let's include the main header file first
8:47
Define the buffers to store the name and
8:49
password data let's also Define a data
8:53
buffer which we will send via the uart
8:56
since we are going to send the data
8:58
directly from the event to the uart we
9:00
need to define the uart Handler as an
9:03
external variable the keyboard done
9:06
function will be called when we press
9:07
the okay button on the
9:09
keyboard here we will first check what
9:12
text area the keyboard is assigned to if
9:15
it is assigned to the text area name we
9:18
will copy the data from the text area to
9:20
the name buffer we defined
9:25
earlier now copy this data into the data
9:28
buffer and send it to the
9:40
uart else if the keyboard is assigned to
9:43
the text area pass we will copy the data
9:46
into the password buffer and then send
9:48
the data buffer to the
9:50
uart include the standard I/O for the S
9:54
printf let's typ cast the data
9:58
buffer
10:00
all right there are no warnings now so
10:02
let's flash it to the board I am going
10:05
to use the wch serial port to view the
10:08
uart data from the
10:10
MCU here I am using the board rate of
10:14
115200 with eight data bits and no
10:20
parity all right the project has been
10:22
loaded to the MCU and you can see the
10:25
display shows the new UI the keyboard is
10:29
responding well and the transformation
10:31
is also working
10:35
fine let's type the name now and press
10:38
the okay
10:43
button you can see the data showing up
10:46
on the
10:47
computer now I am going to type the
10:49
password and press
10:51
okay here you can see the password data
10:54
on the
10:55
console let's try another name and
10:58
password
11:09
we got the data on the console again so
11:12
we were able to use the keyboard and
11:15
retrieve the data from the display to
11:17
the
11:17
MCU I hope you understood how to use the
11:20
keyboard with the
11:22
lvgl we will cover some more details
11:25
like custom mapping in the upcoming
11:27
videos this is it for this
11:30
video you can download the code from the
11:33
link in the
11:35
description leave comments in case of
11:37
any doubt keep watching and have a nice
11:41
day ahead