Description
I have an object with a number of text boxes on it. When using the 4th textbox the keyboard covers the input so you cant see what you are typing/deleting.
Ideally when the text box is focused the page would scroll up so the text box could be seen.
What MCU/Processor/Board and compiler are you using?
What LVGL version are you using?
8.4
What do you want to achieve?
As described
What have you tried so far?
See code below
Code to reproduce
Main init:
void ui_settings_screen_init(void)
{
ui_settings_screen = lv_obj_create(scr);
lv_obj_add_flag( ui_settings_screen, LV_OBJ_FLAG_SCROLL_ON_FOCUS ); /// Flags
//settings_window = lv_win_create(ui_settings_screen, 0);
//settings_container = lv_win_get_content(settings_window);
//lv_obj_set_size(settings_window, 480, 480);
//lv_obj_add_flag( settings_container, LV_OBJ_FLAG_SCROLL_ON_FOCUS ); /// Flags
//lv_obj_set_style_pad_left(settings_container, 0, LV_PART_MAIN);
//lv_obj_set_style_pad_right(settings_container, 0, LV_PART_MAIN);
//lv_obj_set_style_pad_top(settings_container, 0, LV_PART_MAIN);
//lv_obj_set_style_pad_bottom(settings_container, 0, LV_PART_MAIN);
//lv_obj_set_size(settings_container, 480, 720);
//lv_obj_clear_flag( ui_settings_screen, LV_OBJ_FLAG_SCROLLABLE ); /// Flags
//lv_obj_set_height(ui_settings_screen, 720);
//lv_obj_set_width(ui_settings_screen, 480);
//lv_obj_set_pos(ui_settings_screen, 0, 0);
//lv_obj_add_flag( ui_settings_screen, LV_OBJ_FLAG_SCROLLABLE ); /// Flags
/*
//Set the main background
Serial.println("Create BG Image");
img_SettingsBG = lv_img_create(ui_settings_screen);
lv_img_set_src(img_SettingsBG, &ui_img_settings_screen_bg_png);
lv_obj_set_width( img_SettingsBG, LV_SIZE_CONTENT); /// 480
lv_obj_set_height( img_SettingsBG, LV_SIZE_CONTENT); /// 480
lv_obj_set_align( img_SettingsBG, LV_ALIGN_CENTER );
lv_obj_add_flag( img_SettingsBG, LV_OBJ_FLAG_CLICKABLE | LV_OBJ_FLAG_ADV_HITTEST ); /// Flags
lv_obj_clear_flag( img_SettingsBG, LV_OBJ_FLAG_SCROLLABLE ); /// Flags
*/
int tbwidth = (LV_HOR_RES/2)+(LV_HOR_RES/14);
#define LABEL_WIDTH 150
lv_obj_t * settings_label = lv_label_create(ui_settings_screen);
lv_obj_set_style_text_font(settings_label, &lv_font_montserrat_40, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_obj_set_width(settings_label, LV_HOR_RES);
lv_label_set_text(settings_label, "Settings");
lv_obj_set_pos(settings_label, 0, 10);
lv_obj_set_style_text_align(settings_label, LV_TEXT_ALIGN_CENTER, 0);
// Wifi
lv_obj_t * ssid_label = lv_label_create(ui_settings_screen);
lv_obj_set_style_text_font(ssid_label, &lv_font_montserrat_28, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_obj_set_width(ssid_label, LABEL_WIDTH);
lv_label_set_text(ssid_label, "SSID:");
lv_obj_align_to(ssid_label, settings_label, LV_ALIGN_BOTTOM_LEFT, 20, 60 ); //60 Was 80
ssid_ta = lv_textarea_create(ui_settings_screen);
lv_obj_set_style_text_font(ssid_ta, &lv_font_montserrat_28, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_obj_set_style_border_color(ssid_ta, MAIN_BORDER_COLOUR, LV_PART_MAIN);
lv_obj_set_style_pad_top(ssid_ta, 5, LV_PART_MAIN);
lv_obj_set_style_pad_bottom(ssid_ta, 5, LV_PART_MAIN);
lv_obj_add_flag(ssid_ta, LV_OBJ_FLAG_CLICK_FOCUSABLE | LV_OBJ_FLAG_SCROLL_ON_FOCUS);
lv_obj_set_style_bg_opa(ssid_ta, 0, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_textarea_set_text(ssid_ta, wifi_ssid.c_str());
lv_textarea_set_one_line(ssid_ta, true);
lv_obj_set_width(ssid_ta, tbwidth);
lv_obj_align_to(ssid_ta, ssid_label, LV_ALIGN_OUT_RIGHT_MID, 0, 0);
lv_obj_add_event_cb(ssid_ta, ta_event_cb, LV_EVENT_CLICKED, NULL);
lv_obj_add_event_cb(ssid_ta, ta_event_cb, LV_EVENT_DEFOCUSED, NULL);
//Pass
lv_obj_t * pass_label = lv_label_create(ui_settings_screen);
lv_obj_set_style_text_font(pass_label, &lv_font_montserrat_28, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_obj_set_width(pass_label, LABEL_WIDTH);
lv_label_set_text(pass_label, "Pass:");
lv_obj_align_to(pass_label, ssid_label, LV_ALIGN_BOTTOM_LEFT, 0, 60 ); //60 Was 80
pass_ta = lv_textarea_create(ui_settings_screen);
lv_obj_set_style_text_font(pass_ta, &lv_font_montserrat_28, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_obj_set_style_border_color(pass_ta, MAIN_BORDER_COLOUR, LV_PART_MAIN);
lv_obj_set_style_pad_top(pass_ta, 5, LV_PART_MAIN);
lv_obj_set_style_pad_bottom(pass_ta, 5, LV_PART_MAIN);
lv_obj_add_flag(pass_ta, LV_OBJ_FLAG_CLICK_FOCUSABLE | LV_OBJ_FLAG_SCROLL_ON_FOCUS);
lv_obj_set_style_bg_opa(pass_ta, 0, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_textarea_set_text(pass_ta, wifi_pass.c_str());
lv_textarea_set_password_mode(pass_ta, true);
lv_textarea_set_one_line(pass_ta, true);
lv_obj_set_width(pass_ta, tbwidth);
lv_obj_align_to(pass_ta, pass_label, LV_ALIGN_OUT_RIGHT_MID, 0, 0);
lv_obj_add_event_cb(pass_ta, ta_event_cb, LV_EVENT_CLICKED, NULL);
lv_obj_add_event_cb(pass_ta, ta_event_cb, LV_EVENT_DEFOCUSED, NULL);
//Device Name
lv_obj_t * device_label = lv_label_create(ui_settings_screen);
lv_obj_set_style_text_font(device_label, &lv_font_montserrat_28, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_obj_set_width(device_label, LABEL_WIDTH);
lv_label_set_text(device_label, "Name:");
lv_obj_align_to(device_label, pass_label, LV_ALIGN_BOTTOM_LEFT, 0, 60 ); //60 Was 80
deviceName_ta = lv_textarea_create(ui_settings_screen);
lv_obj_set_style_text_font(deviceName_ta, &lv_font_montserrat_28, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_obj_set_style_border_color(deviceName_ta, MAIN_BORDER_COLOUR, LV_PART_MAIN);
lv_obj_set_style_pad_top(deviceName_ta, 5, LV_PART_MAIN);
lv_obj_set_style_pad_bottom(deviceName_ta, 5, LV_PART_MAIN);
lv_obj_add_flag(deviceName_ta, LV_OBJ_FLAG_CLICK_FOCUSABLE | LV_OBJ_FLAG_SCROLL_ON_FOCUS);
lv_obj_set_style_bg_opa(deviceName_ta, 0, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_textarea_set_text(deviceName_ta, deviceName.c_str());
lv_textarea_set_password_mode(deviceName_ta, false);
lv_textarea_set_one_line(deviceName_ta, true);
lv_obj_set_width(deviceName_ta, tbwidth);
lv_obj_align_to(deviceName_ta, device_label, LV_ALIGN_OUT_RIGHT_MID, 0, 0);
lv_obj_add_event_cb(deviceName_ta, ta_event_cb, LV_EVENT_CLICKED, NULL);
lv_obj_add_event_cb(deviceName_ta, ta_event_cb, LV_EVENT_DEFOCUSED, NULL);
//NTP Pool
lv_obj_t * ntp_label = lv_label_create(ui_settings_screen);
lv_obj_set_style_text_font(ntp_label, &lv_font_montserrat_28, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_obj_set_width(ntp_label, LABEL_WIDTH);
lv_label_set_text(ntp_label, "NTP:");
lv_obj_align_to(ntp_label, device_label, LV_ALIGN_BOTTOM_LEFT, 0, 60 ); //60 Was 80
ntp_ta = lv_textarea_create(ui_settings_screen);
lv_obj_set_style_text_font(ntp_ta, &lv_font_montserrat_28, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_obj_set_style_border_color(ntp_ta, MAIN_BORDER_COLOUR, LV_PART_MAIN);
lv_obj_set_style_pad_top(ntp_ta, 5, LV_PART_MAIN);
lv_obj_set_style_pad_bottom(ntp_ta, 5, LV_PART_MAIN);
lv_obj_add_flag(ntp_ta, LV_OBJ_FLAG_CLICK_FOCUSABLE | LV_OBJ_FLAG_SCROLL_ON_FOCUS);
lv_obj_set_style_bg_opa(ntp_ta, 0, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_textarea_set_text(ntp_ta, ntpServer.c_str());
lv_textarea_set_password_mode(ntp_ta, false);
lv_textarea_set_one_line(ntp_ta, true);
lv_obj_set_width(ntp_ta, tbwidth);
lv_obj_align_to(ntp_ta, ntp_label, LV_ALIGN_OUT_RIGHT_MID, 0, 0);
lv_obj_add_event_cb(ntp_ta, ta_event_cb, LV_EVENT_CLICKED, NULL);
lv_obj_add_event_cb(ntp_ta, ta_event_cb, LV_EVENT_DEFOCUSED, NULL);
lv_obj_t * btn_cancel = lv_btn_create(ui_settings_screen);
lv_obj_set_width(btn_cancel, 150);
lv_obj_add_style(btn_cancel, &style, 0);
lv_obj_add_style(btn_cancel, &style_pr, LV_STATE_PRESSED);
lv_obj_align_to(btn_cancel, ntp_ta, LV_ALIGN_OUT_LEFT_BOTTOM, 0, 40);
lv_obj_add_event_cb(btn_cancel, cb_btn_Cancel, LV_EVENT_RELEASED, NULL);
lv_obj_t * lbl_cancel = lv_label_create(btn_cancel);
lv_obj_set_style_text_font(lbl_cancel, &lv_font_montserrat_28, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_label_set_text(lbl_cancel, "Cancel");
lv_obj_center(lbl_cancel);
lv_obj_t * btn_save = lv_btn_create(ui_settings_screen);
lv_obj_set_width(btn_save, 150);
lv_obj_add_style(btn_save, &style, 0);
lv_obj_add_style(btn_save, &style_pr, LV_STATE_PRESSED);
//lv_obj_set_height(btn_save, 70);
lv_obj_align_to(btn_save, ntp_ta, LV_ALIGN_OUT_RIGHT_BOTTOM, -150, 40);
lv_obj_add_event_cb(btn_save, cb_btn_save, LV_EVENT_RELEASED, NULL);
lv_obj_t * lbl_save = lv_label_create(btn_save);
lv_obj_set_style_text_font(lbl_save, &lv_font_montserrat_28, LV_PART_MAIN| LV_STATE_DEFAULT);
lv_label_set_text(lbl_save, "Save");
lv_obj_center(lbl_save);
}
Callback:
static void ta_event_cb(lv_event_t * event)
{
lv_obj_t * ta = lv_event_get_target(event);
lv_event_code_t code = lv_event_get_code(event);
if(lv_kb != NULL && code == LV_EVENT_DEFOCUSED)
{
lv_obj_del(lv_kb);
lv_kb = NULL;
}
if(code == LV_EVENT_CLICKED && ta != NULL)
{
/* Focus on the clicked text area */
if(lv_kb != NULL)
{
lv_obj_del(lv_kb);
lv_kb = NULL;
lv_obj_set_height(ui_settings_screen, LV_VER_RES);
}
//lv_obj_set_height(ui_settings_screen, 720);
lv_kb = lv_keyboard_create(ui_settings_screen);
lv_obj_set_height(ui_settings_screen, LV_VER_RES - lv_obj_get_height(lv_kb));
//lv_obj_align_to(lv_kb, ui_settings_screen, LV_ALIGN_BOTTOM_LEFT, 0, 0 );
lv_obj_update_layout(ui_settings_screen);
lv_obj_add_event_cb(lv_kb, kb_event_cb, LV_EVENT_CLICKED, ta);
lv_obj_add_event_cb(lv_kb, kb_event_cb, LV_EVENT_CANCEL, ta);
lv_obj_add_event_cb(lv_kb, kb_event_cb, LV_EVENT_READY, ta);
//lv_win_focus(ui_settings_screen, lv_textarea_get_label(ta), LV_ANIM_ON);
lv_keyboard_set_textarea(lv_kb, ta);
lv_obj_scroll_to_view_recursive(ta, LV_ANIM_OFF);
}
}
Screenshot and/or video
Any and all help would be greatly appreciated.
Regards