ESP-IDF开发

本章介绍 ESP-IDF 环境搭建，包括 Visual Studio、Espressif IDF插件的安装，程序编译下载及示例程序测试，帮助用户掌握开发板，便于二次开发。

环境搭建

下载和安装 Visual Studio

打开VScode官网的下载页面，选择对应系统和系统位数进行下载
运行安装包后，其余均可以默认安装，但这里为了后续的体验建议，建议在此处勾选框中的1、2、3项
- 第一二项开启后，可以直接通过鼠标右键文件或者目录打开VSCode，可以提高后续的使用体验.
- 第三项开启后，选择打开方式时，可以直接选择VSCode

环境设置是在 Windows 10 系统下进行，Linux和Mac用户可访问ESP-IDF环境搭建参考

安装Espressif IDF插件

国内部分区域安装，一般推荐“在线安装”，若因网络因素无法在线安装，则使用“离线安装”。
安装Espressif IDF插件教程，详见：安装Espressif IDF插件教程
需要安装 ESP-IDF V5.4.0 或更高版本。

运行第一个 ESP-IDF 程序

如果你刚入门学习ESP32和ESP-IDF，还不知道如何创建、编译、烧录和运行ESP-IDF程序，那么请展开看看，希望可以帮助到你！

新建项目

创建例程

使用快捷键 F1 ，输入esp-idf:show examples projects

选择你当前的IDF版本

以Hello world例程为例

①选择对应例程
②其readme会说明该例程适用于什么芯片（下文有介绍例程怎么使用与文件结构，这里略）
③点击创建例程

选择放置例程的路径，要求无例程同名文件夹

修改COM口

此处显示使用对应的COM口，点击可以修改对应COM口
请根据设备对应COM口进行选择（可通过设备管理器查看）
若出现下载失败的情况请点击复位按键1秒以上或进入下载模式，等待 PC 端重新识别到设备后再次下载

修改驱动对象

选择我们需要驱动的对象，也就是我们的主芯片为ESP32S3

选择openocd的路径，这里对我们没有影响，所以我们随便选择一个即可

其余状态栏简介

①.ESP-IDF开发环境版本管理器，当我们的工程需要区分开发环境版本时，可以通过安装不同版本的ESP-IDF来分别管理，当工程使用特定版本时，可以通过使用它来切换
②.设备烧录COM口，选择以将编译好的程序烧录进芯片上
③.set-target 芯片型号选择，选择对应的芯片型号，如:ESP32-P4-Nano需要选择 esp32p4 为目标芯片
④.menuconfig，点击修改sdkconfig配置文件内容，项目配置详细资料
⑤.fullclean 清理按钮，当工程编译报错或其他操作污染编译内容时，通过点击清理全部编译内容
⑥. Build 构建工程，当一个工程满足构建时，通过此按钮进行编译
⑦.当前下载方式，默认为UART
⑧.flash烧录按钮，当一个工程Build构建通过时，选择对应开发板COM口，点击此按钮可以将编译好的固件烧录至芯片
⑨.monitor开启烧录口监控，当一个工程Build-->flash后，可通过点击此按钮查看烧录、调试口输出的l0g，以便观察应用程序是否正常工作
⑩.Debug调试
⑪.Build Flash Monitor 一键按钮，用于连续执行Build-->Flash-->Monitor，常被称作小火苗

编译、烧录、串口监视

点击我们之前介绍的编译，烧录，打开串口监视器按键

编译可能需要较长时间才能完成，尤其是在第一次编译时

在此过程中，ESP-IDF可能会占用大量CPU资源，因此可能会导致系统卡顿
若是新工程首次烧录程序，将需要选择下载方式，选择 UART

后续也可在下载方式处进行修改（点击即可弹出选项）

因为板载自动下载电路，无需手动操作即可自动下载
下载成功后，自动进入串口监视器，可以看到芯片输出对应的信息并提示10S后重启

使用IDF 示例程序

下文以使用“ESP32-S3-LCD-1.47-Demo”为例介绍工程的两种打开方式及使用的一般步骤、ESP-IDF工程项目详解，若使用其他工程，操作步骤类推。

软件内部打开

打开 VScode 软件，选择文件夹打开示例

选择提供的 ESP-IDF 下的示例，点击选择文件(位于示例程序/Demo/ESP-IDF 路径下)

软件外部打开

正确选择工程目录，打开工程，否则会影响后续程序编译烧录

连接设备后，选择好COM口和型号，点击下方编译并烧录即可实现程序控制

ESP-IDF工程项目详解

组件（Component）:ESP-IDF中的组件是构建应用的基本模块，每个组件通常是相对独立的代码库或库，能实现特定的功能或服务，可以被应用程序或是其他组件重复使用，类似于Python开发中的库的定义。
- 组件的引用：Python开发环境中引入库只需要“import 库名或路径”即可，而ESP-IDF基于C语言基础，引入库是通过CMakeLists.txt进行配置和定义的。
- CmakeLists.txt的作用：ESP-IDF编译时编译工具CMake会首先通过读取工程目录的顶层CMakeLists.txt的内容来读取构建规则，识别需要编译的内容。当在CMakeLists.txt中引入了需要的组件、程序后，编译工具CMake会根据索引导入每个所需要编译的内容。编译过程如：

修改COM口

此处显示使用对应的COM口，点击可以修改对应COM口
请根据设备对应COM口进行选择（可通过设备管理器查看）
若出现下载失败的情况请点击复位按键1秒以上或进入下载模式，等待 PC 端重新识别到设备后再次下载

修改驱动对象

选择我们需要驱动的对象，下图以主芯片为ESP32S3 以例（用户根据手头实物板子的主控芯片对应设置）

选择openocd的路径，这里对我们没有影响，所以我们随便选择一个即可

其余状态栏简介

①.ESP-IDF开发环境版本管理器，当我们的工程需要区分开发环境版本时，可以通过安装不同版本的ESP-IDF来分别管理，当工程使用特定版本时，可以通过使用它来切换
②.设备烧录COM口，选择以将编译好的程序烧录进芯片上
③.set-target 芯片型号选择，选择对应的芯片型号，如:ESP32-P4-Nano需要选择 esp32p4 为目标芯片
④.menuconfig，点击修改sdkconfig配置文件内容，项目配置详细资料
⑤.fullclean 清理按钮，当工程编译报错或其他操作污染编译内容时，通过点击清理全部编译内容
⑥. Build 构建工程，当一个工程满足构建时，通过此按钮进行编译
⑦.当前下载方式，默认为UART
⑧.flash烧录按钮，当一个工程Build构建通过时，选择对应开发板COM口，点击此按钮可以将编译好的固件烧录至芯片
⑨.monitor开启烧录口监控，当一个工程Build-->flash后，可通过点击此按钮查看烧录、调试口输出的l0g，以便观察应用程序是否正常工作
⑩.Debug调试
⑪.Build Flash Monitor 一键按钮，用于连续执行Build-->Flash-->Monitor，常被称作小火苗

编译、烧录、串口监视

点击我们之前介绍的编译，烧录，打开串口监视器按键

编译可能需要较长时间才能完成，尤其是在第一次编译时

在此过程中，ESP-IDF可能会占用大量CPU资源，因此可能会导致系统卡顿
若是新工程首次烧录程序，将需要选择下载方式，选择 UART

后续也可在下载方式处进行修改（点击即可弹出选项）

因为板载自动下载电路，无需手动操作即可自动下载
下载成功后，自动进入串口监视器，可以看到芯片输出对应的信息并提示10S后重启

使用IDF 示例程序

下文以使用“ESP32-S3-LCD-1.47-Demo”为例介绍工程的两种打开方式及使用的一般步骤、ESP-IDF工程项目详解，若使用其他工程，操作步骤类推。

软件内部打开

打开 VScode 软件，选择文件夹打开示例

选择提供的 ESP-IDF 下的示例，点击选择文件(位于示例程序/Demo/ESP-IDF 路径下)

软件外部打开

正确选择工程目录，打开工程，否则会影响后续程序编译烧录

连接设备后，选择好COM口和型号，点击下方编译并烧录即可实现程序控制

ESP-IDF工程项目详解

组件（Component）:ESP-IDF中的组件是构建应用的基本模块，每个组件通常是相对独立的代码库或库，能实现特定的功能或服务，可以被应用程序或是其他组件重复使用，类似于Python开发中的库的定义。
- 组件的引用：Python开发环境中引入库只需要“import 库名或路径”即可，而ESP-IDF基于C语言基础，引入库是通过CMakeLists.txt进行配置和定义的。
- CmakeLists.txt的作用：ESP-IDF编译时编译工具CMake会首先通过读取工程目录的顶层CMakeLists.txt的内容来读取构建规则，识别需要编译的内容。当在CMakeLists.txt中引入了需要的组件、程序后，编译工具CMake会根据索引导入每个所需要编译的内容。编译过程如：

示例程序

ESP32-S3-Touch-LCD-3.5 示例程序
示例程序	基础例程说明
01_factory	综合示例程序
02_lvgl_example	运行LVGL官方的Demo UI
03_lvgl_system	使用LVGL显示系统的参数、测试ES8311、控制屏幕亮度。
04_lvgl_qmi8658	使用LVGL显示qmi8658获取的数据
05_lvgl_axp2101	使用LVGL显示电源管理芯片axp2101的各种数据
06_lvgl_camera	使用LVGL显示摄像头获取的图像
07_lvgl_wifi	使用LVGL显示WiFi扫描到的ssid和信号强度
08_lvgl_image	使用LVGL显示SD卡的图片

01_factory

【程序说明】

本示例演示是ESP32-S3-Touch-LCD-3.5的综合示例，也是出厂默认烧录的示例。

【代码分析】

初始化

    i2c_bus_init();
    io_expander_init();
    esp_3inch5_display_port_init(&io_handle, &panel_handle, LCD_BUFFER_SIZE);
    esp_3inch5_touch_port_init(&touch_handle, i2c_bus_handle, EXAMPLE_LCD_H_RES, EXAMPLE_LCD_V_RES, EXAMPLE_DISPLAY_ROTATION);
    esp_axp2101_port_init(i2c_bus_handle);
    vTaskDelay(pdMS_TO_TICKS(100));
    esp_es8311_port_init(i2c_bus_handle);
    esp_qmi8658_port_init(i2c_bus_handle);
    esp_pcf85063_port_init(i2c_bus_handle);
    esp_sdcard_port_init();
    esp_camera_port_init(I2C_PORT_NUM);
    esp_wifi_port_init("WSTEST", "waveshare0755");

    esp_3inch5_brightness_port_init();
    esp_3inch5_brightness_port_set(80);
    lv_port_init();

【运行效果】

触摸测试，手指滑动屏幕，显示其轨迹，短按BOOT按键，退出触摸测试。

通过左右滑动进行界面切换。

02_lvgl_example

【程序说明】

本示例演示 ESP32-S3-Touch-LCD-3.5 运行lvgl示例。

【运行效果】

可以进行触摸操作。

03_lvgl_system

【程序说明】

本示例演示 ESP32-S3-Touch-LCD-3.5 使用lvgl显示系统的信息，以及测试es8311和控制屏幕亮度。

【代码分析】

获取Flash、Psram和SD卡的大小以及系统运行频率

    esp_flash_get_size(NULL, &flash_size);
    lv_label_set_text_fmt(label_flash, "%d MB", (int)(flash_size / 1024 / 1024));

    psram_size = (uint32_t)esp_psram_get_size();
    lv_label_set_text_fmt(label_psram, "%d MB", (int)(psram_size / 1024 / 1024));

    cpu_freq = esp_clk_cpu_freq();
    lv_label_set_text_fmt(label_chip_freq, "%d MHz", (int)(cpu_freq / 1000 / 1000));

    sdcard_size = esp_sdcard_port_get_size();
    lv_label_set_text_fmt(label_sd, "%d MB", (int)(sdcard_size / 1024 / 1024));

【运行效果】

04_lvgl_qmi8658

【程序说明】

本示例演示 ESP32-S3-Touch-LCD-3.5 使用lvgl显示qmi8658的数据

【运行效果】

05_lvgl_axp2101

【程序说明】

本示例演示了如何使用 ESP32-S3-Touch-LCD-3.5 使用lvgl显示axp2101的数据。

【运行效果】

06_lvgl_camera

【程序说明】

本示例演示 ESP32-S3-Touch-LCD-3.5 使用lvgl显示摄像头获取的图像。

【代码分析】

获取摄像头的图像并更新到lvgl

void camera_task(void *arg)
{
    camera_fb_t *pic;
    lv_img_dsc_t img_dsc;
    img_dsc.header.always_zero = 0;
    img_dsc.header.w = 320;
    img_dsc.header.h = 480;
    img_dsc.data_size = 320 * 480 * 2;
    img_dsc.header.cf = LV_IMG_CF_TRUE_COLOR;
    img_dsc.data = NULL;
    while (1)
    {
        pic = esp_camera_fb_get();

        if (NULL != pic)
        {
            // printf("pic->len = %d\n", pic->len);
            img_dsc.data = pic->buf;
            if (lvgl_port_lock(0))
            {
                lv_img_set_src(cam_ing, &img_dsc);
                lvgl_port_unlock();
            }
        }
        esp_camera_fb_return(pic);

        vTaskDelay(pdMS_TO_TICKS(1));
    }
}

【运行效果】

07_lvgl_wifi

【程序说明】

本示例演示 ESP32-S3-Touch-LCD-3.5 WiFi扫描，并使用lvgl显示扫描到的WiFi的名称和信号强度。

【代码分析】

扫描WiFi并更新到lvgl

static void lvgl_wifi_task(void *arg)
{
    char str[50] = {0};
    char str_wifi_ip[32] = {0};
    lv_obj_t *label;
    wifi_ap_record_t ap_info[LIST_BTN_LEN_MAX];

    while (1)
    {
        if (xSemaphoreTake(wifi_scanf_semaphore, pdMS_TO_TICKS(1000)) == pdTRUE)
        {
            printf("wifi_scanf!!\r\n");
            memset(ap_info, 0, sizeof(ap_info));
            if (esp_wifi_port_scan(ap_info, &list_item_count, LIST_BTN_LEN_MAX))
            {
                lv_obj_del(list_btns[0]);
                if (lvgl_port_lock(0))
                {
                    for (int i = 0; i < list_item_count && i < LIST_BTN_LEN_MAX; i++)
                    {
                        list_btns[i] = lv_list_add_btn(list, NULL, (char *)ap_info[i].ssid);
                        label = lv_label_create(list_btns[i]);
                        lv_label_set_text_fmt(label, "%d db", ap_info[i].rssi);
                    }
                    lvgl_port_unlock();
                }
            }
        }

        esp_wifi_port_get_ip(str_wifi_ip);
        sprintf(str, "IP: %s", str_wifi_ip);

        if (lvgl_port_lock(0))
        {
            lv_label_set_text(lable_wifi_ip, str);
            lvgl_port_unlock();
        }
    }
}

【运行效果】

08_lvgl_image

【程序说明】

本示例演示 ESP32-S3-Touch-LCD-3.5 使用lvgl显示SD卡的图片，支持jpg、bmp、png、bin等格式的图片。

【准备工作】

将SD卡插入电脑
在SD卡根目录新建文件夹 images
把本工程下data文件夹里面的全部文件拷贝到SD卡的images文件夹里
将SD卡插入 ESP32-S3-Touch-LCD-3.5

【代码分析】

读取 S:images 目录下的所有图片，并打印文件名

    read_image_files("S:images");
    print_image_filenames();

初始化ui，并添加左右滑动切换图片。

        img = lv_img_create(lv_scr_act());
        lv_obj_set_size(img, 320, 480);
        lv_obj_align(img, LV_ALIGN_CENTER, 0, 0);
        snprintf(str_buf, sizeof(str_buf), "S:images/%s", image_filenames[0]);
        printf("img_set_src: %s\r\n", str_buf);
        lv_img_set_src(img, str_buf);
        lv_obj_clear_flag(img, LV_OBJ_FLAG_SCROLLABLE);
        lv_obj_add_flag(img, LV_OBJ_FLAG_GESTURE_BUBBLE);
        lv_obj_add_event_cb(lv_scr_act(), img_gesture_event_cb, LV_EVENT_GESTURE, NULL);

【运行效果】

导航菜单

模板: ESP32-S3-Touch-LCD-3.5-IDF-Demo

目录

ESP-IDF开发

环境搭建

下载和安装 Visual Studio

安装Espressif IDF插件

运行第一个 ESP-IDF 程序

新建项目

创建例程

修改COM口

修改驱动对象

其余状态栏简介

编译、烧录、串口监视

使用IDF 示例程序

软件内部打开

软件外部打开

ESP-IDF工程项目详解

修改COM口

修改驱动对象

其余状态栏简介

编译、烧录、串口监视

使用IDF 示例程序

软件内部打开

软件外部打开

ESP-IDF工程项目详解

示例程序

01_factory

02_lvgl_example

03_lvgl_system

04_lvgl_qmi8658

05_lvgl_axp2101

06_lvgl_camera

07_lvgl_wifi

08_lvgl_image