跳到主要内容

ESP-IDF

本章节包含以下部分，请按需阅读：

ESP-IDF 入门教程​

初次接触 ESP32 ESP-IDF 开发，想要快速上手？我们为您准备了一套通用的 入门教程。

请注意：该教程使用 ESP32-S3-Zero 作为教学示例，所有硬件代码均基于其引脚布局。在动手实践前，建议您对照手中的开发板引脚图，确认引脚配置无误。

配置 ESP-IDF 开发环境​

信息

对于 ESP32-C6-Touch-LCD-1.47 开发板，需要使用 ESP-IDF V5.5.0 以上版本。

备注

以下内容以 Windows 系统为例，使用 VS Code + ESP-IDF 扩展 的方式进行开发。Mac/Linux 用户请参考 官方说明。

安装 ESP-IDF 开发环境​

  1. 前往 ESP-IDF Installation Manager 下载 ESP-IDF 安装管理器。这是乐鑫最新推出的跨平台安装工具，下文将演示如何使用其离线安装功能。

    在页面中点击 Offline Installer 标签，然后在筛选栏中选择 Windows 操作系统和你要安装的版本。

    下载 EIM 和整合包

    确认选择无误后，点击下载按钮。浏览器将自动同时下载两个文件：一个是 ESP-IDF 离线整合包(.zst)，另一个是 ESP-IDF 安装器(.exe)。

    下载 EIM 和整合包2

    请耐心等待两个文件下载完成。

  2. 下载完成后，双击运行 ESP-IDF 安装器(eim-gui-windows-x64.exe)。

    启动后，可在右上角将界面语言切换为中文。

    切换 EIM 语言

    安装工具会自动检测同一目录下是否存在离线整合包。点击 从存档安装。

    自动检测整合包

    接下来，选择安装路径。建议使用默认路径；若需自定义，请确保路径中不包含中文或空格。确认无误后，点击 开始安装。

    选择安装路径

  3. 当看到如下界面时，表示 ESP-IDF 已安装成功。

    安装成功

  4. 建议同时安装驱动程序。点击 完成安装，然后点击 安装驱动程序。

    用 ESP-IDF 安装管理器安装驱动

安装 Visual Studio Code 与 ESP-IDF 扩展​

  1. 下载并安装 Visual Studio Code。

  2. 安装时建议勾选 通过 Code 打开操作添加到 Windows 资源管理器文件上下文菜单,以便快速打开项目文件夹。

  3. 在 VS Code 中,点击侧边活动栏中的 扩展图标 扩展图标(或使用快捷键 Ctrl + Shift + X)打开 扩展 视图。

  4. 在搜索框中输入 ESP-IDF,找到 ESP-IDF 扩展并点击安装。

    在 VS Code 中搜索并安装 ESP-IDF 扩展

  5. 当 ESP-IDF 扩展版本 ≥ 2.0 时,扩展会自动检测并识别上述步骤中安装的 ESP-IDF 环境,无需手动配置。

示例程序​

idf 示例程序

示例程序基础例程说明依赖库
01_factory综合示例程序-
02_sd_card_test测试 SD 卡读写-
03_lvgl_example显示 lvgl 示例程序-
04_lvgl_image使用 lvgl 库显示图片-

01_factory​

【程序说明】

  • 本示例测试 ESP32-C6-Touch-LCD-1.47 板载模块的功能，屏幕上将显示各个模块的信息，用户可以通过触摸屏左右滑动进行页面切换

【硬件连接】

  • 将板子接入电脑
  • 将 Micro SD 卡插入卡槽

【代码分析】

  • 设置要显示的图片 
    i2c_bus_handle = bsp_i2c_init();
    bsp_battery_init();
    bsp_wifi_init("WSTEST", "waveshare0755");
    bsp_display_init(&io_handle, &panel_handle, EXAMPLE_LCD_H_RES * EXAMPLE_LCD_DRAW_BUFF_HEIGHT);
    bsp_touch_init(&touch_handle, i2c_bus_handle, EXAMPLE_LCD_H_RES, EXAMPLE_LCD_V_RES, EXAMPLE_DISPLAY_ROTATION);
    bsp_sdcard_init();
    ESP_ERROR_CHECK(app_lvgl_init());
    lv_fs_fatfs_init();

    bsp_display_brightness_init();
    bsp_display_set_brightness(100);
  • LVGL 图形库配置 
    if (lvgl_port_lock(0))
    {
        lvgl_ui_init();
        lvgl_port_unlock();
    }

【运行效果】

02_sd_card_test​

【程序说明】

  • 本示例演示了 ESP32-C6-Touch-LCD-1.47 测试 SD 卡的读写功能

【硬件连接】

  • 将板子接入电脑
  • 将 Micro SD 卡插入卡槽（SD 卡需要格式化为 FAT32 ）

【代码分析】

  • 初始化 SPI 
      spi_bus_config_t bus_cfg = {
         .mosi_io_num = PIN_NUM_MOSI,
         .miso_io_num = PIN_NUM_MISO,
         .sclk_io_num = PIN_NUM_CLK,
         .quadwp_io_num = -1,
         .quadhd_io_num = -1,
         .max_transfer_sz = 4000,
     };
     ret = spi_bus_initialize(host.slot, &bus_cfg, SDSPI_DEFAULT_DMA);
     if (ret != ESP_OK) {
         ESP_LOGE(TAG, "Failed to initialize bus.");
         return;
     }
  • 挂载 SD 卡 
     sdspi_device_config_t slot_config = SDSPI_DEVICE_CONFIG_DEFAULT();
     slot_config.gpio_cs = PIN_NUM_CS;
     slot_config.host_id = host.slot;
     ESP_LOGI(TAG, "Mounting filesystem");
     ret = esp_vfs_fat_sdspi_mount(mount_point, &host, &slot_config, &mount_config, &card);

【运行效果】

  • 将 SD 卡插入电脑，可以发现多了三个文件 test.txt FOO.TXT NIHAO.TXT。其中 FOO.TXT 的内容为 Hello SD!，NIHAO.TXT 的内容为 Hello SD!，test.txt 的内容为空

03_lvgl_example​

【程序说明】

  • 本示例演示了 ESP32-C6-Touch-LCD-1.47 运行 lvgl 示例程序

【硬件连接】

  • 将板子接入电脑

【代码分析】

  • 选择要运行的 lvgl 示例 
    // lv_demo_benchmark();
    // lv_demo_music();
    lv_demo_widgets();

【运行效果】

  • 可以进行触摸进行操作

04_lvgl_image​

【程序说明】

  • 本示例演示了 ESP32-C6-Touch-LCD-1.47 运行 lvgl 显示图片。

【硬件连接】

  • 将板子接入电脑

【准备工作】

  • 将 image_1.c 拷贝到 main 文件夹内
  • main文件夹的 CMakeLists.txt 添加 "image_1.c"
  idf_component_register(SRCS "main.c" "image_1.c"
                    INCLUDE_DIRS ".")

【代码分析】

  • 在 main.c 加入以下代码，声明图片

    LV_IMG_DECLARE(image_1);

  • 设置要显示的图片

    lv_img_set_src(img, &image_1);

【运行效果】

最后由 javen 于 更新