机器人设计与应用综合实训——ESP32开发技术分享（day3）

ESP32 开发技术分享（day2）：LCD 计时器 + 动图显示

一、核心功能

1. 计时器：在 LCD 屏上实时显示 "时：分: 秒" 格式的系统时间
2. 动图轮播：将多张图片按顺序循环显示，实现简单动图效果

二、实操步骤（通俗版）

第一步：准备文件

1. 把需要的文件放进工程文件夹：

   • 计时器相关：timer.h（控制时间的配置文件）
   • 动图相关：拆分好的图片头文件（如 IMG00004.h、IMG00012.h、IMG00020.h），这些文件里是转好码的图片数据
   • 基础文件：lcd.c、lcd.h、LCDFont.h（控制 LCD 屏显示的核心文件）

2. 配置工程：在CMakeLists.txt里添加lcd.c文件路径，确保编译器能找到所有文件

第二步：实现计时器功能

1. 初始化硬件：先让 ESP32 识别 LCD 屏

   • 调用bsp_i2c_init()：启动 I2C 通信（连接硬件的 "数据线"）
   • 调用pca9557_init()：配置 IO 扩展芯片（控制 LCD 屏的开关）
   • 调用bsp_lcd_init()：初始化 LCD 屏

2. 启动定时器：调用ESP_Timer_Init()，让 ESP32 能获取实时系统时间

3. 格式化并显示时间：

   • 用sprintf把时间转成 "00:00:00" 的样子，存在time_buf里
   • 调用LCD_ShowString，指定显示位置（128,186）、文字颜色（白）和背景色（黑），把时间显示在屏上
   • 加 100ms 延时，让时间每秒更新一次

第三步：实现动图轮播功能

1. 导入图片数据：在代码里包含所有图片头文件，定义数组images，把每张图片的指针存进去

2. 循环显示图片：

   • 写for循环，从第 0 张到第 2 张图片依次遍历
   • 调用lcd_draw_pictrue，指定显示位置（0,0，即屏幕左上角），显示当前图片
   • 每张图片显示 100ms 后切换下一张，循环往复

第四步：整合功能并测试

1. 把计时器和动图代码整合到同一个app_main函数里，先初始化硬件，再同时运行轮播和时间显示逻辑
2. 编译代码：用 VS Code 的 ESP32 插件点击 "编译"，检查有没有报错（比如文件没找到、数组越界）
3. 烧录到开发板：用数据线连接电脑和 ESP32，点击 "烧录"，等待完成
4. 验证效果：看 LCD 屏是否正常显示循环动图，同时时间能实时更新；若显示异常，检查图片编码、循环范围是否正确

三、关键代码（整合版）

#include "timer.h" #include "IMG00004.h" #include "IMG00012.h" #include "IMG00020.h" #include "LCD/lcd.h" // 图片数组（存3张动图帧的指针） const unsigned char *images[]={ gImage_IMG00004, gImage_IMG00012, gImage_IMG00020, }; void app_main(void) { // 1. 初始化硬件（按顺序来，不能乱） bsp_i2c_init(); // 启动I2C通信 pca9557_init(); // 配置IO扩展 bsp_lcd_init(); // 初始化LCD屏 ESP_Timer_Init(); // 启动定时器 char time_buf[32]; // 存时间的字符串 // 2. 循环运行功能 while (1) { // 动图轮播：依次显示3张图片 for (uint8_t i=0; i<3; i++) { lcd_draw_pictrue(0,0, images[i]); // 左上角显示图片 vTaskDelay(pdMS_TO_TICKS(100)); // 每张显示100ms } // 显示计时器：格式化并显示时间 sprintf(time_buf, "%02d:%02d:%02d", timeinfo.tm_hour, timeinfo.tm_min, timeinfo.tm_sec); LCD_ShowString(128,186,time_buf,WHITE,BLACK); vTaskDelay(pdMS_TO_TICKS(100)); // 整体延时，避免卡顿 } }

四、常见问题解决

1. 图片不显示：检查图片是否转成 16 进制编码，代码里有没有跳过图片前 8 字节头数据
2. 时间不更新：确认ESP_Timer_Init()被调用，timeinfo结构体能正常获取系统时间
3. 循环报错：图片数组有 3 张图，循环范围要写i<3，不能多也不能少四、常见问题解决

五、项目实现的一些过程

Esp-dif lcd显示：

C51格式，把用到的数字与符号转码

编写计时器部分的代码

#include <stdio.h> #include <inttypes.h> #include "sdkconfig.h" #include "freertos/FreeRTOS.h" #include "freertos/task.h" #include "esp_chip_info.h" #include "esp_flash.h" #include "esp_system.h" #include "LCD/lcd.h" #include "timer.h" while (1){ 修正循环范围：数组有10个元素（0-9） for (uint8_t i=0; i<10; i++) { lcd_draw_pictrue(0,0, images[i]); // 用pdMS_TO_TICKS转换毫秒（ESP-IDF标准写法） vTaskDelay(pdMS_TO_TICKS(100)); } } }

动图：

先把动图压成自己想要的大小

再用动图分离，把动图拆成图片

把图片转换成16进制编码

最后效果:

总结

1. 核心流程：先初始化硬件（I2C→IO 扩展→LCD→定时器），再分别实现计时器（格式化时间 + 显示）和动图（循环遍历图片 + 延时切换）功能，最后整合测试。
2. 关键注意点：图片数组长度要和循环范围匹配，硬件初始化必须按固定顺序，时间格式化要使用%02d保证两位显示。
3. 实操重点：编译前检查文件路径配置，烧录后验证显示效果，异常时优先排查图片编码和循环逻辑。