跳到主要内容

Arduino 开发

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

Arduino 入门教程​

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

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

配置开发环境​

1. 安装和配置 Arduino IDE​

请参考 安装和配置 Arduino IDE 教程 下载安装 Arduino IDE 并添加 ESP32 支持。

2. 安装库​

要运行示例，需要安装对应的库。

可从 该处 下载 ESP32-C3-LCD-0.71 开发板的示例程序包。包内的 Arduino\libraries 目录已包含本教程所需的全部库文件。

库或文件名称说明版本安装方式
TFT_eSPILCD 驱动库-手动安装
LVGLLVGL 库-手动安装
lv_conf.hLVGL 配置文件-手动安装

安装步骤：

  1. 进入已下载的 示例程序包。

  2. 将其 Arduino\libraries 目录下的所有文件夹复制到 Arduino 的库文件夹中。

    信息

    Arduino 库文件夹的路径通常是：c:\Users\<用户名>\Documents\Arduino\libraries。

    也可以在 Arduino IDE 中通过 文件 > 首选项，查看“项目文件夹位置”来定位。库文件夹就是此路径下的 libraries 文件夹。

  3. 其他安装方式请参考：Arduino 库管理教程。

Arduino 工程参数设置​

Arduino 工程参数设置

示例程序​

Arduino 示例程序位于 示例程序包 的 Arduino/examples 目录中。

示例程序基础例程说明
01_Text_and_Number_Display测试文本与数字显示
02_Shapes_on_Circular_Display绘制图形
03_Animated_Eye1仿真眼睛样式 1
04_Animated_Eye2仿真眼睛样式 2
05_Animated_Eye12仿真眼睛样式 1 和仿真眼睛样式 2 交替显示
06_Image_Display显示图片
07_Clock时钟

01_Text_and_Number_Display​

程序说明​

  • 本示例演示了在 LCD 双显示屏的文本与数字显示程序，核心实现“双屏同步显示固定文本+动态数字”的功能，循环显示从 00 到 99 的两位数数字，测试 LCD 屏文本以及数字显示。

硬件连接​

  • 将开发板接入电脑

代码解释

  • setup：setup 函数在程序启动时执行一次，主要负责初始化 TFT 显示屏并进行一些初始设置
    • tft.init()：初始化 TFT 显示屏，为后续的显示操作做好准备
    • 通过一系列的 tft.fillScreen() 和 delay() 实现颜色过渡效果，展示了 TFT 显示屏的颜色填充功能，增加程序启动的视觉吸引力
    • tft.fillScreen(0x04FF)：设置特定的背景颜色，tft.setTextColor(TFT_WHITE, 0x04FF)：设置文本颜色，确保文本在背景下清晰可见
    • tft.drawString("Hello, Waveshare!", 30, 40, 2)：显示欢迎消息，增强用户体验
  • loop：loop 函数在程序运行过程中不断循环，实现核心的数字显示功能
    • 数字格式化：将整数 number 转换为字符串 displayNumber，并在数字为一位时添加前导零，确保两位数显示
    • tft.drawString(displayNumber, 55, 80, 6)：在显示屏特定位置以特定字体大小显示格式化后的数字
    • number++ 实现数字自增，当 number 超过 99 时重置为 0，保证数字在 00 到 99 之间循环
    • delay(1000)：控制数字更新速度，让用户能够清晰地看到数字变化

运行效果​

LCD 屏幕显示

02_Shapes_on_Circular_Display​

程序说明​

  • 本示例实现了在 LCD 显示屏上依次显示随机颜色的正方形、三角形和圆形的效果，适用于学习 ESP32 与 LCD 显示屏交互，依次绘制随机颜色的正方形、三角形和圆形位于屏幕中心，每隔 3 秒切换，测试图形绘制稳定性。

硬件连接​

  • 将开发板接入电脑

代码解释

  • drawSquare(): 绘制一个以随机颜色填充的正方形

  • drawTriangle(): 绘制一个以随机颜色填充的等边三角形

  • drawCircleInCenter(): 绘制一个以随机颜色填充的圆形，圆心位于屏幕中心

    • 生成随机颜色
    • tft.fillCircle(centerX, centerY, 30, circleColor): 以屏幕中心坐标和固定半径绘制圆形并使用随机颜色填充

运行效果​

LCD 屏幕显示

03_Animated_Eye1​

程序说明​

  • 此示例利用 TFT_eSPI 库在不同处理器上驱动 TFT 显示屏展示动画眼睛效果，可配置参数且支持 DMA 提高性能，在主循环中持续更新眼睛状态。适用于学习 TFT_eSPI 库显示眼睛动画，可配置参数，利用状态机控制眨眼，测试性能

硬件连接​

  • 将开发板接入电脑

代码解释

  • initEyes(): 初始化眼睛参数
  • tft.init(): 初始化显示屏
  • updateEye(): 计算眼球转动角度，控制眨眼的动画以及把眼睛画到屏幕上

运行效果​

LCD 屏幕显示

04_Animated_Eye2​

程序说明​

  • 此示例使用 LVGL 和 TFT_eSPI 库创建一个图形用户界面，显示一个 GIF 图像。适用于学习 ESP32 与 LVGL 和 TFT 屏交互，可显示 LVGL 图像，测试稳定性与可靠性

硬件连接​

  • 将开发板接入电脑

代码解释

  • my_disp_flush(): LVGL 的显示刷新回调函数，负责将 LVGL 中的图形数据刷新到 TFT 显示屏上

  • setup(): 依次初始化 LVGL、TFT 屏，初始化显示缓冲区，配置并注册显示驱动，创建并设置 GIF 对象位置与源图像

    • lv_init() 和 tft.begin(): 初始化 LVGL 库，初始化 TFT 显示屏
    • lv_disp_draw_buf_init(&draw_buf, buf, NULL, screenHeight _ screenWidth / 15): 初始化 LVGL 的显示缓冲区。
    • lv_disp_drv_init(&disp_drv): 初始化 LVGL 的显示驱动结构体
    • disp_drv.flush_cb = my_disp_flush: 将前面定义的 my_disp_flush 函数设置为显示驱动的刷新回调函数，使得 LVGL 在需要刷新显示时能够调用该函数来更新屏幕内容
    • disp_drv.draw_buf = &draw_buf: 将之前初始化的显示缓冲区 draw_buf 与显示驱动关联起来，确保图形数据能够正确地存储和传输到显示屏
    • lv_disp_drv_register(&disp_drv): 注册显示驱动，使 LVGL 能够使用配置好的显示驱动来进行图形显示操作，至此 LVGL 与 TFT 显示屏的连接和配置完成

运行效果​

LCD 屏幕显示

05_Animated_Eye12​

程序说明​

  • 仿真眼睛样式 1 和样式 2，交替显示

硬件连接​

  • 将开发板接入电脑

代码解释

  • loop(): 不断地执行动画和更新显示内容
    • 如果 a == 1，则先将屏幕填充为黑色，然后调用 Demo_1 函数，最后延迟 2 秒钟。
    • 如果 a == 2，则使用一个内层循环执行 Demo_2 函数多次，这里的循环次数由变量 i 控制，循环次数为 7。Demo_2 函数会依次显示一系列图像，实现动画效果。

运行效果​

03_Animated_Eye104_Animated_Eye2

06_Image_Display​

程序说明​

  • 此示例初始化 TFT 显示屏和 LVGL 库，创建图像对象，主循环处理定时器任务。适用于学习 ESP32 与 LVGL 和 TFT 屏交互，初始化后可显示 LVGL 图像，测试稳定性与可靠性

硬件连接​

  • 将开发板接入电脑

代码解释

  • setup()：硬件初始化显示驱动以及创建并设置图形对象
    • tft.begin(): 初始化 TFT 硬件
    • tft.setRotation(0): 设置显示屏不旋转 -lv_disp_draw_buf_init(&draw_buf, buf, NULL, screenWidth * screenHeight / 10): 为存储图形数据做准备。-显示驱动初始化和注册：
    • lv_disp_drv_init(&disp_drv): 初始化显示驱动结构体 -设置驱动参数，如分辨率、刷新回调函数和显示缓冲区等，并注册显示驱动
    • 通过 LV_IMG_DECLARE(A3) 声明图像资源，然后创建图像对象 logo_img 并设置其源为声明的图像，最后通过 lv_obj_center 和 lv_obj_align 设置图像对象在屏幕上的位置

运行效果​

LCD 屏幕显示

07_Clock​

程序说明​

  • 此示例利用 TFT_eSPI 库和 LVGL 图形库对 TFT 显示屏进行初始化设置，搭建图形界面框架以实现显示和交互功能。适用于学习 ESP32 与 LVGL 和 TFT 屏交互，初始化后可显示图形界面，测试稳定性与可靠性

硬件连接​

  • 将开发板接入电脑

代码解释

  • setup(): 开机初始化

    • lv_init(): 初始化 LVGL 图形引擎
    • tft.begin(): 初始化屏幕硬件
    • tft.setRotation(0): 设置屏幕旋转角度，0 表示不旋转
    • lv_disp_draw_buf_init( &draw_buf, buf, NULL, screenWidth * screenHeight / 10 ): 初始化显示缓冲区并配置显示驱动，确保 LVGL 能正确与显示屏交互
    • ui_init(): 初始化设计好的 UI 界面
    • 最后，输出调试信息表示初始化完成

  • loop(): 主循环函数

    • lv_timer_handler(): LVGL 核心处理函数：处理动画、按键、刷新界面

运行效果​

LCD 屏幕显示