告别点灯：用Arduino+ILI9341玩转图形界面，从显示图片到制作简易UI

告别点灯：用Arduino+ILI9341玩转图形界面，从显示图片到制作简易UI

在创客的世界里，点亮LED只是第一步。当你掌握了Arduino的基础操作后，自然会渴望更丰富的交互体验——这正是ILI9341 TFT屏幕能带来的视觉革命。这款2.4英寸、240x320分辨率的彩色显示屏，配合Arduino开发板，可以轻松实现从静态图片展示到动态数据可视化的各种创意项目。

不同于简单的字符型LCD，ILI9341支持全彩显示和触摸交互（部分型号），但很多开发者止步于显示文字的阶段。本文将带你突破这一瓶颈，通过Adafruit_GFX和TFT_eSPI这两个经典库，实现图片渲染、UI组件绘制和传感器数据仪表盘等进阶功能。我们会避开底层寄存器配置的复杂细节，直接聚焦于即学即用的实战技巧。

1. 硬件准备与库配置

1.1 硬件选型与连接

常见的ILI9341模块有两种形式：独立SPI模块和Arduino Shield。以性价比最高的SPI模块为例，基础接线如下：

提示：若使用带触摸功能的型号，需额外连接T_IRQ、T_DO、T_DIN、T_CS四个触摸控制引脚。

1.2 库安装与配置

推荐使用TFT_eSPI库，它针对不同控制器做了深度优化。安装后需修改库目录下的User_Setup.h文件：

#define ILI9341_DRIVER // 指定驱动器型号 #define TFT_WIDTH 240 // 屏幕宽度 #define TFT_HEIGHT 320 // 屏幕高度 // 引脚定义（根据实际接线修改） #define TFT_CS 10 #define TFT_DC 9 #define TFT_RST 8 #define TFT_MOSI 11 #define TFT_SCLK 13

对于需要同时使用触摸功能的项目，建议安装配套的XPT2046_Touchscreen库。Adafruit_GFX作为基础图形库会被自动依赖安装。

2. 图像显示实战技巧

2.1 从BMP到屏幕：图像转换全流程

显示图片需要先将图像文件转换为Arduino可识别的数组。推荐使用在线工具LCD Image Converter：

1. 上传图片并设置输出格式为C array
2. 颜色模式选择RGB565（16位色）
3. 调整尺寸不超过240x320像素
4. 下载生成的.h文件并放入项目目录

示例显示代码：

#include "example_image.h" // 转换后的图像头文件 TFT_eSPI tft = TFT_eSPI(); void setup() { tft.begin(); tft.setRotation(3); // 根据模块实际方向调整 tft.pushImage(0, 0, 240, 320, example_image); }

2.2 内存优化策略

大尺寸图像会消耗大量内存，可采用以下技巧：

• 分块加载：将图片分割为多个小区域逐块显示
• SD卡存储：将图像数据存入SD卡，需要时读取部分数据
• RLE压缩：对颜色单一的图像使用行程编码压缩

分块加载示例：

void drawChunkedImage(int x, int y, const uint16_t* img, int w, int h, int chunk) { for(int dy=0; dy<h; dy+=chunk) { int height = min(chunk, h-dy); tft.pushImage(x, y+dy, w, height, img + dy*w); } }

3. 构建交互式UI组件

3.1 基础图形元素绘制

TFT_eSPI库提供了丰富的绘图函数：

// 绘制圆角矩形按钮 void drawButton(int x, int y, int w, int h, String text, uint16_t color) { tft.fillRoundRect(x, y, w, h, 5, color); tft.drawRoundRect(x, y, w, h, 5, TFT_WHITE); tft.setTextColor(TFT_WHITE); tft.setTextDatum(MC_DATUM); tft.drawString(text, x+w/2, y+h/2); }

3.2 触摸交互实现

带触摸功能的模块需要校准后才能准确响应。典型校准流程：

1. 显示四个角标记点
2. 依次点击并记录坐标
3. 计算转换矩阵参数

简化版触摸检测代码：

#include <XPT2046_Touchscreen.h> XPT2046_Touchscreen ts(TOUCH_CS, TOUCH_IRQ); void loop() { if (ts.touched()) { TS_Point p = ts.getPoint(); // 将原始坐标转换为屏幕坐标 int x = map(p.x, X_MIN, X_MAX, 0, 240); int y = map(p.y, Y_MIN, Y_MAX, 0, 320); if (x > 50 && x < 190 && y > 100 && y < 150) { // 按钮点击处理 } } }

4. 数据可视化仪表盘

4.1 实时曲线绘制

传感器数据可视化是ILI9341的强项。以下代码实现动态滚动曲线：

#define HISTORY_SIZE 100 int tempHistory[HISTORY_SIZE]; int historyIndex = 0; void updateTemperatureGraph(float newTemp) { // 更新数据缓冲区 tempHistory[historyIndex] = (int)(newTemp * 10); historyIndex = (historyIndex + 1) % HISTORY_SIZE; // 清空绘图区域 tft.fillRect(20, 50, 200, 150, TFT_BLACK); // 绘制坐标轴 tft.drawLine(20, 50, 20, 200, TFT_WHITE); tft.drawLine(20, 200, 220, 200, TFT_WHITE); // 绘制曲线 for(int i=0; i<HISTORY_SIZE-1; i++) { int x1 = 20 + i*2; int x2 = 20 + (i+1)*2; int y1 = 200 - tempHistory[(historyIndex+i)%HISTORY_SIZE]/5; int y2 = 200 - tempHistory[(historyIndex+i+1)%HISTORY_SIZE]/5; tft.drawLine(x1, y1, x2, y2, TFT_GREEN); } }

4.2 多页面管理系统

复杂项目需要页面切换机制。一个简单的状态机实现：

enum AppState { HOME, SETTINGS, GRAPH }; AppState currentState = HOME; void renderHomeScreen() { tft.fillScreen(TFT_BLACK); drawButton(50, 100, 140, 40, "Settings", TFT_BLUE); drawButton(50, 180, 140, 40, "Graph", TFT_RED); } void handleTouchEvent(int x, int y) { switch(currentState) { case HOME: if (x > 50 && x < 190 && y > 100 && y < 140) { currentState = SETTINGS; renderSettingsScreen(); } // 其他按钮处理... break; // 其他状态处理... } }

5. 性能优化进阶技巧

5.1 提升刷新率

默认SPI时钟可能较慢，可通过以下方式优化：

SPI.beginTransaction(SPISettings(30000000, MSBFIRST, SPI_MODE0)); // 30MHz tft.pushImage(0, 0, 240, 320, buffer); SPI.endTransaction();

5.2 双缓冲技术

闪烁问题可通过双缓冲解决：

1. 在内存中创建与屏幕同尺寸的缓冲区
2. 所有绘图操作先在缓冲区完成
3. 最后一次性更新到物理屏幕

实现示例：

uint16_t* frameBuffer = (uint16_t*)malloc(240*320*2); void drawToBuffer() { // 使用tft.drawPixel()等函数操作frameBuffer } void updateScreen() { tft.pushImage(0, 0, 240, 320, frameBuffer); }

在实际项目中，我发现最耗时的操作往往是全屏刷新。通过只更新变化区域（脏矩形技术），可以显著提升响应速度。例如在仪表盘项目中，可以单独刷新数值变化区域而非重绘整个界面。