第1步：面包板

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第2步：基本程序測試

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

WiFi.h

HTTPClient.h

spi.h中

Adafruit_GFX.h

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

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

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

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

第3步：EasyEDA - 原理圖

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

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

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

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

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

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

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

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

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

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

當(dāng)您在PCB環(huán)境中開始時，您會在右側(cè)看到一堆圖層和數(shù)字。將您的單位更改為毫米或您想要使用的任何內(nèi)容，并將捕捉大?。ú蹲酱笮』旧鲜悄梢栽诰W(wǎng)格上放置的間隔）更改為方便的東西。我制作了10mm，因為我希望我的電路板輪廓為100mm x 100mm，然后在我開始放置組件后將其改為0.01mm。

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

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

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

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

第5步：焊接

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

我們在實驗室中使用的焊臺是這些：https：//amzn.to/2K5c6EX，這些都是幫助之手我們使用。現(xiàn)在我已經(jīng)畢業(yè)了，我將無法再直接訪問它們了，一旦我找到自己的位置，我就會為自己買一些。

第6步：更多編程！

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