第1步：BluBerriSIX - 概述

bluBerriSIX應(yīng)用程序是一個(gè)六功能的TFT項(xiàng)目。

它包括：

手電筒

一個(gè)Saucy‘7’應(yīng)用程序（就像魔術(shù)‘8’球）

計(jì)算器

距離測(cè)量應(yīng)用程序使用SR-04超聲波距離傳感器

溫度和濕度應(yīng)用程序，使用HC-12收發(fā)器進(jìn)行1.5公里的實(shí)時(shí)數(shù)據(jù)記錄

使用HC的短信應(yīng)用程序-12。

這個(gè)項(xiàng)目耗時(shí)1100升代碼ines。我們將構(gòu)建一個(gè)相當(dāng)簡(jiǎn)單的版本，仍然展示了TFT顯示和觸摸感應(yīng)概念。

第2步：需要什么？

- Arduino Uno或Mega 2560

- 一個(gè)MCUfriend 2.4“TFT屏蔽

以下庫(kù)：

- Adafruit_GFX庫(kù)

- Adafruit觸摸屏庫(kù)

- MCUFRIEND_kbv庫(kù)

這些庫(kù)可以與Arduino IDE中的庫(kù)管理器一起安裝。

要加載庫(kù)，請(qǐng)轉(zhuǎn)到草圖 - 》包含庫(kù) - 》管理庫(kù)。..菜單選項(xiàng)。

在“過(guò)濾搜索。..”字段中，輸入圖書(shū)館名稱的前幾個(gè)字符，然后選擇并安裝相應(yīng)的庫(kù)。完成后，只需退出此屏幕即可。

在Uno/Mega上安裝TFT屏蔽罩時(shí)，請(qǐng)務(wù)必小心，確保正確排列插針。我錯(cuò)了我的第一個(gè)盾牌并且炸了它。在意識(shí)到屏幕已經(jīng)死亡之前，我花了兩周的時(shí)間來(lái)試圖找到正確的庫(kù)。小心！

第3步：我們的項(xiàng)目

我們將構(gòu)建一個(gè)更簡(jiǎn)單的bluBerriSIX草圖版本。

它有，

- 啟動(dòng)畫(huà)面

- 帶有兩個(gè)按鈕的主菜單屏幕

- 一個(gè)Saucy 7應(yīng)用程序

- 簡(jiǎn)化的文本輸入應(yīng)用程序

您還可以通過(guò)按此特定顯示屏左下角的“主頁(yè)”圖標(biāo)返回主菜單。如果您沒(méi)有這樣的圖標(biāo)，則只需定義屏幕的“主頁(yè)”區(qū)域即可。您將在本教程中學(xué)習(xí)如何確定屏幕觸摸區(qū)域。

雖然這是一個(gè)簡(jiǎn)化的項(xiàng)目，但它仍然很長(zhǎng)。我將在每個(gè)主要階段提供Arduino草圖的版本，以便您可以根據(jù)需要上傳它們。

第4步：標(biāo)題代碼，全局變量，屏幕設(shè)置

整個(gè)項(xiàng)目都有很多文檔。但詳情如下。

開(kāi)始一個(gè)新的Arduino項(xiàng)目并稱之為‘tft demo’或任何其他你喜歡的名字。

第一個(gè)代碼面板上面顯示了我們定義全局變量。我們還添加了我們需要用于屏幕顯示功能和屏幕觸摸檢測(cè)的庫(kù)。

我們還根據(jù)屏幕特定用途定義模擬引腳。

我們將tft對(duì)象（顯示）和ts對(duì)象（觸摸）定義為各自功能的參考。

我們定義了一些16位顏色常量，以便于渲染屏幕以及文本和圖形對(duì)象的顏色。你會(huì)注意到有一個(gè)網(wǎng)站的URL，它有一個(gè)顏色選擇器和轉(zhuǎn)換器，可以將可見(jiàn)顏色轉(zhuǎn)換為它們的16位十六進(jìn)制值。這是一個(gè)非常有用的工具。

在第二個(gè)代碼面板中，我們?yōu)閼?yīng)用特定目的定義全局變量。

cString ，字母和 letterX 和 letterY 字符串和數(shù)組用于a）顯示字母在文本輸入應(yīng)用程序的按鈕上和b）將觸摸的x和y坐標(biāo)與鍵盤上每個(gè)相應(yīng)字母的x和y坐標(biāo)相匹配。當(dāng)我們到達(dá)草圖的那一部分時(shí)，更多關(guān)于這一點(diǎn)。

funcX ［］ ， funcY ［］ 和 func ［］ 是用于確定主菜單屏幕上按下了哪個(gè)應(yīng)用程序按鈕的數(shù)組，然后使用該信息啟動(dòng)相應(yīng)的應(yīng)用程序。

l astTouch 和 tThresh ，以確保我們不會(huì)因?yàn)榘雌聊惶L(zhǎng)時(shí)間而觸及多次觸摸。稍后會(huì)詳細(xì)介紹。

模式變量將控制顯示哪個(gè)屏幕， tMode 變量將控制在任何給定時(shí)使用的觸摸方法時(shí)間。

在setup（）塊中，如果我們想使用Serial.println（）命令進(jìn)行調(diào)試，我們打開(kāi)一個(gè)串口通道。如果您不希望進(jìn)行串行監(jiān)視器調(diào)試，則不需要此行。

接下來(lái)的四行只是tft對(duì)象的設(shè)置代碼。

接下來(lái)我們?cè)O(shè)置方向縱向模式下的屏幕。

randomSeed（）命令只是啟動(dòng)隨機(jī)數(shù)生成器，供以后的Saucy 7應(yīng)用程序使用。

最后我們調(diào)用啟動(dòng)畫(huà)面方法。

步驟5：構(gòu)建Spash屏幕并了解顯示與觸摸映射

我們將現(xiàn)在開(kāi)始構(gòu)建spash屏幕。

但首先，請(qǐng)查看圖片的屏幕和觸摸映射。請(qǐng)注意，原點(diǎn)位于不同的位置。顯示時(shí)，原點(diǎn)（0，0）位于屏幕的左上角（當(dāng)RESET按鈕位于頂部時(shí)），從左到右，從上到下增長(zhǎng)。

對(duì)于觸摸檢測(cè)，原點(diǎn)位于屏幕的左下角，從左到右，從下到上增長(zhǎng)。

所以顯示和觸摸地圖分別定義并具有不同的分辨率。顯示器的分辨率為240 x 320，觸摸分辨率要高得多，你很快就會(huì)看到。

在loop（）{}方法下面的草圖區(qū)域，我們將會(huì)輸入splash（）方法代碼。

我們首先執(zhí)行 fillScreen（）命令，使用我們?cè)跇?biāo)題代碼中定義的WHITE顏色填充屏幕。

然后我們將文字大小設(shè)置為‘5’。這是一個(gè)相對(duì)較大的基本文本大小。我們?cè)O(shè)置文本光標(biāo)的x和y位置，然后設(shè)置文本顏色。最后， print（“TFT”）命令實(shí)際上在指定位置繪制藍(lán)色的“5”文本。

當(dāng)您增加文字大小時(shí)，您會(huì)看到字符變得越來(lái)越粗糙。所以超過(guò)5可能沒(méi)有幫助。在本教程結(jié)束時(shí)，我將向您展示如何使用位圖字體在您的應(yīng)用程序中獲得更好看的文本。權(quán)衡是使用位圖字體集占用Arduino中的大量?jī)?nèi)存，這將限制草圖大小。

我們?cè)诔跏计聊簧蠟槠渌麅蓚€(gè)文本項(xiàng)重復(fù)類似的命令。

最后我們延遲2.5秒讓用戶有機(jī)會(huì)閱讀屏幕內(nèi)容在應(yīng)用程序移動(dòng)到主菜單屏幕之前。

繼續(xù)將此草圖上傳到您的Arduino。它應(yīng)顯示啟動(dòng)畫(huà)面。

步驟6：制作觸摸映射診斷工具

showTouch（）方法對(duì)于幫助您獲取屏幕不同部分的觸摸坐標(biāo)非常有用。您需要這樣做來(lái)定義按鈕的觸摸區(qū)域。

繼續(xù)并在之前完成的splash（）方法下面輸入此方法。

以下是它的工作原理。

if語(yǔ)句確定自上次觸摸后是否已經(jīng)過(guò)了足夠的時(shí)間。它需要當(dāng)前系統(tǒng)時(shí)間 millis（）并減去 lastTouch 時(shí)間。如果它大于 tThresh 值（200毫秒），則接受觸摸。否則，它將忽略意外的多點(diǎn)觸摸事件。

接下來(lái)， getpoint（）命令獲取觸摸的x，y和z坐標(biāo)。 z坐標(biāo)是觸摸壓力的度量。

如果壓力在草圖標(biāo)題中定義的最大和最小常數(shù)范圍內(nèi)，該方法將首先將YP和XM引腳更改回OUTPUT，屏幕顯示模式。

接下來(lái)它將繪制一個(gè)白色矩形以刪除之前可能顯示的任何坐標(biāo)。

然后草圖將字體設(shè)置為2，黑色和在屏幕上顯示x（px）和y（py）坐標(biāo)。然后，您可以記下這些位置，以幫助您為自己的草圖編制觸摸區(qū)域。

方法底部的if語(yǔ)句檢查屏幕上的“Home”按鈕是否為按下。 ‘《=’運(yùn)算符允許Home按鈕的寬度和高度。指定的坐標(biāo)是Home按鈕的x中心和y中心坐標(biāo)。如果按下，模式將設(shè)置為0，這最終將意味著“轉(zhuǎn)到主菜單屏幕”。稍后詳細(xì)介紹。

最后，我們將 lastTouch 更新為當(dāng)前系統(tǒng)時(shí)間 millis（），以便為以后的觸摸事件做好準(zhǔn)備。

現(xiàn)在請(qǐng)轉(zhuǎn)到循環(huán)（）塊并添加 showTouch（）;

這一行，上傳草圖和試試吧。它將繪制啟動(dòng)畫(huà)面，如果你開(kāi)始觸摸屏幕，觸摸x和y坐標(biāo)將顯示在屏幕上。

在繼續(xù)之前，讓我們重新審視兩行重要的代碼：

pinMode（YP，OUTPUT）;//恢復(fù)TFT控制引腳

pinMode（XM，OUTPUT）;//檢測(cè)到觸摸后顯示

無(wú)論何時(shí)你想在屏幕上顯示某些內(nèi)容，你必須執(zhí)行這兩個(gè)命令，將屏幕從 TOUCH 模式更改為 DISPLAY 模式。否則，你的顯示命令將無(wú)效。

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

第7步：構(gòu)建主菜單屏幕

我們現(xiàn)在將構(gòu)建我們的主菜單屏幕，其中有兩個(gè)按鈕可以按下以激活每個(gè)應(yīng)用程序。該方法稱為menuScreen（）。

我們首先將屏幕置于DISPLAY模式。

然后我們?cè)O(shè)置字體大小，顏色和位置并打印“主菜單”文本。

我們現(xiàn)在畫(huà)兩個(gè)作為按鈕的矩形。

所有圖形命令都具有類似的結(jié)構(gòu)：

graphicShape（x坐標(biāo)，y坐標(biāo)，寬度，高度，顏色）

- x坐標(biāo) - 矩形對(duì)象的左上角，圓圈的中心

- y坐標(biāo) - 矩形對(duì)象的左上角，圓圈的中心

- 寬度 - 寬度像素的對(duì)象

- COLOR - 我們?cè)跇?biāo)題中定義的顏色常量

最后我們調(diào)用兩種方法來(lái)繪制Saucy 7圖標(biāo)和QWERTY文本輸入圖標(biāo)。這些是單獨(dú)的方法。

draw7icon（0）方法采用整數(shù)參數(shù)，它是繪制球的y偏移量。我們這樣做是為了讓我們可以使用相同的方法在菜單屏幕和Saucy 7應(yīng)用程序屏幕上繪制球。偏移量只允許我們以編程方式向上或向下調(diào)整球的y坐標(biāo)。

從draw7Icon（0）中調(diào)用draw7Ball（0）方法。它還需要一個(gè)參數(shù)，允許我們調(diào)整球的垂直位置，具體取決于我們是在菜單屏幕上還是在應(yīng)用程序屏幕上繪制它。

fillCircle（）命令有4個(gè)參數(shù)。

- 圓心的x坐標(biāo)

- y坐標(biāo)圓的中心

- 圓的半徑（以像素為單位）

- COLOR - 我們?cè)跇?biāo)題中定義的顏色常量

最后是drawTextIcon（調(diào)用方法來(lái)繪制文本輸入應(yīng)用程序的圖標(biāo)。

您可以嘗試通過(guò)在setup（）中注釋掉splash（）方法并添加menuScreen（）來(lái)運(yùn)行該方法。

將草圖上傳到你的Arduino并嘗試一下！

第8步：Saucy 7應(yīng)用程序和主菜單方法

sevenScreen（）方法將繪制應(yīng)用程序的屏幕，包括繪制球然后顯示說(shuō)明。

sevenInstr（）方法顯示指令以及從先前的響應(yīng)中清除屏幕。它還繪制了“響應(yīng)”按鈕。

show7Response（）方法處理從屏幕清除先前的響應(yīng)方法，顯示動(dòng)畫(huà)“思考。..”消息，然后顯示隨機(jī)選擇的響應(yīng)消息。

read7Touch（）是等待觸摸事件產(chǎn)生隨機(jī)生成的消息的方法。觸摸代碼與前面描述的showTouch（）診斷方法非常相似。為簡(jiǎn)單起見(jiàn)，該方法將接受屏幕上任何位置的觸摸，因?yàn)椤绊憫?yīng)”按鈕觸摸。

在方法的頂部，我們定義一個(gè)響應(yīng)［］數(shù)組的字符串，這些字符串可以是通過(guò)觸摸事件生成。

如果按下主頁(yè)按鈕，它將結(jié)束應(yīng)用程序并返回主菜單屏幕。否則，該方法將生成0到7之間的隨機(jī)數(shù)（不包括），并將相應(yīng)的文本消息從response ［］數(shù)組傳遞給show7Response（）方法。

最后，backToMenu（）方法監(jiān)視觸摸主頁(yè)按鈕并將控制返回到主菜單屏幕。

當(dāng)您在主菜單屏幕上時(shí)，readMenuTouch（）方法會(huì)監(jiān)視觸摸事件。當(dāng)檢測(cè)到觸摸時(shí)，它將x和y坐標(biāo)傳遞給getFunc（x，y）方法，該方法在funcX ［］和funcY ［］數(shù)組中查找以匹配觸摸的x和y坐標(biāo)。然后它返回func ［］數(shù)組中所選應(yīng)用程序的數(shù)字。 ‘1’是Saucy 7，‘2’是文本輸入應(yīng)用程序。然后它將模式設(shè)置為該應(yīng)用程序的值，以便應(yīng)用程序執(zhí)行。

步驟9：循環(huán)（）塊

我們現(xiàn)在開(kāi)始構(gòu)建loop（）塊代碼來(lái)處理顯示適當(dāng)?shù)钠聊?，然后根?jù)當(dāng)前選擇的選項(xiàng)調(diào)用適當(dāng)?shù)挠|摸方法。

loop（）方法由兩個(gè)switch（）結(jié)構(gòu)組成。

頂部開(kāi)關(guān)結(jié)構(gòu)根據(jù)選擇的選項(xiàng)處理顯示適當(dāng)?shù)钠聊?。它還為適用于當(dāng)前所選選項(xiàng)的觸摸方法設(shè)置 tMode 值。最后，它將模式值設(shè)置為9，以便顯示屏幕不會(huì)無(wú)限重繪。

底部開(kāi)關(guān)結(jié)構(gòu)根據(jù)用戶選擇的應(yīng)用選項(xiàng)控制正在執(zhí)行的觸摸方法，由值表示 tMode 。

將草圖加載到Arduino中，您應(yīng)該可以選擇并使用Saucy 7應(yīng)用程序。

您已經(jīng)做了很多工作的！休息一下： - ）

第10步：文本輸入應(yīng)用程序 - 我們?cè)贖ome Stretch中！

我們現(xiàn)在將合并文本輸入應(yīng)用程序的方法。

makeKbd（）在屏幕上繪制鍵盤。

它繪制了六個(gè)填充的圓角矩形，然后通過(guò)獲取中的字母覆蓋每個(gè)“鍵”上的相應(yīng)字母。 cString 字符串，它通過(guò)鍵在屏幕上打印。請(qǐng)注意， fillRoundedRect（）命令中的倒數(shù)第二個(gè)參數(shù)是每個(gè)角的半徑（以像素為單位）。該值越高，角點(diǎn)越圓。

readKbdTouch（）方法的工作方式與其他觸摸檢測(cè)方法類似。

如果檢測(cè)到觸摸不在主頁(yè)按鈕上，它會(huì)將x和y坐標(biāo)傳遞給curChar（x，y）方法，該方法返回與屏幕上的x和y位置對(duì)應(yīng)的字符。然后，使用‘displayMsg（theChar）方法在屏幕上顯示已“鍵入”的消息。

curChar（x，y）方法搜索 letterX ［］ 和 letterY ［］ 數(shù)組嘗試查找與readKbdTouch（）傳遞的x和y坐標(biāo)接近的匹配項(xiàng)。如果找到匹配項(xiàng)，則會(huì)將相應(yīng)的字母返回給readKbdTouch方法。注意我們將 theChar 變量初始化為32，這是空格字符的ASCII代碼’‘。我們這樣做，以便如果用戶觸摸遠(yuǎn)離鍵盤的區(qū)域，它將不會(huì)顯示不可用的字符。

displayMsg（theChar）方法獲取從curChar（x，y）返回的字符并將其附加到 msg 字符串。然后它會(huì)在屏幕上顯示消息。

最后，我們將更新loop（）塊以接受文本輸入應(yīng)用程序選擇。

將tftDemo草圖上傳到Arduino和你應(yīng)該能夠使用完成的應(yīng)用程序。

恭喜！你已經(jīng)建立了一個(gè)TFT觸摸屏應(yīng)用程序！休息一天剩下的時(shí)間！

第11步：開(kāi)始吧！ - 在草圖中使用Adafruit位圖字體。

標(biāo)準(zhǔn)的tft字體集是可以的。但是如果我們可以在我們的TFT草圖中使用適當(dāng)?shù)奈粓D字體，那就更好了。

缺點(diǎn)是將字體集加載到Arduino內(nèi)存占用了大量空間。實(shí)際上，使用如此多的字體填充草圖非常容易，它不會(huì)加載到Arduino中。

這些字體在您已為此項(xiàng)目安裝的Adafruit_GFX庫(kù)文件夾中可用。有關(guān)使用字體的優(yōu)秀教程，請(qǐng)?jiān)L問(wèn)此站點(diǎn)。

在草圖的“標(biāo)題”區(qū)域中，添加要使用的字體的字體引用。我們將在此示例中使用 FreeSerifBoldItalic18p7b 字體。

#include 《 字體/FreeSerifBoldItalic18pt7b.h》

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

添加以下命令，

tft.setFont（＆FreeSerifBoldItalic18pt7b）;

現(xiàn)在任何 print（）命令將使用當(dāng)前指定的字體。要更改為其他字體，可以使用另一個(gè) tft.setFont（）命令，并使用下一個(gè)要使用的字體。

將字體設(shè)置回標(biāo)準(zhǔn)tft字體，只需使用 tft.setFont（）; 命令，不帶參數(shù)。

將草圖上傳到Arduino，您應(yīng)該看到啟動(dòng)畫(huà)面現(xiàn)在使用位圖字體進(jìn)行渲染屏幕上的文字。你會(huì)注意到，當(dāng)你包含一個(gè)字體時(shí)，草圖的大小要大得多。

第12步：最后的想法

許多其他圖形對(duì)象命令可供您使用。它們包括：

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

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

以下示例使用tft.color565方法讓您根據(jù)紅色，綠色和藍(lán)色值指定顏色。這是使用我們?cè)诓輬D中使用的常量定義的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）;

使用這些命令并探索它們?nèi)绾翁砑拥侥腡FT項(xiàng)目中。

學(xué)習(xí)使用TFT屏幕具有挑戰(zhàn)性，您應(yīng)該為自己花時(shí)間學(xué)習(xí)這些第一步而感到自豪。/p》

TFT屏幕可以為您的Arduino項(xiàng)目添加一個(gè)有吸引力且有用的圖形用戶界面方面。