ESP32 and touch display - part 7, how to make a keyboard in LVGL? Login.

.
Today we are going to look at the topic of entering text through a touchscreen display in LVGL. With older displays, without the "touch" option, you had to have a separate keyboard to enter anything at all. This was quite problematic. With a touch display, on the other hand, we can simply display a 'virtual' keyboard on the screen and handle it 100% in code. LVGL offers a ready-made mechanism for such a keyboard, which I will present here. I will then expand on the example shown to create a simple login form from it - login and password. By the way, we will also practice changing the active view (back and forth - login and logout).
In the previous parts I used SquareLine Studio to create the UI, but today I will create everything in code.
This topic continues the series on the ESP32-2432S028R board:
ESP32 and touchscreen display - tutorial - part 1 - how to program? Basics .
ESP32 and touch display - part 2 - how to draw pixels, lines, shapes, performance issues
ESP32 and touch display - tutorial part 3 - interactions, games and fun .
ESP32 and touch display - tutorial part 4 - web weather, APIs, JSON .
ESP32 and touch display - part 5 - LVGL in SquareLine Studio .
ESP32 and touchscreen display - part 6, RGB lamp control, RGB picker

Let's start with a simple keyboard example from the documentation . Basically I've just improved the pointer retrieval to the screen object here:
.
The code above fully creates the required elements, sets their positions and dimensions. Let's take a closer look at it.
Here we have the following sections. Creating the main panel with the scroll option:
.
Creating the keyboard:
.
Creating a text box:
Setting its events.
Setting its event handlers, setting its text, positioning (relative to the top left corner):
.
The "placeholder" text is that grey text that is a hint of what to type which is displayed before we type anything ourselves.
The second field, as above:
.
Pinning the keyboard to the first field:
.
We compile and upload. As a result, we have a keyboard that automatically adds characters to the selected field.

Ok, but what about the second field? Why is it not possible to write to it?
It's because we have to manually rewrite the keyboard to that field, which is active.
Let's convert our example into a login form. To do this, we add an event handler for each of the fields. When a FOCUSED event occurs (activating a field), we rewire the keyboard to that field. At the moment of losing FOCUSED, we retract this keyboard.
.
I have also slightly modified the creation of fields. LVGL even offers ready-made functions for creating login forms, including a password field - lv_textarea_set_password_mode . More information in the documentation .
The mentioned event handler must be pinned to both fields. A single function is sufficient. All code:
.
Uploaded, here is the result:
.
Indeed, it looks like a login form and even the password is correctly covered with asterisks.

Time for a minor cosmetic touch - the login button and label.
Let's add, first of all, some kind of label informing about the login status:
.
Then, separately, we add a button with an appropriate caption. You can also set it to handle a click - EVENT_CLICKED event via lv_obj_add_event_cb.
.
I have added the event commented out for now. Let's check how the button itself looks...
Result:
.
We have done something wrong! The button is above the keyboard. You can see that the order plays a role. The easiest way is to move the keyboard creation earlier. Or you could use:
.
This will move the keyboard to the foreground:
.
The handling of the button itself can now be addressed. We will program what happens when the event-click on the button occurs.

But first we need to take the variables out of the function, for simplicity I'll just create them as global variables.
.
Then you can pack it into a class as you wish, or alternatively leave it as global but label it somehow, better name it, maybe "g_fieldLogin"?
We are more interested in the click handling. We remove the "comment" from the event setting function and get on with its implementation:
.
First we retrieve the entered field captions, i.e. what the user has specified:
.
Then, as a demonstration, we check that the login is "ele" and the password is "12". Normally here would be a slightly different check, perhaps an HTTP request to the server via the API?
.
Eventually, depending on the correctness of the data, we display an error or success. A transition to another screen can also be given here.
.
All in all, the text could still be coloured.... this way the error message could be in red and the success message would be in green. There is a separate function for this too:
.
Time to check our work. The result:
.
The password and login are checked correctly. It is time to implement the second screen.
This can be implemented in a variety of ways, but I have assumed that when switching I release the memory of the old screen and create the second screen anew. You can't destroy the existing (active) screen, so I create the new one first, activate it and then destroy the old one. All in all you could probably also keep both in memory and toggle, that would be ok too, the only bad option here is to create more screens without releasing the previous ones, because this way you will quickly run out of memory.
.
In this particular place we create our second screen, the welcome screen after login:
.
By the way, I liked the lv_label_set_text_fmt function - it immediately supports text formatting, just like printf. You can conveniently set the text for a label type object.

The rest as before:
.
Let's check the logging operation, this time on a video:
.

We can still expand our example a bit and demonstrate vertical scrolling in the screen after login. Let's add a bit more text and make sure the LV_OBJ_FLAG_SCROLLABLE flag is enabled.
.
For convenience we will add the texts in a loop, let's say there will be 50 of them.
.
I haven't specified the height of the panel here - it will adjust itself to the requirements of what's inside.
What's left is the rest of the code, the one with that button to log out:
.
Here is the final result in the video:

I apologise in advance for the "lack of responsiveness" in the videos, it's not a code issue, I could have operated the stylus for more precision.

In summary , LVGL offers a convenient, off-the-shelf mechanism for handling text fields and entering data into them. With just a few lines of code, a touch-sensitive keyboard deceptively resembles popular mobile devices. Data entry is also automatic, and we can then process the data as we wish, e.g. create a login form based on this.
In this topic, by the way, we also practised creating interfaces from the code level, without the involvement of SquareLine Studio , which in principle, in many ways for me, turned out to be simpler than the previously presented method based on the visual editor.... but for the moment you have both methods described, everyone will choose as they see fit.
The project presented here could be taken further and based on it you could make some kind of password-protected access panel to the settings of a smart home or some kind of machine, you could also try to make a client of some simple communicator that would run fully on ESP, maybe for example a GG client?
And how would you guys use the input/keyboard system shown here?
Feel free to comment.