ESP-IDF

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

ESP-IDF 入门教程
配置 ESP-IDF 开发环境
示例程序

ESP-IDF 入门教程

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

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

配置 ESP-IDF 开发环境

信息

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

备注

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

安装 ESP-IDF 开发环境

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

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

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

请耐心等待两个文件下载完成。
下载完成后，双击运行 ESP-IDF 安装器(eim-gui-windows-x64.exe)。

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

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

接下来，选择安装路径。建议使用默认路径；若需自定义，请确保路径中不包含中文或空格。确认无误后，点击 开始安装。
当看到如下界面时，表示 ESP-IDF 已安装成功。
建议同时安装驱动程序。点击 完成安装，然后点击 安装驱动程序。

安装 Visual Studio Code 与 ESP-IDF 扩展

下载并安装 Visual Studio Code。
安装时建议勾选 通过 Code 打开操作添加到 Windows 资源管理器文件上下文菜单,以便快速打开项目文件夹。
在 VS Code 中,点击侧边活动栏中的扩展图标(或使用快捷键 Ctrl + Shift + X)打开扩展视图。
在搜索框中输入 ESP-IDF,找到 ESP-IDF 扩展并点击安装。
当 ESP-IDF 扩展版本 ≥ 2.0 时,扩展会自动检测并识别上述步骤中安装的 ESP-IDF 环境,无需手动配置。

示例程序

ESP-IDF 示例程序位于示例程序包的 ESP-IDF 目录中。

示例程序	基础例程说明	依赖库
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);

【运行效果】

可以进行触摸操作。

ESP-IDF 入门教程​

配置 ESP-IDF 开发环境​

安装 ESP-IDF 开发环境​

安装 Visual Studio Code 与 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​

ESP-IDF 入门教程

配置 ESP-IDF 开发环境

安装 ESP-IDF 开发环境

安装 Visual Studio Code 与 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