ESP32+LVGL 天气与时间动态显示开发
机器人设计与应用综合实训 ——ESP32+LVGL 天气与时间显示开发
姓名：劳勇豪
学号：1234160122
班级：23 机器人一班
学院：智能工程学院
日期：2026/3/17
本文为机器人设计与应用综合实训中，基于ESP32+LVGL实现南宁实时时间、日期、未来三天天气动态获取与显示的技术分享，记录网络获取、数据解析、LVGL 界面刷新、多任务调度等开发要点、问题排查及实践总结，适配实训报告补充、技术复盘及同学间交流。核心方向：ESP32 网络通信、HTTP 天气接口调用、LVGL 控件动态更新、时间同步与界面可视化，贴合机器人智能交互与信息展示实训需求。
- 实训基础信息
实训项目名称 | 实训时间 | ESP32 开发板型号 | 开发环境 | 实训小组人数 |
ESP32 基于 LVGL 的南宁实时时间与天气动态显示 | 2026.3.17 | ESP32-S3-DevKitC-1（N8R2） | Windows11+Visual Studio Code+ESP-IDF 5.2.1+LVGL | 个人：WiFi 联网配置、HTTP 天气获取、时间同步、LVGL 界面设计、动态数据刷新调试 |
- ESP32+LVGL 开发核心知识点梳理
知识点类别 | 具体知识点 | 核心原理简述 | 实训应用场景（机器人相关） | 备注（易错点 / 重点） |
网络通信 | ESP32 STA 模式 WiFi 连接、HTTP 协议请求、天气 API 接口调用 | ESP32 配置为 WiFi STA 模式接入局域网，通过 HTTP 向天气接口发送请求，获取 JSON 格式的南宁天气、温度、日期数据 | 机器人联网获取环境信息，为智能交互提供天气、时间数据 | WiFi 账号密码需正确配置；HTTP 请求需添加请求头，避免接口访问失败 |
时间处理 | 系统时间获取、localtime 时间转换、时分秒 / 年月日格式化 | 调用 time () 获取系统时间戳，用 localtime () 转换为本地时间，按HH:MM:SS/YYYY-MM-DD格式化字符串 | 机器人界面实时显示当前时间与日期，提升交互完整性 | 需开启 ESP-IDF 时间同步功能，确保时间准确 |
LVGL 控件 | Label 文本显示、Image 图片显示、LVGL 锁机制、定时器刷新 | LVGL 用 Label 展示文字、Image 展示天气图标；通过lvgl_port_lock/unlock保证线程安全；定时器定时触发数据更新 | 在 LCD 上动态刷新时间、日期、天气文字与图标 | 多任务中操作 LVGL 必须加锁，否则会死机 / 花屏 |
数据解析 | 天气 JSON 数据解析、图标索引映射、字符串拼接 | 解析 HTTP 返回的天气 JSON，提取温度、天气代码、日期，映射到预定义图片数组 | 将接口数据转为 LVGL 可显示的文字与图标 | 数组索引需与天气代码严格对应，避免图标显示错误 |
任务调度 | FreeRTOS 任务延时、lv_timer_handler 处理、看门狗喂狗 | 主循环中调用 LVGL 定时器处理，添加短延时让出 CPU，防止看门狗复位 | 保证界面流畅刷新，系统稳定运行 | 必须添加vTaskDelay，否则系统异常重启 |
- ESP32+LVGL 开发实操步骤
步骤序号 | 实操内容 | 操作步骤细节 | 使用工具 / 代码片段 | 操作结果（成功 / 失败及原因） |
1 | ESP32 WiFi 联网配置 | 1. 在wifi.c中配置 WiFi SSID 与密码；2. 初始化 STA 模式并启动连接；3. 串口查看连接状态 | VS Code、ESP-IDF、串口监视器 | 成功，WiFi 快速连接，获取 IP 地址，网络通信正常 |
2 | HTTP 天气接口获取南宁数据 | 1. 配置 HTTP 请求地址与请求头；2. 发送 GET 请求获取天气 JSON；3. 解析温度、天气代码、未来三天数据 | 天气 API、串口监视器 | 成功，成功获取南宁当前温度、天气状况、未来三天预报 |
3 | 系统时间同步与格式化 | 1. 开启系统时间同步；2. 用time()获取时间戳；3. 格式化为时间字符串与日期字符串 | time.h、localtime() | 成功，时间与日期准确，格式符合显示要求 |
4 | LVGL 界面搭建与控件绑定 | 1. 用 GUI Guider 创建界面，添加时间 / 日期 Label、天气图标 Image；2. 生成 UI 代码并集成到工程；3. 关联控件变量 | GUI Guider、LVGL 库 | 成功，界面布局完成，控件可正常访问 |
5 | LVGL 动态数据刷新 | 1. 每秒判断时间变化；2. 加锁更新时间 / 日期 Label；3. 根据天气代码设置图标、显示温度 | lv_label_set_text、lv_image_set_src | 成功，时间每秒刷新，天气图标与温度正确显示 |
6 | 多任务与稳定性优化 | 1. 主循环添加lv_timer_handler；2. 加入 10ms 延时；3. 检查 LVGL 锁机制 | FreeRTOS、vTaskDelay | 成功，界面流畅无卡顿，系统长期运行不重启 |
- ESP32+LVGL 开发常见问题及解决方案
问题序号 | 问题描述 | 排查过程 | 解决方案 | 问题总结（避免方法） |
1 | ESP32 无法连接 WiFi | 1. 检查 WiFi 名称密码；2. 查看串口报错；3. 确认路由器正常 | 1. 修正 WiFi 账号密码；2. 增加重连机制；3. 检查 ESP32 天线 | 联网前先验证 WiFi 信息，添加重连逻辑提升稳定性 |
2 | 获取不到天气数据 | 1. 检查网络是否连通；2. 核对 API 接口地址；3. 查看请求头是否正确 | 1. 确认联网成功再请求；2. 使用可用天气接口；3. 补全请求头参数 | HTTP 请求前先判断网络状态，接口地址需实时有效 |
3 | LVGL 界面死机 / 花屏 | 1. 检查是否多任务操作 LVGL 未加锁；2. 查看是否无延时卡死 | 1. 所有 LVGL 操作加lock/unlock；2. 主循环加vTaskDelay | LVGL 非线程安全，多任务必须加锁，必须喂狗 |
4 | 天气图标显示错误 / 不显示 | 1. 检查图片声明与数组索引；2. 核对天气代码映射 | 1. 正确LV_IMAGE_DECLARE；2. 修正索引对应关系 | 图片声明与映射表必须一致，避免索引越界 |
5 | 时间不更新 / 刷新异常 | 1. 检查时间戳获取；2. 查看秒级判断逻辑 | 1. 正确使用time(NULL)；2. 每秒进入一次更新逻辑 | 时间判断用秒级触发，避免频繁无意义刷新 |
- 实训总结与 ESP32 开发心得
项目完成情况 | ESP32 开发重点收获 | 存在的不足 | 后续改进计划 |
顺利完成 ESP32 WiFi 联网、南宁天气 HTTP 获取、系统时间同步、LVGL 时间 / 日期 / 未来三天天气动态显示，界面流畅、数据准确、系统稳定，达成今日实训目标 | 掌握 ESP32 STA 模式 WiFi 联网与 HTTP 数据获取方法，能调用网络接口获取天气信息； 学会系统时间获取与格式化，实现精准时间日期显示； 掌握 LVGL Label/Image 控件动态刷新，理解多线程下 LVGL 锁机制； 能完成天气 JSON 数据解析与图标映射，实现界面可视化展示； 掌握 FreeRTOS 任务调度与看门狗喂狗，提升系统稳定性 | 仅支持固定城市南宁，未实现城市切换功能； 天气数据仅做简单展示，未添加异常处理与离线缓存； 界面样式单一，未优化动画与排版效果； 未实现网络断开后的自动重连与数据重试获取 | 添加城市选择功能，支持手动切换查询不同地区天气； 增加网络异常判断、重连机制与离线数据缓存； 优化 LVGL 界面，添加动画、字体、配色提升视觉效果； 将天气 / 时间显示与机器人状态结合，做一体化智能交互界面； 封装联网、HTTP、解析通用库，方便后续快速复用 |
Main.C：
#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"
#include"demos/lv_demos.h"
#include"gui_guider.h"
#include"custom.h"
#include"wifi.h"
LV_IMAGE_DECLARE(_1);
LV_IMAGE_DECLARE(_2);
LV_IMAGE_DECLARE(_33);
LV_IMAGE_DECLARE(_001);
const lv_image_dsc_t*images[]={
&_001,
NULL,
NULL,
NULL,
&_33,
NULL,
NULL,
&_001,
NULL,
&_1,
};
lv_ui guider_ui;
void app_main(void)
{
bsp_i2c_init(); // IIC接口初始化
pca9557_init(); // 扩展口初始化
ESP_Timer_Init();
Wifi_STA_Init();
ESP_Network_Init();
bsp_lvgl_start();
setup_ui(&guider_ui);
custom_init(&guider_ui);
uint32_t sec=timer_sec;
while(1){
timer_sec = time(NULL);
if(sec != timer_sec)//每秒进入一次
{
sec = timer_sec;
timeinfo = *localtime(&timer_sec);
char time_str[50]={0};
char date_str[64]={0};
sprintf(time_str, "%02d:%02d:%02d",timeinfo.tm_hour, timeinfo.tm_min, timeinfo.tm_sec);
sprintf(date_str, "%04d-%02d-%02d",
timeinfo.tm_year + 1900,
timeinfo.tm_mon + 1,
timeinfo.tm_mday);
lvgl_port_lock(-1);
lv_label_set_text(guider_ui.screen_label_1, time_str);
lv_label_set_text(guider_ui.screen_label_6, date_str);
lvgl_port_unlock();
char weather_day1[64] = {0};
char weather_day2[64] = {0};
char weather_day3[64] = {0};
sprintf(weather_day1, "%sC", weather[0].temp);
sprintf(weather_day2, "%sC", weather[1].temp);
sprintf(weather_day3, "%sC", weather[2].temp);
printf("天气:%s\n",weather[0].rain);
printf("温度:%s\n",weather[0].temp);
lv_image_set_src(guider_ui.screen_img_3,images[weather[0].code]);
lv_image_set_src(guider_ui.screen_img_14,images[weather[1].code]);
lv_image_set_src(guider_ui.screen_img_6,images[weather[2].code]);
lv_label_set_text(guider_ui.screen_label_8, weather_day1); // 今天天气
lv_label_set_text(guider_ui.screen_label_9, weather_day2); // 明天天气
lv_label_set_text(guider_ui.screen_label_10, weather_day3); // 后天天气
lvgl_port_unlock();
printf("时间：%s | 日期：%s\n", time_str, date_str);
}
lv_timer_handler(); // LVGL事件处理
// 关键：让出CPU给IDLE任务，喂看门狗
vTaskDelay(pdMS_TO_TICKS(10)); // 延时10ms，必加！
// 或使用 taskYIELD(); // 立即让出CPU（无延时）
}
}