系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

系列文章目录
前言
一、增加触摸的工程配置
二、注意事项
- 1.I/O配置
三、触摸的配置与使用
总结

前言

上一节讲了导入Gui-Guider的工程，基本的显示没问题了。下一个环节就是配置触摸了。

一、增加触摸的工程配置

在VSCode的环境中来操作是非常便捷的。只需要在配置文件中进行点选即可。
在这里插入图片描述
需要注意的是OLED屏和触摸各使用了1组SPI。所以就没有其他的SPI资源了。

二、注意事项

1.I/O配置

由于这次换了硬件，LED的驱动变了，配置好了IO之后依旧屏幕没有显示，反复检查了几次都没有效果。
最终发现由于这个硬件所使用的I/O口是相对随意的，没有按照IOMUX定义的来选择。因此在I/O初始化部分会存在问题。
在lvgl_helpers.c中修改lvgl_spi_driver_init 内的buscfg配置。在这里插入图片描述

代码如下（示例）：

    spi_bus_config_t buscfg = {
    
    
        .miso_io_num = miso_pin,
        .mosi_io_num = mosi_pin,
        .sclk_io_num = sclk_pin,
        .quadwp_io_num = quadwp_pin,
        .quadhd_io_num = quadhd_pin,
        .max_transfer_sz = max_transfer_sz,
        // 20221017 强制使用GPIO 矩阵
        .flags = SPICOMMON_BUSFLAG_GPIO_PINS
    };

关于IOMUX和GPIO的矩阵的区别就是 IOMUX更像是高速通道，有固定的出入口，速度上更快一点，不过IO可配置的功能有限。GPIO矩阵呢就是普通公路，哪里都可以去。所有的IO都可以任意分配功能，缺点呢就是速度上会低一点。

这样处理以后，可以正常显示了。配置了20M的速度，跟上一套硬件40M的速度上感觉不出太明显的差别。

三、触摸的配置与使用

这里尝试了两个Demo，一个是沿用上一篇的DEMO，简单配置了一个GIF的显示并且开启了触摸。另外一个是Gui-Guider的加咖啡的Demo，这个Demo里有两个按键，并且有按键的动作处理。
在这里插入图片描述
那么这个UI是如何做的呢？
一开始还以为点击continue液面上升时候的进度条是控件做的。研究了一下原来中间整体就是一个GIF动画。所以呢这个就很简单了。整个页面包含了两个button和一个动画显示。

扫描二维码关注公众号，回复： 15953903 查看本文章

typedef struct
{
    
    
	lv_obj_t *screen;
	bool screen_del;
	lv_obj_t *screen_reset;
	lv_obj_t *screen_reset_label;
	lv_obj_t *screen_animimg1;
	lv_obj_t *screen_continue;
	lv_obj_t *screen_continue_label;
}lv_ui;

导出的lv_ui结构体包含几个变量。

screen是整个页面。
screen_reset是复位按钮
screen_reset_label是复位按钮内的文字
screen_animimg1动画显示
screen_continue是继续按钮
screen_continue_label是继续按钮内的文字

void setup_scr_screen(lv_ui *ui)函数内的内容也相对就容易理解了，基本就是创建对象，然后设置对象的Style。
最后通过下面的函数来初始化按键的处理接口。

	//Init events for screen
	events_init_screen(ui);

当然关于触摸的底层处理，在前面main.c中已经处理，这里我们不需要关心底层。

    /* Register an input device when enabled on the menuconfig */
#if CONFIG_LV_TOUCH_CONTROLLER != TOUCH_CONTROLLER_NONE
    lv_indev_drv_t indev_drv;
    lv_indev_drv_init(&indev_drv);
    indev_drv.read_cb = touch_driver_read;
    indev_drv.type = LV_INDEV_TYPE_POINTER;
    lv_indev_drv_register(&indev_drv);
#endif

只需要知道LVGL已经帮我们处理了坐标与按钮元素的对应，以及各种按钮动作的分解（长按、短按等）都处理好了。用户只需要构建好事件的处理函数就好。其中LV_EVENT_ALL意思是所有的时间都会除法事件处理。

	lv_obj_add_event_cb(ui->screen_reset, screen_reset_event_handler, LV_EVENT_ALL, NULL);
	lv_obj_add_event_cb(ui->screen_continue, screen_continue_event_handler, LV_EVENT_ALL, NULL);

我们就简单看其中的一个事件处理函数即可。

static void screen_reset_event_handler(lv_event_t *e)
{
    
    
	lv_event_code_t code = lv_event_get_code(e);
	switch (code)
	{
    
    
	case LV_EVENT_CLICKED:
	{
    
    
		lv_animimg_t * animimg1 = (lv_animimg_t *)guider_ui.screen_animimg1;
		lv_anim_set_values(&animimg1->anim, 0, 1);
		lv_animimg_start(guider_ui.screen_animimg1);
	}
		break;
	default:
		break;
	}
}

这里面的操作也比较好理解，当事件是LV_EVENT_CLICKED的时候，播放animimg1。从0开始到1结束，也就是只播放第一张。也就是静止图片了。

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

【ESP32S3学习笔记】LVGL开发之触摸支持（ST7789+XPT2046）