LVGL Keyboard Pop-up

How-to
1

Description

Hi Team,
i am using lvgl keyboard for my login screen.
Currently i am displaying edit text areas button and keyboard on my screen.
My Question is
How to show keyboard when i click on edit text area to enter text and hide the keyboard when i touch anywhere on screen except edit text areas, button and keyboard.

What MCU/Processor/Board and compiler are you using?

ARM

What LVGL version are you using?

Version 7

What do you want to achieve?

What have you tried so far?

Code to reproduce

Add a code snippet which can run in the simulator. It should contain only the relevant code that compiles without errors when separated from your main code base.

The code block(s) should be formatted like:

/*You code here*/

Screenshot and/or video

If possible, add screenshots and/or videos about the current state.

2

I don’t tested but you can use something similar:

void lv_ex_textarea_1(void)
{
    ta1 = lv_textarea_create(lv_scr_act(), NULL);
    lv_obj_set_size(ta1, 200, 100);
    lv_obj_align(ta1, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_textarea_set_text(ta1, "A text in a Text Area");    /*Set an initial text*/
    lv_obj_set_event_cb(ta1, event_handler);
}

static void event_handler(lv_obj_t * obj, lv_event_t event)
{
    if(event == LV_EVENT_VALUE_CHANGED) {
        printf("Value: %s\n", lv_textarea_get_text(obj));
    }
    else if(event == LV_EVENT_LONG_PRESSED_REPEAT) {
          makeKeyBoard();
        }
    }
}

static void makeKeyboard(){
  kb = lv_keyboard_create(lv_scr_act(), NULL);
  lv_obj_set_size(kb,  LV_HOR_RES, LV_VER_RES / 2);
  lv_keyboard_set_cursor_manage(kb, true);
  lv_obj_add_style(kb, LV_OBJ_PART_MAIN, &smallFont);
  lv_keyboard_set_textarea(kb, ta1);
  lv_obj_set_event_cb(kb, keyboard_event_cb);
  lv_obj_move_background(kb);
}

static void keyboard_event_cb(lv_obj_t * kb, lv_event_t event){
  lv_keyboard_def_event_cb(kb, event);

  if(event == LV_EVENT_APPLY){
    lv_obj_move_background(kb);
    
  }else if(event == LV_EVENT_CANCEL){
    lv_obj_move_background(kb);
  }
}
3
  • Here’s an example from Widgets
 static lv_obj_t* cont;
 static lv_obj_t* kb;
/**
* @brief keyboard回调函数
*/
static void kb_event_cb(lv_obj_t* _kb, lv_event_t e)
 {
     lv_keyboard_def_event_cb(kb, e);

     if (e == LV_EVENT_CANCEL) {
         if (kb) {
             lv_obj_set_height(cont, LV_VER_RES);
             lv_obj_del(kb);
             kb = NULL;
         }
     }
 }
 /**
 * @brief textarea回调函数
 */
 static void ta_event_handler(lv_obj_t* ta, lv_event_t e)
 {
     if (e == LV_EVENT_RELEASED) {
         if (kb == NULL) {
             lv_obj_set_height(cont, LV_VER_RES / 2);
             kb = lv_keyboard_create(lv_scr_act(), NULL);
             lv_obj_set_event_cb(kb, kb_event_cb);

             lv_indev_wait_release(lv_indev_get_act());
         }
         lv_textarea_set_cursor_hidden(ta, false);
      /*   lv_page_focus(t1, lv_textarea_get_label(ta), LV_ANIM_ON);*/
         lv_keyboard_set_textarea(kb, ta);
     }
     else if (e == LV_EVENT_DEFOCUSED) {
         lv_textarea_set_cursor_hidden(ta, true);
     }
 }
 /**
 * @brief 容器点击回调函数
 */
 static void screen_event_cb(lv_obj_t* obj, lv_event_t event)
 {
     if (event == LV_EVENT_CLICKED)
     {
         lv_event_send(kb, LV_EVENT_CANCEL, NULL);
     }
 }
/**
* @brief创建textarea
*/
void textarea_create(void)
{
// 背景屏幕创建并加载
	  lv_obj_t *screen = lv_obj_create(lv_scr_act(), NULL);
    lv_obj_set_size(screen, LV_HOR_RES, LV_VER_RES);
    lv_obj_set_style_local_bg_color(screen, LV_OBJ_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_MAKE(0,180,255));   //配置背景色

    // 容器布局创建
    cont = lv_cont_create(screen, NULL);
    lv_cont_set_layout(cont, LV_LAYOUT_PRETTY_MID);
    lv_cont_set_fit2(cont, LV_FIT_NONE, LV_FIT_TIGHT);
    lv_obj_set_width(cont, LV_HOR_RES);
    lv_obj_set_event_cb(cont, screen_event_cb);
    lv_obj_set_click(cont, true);  // 可点击使能
   
    // textarea创建
    lv_obj_t* ta = lv_textarea_create(cont, NULL);
    lv_cont_set_fit2(ta, LV_FIT_PARENT, LV_FIT_NONE);
    lv_textarea_set_text(ta, "");
    lv_textarea_set_placeholder_text(ta, "E-mail address");
    lv_textarea_set_one_line(ta, true);
    lv_textarea_set_cursor_hidden(ta, true);
    lv_obj_set_event_cb(ta, ta_event_handler);

    ta = lv_textarea_create(cont, ta);
    lv_textarea_set_pwd_mode(ta, true);
    lv_textarea_set_placeholder_text(ta, "Password");

    ta = lv_textarea_create(cont, NULL);
    lv_cont_set_fit2(ta, LV_FIT_PARENT, LV_FIT_NONE);
    lv_textarea_set_text(ta, "");
    lv_textarea_set_placeholder_text(ta, "Message");
    lv_textarea_set_cursor_hidden(ta, true);
    lv_obj_set_event_cb(ta, ta_event_handler);
    lv_cont_set_fit4(ta, LV_FIT_PARENT, LV_FIT_PARENT, LV_FIT_NONE, LV_FIT_PARENT);
}