คำสั่งนี้แสดงวิธีการเพิ่มหน้าจอสัมผัสความละเอียดสูงให้กับ Arduino ของคุณและสร้างเครื่องสังเคราะห์ที่ควบคุมไฟ LED สี! เทคนิคที่คุณเรียนรู้ที่นี่สามารถใช้เป็นรากฐานสำหรับโครงการหน้าจอสัมผัสอื่น ๆ !

ในคำแนะนำนี้คุณจะได้เรียนรู้:

• สถานที่รับหน้าจอสัมผัสความละเอียดสูง 800x480
• ประสานหัวบนหน้าจอสัมผัสได้อย่างไร
• วิธีการพิมพ์ 3 มิติและประกอบขาตั้ง LCD (ขั้นตอนเพิ่มเติม)
• วิธีเชื่อมต่อหน้าจอสัมผัสสีเข้ากับ Arduino Uno
• วิธีการสร้างแจ็ค Line out ให้กับหน้าจอสัมผัสโดยใช้ส่วนประกอบแบบพาสซีฟ
• วิธีเชื่อมโยง LED matrix เข้ากับ Arduino ของคุณ

สำหรับคำแนะนำนี้คุณจะต้อง:

• หน้าจอสัมผัสความละเอียดสูงที่ใช้ชิป FT810 (ดูขั้นตอนต่อไปสำหรับคำแนะนำของฉัน)
• ส่วนหัวตัวผู้ 2x5 และ 1x4 (คุณสามารถซื้อได้แล้วตัดให้ยาว)
• หัวแร้ง
• เทปไฟฟ้า
• สายจัมเปอร์หญิงกับชาย
• สายจัมเปอร์ชายกับชาย
• Arduino Uno
• เขียงหั่นขนม
• ชุดไฟ LED WS2812 (ฉันได้รับโมดูล 4x4 ราคา $ 5 จาก eBay)
• ตัวต้านทาน 220Ohm และ 100Ohm ตัวเก็บประจุเซรามิก 100nF และตัวเก็บประจุแบบฟิล์มบาง 1uF และแจ็คเสียง 3.5 มม.
• เขียงหั่นขนม
• Arduino Uno
• ชุดลำโพงคอมพิวเตอร์หรือหูฟังที่มีการขยายเสียง

เครดิต / Disclaimer: โครงการนี้ใช้ประโยชน์ได้อย่างอิสระและมีไลบรารี่ลิขสิทธิ์ GPL ที่ฉันทำงานในขณะที่ทำงานอยู่ที่ AlephObjects ผู้สร้างเครื่องพิมพ์ 3D โอเพนซอร์ซ LulzBot โครงการและวิดีโอที่เกี่ยวข้องนี้ทำขึ้นตามเวลาที่บ้านโดยใช้อุปกรณ์ของตัวเอง

วัสดุ:

ขั้นตอนที่ 1: หน้าจอสัมผัสที่ใช้ในคำสั่งนี้

สำหรับคำแนะนำนี้ฉันจะใช้หน้าจอสัมผัสจาก Haoyu Electronics ฉันใช้สิ่งต่อไปนี้:

• หน้าจอสัมผัสแบบกราฟิกขนาด 5 นิ้ว, 800x480, SPI, FT810

หน้าจอนี้มีราคาประมาณ $ 36 พร้อมการจัดส่ง นี่เป็นมากกว่าหน้าจอ Arduino อื่น ๆ แต่คุณจะได้รับเงินมากมาย:

• หน้าจอสัมผัสความละเอียดสูงที่คมชัดพร้อมความละเอียด 800x480
• Co-processor กราฟิกออนบอร์ดและ RAM ช่วยให้สามารถควบคุมได้โดยไม่จำเป็นต้องใช้ Arduino
• สร้างเสียงสังเคราะห์พร้อมตัวอย่างเสียงคุณภาพและเครื่องมือต่าง ๆ ให้เลือก
• การสนับสนุนแนวนอนและแนวตั้ง (บน FT810 หรือดีกว่า)
• รองรับมัลติทัช
• JPEG ในตัว, คลื่นเสียงและตัวถอดรหัสวิดีโอสำหรับโครงการขั้นสูง

ขั้นตอนที่ 2: เตรียมหน้าจอ

เมื่อคุณได้รับหน้าจอของคุณคุณจะต้องประสานส่วนหัวไว้ หน้าจอ Haoyu นั้นยอดเยี่ยมเพราะมาพร้อมกับช่องเสียบที่ง่ายต่อการบัดกรีและคุณมีตัวเลือกในการประสานส่วนหัวที่ด้านหลังของหน้าจอโดยตรงหรือที่ปลายสายริบบิ้นขนาดเล็กที่ติดกับกระดานฝ่าวงล้อมที่ถอดออกได้

เพื่อให้งานบัดกรีเสร็จสมบูรณ์คุณจะต้องถอดสายริบบิ้นชั่วคราวและนำบอร์ด PCB ออกจากด้านหลังของแผง ใช้เล็บมือของคุณค่อยๆยกคลิปยึดบนตัวเชื่อมต่อ LCD แล้วปล่อยสายริบบิ้น จากนั้นถอดสกรูสี่ตัวที่ยึดบอร์ดเข้าที่

ตอนนี้ประสานส่วนหัว 5x2 (หรือส่วนหัว 5x1 สอง) ที่คุณต้องการ หุ้มด้านหลังด้วยเทปไฟฟ้าเพื่อหลีกเลี่ยงกางเกงขาสั้น จากนั้นขันสกรู PCB กลับเข้าที่แล้วเสียบสายริบบิ้นกลับเข้าไปใหม่

ขั้นตอนที่ 3: ทางเลือก: พิมพ์ขาตั้ง LCD และเพิ่มส่วนแทรกทองเหลือง

ฉันเลือกที่จะพิมพ์แบบสามมิติเพื่อยืนแผงจอแอลซีดีของฉัน 1

แผงมาพร้อมกับเม็ดมีดทองเหลืองสี่อัน สิ่งเหล่านี้จะถูกนำไปอัดเป็นพลาสติกด้วยความร้อนในขณะที่มันเย็นตัวลงฟันเล็ก ๆ ของพวกมันกัดลงในพลาสติกและป้องกันไม่ให้หลุดออกมา เม็ดมีดเหล่านี้เป็นวิธีการทั่วไปในการเพิ่มหัวข้อที่คงทนให้กับชิ้นส่วนที่พิมพ์ 3 มิติ

เมื่อขาตั้งพิมพ์เสร็จฉันคลายเกลียวทองเหลืองสี่อันออกจากแผง

ฉันทำให้เตารีดของฉันร้อนขึ้นและถือด้วยปลายที่ทำมุมขึ้นปรับสมดุลของเม็ดมีดที่ปลาย จากนั้นฉันก็นำส่วนที่เป็นพลาสติกลงมาแล้วค่อย ๆ ดันเม็ดมีดเข้าไปในรูที่เกิดขึ้นก่อนจนกว่าพวกเขาจะล้างออกด้วยพื้นผิว

ขั้นตอนนี้จะทำงานได้ดีขึ้นหากคุณมีหัวแร้งที่มีปลายเรียวแคบ หากคุณไม่เคยทำสิ่งนี้มาก่อนคุณอาจต้องการฝึกฝนในขณะที่เหล็กเย็น - คุณมีโอกาสทำเพียงครั้งเดียวเมื่อเหล็กร้อน!

ระวังด้วยขั้นตอนนี้เนื่องจากเม็ดมีดทองเหลืองจะร้อนมากและคุณไม่ต้องการให้มันหล่นบนตัก ทำงานบนพื้นผิวที่ทนความร้อนและหากตกจากปลายเหล็กให้ต้านทานการล่อลวงให้เข้าถึงพวกเขาทันที!

1 แหล่งที่มา: ไฟล์ LCD STL และ CAD

ขั้นตอนที่ 4: นำฟิล์มออกแล้วติดตั้งจอแสดงผล

ทีนี้ให้พลิกจอแสดงผลและนำกรอบอะคริลิกด้านหน้าออกแล้วลอกฟิล์มป้องกันออกจากแผง LCD (สิ่งนี้จะช่วยเพิ่มความคมชัดของจอแสดงผล) ใช้สกรูเพื่อยึดจอแสดงผลบนขาตั้งพิมพ์ 3 มิติ

ขั้นตอนที่ 5: ประสานหัวกับโมดูล LED

ใช้หัวกัดด้านข้างเพื่อแยกส่วนหัวความยาวสี่พินแล้วบัดกรีเข้ากับโมดูล LED ดังที่แสดงในภาพ คุณสามารถลดความยาวของสายจัมเปอร์ได้ครึ่งหนึ่งและบัดกรีสายตรงถ้าต้องการ

ขั้นตอนที่ 6: วางสายวงจร

รันสายจัมเปอร์สามเส้นจาก Arduino ไปยังโมดูล LED ดังนี้:

• 5V ไปยังรางสีแดงบนเขียงหั่นขนม
• GND เป็นรางสีดำบนเขียงหั่นขนม
• ในการ pin ~ 5 บน Arduino

สำหรับจอ LCD ให้เชื่อมต่อ:

• 5V ไปยังรางสีแดงบนเขียงหั่นขนม
• GND เป็นรางสีดำบนเขียงหั่นขนม
• SCK เพื่อ pin ~ 13 บน Arduino
• MISO เพื่อ pin ~ 12 บน Arduino
• MOSI เพื่อ pin ~ 11 บน Arduino
• CS เพื่อ pin ~ 10 บน Arduino
• PD เพื่อ pin ~ 9 บน Arduino
• AUDIO ไปที่วงจรเสียงตามที่แสดงใน breadboard และ schematic
• GND ไปที่รางสีดำบนเขียงหั่นขนม

จาก Arduino:

• รันสายจัมเปอร์จากขา 5V ไปยังรางสีแดงบนเขียงหั่นขนม
• ใช้สายจัมเปอร์จากพิน GND ไปยังรางสีดำบนเขียงหั่นขนม

เมื่อวงจรเอาท์พุทเสียงเสร็จสมบูรณ์คุณสามารถเสียบหูฟังหูฟังหรือชุดลำโพงคอมพิวเตอร์ขยายเสียงเข้ากับแจ็คเสียง

การออกแบบของเอาต์พุตเสียง:

เอาต์พุต AUDIO ของจอแสดงผลเป็นสัญญาณดิจิตอลที่ไม่ได้มีไว้เพื่อขับลำโพงโดยตรง การพยายามทำเช่นนั้นอาจทำให้แผงหรือลำโพงเสียหาย ในการให้สัญญาณเสียงที่เหมาะสมคุณจะต้องสร้างวงจรการปรับสภาพที่ทำงานดังต่อไปนี้:

• แปลงสัญญาณดิจิตอล PWM (ปรับความกว้างพัลส์) เป็นแรงดันไฟฟ้าอะนาล็อก
• จำกัด กระแสไฟขาออกและแรงดันไฟฟ้าให้อยู่ในระดับที่ปลอดภัย

งานสามารถทำได้ด้วยตัวต้านทานสองตัวและตัวเก็บประจุสองตัว

ฉันตรวจสอบแผ่นข้อมูลสำหรับชิป FTDI FT810 และพบว่าพิน AUDIO สามารถขับได้สูงสุด 16mA ที่ 3.3V ซึ่งหมายความว่าโหลดจะต้องมีความต้านทานไม่น้อยกว่า 206 โอห์ม เพื่อป้องกันไม่ให้พินเกิดขึ้นฉันเริ่มต้นด้วยการวางตัวต้านทาน 220 โอห์มในซีรีย์ด้วย AUDIO pin ฉันเพิ่มตัวต้านทานอีก 100 โอห์มลงในกราวด์เพื่อสร้างตัวแบ่งแรงดัน เมื่อไม่มีอะไรเชื่อมต่อกับแจ็คสิ่งนี้จะลดระดับ 3.3V ลงไปที่ระดับประมาณ 1V ซึ่งปลอดภัยสำหรับเสียงระดับสาย 100nF สร้างตัวกรองความถี่ต่ำผ่านซึ่งทำให้สัญญาณ PWM ความถี่สูงราบรื่นขึ้นในขณะที่ผ่านความถี่เสียง ตัวเก็บประจุ 1uF ที่เหลือเรียกว่า AC coupling มันบล็อกกระแสตรงจากการไหลออกแจ็คเสียงในขณะที่ปล่อยให้สัญญาณเสียงซึ่งเป็น AC ผ่าน

ขั้นตอนที่ 7: การติดตั้งไลบรารี FastLED และเรียกใช้รหัส

ดาวน์โหลดไฟล์. zip ที่มีร่าง Arduino จากที่เก็บ github ของฉัน

เปิด Arduino IDE และไปที่ "Sketch" -> "Include Library" -> "Manage Libraries … " ติดตั้งไลบรารี "FastLED" โดย Daniel Garcia จากนั้นเปิดไฟล์ "RainbowPiano.ino" และอัปโหลดไปยัง Arduino Uno ของคุณ!

ขั้นตอนที่ 8: ภาพรวมของรหัส

รหัสใช้ประโยชน์จากเฟรมเวิร์ก UI ที่ฉันพัฒนาใน C ++ เฟรมเวิร์กนี้อนุญาตให้คุณสร้างอินเทอร์เฟซจากหนึ่งในหน้าจอ UI เพิ่มเติม แอพเปียโนมีหน้าจอเดียวเท่านั้นซึ่งกำหนดโดยรหัสต่อไปนี้:

คลาส PianoScreen: public InterfaceScreen {… public: void คงที่ onEntry (); โมฆะคงที่ onRedraw (draw_mode_t อะไร); โมฆะคงที่ onTouchStart (แท็ก uint8_t); โมฆะคงที่ onIdle (); }; // แสดงหน้าจอทั้งหมดในแอปของคุณในตารางต่อไปนี้ SCREEN_TABLE {DECL_SCREEN (PianoScreen)}; SCREEN_TABLE_POST โมฆะ PianoScreen:: onEntry () {// รหัสที่ดำเนินการเมื่อหน้าจอปรากฏขึ้น} void PianoScreen:: onRedraw (draw_mode_t what) {// รหัสที่ทำงานเพื่อวาดหน้าจอ} void PianoScreen:: onTouchStart (uint8_t tag) // รหัสที่ทำงานเมื่อผู้ใช้สัมผัสหน้าจอ} void PianoScreen:: onIdle () {// รหัสสำหรับงานที่ทำงานในขณะที่หน้าจอทำงานอยู่}

วิธีการที่สำคัญที่สุดคือ onRedraw (). มันวาดส่วนติดต่อผู้ใช้โดยการเรียกวิธีการใน CommandProcessor วัตถุซึ่งส่งคำสั่งการวาดไปยังแผงจอแสดงผล ชุดคำสั่งแรกจะล้างหน้าจอด้วยสีดำ (0x000000):

CommandProcessor cmd; cmd.cmd (CLEAR_COLOR_RGB (0x000000)).cmd (CLEAR (จริง, จริง, จริง));

จากนั้นรหัสจะดึงปุ่มเลือกเครื่องมือที่ด้านบนของหน้าจอ:

#define GRID_ROWS 8 #define GRID_COLS 6 cmd.font (font_small).fgcolor (สีดำ).tag (241).button (BTN_POS (1,1), BTN_SIZE (1,1), F ("เปียโน")

มีสองสิ่งที่ควรทราบที่นี่ ก่อนอื่นไลบรารี UI ให้คุณจัดวางอินเทอร์เฟซบนกริด ในกรณีนี้ฉันจัดวางอินเทอร์เฟซของฉันบนตารางขนาด 6x8 ฉันจะตั้งค่าแบบอักษรและสีตามด้วยแท็ก

ปุ่มอินเตอร์เฟสแต่ละปุ่มเชื่อมโยงกับแท็ก เมื่อผู้ใช้คลิกที่ปุ่ม onTouchStart () เมธอดถูกเรียกพร้อมกับแท็กนั้นเพื่อให้คุณสามารถดำเนินการที่เหมาะสมสำหรับปุ่มนั้น แท็กนำหน้าคำสั่งปุ่มซึ่งจะส่งคำแนะนำในการวางตำแหน่งปุ่มที่มีชื่อว่า "เปียโน" ที่ตำแหน่ง (1,1) ในขณะที่ใช้พื้นที่ 1x1 บนกริด รหัสสำหรับการจัดวางคีย์เปียโนนั้นคล้ายกัน แต่เกิดขึ้นในวง

ต่อมาในรหัสคุณจะพบฟังก์ชั่นที่ตอบสนองต่อปุ่มโดยกดแท็ก 241:

เป็นโมฆะ PianoScreen:: onTouchStart (แท็ก uint8_t) {เปลี่ยน (แท็ก) {เคส 241: highlighted_instrument = tag; เครื่องดนตรี = PIANO; ทำลาย; … } onRefresh (); }

เมื่อผู้ใช้กดปุ่มรหัสจะปรับเปลี่ยนตัวแปรบางอย่างเพื่อตั้งค่าเครื่องมือเป็น เปียโน แล้วโทร onRefresh () เพื่ออัปเดตหน้าจอด้วยปุ่มใหม่ที่ไฮไลต์ การไฮไลต์ทำได้โดยการ highlightCallback () ฟังก์ชั่นซึ่งในระหว่าง onRefresh () ถูกเรียกใช้สำหรับแต่ละปุ่มเพื่อให้คุณสามารถเปลี่ยนสีของปุ่มตามแท็กและสถานะการไฮไลต์

รหัสสำหรับเล่นเสียงต่างออกไปเล็กน้อย:

void PianoScreen:: onTouchStart (แท็ก uint8_t) {สวิตช์ (แท็ก) {… ค่าเริ่มต้น: // รหัสสำหรับการตั้งค่าสี LED … ถ้า (เครื่องดนตรี == HIHAT) {// กรณีพิเศษสำหรับบันทึกกลองชุด} อื่น { // ปิดเสียงโน้ตเล่น (เครื่องดนตรี, NOTE_C3 + แท็ก - 1); } highlighted_note = แท็ก; } onRefresh (); }

นี่เป็นการสรุปสำหรับการเดินที่รวดเร็วนี้ ฉันหวังว่าการแนะนำนี้เพียงพอที่จะให้คุณเริ่มต้นในการออกแบบส่วนต่อประสานกราฟิกของคุณสำหรับโครงการ Arduino ของคุณ!