• 说明
• LV_INDEV_TYPE_BUTTON的使用
• LV_INDEV_TYPE_KEYPAD的使用

说明

本实验使用LVGL版本为v9.2

LVGL中有四种输入设备,如下

LV_INDEV_TYPE_POINTER, /**< Touch pad, mouse, external button*/

LV_INDEV_TYPE_KEYPAD, /**< Keypad or keyboard*/

LV_INDEV_TYPE_BUTTON, /**< External (hardware button) which is assigned to a specific point of the screen*/

LV_INDEV_TYPE_ENCODER, /**< Encoder with only Left, Right turn and a Button*/

这里只记录LV_INDEV_TYPE_KEYPAD和LV_INDEV_TYPE_BUTTON的使用。因为这两个输入设备都可以用实体按键实现。当然，这两个输入设备掌握了，LV_INDEV_TYPE_ENCODER也是很容易类推的。

LV_INDEV_TYPE_BUTTON的使用

此输入设备其实是模拟的 LV_INDEV_TYPE_POINTER设备相应坐标被按下。使用它之前，应该有明确UI的布局，特别屏幕上按钮的坐标是明确的。

1. 实体按键初始化

void key_init(void)
{// 配置 GPIOgpio_config_t io_conf = {.pin_bit_mask = (1ULL << KEY1)|(1ULL << KEY2)|(1ULL << KEY3),   // 选择 GPIO.mode = GPIO_MODE_INPUT,              // 设置为输出模式.pull_up_en = GPIO_PULLUP_ENABLE,     // 启用上拉.pull_down_en = GPIO_PULLDOWN_DISABLE, // 不启用下拉.intr_type = GPIO_INTR_DISABLE         // 不启用中断};gpio_config(&io_conf);
}

2. 按键匹配键值

此键值将对应一个数组的序号，此数组是由BUTTON控件的坐标构成。

源码如下:

static int read_key(void)
{if(gpio_get_level(KEY1)==0){return 0;}if(gpio_get_level(KEY2)==0){return 1;}if(gpio_get_level(KEY3)==0){return 2;}	return -1;	
}

3. 读取键值并保存到lv_indev_data_t数据结构中

目的是将实体按键与LVGL建立联系，后面通过创建输入设备相关API完成建立

void button_read(lv_indev_t * drv, lv_indev_data_t*data){static uint32_t last_btn = 0;   /*Store the last pressed button*/int btn_pr = read_key();     /*Get the ID (0,1,2...) of the pressed button*/if(btn_pr >= 0) {     /*Is there a button press? (E.g. -1 indicated no button was pressed)*/data->state = LV_INDEV_STATE_PRESSED;  /*Set the pressed state*/last_btn = btn_pr;   /*Save the ID of the pressed button*/} else {data->state = LV_INDEV_STATE_RELEASED; /*Set the released state*/}data->btn_id = last_btn;            /*Save the last button*/
}

4. 创建输入设备

lv_indev_t * button_indev_drv;
button_indev_drv=lv_indev_create();
lv_indev_set_type(button_indev_drv,LV_INDEV_TYPE_BUTTON);//将输入设备设置为BUTTON模式
lv_indev_set_read_cb(button_indev_drv, button_read);//注册回调函数，即上一步实现的函数，这样就完成了硬件和LVGL的联系
//配置坐标点
static const lv_point_t btn_points[5] = {{0, 0},   /*当键值为0时模拟点击的坐标*/{80, 0},   /*当键值为1时模拟点击的坐标*/{160, 1},   /*当键值为2时模拟点击的坐标*/{320, 120},   /*当键值为3时模拟点击的坐标*/{160, 240},   /*当键值为4时模拟点击的坐标*/
};
lv_indev_set_button_points(button_indev_drv, btn_points);//将按键与坐标连接

5. 使用LVGL的API在界面上创建三个BUTTON控件

	lv_obj_t * btn1;btn1 = lv_button_create(scr);lv_obj_set_width(btn1,80);lv_obj_set_height(btn1,35);lv_obj_set_pos(btn1,0,0);/*Button event*/lv_obj_add_event_cb(btn1, btn_event_handler, LV_EVENT_ALL, NULL);lv_obj_add_flag(btn1, LV_OBJ_FLAG_CHECKABLE);lv_obj_t * lbl1 = lv_label_create(btn1);lv_label_set_text_static(lbl1, "LEFT");lv_obj_align(lbl1, LV_ALIGN_CENTER,0, 0);lv_obj_t * btn2;btn2 = lv_button_create(scr);lv_obj_set_width(btn2,80);lv_obj_set_height(btn2,35);lv_obj_set_pos(btn2,80,0);/*Button event*/lv_obj_add_event_cb(btn2, btn_event_handler, LV_EVENT_ALL, NULL);lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE);lv_obj_t * lbl2 = lv_label_create(btn2);lv_label_set_text_static(lbl2, "RIGHT");lv_obj_t * btn3;btn3 = lv_button_create(scr);lv_obj_set_width(btn3,80);lv_obj_set_height(btn3,35);lv_obj_set_pos(btn3,0,70);/*Button event*/lv_obj_add_event_cb(btn3, btn_event_handler, LV_EVENT_ALL, NULL);lv_obj_add_flag(btn3, LV_OBJ_FLAG_CHECKABLE);lv_obj_t * lbl3 = lv_label_create(btn3);lv_label_set_text_static(lbl3, "DOWN");lv_obj_align(lbl3, LV_ALIGN_CENTER,0, 0);

6. 创建群组，并将输入设备绑定到群组且将以上三个BUTTON加入

	lv_group_t *g = lv_group_create();lv_indev_set_group(button_indev_drv, g); //绑定定义的lv_indev_t lv_group_add_obj(g ,btn1);lv_group_add_obj(g ,btn2);lv_group_add_obj(g ,btn3);

此时按下实体按键将会控制对应BUTTON控件按下。

7. 此时可以创建BUTTON回调函数了

void btn_event_handler(lv_event_t *e)//按键回调函数
{lv_event_code_t code = lv_event_get_code(e);if(code == LV_EVENT_CLICKED) {ESP_LOGI(TAG,"Clicked");}
}

LV_INDEV_TYPE_KEYPAD的使用

LV_INDEV_TYPE_KEYPAD的键值LVGL已经有实现，固定死了。

LV_KEY_NEXT 专注于下一个对象
LV_KEY_PREV 专注于上一个对象
LV_KEY_ENTER 触发器 LV_EVENT_PRESSED/CLICKED/LONG_PRESSED 等事件
LV_KEY_UP 增加值或向上移动
LV_KEY_DOWN 减小值或向下移动
LV_KEY_RIGHT 增加值或向右移动
LV_KEY_LEFT 减小值或向左移动
LV_KEY_ESC 关闭或退出(例如，关闭下拉列表)
LV_KEY_DEL 删除(例如，“ 文本”区域中右侧的字符)
LV_KEY_BACKSPACE 删除左侧的字符(例如，在文本区域中)
LV_KEY_HOME 转到开头/顶部(例如，在“ 文本”区域中)
LV_KEY_END 转到末尾(例如，在“ 文本”区域中)

LV_INDEV_TYPE_KEYPAD按键分两个状态，导航态和编辑态。导航态就是在同组中选择相关控件，编辑态就是对控件数值上的增加/减少。LV_KEY_NEXT/PREV、LV_KEY_ENTER则是作为导航态。LV_KEY_UP/DOWN/LEFT/RIGHT则可以对控件进行数值上的编辑，一般而言LEFT/RIGHT就足够使用了。

LV_INDEV_TYPE_KEYPAD只需要对上面的代码做一些简单的调整，如下：

1. 键值匹配

static int read_key(void)
{if(gpio_get_level(KEY1)==0){return LV_KEY_NEXT;}if(gpio_get_level(KEY2)==0){return LV_KEY_RIGHT;}if(gpio_get_level(KEY3)==0){return LV_KEY_LEFT;}	return -1;	
}

2. 输入设备的回调函数

void button_read(lv_indev_t * drv, lv_indev_data_t*data){static uint32_t last_btn = 0;   /*Store the last pressed button*/int btn_pr = read_key();     /*Get the ID (0,1,2...) of the pressed button*/if(btn_pr >= 0) {     /*Is there a button press? (E.g. -1 indicated no button was pressed)*/data->state = LV_INDEV_STATE_PRESSED;  /*Set the pressed state*/last_btn = btn_pr;   /*Save the ID of the pressed button*/} else {data->state = LV_INDEV_STATE_RELEASED; /*Set the released state*/}
//注意这个地方做了修改data->key = last_btn;            /*Save the last button*/
}

3. 创建输入设备

lv_indev_t * button_indev_drv;
button_indev_drv=lv_indev_create();
lv_indev_set_type(button_indev_drv,LV_INDEV_TYPE_KEYPAD);//将输入设备设置为KEYPAD模式
lv_indev_set_read_cb(button_indev_drv, button_read);//注册回调函数，即上一步实现的函数，这样就完成了硬件和LVGL的联系

4. 按键回调函数

既然编辑态会有值的变化，那自然会触发相关事件，所以有了下面的改变

void btn_event_handler(lv_event_t *e)//按键回调函数
{lv_event_code_t code = lv_event_get_code(e);
//LV_EVENT_CLICKED这个事件在KEYPAD中只有ENTER才会触发if(code == LV_EVENT_CLICKED) {ESP_LOGI(TAG,"Clicked");}else if(code == LV_EVENT_VALUE_CHANGED) {ESP_LOGI(TAG,"BUTTUN");}
}

5. 只是按键不太能看到效果，可以创建一个slider加入组中，通过导航按键选中后，用LEFT/RIGHT进行编辑

	lv_obj_t *slider1;slider1=lv_slider_create(scr);lv_obj_set_pos(slider1,0,140);lv_group_add_obj(g ,slider1);

总结

经过以上编程后，其实LV_INDEV_TYPE_ENCODER也是很容易实现的，只要将左右旋转和按下动作对应LV_KEY_LEFT/RIGHT以及LV_KEY_ENTER，剩下的代码基本都差不多了。