การใช้งาน IOXESP32 Mini LCD shield กับ ArduinoIDE
เขียนโปรแกรมแสดงผลข้อความ รูปภาพ บนจอ LCD และใช้งานสวิตช์
การเขียนโปรแกรมจะแบ่งเป็น 2 ส่วน คือส่วนใช้งานจอ LCD และส่วนการใช้งานสวิตช์
การเขียนโปรแกรมสั่งงานจอ LCD
จอ LCD ที่มีบนโมดูล IOXESP32 Mini LCD shield เป็นจอ LCD ที่ใช้ไอซีขับจอเบอร์ ST7735 ไลบารี่ที่รองรับการใช้งานกับไอซีขับจอเบอร์นี้ คือไลบารี่ TFT_eSPI
การติดตั้งไลบารี่ TFT_eSPI
การติดตั้งไลบารี่ TFT_eSPI สามารถติดตั้งผ่าน Library Manager ได้ โดยมีขั้นตอนดังนี้
เปิดโปรแกรม ArduinoIDE ขึ้นมา จากนั้นกดไปที่ Sketh > Include Library เลือก Manage Libraries…
หน้าต่าง Library Manager จะเปิดขึ้นมา ในช่องค้นหา ให้พิมพ์ TFT_eSPI เลือกไลบารี่ TFT_eSPI แล้วกดปุ่ม Install
แล้วรอติดตั้งไลบารี่ซักครู่ สังเกตความคืบหน้าในการติดตั้งได้จากแถบสีน้ำเงินด้านล่างของหน้าต่าง
เมื่อติดตั้งเสร็จแล้ว จะแสดงคำว่า INSTALLED (ดังรูป) สามารถปิดหน้าต่าง Library Manager ไปได้เลย
ตรวจสอบผลการติดตั้งไลยบารี่ TFT_eSPI ได้ โดยกดไปที่ File > Examples หากมีรายการ TFT_eSPI แสดง แสดงว่าติดตั้งไลบารี่สำเร็จแล้ว
การตั้งค่าไลบารี่ TFT_eSPI
เนื่องจากไลบารี่ TFT_eSPI รองรับการใช้งานกับจอหลายรุ่น ดังนั้นการใช้งานจึงจำเป็นต้องตั้งค่ารุ่นของจอที่ใช้งาน และตั้งค่าขาที่ต่อกับจอก่อน โดยการตั้งค่าจำเป็นจะต้องแก้ไขโค้ดโปรแกรมของไลบารี่ โดยใช้ Text Editor ตัวใดก็ได้ ตัวอย่างบทความนี้ใช้โปรแกรม Notepad++
การจะแก้ไขโค้ดโปรแกรมของไลบารี่ได้ จำเป็นจะต้องรู้ก่อนว่าไลบารี่ติดตั้งอยู่ที่โฟลเดอร์ไหน ซึ่งการดูว่าไลบารี่ติดตั้งอยู่ที่โฟลเดอร์ไหนสามารถทำได้โดยกดไปที่เมนู File > Preferences
หน้าต่าง Preferences จะเปิดขึ้นมา ให้สังเกตที่อยู่ในช่อง Sketchbook location แล้วเข้าไปที่โฟลเดอร์ตามที่ Sketchbook location แสดง
จากนั้นเข้าไปที่โฟลเดอร์ libraries
ค้นหาโฟลเดอร์ TFT_eSPI แล้วเข้าไปในโฟลเดอร์ TFT_eSPI
จะเจอไฟล์โค้ดโปรแกรมของไลบารี่ TFT_eSPI แล้ว
เปิดไฟล์ User_Setup_Select.h ด้วยโปรแกรม Text Editor ตัวใดก็ได้ขึ้นมา แล้วแก้ไขไฟล์ดังนี้
เลื่อนหาบรรทัด #include <User_Setup.h> แล้วเพิ่มเครื่องหมาย Comment (//) เข้าไปที่หน้าบรรทัด
เลื่อนหาบรรทัด #include <User_Setups/Setup43_ST7735.h> แล้วลบเครื่องหมาย Comment (//) ที่หน้าบรรทัด
บันทึกไฟล์แล้วปิดไฟล์นี้ไปได้เลย
จากนั้นเข้าไปที่โฟลเดอร์ User_Setups แล้วเปิดไฟล์ Setup43_ST7735.h ด้วยโปรแกรม Text Editor ตัวใดก็ได้ แก้ไขโค้ดโปรแกรมดังนี้
ค้นหาบรรทัด
#define TFT_CS 15
แล้วแก้ไขเลข 15 เป็นค้นหาบรรทัด
#define TFT_DC 2
แล้วแก้ไขเลข 2 เป็น 17ค้นหาบรรทัด
#define TFT_RST 4
แล้วแก้ไขเลข 4 เป็น -1
บันทึกไฟล์ให้เรียบร้อย แล้วปิดโปรแกรมไปได้เลย
ทดลองใช้งานไลบารี่ TFT_eSPI
หลังจากตั้งค่าไลบารี่แล้ว ขั้นตอนต่อมาคือทดสอบใช้งานไลบารี่ TFT_eSPI ว่าสามารถขับจอให้แสดงข้อความรูปภาพได้หรือไม่ ก่อนนำไลบารี่ไปใช้งานจริง
เปิดโปรแกรม ArduinoIDE ขึ้นมา กดไปที่ File > Examples > TFT_eSPI > 160 x 128 แล้วเลือก TFT_graphicstest_small
กดอัพโหลดโปรแกรมตัวอย่าง TFT_graphicstest_small ลงบอร์ดไปได้เลย
ที่หน้าจอจะเริ่มแสดงผลการทำงานของโค้ดโปรแกรมตัวอย่างขึ้นมาแล้ว
การเขียนโปรแกรมสั่งงานจอ LCD
การเขียนโปรแกรมสังงานจอ LCD เริ่มต้นด้วยการ include ไลบารี่ TFT_eSPI เข้ามา
เพื่อให้ใช้งานคำสั่งที่อยู่ในไลบารี่ได้ จำเป็นต้องสร้างออปเจค tft จากคลาส TFT_eSPI ก่อน ด้วยคำสั่ง
แล้วใช้คำสั่ง tft.init(); ใน void setup() เพื่อสั่งให้หน้าจอเริ่มทำงาน
เท่านี้ก็พร้อมเขียนโปรแกรมสั่งงานจอแล้ว
การหมุนหน้าจอ
ใช้คำสั่ง tft.setRotation() มีรูปแบบการใช้งานดังนี้
ตัวอย่าง หมุนหน้าจอเป็นแนวนอน
ระบบสี
ระบบสีีที่ใช้บนเครื่องคอมพิวเตอร์เป็นแบบ 24 บิต RGB888 แต่ที่ใช้บนจอ TFT และไลบารี่ TFT_eSPI ใช้ระบบสี RGB565 การแปลงสี RGB888 เป็น RGB565 สามารถทำได้โดยใช้คำสั่ง tft.color565() หรือ tft. color24to16() มีรูปแบบคำสั่งดังนี้
ตัวอย่าง 1 วาดเส้นที่ตำแหน่งเริ่มต้น (10, 10) ไปที่ตำแหน่ง (40, 40) กำหนดเส้นสีแดง (0xFF0000) เขียนโปรแกรมได้ดังนี้
ตัวอย่าง 2 วาดเส้นที่ตำแหน่งเริ่มต้น (50, 20) ไปที่ตำแหน่ง (100, 180) กำหนดเส้นสีเขียว (0x00FF00) เขียนโปรแกรมได้ดังนี้
การเทสีทั้งหน้าจอ
ใช้คำสั่ง tft.fillScreen() มีรูปแบบคำสั่งดังนี้
ตัวอย่าง เทสีทั้งหน้าจอด้วยสีดำ
การวาดเส้นตรง
การวาดเส้นตรงมีคำสั่งให้ใช้งานดังนี้
ตัวอย่างที่ 1 วาดเส้นตรงที่ตำแหน่งเริ่มต้น (0, 0) ไปตำแหน่ง (140, 20) กำหนดเส้นสีขาว (0xFFFFFF) เขียนโปรแกรมได้ดังนี้
ตัวอย่างที่ 2 วาดเส้นตรงแนวตั้งที่ตำแหน่งเริ่มต้น (30, 0) สูง 100 พิกเซล สีขาว (0xFFFFFF) เขียนโปรแกรมได้ดังนี้
ตัวอย่างที่ 3 วาดเส้นตรงแนวนอนที่ตำแหน่งเริ่มต้น (0, 100) กว้าง 120 พิกเซล สีขาว (0xFFFFFF) เขียนโปรแกรมได้ดังนี้
การวาดสีเหลี่ยม
การวาดสี่เหลี่ยมมีคำสั่งให้ใช้งานดังนี้
ตัวอย่างที่ 1 วาดกรอบสี่เหลี่ยมที่จุดเริ่มต้น (30, 30) ขนาด 40 x 60 พิกเซล สีน้ำเงิน เขียนโปรแกรมได้ดังนี้
ตัวอย่างที่ 2 วาดกล่องสี่เหลี่ยมทึบแสงที่จุดเริ่มต้น (20, 60) ขนาด 100 x 100 พิกเซล สีขาว เขียนโปรแกรมได้ดังนี้
ตัวอย่างที่ 3 วาดกรอบสี่เหลี่ยมขอบโค้งที่จุดเริ่มต้น (30, 30) ขนาด 40 x 60 พิกเซล ขอบโค้ง 20 พิกเซล สีน้ำเงิน เขียนโปรแกรมได้ดังนี้
ตัวอย่างที่ 4 วาดกล่องสี่เหลี่ยมทึบแสงขอบโค้งที่จุดเริ่มต้น (20, 60) ขนาด 100 x 100 พิกเซล ขอบโค้ง 10 พิกเซล สีขาว เขียนโปรแกรมได้ดังนี้
การวาดวงกลม
การวาดวงกลมมีคำสั่งให้ใช้งานดังนี้
ตัวอย่างที่ 1 วาดวงกลมโปร่งแสงจุดศูนย์กลางอยู่ที่ตำแหน่ง (150, 150) รัศมี 80 สีขาว เขียนโปรแกรมได้ดังนี้
ตัวอย่างที่ 2 วาดวงกลมทึบแสงจุดศูนย์กลางอยู่ที่ตำแหน่ง (160, 100) รัศมี 40 สีขาว เขียนโปรแกรมได้ดังนี้
การใส่ข้อความ
คำสั่งใช้แสดงข้อความมีดังนี้
ตัวอย่างที่ 1 แสดงตัวเลข 120 ที่ตำแหน่ง (65, 80) เขียนโปรแกรมได้ดังนี้
ตัวอย่างที่ 2 แสดงตัวเลข 3.124 ทศนิยม 3 ตำแหน่ง ที่ตำแหน่ง (100, 60) เขียนโปรแกรมได้ดังนี้
ตัวอย่างที่ 3 แสดงข้อความ Hello ที่ตำแหน่ง (20, 20) เขียนโปรแกรมได้ดังนี้
การเปลี่ยนสีข้อความ
การเปลี่ยนสีข้อความทำได้โดยใช้คำสั่ง tft.setTextColor(); มีรูปแบบดังนี้
โดยจะต้องเรียกใช้คำสั่ง tft.setTextColor(); ก่อนคำสั่งแสดงข้อความ
ตัวอย่าง แสดงข้อความ Hello สีขาวที่ตำแหน่ง (10, 200) เขียนโปรแกรมได้ดังนี้
การเปลี่ยนขนาดตัวอักษร
ใช้คำสั่ง tft.setTextSize(); มีรูปแบบการใช้งานดังนี้
โดยจะต้องเรียกใช้คำสั่ง tft.setTextSize(); ก่อนใช้คำสั่งแสดงข้อความ
ตัวอย่าง แสดงข้อความ Hello ขนาด 3 ที่ตำแหน่ง (10, 200) เขียนโปรแกรมได้ดังนี้
การกำหนดตำแหน่งข้อความ
กำหนดตำแหน่งข้อความได้ด้วยคำสั่ง tft.setTextDatum() มีรูปแบบการใช้งานดังนี้
ในขณะที่ datum สามารถกำหนดได้ดังนี้
ตัวอย่าง กำหนดให้แสดงข้อความ LED1 ที่จุดเริ่มต้น (100, 100) กำหนดให้ข้อความอยู่กึ่งกลางจุดเริ่มต้น
คำสั่งที่น่าสนใจอื่น ๆ
คำสั่งที่น่าสนใจมีดังนี้
การเขียนโปรแกรมรับค่าจากสวิตช์
การเขียนโปรแกรมรับค่าจากสวิตช์ สามารถใช้คำสั่ง pinMode() และ digitalRead() ที่มีในโปรแกรม Arduino ได้เลย
การเซ็ตโหมด
ก่อนอ่านค่าจากสวิตช จำเป็นต้องเซ็ตโหมดของขา ESP32 ให้พร้อมรับค่าก่อน โดยใช้คำสั่ง #define กำหนดขาต่อสวิตช์ดังนี้
ใน void setup() ใช้คำสั่ง pinMode() ดังนี้
จากนั้นใช้คำสั่ง digitalRead() เพื่ออ่านค่าออกมาได้เลย
การรับค่าจากสวิตช์
ใช้คำสั่ง digitalRead() เพื่ออ่านค่าจากสวิตช์ โดยค่าที่อ่านได้จะเป็น 0 หรือ LOW เมื่อกดสวิตช์อยู่ และอ่านค่าได้ 1 หรือ HIGH เมื่อไม่ได้กดสวิตช์
ตัวอย่าง อ่านค่าสถานะของสวิตช์ SW1 แสดงผลใน Serial Monitor
ตัวอย่างโปรแกรมสุ่มเลข
เมื่อกด SW1 จะสุ่มตัวเลขแสดงขึ้นบนหน้าจอ และหากกด SW2 หน้าจอจะถูกเคลียร์
การทดสอบ กดที่ SW1 ตัวเลขบนหน้าจอจะสุ่มแสดงขึ้นมา และเมื่อกด SW2 ตัวเลขในหน้าจอจะถูกล้าง (ดังวีดีโอ)
Last updated