LCD触摸

和之前一样，先大致介绍一下：开发板上的触摸屏是电容触摸屏，用手指就可以触摸，支持双指触摸。触摸芯片型号是FT6336，使用I2C接口与ESP32-C3连接，I2C地址为0x38

在这之前，我们首先要添加触摸屏组件：点击打开工程目录下的CMakeLists.txt文件，修改工程名称为spi_lcd_touch

project(spi_lcd_touch)

乐鑫官方有个在线的组件管理工具，网址是：https://components.espressif.com/  这个工具提供了很多常用的组件代码，有很多常用芯片的驱动函数。开发板上使用的电容触摸屏控制芯片是FT6336，我们在官网的搜索框中输入FT6336搜索，发现有一个组件，经过我的验证，不太好用。但是又发现一个好用的，你可以搜索ft5x06，这个型号和FT6336代码是通用的，如下图所示。

点击进去，在网页的右侧有使用方法，如下图所示

点击复制按钮，复制阴影里面的内容，然后点击VSCode左下角的“终端”图标打开终端，出现一个你的工程路径，不管有没有连接开发板都可以

然后把刚才复制的内容粘贴到这里，只需要在输入的这里点击右键就可以粘贴，粘贴完以后点击回车

PS D:\esp32c3\spi_lcd_touch> idf.py add-dependency "espressif/esp_lcd_touch_ft5x06^1.0.6"

回车后出现如下提示，表示成功添加组件

PS D:\esp32c3\spi_lcd_touch> idf.py add-dependency "espressif/esp_lcd_touch_ft5x06^1.0.6"
Executing action: add-dependency
Successfully added dependency "espressif/esp_lcd_touch_ft5x06^1.0.6" to component "main"
PS D:\esp32c3\spi_lcd_touch> 

然后点击打开idf_component.yml文件，会发现这里面多了一行添加组件的代码，就是下面代码中的第2行

dependencies:
  espressif/esp_lcd_touch_ft5x06: "^1.0.6"
  idf: ">=4.4"
  lvgl/lvgl: "~8.3.0"
  # esp_lcd_ili9341: "^1.0"
  # esp_lcd_gc9a01: "^1.0"
  # esp_lcd_touch_stmpe610: "^1.0"

点击软件左下角的垃圾桶图标，删除之前编译过的所有文件。删除后，会发现build文件夹不在了，现在点击编译按钮，编译一下工程，编译完成后看工程左侧的managed_components组件，原来只有lvgl，现在多了两个关于触摸屏的组件

接下来，点击打开main目录下的spi_lcd_touch_example_main.c文件，修改这里面关于触摸屏的代码部分，ESP32-C3与FT6336通过I2C通信（地址是0x38），需要给代码中添加I2C初始化的代码，在电脑硬盘上，复制之前用过的myi2c代码到本工程的main文件夹

然后在VSCode下点击打开main下的CMakeLists.txt文件，看看是否添加好了myi2c.c的编译路径，如果没有自动添加，你就自己把myi2c.c写进入，最后如下所示

idf_component_register(SRCS "myi2c.c" "spi_lcd_touch_example_main.c" "lvgl_demo_ui.c"
                       INCLUDE_DIRS ".")

在spi_lcd_touch_example_main.c文件的最开始处添加包含头文件myi2c.h

#include "myi2c.h"

在app_main函数的最开始处添加调用I2C初始化代码，I2C初始化工作完成

ESP_ERROR_CHECK(i2c_master_init());
ESP_LOGI(TAG, "I2C initialized successfully");

LCD驱动芯片型号默认的是ILI9341和GC9A01，然后在menuconfig中添加自定义选项ST7789来配置LCD驱动芯片型号。现在，打开menuconfig，点击Example Configuration后，再点击勾选Enable LCD touch，又出现一个选项LCD touch controller model，里面只有一个型号STMPE610，需要给它添加FT6336，先关闭menuconfig

点击打开Kconfig.projbuild文件，修改触摸屏部分，增加FT6336的选型，如下代码所示，这里面的help是提示作用

    choice EXAMPLE_LCD_TOUCH_CONTROLLER
        prompt "LCD touch controller model"
        depends on EXAMPLE_LCD_TOUCH_ENABLED
        default EXAMPLE_LCD_TOUCH_CONTROLLER_STMPE610
        help
            Select LCD touch controller model

        config EXAMPLE_LCD_TOUCH_CONTROLLER_STMPE610
            bool "STMPE610"
        
        config EXAMPLE_LCD_TOUCH_CONTROLLER_FT6336
            bool "FT6336"
    endchoice

保存关闭这个文件后，先点击VSCode软件中左下角的文件夹图标，目的是更新一下当前工程，目的是让menuconfig中添加刚才添加的ft6336选项，然后再打开menuconfig，选择LCD驱动型号为ST7789，然后勾选LCD touch，然后选择触摸驱动为FT6336，如下图所示

在include包含完头文件后面一些，有一个条件编译CONFIG_EXAMPLE_LCD_TOUCH_CONTROLLER_STMPE610，这里增加FT6336的条件编译，代码修改后如下：

#if CONFIG_EXAMPLE_LCD_TOUCH_CONTROLLER_STMPE610
#include "esp_lcd_touch_stmpe610.h"
#elif CONFIG_EXAMPLE_LCD_TOUCH_CONTROLLER_FT6336
#include "esp_lcd_touch_ft5x06.h"
#endif

接下来，修改app_main中的代码。大概从243行开始的这里，有个CONFIG_EXAMPLE_LCD_TOUCH_ENABLED的条件编译

这里需要修改四处地方，第一个是把类型定义（esp_lcd_panel_io_spi_config_t ）里面的spi修改为i2c，第二个是把配置函数名称（ESP_LCD_TOUCH_IO_SPI_STMEP610_CONFIG）里面的SPI改成I2C，第三个是把配置函数名称中的STMPE610改成了FT5x06，注意这里的5x06的x是小写。最后一个是把配置函数括号里面的EXAMPLE_PIN_NUM_TOUCH_CS删除，最后代码如下所示：

esp_lcd_panel_io_i2c_config_t tp_io_config = ESP_LCD_TOUCH_IO_I2C_FT5x06_CONFIG();

改完后，把鼠标放到ESP_LCD_TOUCH_IO_I2C_FT5x06_CONFIG()代码上面单击右键弹出菜单，选择第一个“转到定义”，会发现这是一个宏定义，在esp_lcd_touch_ft5x06.h文件中定义

回到spi_lcd_touch_example_main.c文件，把app_main函数中的下面这两行代码删掉。因为触摸屏是I2C接口，这里不需要Attach附着

// Attach the TOUCH to the SPI bus
ESP_ERROR_CHECK(esp_lcd_new_panel_io_spi((esp_lcd_spi_bus_handle_t)LCD_HOST, &tp_io_config, &tp_io_handle));

接下来是tp_cfg配置

再接下来，我们找到下面这几行代码，这几行代码是添加驱动的，添加后，再修改为相应的驱动名称，最后代码如下所示

#if CONFIG_EXAMPLE_LCD_TOUCH_CONTROLLER_STMPE610
    ESP_LOGI(TAG, "Initialize touch controller STMPE610");
    ESP_ERROR_CHECK(esp_lcd_touch_new_spi_stmpe610(tp_io_handle, &tp_cfg, &tp));
#endif // CONFIG_EXAMPLE_LCD_TOUCH_CONTROLLER_STMPE610
#if CONFIG_EXAMPLE_LCD_TOUCH_CONTROLLER_FT6336
    ESP_LOGI(TAG, "Initialize touch controller FT6336");
    ESP_ERROR_CHECK(esp_lcd_touch_new_i2c_ft5x06(tp_io_handle, &tp_cfg, &tp));
#endif // CONFIG_EXAMPLE_LCD_TOUCH_CONTROLLER_FT6336

第2个if编译是修改的，把鼠标放到esp_lcd_touch_new_i2c_ft5x06上面单击右键选择“转到定义”，会发现这个函数是在esp_lcd_touch_ft5x06.c文件中定义的

esp_lcd_touch_ft5x06.c和上面提到的esp_lcd_touch_ft5x06.h文件都位于espressif__esp_lcd_touch_ft5x06组件代码中

esp_lcd_touch_ft5x06.c文件中，有两个函数需要修改后才可以使用，IDF有个规定，如果要修改managed_components中的代码，需要先把managed_components中的组件放到自己的components中才可以修改，否则你改了之后，一编译，就会恢复原来的样子，就白改了，所以先在spi_lcd_touch文件夹中新建一个文件，命名为components

然后把managed_components文件夹中的espressif__esp_lcd_touch_ft5x06文件夹剪切到components文件夹中；注意，是剪切，不是复制。在剪切之前，把VSCode软件打开的esp_lcd_touch_ft5x06.c和esp_lcd_touch_ft5x06.h文件先关闭

粘贴完以后，我们再找到esp_lcd_touch_ft5x06.c文件点击打开，拖到最后面，有两个函数，分别是I2C读写函数

static esp_err_t touch_ft5x06_i2c_write(esp_lcd_touch_handle_t tp, uint8_t reg, uint8_t data)
{
    assert(tp != NULL);

    // *INDENT-OFF*
    /* Write data */
    // return esp_lcd_panel_io_tx_param(tp->io, reg, (uint8_t[]){data}, 1);
    // *INDENT-ON*
    uint8_t write_buf[2] = {reg, data};

    return i2c_master_write_to_device(0, 0x38, write_buf, sizeof(write_buf), 1000 / portTICK_PERIOD_MS);
}

static esp_err_t touch_ft5x06_i2c_read(esp_lcd_touch_handle_t tp, uint8_t reg, uint8_t *data, uint8_t len)
{
    assert(tp != NULL);
    assert(data != NULL);

    /* Read data */
    // return esp_lcd_panel_io_rx_param(tp->io, reg, data, len);
    return i2c_master_write_read_device(0, 0x38, &reg, 1, data, len, 1000 / portTICK_PERIOD_MS);
}

这其中的0x38是FT6336的I2C地址

点击按钮后的处理函数是example_lvgl_port_update_callback，这个函数位于app_main函数上面一点，我们找到这个函数，发现这个函数是一个switch case结构，有4种case，分别对应旋转的4个方向。默认是LV_DISP_ROT_NONE，点击一次按钮后，变成LV_DISP_ROT_90，再点击一次变成LV_DISP_ROT_180，再点击一次变成LV_DISP_ROT_270，再点击一次回到LV_DISP_ROT_NONE，点击了一次，说明函数进LV_DISP_ROT_90进行了处理

    case LV_DISP_ROT_90:
        // Rotate LCD display
        esp_lcd_panel_swap_xy(panel_handle, true);
        esp_lcd_panel_mirror(panel_handle, true, true);

我们刚才点击后看到，xy坐标是转换过来了，就是x方向有镜像，所以改成下面的代码

    case LV_DISP_ROT_90:
        // Rotate LCD display
        esp_lcd_panel_swap_xy(panel_handle, true);
        esp_lcd_panel_mirror(panel_handle, false, true);

然后再编辑下载到开发板，点击ROTATE按钮后，发现旋转了90度后可以正常显示了，然后我们再点击ROTATE按钮，发现旋转后的图像在x方向镜像，所以把180的代码修改一下，修改后如下所示

    case LV_DISP_ROT_180:
        // Rotate LCD display
        esp_lcd_panel_swap_xy(panel_handle, false);
        esp_lcd_panel_mirror(panel_handle, true, true);

修改好以后，再次编辑下载到开发板看结果，发现270还是在x方向镜像

    case LV_DISP_ROT_270:
        // Rotate LCD display
        esp_lcd_panel_swap_xy(panel_handle, true);
        esp_lcd_panel_mirror(panel_handle, true, false);

修改好以后，再次编辑下载到开发板看结果，发现最后回到NONE的时候，x方向镜像了，所以我们再修改一下NONE的代码，修改后如下

    case LV_DISP_ROT_NONE:
        // Rotate LCD display
        esp_lcd_panel_swap_xy(panel_handle, false);
        esp_lcd_panel_mirror(panel_handle, false, false);

修改好以后，再次编辑下载到开发板看结果，这次就发现都正常了。总结一下，修改每个case里面mirror函数的x轴参数就可以，把原来的true改成false，把false改成true