ESP32-S3-Touch-LCD-3.5

来自Waveshare Wiki
跳转至: 导航搜索
{{{name2}}}
{{{name3}}}
功能简介
特性 无特性,不解释
显示尺寸 3.5英寸
分辨率 320 × 480
' 无特性,不解释
' 无特性,不解释
接口 USB UART GPIO

产品介绍

产品简介

本产品是一款微雪 (Waveshare) 设计的高性能、高集成的微控制器开发板。板载了 3.5 英寸电容高清 IPS 屏、高度集成的电源管理芯片、六轴传感器 (三轴加速度计与三轴陀螺仪)、RTC、低功耗音频编解码芯片等外设,方便开发并嵌入应用到产品中。无需组装接线,轻松畅玩小智 AI。

产品特性

  • 搭载 ESP32-S3R8 高性能 Xtensa 32 位 LX7 双核处理器,主频高达 240MHz
  • 支持 2.4 GHz Wi-Fi (802.11 b/g/n) 和 Bluetooth 5 (LE),板载天线
  • 内置 512 KB 的 SRAM 和 384 KB ROM,叠封 8 MB PSRAM 和外接 16 MB Flash
  • 采用 Type-C 接口,提高了用户的使用便捷性和设备的兼容性
  • 板载 3.5 英寸电容触摸高清 IPS 屏,320 × 480 分辨率,262K 彩色,能清晰地显示彩色图片
  • 内置 ST7796 驱动芯片和 FT6336 电容触控芯片,分别使用 SPI 和 I2C 接口通信,不占用过多接口引脚资源
  • 板载 QMI8658 六轴惯性测量单元 (3 轴加速度、3 轴陀螺仪),可检测运动姿态、计步等功能
  • 板载 PCF85063 RTC 芯片,通过 AXP2101 接入电池,实现不间断供电,并预留备用电池焊盘,确保更换主电池时 RTC 功能持续工作
  • 板载 PWR、BOOT 两个可自定义功能的侧边按钮,方便使用按钮进行自定义功能开发
  • 板载 3.7V MX1.25 锂电池充放电接口
  • 引出 I2C、UART、USB 和多个 GPIO,可供外接设备和调试使用,灵活配置外设功能
  • 板载 Micro SD 卡槽,提供扩展存储、快速数据传输和灵活性,适用于数据记录和媒体播放,简化了电路设计
  • 板载摄像头接口,支持 OV5640、OV2640 等主流摄像头
  • 使用 AXP2101 的优势在于高效的电源管理、支持多种输出电压、充电管理和电池管理功能以及对电池寿命的优化


硬件说明

ESP32-S3-Touch-LCD-3.5-details-inter.jpg

1、ESP32-S3R8
   WiFi 和蓝牙 SoC,240MHz 运行频率,叠封 8MB PSRAM

2、板载贴片天线

3、W25Q128JVSIQ
   16MB NOR-Flash

4、摄像头接口
   支持 OV5640 / OV2640 等主流摄像头

5、Micro SD 卡槽

6、IPEX 1 代座子
   可通过拆焊电阻切换为使用外部天线

7、MX1.25 喇叭接口

8、BOOT 按键

9、RESET 按键

10、PWR 按键
   采集音频

11、AXP2101
   高集成度的电源管理芯片

12、充电指示灯

13、Type-C 接口

14、ES8311
   低功耗音频编解码芯片

15、电源指示灯

16、麦克风

17、SH1.0 RTC 电池接口
   接入可充电的 RTC 电池

18、MX1.25 锂电池接口
   MX1.25 2PIN 连接器,可用于接入 3.7V 锂电池,支持充放电

19、2.54mm 排座接口
   引出可用 IO 功能引脚,方便扩展使用

20、PCF85063
   RTC 时钟芯片

21、QMI8658
   六轴惯性测量单元 (IMU),包含一个 3 轴陀螺仪和一个 3 轴加速度计

引脚定义

ESP32-S3-Touch-LCD-3.5-details-intro.jpg

产品尺寸

ESP32-S3-Touch-LCD-3.5-details-size-1.jpg ESP32-S3-Touch-LCD-3.5-details-size.jpg

使用说明

ESP32-S3-Touch-LCD-3.5 目前提供 Arduino IDEESP-IDF 两种开发工具和框架,提供了灵活的开发选择,你可以根据项目需求和个人习惯选择适合的开发工具。

开发工具介绍

Arduino-IDE-logo.jpg

Arduino IDE

Arduino IDE是一款便捷灵活、方便上手的开源电子原型平台。不需要太多基础,简单学习后,你也可以快速地进行开发。同时,Arduino 拥有庞大的全球用户社区,提供了海量的开源代码、项目示例和教程,还有丰富的库资源,封装了复杂功能,让开发者能快速实现各种功能。

ESP-IDF-logo.jpg

ESP-IDF

ESP-IDF,全称Espressif IDE,是乐鑫科技为 ESP系列芯片推出的专业开发框架。它使用C语言开发,包括编译器、调试器、烧录工具等,可在命令行下或使用集成开发环境(如 Visual Studio Code 配合 Espressif IDF 插件)进行开发,插件提供代码导航、项目管理、调试等功能。


这两种开发方式各有其优势,开发者可以根据自身需求和技能水平进行选择。Arduino 适合初学者和非专业人士,因其简单易学、上手快。而对于有专业背景或对性能要求较高的开发者,ESP-IDF 是更好的选择,它提供了更高级的开发工具和更强的控制能力,适用于复杂项目的开发。


器件准备

  • ESP32-S3-Touch-LCD-3.5 x1
  • SD卡 x1
  • OV5460 x1
  • USB线 type A公口 转 Type C公口 x1
在操作前,建议先浏览目录,快速了解文档结构。为顺利操作,请仔细阅读FAQ,提前了解可能的问题。文档中所有资料均提供超链接,方便下载。

Arduino开发

本章介绍 Arduino 环境搭建,包括 Arduino IDE、ESP32板管理、相关库的安装,程序编译下载及示例程序测试,帮助用户掌握开发板,便于二次开发。 Arduino-flow-04.png

环境搭建

下载和安装 Arduino IDE

  • 点击访问Arduino官网,选择对应的系统和系统位数下载。
    ESP32-S3-AMOLED-1.91-Ar-software-01.png
  • 运行安装程序,全部默认安装即可。
环境设置是在 Windows 10 系统下进行,Linux和Mac用户可访问Arduino-esp32环境搭建参考

安装 ESP32 开发板

  • ESP32相关主板在Arduino IDE使用,须先安装“esp32 by Espressif Systems”开发板的软件包
  • 根据板安装要求进行安装,一般推荐“在线安装”, 若在线安装失败,则使用“离线安装
  • 安装教程,详见:Arduino 板管理教程
  • ESP32-S3-Touch-LCD-3.5 所需开发板安装说明
板名称 板安装要求 版本号要求
esp32 by Espressif Systems “离线”安装/“在线”安装 ≥3.0.6

安装库

  • 在安装 Arduino 库时,通常有两种方式可供选择:在线安装离线安装若库安装要求离线安装,则必须使用提供的库文件
    对于大多数库,用户可以通过 Arduino 软件的在线库管理器轻松搜索并安装。然而,一些开源库或自定义库未被同步到 Arduino 库管理器中,因此无法通过在线搜索获取。在这种情况下,用户只能通过离线方式手动安装这些库。
  • ESP32-S3-Touch-LCD-3.5 库文件存放于示例程序中,点击此处跳转:ESP32-S3-Touch-LCD-3.5示例程序
  • 库安装教程,详见:Arduino 库管理教程
ESP32-S3-Touch-LCD-3.5 库文件说明
库名称 说明 版本 库安装要求
lvgl LVGL图形化库 v8.4.0 “在线”安装后需复制demos文件夹至src,建议使用“离线”安装
GFX_Library_for_Arduino GFX图形化库 v1.5.5 “在线”安装
JPEGDEC JPG解码库 v1.7.0 “在线”安装
PNGdec PNG解码库 v1.1.0 “在线”安装
XPowersLib PNG解码库 v0.2.7 “在线”安装
SensorLib PNG解码库 v0.2.6 “在线”安装
ESP32-audioI2S-master 音频处理库 v3.0.13 “在线”安装
ESP32_IO_Expander 扩展IO驱动库 v8.4.0 “在线”安装
esp-lib-utils ESP32_IO_Expander依赖的库 v8.4.0 “在线”安装
esp_lcd_touch_ft6336 触摸驱动 --- “离线”安装
es8311 es8311驱动库 --- “离线”安装

运行第一个 Arduino 程序

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

新建工程

  • 运行Arduino IDE,选择 File -> New Sketch
    ESP32-S3-AMOLED-1.91-Ar-study-01.png
  • 输入代码:
void setup() {
  // put your setup code here, to run once:
  Serial.begin(115200);
}

void loop() {
  // put your main code here, to run repeatedly:
  Serial.println("Hello, World!");
  delay(2000);
}
  • 保存代码工程,选择 File -> Save As...;在弹出的菜单选择保存工程路径,并输入工程名,如 Hello_World,点击保存

ESP32-S3-AMOLED-1.91-Ar-study-02.png

编译和烧录程序

  • 选择对应的开发板,以ESP32S3主板为例:

①. 点击选择下拉框选项“Select Other Board and Port”;
②. 搜索需要的开发板型号“esp32s3 dev module”并选择;
③. 选择COM口
④. 保存选择。
ESP32-S3-AMOLED-1.91-Ar-study-03.png

  • 部分开发板在指定版本号支持直接选择型号,以“waveshare esp32-s3-lcd-1.69”为例

ESP32-S3-AMOLED-1.91-Ar-study-07.png

  • 若ESP32S3主板只有USB口,须打开(Enable)USB CDC,如下图所示:

ESP32-S3-AMOLED-1.91-Ar-study-04.png

  • 编译并上传程序:

①. 编译程序;②. 编译并下载程序;③. 下载成功。
ESP32-S3-AMOLED-1.91-Ar-study-05.png

  • 打开串口监视窗口,程序每隔2秒会打印“Hello World!”,运行情况如下所示:

ESP32-S3-AMOLED-1.91-Ar-study-06.png

示例程序

Demo-flow-01.png

  • ESP32-S3-Touch-LCD-3.5 示例程序
示例程序 基础例程说明 依赖库
01_audio_out 读取SD卡的音频文件,并播放 ESP32-audioI2S-master
02_axp2101_example 打印电源管理芯片的数据 XPowersLib
03_camera_web_server 在网页上显示摄像头图像 XPowersLib
04_es8311_example 录音一段时间,并播放 es8311
05_pcf85063_time 打印RTC获取的数据 SensorLib
06_qmi8658_getdata 打印IMU的数据 SensorLib
07_sd_card_test 测试SD卡的读写 ---
08_gfx_helloworld 屏幕上显示HelloWorld GFX_Library_for_Arduino、ESP32_IO_Expander
09_gfx_jpeg 解码JPG文件并显示在屏幕上 GFX_Library_for_Arduino、ESP32_IO_Expander、JPEGDEC
10_gfx_png 解码PNG文件并显示在屏幕上 GFX_Library_for_Arduino、ESP32_IO_Expander、PNGdec
11_lvgl_example lvgl示例程序 GFX_Library_for_Arduino、ESP32_IO_Expander、lvgl
12_lvgl_pcf85063 lvgl显示时间和日期 GFX_Library_for_Arduino、ESP32_IO_Expander、lvgl、SensorLib
13_lvgl_qmi8658 lvgl显示IMU的数据 GFX_Library_for_Arduino、ESP32_IO_Expander、lvgl、SensorLib
14_lvgl_image lvgl显示图片 GFX_Library_for_Arduino、ESP32_IO_Expander、lvgl
  • ESP32-S3-Touch-LCD-3.5 Arduino 工程参数设置

ESP32-S3-Touch-LCD-3.5-Demo-1.png

01_audio_out

【程序说明】


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

【运行效果】


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



02_axp2101_example

【程序说明】


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

【运行效果】


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

ESP32-S3-Touch-LCD-3.5-Demo-2.png



03_camera_web_server

【程序说明】


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

【准备工作】


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

ESP32-S3-Touch-LCD-3.5-Demo-3.png

【代码分析】


  • 定义摄像头相关的引脚
#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地址

ESP32-S3-Touch-LCD-3.5-Demo-4.png

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

ESP32-S3-Touch-LCD-3.5-Demo-5.png



04_es8311_example

【程序说明】


本示例演示使用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后播放录制的内容。



05_pcf85063_time

【程序说明】


本实例演示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-Demo-6.png



06_qmi8658_getdata

【程序说明】


本实例演示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-Demo-7.png



07_sd_card_test

【程序说明】


本示例演示使用 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-Demo-8.png



08_gfx_helloworld

【程序说明】


本示例演示 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-Demo-9.jpg



09_gfx_jpeg

【程序说明】


本示例演示 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-Demo-10.jpg



10_gfx_png

【程序说明】


本示例演示 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-Demo-11.jpg



11_lvgl_example

【程序说明】


本示例演示了使用 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-Demo-12.jpg



12_lvgl_pcf85063

【程序说明】


本示例演示使用 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-Demo-13.jpg



13_lvgl_qmi8658

【程序说明】


本示例演示使用 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-Demo-14.jpg



14_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

【代码分析】


  • 设置显示的图片
  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");

【运行效果】


ESP32-S3-Touch-LCD-3.5-Demo-15.jpg



ESP-IDF开发

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

环境搭建

下载和安装 Visual Studio

  • 打开VScode官网的下载页面,选择对应系统和系统位数进行下载
    ESP32-S3-AMOLED-1.91-VScode-01.png
  • 运行安装包后,其余均可以默认安装,但这里为了后续的体验建议,建议在此处勾选框中的1、2、3项
    ESP32-S3-AMOLED-1.91-VScode-02.png
    • 第一二项开启后,可以直接通过鼠标右键文件或者目录打开VSCode,可以提高后续的使用体验.
    • 第三项开启后,选择打开方式时,可以直接选择VSCode
环境设置是在 Windows 10 系统下进行,Linux和Mac用户可访问ESP-IDF环境搭建参考

安装Espressif IDF插件

  • 国内部分区域安装,一般推荐“在线安装”, 若因网络因素无法在线安装,则使用“离线安装”。
  • 安装Espressif IDF插件教程,详见:安装Espressif IDF插件教程

运行第一个 ESP-IDF 程序

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

新建项目

ESP32-S3-AMOLED-1.91-study-01.png

ESP32-S3-AMOLED-1.91-study-02.png

创建例程

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

ESP32-S3-AMOLED-1.91-study-03.png

  • 选择你当前的IDF版本

ESP32-S3-AMOLED-1.91-study-04.png

  • 以Hello world例程为例

①选择对应例程
②其readme会说明该例程适用于什么芯片(下文有介绍例程怎么使用与文件结构,这里略)
③点击创建例程
ESP32-S3-AMOLED-1.91-study-05.png

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

ESP32-S3-AMOLED-1.91-study-06.png

修改COM口

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

ESP32-S3-AMOLED-1.91-study-07.png

修改驱动对象

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

ESP32-S3-AMOLED-1.91-study-08.png

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

ESP32-S3-AMOLED-1.91-study-09.png


其余状态栏简介

①.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,常被称作小火苗

ESP32-S3-AMOLED-1.91-study-10.png

编译、烧录、串口监视

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

ESP32-S3-AMOLED-1.91-study-11.png

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

ESP32-S3-AMOLED-1.91-study-12.png

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

ESP32-S3-AMOLED-1.91-study-13.png

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

ESP32-S3-AMOLED-1.91-study-14.png

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

ESP32-S3-AMOLED-1.91-study-15.png


使用IDF 示例程序

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

软件内部打开

  • 打开 VScode 软件,选择文件夹打开示例

ESP32-S3-AMOLED-1.91-study-16.png

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

ESP32-S3-AMOLED-1.91-study-17.png


软件外部打开

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

ESP32-S3-AMOLED-1.91-study-18.png

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

ESP32-S3-AMOLED-1.91-study-19.png

ESP-IDF工程项目详解

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

ESP32-P4 VSCode ESP-IDF GettingStart 240906 02.png

示例程序

Demo-flow-01.png

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

ESP32-S3-Touch-LCD-3.5-Demo-16.jpg

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

ESP32-S3-Touch-LCD-3.5-Demo-17.jpg ESP32-S3-Touch-LCD-3.5-Demo-18.jpg ESP32-S3-Touch-LCD-3.5-Demo-19.jpg ESP32-S3-Touch-LCD-3.5-Demo-20.jpg ESP32-S3-Touch-LCD-3.5-Demo-21.jpg ESP32-S3-Touch-LCD-3.5-Demo-22.jpg



02_lvgl_example

【程序说明】


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

【运行效果】


  • 可以进行触摸操作。

ESP32-S3-Touch-LCD-3.5-Demo-12.jpg




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));

【运行效果】


ESP32-S3-Touch-LCD-3.5-Demo-18.jpg



04_lvgl_qmi8658

【程序说明】


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

【运行效果】


ESP32-S3-Touch-LCD-3.5-Demo-20.jpg




05_lvgl_axp2101

【程序说明】


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

【运行效果】


ESP32-S3-Touch-LCD-3.5-Demo-19.jpg




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));
    }
}

【运行效果】


ESP32-S3-Touch-LCD-3.5-Demo-21.jpg



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();
        }
    }
}

【运行效果】


ESP32-S3-Touch-LCD-3.5-Demo-22.jpg



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-Demo-23.jpg



小智AI应用

为顺利操作,请仔细阅读FAQ,提前了解可能的问题。声音问题,可通过对话将声音设置为最大,如:“将声音调至最大”。

Flash固件的烧录与擦除


  • 当前示例程序有提供测试固件,可通过直接烧录测试固件来测试板载设备功能正常与否
  • bin文件路径:
    ..\ESP32-S3-Touch-LCD-3.5-Demo\Firmware

资料

原理图

工程图纸

示例程序

数据手册

ESP32-S3

其他器件

软件

其他资料链接

FAQ

该产品板载ES8311音频编解码芯片,板载扬声器、贴片麦克风。可实现语音对话功能;
目前接入各类平台都已验证完成,支持豆包、文心一言、ChatGPT等主流平台。示例程序将逐步开放至ESP32-AIChats


当工程编译失败时,应当检查开发环境。

  1. Arduino IDE编译工程时出现下图的情况,应该修改Partition Scheme->16M Flash(3MB APP/9.9MB FATFS)ESP32-S3-Touch-AMOLED-1.8-FAQ 241227 01.png
  2. ESP-IDF工程编译失败时,将build、managed_components、dependencies.lock删除,再进行编译。如果还是报错,请检查ESP-IDF版本以及工程目录下的CMakeList.txt是否能被正确识别


这种情况由于程序崩溃,导致USB无法正常工作,可按住BOOT按键再上电,此时模块可进入下载模式烧录固件(程序)即可解决该情况。


Arduino IDE中,首次编译程序是将所有的依赖包都加载编译,所以首次编译任务多,慢属于正常情况,耐心等待即可



此款产品板载AXP2101,可以测量各类电池数据,如:芯片温度、是否充电、是否接入电源、充电状态、电池电压、充电电压、电池电量等


AXP2101 的电池电量测量基于电池电压,但电池电量并非线性变化,因此测量时可能会出现百分比波动较大的情况。尤其是在插拔充电器、负载变化或者电池老化的情况下,波动会更加明显。测得的百分比只能作为参考,实际需使用电压作为电量衡量。



可以,此款产品两个按钮为BOOT、PWR功能如下:
1.BOOT:按下之后再上电,开发板进入下载模式(在程序死机或USB GPIO占用时常用);在正常工作情况下,可通过GPIO0检测按钮高低电平判断动作,低电平为按下,可识别单击、双击、多击及长按动作。
2.PWR:在通电状态下,长按6s后可关机,在关机状态下(关机可给电池充电),单击开机;在正常工作情况下,可通过拓展IO的EXIO6检测按钮高低电平判断动作,高电平为按下,可识别单击、双击、多击及长按(长按不可超过6s,否则关机)动作。


此款产品核心芯片为ESP32-S3R8,支持2.4GHz WiFi、低功耗蓝牙5等无线通讯功能,板载贴片天线,天线增益已调节至最优,可支持蓝牙和WiFi的使用。详情需查阅ESP32-S3 datasheet


这款产品使用ESP32-S3R8为核心,SPI协议连接屏幕,完全支持中文显示,但需要满足下述条件:
1. 需要字符编码支持,支持UTF-8编码的字符串,可以渲染至屏幕
2. 字库支持
3. 显示库支持,LVGL或Arduino_GFX都支持


屏幕显示芯片:ST7796
屏幕触摸芯片:FT6336


不防水,使用时需保持干燥



Windows系统:
①通过设备管理器查看: 按下Windows + R键打开“运行”对话框; 输入devmgmt.msc并按回车键打开设备管理器; 展开“端口(COM和LPT)”部分,这里会列出所有的COM端口及其当前状态。
②使用命令提示符查看: 打开命令提示符(CMD); 输入mode命令,这将显示所有COM端口的状态信息。
③查看硬件连接: 如果你已经连接了外部设备到COM口,通常设备会占用一个端口号,可以通过查看连接的硬件来确定使用的是哪个端口。
Linux系统:
①使用dmesg命令查看: 打开终端。
②使用ls命令查看: 输入ls /dev/ttyS*或ls /dev/ttyUSB*来列出所有的串口设备。
③使用setserial命令查看: 输入setserial -g /dev/ttyS*来查看所有串口设备的配置信息。


ESP32-S3-Touch-LCD-3.5的Type-C烧录调试口是ESP32-S3 USB直出的,Arduino IDE开发环境中,支持printf函数打印输出,若想支持Serial函数打印输出则需要使能USB CDC On Boot功能或者HWCDC声明,此类可参考示例代码中的演示。ESP-IDF中通常使用ESP_LOGD、ESP_ERROR_CHECK打印输出。


本产品定位于开发板,并不是成品产品。关于产品生态属于是ESP32核心,生态很成熟,开发环境也很友好,我们不协助修改代码,请各位创客、极客自行发挥DIY能力,如有疑问可以询问工程师为您解答。
如您觉得我们的产品不错,希望批量定制硬件、定制外壳、定制软件等,欢迎联系商务销售
ESP32-S3-Touch-LCD-1.69-240708-02.png



技术支持

联系人:谭工
EMAIL:3004149899@qq.com
QQ:3004149899
微信:扫下方二维码添加
谭工企业微信联系二维码.png

说明:进行售后服务前,请准备好客户信息(定货单位、定货人等),以供验证