ILI9341 TFT 触摸屏显示盾上的位图动画
组件和用品
 |
| × | 1 | |||
| × | 1 |
应用和在线服务
 |
| |||
 |
|
关于这个项目
基于 ILI9341 的 TFT 触摸屏显示屏蔽 是非常受欢迎的低成本显示屏蔽 对于 Arduino . 可视化 对它们的支持已经有一段时间了，但我从来没有机会写一篇关于如何使用它们的教程。然而最近很少有人问到关于在 Visuino 中使用显示器的问题 ，所以我决定制作一个教程。
在本教程中，我将向您展示将 Shield 连接到 Arduino 是多么容易 , 并使用 Visuino 对其进行编程 为位图设置动画以在显示器上移动。
第 1 步：组件
- 一个 Arduino Uno 兼容板（它也可以与 Mega 一起使用，但我还没有用它测试屏蔽）
- 一个 ILI9341 2.4" Arduino TFT 触摸屏扩展板
第 2 步：将 ILI9341 TFT 触摸屏显示扩展板连接到 Arduino
插入 TFT 屏蔽 在 Arduino Uno 之上 如图所示。
第 3 步：启动 Visuino 并添加 TFT Display Shield
要开始对 Arduino 进行编程，您需要拥有 Arduino IDE 从这里安装：http://www.arduino.cc/。
请确保您安装的是 1.6.7 或更高版本，否则本教程将无法运行！
Visuino :https://www.visuino.com 也需要安装。
- 启动 Visuino 如第一张图所示
- 点击“向下箭头 " Arduino 组件的按钮打开下拉菜单（图片1 )
- 从菜单中选择“添加屏蔽... " (图 1 )
- 在“盾牌 " 对话框展开 "显示 " 类别，然后选择 "TFT 彩色触摸屏显示器 ILI9341 Shield ”，然后点击“+ " 按钮添加它（图片 2 )
第 4 步：在 Visuino 中：为文本阴影添加绘制文本元素
接下来我们需要添加 Graphics 元素来渲染文本和位图。首先我们将添加图形元素来绘制文本的阴影：
- 在对象检查器中，单击“... “元素”的值旁边的“按钮 "TFT 显示器 的" 属性 " 元素（图 1 )
- 在元素编辑器中选择“绘制文本 ”，然后点击“+ " 按钮（图片 2 ) 添加一个 (图片 3 )
- 在对象检查器中设置“颜色”的值 "Draw Text1 的属性 " 元素到 "aclSilver " (图 3 )
- 在对象检查器中设置“大小”的值 "Draw Text1 的属性 " 元素到 "4 " (图 4 ）。这使文本更大
- 在对象检查器中设置“Text”的值 "Draw Text1 的属性 " 元素到 "Visuino " (图 5 )
- 在对象检查器中设置“X”的值 "Draw Text1 的属性 " 元素到 "43 " (图 6 )
- 在对象检查器中设置“Y”的值 "Draw Text1 的属性 " 元素到 "278 " (图 6 )
第 5 步：在 Visuino 中：为文本前景添加绘制文本元素
现在我们将添加图形元素来绘制文本：
- 在元素编辑器中选择“绘制文本 ”，然后点击“”按钮（图片1 ) 添加第二个 (图片 2 )
- 在对象检查器中设置“大小”的值 "Draw Text1 的属性 " 元素到 "4 " (图 2 )
- 在对象检查器中设置“Text”的值 "Draw Text1 的属性 " 元素到 "Visuino " (图 3 )
- 在对象检查器中设置“X”的值 "Draw Text1 的属性 " 元素到 "40 " (图 4 )
- 在对象检查器中设置“Y”的值 "Draw Text1 的属性 " 元素到 "275 " (图 4 )
第 6 步：在 Visuino 中：为动画添加绘制位图元素
接下来我们将添加图形元素来绘制位图：
- 在元素编辑器中选择“绘制位图 ”，然后点击“”按钮（图片1 ) 添加一个 (图片 2 )
- 在对象检查器中，单击“... “位图”值旁边的“按钮 "Draw Bitmap1 的属性 " 元素（图 2 ) 打开“位图编辑器 " (图 3 )
- 在“位图编辑器 " 单击 "加载... " 按钮（图片 3 ) 打开文件打开对话框 (图片 4 )
- 在文件打开对话框中，选择要绘制的位图，然后单击“打开 " 按钮（图 4 ）。如果文件太大，它可能无法放入 Arduino 内存。如果在编译过程中出现内存不足错误，则可能需要选择较小的位图
- 在“位图编辑器 " 点击 "确定 ." 按钮（图片 5 ) 关闭对话框
第 7 步：在 Visuino 中：为 Draw Bitmap Element 的 X 和 Y 属性添加引脚
为了动画位图，我们需要控制它的 X 和 Y 位置。为此，我们将为 X 和 Y 属性添加引脚：
- 在对象检查器中点击“Pin “X 前面的”按钮 "Draw Bitmap1 的属性 " 元素（图 1 )，然后选择“Integer SinkPin " (图 2 )
- 在对象检查器中点击“Pin “Y 前面的”按钮 "Draw Bitmap1 的属性 " 元素（图 3 )，然后选择“Integer SinkPin " (图 4 )
第八步：在 Visuino 中：添加 2 个整数正弦发生器，并配置第一个
我们将使用 2 个整数正弦发生器来为位图运动设置动画：
- 输入“正弦 “在组件工具箱的过滤器框中，然后选择“正弦整数发生器 " 组件（图 1 )，然后删除其中两个 它在设计区域
- 在对象检查器中，设置“振幅”的值 " SineIntegerGenerator1 的属性 组件到“96 " (图 2 )
- 在对象检查器中，设置“偏移”的值 " SineIntegerGenerator1 的属性 组件到“96 " (图 3 )
- 在对象检查器中，设置“频率”的值 " SineIntegerGenerator1 的属性 组件到“0.2 " (图 4 )
步骤9：在Visuino中：配置第二个正弦发生器，并将正弦发生器连接到位图的X和Y坐标引脚
- 在对象检查器中，设置“振幅”的值 " SineIntegerGenerator2 的属性 组件到“120 " (图 1 )
- 在对象检查器中，设置“偏移”的值 " SineIntegerGenerator2 的属性 组件到“120 " (图 2 )
- 在对象检查器中，设置“频率”的值 " SineIntegerGenerator2 的属性 组件到“0.03 " (图 3 )
- 连接“输出 " SineIntegerGenerator1 的输出引脚 组件到“X "Shields.TFT Sisplay.Elements.Draw Bitmap1 的输入引脚 "Arduino 的元素 组件（图 4 )
- 连接“输出 " SineIntegerGenerator2 的输出引脚 组件到“Y "Shields.TFT Display.Elements.Draw Bitmap1 的输入引脚 "Arduino 的元素 组件（图 5 )
第 10 步：在 Visuino 中：添加并连接开始和时钟多源组件
要在每次更新 X 和 Y 位置时渲染位图，我们需要向“Draw Bitmap1”元素发送时钟信号。为了在位置改变后发送命令，我们需要一种同步事件的方法。为此，我们将使用 Repeat 组件不断生成事件，并使用 Clock Multi Source 依次生成 2 个事件。第一个事件将计时正弦发生器以更新 X 和 Y 位置，第二个事件将计时“Draw Bitmap1”：
- 输入“重复 "在组件工具箱的过滤器框中，然后选择"重复 " 组件（图 1 )，并将其放在设计区域中（图片 2 )
- 输入“多 "在组件工具箱的过滤器框中，然后选择"Clock Multi Source " 组件（图 2 )，并将其放在设计区域中（图 3 )
- 连接“输出 " Repeat1 的输出引脚 组件到“In " ClockMultiSource1 的输入引脚 组件（图 3 )
- 连接“Pin[0] "Out 的输出引脚 " ClockMultiSource1 的引脚 组件到“In " SineIntegerGenerator1 的输入引脚 组件（图 4 )
- 连接“Pin[0] "Out 的输出引脚 " ClockMultiSource2 的引脚 组件到“In " SineIntegerGenerator1 的输入引脚 组件（图 5 )
- 连接“Pin[1] "时钟的输出引脚 "Shields.TFT Display.Elements.Draw Bitmap1 的输入引脚 "Arduino 的元素 组件（图 6 )
第 11 步：生成、编译和上传 Arduino 代码
- 在 Visuino 中 , 按 F9 或点击图片1上显示的按钮 生成 Arduino 代码，并打开 Arduino IDE
- 在 Arduino IDE 中 ，点击上传 按钮，编译和上传代码（图片2 )
第 12 步：然后玩……
恭喜！ 您已完成该项目。
图片 2、3、4 和 5 和视频 显示连接并通电的项目。您将看到位图在 基于 ILI9341 的 TFT 触摸屏显示屏蔽周围移动 如视频所示 .
在图片1 你可以看到完整的Visuino 图表。还附有 Visuino 我为本教程创建的项目，以及带有 Visuino 的位图 标识。您可以在 Visuino 中下载并打开它 :https://www.visuino.com
FPHWHL0IV0AHJLX.zip
制造工艺