有一阵子总想给书桌添个有点灵气的小摆件,于是捣鼓出了这颗"毛豆时钟"🫘。它个头不大,却能准确显示时间、播报室外天气和空气质量,右下角还有一个会动的小太空人 👨🚀,每次看过去都觉得它也在看着你。下面就把制作过程完整分享出来。
🖼️ 最终的样子
先看看成品效果。屏幕布局清晰:上方是城市和天气,中间硕大的时间跳动着红色秒数,底部有温湿度进度条,视觉上温暖又不杂乱。
默认外壳是……没有外壳 😄。开发板和屏幕可以直接裸着用,找个小支架一靠就很稳,透明亚克力或者积木也能随便搭出个性底座。
📦 硬件清单
材料很简单,三样就够:
| 模块 | 规格 | 说明 |
|---|---|---|
| 主控 | ESP32-C3 (SuperMini/WeAct等) | 板载 Wi-Fi 即可 |
| 屏幕 | 1.8寸 TFT,ST7735S 驱动 | 128×160 分辨率 |
| 连接线 | 杜邦线 | 5-10 cm 母对母或公对母 |
接线按照下面的表格来,线序错了屏幕会闹脾气(白屏或不刷新)⚠️:
| 屏幕引脚 | ESP32-C3 引脚 | 功能 |
|---|---|---|
| VCC | 3.3V | 电源正极 |
| GND | GND | 共地 |
| SCL (SCK) | GPIO 4 | SPI 时钟 |
| SDA (MOSI) | GPIO 6 | SPI 数据 |
| RES (RST) | GPIO 3 | 复位 |
| DC (A0) | GPIO 2 | 命令/数据选择 |
| CS | GPIO 7 | 片选 |
| BLK | 3.3V | 背光常亮 |
接好的样子可以参考这张图 👇
✨ 它能做什么?
- 零代码配网 📡:使用了 WiFiManager,首次上电会自动开启热点
Maodou-Clock-Setup,手机连上后在浏览器输入 192.168.4.1 就能配置家里 Wi‑Fi,密码再也不用写死在代码里。 - 精致的字体 🖋️:借助 U8g2 库渲染 12px/16px 中文,笔画清晰圆润,彻底甩掉小屏常见的"锯齿字"。
- 实时天气与 AQI 🌤️:调用心知天气 API,获取当前温度、体感温度、气象状况和空气质量。空气"优"时显示绿色,“良"是黄色,有污染时会变成红色提醒你。
- NTP 网络对时 ⏱️:自动同步阿里云时间服务器,秒数准确,不用担心走偏。
- 动态细节 🎬:时间区秒数单独用红色大字跳动;右下角太空人有两帧动画,每秒切换一次,看起来像在呼吸。
- 排版自适应 📐:界面元素会根据文字长度自动调整位置,避免遮挡。
🔧 开始制作:软件准备
推荐用 VS Code + PlatformIO 开发环境,库管理和烧录都很省心。
- 克隆项目 📥:
git clone https://github.com/guitarliu/Maodou-Clock.git - 在 PlatformIO 中打开项目,它会自动下载所需库。
- 因为中文字库较大,确保
platformio.ini里已经配置了大分区 📏:board_build.partitions = huge_app.csv - 修改
src/main.cpp里的两处配置,换成你自己的 🔑:const String apiKey = "你的心知天气私钥"; const String location = "shenzhen"; // 城市拼音,小写 - 连接好开发板,点击上传箭头,固件开始烧录 🔥。屏幕会亮起并显示"正在检查网络……"。
📱 一键配网
如果周围没有它记住的 Wi‑Fi,屏幕会进入配网模式并显示提示文字。
- 手机 Wi‑Fi 设置里找到
Maodou-Clock-Setup热点(无密码),连接。 - 通常会弹出配置页面,如果没有,请浏览器访问
192.168.4.1。 - 点击 Configure WiFi,选择你家网络,输入密码,保存。
- 时钟自动重启,出现"网络已连接!“和 IP 地址后,很快就进入天气时钟界面 ✅。
之后只要不断电,它都会自己连上网络,安静工作。
💡 代码里几个有趣的地方
- 天气图标自动匹配 🌤️🌧️❄️:程序会判断天气文本里是否包含"雨"“雪"“云"等字,然后显示对应的像素图标,晴天小太阳、阴天小云朵,非常直观。
- 太空人小动画 👨🚀:用了一个布尔变量每秒翻转,在两个帧位图之间切换,仅需几行代码就实现了眨眼般的效果。
- 进度条 📊:把温度映射到0-40℃范围、湿度映射到0-100%,用彩色长条绘制,既好看又直观。
- 只擦改变化部分 🎯:刷新界面时并不会整屏重绘,而是只擦除需要更新的区域,这样画面稳定不闪烁。
完整源码在 GitHub 上,欢迎取用和修改 🚀。
🏠 给裸板找个家
虽然没有设计 3D 打印外壳,但裸板也有裸板的美感。最常见的做法是:找一个手机支架或平板支架,把屏幕和开发板背靠背贴好,藏住线材;或者干脆用积木搭个小框子,把核心板卡进去。只要稳固、背面通风就行。
❓ 遇到问题了?
- 屏幕不亮 💡:检查背光 BLK 有没有接 3.3V,以及 SPI 线序是否对。
- 中文显示异常 🔤:确保代码里使用了 U8g2 的中文字体,如
u8g2_font_wqy12_t_gb2312。 - 配网后仍无法上网 🌐:看看路由器是否隐藏了 SSID 或开启了 MAC 过滤。
- 天气数据出不来 ☁️:核实心知天气 API 的免费调用额度是否用尽,城市拼音是否无误。
🫘 写在最后
这个时钟是我在几个安静的晚上打磨出来的,从最开始的"能跑就行"逐渐变成越来越顺眼的样子。它静静立在桌上,既不吵也不闹,却悄悄把时间和天气都打理好了。如果你也喜欢这种小小的陪伴感,不妨亲自动手做一个。
项目全部开源,欢迎访问:
🪐 GitHub: https://github.com/guitarliu/Maodou-Clock
🌐 我的小站: https://maudou.pages.dev
如果这个"毛豆"让你觉得有趣,给它一颗 ⭐️ Star 就是最好的鼓励 🫶。