Keyboard Widget- How to activate "OK" (tick symbol) Key

Hi,

I am trying to use the Squareline keyboard widget (only numbers keyboard). I would like to make the keyboard disappear when “OK” key is pressed but by default the “OK” key i grayed out and does not perform any action.
Is there any way to make that happen is Squareline software or this has to happen in the generated code by the software (LVGL code)? If through the code, Ho would you implement such action?

In general how do you access and modify the actions of each button?

Thanks

The way I did it was:
The keyboard is below the screen draw area by default, and when the text field is clicked, an ‘event’ runs an animation of the keyboard’s Y position to bring it up. Then a down animation is executed in the code, in the next bit:

The way to do something when the checkmark button is pressed (is that the one you mean?) is to create an event on the keyboard which calls a custom function that is triggered by “READY”
image

This gets exported from SquareLine as a function into which the event is passed. I’m not sure if you need to check what key was pressed again, but I do in mine and it works exactly as expected - what you need to check for is “LV_EVENT_READY”.
image

and you get this (but yours would be a different keyboard, and ignore the display glitching thats something else)
glitch03

1 Like

@ASMD
Thanks so much for your help
That saves me a lot of time. That seems like to be the solution.
I’ll give it a try. The video is exactly what Im looking for to do.

No probs! Hope it works for you :+1:

Hi @ASMD

a question,
what part of the code specifies that the checkmark button should hide the keyboard? what If I waana use the same code you suggested but this time for another key such as " * " for example (just random key).

I am trying to understand the concept of this approach to use it for other things.

Thanks

Sure,
In the code snippet here, the highlighted bit runs the keyboard down animation created in SquareLine.
image

We get to this point in the function because we’re checking the event code that gets passed into the function. LV_EVENT_READY is the checkmark key, the star key will be a different name.
You can check for any key that is pressed. I think the key designations are in the documentation somewhere :thinking:

edit:
I think maybe in SquareLine you need to change the trigger to ‘pressed’ or ‘clicked’ or something, and then you can check for they keypress you’re looking for
image

1 Like

Hi Ya’ll,

This topic was quite helpful for me.

I just wanted to give my code example because although I created my project in SLS, I made my keyboard (number pad) manually because I reuse it repeatedly on different screens to edit dozens of text areas. When a text area is clicked the number pad is created (in different locations depending on the text area location), and when it looses focus (or checkmark is clicked) the number pad is destroyed. The text area “clicked” and “loose focus” triggers are both added from the SLS project.

At the end of the function that creates the number pad, I link a callback event…

lv_obj_add_event_cb(ta_number_pad, num_pad_OK_clicked, LV_EVENT_ALL, NULL);

That function looks like this. It only overrides the OK button, and other buttons continue to operate normally.

void num_pad_OK_clicked(lv_event_t * e)
{
	lv_event_code_t code = lv_event_get_code(e);
	lv_obj_t * kb = lv_event_get_target(e);

	pad_ok_event.target = lv_keyboard_get_textarea(kb);

	if(code == LV_EVENT_VALUE_CHANGED) {
		const char * btn_txt = lv_keyboard_get_btn_text(kb, lv_keyboard_get_selected_btn(kb));

		if(btn_txt && strcmp(btn_txt, LV_SYMBOL_OK) == 0)
		{
			gui_save_setting(&pad_ok_event);
		}
	}
}

The keyboard gets destroyed in my save setting function.

I hope this helps someone else.

Oh yeah, and because I created my number pad manually, I had to override the control matrix to enable the OK button.

static const lv_btnmatrix_ctrl_t num_pad_w_ok_ctrl_num_map[] = {
    1, 1, 1, LV_KEYBOARD_CTRL_BTN_FLAGS | 2,
    1, 1, 1, 2,
    1, 1, 1, 2,
    1, 1, 1, 1, 1
};

Assign like this:

    lv_btnmatrix_set_ctrl_map(ta_number_pad, num_pad_w_ok_ctrl_num_map);