BluBerriSix - บทช่วยสอน TFT TouchScreen / Arduino: 12 ขั้นตอน (พร้อมรูปภาพ)

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

ปี 2019 เป็นวันครบรอบ 20 ปีของ RIM Blackberry 850! สิ่งประดิษฐ์เล็กๆ น้อยๆ ของแคนาดานี้ได้เปลี่ยนวิธีการสื่อสารของโลก ห่างหายไปนาน แต่มรดกยังคงอยู่!

ในคำแนะนำนี้ คุณจะได้เรียนรู้วิธีใช้ MCUfriend.com 2.4 TFT display shield สำหรับ Uno/Mega คุณจะได้เรียนรู้วิธีแสดงวัตถุกราฟิกและข้อความ ตลอดจนวิธีรับการสัมผัสและดำเนินการกับเหตุการณ์การสัมผัส หน้าจอคล้ายกับ Adafruit และแผงป้องกัน/หน้าจอ TFT อื่นๆ มาก ดังนั้นหากคุณอยู่ที่นี่

เราจะสร้างแบบร่าง bluBerriSIX 2 แอปเวอร์ชันง่าย

มาเริ่มกันเลย!

ขั้นตอนที่ 1: BluBerriSIX - ภาพรวม

แอพ bluBerriSIX เป็นโปรเจ็กต์ TFT หกฟังก์ชั่น

ประกอบด้วย:

ไฟฉาย

แอพ Saucy '7' (เช่น Magic '8' Ball)

เครื่องคิดเลข

แอปวัดระยะทางโดยใช้เซ็นเซอร์วัดระยะทางอัลตราโซนิก SR-04

แอปอุณหภูมิและความชื้นที่บันทึกข้อมูลแบบเรียลไทม์ได้สูงถึง 1.5 กม. ด้วยตัวรับส่งสัญญาณ HC-12

แอพส่งข้อความโดยใช้ HC-12

โครงการนี้ใช้รหัส 1100 บรรทัด เราจะสร้างเวอร์ชันที่ง่ายกว่ามากซึ่งยังคงแสดงแนวคิดเกี่ยวกับการแสดงผลแบบ TFT และการตรวจจับแบบสัมผัส

ขั้นตอนที่ 2: สิ่งที่จำเป็น?

- Arduino Uno หรือ Mega 2560

- MCUfriend 2.4 TFT shield

ห้องสมุดดังต่อไปนี้:

- ห้องสมุด Adafruit_GFX

- ห้องสมุดจอสัมผัส Adafruit

- ห้องสมุด MCUFRIEND_kbv

ไลบรารีเหล่านี้สามารถติดตั้งได้ด้วย Library Manager ภายใน Arduino IDE

ในการโหลดไลบรารี ให้ไปที่ตัวเลือกเมนู Sketch -> Include Library -> Manage Libraries…

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

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

ขั้นตอนที่ 3: โครงการของเรา

เราจะสร้างแบบร่าง bluBerriSIX เวอร์ชันที่เรียบง่ายขึ้น

มันจะมี

- หน้าจอสแปลช

- หน้าจอเมนูหลักที่มีสองปุ่ม

- แอพ Saucy 7

- แอพป้อนข้อความแบบง่าย

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

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

ขั้นตอนที่ 4: รหัสส่วนหัว ตัวแปรร่วม การตั้งค่าหน้าจอ

โครงการทั้งหมดได้รับการจัดทำเป็นเอกสารไว้อย่างดี แต่รายละเอียดจะตามมา

เริ่มโครงการ Arduino ใหม่และเรียกมันว่า 'tft demo' หรือชื่ออื่น ๆ ที่คุณต้องการ

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

นอกจากนี้เรายังกำหนดพินอะนาล็อกโดยอ้างอิงถึงวัตถุประสงค์เฉพาะของหน้าจอ

เรากำหนดวัตถุ tft (แสดงผล) และวัตถุ ts (สัมผัส) เป็นข้อมูลอ้างอิงสำหรับการทำงานที่เกี่ยวข้อง

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

ในแผงโค้ดที่สอง เรากำหนดตัวแปรส่วนกลางสำหรับวัตถุประสงค์เฉพาะแอปของเรา

สตริงและอาร์เรย์ cString, letter และ letterX และ letterY ใช้เพื่อ a) แสดงตัวอักษรบนปุ่มสำหรับแอปป้อนข้อความ และ b) จับคู่พิกัด x และ y ของการสัมผัสด้วยพิกัด x และ y ของตัวอักษรแต่ละตัวตามลำดับ คีย์บอร์ด. ข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้เมื่อเราไปถึงส่วนนั้นของภาพร่าง

funcX, funcY และ func เป็นอาร์เรย์ที่ทำงานเพื่อกำหนดว่าปุ่มแอพใดถูกกดบนหน้าจอเมนูหลัก แล้วใช้ข้อมูลนั้นเพื่อเปิดแอพที่เกี่ยวข้อง

lastTouch และ tThresh ใช้ในวิธีการสัมผัสเพื่อให้แน่ใจว่าเราจะไม่ได้รับการสัมผัสหลายครั้งจากการกดหน้าจอนานเกินไป เพิ่มเติมในภายหลัง

ตัวแปรโหมดจะควบคุมว่าจะแสดงหน้าจอใด และตัวแปร tMode จะควบคุมวิธีการสัมผัสที่ถูกใช้ในเวลาใดก็ตาม

ในบล็อก setup() เราเปิดช่อง Serial หากเราต้องการใช้คำสั่ง Serial.println() สำหรับการดีบัก คุณไม่ต้องการบรรทัดนี้หากคุณไม่ต้องการทำการดีบัก Serial Monitor

สี่บรรทัดถัดไปเป็นเพียงรหัสการตั้งค่าสำหรับวัตถุ tft

ต่อไปเราจะตั้งค่าการวางแนวของหน้าจอเป็นโหมดแนวตั้ง

คำสั่ง randomSeed() จะเริ่มตัวสร้างตัวเลขสุ่มเพื่อใช้ในภายหลังโดยแอป Saucy 7

สุดท้ายเราเรียกวิธีการหน้าจอสแปลช

ขั้นตอนที่ 5: สร้างหน้าจอ Spash และทำความเข้าใจเกี่ยวกับการแสดงผลกับ Touch Mapping

ตอนนี้เราจะเริ่มสร้างหน้าจอเริ่มต้น

แต่ก่อนอื่น โปรดดูที่รูปภาพสำหรับการแมปหน้าจอและสัมผัส สังเกตว่าต้นกำเนิดอยู่ในสถานที่ต่างกัน สำหรับการแสดงผล จุดเริ่มต้น (0, 0) อยู่ที่ด้านซ้ายบนของหน้าจอ (เมื่อปุ่ม RESET อยู่ด้านบน) และขยายจากซ้ายไปขวาและจากบนลงล่าง

สำหรับการตรวจจับการสัมผัส จุดเริ่มต้นอยู่ที่มุมล่างซ้ายของหน้าจอและขยายจากซ้ายไปขวาและล่างขึ้นบน

ดังนั้น DISPLAY และ TOUCH MAPS จึงถูกกำหนดแยกกันและมีความละเอียดต่างกัน จอแสดงผลมีความละเอียด 240 x 320 และการสัมผัสมีความละเอียดสูงกว่ามากอย่างที่คุณเห็นในเร็วๆ นี้

ไปที่พื้นที่ร่างของคุณด้านล่างวิธีการ loop(){} และเราจะป้อนรหัสวิธีการ splash()

เราเริ่มต้นด้วยการทำคำสั่ง fillScreen() เพื่อเติมหน้าจอด้วยสีขาวที่เรากำหนดไว้ในโค้ดส่วนหัว

จากนั้นเรากำหนดขนาดตัวอักษรเป็น '5' นี่เป็นขนาดข้อความพื้นฐานที่ค่อนข้างใหญ่ เรากำหนดตำแหน่ง x และ y สำหรับเคอร์เซอร์ข้อความ และเรากำหนดสีข้อความ ในที่สุดคำสั่ง print("TFT") จะดึงข้อความสีน้ำเงินขนาด '5' ที่ตำแหน่งที่ระบุ

เมื่อคุณเพิ่มขนาดตัวอักษร คุณจะเห็นว่าตัวอักษรหนาขึ้นเรื่อยๆ ดังนั้นการขึ้นไปเหนือ 5 อาจไม่เป็นประโยชน์ ในตอนท้ายของบทช่วยสอนนี้ ฉันจะแสดงวิธีใช้แบบอักษรบิตแมปเพื่อให้ข้อความดูดีขึ้นในแอปของคุณ ข้อเสียคือ การใช้ชุดแบบอักษรบิตแมปจะใช้หน่วยความจำจำนวนมากใน Arduino ซึ่งจะจำกัดขนาดภาพสเก็ตช์ของคุณ

เราทำซ้ำคำสั่งที่คล้ายกันสำหรับรายการข้อความอีกสองรายการบนหน้าจอเริ่มต้น

สุดท้ายเรารอ 2.5 วินาทีเพื่อให้ผู้ใช้มีโอกาสอ่านเนื้อหาของหน้าจอก่อนที่แอปจะย้ายไปที่หน้าจอเมนูหลัก

ไปข้างหน้าและอัปโหลดภาพร่างนี้ไปยัง Arduino ของคุณ ควรแสดงหน้าจอเริ่มต้น

ขั้นตอนที่ 6: การสร้างเครื่องมือวิเคราะห์ Touch Mapping

วิธี showTouch() มีประโยชน์มากในการช่วยให้คุณได้รับพิกัดการสัมผัสของส่วนต่างๆ ของหน้าจอ คุณจะต้องทำเช่นนี้เพื่อกำหนดขอบเขตการสัมผัสสำหรับปุ่มของคุณ

ไปข้างหน้าและป้อนวิธีนี้ด้านล่างวิธีการ splash() ของคุณที่ทำไว้ก่อนหน้านี้

นี่คือวิธีการทำงาน

คำสั่ง if กำหนดว่าเวลาผ่านไปเพียงพอตั้งแต่การสัมผัสครั้งสุดท้ายหรือไม่ จะใช้เวลาของระบบปัจจุบัน millis() และลบเวลา LastTouch หากมากกว่าค่า tThresh (200 มิลลิวินาที) ก็ยอมรับการสัมผัส มิฉะนั้น จะไม่สนใจเหตุการณ์มัลติทัชโดยไม่ได้ตั้งใจ

ถัดไป คำสั่ง getpoint() รับพิกัด x, y และ z ของการสัมผัส พิกัด z คือการวัดแรงกด

หากความดันอยู่ภายในค่าคงที่สูงสุดและต่ำสุดที่เรากำหนดไว้ในส่วนหัวของภาพสเก็ตช์ วิธีแรกจะเปลี่ยนหมุด YP และ XM กลับเป็น OUTPUT ทำให้หน้าจออยู่ในโหมดการแสดงผล

ถัดไปจะวาดสี่เหลี่ยมสีขาวเพื่อลบพิกัดที่อาจแสดงไว้ก่อนหน้านี้

จากนั้นภาพร่างจะตั้งค่าฟอนต์เป็นขนาด 2 สีดำ และแสดงพิกัด x (p.x) และ y (py) บนหน้าจอ จากนั้นคุณสามารถจดบันทึกตำแหน่งเหล่านี้เพื่อช่วยคุณตั้งโปรแกรมโซนสัมผัสสำหรับสเก็ตช์ของคุณเอง

คำสั่ง if ที่ด้านล่างของวิธีการตรวจสอบว่ามีการกดปุ่ม 'Home' บนหน้าจอหรือไม่ ตัวดำเนินการ '<=' อนุญาตให้มีความกว้างและความสูงของปุ่มโฮม พิกัดที่ระบุคือพิกัด x-center และ y-center ของปุ่มโฮม หากกดไว้ โหมดจะถูกตั้งค่าเป็น 0 ซึ่งในที่สุดจะหมายถึง 'ไปที่หน้าจอเมนูหลัก' เพิ่มเติมในภายหลัง

สุดท้าย เราอัปเดต lastTouch เป็นเวลาของระบบปัจจุบัน millis() เพื่อเตรียมพร้อมสำหรับเหตุการณ์การสัมผัสในภายหลัง

โปรดไปที่บล็อก loop() และเพิ่มบรรทัด showTouch();

ณ จุดนี้ อัปโหลดภาพร่างของคุณและลอง มันจะวาดหน้าจอเริ่มต้นและหากคุณเริ่มสัมผัสหน้าจอ พิกัด TOUCH x และ y จะปรากฏขึ้นบนหน้าจอ

ก่อนจะไปต่อ เรามาทบทวนโค้ดสองบรรทัดสำคัญๆ กันก่อน:

โหมดพิน (YP, OUTPUT); //คืนค่าหมุดควบคุม TFT

pinMode(XM, OUTPUT);// สำหรับแสดงผลหลังจากตรวจพบการสัมผัส

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

ทำได้ดีมาก! หยุดพัก!

ขั้นตอนที่ 7: สร้างหน้าจอเมนูหลัก

ตอนนี้เราจะสร้างหน้าจอเมนูหลักของเราด้วยปุ่มสองปุ่มที่คุณสามารถกดเพื่อเปิดใช้งานแต่ละแอพได้ วิธีการนี้เรียกว่า menuScreen()

เราเริ่มต้นด้วยการวางหน้าจอในโหมด DISPLAY

จากนั้นเรากำหนดขนาดแบบอักษร สีและตำแหน่ง และพิมพ์ข้อความ 'เมนูหลัก'

ตอนนี้เราวาดรูปสี่เหลี่ยมผืนผ้าสองอันที่เป็นปุ่ม

คำสั่งกราฟิกทั้งหมดมีโครงสร้างที่คล้ายกัน:

กราฟิกรูปร่าง (พิกัด x, พิกัด y, ความกว้าง, ความสูง, สี)

- พิกัด x - ซ้ายบนสำหรับวัตถุสี่เหลี่ยม ศูนย์กลางสำหรับวงกลม

- พิกัด y - บนซ้ายสำหรับวัตถุสี่เหลี่ยม ศูนย์กลางสำหรับวงกลม

- width - width ของวัตถุเป็นพิกเซล

- COLOR - ค่าคงที่สีที่เรากำหนดในส่วนหัว

สุดท้าย เราเรียกสองวิธีในการวาดไอคอน Saucy 7 และไอคอน QWERTY Text Entry นี่เป็นวิธีการแยกต่างหาก

วิธี draw7icon(0) ใช้พารามิเตอร์จำนวนเต็มซึ่งเป็นค่าชดเชย y สำหรับการดึงลูกบอล เราทำเช่นนี้เพื่อให้เราสามารถใช้วิธีเดียวกันในการวาดลูกบอลบนหน้าจอเมนูและบนหน้าจอแอป Saucy 7 ออฟเซ็ตช่วยให้เราปรับพิกัด y ของลูกบอลขึ้นหรือลงโดยทางโปรแกรม

วิธีการ draw7Ball(0) ถูกเรียกจากภายใน draw7Icon(0) นอกจากนี้ยังใช้พารามิเตอร์ที่ช่วยให้เราปรับตำแหน่งแนวตั้งของลูกบอลได้ขึ้นอยู่กับว่าเราวาดมันบนหน้าจอเมนูหรือบนหน้าจอแอพ

คำสั่ง fillCircle() รับ 4 อาร์กิวเมนต์

- พิกัด x จุดศูนย์กลางวงกลม

- พิกัด y ของจุดศูนย์กลางของวงกลม

- รัศมีของวงกลม (เป็นพิกเซล)

- COLOR - ค่าคงที่สีที่เรากำหนดในส่วนหัว

ในที่สุดเมธอด drawTextIcon() จะถูกเรียกให้วาดไอคอนสำหรับแอพ Text Entry

คุณสามารถลองเรียกใช้เมธอดโดยแสดงความคิดเห็นว่า splash() วิธีการใน setup() และเพิ่ม menuScreen()

อัปโหลดภาพสเก็ตช์ไปยัง Arduino แล้วลองใช้งาน!

ขั้นตอนที่ 8: แอป Saucy 7 และวิธีการเมนูหลัก

วิธี SevenScreen() จะวาดหน้าจอสำหรับแอป รวมถึงการวาดลูกบอลแล้วแสดงคำแนะนำ

วิธี sevenInstr() จะแสดงคำแนะนำและล้างหน้าจอจากการตอบกลับก่อนหน้านี้ นอกจากนี้ยังดึงปุ่ม 'ตอบกลับ'

เมธอด show7Response() จัดการการล้างวิธีการตอบกลับก่อนหน้าออกจากหน้าจอ โดยแสดงข้อความ 'กำลังคิด…' แบบเคลื่อนไหว แล้วแสดงข้อความตอบกลับที่เลือกแบบสุ่ม

read7Touch() เป็นวิธีที่รอให้เหตุการณ์สัมผัสสร้างข้อความที่สร้างแบบสุ่ม รหัสสัมผัสนั้นคล้ายกับวิธีการวินิจฉัย showTouch() ที่อธิบายไว้ก่อนหน้านี้มาก เพื่อความง่าย วิธีนี้จะยอมรับการสัมผัสที่ใดก็ได้บนหน้าจอเมื่อกดปุ่ม 'ตอบสนอง'

ที่ด้านบนของเมธอด เรากำหนดอาร์เรย์การตอบสนอง ของสตริงที่เป็นข้อความที่สามารถสร้างได้จากเหตุการณ์การสัมผัส

หากกดปุ่มโฮมจะเป็นการสิ้นสุดแอพและกลับไปที่หน้าจอเมนูหลัก มิฉะนั้น เมธอดจะสร้างตัวเลขสุ่มระหว่าง 0 ถึง 7(พิเศษ) และส่งข้อความที่เกี่ยวข้องจากอาร์เรย์ response ไปยังเมธอด show7Response()

สุดท้าย เมธอด backToMenu() จะคอยดูการกดปุ่มโฮมและกลับการควบคุมไปที่หน้าจอเมนูหลัก

เมธอด readMenuTouch() จะคอยดูเหตุการณ์การสัมผัสเมื่อคุณอยู่ที่หน้าจอเมนูหลัก เมื่อตรวจพบการสัมผัส จะส่งผ่านพิกัด x และ y ไปยังเมธอด getFunc(x, y) ซึ่งดูในอาร์เรย์ funcX และ funcY เพื่อให้ตรงกับพิกัด x และ y ของการสัมผัส จากนั้นจะส่งคืนตัวเลขจากอาร์เรย์ func สำหรับแอปที่เลือก '1' คือ Saucy 7 และ '2' คือแอปป้อนข้อความ จากนั้นจะตั้งค่าโหมดเป็นค่าของแอปนั้นเพื่อให้แอปทำงาน

ขั้นตอนที่ 9: The Loop() Block

ตอนนี้เราจะเริ่มสร้างโค้ดบล็อก loop() เพื่อจัดการการแสดงหน้าจอที่เหมาะสม จากนั้นเรียกใช้วิธีการสัมผัสที่เหมาะสมตามตัวเลือกที่เลือกในปัจจุบัน

วิธีการวนรอบ () ประกอบด้วยโครงสร้างสวิตช์ () สองโครงสร้าง

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

โครงสร้างสวิตช์ด้านล่างจะควบคุมวิธีการสัมผัสที่จะดำเนินการตามตัวเลือกแอปที่ผู้ใช้เลือกซึ่งแสดงด้วยค่าของ tMode

โหลดภาพสเก็ตช์ลงใน Arduino ของคุณและคุณควรจะสามารถเลือกและใช้แอป Saucy 7 ได้

คุณทำงานมามากแล้ว! หยุดพัก:-)

ขั้นตอนที่ 10: แอปป้อนข้อความ - เราอยู่ในหน้าแรกแล้ว

ตอนนี้เราจะรวมวิธีการของแอปป้อนข้อความเข้าไว้ด้วยกัน

makeKbd() วาดแป้นพิมพ์บนหน้าจอ

มันวาดสี่เหลี่ยมกลมๆ ที่เต็มแล้วหกรูป แล้วซ้อนตัวอักษรที่เหมาะสมบน 'กุญแจ' แต่ละอันโดยรับจดหมายจากสตริง cString ที่มันพิมพ์บนหน้าจอเหนือคีย์ โปรดสังเกตว่าพารามิเตอร์ตัวที่สองในคำสั่ง fillRoundedRect() คือรัศมีของแต่ละมุมในหน่วยพิกเซล ยิ่งค่านี้สูงเท่าใด มุมก็จะยิ่งโค้งมนมากขึ้นเท่านั้น

วิธี readKbdTouch() ทำงานคล้ายกับวิธีการตรวจจับการสัมผัสอื่นๆ

หากตรวจพบการสัมผัสที่ไม่ได้อยู่ในปุ่มโฮม มันจะส่งพิกัด x และ y ไปยังเมธอด curChar(x, y) ซึ่งจะส่งคืนอักขระที่สอดคล้องกับตำแหน่ง x และ y บนหน้าจอ ข้อความที่ 'พิมพ์' จะแสดงบนหน้าจอโดยใช้วิธี 'displayMsg(theChar)

วิธี curChar(x, y) ค้นหาผ่านอาร์เรย์ letterX และ letterY เพื่อพยายามค้นหาการจับคู่ที่ใกล้เคียงกับพิกัด x และ y ที่ส่งผ่านจาก readKbdTouch() หากพบข้อมูลที่ตรงกัน จะส่งคืนตัวอักษรที่เกี่ยวข้องไปยังเมธอด readKbdTouch โปรดสังเกตว่าเราเริ่มต้นตัวแปร theChar เป็น 32 ซึ่งเป็นโค้ด ASCII สำหรับอักขระเว้นวรรค ' ' เราทำเช่นนี้เพื่อที่ว่าหากผู้ใช้แตะบริเวณที่อยู่ห่างจากแป้นพิมพ์ จะไม่แสดงอักขระที่ไม่พร้อมใช้งาน

เมธอด displayMsg(theChar) นำอักขระที่ส่งคืนจาก curChar(x, y) มาผนวกเข้ากับสตริง msg จากนั้นจะแสดงข้อความบนหน้าจอ

สุดท้าย เราจะอัปเดตบล็อก loop() เพื่อยอมรับการเลือกแอปป้อนข้อความ

อัปโหลดร่าง tftDemo ไปยัง Arduino ของคุณและคุณควรจะสามารถใช้แอปที่เสร็จสมบูรณ์ได้

ยินดีด้วย! คุณได้สร้างแอปหน้าจอสัมผัส TFT แล้ว! ใช้เวลาที่เหลือของวัน!

ขั้นตอนที่ 11: รับ 'เนียน! - การใช้ Adafruit Bitmap Fonts ใน Sketch ของคุณ

ชุดฟอนต์ tft มาตรฐานใช้ได้ แต่มันจะดีกว่าถ้าเราสามารถใช้ฟอนต์บิตแมปที่เหมาะสมในสเก็ตช์ TFT ของเรา

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

แบบอักษรมีอยู่ในโฟลเดอร์ไลบรารี Adafruit_GFX ที่คุณติดตั้งไว้แล้วสำหรับโครงการนี้ บทช่วยสอนที่ยอดเยี่ยมเกี่ยวกับการใช้ฟอนต์อยู่ที่เว็บไซต์นี้

ในพื้นที่ส่วนหัวของแบบร่างของคุณ ให้เพิ่มการอ้างอิงแบบอักษรสำหรับแบบอักษรที่คุณต้องการใช้ เราจะใช้แบบอักษร FreeSerifBoldItalic18p7b สำหรับตัวอย่างนี้

#รวม

ในเมธอด splash() ของคุณ ให้แสดงความคิดเห็น tft.setTextSize(); สั่งการ.

เพิ่มคำสั่งต่อไปนี้

tft.setFont(&FreeSerifBoldItalic18pt7b);

ตอนนี้คำสั่ง print() จะใช้ฟอนต์ที่ระบุในปัจจุบัน หากต้องการเปลี่ยนเป็นฟอนต์อื่น คุณจะต้องใช้คำสั่ง tft.setFont() อีกคำสั่งหนึ่งกับฟอนต์ถัดไปที่คุณต้องการใช้

ในการตั้งค่าฟอนต์กลับเป็นฟอนต์ tft มาตรฐาน เพียงแค่ใช้ tft.setFont(); คำสั่งที่ไม่มีพารามิเตอร์

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

ขั้นตอนที่ 12: ความคิดสุดท้าย

มีคำสั่งอ็อบเจ็กต์กราฟิกอื่นๆ มากมายให้คุณเลือก พวกเขารวมถึง:

tft.drawRect(x, y, ความกว้าง, ความสูง, COLOUR);

tft.drawLine(x1, y1, x2, y2, สี);

ตัวอย่างต่อไปนี้ใช้เมธอด tft.color565 เพื่อให้คุณระบุสีตามค่าสีแดง สีเขียว และสีน้ำเงิน นี่เป็นอีกทางเลือกหนึ่งในการใช้ค่าสี HEX ที่กำหนดไว้คงที่ซึ่งเราใช้ในสเก็ตช์ของเรา

tft.drawRoundRect(x, y, ความกว้าง, ความสูง, รัศมี, tft.color565(255, 0, 0)); //นี่จะเป็นสีแดง

tft.drawCircle(x, y, รัศมี, tft.color565(0, 255, 0)); // มันจะเป็นสีเขียว

tft.drawTriangle(จุดยอด1x, จุดยอด1y, จุดยอด2x, จุดยอด2y, จุดยอด3x, จุดยอด3y, tft.color565(0, 0, 255)); // สีฟ้า

tft.fillTriangle(จุดยอด1x, จุดยอด1y, จุดยอด2x, จุดยอด2y, จุดยอด3x, จุดยอด3y, tft.color565(255, 0, 0);

ลองใช้คำสั่งเหล่านี้และสำรวจวิธีที่จะเพิ่มลงในโปรเจ็กต์ TFT ของคุณ

การเรียนรู้การใช้หน้าจอ TFT เป็นสิ่งที่ท้าทาย และคุณควรภาคภูมิใจในตัวเองที่สละเวลาเรียนรู้ขั้นตอนแรกเหล่านี้

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

ขอบคุณสำหรับการทำงานผ่านบทช่วยสอนนี้

ออกไปทำสิ่งมหัศจรรย์กันเถอะ!