LVGL V8学习之键盘按键样式重绘（一）

已于 2022-03-07 18:09:01 修改
阅读量2.7k 收藏 9
点赞数 2
分类专栏： LVGL 文章标签： BTNMatrix LV库 键盘重绘 事件处理 UI定制
于 2021-09-07 18:30:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq981378640/article/details/120164347
版权

这一篇研究一下基于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);
}

运行效果：

Bob_1993
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
lvgl8.0.1中文拼音输入法(QT仿真完整工程)
06-06
自己用的 适用于单片机的lvgl简单中文键盘拼音输入法，使用QT5.14创建，直接打开即可运行模拟器 如果QT编译提示有错误,尝试在构建设置中重设目录：QT的左边栏-"项目"->"Desktop QT5.14.2 MinGW 32-bit"->"构建设置"->"概要"->"构建目录",填入一个目录，比如“../output”，参考“如有QT编译错误看这里.jpg” GUI: lvgl8.0.1 1. 功能 适用于单片机的中文拼音输入法，创建一个拼音输入的键盘，接受拼音输入，并显示拼音对应的候选字，通过触摸点击选择目标候选汉字，gui平台是lvgl8.0.1。 2. 原理 在lvgl原文件"lv_keyboard.c"基础上进行键盘的改写，新文件名为"lv_cn_keyboard.c"，共同存放于"lvgl\src\extra\widgets\keyboard\"目录下，相关的对外函数名称以"lv_cn_xxx"开头。
LVGL v8移植正点原子F1源代码
07-29
LVGL（LittleVGL）是一个开源的图形用户界面库，专为嵌入式系统设计，支持多种微控制器和操作系统。正点原子F1是基于STM32F10x系列微控制器的开发板，常用于电子项目的开发。在这个项目中，LVGL v8被移植到了正点...
LVGL如何自定义键盘
qq_49040163的博客
10-13 1294
如何使用LVGL自定义用户键盘
LVGL一些API函数
最新发布
qq_66891745的博客
06-03 143
/设置盒子模型的全部填充距离。
LittleVGL
qq_45803449的博客
12-25 1801
笔记博文
LVGL学习笔记 28 - 键盘keyboard
pq的博客
08-11 5747
键盘是一个特殊的按键矩阵，自身实现了按键(map)映射和其他功能。键盘默认是铺满当前页面的，可以通过lv_obj_set_size设置大小。
LVGL：拓展部件——键盘 lv_keyboard
友善啊，朋友的博客
03-19 2404
即当用户点击该按键时，可能会弹出一个新的界面或菜单。可以使得按键在被按下时只触发一次，并且可以设置为选中状态以显示某种特殊状态或提供视觉反馈。() 函数中使用的类似，通常以数组形式存储一系列按键标签，比如字母、数字或特殊符号。当在键盘上按下字符时，这些字符会被输入到指定的文本区域中。设置键盘上按键按下时是否以弹出框（popover）的形式显示按钮提示框。这里自定义了一个键盘布局，但是隐藏了第一排的第二个按键。这里说前三位表示宽度，前三位能表示的最大数就是7。更改键盘上显示的按键及其功能。
LVGL 8.2 Textarea
mygod2008ok的专栏
07-17 1098
LVGL 8.2 Textarea
LVGL8之自定义密码输入键盘
菜鸟攻城狮
09-03 5044
这一篇研究一下自定义密码输入键盘，还是通过codeblock来模拟代码的运行，代码如下： #include <stdio.h> #include <string.h> #include "lvgl/lvgl.h" #include "lv_gui_password_keyboard.h" static lv_obj_t *pwd_main_cont = NULL; // 密码输入界面的容器 static lv_obj_t *hint_label = NULL; // 密码提示
LVGL——文本区域与键盘
weixin_63780683的博客
12-14 1925
【代码】LVGL——文本区域与键盘。
LVGL-GuiGuider-V8-SimEnv
04-07
LVGL-GuiGuider-V8-SimEnv 是一个基于LVGL图形库的GUI设计向导，专为V8版本设计，结合了Visual Studio Code（VSCode）模拟环境，旨在简化和加速GUI应用的开发过程。这个项目的核心目标是提供一个直观、高效的工具，...
LVGL V8 移植.zip
11-16
LVGL V8 移植是关于将LVGL（LittleVGL）图形用户界面库的第八个主要版本集成到特定硬件平台或操作系统的过程。LVGL是一个开源的、高效的嵌入式GUI库，它允许开发者在微控制器或小型嵌入式系统上创建丰富的图形用户...
LVGL学习(4)：输入设备的四种类型及物理按键的实现
主要分享硬件、嵌入式软件部分知识
06-07 5823
在有一些场合中，如野外情况，可能我们会选择使用物理按键来控制LVGL，而不是使用触摸屏。所以本篇文章就以物理键盘为例来介绍一下如何自定义输入设备与LVGL进行交互。
LVGL学习笔记6 - 输入设备
pq的博客
12-28 6234
输入设备的回调函数需要用户根据硬件自己实现，例如上例中的lv_win32_pointer_driver_read_callback、lv_win32_keypad_driver_read_callback和lv_win32_encoder_driver_read_callback。通过lv_obj_add_event_cb给对象添加事件处理程序函数。filter - 事件代码，例如LV_EVENT_CLICKED表示点击事件，具体可以看lv_event.h中的枚举lv_event_code_t。
【LVGL 学习】样式（style）风格学习
一名嵌入式界的小学生
09-05 3314
在 LVGL 中，样式都是以对象的方式存在，一个对象可以描述一种样式。每个控件都可以独立添加样式，创建的样式之间互不影响。样式是延迟渲染的，因此需要使用 static 存储类别说明符或将其声明为全局变量。样式是多方面的，不仅包括颜色和形状，还包括边距、边框，甚至动画变换效果等细节。所有的设置样式函数都是 lv_style_set_…() 形式，完整的样式规则将在之后介绍。未指定的样式规则将保持控件的默认样式。
闭门造轮(LVGL_1)
qq_33001335的博客
06-23 736
参考的课程：全志韦东山的课程：https://www.100ask.net/p/t_pc/course_pc_detail/column/p_61c5a317e4b0cca4a4e8b6f1?product_id=p_61c5a317e4b0cca4a4e8b6f1 LVGL_API解析：额？...这几个API还能玩出花来不成？... 这段代码创建了一个基本对象，并且将这个对象的长和宽设定为300和500，通过lv_obj_get_width(obj)和lv_obj_get_width(obj)获
LVGL笔记8--lv_style样式
未来可期
02-03 5750
LVGL笔记8–lv_style样式 样式介绍 ​样式是用来修饰UI美观性，使用lv_style对UI界面进行重绘和重用，利用多个不同的样式来形成Theme对象。对于vl_obj基础对象而言，每个对象都有一个lv_style样式，但对于其他的控件（比如lv_btn按钮控件）可能拥有多个样式，因为一个稍微复杂的控件可能是由多个子部件组成，而每一个子部件可能都需要相应的样式来修饰，所以表面上看来这个控件拥有了多个样式。 样式结构图 主要数据类型 边框部件数据类型 //用于描述到底绘制哪几条边框，这些值可
lvgl输入设备鼠标
09-06
你可以使用LVGL库来实现鼠标输入设备的支持。LVGL提供了一个继承自输入设备接口的鼠标输入设备驱动程序。你可以在LVGL的文档中找到关于鼠标输入设备的详细信息和示例代码。以下是一个简单的示例，展示了如何使用LVGL来处理鼠标输入： ```c #include "lvgl/lvgl.h" // 鼠标输入设备事件回调函数 bool mouse_event_cb(lv_indev_drv_t * drv, lv_event_t event) { if (event == LV_EVENT_PRESSED) { // 处理鼠标按下事件 } else if (event == LV_EVENT_RELEASED) { // 处理鼠标释放事件 } else if (event == LV_EVENT_SHORT_CLICKED) { // 处理鼠标短按事件 } else if (event == LV_EVENT_LONG_PRESSED) { // 处理鼠标长按事件 } // 返回true表示事件已经处理，返回false表示事件未处理 return true; } int main() { // 初始化LVGL库 lv_init(); // 初始化显示设备、鼠标输入设备等 lv_disp_drv_t disp_drv; lv_disp_drv_init(&disp_drv); // 设置显示设备相关参数... lv_indev_drv_t indev_drv; lv_indev_drv_init(&indev_drv); // 设置鼠标输入设备相关参数... indev_drv.read_cb = mouse_event_cb; // 注册鼠标输入设备 lv_indev_t * mouse_indev = lv_indev_drv_register(&indev_drv); // 创建一个窗口 lv_obj_t * win = lv_win_create(lv_scr_act()); // 设置窗口相关参数... // 设置窗口的输入设备为鼠标输入设备 lv_win_set_click(win, mouse_indev); while (1) { // 处理LVGL库的任务 lv_task_handler(); } } ``` 该示例演示了如何初始化LVGL库、注册鼠标输入设备并将其与窗口关联。你可以根据自己的需要在回调函数中处理鼠标事件。请注意，上述示例只是基本的框架，你需要根据实际情况进行适当的修改和扩展。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值