机器人设计与应用综合实训 ——ESP32LVGL 天气与时间显示开发姓名劳勇豪学号1234160122班级23 机器人一班学院智能工程学院日期2026/3/17本文为机器人设计与应用综合实训中基于ESP32LVGL实现南宁实时时间、日期、未来三天天气动态获取与显示的技术分享记录网络获取、数据解析、LVGL 界面刷新、多任务调度等开发要点、问题排查及实践总结适配实训报告补充、技术复盘及同学间交流。核心方向ESP32 网络通信、HTTP 天气接口调用、LVGL 控件动态更新、时间同步与界面可视化贴合机器人智能交互与信息展示实训需求。实训基础信息实训项目名称实训时间ESP32 开发板型号开发环境实训小组人数ESP32 基于 LVGL 的南宁实时时间与天气动态显示2026.3.17ESP32-S3-DevKitC-1N8R2Windows11Visual Studio CodeESP-IDF 5.2.1LVGL个人WiFi 联网配置、HTTP 天气获取、时间同步、LVGL 界面设计、动态数据刷新调试ESP32LVGL 开发核心知识点梳理知识点类别具体知识点核心原理简述实训应用场景机器人相关备注易错点 / 重点网络通信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否则系统异常重启ESP32LVGL 开发实操步骤步骤序号实操内容操作步骤细节使用工具 / 代码片段操作结果成功 / 失败及原因1ESP32 WiFi 联网配置1. 在wifi.c中配置 WiFi SSID 与密码2. 初始化 STA 模式并启动连接3. 串口查看连接状态VS Code、ESP-IDF、串口监视器成功WiFi 快速连接获取 IP 地址网络通信正常2HTTP 天气接口获取南宁数据1. 配置 HTTP 请求地址与请求头2. 发送 GET 请求获取天气 JSON3. 解析温度、天气代码、未来三天数据天气 API、串口监视器成功成功获取南宁当前温度、天气状况、未来三天预报3系统时间同步与格式化1. 开启系统时间同步2. 用time()获取时间戳3. 格式化为时间字符串与日期字符串time.h、localtime()成功时间与日期准确格式符合显示要求4LVGL 界面搭建与控件绑定1. 用 GUI Guider 创建界面添加时间 / 日期 Label、天气图标 Image2. 生成 UI 代码并集成到工程3. 关联控件变量GUI Guider、LVGL 库成功界面布局完成控件可正常访问5LVGL 动态数据刷新1. 每秒判断时间变化2. 加锁更新时间 / 日期 Label3. 根据天气代码设置图标、显示温度lv_label_set_text、lv_image_set_src成功时间每秒刷新天气图标与温度正确显示6多任务与稳定性优化1. 主循环添加lv_timer_handler2. 加入 10ms 延时3. 检查 LVGL 锁机制FreeRTOS、vTaskDelay成功界面流畅无卡顿系统长期运行不重启ESP32LVGL 开发常见问题及解决方案问题序号问题描述排查过程解决方案问题总结避免方法1ESP32 无法连接 WiFi1. 检查 WiFi 名称密码2. 查看串口报错3. 确认路由器正常1. 修正 WiFi 账号密码2. 增加重连机制3. 检查 ESP32 天线联网前先验证 WiFi 信息添加重连逻辑提升稳定性2获取不到天气数据1. 检查网络是否连通2. 核对 API 接口地址3. 查看请求头是否正确1. 确认联网成功再请求2. 使用可用天气接口3. 补全请求头参数HTTP 请求前先判断网络状态接口地址需实时有效3LVGL 界面死机 / 花屏1. 检查是否多任务操作 LVGL 未加锁2. 查看是否无延时卡死1. 所有 LVGL 操作加lock/unlock2. 主循环加vTaskDelayLVGL 非线程安全多任务必须加锁必须喂狗4天气图标显示错误 / 不显示1. 检查图片声明与数组索引2. 核对天气代码映射1. 正确LV_IMAGE_DECLARE2. 修正索引对应关系图片声明与映射表必须一致避免索引越界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#includedemos/lv_demos.h#includegui_guider.h#includecustom.h#includewifi.hLV_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 sectimer_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无延时}}
ESP32+LVGL 天气与时间动态显示开发
机器人设计与应用综合实训 ——ESP32LVGL 天气与时间显示开发姓名劳勇豪学号1234160122班级23 机器人一班学院智能工程学院日期2026/3/17本文为机器人设计与应用综合实训中基于ESP32LVGL实现南宁实时时间、日期、未来三天天气动态获取与显示的技术分享记录网络获取、数据解析、LVGL 界面刷新、多任务调度等开发要点、问题排查及实践总结适配实训报告补充、技术复盘及同学间交流。核心方向ESP32 网络通信、HTTP 天气接口调用、LVGL 控件动态更新、时间同步与界面可视化贴合机器人智能交互与信息展示实训需求。实训基础信息实训项目名称实训时间ESP32 开发板型号开发环境实训小组人数ESP32 基于 LVGL 的南宁实时时间与天气动态显示2026.3.17ESP32-S3-DevKitC-1N8R2Windows11Visual Studio CodeESP-IDF 5.2.1LVGL个人WiFi 联网配置、HTTP 天气获取、时间同步、LVGL 界面设计、动态数据刷新调试ESP32LVGL 开发核心知识点梳理知识点类别具体知识点核心原理简述实训应用场景机器人相关备注易错点 / 重点网络通信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否则系统异常重启ESP32LVGL 开发实操步骤步骤序号实操内容操作步骤细节使用工具 / 代码片段操作结果成功 / 失败及原因1ESP32 WiFi 联网配置1. 在wifi.c中配置 WiFi SSID 与密码2. 初始化 STA 模式并启动连接3. 串口查看连接状态VS Code、ESP-IDF、串口监视器成功WiFi 快速连接获取 IP 地址网络通信正常2HTTP 天气接口获取南宁数据1. 配置 HTTP 请求地址与请求头2. 发送 GET 请求获取天气 JSON3. 解析温度、天气代码、未来三天数据天气 API、串口监视器成功成功获取南宁当前温度、天气状况、未来三天预报3系统时间同步与格式化1. 开启系统时间同步2. 用time()获取时间戳3. 格式化为时间字符串与日期字符串time.h、localtime()成功时间与日期准确格式符合显示要求4LVGL 界面搭建与控件绑定1. 用 GUI Guider 创建界面添加时间 / 日期 Label、天气图标 Image2. 生成 UI 代码并集成到工程3. 关联控件变量GUI Guider、LVGL 库成功界面布局完成控件可正常访问5LVGL 动态数据刷新1. 每秒判断时间变化2. 加锁更新时间 / 日期 Label3. 根据天气代码设置图标、显示温度lv_label_set_text、lv_image_set_src成功时间每秒刷新天气图标与温度正确显示6多任务与稳定性优化1. 主循环添加lv_timer_handler2. 加入 10ms 延时3. 检查 LVGL 锁机制FreeRTOS、vTaskDelay成功界面流畅无卡顿系统长期运行不重启ESP32LVGL 开发常见问题及解决方案问题序号问题描述排查过程解决方案问题总结避免方法1ESP32 无法连接 WiFi1. 检查 WiFi 名称密码2. 查看串口报错3. 确认路由器正常1. 修正 WiFi 账号密码2. 增加重连机制3. 检查 ESP32 天线联网前先验证 WiFi 信息添加重连逻辑提升稳定性2获取不到天气数据1. 检查网络是否连通2. 核对 API 接口地址3. 查看请求头是否正确1. 确认联网成功再请求2. 使用可用天气接口3. 补全请求头参数HTTP 请求前先判断网络状态接口地址需实时有效3LVGL 界面死机 / 花屏1. 检查是否多任务操作 LVGL 未加锁2. 查看是否无延时卡死1. 所有 LVGL 操作加lock/unlock2. 主循环加vTaskDelayLVGL 非线程安全多任务必须加锁必须喂狗4天气图标显示错误 / 不显示1. 检查图片声明与数组索引2. 核对天气代码映射1. 正确LV_IMAGE_DECLARE2. 修正索引对应关系图片声明与映射表必须一致避免索引越界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#includedemos/lv_demos.h#includegui_guider.h#includecustom.h#includewifi.hLV_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 sectimer_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无延时}}
