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/126585678LVGL-GUI Guider初始体验_gui-guider_云海无语的博客-CSDN博客基于STM32L475的LVGL系列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;
	}
}

5.4 编译代码并解决相关的错误