- วัสดุที่ต้องการ:
- ทำความรู้จักกับโมดูลหน้าจอ TFT LCD:
- การปรับเทียบหน้าจอ TFT LCD สำหรับหน้าจอสัมผัส:
- การเชื่อมต่อ TFT LCD กับ Arduino:
- การเขียนโปรแกรม Arduino ของคุณสำหรับ TFT LCD:
- การทำงาน:
Arduino ช่วยสร้างโครงการได้อย่างง่ายดายและทำให้ดูน่าสนใจยิ่งขึ้น การเขียนโปรแกรมหน้าจอ LCD พร้อมตัวเลือกหน้าจอสัมผัสอาจฟังดูเป็นงานที่ซับซ้อน แต่ไลบรารีและโล่ Arduino ทำให้มันง่ายมาก ในโครงการนี้เราจะใช้หน้าจอ Arduino TFT LCD ขนาด 2.4 นิ้วเพื่อสร้างเครื่องคำนวณ Arduino Touch Screenของเราเองซึ่งสามารถคำนวณพื้นฐานทั้งหมดเช่นการบวกการลบการหารและการคูณ
วัสดุที่ต้องการ:
- Arduino Uno
- 2.4” TFT LCD display Shield
- แบตเตอรี่ 9V
ทำความรู้จักกับโมดูลหน้าจอ TFT LCD:
ก่อนที่เราจะดำน้ำในโครงการจริงสิ่งสำคัญคือต้องรู้ว่าโมดูล TFT LCD 2.4”นี้ทำงานอย่างไรและประเภทใดบ้างที่มีอยู่ในนั้น ให้เรามาดูรายละเอียดของโมดูลหน้าจอ TFT LCD ขนาด 2.4 นิ้วนี้
อย่างที่คุณเห็นมี 28 พินซึ่งจะพอดีกับ Arduino Uno / Arduino Mega Board การจำแนกประเภทของพินเหล่านี้เล็กน้อยมีอยู่ในตารางด้านล่าง
ดังที่คุณเห็นพินสามารถแบ่งออกเป็นสี่ประเภทหลักเช่นพินคำสั่ง LCD, พินข้อมูล LCD, พินการ์ด SD และพินเพาเวอร์เราไม่จำเป็นต้องรู้รายละเอียดการทำงานของพินเหล่านี้มากนักเนื่องจากพวกมันจะได้รับการดูแล Arduino Library ของเรา
คุณยังสามารถค้นหาช่องเสียบการ์ด SD ที่ด้านล่างของโมดูลที่แสดงด้านบนซึ่งสามารถใช้เพื่อโหลดการ์ด SD ที่มีไฟล์ภาพ bmp และภาพเหล่านี้สามารถแสดงในหน้าจอ TFT LCD ของเราโดยใช้โปรแกรม Arduino
สิ่งสำคัญอีกอย่างที่ควรทราบคืออินเทอร์เฟซ IC ของคุณ มีโมดูล TFT หลายประเภทในตลาดเริ่มตั้งแต่โมดูล Adafruit TFT LCD ดั้งเดิมไปจนถึงโคลนจีนราคาถูก โปรแกรมที่ทำงานได้อย่างสมบูรณ์แบบสำหรับโล่ Adafruit ของคุณอาจทำงานไม่เหมือนกันสำหรับบอร์ดฝ่าวงล้อมของจีน ดังนั้นจึงเป็นเรื่องสำคัญมากที่จะต้องทราบว่าคุณถือจอ LCD ประเภทใดอยู่ในมือ รายละเอียดนี้จะต้องได้รับจากผู้ขาย หากคุณมีโคลนราคาถูกเช่นของฉันอาจเป็นเพราะการใช้IC ไดรเวอร์ ili9341เป็นส่วนใหญ่ คุณสามารถทำตามการเชื่อมต่อ TFT LCD กับบทช่วยสอน Arduino เพื่อทดลองใช้โปรแกรมตัวอย่างพื้นฐานและทำความคุ้นเคยกับหน้าจอ LCD ตรวจสอบโครงการ TFT LCD อื่น ๆ ของเรากับ Arduino ได้ที่นี่:
- วิธีใช้ NeoPixel LED Strip กับ Arduino และ TFT LCD
- ล็อครหัสดิจิทัลที่ควบคุมด้วยสมาร์ทโฟนโดยใช้ Arduino
การปรับเทียบหน้าจอ TFT LCD สำหรับหน้าจอสัมผัส:
หากคุณวางแผนที่จะใช้ฟังก์ชันหน้าจอสัมผัสของโมดูล TFT LCD ของคุณคุณจะต้องปรับเทียบเพื่อให้ทำงานได้อย่างถูกต้อง หน้าจอ LCD ที่ไม่มีการปรับเทียบอาจใช้งานไม่ได้เช่นคุณอาจแตะที่จุดใดจุดหนึ่งและ TFT อาจตอบสนองเมื่อสัมผัสในที่อื่น ผลการสอบเทียบเหล่านี้จะไม่เหมือนกันสำหรับบอร์ดทั้งหมดดังนั้นคุณจึงต้องทำสิ่งนี้ด้วยตัวเอง
วิธีที่ดีที่สุดในการปรับเทียบคือใช้โปรแกรมตัวอย่างการสอบเทียบ (มาพร้อมกับไลบรารี) หรือใช้จอภาพอนุกรมเพื่อตรวจหาข้อผิดพลาดของคุณ อย่างไรก็ตามสำหรับโครงการนี้เนื่องจากขนาดของปุ่มมีการปรับเทียบขนาดใหญ่จึงไม่น่าจะเป็นปัญหาใหญ่และฉันจะอธิบายวิธีปรับเทียบหน้าจอของคุณในส่วนการเขียนโปรแกรมด้านล่าง
การเชื่อมต่อ TFT LCD กับ Arduino:
หน้าจอ TFT LCD ขนาด 2.4 นิ้วเป็น Arduino Shield ที่สมบูรณ์แบบ คุณสามารถดันหน้าจอ LCD ที่ด้านบนของ Arduino Uno ได้โดยตรงและมันจะเข้ากันได้ดีกับหมุดและเลื่อนเข้ามา อย่างไรก็ตามเนื่องจากความปลอดภัยครอบคลุมขั้วการเขียนโปรแกรมของ Arduino UNO ของคุณด้วยเทปฉนวนขนาดเล็กในกรณีที่ขั้วสัมผัสกับหน้าจอ TFT LCD ของคุณ LCD ที่ประกอบบน UNO จะมีลักษณะดังนี้ด้านล่าง
การเขียนโปรแกรม Arduino ของคุณสำหรับ TFT LCD:
เรากำลังใช้ SPFD5408 Library เพื่อให้รหัสเครื่องคิดเลข arduino ทำงานได้ นี่คือไลบรารีที่ได้รับการแก้ไขของ Adafruit และสามารถทำงานร่วมกับโมดูล LCD TFT ของเราได้อย่างราบรื่น คุณสามารถตรวจสอบโปรแกรมทั้งหมดได้ที่ท้ายบทความนี้
หมายเหตุ: เป็นสิ่งสำคัญมากสำหรับคุณในการติดตั้งไลบรารีนี้ใน Arduino IDE หรือโปรแกรมนี้เพื่อคอมไพล์โดยไม่มีข้อผิดพลาดใด ๆ
ในการติดตั้งไลบรารีนี้คุณสามารถคลิกที่ลิงค์ด้านบนซึ่งจะนำคุณไปยังหน้า Github คลิกที่โคลนหรือดาวน์โหลดและเลือก "ดาวน์โหลด ZIP" ไฟล์ zip จะถูกดาวน์โหลด
ตอนนี้เปิด Arduino IDE แล้วเลือก Sketch -> รวม Librarey -> เพิ่มไลบรารี. ZIP หน้าต่างเบราว์เซอร์จะเปิดขึ้นเพื่อนำทางไปยังไฟล์ ZIP และคลิก“ ตกลง” คุณควรสังเกต "ไลบรารีที่เพิ่มในไลบรารีของคุณ" ที่มุมล่างซ้ายของ Arduino หากสำเร็จ คำแนะนำโดยละเอียดในการทำเช่นเดียวกันมีให้ในบทช่วยสอนการเชื่อมต่อ
ตอนนี้คุณสามารถใช้รหัสด้านล่างใน Arduino IDE ของคุณและอัปโหลดไปยัง Arduino UNO ของคุณเพื่อให้เครื่องคำนวณหน้าจอสัมผัสทำงานได้ นอกจากนี้ฉันได้อธิบายโค้ดเป็นส่วนเล็ก ๆ
เราต้องการห้องสมุดสามแห่งเพื่อให้โปรแกรมนี้ทำงานได้ ไลบรารีทั้งสามนี้ได้รับในไฟล์ ZIP ที่คุณดาวน์โหลดจากลิงค์ที่ให้ไว้ด้านบน ฉันได้รวมไว้ในรหัสดังที่แสดงด้านล่าง
# รวม
ดังที่ได้กล่าวไว้ก่อนหน้านี้เราจำเป็นต้องปรับเทียบหน้าจอ LCD เพื่อให้ทำงานได้ตามที่คาดไว้ แต่ไม่ต้องกังวลว่าค่าที่ระบุนี้เป็นค่าสากล ตัวแปร TS_MINX, TS_MINY, TS_MAXX และ TS_MAXY จะตัดสินการปรับเทียบหน้าจอ คุณสามารถเล่นรอบตัวได้หากคุณรู้สึกว่าการสอบเทียบไม่เป็นที่น่าพอใจ
#define TS_MINX 125 #define TS_MINY 85 #define TS_MAXX 965 # กำหนด TS_MAXY 905
อย่างที่เราทราบกันดีว่าหน้าจอ TFT LCD สามารถแสดงสีได้มากสีทั้งหมดนี้จะต้องถูกป้อนเป็นค่าฐานสิบหก เพื่อให้มนุษย์สามารถอ่านได้มากขึ้นเราจึงกำหนดค่าเหล่านี้ให้กับตัวแปรดังที่แสดงด้านล่าง
#define WHITE 0x0000 // Black-> White #define YELLOW 0x001F // Blue-> Yellow #define CYAN 0xF800 // Red-> Cyan #define PINK 0x07E0 // Green-> Pink #define RED 0x07FF // Cyan -> Red #define GREEN 0xF81F // Pink -> Green #define BLUE 0xFFE0 // Yellow-> Blue #define BLACK 0xFFFF // White-> Black
เอาล่ะเข้าสู่ส่วนการเขียนโปรแกรมกันได้แล้ว มีสามส่วนมีส่วนร่วมในโปรแกรมนี้หนึ่งคือการสร้าง UI ของเครื่องคิดเลขพร้อมปุ่มและจอแสดงผล จากนั้นตรวจจับปุ่มตามที่ผู้ใช้สัมผัสและสุดท้ายคำนวณผลลัพธ์และแสดงผล ให้เราผ่านมันไปทีละคน
1. การสร้าง UI ของเครื่องคิดเลข:
ซึ่งเป็นที่ที่คุณสามารถใช้จำนวนมากของการคิดสร้างสรรค์ของคุณให้ออกแบบ User Interface ของเครื่องคิดเลข ฉันได้สร้างเค้าโครงพื้นฐานของเครื่องคิดเลขด้วย 16 ปุ่มและหน่วยแสดงผลหนึ่งหน่วย คุณต้องสร้างการออกแบบเช่นเดียวกับที่คุณจะวาดอะไรบางอย่างบน MS paint ไลบรารีที่เพิ่มเข้ามาจะช่วยให้คุณสามารถวาดเส้นสี่เหลี่ยมวงกลมอักขระสตริงและสีอื่น ๆ ที่ต้องการได้อีกมากมาย คุณสามารถเข้าใจฟังก์ชั่นที่มีอยู่จากบทความนี้
ฉันใช้ความสามารถในการวาดเส้นและกล่องเพื่อออกแบบ UI ซึ่งดูคล้ายกับเครื่องคิดเลขในยุค 90 มาก แต่ละกล่องมีความกว้างและความสูง 60 พิกเซล
// วาดกล่องผลลัพธ์ tft.fillRect (0, 0, 240, 80, CYAN); // วาดคอลัมน์แรก tft.fillRect (0,260,60,60, RED); tft.fillRect (0,200,60,60, สีดำ); tft.fillRect (0,140,60,60, สีดำ); tft.fillRect (0,80,60,60, สีดำ); // วาดคอลัมน์ที่สาม tft.fillRect (120,260,60,60, GREEN); tft.fillRect (120,200,60,60, สีดำ); tft.fillRect (120,140,60,60, สีดำ); tft.fillRect (120,80,60,60, สีดำ); // วาด Secound & คอลัมน์ที่สี่สำหรับ (int b = 260; b> = 80; b- = 60) {tft.fillRect (180, b, 60,60, BLUE); tft.fillRect (60, b, 60,60, BLACK);} // วาดเส้นแนวนอนสำหรับ (int h = 80; h <= 320; h + = 60) tft.drawFastHLine (0, h, 240, WHITE); // วาดเส้นแนวตั้งสำหรับ (int v = 0; v <= 240; v + = 60) tft.drawFastVLine (v, 80, 240, WHITE); // แสดงแถบปุ่มกดสำหรับ (int j = 0; j <4; j ++) {สำหรับ (int i = 0; i <4; i ++) {tft.setCursor (22 + (60 * i), 100 + (60 * ญ)); tft.setTextSize (3); tft.setTextColor (สีขาว); tft.println (สัญลักษณ์);
2. การตรวจจับปุ่ม:
อีกงานที่ท้าทายคือการตรวจสอบการติดต่อผู้ใช้ทุกครั้งที่ผู้ใช้สัมผัสที่ไหนสักแห่งเราจะสามารถทราบได้ว่าตำแหน่ง X และ Y ของพิกเซลที่เขาสัมผัสอยู่ที่ไหน ค่านี้สามารถแสดงบนมอนิเตอร์แบบอนุกรมโดยใช้ println ดังที่แสดงด้านล่าง
TSPoint p = waitTouch (); X = py; Y = px; Serial.print (X); Serial.print (','); Serial.println (Y); // + "" + Y);
เนื่องจากเราได้ออกแบบกล่องให้มีความกว้างและความสูง 60 พิกเซลและมีสี่แถวและสำหรับคอลัมน์ที่เริ่มต้นจาก (0,0) ตำแหน่งของแต่ละกล่องสามารถคาดเดาได้ดังแสดงในภาพด้านล่าง
แต่ในทางปฏิบัติจะไม่เป็นผล จะมีความแตกต่างอย่างมากระหว่างค่าที่คาดหวังและค่าจริงเนื่องจากปัญหาการสอบเทียบ
ดังนั้นในการทำนายตำแหน่งที่แน่นอนของกล่องคุณต้องคลิกที่เส้นและตรวจสอบตำแหน่งที่เกี่ยวข้องบนจอภาพอนุกรม นี่อาจไม่ใช่วิธีที่เป็นมืออาชีพที่สุดในการทำ แต่ก็ยังทำงานได้อย่างสมบูรณ์ ฉันวัดตำแหน่งของเส้นทั้งหมดและได้รับค่าด้านล่าง
ตอนนี้เนื่องจากเรารู้ตำแหน่งของกล่องทั้งหมดแล้ว เมื่อผู้ใช้สัมผัสที่ใดก็ได้เราสามารถคาดเดาได้ว่าเขาสัมผัสที่ไหนโดยการเปรียบเทียบค่า (X, Y) ของเขากับค่าของแต่ละกล่องดังที่แสดงด้านล่าง
if (X <105 && X> 50) // การตรวจจับปุ่มในคอลัมน์ 2 {if (Y> 0 && Y <85) {Serial.println ("Button 0"); // กดปุ่ม 0 ถ้า (Number == 0) Number = 0; else Number = (หมายเลข * 10) + 0; // กดสองครั้ง} if (Y> 85 && Y <140) {Serial.println ("Button 2"); ถ้า (Number == 0) Number = 2; else Number = (หมายเลข * 10) + 2; // กดสองครั้ง}
3. การแสดงตัวเลขและการคำนวณผลลัพธ์:
ขั้นตอนสุดท้ายคือการคำนวณผลลัพธ์และแสดงบนหน้าจอ TFT LCD เครื่องคิดเลข arduinoนี้สามารถดำเนินการกับตัวเลข 2 ตัวเท่านั้น ตัวเลขสองตัวนี้มีชื่อเป็นตัวแปร“ Num1” และ“ Num2” ตัวแปร“ Number” ให้และรับค่าจาก Num1 และ Num2 และให้ผลลัพธ์ด้วย
เมื่อการใช้งานกดปุ่มตัวเลขหนึ่งหลักจะถูกเพิ่มเข้าไปในตัวเลข เมื่อกดปุ่มอื่นตัวเลขหนึ่งหลักก่อนหน้านี้จะถูกคูณด้วย 10 และจะเพิ่มตัวเลขใหม่ ตัวอย่างเช่นถ้าเรากด 8 แล้วกด 5 แล้วกด 7 จากนั้นก่อนอื่นตัวแปรจะถือ 8 จากนั้น (8 * 10) + 5 = 85 แล้ว (85 * 10) +7 = 857 สุดท้ายตัวแปรจะมี มูลค่า 857 กับมัน
ถ้า (Y> 192 && Y <245) {Serial.println ("ปุ่ม 8"); ถ้า (Number == 0) Number = 8; else Number = (หมายเลข * 10) + 8; // กดอีกครั้ง}
เมื่อเราดำเนินการใด ๆ เช่นการเพิ่มเมื่อผู้ใช้กดปุ่มเพิ่มค่าจาก Number จะถูกโอนไปยัง Num1 จากนั้น Number จะถูกทำให้เป็นศูนย์เพื่อให้พร้อมที่จะรับอินพุตสำหรับตัวเลขที่สอง
เมื่อกด Equal ค่าใน Number จะถูกส่งไปยัง Num2 จากนั้นจะทำการคำนวณตามลำดับ (ในกรณีนี้จะเพิ่ม) และผลลัพธ์จะถูกเก็บไว้ในตัวแปร "Number" อีกครั้ง
ในที่สุดค่านี้จะแสดงในหน้าจอ LCD
การทำงาน:
การทำงานของเครื่องคำนวณหน้าจอสัมผัส Arduinoนี้ทำได้ง่าย คุณต้องอัปโหลดรหัสที่ระบุด้านล่างบน Arduino ของคุณและเปิดใช้งาน คุณได้รับเครื่องคิดเลขที่แสดงบนหน้าจอ LCD ของคุณ
ตอนนี้คุณสามารถป้อนตัวเลขใดก็ได้และทำการคำนวณของคุณ ตอนนี้ จำกัด ไว้เพียงสองตัวถูกดำเนินการและมีเพียงตัวดำเนินการในตอนนี้ แต่คุณสามารถปรับแต่งโค้ดเพื่อให้มีตัวเลือกมากมาย
คุณต้องกด "C" เพื่อล้างค่าบนหน้าจอทุกครั้งหลังจากทำการคำนวณ หวังว่าคุณจะเข้าใจโครงการและสนุกกับการสร้างสิ่งที่คล้ายกัน หากคุณมีข้อสงสัยอย่าลังเลที่จะโพสต์ไว้ในฟอรัมหรือในส่วนความคิดเห็นด้านล่าง พบกันใหม่กับโปรเจ็กต์ที่น่าสนใจอีกจนถึงตอนนี้ Happy computing !!
ตรวจสอบวิดีโอสาธิตด้านล่างด้วย