1. 项目缘起与整体设计思路1.1 为什么选择小尺寸彩屏做翻页时钟翻页时钟这个东西玩嵌入式的人多多少少都动过心思。机械翻页结构复杂、噪音大、零件磨损快做出来好看但维护成本高。用彩屏模拟翻页效果既保留了那种复古的视觉冲击力又省去了机械结构的麻烦。我前后做过三版第一版用Arduino Uno加2.4寸TFT第二版换ESP32加2.8寸IPS第三版定型在ESP32-C3配1.69寸圆角彩屏体积缩到巴掌大放在桌面上刚刚好。选小尺寸彩屏有几个实际考量。桌面空间有限3.5寸以上的屏幕放桌上显得笨重1.5到2寸的屏幕配合合适的边框整体尺寸能控制在6厘米以内。功耗方面小屏背光电流通常在20到40毫安比大屏省不少用USB供电或者小容量锂电池都能撑住。分辨率上240×280或者240×320这个级别足够显示时分秒翻页动画也不会因为像素太多而卡顿。核心需求其实就三条走时准、翻页动画流畅、外观简洁。走时准靠ESP32的WiFi对时或者外接RTC模块翻页流畅靠TFT_eSPI库的Sprite双缓冲机制外观简洁靠合理的UI布局和外壳设计。这三条听起来简单实际做的时候每一块都有坑。1.2 硬件选型背后的取舍逻辑主控选ESP32而不是Arduino Uno原因很直接。Uno的SRAM只有2KB驱动彩屏做全屏刷新根本不够用更别说双缓冲了。ESP32有520KB SRAM随便划一块240×280×2字节的缓冲区也就134KB还剩一大半给程序跑。另外ESP32自带WiFiNTP对时不需要额外模块省了硬件成本和接线麻烦。屏幕我试过好几款。ILI9341驱动芯片的2.4寸屏最便宜但可视角度一般斜着看偏色明显。ST7789驱动的1.69寸IPS屏贵一些但色彩和可视角度好很多而且圆角设计不用自己切外壳。最终选了ST7789240×280分辨率SPI接口接线简单。电源部分如果用USB供电就直接从开发板的5V取电屏幕背光串一个33欧姆电阻限流。如果要便携加一块3.7V锂电池和TP4056充电模块升压到5V给屏幕和主控供电。实测整机工作电流在80到120毫安之间1000毫安时的电池能撑8小时左右。注意ESP32的GPIO输出电流有限屏幕背光不要直接接GPIO必须通过三极管或者MOS管驱动否则烧引脚是迟早的事。1.3 软件框架的搭建思路软件层面我用了Arduino框架没上ESP-IDF。原因很简单TFT_eSPI库在Arduino下成熟稳定翻页动画的Sprite功能开箱即用ESP-IDF下虽然也能跑LVGL但配置复杂度高不少对于这种小项目没必要。整体软件架构分三层。底层是硬件驱动层负责屏幕初始化、SPI通信、RTC读写。中间是逻辑层处理时间获取、翻页状态机、动画帧计算。上层是UI层管理数字的绘制、颜色方案、过渡效果。三层之间通过简单的函数调用和全局状态变量通信没有上RTOS因为任务不复杂一个主循环加定时器中断就够了。翻页动画的核心思路是把每个数字拆成上下两半上半部分向下翻转下半部分向上翻转中间用渐变和阴影模拟立体感。具体实现时每个数字用两个Sprite一个存上半部分一个存下半部分翻转过程中动态计算每个像素的Y轴偏移和亮度衰减。这部分后面会详细展开。2. 核心细节解析与实操要点2.1 屏幕驱动与SPI通信配置ST7789这块屏用SPI接口接线就那几根SCLK、MOSI、CS、DC、RST、BLK。ESP32的硬件SPI引脚可以映射到任意GPIO但为了稳定我固定在VSPI上SCLK接GPIO18MOSI接GPIO23CS接GPIO15DC接GPIO2RST接GPIO4BLK接GPIO5。接线尽量短超过10厘米就容易出现花屏或者刷新撕裂。TFT_eSPI库的配置在User_Setup.h文件里改不用动库源码。关键配置项如下#define ST7789_DRIVER #define TFT_WIDTH 240 #define TFT_HEIGHT 280 #define TFT_MOSI 23 #define TFT_SCLK 18 #define TFT_CS 15 #define TFT_DC 2 #define TFT_RST 4 #define TFT_BL 5 #define LOAD_GLCD #define SPI_FREQUENCY 40000000SPI频率设40MHz实测下来很稳再高到80MHz会出现偶发花屏。如果你的接线比较长或者用了杜邦线建议降到20MHz先跑通再往上调。提示TFT_eSPI库的User_Setup.h每次更新库都会被覆盖建议把配置单独放到User_Setup_Select.h里引用自定义文件或者直接备份一份。初始化流程没什么特别的tft.init()之后设置旋转方向、填充黑屏、打开背光。这里有个细节背光打开前先填黑屏否则会闪一下白屏观感很差。2.2 时间获取方案NTP与RTC双保险时间源我用了两套。主用NTPESP32连上WiFi后向pool.ntp.org请求时间同步到内部RTC。备用是DS3231外部RTC模块I2C接口精度比ESP32内部RTC高一个数量级。为什么两套都要因为WiFi不是每次都连得上尤其是路由器重启或者密码改了之后没有外部RTC的话时间就丢了重新对时又得等WiFi。NTP对时的代码用configTime函数设置时区和NTP服务器configTime(8 * 3600, 0, pool.ntp.org, time.nist.gov); struct tm timeinfo; if (getLocalTime(timeinfo)) { // 同步到DS3231 rtc.adjust(DateTime(timeinfo.tm_year 1900, timeinfo.tm_mon 1, timeinfo.tm_mday, timeinfo.tm_hour, timeinfo.tm_min, timeinfo.tm_sec)); }DS3231的读写用RTClib库I2C地址0x68SDA接GPIO21SCL接GPIO22。DS3231自带温度补偿晶振年误差在2分钟以内比ESP32内部RTC的精度好太多。ESP32内部RTC在断电后完全丢失DS3231有纽扣电池断电也能走。实际运行逻辑是开机先读DS3231如果时间有效就直接用然后尝试连WiFi连上了就NTP对时并写回DS3231连不上就继续用DS3231的时间。这样无论有没有网络时间都不会差太多。2.3 翻页动画的Sprite双缓冲实现翻页动画是这个小项目的灵魂也是最耗内存和CPU的部分。TFT_eSPI的Sprite机制允许你在内存里画好一整帧然后一次性推送到屏幕避免闪烁。每个数字我用了两个Sprite分别存上半部分和下半部分尺寸是60×80像素16位色深每个Sprite占60×80×29600字节两个就是19.2KB。六个数字时分秒各两位一共12个Sprite总共230KB左右ESP32的520KB SRAM扛得住。动画的数学原理不复杂。假设翻转角度从0度到180度上半部分绕底边旋转下半部分绕顶边旋转。对于上半部分Y轴缩放系数是cos(角度)当角度从0到90度时cos从1到0上半部分逐渐压扁下半部分同理但方向相反。同时亮度随角度衰减模拟光照变化。float angle progress * PI; // 0到PI float scaleY cos(angle); uint8_t brightness 255 * (1.0 - progress * 0.7);实际绘制时不是真的做3D旋转而是逐行扫描原Sprite根据scaleY计算目标行然后写入新Sprite。这个过程用pushImage和自定义的像素操作函数实现。为了性能我只在动画帧变化时重绘静止时直接显示静态SpriteCPU占用率从40%降到5%以下。注意Sprite数量多的时候内存碎片是个问题建议在setup里一次性创建所有Sprite不要动态创建销毁否则跑几个小时就可能因为内存碎片崩溃。2.4 颜色方案与UI布局颜色方案我试过好几套。纯白数字配黑底最经典但看久了单调。后来改成渐变蓝到紫配合深灰背景晚上看着不刺眼。数字用抗锯齿字体TFT_eSPI自带FreeFonts选FreeSansBold24pt显示效果比默认字体好很多。布局上时分秒三组数字横向排列中间用冒号分隔。冒号用两个小圆点每秒闪烁一次。屏幕顶部留一条细线显示日期和星期底部留一条显示WiFi状态和电池电量。整体留白要够数字不要顶到屏幕边缘否则外壳一装就遮住了。字体大小根据屏幕分辨率调。240×280的屏数字高度80像素宽度60像素三组数字加两个冒号总共60×620×2400像素超了。所以要么缩小数字要么改成两行显示。我最后选了上下两行上面一行显示时和分下面一行显示秒和日期。这样每个数字可以做到80×100像素视觉冲击力更强。3. 实操过程与核心环节实现3.1 硬件焊接与组装步骤焊接顺序很重要先低后高先小后大。第一步焊ESP32开发板的排针注意方向不要焊反。第二步焊屏幕的FPC座或者排针ST7789模块通常已经焊好了排针直接插杜邦线就行。第三步焊DS3231模块的排针。第四步焊TP4056充电模块和电池座。如果要做便携版电池用603048规格的1000mAh锂电池尺寸刚好塞进3D打印外壳。充电模块的B和B-接电池OUT和OUT-接升压模块或者直接接ESP32的5V引脚ESP32开发板自带LDO3.7V输入也能工作但屏幕背光可能偏暗。外壳我用Fusion 360画的屏幕开窗尺寸比可视区域大0.5毫米避免装配误差导致遮边。后盖留了USB开口和几个散热孔。3D打印用PETG材料比PLA耐温好一些夏天不容易变形。提示焊接FPC座的时候烙铁温度不要超过350度接触时间不要超过3秒否则塑料座子会熔化。3.2 软件环境搭建与库安装Arduino IDE我用的是2.3.2版本ESP32开发板支持包用 Boards Manager 安装选 esp32 by Espressif Systems版本2.0.14。这个版本比较稳定3.0以上的版本API有变动TFT_eSPI可能不兼容。需要安装的库TFT_eSPI最新版RTClib by AdafruitWiFiESP32自带time.hESP32自带安装完TFT_eSPI后找到库目录下的User_Setup.h按照前面说的配置改好。然后编译一个简单的测试程序确认屏幕能点亮、能显示颜色。这一步不过后面都白搭。测试代码#include TFT_eSPI.h TFT_eSPI tft TFT_eSPI(); void setup() { tft.init(); tft.setRotation(0); tft.fillScreen(TFT_BLACK); tft.setTextColor(TFT_WHITE); tft.setTextSize(2); tft.setCursor(20, 100); tft.println(Hello TFT); } void loop() {}如果屏幕显示Hello TFT说明SPI通信和驱动配置都对了。如果花屏或者白屏先检查接线再降SPI频率最后检查User_Setup.h的引脚定义。3.3 翻页动画的完整代码实现翻页动画的核心函数是drawFlipDigit接收数字、位置、进度三个参数。内部逻辑分四步读取当前数字的Sprite、计算翻转缩放、生成中间帧、推送到屏幕。void drawFlipDigit(int digit, int x, int y, float progress) { // 上半部分 float scaleTop cos(progress * PI); int topHeight 40 * abs(scaleTop); for (int row 0; row topHeight; row) { int srcRow row / abs(scaleTop); for (int col 0; col 60; col) { uint16_t color topSprite[digit].readPixel(col, srcRow); uint8_t r (color 11) 0x1F; uint8_t g (color 5) 0x3F; uint8_t b color 0x1F; float bright 1.0 - progress * 0.7; r * bright; g * bright; b * bright; uint16_t newColor (r 11) | (g 5) | b; tft.drawPixel(x col, y row, newColor); } } // 下半部分同理方向相反 }实际跑的时候每帧计算量不小240×280的屏幕全屏刷新一次大概需要15毫秒翻页动画持续300毫秒大概20帧每帧15毫秒总共300毫秒刚好匹配。如果觉得卡可以降低帧数到15帧或者只刷新变化的区域。注意readPixel和drawPixel是逐像素操作速度慢。优化方法是直接用pushImage推送整块区域但需要提前把缩放后的图像画到临时Sprite里。我实测下来逐像素在ESP32上跑20帧没问题CPU占用率在60%左右不影响WiFi和RTC任务。3.4 WiFi对时与断网处理WiFi连接用ESP32的WiFi库设置自动重连。连接成功后启动NTP对时对时成功写回DS3231。断网后不阻塞主循环继续用DS3231的时间走。void connectWiFi() { WiFi.begin(ssid, password); unsigned long start millis(); while (WiFi.status() ! WL_CONNECTED millis() - start 10000) { delay(100); } if (WiFi.status() WL_CONNECTED) { configTime(8 * 3600, 0, pool.ntp.org); struct tm timeinfo; if (getLocalTime(timeinfo)) { rtc.adjust(DateTime(timeinfo.tm_year 1900, timeinfo.tm_mon 1, timeinfo.tm_mday, timeinfo.tm_hour, timeinfo.tm_min, timeinfo.tm_sec)); } } }断网检测用WiFi.status()每30秒检查一次断了就重连。重连失败不报错静默重试。屏幕上的WiFi图标根据状态显示不同颜色连上是绿色断开是灰色。3.5 电源管理与低功耗优化如果做便携版功耗要抠一抠。ESP32的WiFi是耗电大户连上WiFi后平均电流在80毫安左右断开WiFi能降到40毫安。屏幕背光是第二大耗电20毫安左右。我的策略是插USB时全速运行WiFi常开用电池时关闭WiFi只靠DS3231走时背光亮度降到50%。低功耗模式下ESP32可以进light sleep但翻页动画需要持续刷新没法睡太深。折中方案是降低CPU频率到80MHz关闭蓝牙WiFi按需开启。实测电池模式下整机电流在50毫安左右1000mAh电池能撑20小时。提示ESP32的light sleep唤醒后SPI需要重新初始化否则屏幕不亮。如果要用light sleep记得在唤醒后调用tft.init()。4. 常见问题与排查技巧实录4.1 屏幕花屏与刷新撕裂排查花屏是最常见的问题原因通常有三个SPI频率太高、接线太长、电源不稳。排查顺序是先降SPI频率到10MHz如果花屏消失说明是频率问题逐步往上调找到稳定上限。如果还花检查接线尤其是SCLK和MOSI尽量短且远离电源线。最后检查电源屏幕的VCC和GND要直接接到开发板的5V和GND不要经过面包板。刷新撕裂是另一个烦人的问题。现象是翻页动画中间出现一条横线上下半部分不同步。原因是SPI传输和屏幕刷新不同步。解决办法是用TFT_eSPI的DMA功能开启DMA后SPI传输不占用CPU撕裂基本消失。在User_Setup.h里加#define USE_DMA4.2 WiFi连接不稳定与NTP对时失败WiFi连不上的原因很多最常见的是2.4G和5G混用。ESP32只支持2.4G如果路由器开了双频合一ESP32可能连到5G频段导致失败。解决办法是在路由器里把2.4G和5G分开ESP32连2.4G的SSID。NTP对时失败通常是DNS问题。configTime默认用pool.ntp.org如果DNS解析不了对时就会超时。可以换成IP地址比如120.25.115.20阿里NTP服务器绕过DNS。另外注意时区设置8*3600是东八区如果你在其他时区改这个值。4.3 翻页动画卡顿与内存不足动画卡顿一般是内存不够或者CPU被占用。先检查Sprite数量如果超过15个考虑减少到只缓存当前显示的数字其他数字用静态绘制。再检查loop里有没有delaydelay会阻塞动画刷新用millis做非阻塞定时。内存不足的表现是程序跑一段时间后重启或者Sprite创建失败。ESP32的堆内存碎片化是常见问题解决办法是启动时一次性分配所有Sprite不要动态创建。另外可以用heap_caps_print_heap_info查看内存状态确认没有泄漏。4.4 常见问题速查表问题现象可能原因排查方法解决方案屏幕白屏背光未开或SPI未初始化检查BLK引脚电平拉高BLK确认tft.init()被调用屏幕花屏SPI频率过高降到10MHz测试逐步调整到稳定频率颜色偏色颜色格式不匹配检查TFT_RGB_ORDER改为TFT_BGR或TFT_RGBWiFi连不上频段不匹配查看路由器频段分开2.4G和5G连2.4GNTP对时失败DNS解析问题ping NTP服务器换IP地址或换服务器动画卡顿内存不足或CPU占用高查看堆内存减少Sprite关DMA时间走不准内部RTC精度差对比DS3231用DS3231作为主时间源电池续航短WiFi和背光耗电测电流关WiFi降背光亮度4.5 独家避坑经验分享第一个坑是TFT_eSPI的版本兼容性。我一开始用最新版库配ESP32 3.0.0编译报错一堆后来降到ESP32 2.0.14加TFT_eSPI 2.5.0才跑通。所以版本锁定很重要不要盲目追新。第二个坑是DS3231的I2C地址。有些模块默认地址是0x68但有些是0x57买回来先用I2C扫描程序确认地址不然读出来全是0。第三个坑是电池供电时的电压跌落。锂电池从4.2V放到3.3V的过程中ESP32的LDO输出会跟着降屏幕背光会变暗甚至闪烁。解决办法是加一个升压模块稳定输出5V或者用带LDO的充电模块。第四个坑是外壳装配公差。3D打印的尺寸和屏幕实际尺寸总有0.2到0.5毫米的误差开窗一定要留余量宁可大一点用黑胶带遮边也不要小了装不进去。第五个坑是翻页动画的亮度衰减。一开始我用线性衰减看起来不自然后来改成指数衰减视觉上更接近真实翻页的光影变化。这个细节调了十几版才满意。5. 功能扩展与个性化定制5.1 添加温湿度显示DS3231自带温度传感器精度±3度虽然不算高但显示个大概够用。在屏幕底部加一行小字显示温度代码就几行float temp rtc.getTemperature(); tft.setCursor(10, 260); tft.printf(%.1fC, temp);如果要更准加一个SHT30或者DHT22I2C接口精度±0.3度。SHT30比DHT22贵一点但更稳DHT22便宜但响应慢。5.2 自定义颜色主题与字体颜色主题我做了三套经典黑白、渐变蓝紫、暖色橙红。切换方式是在设置里改一个全局变量或者加一个按键循环切换。字体方面TFT_eSPI支持自定义字体可以用在线工具把TTF转成C数组然后替换默认字体。我试过用思源黑体显示效果比FreeSans好但占内存多240×280的屏用24pt字体一个字符大概2KB六个数字12KB还能接受。5.3 加装物理按键与触摸控制物理按键最简单接一个轻触开关到GPIO用中断检测按下切换显示模式或者手动对时。触摸屏的话ST7789本身不带触摸需要加一个电容触摸模块I2C接口成本增加20块左右。触摸控制可以做滑动切换主题、点击对时但代码复杂度上升不少看个人需求。5.4 联网天气与日程显示ESP32连上WiFi后可以请求天气API比如心知天气或者和风天气解析JSON获取当前温度和天气状况显示在屏幕顶部。日程显示可以接Google Calendar或者本地iCal文件解析后显示最近一个事件。这部分代码量不小但网上有现成的Arduino JSON库和HTTPClient库拼起来就行。5.5 外壳个性化与桌面搭配外壳除了3D打印也可以用亚克力板激光切割成本更低但精度差一些。颜色上黑色外壳配彩色屏幕最百搭白色外壳适合浅色桌面。底座可以加一个倾斜角度15度左右看着最舒服。如果放在床头加一个光敏电阻自动调背光亮度晚上不刺眼。我个人在实际操作中的体会是这个小项目看起来简单但每个环节都有细节要抠。屏幕驱动、时间同步、动画渲染、电源管理每一块单独拿出来都不难但组合在一起就会互相影响。比如WiFi开启时SPI通信会受干扰翻页动画的CPU占用会影响NTP对时的响应速度。解决这些问题的过程其实就是嵌入式开发最核心的能力——在资源受限的条件下做权衡。你不可能让所有指标都最优只能根据实际场景决定哪个指标优先。桌面时钟的场景下走时准和视觉效果好是刚需WiFi和低功耗可以妥协。想清楚这个优先级很多设计决策就自然清晰了。
