ILI9341 2.4 英寸 TFT 触摸屏扩展板位图动画专业指南

元件与材料

应用与在线服务

• Visuino - Arduino 图形化开发环境
• Arduino IDE

项目简介

基于 ILI9341 的 TFT 触摸屏扩展板是 Arduino 常用的低成本显示屏。Visuino 早已支持它，但一直未写教程。近期有用户询问如何在 Visuino 中使用显示屏，于是制作了本教程。

本教程将展示如何将扩展板连接到 Arduino，并用 Visuino 编程实现位图在屏幕上移动的动画效果。

步骤 1：准备元件

• 一块 Arduino Uno 兼容板（Mega 可能也支持，但未测试）
• 一块 ILI9341 2.4" TFT 触摸屏扩展板

步骤 2：连接扩展板

将 TFT 扩展板直接插在 Arduino Uno 顶部，如图所示。

步骤 3：启动 Visuino 并添加 TFT 显示屏扩展板

需安装 Arduino IDE 1.6.7 或更高版本，以及 Visuino（https://www.visuino.com）。启动 Visuino，点击 Arduino 组件的下拉箭头，选择“添加扩展板”，在“显示器”类别中找到“TFT 彩色触摸屏 ILI9341 扩展板”并添加。

步骤 4：添加绘制文本元素作为文字阴影

在 TFT 显示屏元素的 Elements 属性中添加“Draw Text”，设置颜色为 aclSilver，字号 4，内容为“Visuino”，位置 X=43, Y=278。

步骤 5：添加绘制文本元素作为文字前景

再添加一个“Draw Text”，字号 4，内容“Visuino”，位置 X=40, Y=275，颜色默认（黑色），形成阴影效果。

步骤 6：添加绘制位图元素用于动画

添加“Draw Bitmap”元素，点击 Bitmap 属性的编辑按钮打开位图编辑器，加载位图文件（注意文件大小不超内存）。

步骤 7：为位图元素的 X、Y 属性添加引脚

在 Object Inspector 中分别为 X 和 Y 属性点击 Pin 按钮，选择“Integer SinkPin”，以便外部控制位置。

步骤 8：添加两个整数正弦波发生器并配置第一个

从工具箱拖入两个“Sine Integer Generator”。配置第一个：Amplitude=96, Offset=96, Frequency=0.2。

步骤 9：配置第二个正弦波发生器并连接到位图坐标

配置第二个：Amplitude=120, Offset=120, Frequency=0.03。将第一个发生器的 Out 连到位图的 X 输入引脚，第二个的 Out 连到 Y 输入引脚。

步骤 10：添加并连接 Start 与 Clock Multi Source 组件

拖入 Repeat 组件和 Clock Multi Source 组件。连接 Repeat 的 Out 到 Clock Multi Source 的 In。Clock Multi Source 的 Pin[0] 连到两个正弦波发生器的 In，Pin[1] 连到位图元素的 Clock 输入引脚。这样每次循环先更新坐标再绘制位图。

步骤 11：生成、编译并上传 Arduino 代码

在 Visuino 中按 F9 生成代码并打开 Arduino IDE，点击上传按钮编译上传。

步骤 12：运行效果

完成！位图将在 ILI9341 屏幕上按正弦轨迹移动。附件包含 Visuino 项目文件和 Visuino Logo 位图，可下载后在 Visuino 中打开。