Welcome back to my LVGL 101 We are learning to construct
screens using LVGL one by one. As you know, what we can do in an MCU environment is extremely
limited, but this allows us to do a lot. You can have a screen configuration similar to a
mobile application, and also you can have various screens depending on the project. Today
we will look at using LVGL’s on-screen keyboard. This is the layout created in the
previous episode. This is a static screen because
no events are connected. The goal is to enable the keyboard to come up and receive input from the user
when the password textarea is selected. Before going into the code, let's find
out how to place the keyboard object. We want to add a keyboard.
Where should the keyboard belong at this time? Should we put it on the screen we
created in the previous episode? Let's assume you put a keyboard
object on the first screen. Then it becomes dependent on the first screen. Maybe this gonna be fine. But what if we need a second screen
and we're going to use the keyboard on the second screen as well? When I need a keyboard on the second screen,
should I create another keyboard object? Or should I borrow the keyboard object
from the first screen and use it? Unfortunately, this may not be a good solution.
Managing keyboard objects is also difficult. Also, it is difficult because when
you move the screen up and down, the position of the keyboard may also move. The most reasonable way is to use the
keyboard as another sibling object. Not only does this allow you to
use the keyboard on any screen, but it's also not bad from a
code structure perspective. Here's the code we worked
on in the previous episode. First, let's create a keyboard object. As I said, create the keyboard at the same level
as the screen, not inside the first screen. Also, since the keyboard does not
need to come out from the beginning, we will hide it using a hidden flag. We will create a callback function
for the password text area. This enters the focus state when the password
input space is touched by your finger. At this time, not only the touched object but also the connected keyboard object can be
obtained from the callback function. You can find out the state of the
event through the get code function Also, you can retrieve the object of the
text area through the get target function. Additionally, the keyboard object
will also be passed through the get user data function, so you can refer
to the keyboard object through this. Now you have all the objects you need. So you just need to define the actions to take
when the textarea is focused and defocused. Just remove and add the hidden flag so that the
keyboard appears on the screen and is hidden. Now let's go to the user password and register
the callback function we just created. Since it is set to EVENT ALL, this callback
function is executed whenever all events occur. Also, since the keyboard
is set as the last parameter, user data becomes a keyboard object. So we
can use this from the callback function. Almost forgot it. Since the text color is not
specified in the Textarea's style, we will set it to white. Now whereever we touch this password
textarea the keyboard will appear. So, it can receive user input.
Also, if you touch anywhere else on the screen, the keyboard disappears again because it loses
focus. This was implemented as we wanted. But there is one problem.
If the keyboard appears right away, it covers up the text area, so
you can't check your entered keys. This is very unfriendly and
fatal to user experience. We need to move the screen when the keyboard appears so that the
user can check what they have entered. Moving it with an animation effect can
be more effective than just moving it. As the screen moves vertically, we
will change the values on the y-axis. The object actually moves through
this anim_y_cb callback function. Next, let's implement the
parts needed for animation. You can set all the desired effects by
creating a variable of the type lv_anim. This is very similar to how we style lv objects. We will make the screen object a global variable so that it can be easily
accessed from other functions. Go to the anim_screen function again and specify the target for
animation as the screen. Now let's set up different
animation behaviors depending on whether the screen goes up or down. If the touch starts, the screen must be up. At this time, you can set the speed of the animation
by specifying the length of the animation. The shorter the length, the
faster the animation will end. We'll also move up the screen
about 100 pixels along the y-axis. Then, we will be able to
see the password input area. You can set the animation path.
This is like the animation curve, which tells you what style
the animation will move on. Set the same in the opposite case. When the user input ends
and the keyboard disappears, the screen should move back
to the original position. In this case, I set the animation
length to 100ms to make it run faster. It also moves to 0, the original
position of the screen's y-axis. The animation path was set
to lv_anim_path_ease_in. Before starting the animation,
set up a callback function that actually moves the screen object
and runs it to start the animation. Going back to the textarea callback function, When focused, it calls anim_screen true,
otherwise, it calls anim_screen false. Now let's build again and check. Whenever you try to type on the keyboard, the screen moves up so you
can see what you're typing without it being covered by the keyboard.
It also seems to work much better because it moves smoothly across the
screen thanks to the animation effect. It now works the way I wanted, and I'm happy that I was able to implement
everything I wanted to show in this episode. Lastly, if the password is a type
that requires entering numbers, You can select your desired input method
through the keyboard's set mode function. With this setting, entering
numbers is the default. Depending on the input type, you
can set the keyboard style you want. This is an extra example I made in the same style. Also, you can download and check
this source code from my GitHub. When using TFT_eSPI in LVGL, it
has a screen rotation setting and When entering a password, it turns into an
asterisk to hide your password on the screen. Other than that, it's the same. It's really fun to be able to
configure the screen you want. Also, I'm curious to see how far
it can go in the MCU environment. Okay. That's it. I'll think of a
more interesting episode. Thank you for watching.
See you on the next project.
