本示例演示ESP32-S3-Touch-LCD-3.5读取SD卡的音频文件并使用喇叭播放，支持MP3、AAC、WAV等格式。

【准备工作】

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

【代码分析】

• 初始化

  Wire.begin(I2C_SDA, I2C_SCL);
  es8311_codec_init();
  SD_MMC.setPins(SD_MMC_CLK, SD_MMC_CMD, SD_MMC_D0);
  if (!SD_MMC.begin("/sdmmc", true, false, 20000))
  {
    esp_rom_printf("Card Mount Failed\n");
    while (1)
    {
    };
  }
  audio.setPinout(I2S_BCLK, I2S_LRCK, I2S_SDOUT, I2S_MCLK);
  audio.setVolume(21);  // 0...21

• 设置播放的音频文件

  audio.connecttoFS(SD_MMC, "music/1.mp3");

【运行效果】

• 播放音频文件，屏幕无现象

本示例演示使用XPowers驱动AXP2101，并通过串口打印数据

【代码分析】

• 初始化

  bool result = power.begin(Wire, AXP2101_SLAVE_ADDRESS, i2c_sda, i2c_scl);

  if (result == false) {
    Serial.println("power is not online...");
    while (1) delay(50);
  }

【运行效果】

• 屏幕无现象
• 打开串口监视器

本示例演示了如何使用驱动摄像头。在连接 WiFi 后，程序会创建一个网页服务器，用户只需在浏览器中输入设备的 IP 地址即可访问。网页上可以显示摄像头的图像，并支持分辨率、镜像等设置操作

【准备工作】

• 将板子接入电脑
• 将OV5640摄像头插入板子上的24pin座子（带外壳版本不需要这个操作）
• 设置Parttion为Custom

【代码分析】

• 定义摄像头相关的引脚

#define PWDN_GPIO_NUM -1
#define RESET_GPIO_NUM -1
#define XCLK_GPIO_NUM 38
#define SIOD_GPIO_NUM 8
#define SIOC_GPIO_NUM 7

#define Y9_GPIO_NUM 21
#define Y8_GPIO_NUM 39
#define Y7_GPIO_NUM 40
#define Y6_GPIO_NUM 42
#define Y5_GPIO_NUM 46
#define Y4_GPIO_NUM 48
#define Y3_GPIO_NUM 47
#define Y2_GPIO_NUM 45
#define VSYNC_GPIO_NUM 17
#define HREF_GPIO_NUM 18
#define PCLK_GPIO_NUM 41

• 要连接的wifi名称和密码

const char *ssid = "waveshare";
const char *password = "12345678";

• 启动服务器，开始提供 HTTP 视频流服务

startCameraServer();

Serial.print("Camera Ready! Use 'http://");
Serial.print(WiFi.localIP());
Serial.println("' to connect");

【运行效果】

• 打开串口终端连接WiFi后可以看到IP地址

• 使用浏览器（开热点的设备）打开串口打印的IP地址
• 点击Start Stream，可以看到摄像头的图像

本示例演示使用ESP32-S3-Touch-LCD-3.5驱动ES8311音频编解码器，实现音频录制及回放功能。

【代码分析】

• 初始化

  Wire.begin(I2C_SDA, I2C_SCL);
  es8311_codec_init();
  setupI2S();

• 音频录制5s，并播放录制的内容

  wav_buffer = i2s.recordWAV(5, &wav_size);
  delay(1000);
  Serial.println("I2S playWAV");
  i2s.playWAV(wav_buffer, wav_size);

【运行效果】

• 屏幕无现象
• 按下ESP32-S3-Touch-LCD-3.5的RST按键进入音频录制状态，5s后播放录制的内容。

本实例演示ESP32-S3-Touch-LCD-3.5驱动PCF85063，设置时间、日期以及获取时间。

【代码分析】

• 初始化

    if (!rtc.begin(Wire, PCF85063_SLAVE_ADDRESS, SENSOR_SDA, SENSOR_SCL)) {
        Serial.println("Failed to find PCF8563 - check your wiring!");
        while (1) {
            delay(1000);
        }
    }

• 设置时间、日期

    rtc.setDateTime(year, month, day, hour, minute, second);

• 获取时间、日期

    RTC_DateTime datetime = rtc.getDateTime();

【运行效果】

• 屏幕无现象
• 打开串口监视器

本实例演示ESP32-S3-Touch-LCD-3.5驱动QMI8658，获取并打印Accel、Gyro和IMU的温度。

【代码分析】

• 初始化

  if (!qmi.begin(Wire, QMI8658_L_SLAVE_ADDRESS, SENSOR_SDA, SENSOR_SCL)) {
    Serial.println("Failed to find QMI8658 - check your wiring!");
    while (1) {
      delay(1000);
    }
  }

• 获取数据

  if (qmi.getDataReady()) {
    if (qmi.getAccelerometer(acc.x, acc.y, acc.z)) {
    }
    if (qmi.getGyroscope(gyr.x, gyr.y, gyr.z)) {
    }
  }

【运行效果】

• 屏幕无现象
• 打开串口监视器

本示例演示使用 ESP32-S3-Touch-LCD-3.5 测试SD卡的读写功能

【硬件连接】

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

【代码分析】

• 初始化

  if(!SD_MMC.setPins(clk, cmd, d0)){
    Serial.println("Pin change failed!");
    return;
  }

  if (!SD_MMC.begin( "/sdcard", true)) {
    Serial.println("Card Mount Failed");
    return;
  }

【运行效果】

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

本示例演示 ESP32-S3-Touch-LCD-3.5 使用GFX_Library_for_Arduino库驱动屏幕并在屏幕上显示HelloWorld

【代码分析】

• 配置屏幕接口以及屏幕的分辨率等

Arduino_DataBus* bus = new Arduino_ESP32SPI(LCD_DC /* DC */, LCD_CS /* CS */, SPI_SCLK /* SCK */, SPI_MOSI /* MOSI */, SPI_MISO /* MISO */);
Arduino_GFX* gfx = new Arduino_ST7796(
  bus, LCD_RST /* RST */, 0 /* rotation */, true, LCD_HOR_RES, LCD_VER_RES);

【运行效果】

本示例演示 ESP32-S3-Touch-LCD-3.5 使用JPEGDEC库对SD卡的jpg文件进行解码，并通过GFX_Library_for_Arduino驱动屏幕显示jpg的内容。

【准备工作】

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

【代码分析】

• 解码jpg文件并显示

jpegDraw(JPEG_FILENAME, jpegDrawCallback, true /* useBigEndian */,
             0 /* x */, 0 /* y */, gfx->width() /* widthLimit */, gfx->height() /* heightLimit */);

【运行效果】

本示例演示 ESP32-S3-Touch-LCD-3.5 使用PNGdec库对SD卡的png文件进行解码，并通过GFX_Library_for_Arduino驱动屏幕显示png的内容。

【准备工作】

• 将SD卡插入电脑
• 在SD卡根目录新建文件夹 images
• 把本工程下data文件夹里面的 octocat.png、octocat-4bpp.png 拷贝到SD卡的images文件夹里
• 将SD卡插入 ESP32-S3-Touch-LCD-3.5

【代码分析】

• 解码jpg文件并显示

    rc = png.open(PNG_FILENAME, myOpen, myClose, myRead, mySeek, PNGDraw);
    if (rc == PNG_SUCCESS)
    {
      int16_t pw = png.getWidth();
      int16_t ph = png.getHeight();

      xOffset = (w - pw) / 2;
      yOffset = (h - ph) / 2;

      rc = png.decode(NULL, 0);

      Serial.printf("Draw offset: (%d, %d), time used: %lu\n", xOffset, yOffset, millis() - start);
      Serial.printf("image specs: (%d x %d), %d bpp, pixel type: %d\n", png.getWidth(), png.getHeight(), png.getBpp(), png.getPixelType());
      png.close();
    }

【运行效果】

本示例演示了使用 ESP32-S3-Touch-LCD-3.5 运行lvgl示例程序

• 如果lvgl库是在线安装，需要复制demos文件夹至src

【代码分析】

• 选择要运行的lvgl示例

lv_demo_widgets();
// lv_demo_benchmark();
// lv_demo_keypad_encoder();
// lv_demo_music();
// lv_demo_stress();

【运行效果】

• 可以进行触摸进行操作

本示例演示使用 ESP32-S3-Touch-LCD-3.5 获取PCF85063的时间、日期数据，并通过lvgl库显示。

【代码分析】

• ui初始化

void lvgl_pcf85063_ui_init(lv_obj_t *parent) {
  lv_obj_t *list = lv_list_create(parent);
  lv_obj_set_size(list, lv_pct(100), lv_pct(100));

  lv_obj_t *list_item = lv_list_add_btn(list, NULL, "data");
  label_data = lv_label_create(list_item);
  lv_label_set_text(label_data, "2025-01-01");

  list_item = lv_list_add_btn(list, NULL, "time");
  label_time = lv_label_create(list_item);
  lv_label_set_text(label_time, "00:00:00");

  pcf85063_timer = lv_timer_create(pcf85063_callback, 100, NULL);
}

【运行效果】

本示例演示使用 ESP32-S3-Touch-LCD-3.5 获取qmi8658的数据，并通过lvgl库显示。

【代码分析】

• ui的初始化

void lvgl_qmi8658_ui_init(lv_obj_t *parent) {
  lv_obj_t *list = lv_list_create(parent);
  lv_obj_set_size(list, lv_pct(100), lv_pct(100));

  lv_obj_t *list_item = lv_list_add_btn(list, NULL, "accel_x");
  label_accel_x = lv_label_create(list_item);
  lv_label_set_text(label_accel_x, "0.00");

  list_item = lv_list_add_btn(list, NULL, "accel_y");
  label_accel_y = lv_label_create(list_item);
  lv_label_set_text(label_accel_y, "0.00");

  list_item = lv_list_add_btn(list, NULL, "accel_z");
  label_accel_z = lv_label_create(list_item);
  lv_label_set_text(label_accel_z, "0.00");

  list_item = lv_list_add_btn(list, NULL, "gyro_x");
  label_gyro_x = lv_label_create(list_item);
  lv_label_set_text(label_gyro_x, "0.00");

  list_item = lv_list_add_btn(list, NULL, "gyro_y");
  label_gyro_y = lv_label_create(list_item);
  lv_label_set_text(label_gyro_y, "0.00");

  list_item = lv_list_add_btn(list, NULL, "gyro_z");
  label_gyro_z = lv_label_create(list_item);
  lv_label_set_text(label_gyro_z, "0.00");

  list_item = lv_list_add_btn(list, NULL, "temp");
  label_temp = lv_label_create(list_item);
  lv_label_set_text(label_temp, "0.00C");

  qmi8658_timer = lv_timer_create(qmi8658_callback, 100, NULL);
}

【运行效果】

本示例演示 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

【代码分析】

• 设置显示的图片

  lv_obj_t *img = lv_img_create(lv_scr_act());
  lv_obj_align(img, LV_ALIGN_CENTER, 0, 0);
  // lv_img_set_src(img, "S:images/octocat.jpg");
  lv_img_set_src(img, "S:images/octocat.png");

【运行效果】

新建项目

创建例程

• 使用快捷键 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 示例程序

软件内部打开

• 打开 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的综合示例，也是出厂默认烧录的示例。

【代码分析】

• 初始化

    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按键，退出触摸测试。

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

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

【运行效果】

• 可以进行触摸操作。

本示例演示 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));

【运行效果】

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

【运行效果】

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

【运行效果】

本示例演示 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));
    }
}

【运行效果】

本示例演示 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();
        }
    }
}

【运行效果】

本示例演示 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);

【运行效果】