1. 项目概述这个桌面天气预报站项目是一个结合了实用功能和趣味性的创意电子制作。它使用ESP32-E开发板作为主控通过WiFi连接获取网络时间和天气数据并在TFT屏幕上显示。最特别的是加入了触摸切换功能可以显示用户蛙儿子的旅行照片为日常查看天气增添了一份温馨和乐趣。作为一个硬件爱好者我发现这个项目有几个特别吸引人的地方它完美结合了物联网技术和生活情趣硬件成本控制在200元以内代码结构清晰适合初学者学习最终成品既有实用价值又有观赏性我在实际制作过程中对原方案进行了一些优化和改进特别是在天气数据获取和显示效果方面后面会详细分享这些经验。2. 硬件准备与连接2.1 所需材料清单制作这个天气预报站需要以下硬件主控板Firebeetle Board-ESP32-E约80元选择理由内置WiFi/蓝牙支持电容触摸功耗低特别注意要确认是ESP32-E版本不是ESP8266显示屏1.3寸TFT LCD240×240分辨率约50元建议选择带SPI接口的型号刷新率更高我使用的是ST7789驱动芯片的屏幕电源系统3.7V锂电池1000mAh约20元TP4056充电模块约5元其他材料杜邦线若干3D打印外壳可根据个人喜好设计微型按钮开关2.2 硬件连接示意图各模块的连接方式如下ESP32-E引脚 → 连接对象 ----------------------------- 3.3V → TFT VCC GND → TFT GND 电池负极 D2 (GPIO2) → TFT DC D6 (GPIO12) → TFT CS D3 (GPIO0) → TFT RST D13 (GPIO13) → TFT MOSI D14 (GPIO14) → TFT SCK D4 (GPIO4) → 电容触摸输入 VBAT → 电池正极注意在连接显示屏时务必确认引脚定义是否与你的具体屏幕型号一致。我最初就因屏幕版本不同导致显示异常后来查阅数据手册才解决。2.3 电源管理优化原方案使用直接电池供电我在实际制作中增加了以下改进添加了一个低压报警电路使用TL431基准源在电池和ESP32之间加入LDO稳压AMS1117-3.3为TFT屏幕单独供电避免大电流导致ESP32重启这些改进使系统运行更加稳定特别是在电池电量不足时能有明显提示。3. 软件开发环境搭建3.1 Arduino IDE配置安装最新版Arduino IDE1.8.19添加ESP32开发板支持文件→首选项→附加开发板管理器网址添加https://dl.espressif.com/dl/package_esp32_index.json工具→开发板→开发板管理器→搜索安装esp32安装必要库DFRobot_GDL显示驱动ArduinoJson6.x版本WiFiHTTPClient3.2 字体文件处理中文显示需要特殊处理字体步骤如下准备中文字体文件如simkai.ttf使用项目提供的Python脚本生成字体库python setup.py -f simkai.ttf -s 24 -o font_kai24将生成的.h文件复制到库目录DFRobot_GDL/src/Fonts/Fonts/修改DFRobot_Font.h添加新字体引用实测发现字体大小建议选择24pt和48pt两种既保证可读性又不占用过多内存。4. 核心功能实现4.1 网络时间获取#include WiFi.h #include time.h const char* ntpServer pool.ntp.org; const long gmtOffset_sec 8 * 3600; // 北京时间8时区 const int daylightOffset_sec 0; void setupTime() { configTime(gmtOffset_sec, daylightOffset_sec, ntpServer); } String getFormattedTime() { struct tm timeinfo; if(!getLocalTime(timeinfo)){ return Failed; } char timeStr[20]; strftime(timeStr, sizeof(timeStr), %H:%M, timeinfo); return String(timeStr); }时间获取的几个关键点NTP服务器选择国内可用cn.pool.ntp.org延迟更低时区设置北京时间是GMT8错误处理网络不稳定时需要重试机制4.2 天气数据获取我改用了更稳定的天气API接口#include HTTPClient.h #include ArduinoJson.h String getWeatherData() { HTTPClient http; String payload ; http.begin(http://t.weather.sojson.com/api/weather/city/101010100); int httpCode http.GET(); if(httpCode HTTP_CODE_OK) { payload http.getString(); } http.end(); return payload; } void parseWeather(String jsonStr) { DynamicJsonDocument doc(2048); deserializeJson(doc, jsonStr); String city doc[cityInfo][city]; String weather doc[data][forecast][0][type]; String temp doc[data][wendu] °C; // 更新显示... }这个接口返回的数据更丰富包含实时温度天气预报空气质量湿度等信息注意城市代码需要替换北京是101010100其他城市代码可在网上查询。4.3 触摸切换功能实现ESP32的电容触摸功能使用非常简单#define TOUCH_PIN 4 // GPIO4 void checkTouch() { int touchValue touchRead(TOUCH_PIN); if(touchValue 20) { // 阈值根据实际情况调整 showNextPhoto(); delay(200); // 防抖 } } void showNextPhoto() { static uint8_t photoIndex 0; switch(photoIndex) { case 0: displayPhoto(photo1); break; case 1: displayPhoto(photo2); break; // ...更多照片 } photoIndex (photoIndex 1) % PHOTO_COUNT; }触摸灵敏度的调节技巧通过touchRead()获取基准值阈值设为基准值的50%-70%可以并联一个10pF电容提高稳定性5. 显示效果优化5.1 界面布局设计我设计了两种显示模式主模式默认顶部大号时间显示中部天气图标和温度底部日期和城市副模式触摸切换全屏显示旅行照片右下角小字显示拍摄地点5.2 图片转换与显示将照片转换为C数组的步骤使用Image2Lcd软件转换图片输出格式C语言数组颜色格式RGB565宽度高度不超过屏幕分辨率保存为.h文件const unsigned char gImage_photo1[] { /* 数据 */ };显示代码screen.drawRGBBitmap(0, 0, (uint16_t*)gImage_photo1, 240, 240);实测建议图片数量控制在6-8张太多会占用过多Flash空间。6. 常见问题与解决6.1 WiFi连接不稳定现象频繁断开天气数据获取失败解决方案增加重连机制void checkWiFi() { if(WiFi.status() ! WL_CONNECTED) { WiFi.reconnect(); delay(1000); } }降低WiFi功率WiFi.setTxPower(WIFI_POWER_11dBm);6.2 显示乱码原因字体文件不完整或编码问题排查步骤确认生成的字体包含所需汉字检查Arduino IDE编码设置为UTF-8重新生成字体文件6.3 触摸不灵敏调整方法增加触摸面积贴一块铜箔调整阈值// 在setup中校准基准值 int baseline 0; for(int i0; i10; i) { baseline touchRead(TOUCH_PIN); delay(50); } baseline / 10; threshold baseline * 0.6;7. 项目扩展思路这个基础版本完成后还可以考虑以下扩展增加传感器BME280室内温湿度监测BH1750光照强度检测优化电源添加太阳能充电实现深度睡眠模式云端同步将天气数据保存到物联网平台实现多设备数据同步语音交互增加语音播报功能支持语音查询我在实际制作中发现ESP32的GPIO资源还比较充裕完全可以支持这些扩展功能。特别是添加室内传感器后可以同时显示室内外温湿度对比实用性大大提升。
ESP32天气预报站制作指南：硬件连接与软件开发
发布时间：2026/6/17 18:01:49
1. 项目概述这个桌面天气预报站项目是一个结合了实用功能和趣味性的创意电子制作。它使用ESP32-E开发板作为主控通过WiFi连接获取网络时间和天气数据并在TFT屏幕上显示。最特别的是加入了触摸切换功能可以显示用户蛙儿子的旅行照片为日常查看天气增添了一份温馨和乐趣。作为一个硬件爱好者我发现这个项目有几个特别吸引人的地方它完美结合了物联网技术和生活情趣硬件成本控制在200元以内代码结构清晰适合初学者学习最终成品既有实用价值又有观赏性我在实际制作过程中对原方案进行了一些优化和改进特别是在天气数据获取和显示效果方面后面会详细分享这些经验。2. 硬件准备与连接2.1 所需材料清单制作这个天气预报站需要以下硬件主控板Firebeetle Board-ESP32-E约80元选择理由内置WiFi/蓝牙支持电容触摸功耗低特别注意要确认是ESP32-E版本不是ESP8266显示屏1.3寸TFT LCD240×240分辨率约50元建议选择带SPI接口的型号刷新率更高我使用的是ST7789驱动芯片的屏幕电源系统3.7V锂电池1000mAh约20元TP4056充电模块约5元其他材料杜邦线若干3D打印外壳可根据个人喜好设计微型按钮开关2.2 硬件连接示意图各模块的连接方式如下ESP32-E引脚 → 连接对象 ----------------------------- 3.3V → TFT VCC GND → TFT GND 电池负极 D2 (GPIO2) → TFT DC D6 (GPIO12) → TFT CS D3 (GPIO0) → TFT RST D13 (GPIO13) → TFT MOSI D14 (GPIO14) → TFT SCK D4 (GPIO4) → 电容触摸输入 VBAT → 电池正极注意在连接显示屏时务必确认引脚定义是否与你的具体屏幕型号一致。我最初就因屏幕版本不同导致显示异常后来查阅数据手册才解决。2.3 电源管理优化原方案使用直接电池供电我在实际制作中增加了以下改进添加了一个低压报警电路使用TL431基准源在电池和ESP32之间加入LDO稳压AMS1117-3.3为TFT屏幕单独供电避免大电流导致ESP32重启这些改进使系统运行更加稳定特别是在电池电量不足时能有明显提示。3. 软件开发环境搭建3.1 Arduino IDE配置安装最新版Arduino IDE1.8.19添加ESP32开发板支持文件→首选项→附加开发板管理器网址添加https://dl.espressif.com/dl/package_esp32_index.json工具→开发板→开发板管理器→搜索安装esp32安装必要库DFRobot_GDL显示驱动ArduinoJson6.x版本WiFiHTTPClient3.2 字体文件处理中文显示需要特殊处理字体步骤如下准备中文字体文件如simkai.ttf使用项目提供的Python脚本生成字体库python setup.py -f simkai.ttf -s 24 -o font_kai24将生成的.h文件复制到库目录DFRobot_GDL/src/Fonts/Fonts/修改DFRobot_Font.h添加新字体引用实测发现字体大小建议选择24pt和48pt两种既保证可读性又不占用过多内存。4. 核心功能实现4.1 网络时间获取#include WiFi.h #include time.h const char* ntpServer pool.ntp.org; const long gmtOffset_sec 8 * 3600; // 北京时间8时区 const int daylightOffset_sec 0; void setupTime() { configTime(gmtOffset_sec, daylightOffset_sec, ntpServer); } String getFormattedTime() { struct tm timeinfo; if(!getLocalTime(timeinfo)){ return Failed; } char timeStr[20]; strftime(timeStr, sizeof(timeStr), %H:%M, timeinfo); return String(timeStr); }时间获取的几个关键点NTP服务器选择国内可用cn.pool.ntp.org延迟更低时区设置北京时间是GMT8错误处理网络不稳定时需要重试机制4.2 天气数据获取我改用了更稳定的天气API接口#include HTTPClient.h #include ArduinoJson.h String getWeatherData() { HTTPClient http; String payload ; http.begin(http://t.weather.sojson.com/api/weather/city/101010100); int httpCode http.GET(); if(httpCode HTTP_CODE_OK) { payload http.getString(); } http.end(); return payload; } void parseWeather(String jsonStr) { DynamicJsonDocument doc(2048); deserializeJson(doc, jsonStr); String city doc[cityInfo][city]; String weather doc[data][forecast][0][type]; String temp doc[data][wendu] °C; // 更新显示... }这个接口返回的数据更丰富包含实时温度天气预报空气质量湿度等信息注意城市代码需要替换北京是101010100其他城市代码可在网上查询。4.3 触摸切换功能实现ESP32的电容触摸功能使用非常简单#define TOUCH_PIN 4 // GPIO4 void checkTouch() { int touchValue touchRead(TOUCH_PIN); if(touchValue 20) { // 阈值根据实际情况调整 showNextPhoto(); delay(200); // 防抖 } } void showNextPhoto() { static uint8_t photoIndex 0; switch(photoIndex) { case 0: displayPhoto(photo1); break; case 1: displayPhoto(photo2); break; // ...更多照片 } photoIndex (photoIndex 1) % PHOTO_COUNT; }触摸灵敏度的调节技巧通过touchRead()获取基准值阈值设为基准值的50%-70%可以并联一个10pF电容提高稳定性5. 显示效果优化5.1 界面布局设计我设计了两种显示模式主模式默认顶部大号时间显示中部天气图标和温度底部日期和城市副模式触摸切换全屏显示旅行照片右下角小字显示拍摄地点5.2 图片转换与显示将照片转换为C数组的步骤使用Image2Lcd软件转换图片输出格式C语言数组颜色格式RGB565宽度高度不超过屏幕分辨率保存为.h文件const unsigned char gImage_photo1[] { /* 数据 */ };显示代码screen.drawRGBBitmap(0, 0, (uint16_t*)gImage_photo1, 240, 240);实测建议图片数量控制在6-8张太多会占用过多Flash空间。6. 常见问题与解决6.1 WiFi连接不稳定现象频繁断开天气数据获取失败解决方案增加重连机制void checkWiFi() { if(WiFi.status() ! WL_CONNECTED) { WiFi.reconnect(); delay(1000); } }降低WiFi功率WiFi.setTxPower(WIFI_POWER_11dBm);6.2 显示乱码原因字体文件不完整或编码问题排查步骤确认生成的字体包含所需汉字检查Arduino IDE编码设置为UTF-8重新生成字体文件6.3 触摸不灵敏调整方法增加触摸面积贴一块铜箔调整阈值// 在setup中校准基准值 int baseline 0; for(int i0; i10; i) { baseline touchRead(TOUCH_PIN); delay(50); } baseline / 10; threshold baseline * 0.6;7. 项目扩展思路这个基础版本完成后还可以考虑以下扩展增加传感器BME280室内温湿度监测BH1750光照强度检测优化电源添加太阳能充电实现深度睡眠模式云端同步将天气数据保存到物联网平台实现多设备数据同步语音交互增加语音播报功能支持语音查询我在实际制作中发现ESP32的GPIO资源还比较充裕完全可以支持这些扩展功能。特别是添加室内传感器后可以同时显示室内外温湿度对比实用性大大提升。
