Hi team,
currently i am building screens using lvgl gui guider 1.9.1 for our LCD display
In one of my screens i have used 12 texareas where i need to give user input fields hence multiple keybiards are being used how do i disable those i jus need one keyboard for all the textareas.
Basically user needs to give user inputs for multiple fields for this i am using textareas and clicking on tickmark of keyboard triggers a callback to set this is my use case.
Please provide me the solution ASAP.
Thanks and regards,
sahana
Hi,
#include "lvgl.h"
static lv_obj_t *kb;
static void ta_focus_cb(lv_event_t *e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t *ta = lv_event_get_target(e);
if(code == LV_EVENT_FOCUSED || code == LV_EVENT_CLICKED) {
lv_keyboard_set_textarea(kb, ta);
lv_obj_clear_flag(kb, LV_OBJ_FLAG_HIDDEN);
}
}
static void ta_done_cb(lv_event_t *e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t *ta = lv_event_get_target(e);
if(code == LV_EVENT_READY) {
const char *val = lv_textarea_get_text(ta);
/* your commit callback here with `val` */
lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
lv_keyboard_set_textarea(kb, NULL);
} else if(code == LV_EVENT_CANCEL) {
lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
lv_keyboard_set_textarea(kb, NULL);
}
}
void screen_init(lv_obj_t *parent)
{
/* 1) Create one keyboard */
kb = lv_keyboard_create(parent);
lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
lv_obj_set_size(kb, LV_PCT(100), LV_PCT(40));
lv_keyboard_set_cursor_manage(kb, true);
/* 2) Create multiple text areas (example: 2; repeat for all 12) */
lv_obj_t *ta1 = lv_textarea_create(parent);
lv_obj_set_width(ta1, 200);
lv_obj_set_pos(ta1, 10, 10);
lv_obj_add_event_cb(ta1, ta_focus_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta1, ta_done_cb, LV_EVENT_ALL, NULL);
lv_obj_t *ta2 = lv_textarea_create(parent);
lv_obj_set_width(ta2, 200);
lv_obj_set_pos(ta2, 10, 60);
lv_obj_add_event_cb(ta2, ta_focus_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta2, ta_done_cb, LV_EVENT_ALL, NULL);
/* ...repeat for ta3..ta12... */
Best Regards,
Zhiming
Hi
Thanks for the solution
I am using lvgl guider 1.9.1 with v9.2.1 selected while creating project.
I did get an error saying there is no reference for
lv_keyboard_set_cursor_manage
I have tried my own custom code as you suggested to create input filed text areas but currently i can see overlapping of text area with the keyboard.
how can i overcome this basically i want my page to be scrollable so that user can see through other input check fields by scrolling which will also solve overlapping of keyboard problem i believe.
Attaching the screenshot and the code
Please provide me the solution asap
static lv_obj_t *kb;
lv_obj_t *ta_best_load_ratio_val_1;
lv_obj_t *ta_eco_cycle_period_val_1;
lv_obj_t *ta_eco_min_module_no_val_1;
lv_obj_t *ta_rect_save_stop_val_1;
lv_obj_t *ta_dry_time_val_1;
lv_obj_t *ta_best_load_ratio_val_2;
lv_obj_t *ta_eco_cycle_period_val_2;
lv_obj_t *ta_eco_min_module_no_val_2;
lv_obj_t *ta_dcdc_save_stop_val_2;
lv_obj_t *ta_dry_time_val_2;
LV_FONT_DECLARE(lv_font_NotoSans_Regular_18);
/* --- Callbacks --- */
static void ta_focus_cb(lv_event_t *e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t *ta = lv_event_get_target(e);
if(code == LV_EVENT_CLICKED) {
lv_keyboard_set_textarea(kb, ta);
lv_obj_clear_flag(kb, LV_OBJ_FLAG_HIDDEN);
lv_obj_scroll_to_view(ta, LV_ANIM_ON);
}
}
static void ta_done_cb(lv_event_t *e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t *ta = lv_event_get_target(e);
if(code == LV_EVENT_READY) {
const char *val = lv_textarea_get_text(ta);
/* TODO: commit val to your app logic here */
lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
lv_keyboard_set_textarea(kb, NULL);
printf("User entered: %s\n", val);
fflush(stdout);
lv_obj_scroll_to_y(lv_obj_get_parent(ta), 0, LV_ANIM_ON);
} else if(code == LV_EVENT_CANCEL) {
lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
lv_keyboard_set_textarea(kb, NULL);
}
}
static void kb_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * kb = lv_event_get_target(e);
if(code == LV_EVENT_READY) {
lv_obj_t * ta = lv_keyboard_get_textarea(kb);
if(ta) {
const char * txt = lv_textarea_get_text(ta);
printf("Committed value: %s\n", txt);
fflush(stdout);
// reset bg to default
lv_obj_set_style_bg_color(ta, lv_color_hex(0xD8D8D8), 0);
lv_obj_clear_state(ta, LV_STATE_FOCUSED);
}
lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
lv_keyboard_set_textarea(kb, NULL);
}
else if(code == LV_EVENT_CANCEL) {
lv_obj_t * ta = lv_keyboard_get_textarea(kb);
if(ta) {
// reset bg to default
lv_obj_set_style_bg_color(ta, lv_color_hex(0xD8D8D8), 0);
}
lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
lv_keyboard_set_textarea(kb, NULL);
}
}
static void textarea_event_cb(lv_event_t * e)
{
lv_obj_t * ta = lv_event_get_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_CLICKED) {
// User clicked / focused → mark editable
lv_obj_set_style_bg_color(ta, lv_color_hex(ECO_LABEL_EDIT), 0);
}
else if(code == LV_EVENT_DEFOCUSED ) {
// Lost focus (like clicking outside) → reset
lv_obj_set_style_bg_color(ta, lv_color_hex(ECO_LABEL_DEFAULT), 0);
}
}
static void keyboard_event_cb(lv_event_t * e)
{
lv_obj_t * kb = lv_event_get_target(e);
lv_event_code_t code = lv_event_get_code(e);
if(code == LV_EVENT_READY) { // Tick / OK button pressed
lv_obj_t * ta = lv_keyboard_get_textarea(kb);
if(ta) {
const char * txt = lv_textarea_get_text(ta);
// Simple validation: check if user entered something
if(txt && strlen(txt) > 0) {
printf("User entered: %s", txt);
fflush(stdout);
} else {
printf("No input provided!");
fflush(stdout);
}
// Reset to default once input is taken
lv_obj_set_style_bg_color(ta, lv_color_hex(ECO_LABEL_DEFAULT), 0);
}
}
}
void screen_init(lv_obj_t *parent)
{
lv_obj_set_scroll_dir(guider_ui.ECO_page, LV_DIR_VER);
lv_obj_set_scrollbar_mode(guider_ui.ECO_page, LV_SCROLLBAR_MODE_ON);
/* 1) Create one keyboard */
kb = lv_keyboard_create(parent);
lv_obj_add_flag(kb, LV_OBJ_FLAG_HIDDEN);
lv_obj_set_size(kb, LV_PCT(100), LV_PCT(40));
lv_obj_align(kb, LV_ALIGN_BOTTOM_MID, 0, 0);
// lv_obj_add_event_cb(kb, kb_event_cb, LV_EVENT_ALL, NULL);
ta_best_load_ratio_val_1 = lv_textarea_create(parent);
lv_obj_set_pos(ta_best_load_ratio_val_1, 279, 132);
lv_obj_set_size(ta_best_load_ratio_val_1, 104, 30);
lv_obj_set_style_bg_color(ta_best_load_ratio_val_1, lv_color_hex(0xE8E8E8), 0);
lv_obj_set_style_text_font(ta_best_load_ratio_val_1, &lv_font_NotoSans_Regular_18, 0);
lv_obj_add_event_cb(ta_best_load_ratio_val_1, ta_focus_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_best_load_ratio_val_1, ta_done_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_best_load_ratio_val_1, textarea_event_cb, LV_EVENT_ALL, NULL);
// lv_obj_clear_flag(ta_best_load_ratio_val_1, LV_OBJ_FLAG_SCROLLABLE);
ta_eco_cycle_period_val_1 = lv_textarea_create(parent);
lv_obj_set_pos(ta_eco_cycle_period_val_1, 279, 169);
lv_obj_set_size(ta_eco_cycle_period_val_1, 104, 30);
lv_obj_set_style_bg_color(ta_eco_cycle_period_val_1, lv_color_hex(0xD8D8D8), 0);
lv_obj_set_style_text_font(ta_eco_cycle_period_val_1, &lv_font_NotoSans_Regular_18, 0);
lv_obj_add_event_cb(ta_eco_cycle_period_val_1, ta_focus_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_eco_cycle_period_val_1, ta_done_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_eco_cycle_period_val_1, textarea_event_cb, LV_EVENT_ALL, NULL);
// lv_obj_clear_flag(ta_eco_cycle_period_val_1, LV_OBJ_FLAG_SCROLLABLE);
ta_eco_min_module_no_val_1 = lv_textarea_create(parent);
lv_obj_set_pos(ta_eco_min_module_no_val_1, 693, 95);
lv_obj_set_size(ta_eco_min_module_no_val_1, 104, 30);
lv_obj_set_style_bg_color(ta_eco_min_module_no_val_1, lv_color_hex(0xD8D8D8), 0);
lv_obj_set_style_text_font(ta_eco_min_module_no_val_1, &lv_font_NotoSans_Regular_18, 0);
lv_obj_add_event_cb(ta_eco_min_module_no_val_1, ta_focus_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_eco_min_module_no_val_1, ta_done_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_eco_min_module_no_val_1, textarea_event_cb, LV_EVENT_ALL, NULL);
// lv_obj_clear_flag(ta_eco_min_module_no_val_1, LV_OBJ_FLAG_SCROLLABLE);
ta_rect_save_stop_val_1 = lv_textarea_create(parent);
lv_obj_set_pos(ta_rect_save_stop_val_1, 693, 132);
lv_obj_set_size(ta_rect_save_stop_val_1, 104, 30);
lv_obj_set_style_bg_color(ta_rect_save_stop_val_1, lv_color_hex(0xE8E8E8), 0);
lv_obj_set_style_text_font(ta_rect_save_stop_val_1, &lv_font_NotoSans_Regular_18, 0);
lv_obj_add_event_cb(ta_rect_save_stop_val_1, ta_focus_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_rect_save_stop_val_1, ta_done_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_rect_save_stop_val_1, textarea_event_cb, LV_EVENT_ALL, NULL);
// lv_obj_clear_flag(ta_rect_save_stop_val_1, LV_OBJ_FLAG_SCROLLABLE);
ta_dry_time_val_1 = lv_textarea_create(parent);
lv_obj_set_pos(ta_dry_time_val_1, 693, 169);
lv_obj_set_size(ta_dry_time_val_1, 104, 30);
lv_obj_set_style_bg_color(ta_dry_time_val_1, lv_color_hex(0xD8D8D8), 0);
lv_obj_set_style_text_font(ta_dry_time_val_1, &lv_font_NotoSans_Regular_18, 0);
lv_obj_add_event_cb(ta_dry_time_val_1, ta_focus_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_dry_time_val_1, ta_done_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_dry_time_val_1, textarea_event_cb, LV_EVENT_ALL, NULL);
// lv_obj_clear_flag(ta_dry_time_val_1, LV_OBJ_FLAG_SCROLLABLE);
ta_best_load_ratio_val_2 = lv_textarea_create(parent);
lv_obj_set_pos(ta_best_load_ratio_val_2, 279, 280);
lv_obj_set_size(ta_best_load_ratio_val_2, 104, 30);
lv_obj_set_style_bg_color(ta_best_load_ratio_val_2, lv_color_hex(0xE8E8E8), 0);
lv_obj_set_style_text_font(ta_best_load_ratio_val_2, &lv_font_NotoSans_Regular_18, 0);
lv_obj_add_event_cb(ta_best_load_ratio_val_2, ta_focus_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_best_load_ratio_val_2, ta_done_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_best_load_ratio_val_2, textarea_event_cb, LV_EVENT_ALL, NULL);
// lv_obj_clear_flag(ta_best_load_ratio_val_2, LV_OBJ_FLAG_SCROLLABLE);
ta_eco_cycle_period_val_2 = lv_textarea_create(parent);
lv_obj_set_pos(ta_eco_cycle_period_val_2, 279, 317);
lv_obj_set_size(ta_eco_cycle_period_val_2, 104, 30);
lv_obj_set_style_bg_color(ta_eco_cycle_period_val_2, lv_color_hex(0xD8D8D8), 0);
lv_obj_set_style_text_font(ta_eco_cycle_period_val_2, &lv_font_NotoSans_Regular_18, 0);
lv_obj_add_event_cb(ta_eco_cycle_period_val_2, ta_focus_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_eco_cycle_period_val_2, ta_done_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_eco_cycle_period_val_2, textarea_event_cb, LV_EVENT_ALL, NULL);
// lv_obj_clear_flag(ta_eco_cycle_period_val_2, LV_OBJ_FLAG_SCROLLABLE);
ta_eco_min_module_no_val_2 = lv_textarea_create(parent);
lv_obj_set_pos(ta_eco_min_module_no_val_2, 693, 243);
lv_obj_set_size(ta_eco_min_module_no_val_2, 104, 30);
lv_obj_set_style_bg_color(ta_eco_min_module_no_val_2, lv_color_hex(0xD8D8D8), 0);
lv_obj_set_style_text_font(ta_eco_min_module_no_val_2, &lv_font_NotoSans_Regular_18, 0);
lv_obj_add_event_cb(ta_eco_min_module_no_val_2, ta_focus_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_eco_min_module_no_val_2, ta_done_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_eco_min_module_no_val_2, textarea_event_cb, LV_EVENT_ALL, NULL);
// lv_obj_clear_flag(ta_eco_min_module_no_val_2, LV_OBJ_FLAG_SCROLLABLE);
ta_dcdc_save_stop_val_2 = lv_textarea_create(parent);
lv_obj_set_pos(ta_dcdc_save_stop_val_2, 693, 280);
lv_obj_set_size(ta_dcdc_save_stop_val_2, 104, 30);
lv_obj_set_style_bg_color(ta_dcdc_save_stop_val_2, lv_color_hex(0xE8E8E8), 0);
lv_obj_set_style_text_font(ta_dcdc_save_stop_val_2, &lv_font_NotoSans_Regular_18, 0);
lv_obj_add_event_cb(ta_dcdc_save_stop_val_2, ta_focus_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_dcdc_save_stop_val_2, ta_done_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_dcdc_save_stop_val_2, textarea_event_cb, LV_EVENT_ALL, NULL);
// lv_obj_clear_flag(ta_dcdc_save_stop_val_2, LV_OBJ_FLAG_SCROLLABLE);
ta_dry_time_val_2 = lv_textarea_create(parent);
lv_obj_set_pos(ta_dry_time_val_2, 693, 317);
lv_obj_set_size(ta_dry_time_val_2, 104, 30);
lv_obj_set_style_bg_color(ta_dry_time_val_2, lv_color_hex(0xD8D8D8), 0);
lv_obj_set_style_text_font(ta_dry_time_val_2, &lv_font_NotoSans_Regular_18, 0);
lv_obj_add_event_cb(ta_dry_time_val_2, ta_focus_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_dry_time_val_2, ta_done_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(ta_dry_time_val_2, textarea_event_cb, LV_EVENT_ALL, NULL);
// lv_obj_clear_flag(ta_dry_time_val_2, LV_OBJ_FLAG_SCROLLABLE);
// lv_obj_add_event_cb(kb, keyboard_event_cb, LV_EVENT_ALL, NULL);
}
/* Initialize custom UI */
void custom_init(lv_ui *ui)
{
init_screen_timeout();
screen_init(ui->ECO_page);
}
Hi,
Please refer the LVGL manual to use scrolling feature.
https://docs.lvgl.io/master/details/common-widget-features/scrolling.html
Best Regards,
Zhiming