如何使用MCUfriend.com 2.4TFT显示屏来实现Uno/Mega

第1步：BluBerriSIX - 概述

bluBerriSIX应用程序是一个六功能的TFT项目。

它包括：

手电筒

一个Saucy‘7’应用程序（就像魔术‘8’球）

计算器

距离测量应用程序使用SR-04超声波距离传感器

温度和湿度应用程序，使用HC-12收发器进行1.5公里的实时数据记录

使用HC的短信应用程序-12。

这个项目耗时1100升代码ines。我们将构建一个相当简单的版本，仍然展示了TFT显示和触摸感应概念。

第2步：需要什么？

- Arduino Uno或Mega 2560

- 一个MCUfriend 2.4“TFT屏蔽

以下库：

- Adafruit_GFX库

- Adafruit触摸屏库

- MCUFRIEND_kbv库

这些库可以与Arduino IDE中的库管理器一起安装。

要加载库，请转到草图 - 》包含库 - 》管理库。..菜单选项。

在“过滤搜索。..”字段中，输入图书馆名称的前几个字符，然后选择并安装相应的库。完成后，只需退出此屏幕即可。

在Uno/Mega上安装TFT屏蔽罩时，请务必小心，确保正确排列插针。我错了我的第一个盾牌并且炸了它。在意识到屏幕已经死亡之前，我花了两周的时间来试图找到正确的库。小心！

第3步：我们的项目

我们将构建一个更简单的bluBerriSIX草图版本。

它有，

- 启动画面

- 带有两个按钮的主菜单屏幕

- 一个Saucy 7应用程序

- 简化的文本输入应用程序

您还可以通过按此特定显示屏左下角的“主页”图标返回主菜单。如果您没有这样的图标，则只需定义屏幕的“主页”区域即可。您将在本教程中学习如何确定屏幕触摸区域。

虽然这是一个简化的项目，但它仍然很长。我将在每个主要阶段提供Arduino草图的版本，以便您可以根据需要上传它们。

第4步：标题代码，全局变量，屏幕设置

整个项目都有很多文档。但详情如下。

开始一个新的Arduino项目并称之为‘tft demo’或任何其他你喜欢的名字。

第一个代码面板上面显示了我们定义全局变量。我们还添加了我们需要用于屏幕显示功能和屏幕触摸检测的库。

我们还根据屏幕特定用途定义模拟引脚。

我们将tft对象（显示）和ts对象（触摸）定义为各自功能的参考。

我们定义了一些16位颜色常量，以便于渲染屏幕以及文本和图形对象的颜色。你会注意到有一个网站的URL，它有一个颜色选择器和转换器，可以将可见颜色转换为它们的16位十六进制值。这是一个非常有用的工具。

在第二个代码面板中，我们为应用特定目的定义全局变量。

cString ，字母和 letterX 和 letterY 字符串和数组用于a）显示字母在文本输入应用程序的按钮上和b）将触摸的x和y坐标与键盘上每个相应字母的x和y坐标相匹配。当我们到达草图的那一部分时，更多关于这一点。

funcX ［］ ， funcY ［］ 和 func ［］ 是用于确定主菜单屏幕上按下了哪个应用程序按钮的数组，然后使用该信息启动相应的应用程序。

l astTouch 和 tThresh ，以确保我们不会因为按屏幕太长时间而触及多次触摸。稍后会详细介绍。

模式变量将控制显示哪个屏幕， tMode 变量将控制在任何给定时使用的触摸方法时间。

在setup（）块中，如果我们想使用Serial.println（）命令进行调试，我们打开一个串口通道。如果您不希望进行串行监视器调试，则不需要此行。

接下来的四行只是tft对象的设置代码。

接下来我们设置方向纵向模式下的屏幕。

randomSeed（）命令只是启动随机数生成器，供以后的Saucy 7应用程序使用。

最后我们调用启动画面方法。

步骤5：构建Spash屏幕并了解显示与触摸映射

我们将现在开始构建spash屏幕。

但首先，请查看图片的屏幕和触摸映射。请注意，原点位于不同的位置。显示时，原点（0，0）位于屏幕的左上角（当RESET按钮位于顶部时），从左到右，从上到下增长。

对于触摸检测，原点位于屏幕的左下角，从左到右，从下到上增长。

所以显示和触摸地图分别定义并具有不同的分辨率。显示器的分辨率为240 x 320，触摸分辨率要高得多，你很快就会看到。

在loop（）{}方法下面的草图区域，我们将会输入splash（）方法代码。

我们首先执行 fillScreen（）命令，使用我们在标题代码中定义的WHITE颜色填充屏幕。

然后我们将文字大小设置为‘5’。这是一个相对较大的基本文本大小。我们设置文本光标的x和y位置，然后设置文本颜色。最后， print（“TFT”）命令实际上在指定位置绘制蓝色的“5”文本。

当您增加文字大小时，您会看到字符变得越来越粗糙。所以超过5可能没有帮助。在本教程结束时，我将向您展示如何使用位图字体在您的应用程序中获得更好看的文本。权衡是使用位图字体集占用Arduino中的大量内存，这将限制草图大小。

我们在初始屏幕上为其他两个文本项重复类似的命令。

最后我们延迟2.5秒让用户有机会阅读屏幕内容在应用程序移动到主菜单屏幕之前。

继续将此草图上传到您的Arduino。它应显示启动画面。

步骤6：制作触摸映射诊断工具

showTouch（）方法对于帮助您获取屏幕不同部分的触摸坐标非常有用。您需要这样做来定义按钮的触摸区域。

继续并在之前完成的splash（）方法下面输入此方法。

以下是它的工作原理。

if语句确定自上次触摸后是否已经过了足够的时间。它需要当前系统时间 millis（）并减去 lastTouch 时间。如果它大于 tThresh 值（200毫秒），则接受触摸。否则，它将忽略意外的多点触摸事件。

接下来， getpoint（）命令获取触摸的x，y和z坐标。 z坐标是触摸压力的度量。

如果压力在草图标题中定义的最大和最小常数范围内，该方法将首先将YP和XM引脚更改回OUTPUT，屏幕显示模式。

接下来它将绘制一个白色矩形以删除之前可能显示的任何坐标。

然后草图将字体设置为2，黑色和在屏幕上显示x（px）和y（py）坐标。然后，您可以记下这些位置，以帮助您为自己的草图编制触摸区域。

方法底部的if语句检查屏幕上的“Home”按钮是否为按下。 ‘《=’运算符允许Home按钮的宽度和高度。指定的坐标是Home按钮的x中心和y中心坐标。如果按下，模式将设置为0，这最终将意味着“转到主菜单屏幕”。稍后详细介绍。

最后，我们将 lastTouch 更新为当前系统时间 millis（），以便为以后的触摸事件做好准备。

现在请转到循环（）块并添加 showTouch（）;

这一行，上传草图和试试吧。它将绘制启动画面，如果你开始触摸屏幕，触摸x和y坐标将显示在屏幕上。

在继续之前，让我们重新审视两行重要的代码：

pinMode（YP，OUTPUT）;//恢复TFT控制引脚

pinMode（XM，OUTPUT）;//检测到触摸后显示

无论何时你想在屏幕上显示某些内容，你必须执行这两个命令，将屏幕从 TOUCH 模式更改为 DISPLAY 模式。否则，你的显示命令将无效。

到目前为止做得好！休息一下！

第7步：构建主菜单屏幕

我们现在将构建我们的主菜单屏幕，其中有两个按钮可以按下以激活每个应用程序。该方法称为menuScreen（）。

我们首先将屏幕置于DISPLAY模式。

然后我们设置字体大小，颜色和位置并打印“主菜单”文本。

我们现在画两个作为按钮的矩形。

所有图形命令都具有类似的结构：

graphicShape（x坐标，y坐标，宽度，高度，颜色）

- x坐标 - 矩形对象的左上角，圆圈的中心

- y坐标 - 矩形对象的左上角，圆圈的中心

- 宽度 - 宽度像素的对象

- COLOR - 我们在标题中定义的颜色常量

最后我们调用两种方法来绘制Saucy 7图标和QWERTY文本输入图标。这些是单独的方法。

draw7icon（0）方法采用整数参数，它是绘制球的y偏移量。我们这样做是为了让我们可以使用相同的方法在菜单屏幕和Saucy 7应用程序屏幕上绘制球。偏移量只允许我们以编程方式向上或向下调整球的y坐标。

从draw7Icon（0）中调用draw7Ball（0）方法。它还需要一个参数，允许我们调整球的垂直位置，具体取决于我们是在菜单屏幕上还是在应用程序屏幕上绘制它。

fillCircle（）命令有4个参数。

- 圆心的x坐标

- y坐标圆的中心

- 圆的半径（以像素为单位）

- COLOR - 我们在标题中定义的颜色常量

最后是drawTextIcon（调用方法来绘制文本输入应用程序的图标。

您可以尝试通过在setup（）中注释掉splash（）方法并添加menuScreen（）来运行该方法。

将草图上传到你的Arduino并尝试一下！

第8步：Saucy 7应用程序和主菜单方法

sevenScreen（）方法将绘制应用程序的屏幕，包括绘制球然后显示说明。

sevenInstr（）方法显示指令以及从先前的响应中清除屏幕。它还绘制了“响应”按钮。

show7Response（）方法处理从屏幕清除先前的响应方法，显示动画“思考。..”消息，然后显示随机选择的响应消息。

read7Touch（）是等待触摸事件产生随机生成的消息的方法。触摸代码与前面描述的showTouch（）诊断方法非常相似。为简单起见，该方法将接受屏幕上任何位置的触摸，因为“响应”按钮触摸。

在方法的顶部，我们定义一个响应［］数组的字符串，这些字符串可以是通过触摸事件生成。

如果按下主页按钮，它将结束应用程序并返回主菜单屏幕。否则，该方法将生成0到7之间的随机数（不包括），并将相应的文本消息从response ［］数组传递给show7Response（）方法。

最后，backToMenu（）方法监视触摸主页按钮并将控制返回到主菜单屏幕。

当您在主菜单屏幕上时，readMenuTouch（）方法会监视触摸事件。当检测到触摸时，它将x和y坐标传递给getFunc（x，y）方法，该方法在funcX ［］和funcY ［］数组中查找以匹配触摸的x和y坐标。然后它返回func ［］数组中所选应用程序的数字。 ‘1’是Saucy 7，‘2’是文本输入应用程序。然后它将模式设置为该应用程序的值，以便应用程序执行。

步骤9：循环（）块

我们现在开始构建loop（）块代码来处理显示适当的屏幕，然后根据当前选择的选项调用适当的触摸方法。

loop（）方法由两个switch（）结构组成。

顶部开关结构根据选择的选项处理显示适当的屏幕。它还为适用于当前所选选项的触摸方法设置 tMode 值。最后，它将模式值设置为9，以便显示屏幕不会无限重绘。

底部开关结构根据用户选择的应用选项控制正在执行的触摸方法，由值表示 tMode 。

将草图加载到Arduino中，您应该可以选择并使用Saucy 7应用程序。

您已经做了很多工作的！休息一下： - ）

第10步：文本输入应用程序 - 我们在Home Stretch中！

我们现在将合并文本输入应用程序的方法。

makeKbd（）在屏幕上绘制键盘。

它绘制了六个填充的圆角矩形，然后通过获取中的字母覆盖每个“键”上的相应字母。 cString 字符串，它通过键在屏幕上打印。请注意， fillRoundedRect（）命令中的倒数第二个参数是每个角的半径（以像素为单位）。该值越高，角点越圆。

readKbdTouch（）方法的工作方式与其他触摸检测方法类似。

如果检测到触摸不在主页按钮上，它会将x和y坐标传递给curChar（x，y）方法，该方法返回与屏幕上的x和y位置对应的字符。然后，使用‘displayMsg（theChar）方法在屏幕上显示已“键入”的消息。

curChar（x，y）方法搜索 letterX ［］ 和 letterY ［］ 数组尝试查找与readKbdTouch（）传递的x和y坐标接近的匹配项。如果找到匹配项，则会将相应的字母返回给readKbdTouch方法。注意我们将 theChar 变量初始化为32，这是空格字符的ASCII代码’‘。我们这样做，以便如果用户触摸远离键盘的区域，它将不会显示不可用的字符。

displayMsg（theChar）方法获取从curChar（x，y）返回的字符并将其附加到 msg 字符串。然后它会在屏幕上显示消息。

最后，我们将更新loop（）块以接受文本输入应用程序选择。

将tftDemo草图上传到Arduino和你应该能够使用完成的应用程序。

恭喜！你已经建立了一个TFT触摸屏应用程序！休息一天剩下的时间！

第11步：开始吧！ - 在草图中使用Adafruit位图字体。

标准的tft字体集是可以的。但是如果我们可以在我们的TFT草图中使用适当的位图字体，那就更好了。

缺点是将字体集加载到Arduino内存占用了大量空间。实际上，使用如此多的字体填充草图非常容易，它不会加载到Arduino中。

这些字体在您已为此项目安装的Adafruit_GFX库文件夹中可用。有关使用字体的优秀教程，请访问此站点。

在草图的“标题”区域中，添加要使用的字体的字体引用。我们将在此示例中使用 FreeSerifBoldItalic18p7b 字体。

#include 《 字体/FreeSerifBoldItalic18pt7b.h》

在你的splash（）方法中，注释掉 tft.setTextSize（）; 命令。

添加以下命令，

tft.setFont（＆FreeSerifBoldItalic18pt7b）;

现在任何 print（）命令将使用当前指定的字体。要更改为其他字体，可以使用另一个 tft.setFont（）命令，并使用下一个要使用的字体。

将字体设置回标准tft字体，只需使用 tft.setFont（）; 命令，不带参数。

将草图上传到Arduino，您应该看到启动画面现在使用位图字体进行渲染屏幕上的文字。你会注意到，当你包含一个字体时，草图的大小要大得多。

第12步：最后的想法

许多其他图形对象命令可供您使用。它们包括：

tft.drawRect （x，y，width，height，COLOR）;

tft.drawLine （x1，y1，x2，y2，COLOR）;

以下示例使用tft.color565方法让您根据红色，绿色和蓝色值指定颜色。这是使用我们在草图中使用的常量定义的HEX颜色值的另一种方法。

tft.drawRoundRect （x，y，width，height，radius，tft.color565 （255，0，0））;//这将是红色

tft.drawCircle （x，y，radius，tft.color565（0，255，0））;//这将是绿色

tft.drawTriangle （vertex1x，vertex1y，vertex2x，vertex2y，vertex3x，vertex3y，tft.color565（0，0，255））;//blue

tft.fillTriangle （vertex1x，vertex1y，vertex2x，vertex2y，vertex3x，vertex3y，tft.color565（255，0，0）;

使用这些命令并探索它们如何添加到您的TFT项目中。

学习使用TFT屏幕具有挑战性，您应该为自己花时间学习这些第一步而感到自豪。/p》

TFT屏幕可以为您的Arduino项目添加一个有吸引力且有用的图形用户界面方面。