第1步：本教學中使用的觸摸屏

對于這個Instructable，我將使用浩宇電子的觸摸屏。我使用了以下內容：

5“圖形LCD觸摸屏，800x480，SPI，FT810

此屏幕的運費約為36美元。這比其他更多Arduino屏幕，但你得到了很多錢：

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

板載圖形協處理器和RAM允許控制而不會阻礙Arduino。

內置音頻合成器，帶有高質量的聲音樣本和各種樂器可供選擇。

風景和人像支持（在FT810或更好的上） 。

多點觸控支持。

內置JPEG，波形音頻和視頻解碼器，適用于高級項目。

第2步：準備屏幕

一旦拿到屏幕，就需要將標頭焊接到屏幕上.Haoyu屏幕是很棒，因為它們帶有易于焊接的通孔，您可以選擇直接在屏幕背面或在屏幕背面焊接接頭。小型帶狀電纜，連接到可拆卸的分線板上。

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

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

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

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

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

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

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

如果你的烙鐵頭有一個狹窄的圓錐形尖端，這個步驟會更好。如果你以前從未這樣做過，那么你可能想要在熨斗很酷的時候練習 - 你只有一次機會在熨斗很熱的時候做到這一點！

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

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

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

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

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

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

步驟6：連接電路

從Arduino到LED模塊運行三根跳線，如下所示：

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

面板上的黑色導軌

IN到Arduino上的針腳~5

對于LCD顯示器，連接：

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

GND到面包板上的黑色軌道

SCK到Arduino上的~13腳

MISO將Arduino上的?12引腳

MOSI將Arduino上的~11引腳

CS將Arduino上的引腳~10引腳

PD在Arduino上固定~9

AUDIO進入音頻電路，如面包板和原理圖所示

GND轉到面包板上的黑色導軌

來自Arduino：

從5V引腳到面包板上的紅色導軌運行跳線

從GND引腳到黑色運行跳線面包板上的導軌

音頻輸出電路完成后，您現在可以將耳塞式耳機或一組放大的計算機揚聲器插入音頻插孔。

設計音頻輸出：

顯示面板的AUDIO輸出是一個不是mea的數字信號不能直接駕駛揚聲器。試圖這樣做可能會損壞面板或揚聲器。要提供正確的音頻輸出，您需要構建一個執行以下任務的調理電路：

將數字PWM（脈沖寬度調制）信號轉換為模擬電壓。

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

任務可以通過兩個電阻和兩個電容來完成。

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

步驟7：安裝FastLED庫并運行代碼

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

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

步驟8：代碼概述

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

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（）。它通過調用 CommandProcessor 對象上的方法來繪制用戶界面，該對象將繪圖命令發送到顯示面板。第一組命令用黑色清除屏幕（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”））

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

每個界面按鈕都與標簽相關聯。當用戶單擊某個按鈕時，將使用該標記調用 onTouchStart（）方法，以便您可以對該按鈕采取適當的操作。標簽位于按鈕命令之前，按鈕命令發送指令以在位置（1，1）處標記“鋼琴”按鈕，同時在網格上占據1x1的空間。用于布置鋼琴鍵的代碼類似，但是在循環中發生。

稍后在代碼中，您會找到響應按鈕并按下標簽241的功能：

void PianoScreen：：onTouchStart（uint8_t tag） {

switch（tag） {

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

。..

}

onRefresh（）;

}

當用戶按下按鈕時，代碼會修改一些變量以將儀器設置為 PIANO ，然后調用 onRefresh（）來更新屏幕突出顯示新按鈕。突出顯示由 highlightCallback（）函數完成，該函數在每個按鈕調用 onRefresh（）期間，允許您根據標簽更改按鈕的顏色。突出顯示狀態。

播放聲音的代碼有點不同：

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（）;

}

這包含了這個快速瀏覽的內容。我希望這個介紹足以讓您開始為Arduino項目設計自己的圖形界面！