LVGL V8学习之键盘按键样式重绘（一）
·
这一篇研究一下基于btnmatrix的键盘按键重绘，还是通过codeblock来模拟代码的运行，代码如下：
static const char * kb_map[] =
{
"1","2", "3","\n",
"4", "5", "6", "\n",
"7", "8", "9" ,"\n",
".","0",LV_SYMBOL_BACKSPACE,""
};
static void textarea_event_callback(lv_event_t * event)
{
if (event == NULL)
{
printf("[%s:%d] event is NULL\n", __FUNCTION__, __LINE__);
return ;
}
lv_event_code_t code = lv_event_get_code(event);
lv_obj_t * text_area_obj = lv_event_get_target(event);
if ((code == LV_EVENT_CLICKED) && (text_area_obj != NULL))
{
}
}
static void btnmatrix_event_cb(lv_event_t * event)
{
if (event == NULL)
{
printf("[%s:%d] event is NULL\n", __FUNCTION__, __LINE__);
return ;
}
lv_event_code_t code = lv_event_get_code(event);
lv_obj_t * obj = lv_event_get_target(event);
if (LV_EVENT_VALUE_CHANGED == code)
{
if (obj != NULL)
{
lv_obj_t * text_area_obj = (lv_obj_t *)lv_event_get_user_data(event);
uint16_t id = lv_btnmatrix_get_selected_btn(obj);
const char * txt = lv_btnmatrix_get_btn_text(obj, id);
if (text_area_obj != NULL)
{
if (strcmp(txt, LV_SYMBOL_BACKSPACE) == 0)
{
lv_textarea_del_char(text_area_obj);
}
else
{
lv_textarea_add_text(text_area_obj, txt);
}
}
}
}
else if (code == LV_EVENT_DRAW_PART_BEGIN)
{
lv_obj_draw_part_dsc_t * dsc = lv_event_get_param(event);
/*Change the draw descriptor the 1st button*/
if (dsc->id == 0)
{
dsc->rect_dsc->radius = 5; //LV_RADIUS_CIRCLE;
if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF954D);//lv_palette_darken(LV_PALETTE_RED, 3);
}
else
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF6008);//lv_palette_main(LV_PALETTE_RED);
}
dsc->label_dsc->color = lv_color_white();
}
else if (dsc->id == 1)
{
dsc->rect_dsc->radius = 5; //LV_RADIUS_CIRCLE;
if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF954D);//lv_palette_darken(LV_PALETTE_RED, 3);
}
else
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF6008);//lv_palette_main(LV_PALETTE_RED);
}
dsc->label_dsc->color = lv_color_white();
}
/*Change the draw descriptor the 3rd button*/
else if (dsc->id == 2)
{
dsc->rect_dsc->radius = 5; //LV_RADIUS_CIRCLE;
if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF954D);//lv_palette_darken(LV_PALETTE_RED, 3);
}
else
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF6008);//lv_palette_main(LV_PALETTE_RED);
}
dsc->label_dsc->color = lv_color_white();
}
else if (dsc->id == 3)
{
dsc->rect_dsc->radius = 5; //LV_RADIUS_CIRCLE;
if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF954D);//lv_palette_darken(LV_PALETTE_RED, 3);
}
else
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF6008);//lv_palette_main(LV_PALETTE_RED);
}
dsc->label_dsc->color = lv_color_white();
}
else if (dsc->id == 4)
{
dsc->rect_dsc->radius = 5; //LV_RADIUS_CIRCLE;
if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF954D);//lv_palette_darken(LV_PALETTE_RED, 3);
}
else
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF6008);//lv_palette_main(LV_PALETTE_RED);
}
dsc->label_dsc->color = lv_color_white();
}
else if (dsc->id == 5)
{
dsc->rect_dsc->radius = 5; //LV_RADIUS_CIRCLE;
if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF954D);//lv_palette_darken(LV_PALETTE_RED, 3);
}
else
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF6008);//lv_palette_main(LV_PALETTE_RED);
}
dsc->label_dsc->color = lv_color_white();
}
else if (dsc->id == 6)
{
dsc->rect_dsc->radius = 5; //LV_RADIUS_CIRCLE;
if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF954D);//lv_palette_darken(LV_PALETTE_RED, 3);
}
else
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF6008);//lv_palette_main(LV_PALETTE_RED);
}
dsc->label_dsc->color = lv_color_white();
}
else if (dsc->id == 7)
{
dsc->rect_dsc->radius = 5; //LV_RADIUS_CIRCLE;
if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF954D);//lv_palette_darken(LV_PALETTE_RED, 3);
}
else
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF6008);//lv_palette_main(LV_PALETTE_RED);
}
dsc->label_dsc->color = lv_color_white();
}
else if (dsc->id == 8)
{
dsc->rect_dsc->radius = 5; //LV_RADIUS_CIRCLE;
if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF954D);//lv_palette_darken(LV_PALETTE_RED, 3);
}
else
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF6008);//lv_palette_main(LV_PALETTE_RED);
}
dsc->label_dsc->color = lv_color_white();
}
else if (dsc->id == 9)
{
dsc->rect_dsc->radius = 5; //LV_RADIUS_CIRCLE;
if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF954D);//lv_palette_darken(LV_PALETTE_RED, 3);
}
else
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF6008);//lv_palette_main(LV_PALETTE_RED);
}
dsc->label_dsc->color = lv_color_white();
}
else if (dsc->id == 10)
{
dsc->rect_dsc->radius = 5; //LV_RADIUS_CIRCLE;
if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF954D);//lv_palette_darken(LV_PALETTE_RED, 3);
}
else
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF6008);//lv_palette_main(LV_PALETTE_RED);
}
dsc->label_dsc->color = lv_color_white();
}
else if (dsc->id == 11)
{
dsc->rect_dsc->radius = 5; //LV_RADIUS_CIRCLE;
if(lv_btnmatrix_get_selected_btn(obj) == dsc->id)
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF954D);//lv_palette_darken(LV_PALETTE_RED, 3);
}
else
{
dsc->rect_dsc->bg_color = lv_color_hex(0xFF6008);//lv_palette_main(LV_PALETTE_RED);
}
dsc->label_dsc->color = lv_color_white();
}
}
}
/**
* Add custom drawer to the button matrix to customize butons one by one
*/
void lv_btnmatrix_draw_test(void)
{
// 当前页面的画布容器
lv_obj_t *main_container = lv_obj_create(lv_scr_act()); // 基于屏幕创建了一个容器
if (main_container == NULL)
{
printf("[%s:%d] create main_container failed\n", __FUNCTION__, __LINE__);
return;
}
// 画布样式
static lv_style_t main_cont_style;
lv_style_reset(&main_cont_style);
lv_style_init(&main_cont_style); // 初始化样式
lv_style_set_radius(&main_cont_style, 0); // 设置样式的圆角弧度
lv_style_set_border_width(&main_cont_style, 0); // 设置边框宽度
lv_style_set_bg_opa(&main_cont_style, LV_OPA_50); // 设置样式背景的透明度
lv_style_set_bg_color(&main_cont_style, lv_color_hex(0xFFFFFF));
lv_style_set_pad_all(&main_cont_style, 0); // 设置样式内部填充
lv_obj_add_style(main_container, &main_cont_style, 0); // 给对象添加样式
lv_obj_set_size(main_container, LV_PCT(100), LV_PCT(100)); //设置大小
lv_obj_center(main_container); // 对象居屏幕中间显示
lv_obj_t * textarea = lv_textarea_create(main_container);
if (textarea == NULL)
{
printf("[%s:%d] obj textarea create failed\n", __FUNCTION__, __LINE__);
return;
}
static lv_style_t text_area_style;
lv_style_reset(&text_area_style); // 重置样式
lv_style_init(&text_area_style); // 初始化样式
lv_style_set_border_width(&text_area_style, 1); // 设置边框宽度
lv_style_set_radius(&text_area_style, 0); // 设置样式的圆角弧度
lv_style_set_pad_all(&text_area_style, 8); // 设置样式底部padding填充宽度
lv_style_set_text_font(&text_area_style, &lv_font_montserrat_20); //设置字体
lv_obj_add_style(textarea, &text_area_style, 0); // 给对象添加样式
lv_textarea_set_max_length(textarea, 6); // 设置最大输入长度
lv_textarea_set_one_line(textarea, true); // 只显示一行
lv_textarea_set_password_mode(textarea, false); // 关闭密码模式
lv_obj_set_size(textarea, 255, 40); // 设置对象大小
lv_obj_align(textarea, LV_ALIGN_TOP_MID, 0, 50); // 设置对齐
//lv_obj_add_event_cb(textarea, textarea_event_callback, LV_EVENT_CLICKED, NULL);
// 基于屏幕创建了一个容器
lv_obj_t *keyboard_bg_cont = lv_obj_create(main_container);
if (keyboard_bg_cont == NULL)
{
printf("[%s:%d] create keyboard_bg_cont failed\n", __FUNCTION__, __LINE__);
return;
}
static lv_style_t bg_style;
lv_style_reset(&bg_style); // 重置样式
lv_style_init(&bg_style); // 初始化样式
lv_style_set_border_width(&bg_style, 0); // 设置边框宽度
lv_style_set_radius(&bg_style, 5); // 设置样式的圆角弧度
lv_style_set_pad_all(&bg_style, 0); // 设置样式底部padding填充宽度
lv_style_set_bg_opa(&bg_style, LV_OPA_50); // 设置样式背景的透明度
lv_style_set_bg_color(&bg_style, lv_color_hex(0x000000));
lv_obj_add_style(keyboard_bg_cont, &bg_style, 0); // 给对象添加样式
lv_obj_set_size(keyboard_bg_cont, 260, 245); //设置对象大小
lv_obj_center(keyboard_bg_cont); // 居中显示
// 基于背景容器创建按键矩阵
lv_obj_t * btnmatrix = lv_btnmatrix_create(keyboard_bg_cont);
if (btnmatrix == NULL)
{
printf("[%s:%d] create btnmatrix obj failed\n", __FUNCTION__, __LINE__);
return ;
}
lv_obj_clear_flag(btnmatrix, LV_OBJ_FLAG_CLICK_FOCUSABLE);
lv_btnmatrix_set_map(btnmatrix, kb_map);
// 给键盘矩阵添加样式
static lv_style_t button_matrix_style;
lv_style_reset(&button_matrix_style); // 重置样式
lv_style_init(&button_matrix_style); // 初始化样式
lv_style_set_border_width(&button_matrix_style, 0); // 设置边框宽度
lv_style_set_radius(&button_matrix_style, 5); // 设置样式的圆角弧度
lv_style_set_pad_all(&button_matrix_style, 0); // 设置样式底部padding填充宽度
lv_style_set_text_opa(&button_matrix_style, LV_OPA_COVER);
lv_style_set_text_font(&button_matrix_style, &lv_font_montserrat_20); //设置字体
lv_obj_add_style(btnmatrix, &button_matrix_style, 0); // 给对象添加样式
//lv_obj_add_event_cb(btnmatrix, btnmatrix_event_cb, LV_EVENT_ALL, NULL);
lv_obj_add_event_cb(btnmatrix, btnmatrix_event_cb, LV_EVENT_ALL, (void *)(textarea));
lv_obj_set_size(btnmatrix, 260, 245);
lv_obj_center(btnmatrix);
}运行效果：
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
2
0- 0
已为社区贡献18条内容
所有评论(0)