Arduino Uno: แอนิเมชั่นบิตแมปบน ILI9341 TFT Touchscreen Display Shield พร้อม Visuino: 12 ขั้นตอน (พร้อมรูปภาพ)

2025 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2025-01-13 06:58

ILI9341 ที่ใช้ TFT Touchscreen Display Shields เป็น Display Shields ราคาประหยัดที่ได้รับความนิยมอย่างมากสำหรับ Arduino Visuino ได้รับการสนับสนุนสำหรับพวกเขามาระยะหนึ่งแล้ว แต่ฉันไม่เคยมีโอกาสเขียนบทช่วยสอนเกี่ยวกับวิธีการใช้งาน เมื่อเร็ว ๆ นี้มีเพียงไม่กี่คนที่ถามคำถามเกี่ยวกับการใช้จอแสดงผลกับ Visuino ดังนั้นฉันจึงตัดสินใจทำแบบฝึกหัด

ในบทช่วยสอนนี้ ฉันจะแสดงให้คุณเห็นว่าการเชื่อมต่อ Shield กับ Arduino นั้นง่ายเพียงใด และตั้งโปรแกรมด้วย Visuino เพื่อทำให้บิตแมปเคลื่อนไหวเพื่อย้ายไปมาบนจอแสดงผล

ขั้นตอนที่ 1: ส่วนประกอบ

1. บอร์ดที่เข้ากันได้กับ Arduino Uno หนึ่งตัว (อาจใช้งานได้กับ Mega เช่นกัน แต่ฉันยังไม่ได้ทดสอบชิลด์กับมัน)
2. ILI9341 2.4" TFT Touchscreen Shield สำหรับ Arduino

ขั้นตอนที่ 2: เชื่อมต่อ ILI9341 TFT Touchscreen Display Shield กับ Arduino

เสียบ TFT Shield ที่ด้านบนของ Arduino Uno ตามที่แสดงในภาพ

ขั้นตอนที่ 3: เริ่ม Visuino และเพิ่ม TFT Display Shield

ในการเริ่มต้นเขียนโปรแกรม Arduino คุณจะต้องติดตั้ง Arduino IDE จากที่นี่:

ตรวจสอบให้แน่ใจว่าคุณติดตั้ง 1.6.7 หรือสูงกว่า มิฉะนั้น Instructable นี้จะไม่ทำงาน

ต้องติดตั้ง Visuino: https://www.visuino.com ด้วย

1. เริ่ม Visuino ตามที่แสดงในภาพแรก
2. คลิกที่ปุ่ม "ลูกศรลง" ของส่วนประกอบ Arduino เพื่อเปิดเมนูแบบเลื่อนลง (ภาพที่ 1)
3. จากเมนูให้เลือก "Add Shields…" (ภาพที่ 1)
4. ในกล่องโต้ตอบ "Shields" ให้ขยายหมวดหมู่ "Displays" และเลือก "TFT Color Touch Screen Display ILI9341 Shield" จากนั้นคลิกที่ปุ่ม "+" เพื่อเพิ่ม (ภาพที่ 2)

ขั้นตอนที่ 4: ใน Visuino: เพิ่มองค์ประกอบการวาดข้อความสำหรับเงาข้อความ

ต่อไปเราต้องเพิ่มองค์ประกอบกราฟิกเพื่อแสดงข้อความและบิตแมป ขั้นแรกเราจะเพิ่มองค์ประกอบกราฟิกเพื่อวาดเงาของข้อความ:

1. ใน Object Inspector ให้คลิกที่ปุ่ม "…" ถัดจากค่าของคุณสมบัติ "Elements" ขององค์ประกอบ "TFT Display" (ภาพที่ 1)
2. ในตัวแก้ไของค์ประกอบ เลือก "วาดข้อความ" จากนั้นคลิกที่ปุ่ม "+" (ภาพที่ 2) เพื่อเพิ่มหนึ่งรายการ (ภาพที่ 3)
3. ใน Object Inspector ตั้งค่าของคุณสมบัติ "Color" ขององค์ประกอบ "Draw Text1" เป็น "aclSilver" (ภาพที่ 3)
4. ใน Object Inspector ตั้งค่าของคุณสมบัติ "Size" ขององค์ประกอบ "Draw Text1" เป็น "4" (ภาพที่ 4) ทำให้ข้อความใหญ่ขึ้น
5. ใน Object Inspector ตั้งค่าของคุณสมบัติ "Text" ขององค์ประกอบ "Draw Text1" เป็น "Visuino" (ภาพที่ 5)
6. ใน Object Inspector ตั้งค่าของคุณสมบัติ "X" ขององค์ประกอบ "Draw Text1" เป็น "43" (ภาพที่ 6)
7. ใน Object Inspector ตั้งค่าของคุณสมบัติ "Y" ขององค์ประกอบ "Draw Text1" เป็น "278" (ภาพที่ 6)

ขั้นตอนที่ 5: ใน Visuino: เพิ่ม Draw Text Element สำหรับ Text Foreground

ตอนนี้เราจะเพิ่มองค์ประกอบกราฟิกเพื่อวาดข้อความ:

1. ในตัวแก้ไของค์ประกอบ เลือก "วาดข้อความ" จากนั้นคลิกที่ปุ่ม "+" (ภาพที่ 1) เพื่อเพิ่มอันที่สอง (ภาพที่ 2)
2. ใน Object Inspector ตั้งค่าของคุณสมบัติ "Size" ขององค์ประกอบ "Draw Text1" เป็น "4" (ภาพที่ 2)
3. ใน Object Inspector ตั้งค่าของคุณสมบัติ "Text" ขององค์ประกอบ "Draw Text1" เป็น "Visuino" (ภาพที่ 3)
4. ใน Object Inspector ตั้งค่าของคุณสมบัติ "X" ขององค์ประกอบ "Draw Text1" เป็น "40" (ภาพที่ 4)
5. ใน Object Inspector ตั้งค่าของคุณสมบัติ "Y" ขององค์ประกอบ "Draw Text1" เป็น "275" (ภาพที่ 4)

ขั้นตอนที่ 6: ใน Visuino: เพิ่ม Draw Bitmap Element สำหรับแอนิเมชั่น

ต่อไปเราจะเพิ่มองค์ประกอบกราฟิกเพื่อวาดบิตแมป:

1. ในตัวแก้ไของค์ประกอบ เลือก "วาดบิตแมป" จากนั้นคลิกที่ปุ่ม "+" (ภาพที่ 1) เพื่อเพิ่มหนึ่งรายการ (ภาพที่ 2)
2. ใน Object Inspector ให้คลิกที่ปุ่ม "…" ถัดจากค่าของคุณสมบัติ "Bitmap" ขององค์ประกอบ "Draw Bitmap1" (ภาพที่ 2) เพื่อเปิด "Bitmap Editor" (ภาพที่ 3)
3. ใน "Bitmap Editor" ให้คลิกที่ปุ่ม "Load…" (ภาพที่ 3) เพื่อเปิด File Open Dialog (ภาพที่ 4)
4. ในไดอะล็อกเปิดไฟล์ เลือกบิตแมปที่จะวาด และคลิกที่ปุ่ม "เปิด" (ภาพที่ 4) หากไฟล์มีขนาดใหญ่เกินไป อาจไม่สามารถใส่ลงในหน่วยความจำ Arduino ได้ หากคุณได้รับข้อผิดพลาดหน่วยความจำไม่เพียงพอในระหว่างการคอมไพล์ คุณอาจต้องเลือกบิตแมปที่เล็กกว่า
5. ใน "ตัวแก้ไขบิตแมป" คลิกที่ "ตกลง" ปุ่ม (ภาพที่ 5) เพื่อปิดกล่องโต้ตอบ

ขั้นตอนที่ 7: ใน Visuino: เพิ่มพินสำหรับคุณสมบัติ X และ Y ของ Draw Bitmap Element

ในการทำให้บิตแมปเคลื่อนไหว เราต้องควบคุมตำแหน่ง X และ Y สำหรับสิ่งนี้ เราจะเพิ่มพินสำหรับคุณสมบัติ X และ Y:

1. ใน Object Inspector ให้คลิกที่ปุ่ม "Pin" ที่ด้านหน้าของคุณสมบัติ "X" ขององค์ประกอบ "Draw Bitmap1" (ภาพที่ 1) และเลือก "Integer SinkPin" (ภาพที่ 2)
2. ใน Object Inspector ให้คลิกที่ปุ่ม "Pin" ที่ด้านหน้าคุณสมบัติ "Y" ขององค์ประกอบ "Draw Bitmap1" (ภาพที่ 3) และเลือก "Integer SinkPin" (ภาพที่ 4)

ขั้นตอนที่ 8: ใน Visuino: เพิ่ม 2 Integer Sine Generator และกำหนดค่า First One

เราจะใช้เครื่องกำเนิดไซน์จำนวนเต็ม 2 เครื่องเพื่อทำให้การเคลื่อนไหวของบิตแมปเคลื่อนไหว:

1. พิมพ์ "sine" ในช่อง Filter ของ Component Toolbox จากนั้นเลือกส่วนประกอบ "Sine Integer Generator" (ภาพที่ 1) และวางองค์ประกอบสองส่วนในพื้นที่ออกแบบ
2. ใน Object Inspector ตั้งค่าของคุณสมบัติ "Amplitude" ขององค์ประกอบ SineIntegerGenerator1 เป็น "96" (ภาพที่ 2)
3. ใน Object Inspector ตั้งค่าของคุณสมบัติ "Offset" ขององค์ประกอบ SineIntegerGenerator1 เป็น "96" (ภาพที่ 3)
4. ใน Object Inspector ตั้งค่าของคุณสมบัติ "Frequency" ขององค์ประกอบ SineIntegerGenerator1 เป็น "0.2" (ภาพที่ 4)

ขั้นตอนที่ 9: ใน Visuino: กำหนดค่าตัวสร้างไซน์ที่สอง และเชื่อมต่อตัวสร้างไซน์กับหมุดพิกัด X และ Y ของบิตแมป

1. ใน Object Inspector ตั้งค่าของคุณสมบัติ "Amplitude" ขององค์ประกอบ SineIntegerGenerator2 เป็น "120" (ภาพที่ 1)
2. ใน Object Inspector ตั้งค่าของคุณสมบัติ "Offset" ขององค์ประกอบ SineIntegerGenerator2 เป็น "120" (ภาพที่ 2)
3. ใน Object Inspector ตั้งค่าของคุณสมบัติ "Frequency" ขององค์ประกอบ SineIntegerGenerator2 เป็น "0.03" (ภาพที่ 3)
4. เชื่อมต่อพินเอาต์พุต "Out" ขององค์ประกอบ SineIntegerGenerator1 กับพินอินพุต "X" ขององค์ประกอบ "Shields. TFT Sisplay. Elements. Draw Bitmap1" ขององค์ประกอบ Arduino (ภาพที่ 4)
5. เชื่อมต่อพินเอาต์พุต "Out" ขององค์ประกอบ SineIntegerGenerator2 กับพินอินพุต "Y" ขององค์ประกอบ "Shields. TFT Display. Elements. Draw Bitmap1" ขององค์ประกอบ Arduino (ภาพที่ 5)

ขั้นตอนที่ 10: ใน Visuino: เพิ่มและเชื่อมต่อ Start และ Clock Multi Source Components

ในการแสดงบิตแมปทุกครั้งที่มีการอัปเดตตำแหน่ง X และ Y เราจำเป็นต้องส่งสัญญาณนาฬิกาไปยังองค์ประกอบ "Draw Bitmap1" ในการส่งคำสั่งหลังจากเปลี่ยนตำแหน่ง เราต้องการวิธีซิงโครไนซ์เหตุการณ์ สำหรับสิ่งนี้ เราจะใช้องค์ประกอบทำซ้ำเพื่อสร้างเหตุการณ์อย่างต่อเนื่อง และใช้ Clock Multi Source เพื่อสร้าง 2 เหตุการณ์ตามลำดับ เหตุการณ์แรกจะโอเวอร์คล็อกเครื่องกำเนิดไซน์เพื่ออัปเดตตำแหน่ง X และ Y และเหตุการณ์ที่สองจะโอเวอร์คล็อก "Draw Bitmap1":

1. พิมพ์ "ทำซ้ำ" ในกล่องตัวกรองของกล่องเครื่องมือส่วนประกอบ จากนั้นเลือกส่วนประกอบ "ทำซ้ำ" (ภาพที่ 1) แล้ววางลงในพื้นที่ออกแบบ (ภาพที่ 2)
2. พิมพ์ "multi" ในช่อง Filter ของ Component Toolbox จากนั้นเลือกส่วนประกอบ "Clock Multi Source" (ภาพที่ 2) และวางลงในพื้นที่ออกแบบ (ภาพที่ 3)
3. เชื่อมต่อพินเอาต์พุต "Out" ของส่วนประกอบ Repeat1 กับพินอินพุต "In" ของส่วนประกอบ ClockMultiSource1 (ภาพที่ 3)
4. เชื่อมต่อพินเอาต์พุต "พิน[0]" ของพิน "ออก" ของส่วนประกอบ ClockMultiSource1 เข้ากับพินอินพุต "ใน" ของคอมโพเนนต์ SineIntegerGenerator1 (ภาพที่ 4)
5. เชื่อมต่อพินเอาต์พุต "พิน[0]" ของพิน "ออก" ของส่วนประกอบ ClockMultiSource2 เข้ากับพินอินพุต "ใน" ของส่วนประกอบ SineIntegerGenerator1 (ภาพที่ 5)
6. เชื่อมต่อพินเอาต์พุต "พิน [1]" ของพินอินพุต "นาฬิกา" ขององค์ประกอบ "Shields. TFT Display. Elements. Draw Bitmap1" ขององค์ประกอบ Arduino (ภาพที่ 6)

ขั้นตอนที่ 11: สร้าง คอมไพล์ และอัปโหลดโค้ด Arduino

1. ใน Visuino ให้กด F9 หรือคลิกที่ปุ่มที่แสดงในรูปที่ 1 เพื่อสร้างโค้ด Arduino และเปิด Arduino IDE
2. ใน Arduino IDE ให้คลิกที่ปุ่ม Upload เพื่อคอมไพล์และอัพโหลดโค้ด (ภาพที่ 2)

ขั้นตอนที่ 12: และเล่น…

ยินดีด้วย! คุณได้เสร็จสิ้นโครงการ

ภาพที่ 2, 3, 4 และ 5 และวิดีโอแสดงโครงการที่เชื่อมต่อและขับเคลื่อน คุณจะเห็นบิตแมปเคลื่อนที่ไปรอบ ๆ แผงแสดงผลหน้าจอสัมผัส TFT ที่ใช้ ILI9341 ตามที่เห็นในวิดีโอ

ในรูปที่ 1 คุณสามารถดูไดอะแกรม Visuino ทั้งหมดได้ แนบมากับโปรเจ็กต์ Visuino ที่ฉันสร้างขึ้นสำหรับ Instructable นี้ และบิตแมปที่มีโลโก้ Visuino ดาวน์โหลดและเปิดได้ใน Visuino: