跳到主要内容

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/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时钟

Arduino 工程参数设置​

Arduino 工程参数设置

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 库显示眼睛动画，可配置参数，利用状态机控制眨眼，测试性能

硬件连接​

  • 将开发板接入电脑

代码解释

  • updateEye() 根据不同的条件（是否有光感引脚）更新眼睛的虹膜大小，以实现眼睛对光线或自动变化的响应

  • Demo_2() 通过循环展示一系列预先定义的图像，为用户呈现一个简单的动画序列

    • 首先，使用 digitalWrite(device_A_CS, LOW) 将设备 A 的片选引脚置低，选择对应的设备或显示屏
    • 调用 tft.pushImage(0, 0, 160, 160, gImage_Ax) 来将特定的图像（如 gImage_A1 到 gImage_A12）推送到显示区域。这里的参数 (0, 0, 160, 160) 可能指定了图像在显示屏上的起始坐标和大小。
    • 然后，使用 digitalWrite(device_A_CS, HIGH) 将片选引脚置高，取消对当前设备或显示屏的选择。
    • 最后，通过 delay(frameTime); 引入一定的延迟，控制每幅图像的显示时间，从而实现动画的连贯效果

运行效果​

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 的显示缓冲区，其中 buf 是用于存储显示数据的缓冲区数组，NULL 表示不使用双缓冲（这里可以根据需要进行调整），screenHeight _ screenWidth / 15 计算了缓冲区的大小，合理的缓冲区设置有助于提高显示性能
      • lv_disp_drv_init(&disp_drv); 初始化 LVGL 的显示驱动结构体 disp_drv
      • 配置显示驱动参数
      • 设置显示屏的水平和垂直分辨率
      • 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，则先将屏幕填充为黑色（tft.fillScreen(BLACK);），然后调用 Demo_1 函数，最后通过 delay(2000); 延迟 2 秒钟。
  • 如果 a == 2，则使用一个内层循环执行 Demo_2 函数多次，这里的循环次数由变量 i 控制，循环次数为 7。Demo_2 函数会依次显示一系列图像，实现动画效果。通过这种方式，可以在程序运行过程中不断地循环执行这两个不同的动画序列

运行效果​

03_Animated_Eye104_Animated_Eye2

06_Image_Display​

程序说明​

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

硬件连接​

  • 将开发板接入电脑

代码解释

  • setup()串口、LVGL、TFT 显示屏、显示驱动以及创建并设置图形对象
    • LVGL 初始化：lv_init() 启动 LVGL 库的核心组件 -若 LV_USE_LOG 不为 0，注册串口打印函数用于调试：lv_log_register_print_cb(my_print)。
    • TFT 显示屏初始化：
    • 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()串口、LVGL、TFT 显示屏、显示驱动和用户界面的初始化 -串口初始化用于可能的调试输出
    • LVGL 初始化启动库的核心组件
    • 若 LV_USE_LOG 不为 0，注册串口打印函数以便查看 LVGL 日志信息
    • TFT 显示屏初始化包括硬件连接和参数设置，如设置旋转方向
    • 初始化显示缓冲区并配置显示驱动，确保 LVGL 能正确与显示屏交互
    • 调用 ui_init 初始化用户界面元素
    • 输出调试信息表示初始化完成

运行效果​

LCD 屏幕显示

最后由 Wulu 于 更新