LVGL学习笔记 28 - 键盘keyboard

这篇具有很好参考价值的文章主要介绍了LVGL学习笔记 28 - 键盘keyboard。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1. 设置关联文本框

2. 设置模式

2.1 LV_KEYBOARD_MODE_TEXT_LOWER

2.2 LV_KEYBOARD_MODE_TEXT_UPPER

2.3 LV_KEYBOARD_MODE_SPECIAL

2.4 LV_KEYBOARD_MODE_NUMBER

2.5 LV_KEYBOARD_MODE_USER_1 ~ LV_KEYBOARD_MODE_USER_4

3. 使能弹窗模式

4. 更改按键布局

5. 事件


键盘是一个特殊的按键矩阵,自身实现了按键(map)映射和其他功能。

lv_obj_t* kb = lv_keyboard_create(lv_scr_act());
lv_obj_set_align(kb, LV_ALIGN_CENTER);

LVGL学习笔记 28 - 键盘keyboard,UI,LVGL

键盘默认是铺满当前页面的,可以通过lv_obj_set_size设置大小。

1. 设置关联文本框

void lv_keyboard_set_textarea(lv_obj_t * obj, lv_obj_t * ta)

参数ta是文本框的句柄。

lv_obj_set_size(kb, 400, 200);
lv_obj_t* tx = lv_textarea_create(lv_scr_act());
lv_obj_align(tx, LV_ALIGN_CENTER, 0, -160);
lv_keyboard_set_textarea(kb, tx);

LVGL学习笔记 28 - 键盘keyboard,UI,LVGL

2. 设置模式

void lv_keyboard_set_mode(lv_obj_t * obj, lv_keyboard_mode_t mode)

支持的模式有:

2.1 LV_KEYBOARD_MODE_TEXT_LOWER

显示小写字母,默认的情况。

2.2 LV_KEYBOARD_MODE_TEXT_UPPER

显示大写字母,包括键盘和文本框显示。

lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_TEXT_UPPER);

LVGL学习笔记 28 - 键盘keyboard,UI,LVGL

2.3 LV_KEYBOARD_MODE_SPECIAL

显示特殊字符。

lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_SPECIAL);

LVGL学习笔记 28 - 键盘keyboard,UI,LVGL

2.4 LV_KEYBOARD_MODE_NUMBER

显示数字。

 lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_NUMBER);

LVGL学习笔记 28 - 键盘keyboard,UI,LVGL

2.5 LV_KEYBOARD_MODE_USER_1 ~ LV_KEYBOARD_MODE_USER_4

用户自定义模式。这4个用户模式并没有实现,需要自己改lv_keyboard.c,默认是和小写模式一样。以LV_KEYBOARD_MODE_USER_1为例,增加一个游戏手柄的键盘。显示的效果如下:

LVGL学习笔记 28 - 键盘keyboard,UI,LVGL

在static const char * * kb_map[9]前增加数组:

static const char* const default_kb_map_joystick[] = {
    LV_SYMBOL_SETTINGS, LV_SYMBOL_OK, "\n",
    " ", LV_SYMBOL_UP, " ", "\n",
    LV_SYMBOL_LEFT, LV_SYMBOL_RIGHT, "A", "B","\n",
    " ", LV_SYMBOL_DOWN, " ", ""
};

数组每个变量表示一个按键上的显示字符串,用“\n”表示换行, “”表示结束。把这个数组替换到kb_map数组中 

static const char * * kb_map[9] = {
    (const char * *)default_kb_map_lc,
    (const char * *)default_kb_map_uc,
    (const char * *)default_kb_map_spec,
    (const char * *)default_kb_map_num,
    (const char * *)default_kb_map_joystick,
    (const char * *)default_kb_map_lc,
    (const char * *)default_kb_map_lc,
    (const char * *)default_kb_map_lc,
    (const char * *)NULL,
};

另外再增加一个数组default_kb_ctrl_joystick_map来布局按键的大小。

static const lv_btnmatrix_ctrl_t default_kb_ctrl_joystick_map[] = {
    1, 1,
    LV_BTNMATRIX_CTRL_HIDDEN | 1, 2, LV_BTNMATRIX_CTRL_HIDDEN | 5, 
    1, 1, 1, 1,
    LV_BTNMATRIX_CTRL_HIDDEN | 1, 2, LV_BTNMATRIX_CTRL_HIDDEN | 5
};

每个数组成员是一个16位的变量,低3位表示按键的宽度比例,例如第一行2个按键,取值1,1表示这2个按键在这一行是占据这一行的比例是50%:50%,其他位表示按键的属性,具体可以参考lv_btnmatrix_ctrl_t的定义。同样,添加到数组kb_ctrl中。

static const lv_btnmatrix_ctrl_t * kb_ctrl[9] = {
    default_kb_ctrl_lc_map,
    default_kb_ctrl_uc_map,
    default_kb_ctrl_spec_map,
    default_kb_ctrl_num_map,
    default_kb_ctrl_joystick_map,
    default_kb_ctrl_lc_map,
    default_kb_ctrl_lc_map,
    default_kb_ctrl_lc_map,
    NULL,
};

这个键盘可以不需要text,所以去掉文本框的设置,显示效果如上图。

    lv_obj_t* kb = lv_keyboard_create(lv_scr_act());
    lv_obj_set_align(kb, LV_ALIGN_CENTER);
    lv_obj_set_size(kb, 400, 200);

    //lv_obj_t* tx = lv_textarea_create(lv_scr_act());
    //lv_obj_align(tx, LV_ALIGN_CENTER, 0, -160);
    //lv_keyboard_set_textarea(kb, tx);

    lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_USER_1);

3. 使能弹窗模式

void lv_keyboard_set_popovers(lv_obj_t * obj, bool en)

en为TRUE时表示使能弹窗模式,注意这种模式必须按键的属性有LV_BTNMATRIX_CTRL_POPOVER,例如上例中游戏手柄中的设置属性就没有,使能后也不会看到任何效果。

LVGL学习笔记 28 - 键盘keyboard,UI,LVGL

4. 更改按键布局

功能和用户模式类似,通过函数lv_keyboard_set_map改变按键布局。

void lv_keyboard_set_map(lv_obj_t * obj, lv_keyboard_mode_t mode, const char * map[],
                         const lv_btnmatrix_ctrl_t ctrl_map[])

后面2个参数就是之前用户模式对应的数组。

lv_keyboard_set_map(kb, LV_KEYBOARD_MODE_TEXT_LOWER, (const char**)default_kb_map_joystick, default_kb_ctrl_joystick_map);

设置后显示效果与之前的方式一样。

5. 事件

键盘有一个默认的事件lv_keyboard_def_event_cb处理按键行为结果。

当按键的字符串为“abc”时表示切换到小写模式:

if(strcmp(txt, "abc") == 0) {
    keyboard->mode = LV_KEYBOARD_MODE_TEXT_LOWER;
    lv_btnmatrix_set_map(obj, kb_map[LV_KEYBOARD_MODE_TEXT_LOWER]);
    lv_keyboard_update_ctrl_map(obj);
    return;
}

同理,“ABC”表示切换到大写模式,“1#”表示切换到特殊字符模式。

默认事件发送了LV_EVENT_CANCEL、LV_EVENT_READY事件,用户可以利用这2个事件完成字符串的输入。例如LV_EVENT_CANCEL事件:

static void kbClear_cb(lv_event_t* event)
{
    lv_keyboard_t* kb = (lv_keyboard_t*)event->target;
    lv_textarea_set_text(kb->ta, "");
}

lv_obj_add_event_cb(kb, kbClear_cb, LV_EVENT_CANCEL, NULL);

LVGL学习笔记 28 - 键盘keyboard,UI,LVGL文章来源地址https://www.toymoban.com/news/detail-641626.html

到了这里,关于LVGL学习笔记 28 - 键盘keyboard的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript 虚拟键盘:Mindfusion JavaScript Keyboard

    高度交互,高度可定制--JavaScript 虚拟键盘--Mindfusion JavaScript Keyboard 现在,您的 JavaScript 应用程序可以像本地移动应用程序一样处理屏幕输入。   特征 键盘布局 扩展、紧凑和标准布局模式。KeyboardLayout 工具可帮助您根据需要创建和排列自定义键盘。 关键图像 您可以使用图像

    2024年02月09日
    浏览(26)
  • 【python自动化】Playwright基础教程——Keyboard键盘

    playwright模拟键盘操作 键盘事件提供了用于管理虚拟键盘的API,高级API是 keyboard.type() ,它使用的是原始字符再页面上生成对应的 keydown 、 keypress / input 和 keyup 事件。 模拟真实键盘操作进行更精细的控制可以使用 keyboard.down() 、 keyboard.up() 和 keyboard.insert_text() 手动触发事件。

    2024年02月22日
    浏览(29)
  • vue+simple-keyboard 虚拟键盘有中文(拼音),获取焦点调出键盘半封组件

    前几天临时接个需求,我们的主机产品没键盘,一直都是调主机的虚拟键盘,但是最近不知道那块出了点问题,就要用前端做一个,我之前就听说过 simple-keyboard 组件,就没当回事,随口就应下了,结果这个我做的这个头疼啊,什么切换input之后重新输入,切换input之后无法删

    2024年04月11日
    浏览(34)
  • 【LVGL学习笔记】(三)控件使用

    LVGL全程LittleVGL,是一个轻量化的,开源的,用于嵌入式GUI设计的图形库。并且配合LVGL模拟器,可以在电脑对界面进行编辑显示,测试通过后再移植进嵌入式设备中,实现高效的项目开发。 LVGL中文教程手册:极客笔记之LVGL教程 特点 弧的0度在右边,90度在下边 效果图 源码

    2024年02月03日
    浏览(35)
  • 【LVGL学习笔记】(二) 基础概念

    LVGL全程LittleVGL,是一个轻量化的,开源的,用于嵌入式GUI设计的图形库。并且配合LVGL模拟器,可以在电脑对界面进行编辑显示,测试通过后再移植进嵌入式设备中,实现高效的项目开发。 LVGL中文教程手册:百问网LVGL中文教程手册文档 以下的内容均是以VS环境下的LVGL模拟器

    2024年02月01日
    浏览(35)
  • 【LVGL】学习笔记--(1)Keil中嵌入式系统移植LVGL

    最近emwin用的比较烦躁,同时被LVGL酷炫的界面吸引到了,所以准备换用LVGL试试水。 LVGL(轻量级和通用图形库)是一个免费和开源的图形库,它提供了创建嵌入式GUI所需的一切,具有易于使用的图形元素,美丽的视觉效果和低内存占用。 丰富且强大的模块化图形组件:按钮 (b

    2024年02月02日
    浏览(54)
  • QT5 Virtual Keyboard实现自适应悬浮键盘(多种方法详细记录)

            项目需求实现悬浮键盘,点击QLineEdit或QTextEdit自动弹出自适应悬浮键盘,尝试了以下几种方法后选择了修改QT Virtual Keyboard源码。在这里把其他方法/想法也列出来做一下记录。         项目环境:QT5.13.2  VS2017 目录 方法1:调用windows自带系统软件盘 介绍  代码

    2024年02月02日
    浏览(52)
  • LVGL学习笔记 30 - List(列表)

    目录 1. 添加文本 2. 添加按钮 3. 事件 4. 修改样式 4.1 背景色 4.2 改变项的颜色 列表是一个垂直布局的矩形,可以向其中添加按钮和文本。 部件包含: LV_PART_MAIN - 主要的属性,大部分是这个部件。 LV_PART_SCROLLBAR - 滚动条的属性。 添加一行文本,当字符串长度超过显示时,会自

    2024年02月13日
    浏览(31)
  • 前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input

    前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input, 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法 HTML代码实现部分

    2024年02月10日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包