用ST7789 TFT屏做个小项目：从显示传感器数据到简易UI的Arduino实战

从传感器数据到交互式UIST7789 TFT屏的Arduino创意实践那块240x240像素的彩色小屏幕正静静躺在你的工作台上——你已经成功点亮了ST7789驱动芯片的TFT显示屏甚至能显示测试图案和简单文字。但接下来呢本文将带你突破基础驱动的限制用Arduino或ESP32开发板实现三个实用场景实时传感器数据可视化、动态图表绘制以及带物理按键交互的简易菜单系统。不同于单纯介绍底层驱动的教程我们聚焦于如何让屏幕真正服务于项目。1. 环境搭建与基础功能封装1.1 硬件选型与连接推荐使用以下硬件组合实现最佳性价比核心控制器ESP32 DevKit双核处理能力WiFi功能显示模块1.54寸ST7789驱动TFT240x240分辨率IPS面板传感器DHT22温湿度传感器精度±0.5℃交互设备EC11旋转编码器带按键功能接线示例SPI模式// ST7789引脚定义 #define TFT_CS 5 #define TFT_DC 16 #define TFT_RST 17 #define TFT_MOSI 23 #define TFT_SCLK 18 // 旋转编码器引脚 #define ENC_A 34 #define ENC_B 35 #define ENC_SW 321.2 驱动库的选择与优化主流库性能对比库名称更新频率图形API丰富度内存占用特殊功能TFT_eSPI高频★★★★☆中等硬件加速、自定义字体Adafruit_ST7789稳定★★★☆☆较低兼容性好LovyanGFX活跃★★★★★较高动画支持、多缓冲推荐使用TFT_eSPI库并进行如下配置编辑库目录下的User_Setup.h文件取消注释正确的驱动芯片型号#define ST7789_DRIVER设置屏幕分辨率参数#define TFT_WIDTH 240 #define TFT_HEIGHT 240提示启用#define SPI_FREQUENCY 40000000可将SPI时钟提升至40MHz显著改善刷新率2. 传感器数据可视化实战2.1 数据格式化显示技巧避免简单的数值堆砌采用信息分层设计void drawSensorData(float temp, float humidity) { tft.fillScreen(TFT_BLACK); // 主数值区 tft.setTextColor(TFT_CYAN); tft.drawFloat(temp, 1, 50, 80, 6); // 温度值 tft.drawString(°C, 180, 80, 4); // 次级信息区 tft.setTextColor(TFT_YELLOW); tft.drawFloat(humidity, 1, 50, 140, 4); tft.drawString(%RH, 150, 140, 2); // 状态指示器 if(temp 30) { tft.fillCircle(220, 90, 10, TFT_RED); // 高温警报 } }2.2 动态进度条实现用以下代码创建平滑过渡的湿度指示条void drawHumidityBar(float percent) { static uint16_t lastWidth 0; uint16_t newWidth map(percent, 0, 100, 0, 200); // 渐变过渡动画 if(newWidth lastWidth) { tft.fillRect(20, 160, lastWidth, 15, TFT_BLACK); tft.fillRect(20, 160, newWidth, 15, TFT_BLUE); } else { tft.fillRect(20 newWidth, 160, lastWidth - newWidth, 15, TFT_BLACK); } lastWidth newWidth; // 边框和刻度 tft.drawRect(20, 160, 200, 15, TFT_WHITE); for(int i0; i100; i20) { tft.drawFastVLine(20 i*2, 175, 5, TFT_WHITE); } }3. 简易图表绘制方案3.1 实时折线图引擎实现一个可复用的图表组件class LineGraph { private: uint16_t x, y, width, height; float minVal, maxVal; uint16_t history[240]; uint8_t index 0; public: LineGraph(uint16_t x, uint16_t y, uint16_t w, uint16_t h, float min, float max) : x(x), y(y), width(w), height(h), minVal(min), maxVal(max) { memset(history, 0, sizeof(history)); } void addData(float value) { value constrain(value, minVal, maxVal); history[index] map(value, minVal, maxVal, yheight, y); // 绘制最新线段 uint8_t prev (index 0) ? 239 : index-1; tft.drawLine(xprev, history[prev], xindex, history[index], TFT_GREEN); index (index 1) % width; tft.drawLine(xindex, y, xindex, yheight, TFT_BLACK); // 清除旧垂直线 } };使用示例监测温度变化LineGraph tempGraph(0, 40, 240, 120, 10, 40); void loop() { float temp dht.readTemperature(); tempGraph.addData(temp); delay(1000); }3.2 多曲线同框显示技巧通过颜色和线型区分不同数据集void drawMultiGraph() { // 坐标轴 tft.drawLine(30, 30, 30, 210, TFT_WHITE); tft.drawLine(30, 210, 210, 210, TFT_WHITE); // 温度曲线实线 for(int i1; i180; i) { tft.drawLine(30i, 210-tempHistory[i], 30i1, 210-tempHistory[i1], TFT_RED); } // 湿度曲线虚线 for(int i1; i180; i2) { tft.drawLine(30i, 210-humidHistory[i], 30i1, 210-humidHistory[i1], TFT_BLUE); } }4. 交互式菜单系统开发4.1 旋转编码器驱动实现带加速度检测的编码器处理void readEncoder() { static int8_t lastState 0; static uint32_t lastTime 0; int8_t newState digitalRead(ENC_A) | (digitalRead(ENC_B) 1); if(newState ! lastState) { uint32_t now millis(); uint8_t delta (now - lastTime 50) ? 3 : 1; // 加速度检测 if((lastState 0 newState 2) || (lastState 2 newState 3) || (lastState 3 newState 1) || (lastState 1 newState 0)) { menuPosition delta; } else { menuPosition - delta; } lastState newState; lastTime now; } }4.2 多级菜单数据结构使用状态机模式管理菜单层级struct MenuItem { const char* text; void (*action)(); MenuItem* childMenu; MenuItem* parentMenu; }; MenuItem mainMenu[] { {温度设置, nullptr, tempSubMenu, nullptr}, {系统配置, nullptr, systemMenu, nullptr}, {关于, showAbout, nullptr, nullptr} }; MenuItem tempSubMenu[] { {报警阈值, setTempThreshold, nullptr, mainMenu}, {单位切换, toggleTempUnit, nullptr, mainMenu}, {返回, nullptr, nullptr, mainMenu} };4.3 菜单渲染优化采用差异刷新技术减少闪烁void drawMenu() { static uint8_t lastPos 255; // 仅重绘变化部分 if(lastPos ! menuPosition) { // 清除旧选中项背景 if(lastPos 3) { tft.fillRect(10, 50lastPos*30, 220, 28, TFT_BLACK); } // 绘制新选中项背景 tft.fillRoundRect(10, 50menuPosition*30, 220, 28, 5, TFT_NAVY); lastPos menuPosition; } // 绘制所有菜单项文本 for(int i0; i3; i) { tft.setTextColor((i menuPosition) ? TFT_WHITE : TFT_GRAY); tft.drawString(menuItems[i].text, 20, 55i*30, 2); } }5. 性能优化技巧5.1 帧率控制策略void loop() { static uint32_t lastFrame 0; uint32_t frameInterval 1000 / targetFPS; // 例如30FPS33ms if(millis() - lastFrame frameInterval) { renderFrame(); lastFrame millis(); } // 其他非实时任务 checkButtons(); readSensors(); }5.2 部分刷新技术针对ST7789的setAddrWindow函数进行优化void updatePartial(uint16_t x, uint16_t y, uint16_t w, uint16_t h) { tft.setAddrWindow(x, y, xw-1, yh-1); digitalWrite(TFT_DC, HIGH); digitalWrite(TFT_CS, LOW); // 仅传输变化区域数据 for(uint16_t i0; ih; i) { for(uint16_t j0; jw; j) { SPI.writePixel(tft.color565(...)); } } digitalWrite(TFT_CS, HIGH); }6. 项目进阶思路6.1 无线数据同步显示结合ESP32的WiFi功能实现远程监控#include WiFi.h #include ArduinoJson.h void syncWithServer() { WiFiClient client; if(client.connect(api.thingspeak.com, 80)) { client.print(GET /channels/1234/feeds/last.json); client.println( HTTP/1.1); client.println(Host: api.thingspeak.com); client.println(); while(client.connected()) { String line client.readStringUntil(\n); if(line \r) { String data client.readStringUntil(\n); DynamicJsonDocument doc(256); deserializeJson(doc, data); float remoteTemp doc[field1]; updateDisplay(remoteTemp); } } } }6.2 低功耗模式实现通过背光控制和间歇刷新延长电池寿命void enterLowPower() { digitalWrite(TFT_BLK, LOW); // 关闭背光 setCpuFrequencyMhz(80); // 降频运行 // 配置唤醒源 esp_sleep_enable_ext0_wakeup((gpio_num_t)ENC_SW, LOW); esp_deep_sleep_start(); }