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

已于 2022-03-07 18:09:01 修改
阅读量2.6k 收藏 9
点赞数 2
分类专栏： LVGL 文章标签： LVGL8 button matrix
于 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
    评论
专栏目录
LVGL-输入设备
qq_27762339的博客
07-09 1150
LVGL 输入设备
LVGL v8移植正点原子F1源代码
07-29
LVGL v8移植正点原子F1源代码
LVGL如何自定义键盘
qq_49040163的博客
10-13 1010
如何使用LVGL自定义用户键盘
LINUX LVGL 使用键盘方向键选择控件
weixin_52668204的博客
05-26 2249
1。
2024年物联网嵌入式最全【GUI】LVGL8内存泄漏分析_lvgl 内存溢出，2024年最新程序员进阶
最新发布
2401_85015164的博客
05-14 421
brief: 界面销毁。* param: 父对象。
想做输入法界面？安排，LVGL『keyboard键盘控件』介绍
朝气蓬勃
03-03 9035
一. LVGL GUI键盘控件的概念 Keyboard 对象是一个特殊的 Button 矩阵，具有预定义的按键映射和其他功能，以实现虚拟键盘来编写文本。 二. LVGL GUI键盘小部件和样式 类似于按钮 矩阵，键盘包括 2 部分： LV_KEYBOARD_PART_BG 这是主要部分，并使用了所有典型的背景属性 LV_KEYBOARD_PART_BTN 这是按钮的虚拟部分。它还使用所有典型的背景属性和文本属性。 三. LVGL GUI键盘控件的使用 1. 模式(Modes) 键盘有如下模式.
LVGL--键盘部件(lv_keyboard)
m0_63472758的博客
02-27 589
【代码】LVGL--键盘部件(lv_keyboard)
LVGL01
fuhanga123的博客
01-19 464
lvgl8的样式改变的还是很大的,而且更加方便了,尤其是本地样式，直接改变空间的默认样式，不需要占用额外的空间保存样式了。给目标设置样式函数:lv_obj_add_style(obj,&style,selector);本地样式函数:lv_obj_set_style_xxx(obj,value,select);lvgl8的图片按钮好像只能是设置三种图片源的那种创建,只有一种的我没找到他的函数。通过样式过渡,用一张图片就简单实现的之前的图片按钮的按下情景。lvgl8的样式更加的方便,分为普通样式和本地样式,
lvgl8.0.1中文拼音输入法(QT仿真完整工程)
06-06
适用于单片机的中文拼音输入法，创建一个拼音输入的键盘，接受拼音输入，并显示拼音对应的候选字，通过触摸点击选择目标候选汉字，gui平台是lvgl8.0.1。 2. 原理 在lvgl原文件"lv_keyboard.c"基础上进行键盘的改写...
LVGL V8 移植.zip
11-16
lvgl 8 GUI
LVGL-GuiGuider-V8-SimEnv
04-07
LVGL-GuiGuider-V8-SimEnv
基于cubemx和hal库编写的触摸键盘（lvgl组件）
hahahi66的博客
05-03 2140
基于cubemx和hal库编写的触摸键盘（lvgl组件） 文章目录前言一、点亮lcd二、触摸屏底层1.初始化2.读入数据三、移植lvgl添加源码修改源码添加键盘组件启动lvgl 前言 近年国赛对于人机交互的要求逐渐上升，普通的矩阵按键，串口输入未免过于普通且不灵活，所以我基于R61529液晶驱动芯片和FT6236触摸屏芯片并移植了lvgl(轻度综合图形界面库)制作了一个触摸键盘 一、点亮lcd 首先在cube配置FSMC STM32的 FSMC外设可以用于控制扩展的外部存储器，而 MCU 对液晶屏的
LittleVGL-键盘控件
snaygo
04-07 675
前面讲述了独立按钮以及矩阵按钮，会了前两者之后，接下来的矩阵键盘按钮可能会惊艳到你。先看仿真效果; 这个仿真出来的键盘就是littleVGL图形化界面上的一个简单控件，几行代码就完整的将其功能实现，接下来贴出代码： ` void kb_test(void) { /*Create styles for the keyboard*/ static lv_style_t rel_style, pr_style; lv_style_copy(&rel_style, &lv
lvgl8.x 对接实体按键驱动
热门推荐
zhbi98 的技术 Blogs
02-22 1万+
1. lvgl 输入设备种类 实体按键属于 lvgl 的输入设备中的一种，所以对接外部的硬件实体按键实际上就是为 lvgl 添加输入设备。为 lvgl 添加输入设备需要在 lv_port_indev.c 这个 c 文件中完成，注意这个文件并不存在于 lvgl src 源码文件夹下，而是位于 examples/porting 文件夹下，在这个目录下官方为我们准备好了对接模板文件，我们对这个模板文件进行修改即可。 lvgl 的输入设备共有以下五种： Touchpad 触摸板，例如电容屏、电阻屏等 Mous
【LVGL学习笔记】（二） 基础概念
weixin_45728705的博客
12-16 7769
LVGL学习笔记
LVGL7.0高级界面开发-2
qq_36690796的博客
02-21 2769
自定义键盘 系统定义的键盘不喜欢，反正代码开源，可以自己定制,还可以移动哦。 键盘代码.c文件 #include "lvgl/lvgl.h" #include "../inc/user_keyboard.h" #include <stdio.h> User_Keyboard_info User_Keyboard_t; User_Keyboard_def User_Keyboard_d; lv_obj_t* label2; static const char* btnm_nu
myos3 大学生利用C++构建一个完整的操作系统之代码重构并实现键盘打字和鼠标移动
406156440的博客
12-05 2099
myos1 大学生利用C++构建一个完整的操作系统打印helloworld myos2 大学生利用C++构建一个完整的操作系统之响应键盘中断 myos3 大学生利用C++构建一个完整的操作系统之代码重构并实现键盘打字和鼠标移动 1. 按键中断 计算机自制操作系统（十六）：中断—键盘驱动 - 知乎 (zhihu.com) 在中断IDT 中 256个中断源产生的中断在IDT表中注册时, 全部指向了同一个中断服务程序 class InterruptHandler, 其实是不准确的, 因为并没有建立各自中断号和中
LVGL使用记 - 实体按键
我的博客
03-22 8724
介绍一下实体按键在LVGL上的使用。 添加输入设备文件，如下图： 改写输入设备接口文件，如下图 1.屏蔽其他输入设备，保留keypad相关的文件 2.添加实体按键底层驱动初始化文件 3.添加按键id读取函数 4.添加自己的id值 5.修改按键id，并返回自己的id 6.按键关联绑定对象初始化，放在初始化中。 7.按键事件处理 至此实现实体按键功能控制屏幕元素功能. ...
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、付费专栏及课程。

余额充值