1. 从“天气盒子”到桌面美学一个极客的桌面气象站构建实录最近在整理桌面时总感觉少了点什么。显示器、键盘、音箱、氛围灯……该有的都有了但总觉得缺了点“活”的东西。直到看到国外一些极客玩家在桌面上摆弄的“Weather Box”——一个能实时显示本地天气、温湿度、空气质量甚至未来预报的桌面小设备瞬间被种草了。这玩意儿比手机App更直观比智能音箱的语音播报更有仪式感更重要的是它完全由自己打造从硬件选型到软件编码再到外壳设计每一个环节都充满了DIY的乐趣和成就感。所谓的“Weather Box”本质上是一个高度定制化的桌面气象信息终端。它不依赖于任何商业成品核心是一块小屏幕通常是电子墨水屏或TFT彩屏和一块微控制器如ESP32通过Wi-Fi从开放的天气API获取数据再以极具设计感的UI呈现出来。它解决的不仅仅是“看天气”这个基础需求更是对个性化桌面美学、对硬件编程兴趣、以及对“将无形数据化为有形实体”这种极客精神的追求。无论你是想给枯燥的工位增添一抹科技感还是想找一个有趣的嵌入式开发入门项目这个“天气盒子”都是一个绝佳的选择。接下来我将详细拆解我从零开始构建一个功能完善、颜值在线的Weather Box的全过程。内容会涵盖硬件选型的纠结与决策、软件开发中的核心逻辑与避坑指南、外壳设计的思路与实现以及最终让这个“盒子”真正融入你数字生活的那些小心思。整个过程我会尽量说人话把原理讲透把步骤理清让你也能亲手做出属于你自己的那一份桌面风景。2. 硬件选型在性能、功耗与颜值间的权衡搭建任何硬件项目第一步永远是硬件选型。这直接决定了项目的成本、复杂度、最终效果乃至扩展性。对于Weather Box我们需要核心三件套主控板、显示屏和传感器。此外电源和外壳也需要仔细考虑。2.1 主控板为什么是ESP32在微控制器领域选择很多Arduino Uno、ESP8266、ESP32、树莓派Pico等等。我最终选择了ESP32原因如下内置Wi-Fi与蓝牙这是最关键的一点。ESP32集成了2.4GHz Wi-Fi和蓝牙模块这意味着我们不需要额外添加Wi-Fi模块就能联网获取天气数据极大地简化了硬件设计和程序开发。ESP8266虽然也有Wi-Fi但性能和处理能力稍弱。强大的处理能力与丰富外设ESP32是双核处理器主频高达240MHz内存也足够大。这为我们驱动彩屏、解析复杂的JSON格式天气数据、运行稍微精美一点的图形界面提供了充足的算力。它拥有足够的GPIO引脚可以轻松连接I2C、SPI接口的屏幕和传感器。完善的生态与低成本围绕ESP32的Arduino核心和MicroPython支持都非常成熟有海量的库和教程。一块基础款的ESP32开发板如ESP32-DevKitC价格仅在20-30元人民币性价比极高。注意购买ESP32开发板时建议选择引脚全部引出的型号方便后续连接和调试。对于这个项目不需要带摄像头或PSRAM的高级型号基础款完全够用。2.2 显示屏电子墨水屏 vs TFT彩屏这是决定Weather Box“颜值”和“气质”的关键。两种屏幕各有拥趸我的选择过程很纠结。电子墨水屏E-Ink优点极致省电只有在刷新内容时才耗电静态显示时零功耗。视觉效果类似纸张不发光长时间观看不伤眼在环境光下越亮越清晰有一种独特的“数码复古”美感。缺点刷新率极低通常需要1-3秒完成一次全局刷新会有明显的闪烁鬼影。多数为黑白或三色黑、白、红色彩表现力弱。驱动相对复杂且价格通常比同尺寸TFT屏贵。适合场景如果你希望盒子常亮显示且对功耗极其敏感比如用电池供电或者偏爱那种沉静、简约的阅读感E-Ink是首选。常见的尺寸有2.9英寸、4.2英寸、7.5英寸等。TFT液晶彩屏LCD优点色彩鲜艳刷新率高动画效果流畅。驱动简单有大量成熟的库如TFT_eSPI支持开发门槛低。价格相对便宜尺寸和分辨率选择丰富。缺点需要背光功耗较高不适合常亮除非你不在乎电费或者一直插电。在强光下可能反光需要高亮度背光才能看清。适合场景如果你希望显示丰富的图标、渐变色、动态效果如云朵飘动或者项目需要频繁更新数据TFT彩屏是更合适的选择。常见的接口有SPI和并行RGB对于ESP32SPI接口的屏幕如ILI9341、ST7789驱动芯片是绝配只需占用少量引脚。我的最终选择是一块1.54英寸的IPS TFT彩屏ST7789驱动240x240分辨率。理由如下首先我希望我的Weather Box有更生动的视觉表现彩色的天气图标和温度计看起来更直观有趣。其次这个尺寸非常适合放在桌面不大不小。最后我计划让它一直插着USB供电所以功耗不是首要考虑。这块屏幕通过SPI与ESP32通信接线非常简单。2.3 传感器要不要加本地传感Weather Box的数据源主要是网络API那为什么还要考虑本地传感器呢为了数据互补和离线备用。网络API能提供宏观的、预报性的天气数据温度、湿度、天气状况、风速、AQI等。而本地传感器如温湿度传感器DHT22/BME280可以提供你所在微环境的实时数据。比如空调房内的实际体感温湿度可能与API提供的城市级数据有较大差异。将两者同时显示会更有参考价值。我选择增加了一个BME280传感器。它不仅能测量温度、湿度还能测量气压。气压数据对于预测短期天气变化如“气压下降可能转雨”有一定参考意义。BME280通过I2C接口通信同样只需要两根线SDA, SCL可以很方便地和屏幕的SPI接口共存于ESP32上。2.4 其他配件电源与外壳电源最省事的方式是使用手机的5V/1A或5V/2A的USB充电头和一根Micro-USB或Type-C数据线取决于你的ESP32板子接口供电。如果想做成电池供电的便携版则需要考虑锂电池、充电模块和升压模块复杂度会大大增加对于常驻桌面的版本不推荐。外壳这是提升项目完成度的关键。你可以选择3D打印、亚克力激光切割甚至用一个现成的漂亮盒子改造。我选择了自己设计并3D打印外壳。设计时需要考虑屏幕的开孔位置和大小、ESP32板和传感器的固定、电源线的入口、以及整体的散热虽然功耗不大。使用Fusion 360或Tinkercad这类软件可以轻松完成设计。硬件清单总结ESP32开发板 x11.54英寸 SPI TFT彩屏 (ST7789) x1BME280温湿度气压传感器 x1USB数据线 x15V USB充电头 x1杜邦线母对母若干3D打印外壳可选但强烈推荐3. 软件架构从网络API到像素点的数据之旅硬件连接好后大脑软件才是灵魂。Weather Box的软件逻辑是一个典型的物联网IoT应用流程联网 - 获取数据 - 处理数据 - 驱动显示。我们使用Arduino框架来编写ESP32的代码因为它对新手友好库资源丰富。3.1 核心工作流程解析整个程序会运行在一个loop()循环中但为了不阻塞显示和用户体验我们需要采用非阻塞式的设计。核心流程如下图所示概念描述初始化阶段初始化串口用于调试输出。初始化屏幕设置分辨率、旋转方向、背光等。连接Wi-Fi。这里需要将你的SSID和密码硬编码在代码中对于个人项目可以生产环境建议用Wi-Fi Manager配网。初始化BME280传感器如果安装了的话。主循环中的任务调度时间片1检查网络数据更新。我们不会在每次循环都去请求网络那样会给API服务器造成压力也可能导致因网络延迟造成的卡顿。通常设置一个更新间隔比如每10分钟更新一次天气数据每1小时更新一次天气预报。使用millis()函数来记录上一次更新的时间实现非阻塞的定时触发。unsigned long previousWeatherUpdate 0; const long weatherUpdateInterval 600000; // 10分钟单位毫秒 void loop() { unsigned long currentMillis millis(); // 检查是否到了更新天气的时间 if (currentMillis - previousWeatherUpdate weatherUpdateInterval) { previousWeatherUpdate currentMillis; fetchWeatherData(); // 执行获取天气数据的函数 } // ... 其他任务 }时间片2读取本地传感器。BME280的读取可以更频繁一些比如每5秒一次因为本地读取很快不影响性能。时间片3刷新显示。根据最新的网络数据和传感器数据重新绘制屏幕上的所有元素。如果数据没有变化可以只更新变化的部分以提升效率部分刷新但对于小屏幕全局重绘的负担也不大。3.2 天气数据源和风天气API实战国内可用的免费天气API有很多如和风天气、心知天气等。我选择和风天气因为它提供免费的开发者套餐足以满足个人需求文档也比较清晰。第一步申请Key去和风天气官网注册开发者账号创建一个项目获取你的API Key。免费版通常有每日调用次数限制但对于几分钟更新一次的个人设备来说绰绰有余。第二步理解API调用我们需要两个核心接口实时天气获取当前温度、湿度、天气状况阴晴雨雪、风速风向、体感温度等。https://devapi.qweather.com/v7/weather/now?locationYOUR_LOCATION_IDkeyYOUR_API_KEY3天预报获取未来三天的白天和夜晚的天气状况、温度范围。https://devapi.qweather.com/v7/weather/3d?locationYOUR_LOCATION_IDkeyYOUR_API_KEY这里的YOUR_LOCATION_ID需要你通过“城市搜索”API用你所在的城市名查询得到的一个固定ID。第三步在ESP32中处理HTTPS请求ESP32的Arduino核心库提供了WiFiClientSecure和HTTPClient库来处理HTTPS请求。核心代码如下#include WiFi.h #include HTTPClient.h #include ArduinoJson.h // 必须引入此库来解析JSON void fetchWeatherData() { if (WiFi.status() WL_CONNECTED) { HTTPClient http; String url https://devapi.qweather.com/v7/weather/now?location101010100keyyour_key_here; http.begin(url); // 指定请求地址 int httpCode http.GET(); // 发起GET请求 if (httpCode HTTP_CODE_OK) { // 如果返回200 OK String payload http.getString(); // 获取返回的JSON字符串 // 使用ArduinoJson库解析payload DynamicJsonDocument doc(1024); // 根据JSON大小调整缓冲区 deserializeJson(doc, payload); float temp doc[now][temp]; // 例如获取当前温度 String weatherText doc[now][text]; // 获取天气状况文字 // ... 解析其他所需字段 // 将解析后的数据存入全局变量供显示函数使用 currentTemp temp; currentWeather weatherText; } else { Serial.printf(HTTP GET failed, error: %s\n, http.errorToString(httpCode).c_str()); } http.end(); // 关闭连接 } }避坑指南解析JSON时务必使用足够大的DynamicJsonDocument缓冲区否则会导致解析失败。可以通过在串口监视器打印原始payload然后到在线JSON解析器查看其结构从而确定正确的字段路径。另外免费API有QPS每秒查询率限制不要设置太短的更新间隔。3.3 显示驱动用TFT_eSPI库绘制UITFT_eSPI库是驱动SPI TFT屏幕的利器它针对ESP32等平台做了高度优化支持多种驱动芯片。初始化与基础绘制#include TFT_eSPI.h TFT_eSPI tft TFT_eSPI(); void setup() { tft.init(); tft.setRotation(1); // 根据你的屏幕安装方向调整旋转角度 tft.fillScreen(TFT_BLACK); // 清屏为黑色 } void drawWeatherIcon(String condition) { // 这是一个简单的示例根据天气状况文字绘制不同图形 if (condition.indexOf(晴) 0) { tft.fillCircle(50, 50, 30, TFT_YELLOW); // 画一个太阳 } else if (condition.indexOf(云) 0) { // 绘制云朵的简单图形... } else if (condition.indexOf(雨) 0) { // 绘制雨滴... } }为了做出好看的UI你需要规划屏幕布局将240x240的像素区域划分为几个区域顶部显示城市/时间中间大字体显示当前温度和天气图标底部显示湿度、风速、气压传感器数据以及未来三天的预报图标和温度。使用字体TFT_eSPI支持从.vlw格式文件加载自定义字体。你可以生成不同大小的字体文件用于显示不同的文本如巨大的温度数字较小的描述文字。绘制图形除了基本的几何图形你可以将设计好的天气图标如PNG图片转换为位图数组然后使用tft.drawXBitmap()函数绘制。这是让界面变漂亮的关键。性能优化避免在loop()中频繁调用tft.fillScreen()全屏清空除非必要。可以只更新数字和图标变化的区域。将固定的UI元素如边框、标签文字的绘制放在setup()或数据更新周期之外只重绘动态数据部分。4. 外壳设计与装配让想法落地成实物代码跑通屏幕上显示出正确的天气信息这只是成功了一半。一个裸露着电路板和飞线的“开发板形态”设备是没法优雅地放在桌面上的。外壳设计是项目从“原型”迈向“产品”的关键一步。4.1 设计考量与工具选择我的设计目标很明确紧凑、美观、实用、易于装配。紧凑所有部件ESP32、屏幕、BME280应紧密排布减少外壳体积。美观正面只露出屏幕所有开孔如电源孔尽量放在侧面或背面。外壳本身要有一定的设计感比如圆角、特定的倾角。实用屏幕必须被牢固固定且与面板开口对齐。内部要有卡槽或支柱来固定主板和传感器防止晃动。需要考虑散热虽然功耗不大但在密闭空间内ESP32的芯片和屏幕背光还是会发热需要在壳体上设计一些通风孔。易于装配设计时要考虑装配顺序。通常是“从后往前”——背板-主板/传感器-屏幕-前面板。我选择使用Fusion 360进行3D建模。它对个人用户免费功能强大学习资源丰富。对于简单的外壳Tinkercad这种在线工具也完全够用。4.2 建模关键步骤与参数测量与规划用游标卡尺精确测量每一个元件的尺寸长宽高、安装孔的位置和直径。特别是屏幕要测量其可视区域Viewing Area和外部轮廓包括PCB板的尺寸。我的屏幕总尺寸是35mm x 25mm可视区域是1.54英寸对角线。主体设计创建一个略大于所有元件堆叠体积的长方体作为外壳基础。使用“抽壳”命令将实体变成有壁厚我设为2mm的壳体。根据屏幕PCB的尺寸在壳体正面“切割”出一个开口。这个开口要比屏幕的可视区域大但比PCB外轮廓小这样屏幕才能从内侧卡住不会掉出来。我留了0.5mm的过盈配合余量。在壳体内部创建“支柱”。这些是用于固定ESP32和BME280的小圆柱体或方块上面要打出螺丝孔如M2.5。支柱的高度要计算好确保元件安装后不会顶到屏幕背面。细节优化为USB电源接口在壳体侧面或背面开一个长方形槽。在壳体底部设计几个小凸点作为脚垫防止刮伤桌面。在壳体顶部或背部设计一些小的圆形或条形通风孔。将所有边缘进行“倒圆角”处理通常0.5mm-1mm的圆角就能让模型看起来精致很多也避免了打印出的模型边缘割手。拆分与连接为了能放入元件外壳需要设计成可拆分的通常是前后盖。我设计的是“前盖带屏幕开口 主体壳”的结构。在结合处我设计了简单的“卡扣”和“螺丝柱”两种固定方式。卡扣方便快拆螺丝提供牢固保障。我在四个角设计了螺丝柱使用M2x6mm的自攻螺丝固定。4.3 3D打印与后处理将设计好的模型导出为STL文件使用切片软件如Cura、PrusaSlicer进行切片。打印参数建议材料PLA即可它容易打印强度足够颜色选择多。层高0.2mm在打印质量和时间间取得平衡。填充密度15%-20%足以保证结构强度。支撑如果模型有悬空部分如下方开口的卡扣需要生成支撑。记得在打印后小心去除。打印完成后进行简单的后处理去除支撑料、用砂纸打磨结合面确保平整、必要时可以用丙烯颜料或喷漆进行上色。我选择了哑光白的PLA材料打印出来本身就很有质感所以没有进行涂装。4.4 总装与走线内部固定使用M2.5x6mm的铜柱和螺丝将ESP32开发板固定在壳体内的支柱上。BME280传感器可以用双面胶或热熔胶固定在预留的位置。屏幕安装将屏幕从外壳内侧放入开口确保其平整。我剪了一小段EVA泡棉双面胶贴在屏幕PCB的背面然后将其粘在壳体开口的内沿上这样既固定了屏幕又起到一定的缓冲减震作用。连线这是最需要耐心和细心的环节。根据之前的接线图用适当长度的杜邦线连接ESP32、屏幕和BME280。线不宜过长以免在壳体内杂乱堆积。可以使用扎带或胶水固定线束。确保所有连接牢固后将USB线从外壳的开孔中穿出。合盖将前后盖对准先扣上卡扣再拧上四颗螺丝。拧螺丝时注意力度均匀避免将塑料柱拧滑丝。至此一个完整的、可工作的、外观精致的Weather Box硬件部分就全部完成了。通电后它应该能正常启动、连接Wi-Fi、获取数据并显示。5. 功能深化与个性化让你的盒子独一无二基础功能实现后我们可以给它注入更多个性和实用功能让它从“一个显示天气的设备”变成“你桌面的智能信息中枢”。5.1 显示内容的扩展除了基本的温度、天气图标、湿度和预报还可以考虑显示室内环境质量如果添加了BME280可以显示室内实时温湿度、气压趋势用箭头表示上升或下降。时间与日期从网络获取NTP时间并显示这样它同时也是一个精致的时钟。系统状态在角落以小字显示Wi-Fi信号强度、IP地址用于调试、API上次更新时间等。生活指数从天气API获取穿衣、洗车、运动等生活指数并给出建议图标或文字。自定义信息比如显示一句每日格言、待办事项需要连接其他服务或者通过简单的Web服务器界面让你能临时推送一句话到屏幕上。5.2 交互与设置的优化物理按键在外壳上嵌入1-2个轻触开关连接到ESP32的GPIO。通过按键可以切换显示页面如循环显示天气、传感器数据、系统信息或者手动触发一次数据更新。Web配网与配置避免将Wi-Fi密码硬编码在代码里。可以集成一个像WiFiManager这样的库。首次启动时ESP32会进入AP模式手机连接上它的热点后会自动弹出一个网页让你选择家里的Wi-Fi并输入密码。配置完成后设备会自动重启并连接。你还可以在这个网页上设置城市、API Key、更新频率等。OTA升级通过Arduino IDE的OTA功能在同一个Wi-Fi网络下无需插拔USB线就能直接上传新的固件到设备这对于后期功能迭代非常方便。5.3 视觉效果的打磨这是提升幸福感的关键。花时间设计一套统一的视觉风格配色方案根据天气状况动态改变主色调。例如晴天用橙黄渐变雨天用蓝灰渐变夜晚用深蓝紫色。这需要你在代码里根据时间或天气代码来动态设置tft.setTextColor和绘图颜色。自定义图标在网上寻找或自己设计一套简约风格的天气图标晴、多云、阴、雨、雪、雷暴等将其转换为适合TFT_eSPI显示的位图数组。一套好的图标能让界面质感飞跃。动画与过渡实现简单的动画比如数据更新时旧的数字淡出新的数字淡入或者切换页面时有滑入滑出的效果。虽然ESP32性能有限但处理一些简单的图形动画还是游刃有余的。5.4 稳定性与健壮性处理一个需要长期运行的设备必须考虑异常情况。网络异常处理如果获取网络数据失败程序不应该崩溃。应该重试几次并在屏幕上显示“更新失败”或“网络错误”的提示同时继续显示上一次成功获取的数据如果有的话。看门狗定时器启用ESP32的硬件看门狗防止程序跑飞导致死机。如果主循环长时间阻塞看门狗会自动重启设备。数据缓存将获取到的天气数据除了存入变量还可以写入ESP32的SPIFFS闪存文件系统。这样即使设备重启在首次联网更新前也能显示上一次的数据而不是一片空白。低功耗模式如果未来用电池如果改用电池供电就需要深度优化。让ESP32大部分时间处于深度睡眠模式每隔一段时间如10分钟唤醒连接Wi-Fi获取数据刷新E-Ink屏幕然后再次进入睡眠。这样可以极大地延长电池寿命。6. 从项目到产品我踩过的那些坑与心得回顾整个构建过程从兴奋地画下第一张草图到最终成品在桌面上安静地显示着天气中间遇到了不少预料之中和预料之外的问题。分享出来希望能帮你少走弯路。坑一屏幕驱动与引脚冲突最初我随便找了一个TFT_eSPI的示例代码结果屏幕一片空白。排查后发现库中的引脚定义与我的ESP32开发板实际引脚连接不匹配。TFT_eSPI库通过一个User_Setup.h的头文件来配置引脚。你必须根据你的屏幕模块和ESP32板型仔细修改这个文件中的TFT_CS、TFT_DC、TFT_RST、TFT_MOSI等宏定义。另一个常见冲突是某些ESP32开发板的特定引脚如GPIO0、GPIO2在启动时有特殊用途如 boot 模式选择尽量避免使用这些引脚连接屏幕。心得拿到新屏幕和主板第一件事不是写代码而是找到确切的引脚定义图。对于ESP32最好使用那些标注了“仅用于输入/输出”的通用GPIO如12, 13, 14, 15, 25, 26, 27等。坑二JSON解析内存溢出在解析天气API返回的JSON时程序经常重启。通过串口调试发现重启前打印了“解析错误”的信息。原因是DynamicJsonDocument的缓冲区大小doc设置得太小了。天气API返回的JSON结构比我想象的复杂特别是3天预报接口数据量较大。心得不要凭感觉估计缓冲区大小。可以先将API返回的完整JSON字符串打印到串口监视器复制到电脑上用在线工具查看其大小字符数。然后将DynamicJsonDocument的缓冲区设置为这个大小的1.5倍左右以留有余地。例如如果JSON大约有800个字符可以设置DynamicJsonDocument doc(1200);。坑三电源噪声导致传感器读数异常在同时连接屏幕和BME280传感器时发现传感器读出的温度偶尔会跳变比实际值高好几度。用万用表测量ESP32的3.3V输出引脚发现在屏幕刷新尤其是大面积白色时电压会有轻微波动。心得微控制器和传感器对电源质量很敏感。解决方法有两个一是为传感器单独供电比如使用一个低压差线性稳压器LDO从5V USB口降压出一个更干净的3.3V给BME280。二是在程序中避开屏幕刷新最密集的时刻去读取传感器比如在两次全局刷新之间读取。我采用了第二种软件方法通过调整任务调度时序解决了问题。坑四3D打印模型的装配公差第一次打印出来的外壳屏幕开口严丝合缝结果屏幕根本塞不进去。卡扣设计得太紧一用力就掰断了。这就是没有考虑“公差”的结果。心得3D打印存在收缩率和打印机精度问题。设计时对于需要紧密配合的孔如螺丝孔可以将其直径设计得比螺丝标称直径大0.2-0.3mm。对于需要过盈配合的卡扣要留出至少0.2mm的间隙。最好的方法是先打印一个简单的、只包含关键配合结构的测试件验证无误后再打印整体。对于受力结构如卡扣可以增加其厚度或改变其形状来增强韧性。最后的体会这个项目最迷人的地方不在于最终那个显示着天气的小盒子而在于整个“创造”的过程。你不仅是一个程序员还是一个电子工程师、一个结构设计师、一个产品经理。每一个问题的解决都让你对“事物如何运作”有了更深一层的理解。当它最终完美运行成为你桌面不可或缺的一部分时那种满足感是购买任何成品都无法替代的。它不再只是一个工具而是你知识与技能的一个具象化结晶静静地讲述着你动手实现的故事。
