代码收藏家 LVGL-GUI Guider 按键处理指南
目录
1. 背景
2. 创建GUI guider工程和STM32代码工程
3. 期望目标
4. GUI Guider 增加按键和修改按键event
4.1 Button按键
4.2 Status按键
4.3 Back按键
4.4 编译代码和打开模拟器
5. MDK工程修改
5.1 从GUI Guider拷贝代码到STM32工程
5.2 修改按键处理代码
5.3 修改Button对应Gauge的处理
5.4 编译代码并解决相关的错误
1. 背景
MCU：STM32L475
正点原子 潘多拉STM32L4 IoT开发板
潘多拉IoT开发板 — 正点原子资料下载中心 1.0.0 文档http://www.openedv.com/docs/boards/iot/zdyz_panduola.html
2. 创建GUI guider工程和STM32代码工程
参考前一篇文章，复用上一个GUI guider建立的工程
LVGL-GUI Guider生成工程移植Keil_guiguider移植_云海无语的博客-CSDN博客将GUI Guider生成的代码增加至Keil工程变编译下载到开发板https://blog.csdn.net/chenaiguo0503/article/details/126544890
3. 期望目标
设定了两个Screen，screen_home和screen_status这两个页面
在screen_home页面上点击"Button"，可以只Gauge的指针累积+10显示
在screen_status页面上点击"Status",可以跳转进至第二个界面，当点击"Back"调回上一页面
4. GUI Guider 增加按键和修改按键event
4.1 Button按键
由于Button按键最终的代码逻辑是需要在代码中实现，所以这边先记住修改这两个名字和坐标。
尤其是这儿的Position的数值
4.2 Status按键
Status按键的功能主要是跳转下一页面，所以这部分可以直接在上面进行设置GUI Guider
同样，根据自己的布局和大小设置坐标、尺寸等，记住Position
在Status这个按键的Event选项中，选择Trigger方式、Target目标
4.3 Back按键
Back按键的主要目的是返回上一个screen，同4.2章节一样，只需要在GUI Guider上面设置
同时知道Back这个按键的position
4.4 编译代码和打开模拟器
参考上一篇的文章进行编译和模拟器测试
此时运行模拟器会发现点击Status会跳转下一个页面，点击Back会返回上一个页面
5. MDK工程修改
5.1 从GUI Guider拷贝代码到STM32工程
打开GUI Guider的工程目录GUI-Guider-Projects\hellowl\generated
打开STM32的工程目录的STM32L475_LVGL\GUI\lvgl_app\generated
使用Beyond Compare将差异部分选择性的拷贝过去
拷贝过去尝试编译下代码，看看是否可以成功
5.2 修改按键处理代码
由于当前的开发板的屏幕模组是不带触摸的，所只能用Button来模拟屏幕操作
在代码中STM32L475_LVGL\GUI\lvgl\examples\porting\lv_port_indev.c主要是input事件处理的代码
找到void lv_port_indev_init(void)，这个函数是初始整个输入事件，包含Touch Pad, Key board, Mouse，Encoder，Button等，本案重点是在Button这个初始化部分，其中通过lv_point_t这个结构体映射实体按键和屏幕显示button的事件
如3.1章节提到的Button的Position坐标点是0，长宽大小是85和36，那么我们设定只要把坐标点的映射的范围定位X=0~85，Y=0~36即可，这个地方我们用实体的Button的KEY0来模拟这个button。
screen_home页面中的Button对应的实际按键是KEY0
screen_home页面中的Status对应的实际按键是KEY1
screen_status页面中的Back对应的按键KEY1
KEY2和WK_UP预留为备用
/*------------------
* Button
* -----------------*/
/*Initialize your button if you have*/
button_init();
/*Register a button input device*/
lv_indev_drv_init(&indev_drv);
indev_drv.type = LV_INDEV_TYPE_BUTTON;
indev_drv.read_cb = button_read;
indev_button = lv_indev_drv_register(&indev_drv);
/*Assign buttons to points on the screen*/
static const lv_point_t btn_points[4] = {
{10, 10}, /*Button 0 -> x:10; y:10 KEY0*/
{220, 10}, /*Button 1 -> x:220; y:10 KEY1*/
{80, 140}, /*Button 2 -> x:80; y:140 KEY2*/
{160, 10}, /*Button 3 -> x:160; y:10 WK_UP*/
};
lv_indev_set_button_points(indev_button, btn_points);将实际的按键处理事件按照如下修改
/*Get ID (0, 1, 2 ..) of the pressed button*/
static int8_t button_get_pressed_id(void)
{
uint8_t key = KEY_Scan(0);
switch (key) {
case 1:
if (KEY0 == 0)
return 0;
break;
case 2:
if (KEY1 == 0)
return 1;
break;
case 3:
if (KEY2 == 0)
return 2;
break;
case 4:
if (WK_UP == 1)
return 3;
break;
default:
return -1;
break;
}
#if 0
uint8_t i;
/*Check to buttons see which is being pressed (assume there are 2 buttons)*/
for(i = 0; i < 2; i++) {
/*Return the pressed button's ID*/
if(button_is_pressed(i)) {
return i;
}
}
#endif
/*No button pressed*/
return -1;
}5.3 修改Button对应Gauge的处理
STM32L475_LVGL\GUI\lvgl_app\generated\events_init.c大部分的事件处理都在这个函数中，如前文提到的通过Status跳转下一面和Back跳转上一页面的代码都是在函数中实现
现在我们要添加点击Button会使电量计变化的代码
uint8_t gauge_value = 0;
static void screen_home_btn_1event_handler(lv_obj_t * obj, lv_event_t event)
{
switch (event)
{
case LV_EVENT_CLICKED:
{
if (gauge_value > 180)
gauge_value = 0;
gauge_value += 10;
lv_gauge_set_value(guider_ui.screen_home_gauge_1, 0, gauge_value);
printf("%s, gauag_value = %d\n", __func__, gauge_value);
}
break;
default:
break;
}
}
