在实际嵌入式开发中很多人学完基础 GPIO 控制后想做一个能长期运行、有实用价值的小项目却不知道如何把屏幕驱动、时间获取、界面刷新这些模块串起来。手戳一个彩屏翻页时钟正好能覆盖从硬件选型、环境搭建、驱动调试到功能迭代的全流程而且最终成果可以放在桌面实际使用成就感比单纯点灯高得多。这个小项目特别适合已经掌握单片机基本操作想进阶学习 SPI 屏幕驱动、RTC 时间处理、多任务调度和低功耗优化的开发者。本文将基于 STM32 和 1.54 英寸 IPS 彩屏完整实现一个支持 WiFi 自动对时、多主题切换的翻页时钟并重点解释如何解决屏幕撕裂、功耗控制和网络对时稳定性这些实际工程问题。1. 硬件选型与环境搭建1.1 核心硬件清单与连接方式翻页时钟对实时性要求不高但需要长时间稳定运行所以主控选择 STM32F103C8T6 这类基础型号就足够。屏幕方面小尺寸 IPS 彩屏在视角和色彩上比 TFT 更有优势1.54 英寸分辨率 240x240 的屏幕适合显示时钟信息且价格适中。关键硬件连接关系如下硬件模块型号示例接口方式关键参数主控芯片STM32F103C8T6-72MHz, 64KB Flash, 20KB RAM显示屏1.54 IPS (ST7789V)SPI240x240, 16位色, 4-wire SPIRTC 时钟芯片内置 RTC-需外接 32.768kHz 晶振WiFi 模块ESP-01SUART支持 AT 指令, 用于 NTP 对时电源AMS1117-3.3-5V 转 3.3V, 最大电流 1ASPI 屏幕接线要特别注意电源顺序错误的上电顺序可能烧毁屏幕。推荐连接顺序先连接 GND确保共地再连接 3.3V 电源线最后连接信号线SCK、MOSI、DC、RST、CS实际项目中SPI 的时钟频率不要一开始就设到最高先使用 10MHz 左右测试稳定性再逐步提高。STM32 的 SPI 时钟配置需要根据主频分频计算常见配置如下// SPI 初始化片段 (HAL 库) hspi1.Instance SPI1; hspi1.Init.Mode SPI_MODE_MASTER; hspi1.Init.Direction SPI_DIRECTION_2LINES; hspi1.Init.DataSize SPI_DATASIZE_8BIT; hspi1.Init.CLKPolarity SPI_POLARITY_LOW; // 根据屏幕数据手册确定 hspi1.Init.CLKPhase SPI_PHASE_1EDGE; // 根据屏幕数据手册确定 hspi1.Init.NSS SPI_NSS_SOFT; hspi1.Init.BaudRatePrescaler SPI_BAUDRATEPRESCALER_8; // 9MHz 72MHz hspi1.Init.FirstBit SPI_FIRSTBIT_MSB; hspi1.Init.TIMode SPI_TIMODE_DISABLE; hspi1.Init.CRCCalculation SPI_CRCCALCULATION_DISABLE; hspi1.Init.CRCPolynomial 10;1.2 开发环境与工程配置使用 STM32CubeIDE 创建工程时需要正确配置几个关键点首先通过图形化工具开启 SPI1 和 USART2用于 WiFi 模块并分配引脚。RTC 需要开启外部低速晶振LSE并在 RTC 配置中开启日历功能。时钟树配置要保证HCLK 72MHzPCLK1 36MHzAPB1 外设包括 SPI1LSE 32.768kHzRTC 时钟源工程中的头文件路径需要包含屏幕驱动和字体文件目录。建议的目录结构Project/ ├── Core/ │ ├── Src/ │ │ ├── main.c │ │ ├── stm32f1xx_it.c │ │ └── spi.c │ └── Inc/ │ ├── main.h │ └── spi.h ├── Drivers/ │ └── STM32F1xx_HAL_Driver/ ├── Display/ │ ├── st7789.c/h // 屏幕驱动 │ ├── fonts.c/h // 字库 │ └── ui.c/h // 界面逻辑 ├── WiFi/ │ └── esp01s.c/h // WiFi 模块控制 └── Utilities/ └── ntp.c/h // NTP 时间处理在main.h中需要定义屏幕尺寸和关键颜色值便于全局使用#define DISP_WIDTH 240 #define DISP_HEIGHT 240 // 16位RGB565颜色定义 #define COLOR_BLACK 0x0000 #define COLOR_WHITE 0xFFFF #define COLOR_RED 0xF800 #define COLOR_GREEN 0x07E0 #define COLOR_BLUE 0x001F #define COLOR_GRAY 0x84102. 屏幕驱动与基础显示2.1 ST7789V 驱动实现小尺寸彩屏通常使用 ST7789V 或类似驱动芯片通信协议是 4-wire SPI。驱动代码需要实现初始化序列设置、显存写入和基础绘图函数。初始化序列要严格按照数据手册的时序要求特别是上电复位和睡眠模式退出之间的延时// 屏幕初始化函数 void ST7789_Init(void) { // 硬件复位 ST7789_RST_Low(); HAL_Delay(100); ST7789_RST_High(); HAL_Delay(100); // 退出睡眠模式 ST7789_WriteCommand(0x11); HAL_Delay(120); // 颜色格式设置16位RGB565 ST7789_WriteCommand(0x3A); ST7789_WriteData(0x55); HAL_Delay(10); // 显示开启 ST7789_WriteCommand(0x29); HAL_Delay(100); // 设置显示方向0°、90°、180°、270° ST7789_SetRotation(0); }设置显示区域函数是关键它告诉驱动芯片接下来要写入的显存范围void ST7789_SetAddressWindow(uint16_t x0, uint16_t y0, uint16_t x1, uint16_t y1) { // 列地址设置 ST7789_WriteCommand(0x2A); ST7789_WriteData(x0 8); ST7789_WriteData(x0 0xFF); ST7789_WriteData(x1 8); ST7789_WriteData(x1 0xFF); // 行地址设置 ST7789_WriteCommand(0x2B); ST7789_WriteData(y0 8); ST7789_WriteData(y0 0xFF); ST7789_WriteData(y1 8); ST7789_WriteData(y1 0xFF); // 开始内存写入 ST7789_WriteCommand(0x2C); }2.2 绘图函数与字体显示有了基础驱动后需要实现点、线、矩形、圆形等基本绘图函数以及字符和字符串显示函数。绘制单个像素的函数最简单但直接频繁调用效率很低实际使用时应该批量写入void ST7789_DrawPixel(uint16_t x, uint16_t y, uint16_t color) { if ((x DISP_WIDTH) || (y DISP_HEIGHT)) return; ST7789_SetAddressWindow(x, y, x, y); ST7789_WriteData(color 8); ST7789_WriteData(color 0xFF); }显示字符需要先定义字模数据。对于时钟项目需要大尺寸数字显示可以提取 48x72 像素的数字字模// 字符显示函数 void ST7789_DrawChar(uint16_t x, uint16_t y, char ch, FontDef font, uint16_t color, uint16_t bgcolor) { uint32_t i, b, j; // 检查位置是否有效 if (x DISP_WIDTH || y DISP_HEIGHT) return; // 遍历字模的每个字节 for (i 0; i font.height; i) { b font.data[(ch - 32) * font.height i]; for (j 0; j font.width; j) { if ((b j) 0x8000) { ST7789_DrawPixel(x j, y i, color); } else if (bgcolor ! color) { ST7789_DrawPixel(x j, y i, bgcolor); } } } }实际显示时间时直接调用字符串显示函数更高效void Display_Time(uint8_t hour, uint8_t minute, uint8_t second) { char time_str[9]; sprintf(time_str, %02d:%02d:%02d, hour, minute, second); // 清屏或局部刷新 ST7789_FillScreen(COLOR_BLACK); // 显示时间字符串居中显示 ST7789_DrawString(40, 80, time_str, Font_48x72, COLOR_WHITE, COLOR_BLACK); }3. 时间管理与翻页效果3.1 RTC 配置与时间维护STM32 内置的 RTC 模块需要正确配置才能保证时间准确性。关键配置点包括时钟源选择、预分频器和日历寄存器设置// RTC 初始化 void RTC_Init(void) { RTC_TimeTypeDef sTime {0}; RTC_DateTypeDef sDate {0}; // 配置时间格式24小时制 sTime.Hours 12; sTime.Minutes 0; sTime.Seconds 0; sTime.DayLightSaving RTC_DAYLIGHTSAVING_NONE; sTime.StoreOperation RTC_STOREOPERATION_RESET; // 设置日期实际项目中应从 NTP 获取 sDate.WeekDay RTC_WEEKDAY_MONDAY; sDate.Month RTC_MONTH_JANUARY; sDate.Date 1; sDate.Year 23; // 写入初始时间 HAL_RTC_SetTime(hrtc, sTime, RTC_FORMAT_BIN); HAL_RTC_SetDate(hrtc, sDate, RTC_FORMAT_BIN); }读取当前时间的函数需要处理 BCD 码转换void Get_CurrentTime(uint8_t *hour, uint8_t *minute, uint8_t *second) { RTC_TimeTypeDef sTime {0}; RTC_DateTypeDef sDate {0}; HAL_RTC_GetTime(hrtc, sTime, RTC_FORMAT_BIN); HAL_RTC_GetDate(hrtc, sDate, RTC_FORMAT_BIN); *hour sTime.Hours; *minute sTime.Minutes; *second sTime.Seconds; }3.2 翻页动画实现原理翻页效果的本质是视觉欺骗通过连续绘制不同状态的帧模拟纸张翻动的过程。对于数字时钟可以分解为上半部分下落和下半部分上升的动画。以分钟数字变化为例翻页动画需要 10-15 帧完成每帧间隔 30-50ms// 数字翻页动画 void FlipAnimation(uint8_t old_num, uint8_t new_num, uint16_t x, uint16_t y) { uint8_t frame; uint16_t offset; for (frame 0; frame 12; frame) { // 清空动画区域 ST7789_FillRect(x, y, 48, 72, COLOR_BLACK); // 计算当前帧的偏移量缓动函数 offset easeOutCubic(frame, 0, 36, 12); // 绘制上半部分旧数字下落 if (offset 36) { ST7789_DrawCharPartial(x, y offset, old_num 0, Font_48x72, 0, 36 - offset, COLOR_WHITE, COLOR_BLACK); } // 绘制下半部分新数字上升 if (offset 0) { ST7789_DrawCharPartial(x, y offset, new_num 0, Font_48x72, 36 - offset, 36, COLOR_WHITE, COLOR_BLACK); } HAL_Delay(40); // 25fps 动画 } // 动画结束后完整显示新数字 ST7789_DrawChar(x, y, new_num 0, Font_48x72, COLOR_WHITE, COLOR_BLACK); }其中easeOutCubic是缓动函数让动画有先快后慢的自然效果// 缓动函数三次方缓出 uint16_t easeOutCubic(uint8_t t, uint16_t b, uint16_t c, uint8_t d) { t (t d) ? d : t; float t_normalized (float)t / d; float t_eased 1 - pow(1 - t_normalized, 3); return b c * t_eased; }部分字符绘制函数需要实现用于只绘制字符的指定区域void ST7789_DrawCharPartial(uint16_t x, uint16_t y, char ch, FontDef font, uint16_t start_y, uint16_t height, uint16_t color, uint16_t bgcolor) { uint32_t i, b, j; uint16_t draw_y; for (i start_y; i start_y height; i) { if (i font.height) break; b font.data[(ch - 32) * font.height i]; for (j 0; j font.width; j) { draw_y y i - start_y; if ((b j) 0x8000) { ST7789_DrawPixel(x j, draw_y, color); } else if (bgcolor ! color) { ST7789_DrawPixel(x j, draw_y, bgcolor); } } } }3.3 多任务调度与时间同步时钟项目需要处理多个任务显示刷新、动画播放、按键检测、网络对时等。简单的状态机调度比 RTOS 更节省资源typedef enum { TASK_DISPLAY 0, TASK_ANIMATION, TASK_BUTTON, TASK_NTP_SYNC, TASK_MAX } TaskType; typedef struct { uint32_t last_run; uint32_t interval; void (*function)(void); } TaskStruct; TaskStruct tasks[TASK_MAX] { {0, 1000, Display_Task}, // 1秒刷新显示 {0, 40, Animation_Task}, // 25fps 动画 {0, 50, Button_Task}, // 20Hz 按键检测 {0, 3600000, NTPSync_Task}, // 1小时对时一次 }; void Scheduler_Run(void) { uint32_t current_time HAL_GetTick(); uint8_t i; for (i 0; i TASK_MAX; i) { if (current_time - tasks[i].last_run tasks[i].interval) { tasks[i].function(); tasks[i].last_run current_time; } } }在主循环中调用调度器while (1) { Scheduler_Run(); // 其他低优先级任务 HAL_Delay(1); // 防止忙等待 }4. WiFi 对时与数据持久化4.1 ESP-01S 模块的 NTP 对时通过 WiFi 模块获取网络时间可以保证时钟长期准确性。ESP-01S 通过 AT 指令与 STM32 通信需要实现完整的 NTP 协议处理。首先建立 TCP 连接到 NTP 服务器bool ESP01S_ConnectNTP(void) { char cmd[64]; // 设置 WiFi 模式 if (!ESP01S_SendCommand(ATCWMODE1, OK, 3000)) return false; // 连接 WiFi snprintf(cmd, sizeof(cmd), ATCWJAP\%s\,\%s\, WIFI_SSID, WIFI_PASSWORD); if (!ESP01S_SendCommand(cmd, OK, 10000)) return false; // 建立 TCP 连接 if (!ESP01S_SendCommand(ATCIPSTART\TCP\,\cn.pool.ntp.org\,123, CONNECT, 5000)) return false; return true; }发送 NTP 请求并解析响应bool NTP_GetTime(uint32_t *timestamp) { uint8_t ntp_packet[48] {0}; uint8_t response[48] {0}; char cmd[32]; // 构造 NTP 请求包 ntp_packet[0] 0x1B; // LI0, VN3, Mode3 // 发送数据 snprintf(cmd, sizeof(cmd), ATCIPSEND%d, sizeof(ntp_packet)); if (!ESP01S_SendCommand(cmd, , 1000)) return false; if (!ESP01S_SendData(ntp_packet, sizeof(ntp_packet), SEND OK, 2000)) return false; // 接收响应 if (!ESP01S_ReceiveData(response, sizeof(response), 2000)) return false; // 解析时间戳从第40字节开始 *timestamp (response[40] 24) | (response[41] 16) | (response[42] 8) | response[43]; *timestamp - 2208988800UL; // NTP 时间戳转 Unix 时间戳 return true; }将 Unix 时间戳转换为 RTC 时间void TimestampToRTC(uint32_t timestamp) { RTC_TimeTypeDef sTime {0}; RTC_DateTypeDef sDate {0}; struct tm *timeinfo; time_t t timestamp; timeinfo localtime(t); sTime.Hours timeinfo-tm_hour; sTime.Minutes timeinfo-tm_min; sTime.Seconds timeinfo-tm_sec; sDate.WeekDay timeinfo-tm_wday 1; // RTC 周日1,周一2... sDate.Month timeinfo-tm_mon 1; sDate.Date timeinfo-tm_mday; sDate.Year timeinfo-tm_year - 100; // 年份偏移 HAL_RTC_SetTime(hrtc, sTime, RTC_FORMAT_BIN); HAL_RTC_SetDate(hrtc, sDate, RTC_FORMAT_BIN); }4.2 配置数据存储与恢复时钟的配置信息如时区、主题颜色、亮度等需要掉电保存。STM32F103C8T6 没有 EEPROM可以使用 Flash 的最后一页模拟 EEPROM// Flash 写入前需要先擦除整个扇区 bool Config_Save(ClockConfig *config) { HAL_FLASH_Unlock(); // 擦除最后一页 (1KB) FLASH_EraseInitTypeDef erase; erase.TypeErase FLASH_TYPEERASE_PAGES; erase.PageAddress CONFIG_FLASH_ADDR; erase.NbPages 1; uint32_t page_error; if (HAL_FLASHEx_Erase(erase, page_error) ! HAL_OK) { HAL_FLASH_Lock(); return false; } // 写入配置数据 uint64_t *src (uint64_t*)config; for (int i 0; i sizeof(ClockConfig)/8; i) { if (HAL_FLASH_Program(FLASH_TYPEPROGRAM_DOUBLEWORD, CONFIG_FLASH_ADDR i*8, src[i]) ! HAL_OK) { HAL_FLASH_Lock(); return false; } } HAL_FLASH_Lock(); return true; } // 读取配置 bool Config_Load(ClockConfig *config) { uint32_t *src (uint32_t*)CONFIG_FLASH_ADDR; uint32_t *dst (uint32_t*)config; // 检查魔数判断配置是否有效 if (src[0] ! CONFIG_MAGIC) { return false; } for (int i 0; i sizeof(ClockConfig)/4; i) { dst[i] src[i]; } return true; }配置数据结构示例typedef struct { uint32_t magic; // 魔数 0xAA55AA55 uint8_t timezone; // 时区偏移 uint8_t brightness; // 屏幕亮度 uint8_t theme; // 主题索引 uint8_t flip_animation; // 翻页动画使能 uint32_t last_sync; // 最后对时时间戳 char ssid[32]; // WiFi SSID char password[32]; // WiFi 密码 } ClockConfig;5. 低功耗优化与稳定性保障5.1 屏幕刷新优化策略小尺寸彩屏的功耗主要来自背光和刷新操作。通过多种优化手段可以显著降低平均功耗动态刷新率调整在秒数不变时降低刷新频率void Display_Task(void) { static uint8_t last_second 255; uint8_t current_second; Get_CurrentTime(NULL, NULL, current_second); if (current_second ! last_second) { // 秒数变化全刷新 Display_FullRefresh(); last_second current_second; } else { // 秒数未变仅更新动画或局部刷新 Display_PartialRefresh(); } }背光 PWM 控制根据环境光自动调整亮度void Backlight_Adjust(uint8_t level) { // 使用 TIMER 产生 PWM 控制背光 __HAL_TIM_SET_COMPARE(htim3, TIM_CHANNEL_1, level); }局部刷新技术只更新变化区域void Display_PartialRefresh(void) { // 设置局部刷新区域只更新动画区域 ST7789_SetAddressWindow(anim_x, anim_y, anim_x anim_w, anim_y anim_h); // 只发送变化区域的数据 ST7789_WriteBuffer(anim_buffer, anim_w * anim_h * 2); }5.2 系统稳定性措施长期运行的时钟项目需要特别注意稳定性问题看门狗配置预防程序跑飞void Watchdog_Init(void) { hiwdg.Instance IWDG; hiwdg.Init.Prescaler IWDG_PRESCALER_256; // 约 1.6s 超时 hiwdg.Init.Reload 4095; hiwdg.Init.Window IWDG_WINDOW_DISABLE; HAL_IWDG_Init(hiwdg); } // 在主循环中喂狗 void Watchdog_Refresh(void) { HAL_IWDG_Refresh(hiwdg); }通信异常处理机制bool ESP01S_SendCommand(const char *cmd, const char *expect, uint32_t timeout) { uint32_t start_time HAL_GetTick(); uint8_t retry 0; while (retry 3) { UART_SendString(cmd); if (UART_WaitForString(expect, timeout - (HAL_GetTick() - start_time))) { return true; } retry; HAL_Delay(100); } // 重试失败后重启模块 ESP01S_Reset(); return false; }电压监测与异常记录void Voltage_Check(void) { uint16_t adc_value ADC_Read(ADC_CHANNEL_VREFINT); float voltage (3.3f * 4096) / adc_value; // 计算实际电压 if (voltage 3.0f) { // 电压过低记录异常并进入低功耗模式 Log_Error(Low voltage: %.2fV, voltage); Enter_LowPowerMode(); } }6. 常见问题排查与调试技巧6.1 硬件连接问题排查表问题现象可能原因检查方法解决方案屏幕白屏电源问题/复位异常测量 3.3V 电压/检查 RST 信号确保电源电流足够/检查复位电路屏幕花屏SPI 时序不匹配用逻辑分析仪抓取波形调整 SPI 分频/极性和相位显示错位初始化序列错误核对数据手册初始化代码检查延时和命令顺序背光不亮背光电路问题测量背光引脚电压检查 PWM 配置和限流电阻6.2 软件调试技巧使用串口输出调试信息void Debug_Printf(const char *fmt, ...) { char buffer[128]; va_list args; va_start(args, fmt); vsnprintf(buffer, sizeof(buffer), fmt, args); va_end(args); UART_SendString(buffer); }关键变量监控// 在调试版本中监控任务执行情况 #ifdef DEBUG void Task_Monitor(void) { static uint32_t last_ticks[TASK_MAX] {0}; uint32_t current_ticks HAL_GetTick(); for (int i 0; i TASK_MAX; i) { uint32_t interval current_ticks - last_ticks[i]; if (interval tasks[i].interval * 2) { Debug_Printf(Task %d delay: %lu ms\n, i, interval); } last_ticks[i] current_ticks; } } #endif6.3 性能优化检查点内存使用优化使用static减少栈变量大的缓冲区使用全局变量避免在中断中分配内存执行效率优化查表代替复杂计算如 sin/cos使用位操作代替乘除循环展开小段代码电源管理优化空闲时进入睡眠模式外设不用时关闭时钟降低主频应对低负载这个翻页时钟项目从硬件选型到软件优化完整展示了嵌入式产品开发的全流程。实际制作时建议先实现基础显示功能再逐步添加动画、网络对时等高级特性。每个阶段都要充分测试稳定性特别是长期运行时的内存泄漏和看门狗复位问题。
