第1步：面包板

首先，您需要根據(jù)電路原理圖將面板中的所有組件接線。如圖所示。您應(yīng)該完全按照原理圖中的說(shuō)明連接屏幕，因?yàn)檫@些引腳與屏幕的庫(kù)一起使用，但是，按鈕并不重要，您可以隨心所欲地執(zhí)行任何操作。您根本不必使用4個(gè)按鈕或任何按鈕，如果您真的想要，可以使用操縱桿。以下是我使用的引腳。請(qǐng)注意，這些是編程中使用的引腳，而不是物理引腳。例如，CS引腳連接到引腳22，當(dāng)從原理圖看時(shí)，引腳22實(shí)際上是從右上角開(kāi)始的第三個(gè)引腳。有一些不同版本的ESP-32，因此有些引腳可能與本項(xiàng)目中顯示的不完全相同。如果您的不同，請(qǐng)嘗試為您的版本找到引腳圖。

屏幕引腳--------- ESP-32引腳

CS -------------------- 22

DC -------------------- 21

MOSI ------------ ----- 23

CLK ------------------- 19

RST -------- ----------- 18

MISO ---------------- 25

確保你有這些權(quán)利，你在屏幕上連接兩個(gè)VCC和接地引腳。

按鈕1 - ----------- 35

按鈕2 ------------ 34

按鈕3 ------- ----- 33

按鈕4 ------------ 32

10uF電容連接到ESP-32上的EN引腳并且開(kāi)始了。電容器的方向無(wú)關(guān)緊要。

最后一點(diǎn)是確保Esp-32的5v引腳和GND引腳分別連接到VCC和GND。然后你應(yīng)該能夠?qū)?shù)據(jù)線插入ESP-32并且屏幕應(yīng)該打開(kāi)并且是白色的。

第2步：基本程序測(cè)試

我會(huì)繼續(xù)并附上一些初學(xué)者代碼，這些代碼將幫助您測(cè)試組件并從API中提取數(shù)據(jù)。在Arduino中有5個(gè)庫(kù)需要繼續(xù)下載。這些庫(kù)是

WiFi.h

HTTPClient.h

spi.h中

Adafruit_GFX.h

Adafruit_ILI9341.h （ILI9341是此特定屏幕，這是該屏幕的庫(kù)）

要在Arduino中添加庫(kù)，請(qǐng)轉(zhuǎn)到“工具”》“管理庫(kù)”，然后搜索上面提到的三個(gè)庫(kù)。

我附加的入門(mén)代碼應(yīng)顯示為每個(gè)按下的按鈕繪制一個(gè)小圓圈。耐克股票的價(jià)格應(yīng)該畫(huà)在屏幕中間的某個(gè)地方。當(dāng)按下一個(gè)不同的按鈕時(shí)，會(huì)出現(xiàn)一個(gè)新的圓圈。

如果這一切都有效，你知道你的組件正常工作。

第3步：EasyEDA - 原理圖

得到https：//easyeda.com/創(chuàng)建一個(gè)免費(fèi)帳戶并完成所有這些工作。

當(dāng)您設(shè)置EasyEDA時(shí)，首先要?jiǎng)?chuàng)建一個(gè)新項(xiàng)目并制作一個(gè)新的原理圖。您要確保放置所有零件并按照我在原理圖中顯示的方式連接它們，除非您想以某種方式使它們與眾不同。在左側(cè)，您可以在各個(gè)庫(kù)中搜索所需的部件，然后將它們放在原理圖中。

如果搜索以下術(shù)語(yǔ)，您應(yīng)該能夠找到所有組件。這些是零件清單圖片中的所有項(xiàng)目，但我會(huì)繼續(xù)在下面輸入，以便您可以根據(jù)需要復(fù)制和粘貼它們。

ESP32S Devkit - ADV（轉(zhuǎn)到左邊的“庫(kù)”，然后在用戶提供下搜索）

2.2 TFT LCD - ADV（轉(zhuǎn)到“庫(kù)”上在用戶提供的情況下左右搜索）

C110153（轉(zhuǎn)到左邊的“庫(kù)”，然后在LCSC下搜索）

C94705（轉(zhuǎn)到“庫(kù)”上左轉(zhuǎn)并在LCSC下搜索）

C58673（轉(zhuǎn)到左邊的“圖書(shū)館”，然后在LCSC下搜索）

放好所有組件后，將它們連接到正確的引腳以及GDN和VCC連接。您可以使用接線工具連接它們并放置GND和VCC符號(hào)。然后，一旦正確連接了所有電線，就可以單擊轉(zhuǎn)換為PCB按鈕。

步驟4：EasyEDA - PCB設(shè)計(jì)

當(dāng)您在PCB環(huán)境中開(kāi)始時(shí)，您會(huì)在右側(cè)看到一堆圖層和數(shù)字。將您的單位更改為毫米或您想要使用的任何內(nèi)容，并將捕捉大小（捕捉大小基本上是您可以在網(wǎng)格上放置的間隔）更改為方便的東西。我制作了10mm，因?yàn)槲蚁Ｍ业碾娐钒遢喞獮?00mm x 100mm，然后在我開(kāi)始放置組件后將其改為0.01mm。

首先編輯電路板輪廓圖層（單擊顏色并出現(xiàn)一支鉛筆），然后繪制電路板輪廓，在我的情況下，我的電路板為100mmx100mm。完成后，編輯頂層并開(kāi)始將組件放在板上，將它們拖放到輪廓上。

然后放置組件后，用線工具連接所有藍(lán)線，除非它們連接到GND或VCC。 GND和VCC連接直接連接到電路板，無(wú)需通過(guò)電線隔離。將所有非VCC和GND連接連接在一起后，可以使用銅區(qū)域工具進(jìn)行最后的連接。在頂層執(zhí)行一次，在底層執(zhí)行一次。確保在屬性選項(xiàng)卡中將其中一個(gè)銅區(qū)域更改為VCC，我通常將頂層GND和底層VCC。

完成后，電路板看起來(lái)應(yīng)該完整，您可以放大以查看GND連接到電路板的位置。此時(shí)，您希望通過(guò)刷新最左側(cè)設(shè)計(jì)管理器選項(xiàng)卡下的DRC錯(cuò)誤來(lái)檢查DRC錯(cuò)誤。如果沒(méi)有錯(cuò)誤，您可以去訂購(gòu)您的電路板。要訂購(gòu)電路板，請(qǐng)單擊頂部功能區(qū)中帶有G和向右箭頭的按鈕以導(dǎo)出Gerber文件。這將直接帶你到你購(gòu)買(mǎi)電路板的地方，有很多不同顏色和飾面的選擇會(huì)影響電路板的價(jià)格，對(duì)于PCB厚度，我認(rèn)為1.6是我們通常做的。

如果要仔細(xì)檢查組件是否合適，可以導(dǎo)出電路板的PNG圖像，然后將組件推入紙張，以查看插腳是否合適。不要擔(dān)心縮放它，你應(yīng)該可以打印出來(lái)。

第5步：焊接

當(dāng)所有部件都安裝到位時(shí)，將所有組件焊接到電路板上是非常令人滿意的。焊接的整個(gè)過(guò)程可以在我制作的視頻中看到。

我們?cè)趯?shí)驗(yàn)室中使用的焊臺(tái)是這些：https：//amzn.to/2K5c6EX，這些都是幫助之手我們使用?，F(xiàn)在我已經(jīng)畢業(yè)了，我將無(wú)法再直接訪問(wèn)它們了，一旦我找到自己的位置，我就會(huì)為自己買(mǎi)一些。

第6步：更多編程！

我覺(jué)得放棄我的所有代碼都不太合適，因?yàn)樗菫閷W(xué)校作業(yè)完成的，你應(yīng)該嘗試使用自己的設(shè)備發(fā)揮創(chuàng)意并且讓它做你感興趣的事情。