第1步：本教學(xué)中使用的觸摸屏

對(duì)于這個(gè)Instructable，我將使用浩宇電子的觸摸屏。我使用了以下內(nèi)容：

5“圖形LCD觸摸屏，800x480，SPI，F(xiàn)T810

此屏幕的運(yùn)費(fèi)約為36美元。這比其他更多Arduino屏幕，但你得到了很多錢：

清晰的高分辨率觸摸面板，分辨率為800x480。

板載圖形協(xié)處理器和RAM允許控制而不會(huì)阻礙Arduino。

內(nèi)置音頻合成器，帶有高質(zhì)量的聲音樣本和各種樂器可供選擇。

風(fēng)景和人像支持（在FT810或更好的上） 。

多點(diǎn)觸控支持。

內(nèi)置JPEG，波形音頻和視頻解碼器，適用于高級(jí)項(xiàng)目。

第2步：準(zhǔn)備屏幕

一旦拿到屏幕，就需要將標(biāo)頭焊接到屏幕上.Haoyu屏幕是很棒，因?yàn)樗鼈儙в幸子诤附拥耐祝梢赃x擇直接在屏幕背面或在屏幕背面焊接接頭。小型帶狀電纜，連接到可拆卸的分線板上。

要完成焊接作業(yè)，您需要暫時(shí)斷開帶狀電纜并從面板背面取下PCB板。用指甲輕輕提起LCD連接器上的固定夾，然后釋放帶狀電纜。然后，取下固定電路板的四個(gè)螺釘。

現(xiàn)在將5x2接頭（或兩個(gè)5x1接頭）焊接到您想要的位置。用電工膠帶蓋住背面以避免短路。然后，重新擰上PCB并重新連接帶狀電纜。

步驟3：可選：打印LCD支架并添加黃銅插件

我選擇3D打印用于固定LCD面板的支架［1］

面板配有四個(gè)黃銅插件;這些都是用熱量壓成塑料的。當(dāng)它們冷卻時(shí)，它們上的小齒咬入塑料中并防止它們掉出來。這些刀片是為3D打印部件添加耐用螺紋的常用方法。

一旦支架完成打印，我從面板上擰下四個(gè)黃銅插件。

我加熱了我的熨斗并將尖端向上傾斜，輕輕平衡尖端上的插入物。然后我將塑料部件放在上面，然后慢慢地將插件推入預(yù)先形成的孔中，直到它們與表面齊平。

如果你的烙鐵頭有一個(gè)狹窄的圓錐形尖端，這個(gè)步驟會(huì)更好。如果你以前從未這樣做過，那么你可能想要在熨斗很酷的時(shí)候練習(xí) - 你只有一次機(jī)會(huì)在熨斗很熱的時(shí)候做到這一點(diǎn)！

小心這一步作為黃銅插件變得非常熱，你不希望它們落在你的腿上。在耐熱表面上工作，如果它們從鐵尖上脫落，就要抵制立即觸及它們的誘惑！

［1］來源：LCD支架STL和CAD文件

步驟4：取下膠片并裝載顯示器

現(xiàn)在，翻轉(zhuǎn)顯示器并取下前面的丙烯酸框架，然后從液晶面板上剝下保護(hù)膜（這將增強(qiáng)顯示器的清晰度）。使用螺釘將顯示器安裝在3D打印支架上。

步驟5：將焊頭連接到LED模塊

如圖所示，使用側(cè)面切割器斷開四針長度的接頭并將它們焊接到LED模塊上。如果您愿意，也可以將跳線長度切成兩半并直接焊接。

步驟6：連接電路

從Arduino到LED模塊運(yùn)行三根跳線，如下所示：

面包板上的5V到紅色軌道

面板上的黑色導(dǎo)軌

IN到Arduino上的針腳~5

對(duì)于LCD顯示器，連接：

5V到面包板上的紅色軌道

GND到面包板上的黑色軌道

SCK到Arduino上的~13腳

MISO將Arduino上的?12引腳

MOSI將Arduino上的~11引腳

CS將Arduino上的引腳~10引腳

PD在Arduino上固定~9

AUDIO進(jìn)入音頻電路，如面包板和原理圖所示

GND轉(zhuǎn)到面包板上的黑色導(dǎo)軌

來自Arduino：

從5V引腳到面包板上的紅色導(dǎo)軌運(yùn)行跳線

從GND引腳到黑色運(yùn)行跳線面包板上的導(dǎo)軌

音頻輸出電路完成后，您現(xiàn)在可以將耳塞式耳機(jī)或一組放大的計(jì)算機(jī)揚(yáng)聲器插入音頻插孔。

設(shè)計(jì)音頻輸出：

顯示面板的AUDIO輸出是一個(gè)不是mea的數(shù)字信號(hào)不能直接駕駛揚(yáng)聲器。試圖這樣做可能會(huì)損壞面板或揚(yáng)聲器。要提供正確的音頻輸出，您需要構(gòu)建一個(gè)執(zhí)行以下任務(wù)的調(diào)理電路：

將數(shù)字PWM（脈沖寬度調(diào)制）信號(hào)轉(zhuǎn)換為模擬電壓。

將輸出電流和電壓限制在安全水平。

任務(wù)可以通過兩個(gè)電阻和兩個(gè)電容來完成。

我查了一下FTDI FT810芯片的數(shù)據(jù)表發(fā)現(xiàn)，AUDIO引腳可以在3.3V時(shí)驅(qū)動(dòng)高達(dá)16mA的電流。這意味著負(fù)載必須具有不小于206歐姆的電阻。為了保護(hù)引腳免受短路的影響，我首先將一個(gè)220歐姆的電阻與AUDIO引腳串聯(lián)。然后我將另一個(gè)100歐姆電阻器接地，形成一個(gè)分壓器。當(dāng)沒有任何東西連接到插孔時(shí)，這會(huì)將3.3V降低到大約1V的水平，這對(duì)于線路電平音頻是安全的。 100nF形成一個(gè)低通濾波器，可以在傳遞音頻的同時(shí)消除高頻PWM噪聲。剩下的1uF電容稱為交流耦合電容。它阻止直流電流流出音頻插孔，同時(shí)讓音頻信號(hào)（即AC）通過。

步驟7：安裝FastLED庫并運(yùn)行代碼

從我的github存儲(chǔ)庫下載包含Arduino sketch的.zip文件。

打開Arduino IDE并進(jìn)入“Sketch” - 》“Include”圖書館“ - 》”管理圖書館。..。..“。安裝Daniel Garcia的“FastLED”庫。然后，打開“RainbowPiano.ino”文件并將其上傳到您的Arduino Uno！

步驟8：代碼概述

代碼使使用我在C ++中開發(fā)的UI框架。此框架允許您從一個(gè)或多個(gè)UI屏幕構(gòu)建界面。鋼琴應(yīng)用程序只有一個(gè)屏幕，由以下代碼定義：

class PianoScreen ： public InterfaceScreen {

。..

public：

static void onEntry（）;

static void onRedraw（draw_mode_t what）;

static void onTouchStart（uint8_t tag）;

static void onIdle（）;

};

// List all screens in your app in the following table

SCREEN_TABLE {

DECL_SCREEN（PianoScreen）

};

SCREEN_TABLE_POST

void PianoScreen：：onEntry（） {

// Code that executes when a screen is shown

}

void PianoScreen：：onRedraw（draw_mode_t what） {

// Code that runs to draw a screen

}

void PianoScreen：：onTouchStart（uint8_t tag） {

// Code that runs when the user touches the screen

}

void PianoScreen：：onIdle（） {

// Code for tasks that run while the screen is active

}

其中，最重要的方法是 onRedraw（）。它通過調(diào)用 CommandProcessor 對(duì)象上的方法來繪制用戶界面，該對(duì)象將繪圖命令發(fā)送到顯示面板。第一組命令用黑色清除屏幕（0x000000）：

CommandProcessor cmd;

cmd.cmd（CLEAR_COLOR_RGB（0x000000））

.cmd（CLEAR（true，true，true））;

然后，代碼繪制屏幕頂部的儀器選擇按鈕：

#define GRID_ROWS 8

#define GRID_COLS 6

cmd.font（font_small）

.fgcolor（black）

.tag（241）.button（ BTN_POS（1，1）， BTN_SIZE（1，1）， F（“Piano”））

這里有幾點(diǎn)需要注意。首先，UI庫允許您在網(wǎng)格上布局界面。在這種情況下，我將接口布局在6x8網(wǎng)格上。然后我設(shè)置字體和顏色，然后是標(biāo)簽。

每個(gè)界面按鈕都與標(biāo)簽相關(guān)聯(lián)。當(dāng)用戶單擊某個(gè)按鈕時(shí)，將使用該標(biāo)記調(diào)用 onTouchStart（）方法，以便您可以對(duì)該按鈕采取適當(dāng)?shù)牟僮鳌?biāo)簽位于按鈕命令之前，按鈕命令發(fā)送指令以在位置（1，1）處標(biāo)記“鋼琴”按鈕，同時(shí)在網(wǎng)格上占據(jù)1x1的空間。用于布置鋼琴鍵的代碼類似，但是在循環(huán)中發(fā)生。

稍后在代碼中，您會(huì)找到響應(yīng)按鈕并按下標(biāo)簽241的功能：

void PianoScreen：：onTouchStart（uint8_t tag） {

switch（tag） {

case 241： highlighted_instrument = tag; instrument = PIANO; break;

。..

}

onRefresh（）;

}

當(dāng)用戶按下按鈕時(shí)，代碼會(huì)修改一些變量以將儀器設(shè)置為 PIANO ，然后調(diào)用 onRefresh（）來更新屏幕突出顯示新按鈕。突出顯示由 highlightCallback（）函數(shù)完成，該函數(shù)在每個(gè)按鈕調(diào)用 onRefresh（）期間，允許您根據(jù)標(biāo)簽更改按鈕的顏色。突出顯示狀態(tài)。

播放聲音的代碼有點(diǎn)不同：

void PianoScreen：：onTouchStart（uint8_t tag） {

switch（tag） {

。..

default：

// Code for setting the LED colors

。..

if（instrument == HIHAT） {

// Special case for drum kit notes

} else {

// Sound off the note

sound.play（instrument， NOTE_C3 + tag - 1）;

}

highlighted_note = tag;

}

onRefresh（）;

}

這包含了這個(gè)快速瀏覽的內(nèi)容。我希望這個(gè)介紹足以讓您開始為Arduino項(xiàng)目設(shè)計(jì)自己的圖形界面！