第1步:本教學中使用的觸摸屏
對于這個Instructable,我將使用浩宇電子的觸摸屏。我使用了以下內(nèi)容:
5“圖形LCD觸摸屏,800x480,SPI,F(xiàn)T810
此屏幕的運費約為36美元。這比其他更多Arduino屏幕,但你得到了很多錢:
清晰的高分辨率觸摸面板,分辨率為800x480。
板載圖形協(xié)處理器和RAM允許控制而不會阻礙Arduino。
內(nèi)置音頻合成器,帶有高質(zhì)量的聲音樣本和各種樂器可供選擇。
風景和人像支持(在FT810或更好的上) 。
多點觸控支持。
內(nèi)置JPEG,波形音頻和視頻解碼器,適用于高級項目。
第2步:準備屏幕
一旦拿到屏幕,就需要將標頭焊接到屏幕上.Haoyu屏幕是很棒,因為它們帶有易于焊接的通孔,您可以選擇直接在屏幕背面或在屏幕背面焊接接頭。小型帶狀電纜,連接到可拆卸的分線板上。
要完成焊接作業(yè),您需要暫時斷開帶狀電纜并從面板背面取下PCB板。用指甲輕輕提起LCD連接器上的固定夾,然后釋放帶狀電纜。然后,取下固定電路板的四個螺釘。
現(xiàn)在將5x2接頭(或兩個5x1接頭)焊接到您想要的位置。用電工膠帶蓋住背面以避免短路。然后,重新擰上PCB并重新連接帶狀電纜。
步驟3:可選:打印LCD支架并添加黃銅插件
我選擇3D打印用于固定LCD面板的支架[1]
面板配有四個黃銅插件;這些都是用熱量壓成塑料的。當它們冷卻時,它們上的小齒咬入塑料中并防止它們掉出來。這些刀片是為3D打印部件添加耐用螺紋的常用方法。
一旦支架完成打印,我從面板上擰下四個黃銅插件。
我加熱了我的熨斗并將尖端向上傾斜,輕輕平衡尖端上的插入物。然后我將塑料部件放在上面,然后慢慢地將插件推入預先形成的孔中,直到它們與表面齊平。
如果你的烙鐵頭有一個狹窄的圓錐形尖端,這個步驟會更好。如果你以前從未這樣做過,那么你可能想要在熨斗很酷的時候練習 - 你只有一次機會在熨斗很熱的時候做到這一點!
小心這一步作為黃銅插件變得非常熱,你不希望它們落在你的腿上。在耐熱表面上工作,如果它們從鐵尖上脫落,就要抵制立即觸及它們的誘惑!
[1]來源:LCD支架STL和CAD文件
步驟4:取下膠片并裝載顯示器
現(xiàn)在,翻轉(zhuǎn)顯示器并取下前面的丙烯酸框架,然后從液晶面板上剝下保護膜(這將增強顯示器的清晰度)。使用螺釘將顯示器安裝在3D打印支架上。
步驟5:將焊頭連接到LED模塊
如圖所示,使用側(cè)面切割器斷開四針長度的接頭并將它們焊接到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轉(zhuǎn)到面包板上的黑色導軌
來自Arduino:
從5V引腳到面包板上的紅色導軌運行跳線
從GND引腳到黑色運行跳線面包板上的導軌
音頻輸出電路完成后,您現(xiàn)在可以將耳塞式耳機或一組放大的計算機揚聲器插入音頻插孔。
設(shè)計音頻輸出:
顯示面板的AUDIO輸出是一個不是mea的數(shù)字信號不能直接駕駛揚聲器。試圖這樣做可能會損壞面板或揚聲器。要提供正確的音頻輸出,您需要構(gòu)建一個執(zhí)行以下任務的調(diào)理電路:
將數(shù)字PWM(脈沖寬度調(diào)制)信號轉(zhuǎn)換為模擬電壓。
將輸出電流和電壓限制在安全水平。
我查了一下FTDI FT810芯片的數(shù)據(jù)表發(fā)現(xiàn),AUDIO引腳可以在3.3V時驅(qū)動高達16mA的電流。這意味著負載必須具有不小于206歐姆的電阻。為了保護引腳免受短路的影響,我首先將一個220歐姆的電阻與AUDIO引腳串聯(lián)。然后我將另一個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 ++中開發(fā)的UI框架。此框架允許您從一個或多個UI屏幕構(gòu)建界面。鋼琴應用程序只有一個屏幕,由以下代碼定義:
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 對象上的方法來繪制用戶界面,該對象將繪圖命令發(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”))
這里有幾點需要注意。首先,UI庫允許您在網(wǎng)格上布局界面。在這種情況下,我將接口布局在6x8網(wǎng)格上。然后我設(shè)置字體和顏色,然后是標簽。
每個界面按鈕都與標簽相關(guān)聯(lián)。當用戶單擊某個按鈕時,將使用該標記調(diào)用 onTouchStart()方法,以便您可以對該按鈕采取適當?shù)牟僮鳌撕炍挥诎粹o命令之前,按鈕命令發(fā)送指令以在位置(1,1)處標記“鋼琴”按鈕,同時在網(wǎng)格上占據(jù)1x1的空間。用于布置鋼琴鍵的代碼類似,但是在循環(huán)中發(fā)生。
稍后在代碼中,您會找到響應按鈕并按下標簽241的功能:
void PianoScreen::onTouchStart(uint8_t tag) {
switch(tag) {
case 241: highlighted_instrument = tag; instrument = PIANO; break;
。..
}
onRefresh();
}
當用戶按下按鈕時,代碼會修改一些變量以將儀器設(shè)置為 PIANO ,然后調(diào)用 onRefresh()來更新屏幕突出顯示新按鈕。突出顯示由 highlightCallback()函數(shù)完成,該函數(shù)在每個按鈕調(diào)用 onRefresh()期間,允許您根據(jù)標簽更改按鈕的顏色。突出顯示狀態(tài)。
播放聲音的代碼有點不同:
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();
}
這包含了這個快速瀏覽的內(nèi)容。我希望這個介紹足以讓您開始為Arduino項目設(shè)計自己的圖形界面!
-
led
+關(guān)注
關(guān)注
240文章
22999瀏覽量
654841 -
合成器
+關(guān)注
關(guān)注
0文章
264瀏覽量
25296 -
Arduino
+關(guān)注
關(guān)注
187文章
6455瀏覽量
186362
發(fā)布評論請先 登錄
相關(guān)推薦
評論