การใช้งานจอ LCD TFT ร่วมกับ ESP32 ด้วยไลบรารี่ TFT_eSPI

จอ LCD ที่ใช้งานในด้านระบบสมองกลฝังตัวแบ่งเป็น 2 ประเภทหลัก ๆ คือ 1) จอขาวดำ (Monochrome) ได้แก่ Character LCD และ LCD Dots Graphic โดยแสดงผลตัวอักษรหรือรูปภาพได้เพียงสีเดียวเท่านั้น และ 2) จอสี (TFT หรือ IPS ตามแต่จะเรียก) แสดงผลตัวอักษรหรือรูปภาพด้วยสีที่แตกต่างกันได้ เป็นจอที่แสดงผลได้ลักษณะเดียวกับหน้าจอคอมพิวเตอร์หรือหน้าจอสมาร์ทโฟน

จอ LCD แบบจอสี มีขนาดหน้าจอที่ให้เลือกหลากหลาย มีรูปแบบการต่อวงจรหลายแบบ ทำให้มีความยากในการเขียนโปรแกรมใช้งานโดยตรง ส่งผลให้มีผู้จัดทำไลบรารี่สำหรับจอ TFT ออกมามาก หนึ่งในไลบรารี่ที่น่าสนใจคือ TFT_eSPI

รู้จักกับไลบรารี่ TFT_eSPI

ไลบรารี่ TFT_eSPI เป็นไลบรารี่ที่ช่วยให้การเขียนโปรแกรมสั่งงานจอ LCD TFT ด้วยแพลตฟอร์ม Arduino สามารถทำได้ง่ายมากยิ่งขึ้น ชื่อคำสั่งส่วนใหญ่ในไลบรารี่อ้างอิงมาจาก Adafruit_GFX ทำให้คนที่เคยใช้ Adafruit_GFX สามารถย้ายมา TFT_eSPI ได้ง่าย ตัวไลบรารี่พัฒนาให้ใช้งานได้กับไมโครคอนโทรลเลอร์ 32 บิต ที่นิยมใช้งานในปัจจุบัน ได้แค่ STM32 ESP8266 และ ESP32 โดยไลบรารี่ออกแบบให้เลือกใช้ DMA ได้ ทำให้การขับจอสามารถทำได้รวดเร็วมากไลบรารี่อื่นมาก

ติดตั้งไลบรารี่ TFT_eSPI

การติดตั้งไลบรารี่ TFT_eSPI สามารถติดตั้งผ่าน Library Manager ได้ โดยมีขั้นตอนดังนี้

เปิดโปรแกรม ArduinoIDE ขึ้นมา จากนั้นกดไปที่ Library Manager  ในช่องค้นหา ให้พิมพ์ TFT_eSPI เลือกไลบรารี่ TFT_eSPI แล้วกดปุ่ม INSTALL

แล้วรอติดตั้งไลบรารี่ซักครู่ เมื่อติดตั้งเสร็จแล้ว จะแสดงคำว่า Installed (ดังรูป) 

ตรวจสอบผลการติดตั้งไลยบารี่ 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 ตัวใดก็ได้ แล้วทำตามขั้นตอนดังนี้

การตั้งค่าไลบรารี่ TFT_eSPI ใช้งานกับจอ ILI9341 แบบ SPI

จอ LCD ที่ใช้ไอซี ILI9341 มี 3 ขนาด คือ ขนาด 2.4 นิ้ว ขนาด 2.8 นิ้ว และขนาด 3.2 นิ้ว แบ่งทัชเป็น 2 แบบ

1. ทัชสกรีนแบบ Resistive (บอร์ดแดง) ไอซี Touch Screen Controller เบอร์ XPT2046
2. ทัชสกรีนแบบ Capacitive (บอร์ดดำ) ไอซี Touch Screen Controller เบอร์ FT6336U

รูปที่ x จอ TFT LCD ขนาด 2.4 นิ้ว ILI9341 ทัช Resistive

รูปที่ x จอ TFT LCD ขนาด 2.8 นิ้ว ILI9341 ทัช Resistive

รูปที่ x จอ TFT LCD ขนาด 3.2 นิ้ว ILI9341 ทัช Resistive

รูปที่ x จอ TFT LCD ขนาด 2.8 นิ้ว ILI9341V ทัช Capacitive

รูปที่ x จอ TFT LCD ขนาด 3.2 นิ้ว ILI9341V ทัช Capacitive

ไฟล์ User_Setup_Select.h ให้ค้นหาบรรทัด #include <user_setup.h> แล้วเพิ่มเครื่องหมาย Comment (//) เข้าไปที่หน้าบรรทัด

แล้วค้นหาบรรทัด #include <User_Setups/Setup1_ILI9341.h> แล้วลบเครื่องหมาย Comment (//) หน้าบรรทัดนั้นออก แล้วบันทึกไฟล์

จากนั้นเปิดไฟล์ Setup1_ILI9341.h ที่อยู่ในโฟลเดอร์ User_Setups ขึ้นมา แล้วคัดลอกโค้ดโปรแกรมต่อไปนี้ ไปวางทับโค้ดทั้งไฟล์ บันทึกไฟล์ให้เรียบร้อย แล้วปิดโปรแกรม Text Editor ไปได้เลย

จากโค้ดโปรแกรมในไฟล์ Setup1_ILI9341.h บรรทัดที่ 5 ถึง 13 เป็นโค้ดที่ใช้กำหนดขาที่ต่อจอเข้ากับบอร์ด ESP32 ทำให้จำเป็นต้องต่อวงจรจริงแบบเดียวกับในโค้ดโปรแกรมด้วย

วงจรจริงที่ต่อจอ LCD ILI9341 ขนาด 3.2 นิ้ว 2.8 นิ้ว และ 2.4 นิ้ว แสดงดังรูปด้านล่าง

หลังจากต่อวงจรแล้ว ให้ข้ามไปขั้นตอนการทดสอบใช้งานไลบรารี่ TFT_eSPI ได้เลย

การตั้งค่าไลบรารี่ TFT_eSPI ใช้งานกับจอ ILI9488 แบบ SPI

จอ LCD ใช้ไอซีขับจอเบอร์ ILI9488 เชื่อมต่อกับ ESP32 แบบ SPI มีรุ่นเดียว คือจอ LCD ขนาด 3.5 นิ้ว แบบมีทัช Resistive (บอร์ดแดง) ไอซี Touch Screen Controller เบอร์ XPT2046 ใช้แรงดันไฟฟ้า 3.3V ในการทำงาน

รูปที่ x จอ LCD TFT ขนาด 3.5 นิ้ว ไอซีขับ ILI9488

ไฟล์ User_Setup_Select.h ให้ค้นหาบรรทัด #include <user_setup.h> แล้วเพิ่มเครื่องหมาย Comment (//) เข้าไปที่หน้าบรรทัด

แล้วค้นหาบรรทัด #include <User_Setups/Setup21_ILI9488.h> ลบเครื่องหมาย Comment (//) หน้าบรรทัดออก แล้วบันทึกไฟล์

จากนั้นเปิดไฟล์ Setup21_ILI9488.h ที่อยู่ในโฟลเดอร์ User_Setups ขึ้นมา แล้วคัดลอกโค้ดโปรแกรมต่อไปนี้ ไปวางทับโค้ดทั้งไฟล์ บันทึกไฟล์ให้เรียบร้อย แล้วปิดโปรแกรม Text Editor ไปได้เลย

จากโค้ดโปรแกรมในไฟล์ Setup21_ILI9488.h บรรทัดที่ 7 ถึง 15 เป็นโค้ดที่ใช้กำหนดขาที่ต่อจอเข้ากับบอร์ด ESP32 ทำให้จำเป็นต้องต่อวงจรจริงแบบเดียวกับในโค้ดโปรแกรมด้วย

วงจรจริงที่ต่อจอ LCD ILI9488 ขนาด 3.5 นิ้ว แสดงดังรูปด้านล่าง

หลังจากต่อวงจรแล้ว ให้ข้ามไปขั้นตอนการทดสอบใช้งานไลบรารี่ TFT_eSPI ได้เลย

การตั้งค่าไลบรารี่ TFT_eSPI ใช้งานกับจอ ST7796S แบบ SPI

จอ LCD ใช้ไอซีขับจอเบอร์ ST7796S เชื่อมต่อกับ ESP32 แบบ SPI มี 3 รุ่นคือ

1. จอ LCD ขนาด 4.0 นิ้ว แบบมีทัช Resistive (บอร์ดแดง) ไอซี Touch Screen Controller เบอร์ XPT2046
2. จอ LCD ขนาด 3.5 นิ้ว แบบมีทัช Capacitive (บอร์ดดำ) ไอซี Touch Screen Controller เบอร์ FT6336U
3. จอ LCD ขนาด 4.0 นิ้ว แบบมีทัช Capacitive (บอร์ดดำ) ไอซี Touch Screen Controller เบอร์ FT6336U

รูปที่ x จอ LCD TFT ขนาด 4.0 นิ้ว ไอซีขับ ST7796S

รูปที่ x จอ LCD TFT ขนาด 3.5 นิ้ว ไอซีขับ ST7796U

รูปที่ x จอ LCD TFT ขนาด 4 นิ้ว ไอซีขับ ST7796U

ไฟล์ User_Setup_Select.h ให้ค้นหาบรรทัด #include <user_setup.h> แล้วเพิ่มเครื่องหมาย Comment (//) เข้าไปที่หน้าบรรทัด

แล้วค้นหาบรรทัด #include <User_Setups/Setup43_ST7735.h> ลบเครื่องหมาย Comment (//) หน้าบรรทัดออก แล้วบันทึกไฟล์

จากนั้นเปิดไฟล์ Setup43_ST7735.h ที่อยู่ในโฟลเดอร์ User_Setups ขึ้นมา แล้วคัดลอกโค้ดโปรแกรมต่อไปนี้ ไปวางทับโค้ดทั้งไฟล์ บันทึกไฟล์ให้เรียบร้อย แล้วปิดโปรแกรม Text Editor ไปได้เลย

จากโค้ดโปรแกรมในไฟล์ Setup43_ST7735.h บรรทัดที่ 31 ถึง 39 เป็นโค้ดที่ใช้กำหนดขาที่ต่อจอเข้ากับบอร์ด ESP32 ทำให้จำเป็นต้องต่อวงจรจริงแบบเดียวกับในโค้ดโปรแกรมด้วย

วงจรจริงที่ต่อจอ LCD ST7796S แสดงดังรูปด้านล่าง

หลังจากต่อวงจรแล้ว ให้ข้ามไปขั้นตอนการทดสอบใช้งานไลบรารี่ TFT_eSPI ได้เลย

ทดสอบใช้งานไลบรารี่ TFT_eSPI

หลังจากตั้งค่าไลบรารี่แล้ว ขั้นตอนต่อมาคือทดสอบใช้งานไลบรารี่ TFT_eSPI ว่าสามารถขับจอให้แสดงข้อความรูปภาพได้หรือไม่ ก่อนนำไลบรารี่ไปใช้งานจริง

เปิดโปรแกรม ArduinoIDE ขึ้นมา กดไปที่ File > Examples > TFT_eSPI เลือกหมวดตามความละเอียดของหน้าจอ (ILI9341 เลือก 320 x 240, ILI9488 และ ST7735S เลือก 480 x 320) แล้วเลือก TFT_graphicstest_one_lib

กดอัพโหลดโปรแกรมตัวอย่าง TFT_graphicstest_one_lib ลงบอร์ดไปได้เลย

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

ทดสอบทัชสกรีน Resistive

ไลบรารี่ TFT_eSPI รองรับการใช้งานกับชิปทัช XPT2046 ในตัว ทำให้ใช้ไลบรารี่นี้ทดสอบทัชได้เลย

ใช้โปรแกรมตัวอย่าง Test_Touch_Controller ในการทดสอบ

อัพโหลดโปรแแกรม Test_Touch_Controller ลงบอร์ด แล้วเปิด Serial Monitor ขึ้นมา ปรับไปที่ 115200 baud จะแสดงค่าข้อมูลดิบที่อ่านได้ขึ้นมา โดยสังเกตว่า เมื่อยังไม่สัมผัสบนหน้าจอ x มีค่าเป็น 0

เมื่อสัมผันบนหน้าจอ ค่า x จะไม่เป็น 0 และเมื่อเปลี่ยนจุดที่สัมผัสบนหน้าจอ จะเห็นว่าค่า x y z จะเปลี่ยนตามไปด้วย

การเขียนโปรแกรมสั่งงานจอ LCD เบื้องต้นด้วยไลบรารี่ TFT_eSPI

การเขียนโปรแกรมสังงานจอ LCD เริ่มต้นด้วยการ include ไลบรารี่ TFT_eSPI เข้ามา

#include <TFT_eSPI.h>

เพื่อให้ใช้งานคำสั่งที่อยู่ในไลบรารี่ได้ จำเป็นต้องสร้างออปเจค tft จากคลาส TFT_eSPI ก่อน ด้วยคำสั่ง

TFT_eSPI tft = TFT_eSPI();

แล้วใช้คำสั่ง tft.init(); ใน void setup() เพื่อสั่งให้หน้าจอเริ่มทำงาน

tft.init();

เท่านี้ก็พร้อมเขียนโปรแกรมสั่งงานจอแล้ว

การหมุนหน้าจอ

ใช้คำสั่ง tft.setRotation() มีรูปแบบการใช้งานดังนี้

void TFT_eSPI::setRotation(uint8_t r); // เมื่อ r กำหนดได้ 0 ถึง 3

ตัวอย่าง หมุนหน้าจอเป็นแนวนอน

tft.setRotation(1);

ระบบสี

ระบบสีีที่ใช้บนเครื่องคอมพิวเตอร์เป็นแบบ 24 บิต RGB888 แต่ที่ใช้บนจอ TFT และไลบรารี่ TFT_eSPI ใช้ระบบสี RGB565 การแปลงสี RGB888 เป็น RGB565 สามารถทำได้โดยใช้คำสั่ง tft.color565() หรือ tft. color24to16() มีรูปแบบคำสั่งดังนี้

uint16_t TFT_eSPI::color565(uint8_t red, uint8_t green, uint8_t blue);
uint32_t TFT_eSPI::color24to16(uint32_t color888);

ตัวอย่าง 1 วาดเส้นที่ตำแหน่งเริ่มต้น (10, 10) ไปที่ตำแหน่ง (40, 40) กำหนดเส้นสีแดง (0xFF0000) เขียนโปรแกรมได้ดังนี้

tft.drawLine(10, 10, 40, 40, tft.color24to16(0xFF0000)); // int32_t xs, int32_t ys, int32_t xe, int32_t ye, uint32_t color

ตัวอย่าง 2 วาดเส้นที่ตำแหน่งเริ่มต้น (50, 20) ไปที่ตำแหน่ง (100, 180) กำหนดเส้นสีเขียว (0x00FF00) เขียนโปรแกรมได้ดังนี้

tft.drawLine(50, 20, 100, 180, tft.color24to16(0x00FF00)); // int32_t xs, int32_t ys, int32_t xe, int32_t ye, uint32_t color

การเทสีทั้งหน้าจอ

ใช้คำสั่ง tft.fillScreen() มีรูปแบบคำสั่งดังนี้

void TFT_eSPI::fillScreen(uint32_t color);

ตัวอย่าง เทสีทั้งหน้าจอด้วยสีดำ

tft.fillScreen(tft.color24to16(0x000000));

การวาดเส้นตรง

การวาดเส้นตรงมีคำสั่งให้ใช้งานดังนี้

void TFT_eSPI::drawLine(int32_t xs, int32_t ys, int32_t xe, int32_t ye, uint32_t color); // ใช้วาดเส้นตรงแนวตั้ง แนวนอน และแบบเอียง
void TFT_eSPI::drawFastVLine(int32_t x, int32_t y, int32_t h, uint32_t color); // ใช้วาดเส้นตรงแบบแนวตั้ง
void TFT_eSPI::drawFastHLine(int32_t x, int32_t y, int32_t w, uint32_t color); // ใช้วาดเส้นตรงแนวนอน

ตัวอย่างที่ 1 วาดเส้นตรงที่ตำแหน่งเริ่มต้น (0, 0) ไปตำแหน่ง (140, 20) กำหนดเส้นสีขาว (0xFFFFFF) เขียนโปรแกรมได้ดังนี้

tft.drawLine(0, 0, 140, 20, tft.color24to16(0xFFFFFF));

ตัวอย่างที่ 2 วาดเส้นตรงแนวตั้งที่ตำแหน่งเริ่มต้น (30, 0) สูง 100 พิกเซล สีขาว (0xFFFFFF) เขียนโปรแกรมได้ดังนี้

tft.drawFastVLine(30, 0, 100, tft.color24to16(0xFFFFFF));

ตัวอย่างที่ 3 วาดเส้นตรงแนวนอนที่ตำแหน่งเริ่มต้น (0, 100) กว้าง 120 พิกเซล สีขาว (0xFFFFFF) เขียนโปรแกรมได้ดังนี้

tft.drawFastHLine(0, 100, 120, tft.color24to16(0xFFFFFF));

การวาดสีเหลี่ยม

การวาดสี่เหลี่ยมมีคำสั่งให้ใช้งานดังนี้

void TFT_eSPI::drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color); // วาดกรอบสี่เหลี่ยม
void TFT_eSPI::fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint32_t color); // วาดสี่เหลี่ยมแบบทึบ
void TFT_eSPI::drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color); // วาดกรอบสี่เหลี่ยมขอบโค้ง
void TFT_eSPI::fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t radius, uint32_t color); // วาดสี่เหลี่ยมแบบทึบขอบโค้ง

ตัวอย่างที่ 1 วาดกรอบสี่เหลี่ยมที่จุดเริ่มต้น (30, 30) ขนาด 40 x 60 พิกเซล สีน้ำเงิน เขียนโปรแกรมได้ดังนี้

tft.drawRect(30, 30, 40, 60, tft.color24to16(0x0000FF));

ตัวอย่างที่ 2 วาดกล่องสี่เหลี่ยมทึบแสงที่จุดเริ่มต้น (20, 60) ขนาด 100 x 100 พิกเซล สีขาว เขียนโปรแกรมได้ดังนี้

tft.fillRect(30, 30, 40, 60, tft.color24to16(0xFFFFFF));

ตัวอย่างที่ 3 วาดกรอบสี่เหลี่ยมขอบโค้งที่จุดเริ่มต้น (30, 30) ขนาด 40 x 60 พิกเซล ขอบโค้ง 20 พิกเซล สีน้ำเงิน เขียนโปรแกรมได้ดังนี้

tft.drawRoundRect(30, 30, 40, 60, 20, tft.color24to16(0x0000FF));

ตัวอย่างที่ 4 วาดกล่องสี่เหลี่ยมทึบแสงขอบโค้งที่จุดเริ่มต้น (20, 60) ขนาด 100 x 100 พิกเซล ขอบโค้ง 10 พิกเซล สีขาว เขียนโปรแกรมได้ดังนี้

tft.fillRoundRect(30, 30, 40, 60, 10, tft.color24to16(0xFFFFFF));

การวาดวงกลม

การวาดวงกลมมีคำสั่งให้ใช้งานดังนี้

void TFT_eSPI::drawCircle(int32_t x, int32_t y, int32_t r, uint32_t color); // วาดกลมโปร่งแสง
void TFT_eSPI::fillCircle(int32_t x, int32_t y, int32_t r, uint32_t color); // วาดวงกลมทึบแสง

ตัวอย่างที่ 1 วาดวงกลมโปร่งแสงจุดศูนย์กลางอยู่ที่ตำแหน่ง (150, 150) รัศมี 80 สีขาว เขียนโปรแกรมได้ดังนี้

tft.drawCircle(100, 100, 80, tft.color24to16(0xFFFFFF));

ตัวอย่างที่ 2 วาดวงกลมทึบแสงจุดศูนย์กลางอยู่ที่ตำแหน่ง (160, 100) รัศมี 40 สีขาว เขียนโปรแกรมได้ดังนี้

tft.fillCircle(160, 160, 40, tft.color24to16(0xFFFFFF));

การใส่ข้อความ

คำสั่งใช้แสดงข้อความมีดังนี้

void TFT_eSPI::drawNumber(long intNumber, int32_t x, int32_t y); // แสดงตัวเลขจำนวนเต็ม
void TFT_eSPI::drawFloat(float floatNumber, uint8_t decimal, int32_t x, int32_t y); // แสดงตัวเลขทศนิยม
void TFT_eSPI::drawString(const String& string, int32_t x, int32_t y); // แสดงข้อความ

ตัวอย่างที่ 1 แสดงตัวเลข 120 ที่ตำแหน่ง (65, 80) เขียนโปรแกรมได้ดังนี้

tft.drawNumber(120, 65, 80);

ตัวอย่างที่ 2 แสดงตัวเลข 3.124 ทศนิยม 3 ตำแหน่ง ที่ตำแหน่ง (100, 60) เขียนโปรแกรมได้ดังนี้

tft.drawFloat(3.124, 3, 100, 60);

ตัวอย่างที่ 3 แสดงข้อความ Hello ที่ตำแหน่ง (20, 20) เขียนโปรแกรมได้ดังนี้

tft.drawString("Hello", 100, 60);

การเปลี่ยนสีข้อความ

การเปลี่ยนสีข้อความทำได้โดยใช้คำสั่ง tft.setTextColor(); มีรูปแบบดังนี้

void TFT_eSPI::setTextColor(uint16_t color); // กำหนดสีของข้อความ

โดยจะต้องเรียกใช้คำสั่ง tft.setTextColor(); ก่อนคำสั่งแสดงข้อความ

ตัวอย่าง แสดงข้อความ Hello สีขาวที่ตำแหน่ง (10, 200) เขียนโปรแกรมได้ดังนี้

tft.setTextColor(tft.color24to16(0xFFFFFF));
tft.drawString("Hello", 10, 200);

การเปลี่ยนขนาดตัวอักษร

ใช้คำสั่ง tft.setTextSize(); มีรูปแบบการใช้งานดังนี้

void TFT_eSPI::setTextSize(uint8_t size);

โดยจะต้องเรียกใช้คำสั่ง tft.setTextSize(); ก่อนใช้คำสั่งแสดงข้อความ

ตัวอย่าง แสดงข้อความ Hello ขนาด 3 ที่ตำแหน่ง (10, 200) เขียนโปรแกรมได้ดังนี้

tft.setTextSize(3);
tft.drawString("Hello", 10, 200);

การกำหนดตำแหน่งข้อความ

กำหนดตำแหน่งข้อความได้ด้วยคำสั่ง tft.setTextDatum() มีรูปแบบการใช้งานดังนี้

void TFT_eSPI::setTextDatum(uint8_t datum);

ในขณะที่ datum สามารถกำหนดได้ดังนี้

#define TL_DATUM 0 // Top left (default)
#define TC_DATUM 1 // Top centre
#define TR_DATUM 2 // Top right
#define ML_DATUM 3 // Middle left
#define CL_DATUM 3 // Centre left, same as above
#define MC_DATUM 4 // Middle centre
#define CC_DATUM 4 // Centre centre, same as above
#define MR_DATUM 5 // Middle right
#define CR_DATUM 5 // Centre right, same as above
#define BL_DATUM 6 // Bottom left
#define BC_DATUM 7 // Bottom centre
#define BR_DATUM 8 // Bottom right
#define L_BASELINE 9 // Left character baseline (Line the 'A' character would sit on)
#define C_BASELINE 10 // Centre character baseline
#define R_BASELINE 11 // Right character baseline

ตัวอย่าง กำหนดให้แสดงข้อความ LED1 ที่จุดเริ่มต้น (100, 100) กำหนดให้ข้อความอยู่กึ่งกลางจุดเริ่มต้น

tft.setTextDatum(MC_DATUM);
tft.drawString("LED1", 100, 100);

คำสั่งที่น่าสนใจอื่น ๆ

คำสั่งที่น่าสนใจมีดังนี้

void TFT_eSPI::drawEllipse(int16_t x, int16_t y, int32_t rx, int32_t ry, uint16_t color); // วาดวงกลมแบบโปร่งแสง 
void TFT_eSPI::fillEllipse(int16_t x, int16_t y, int32_t rx, int32_t ry, uint16_t color); // วาดวงกลมแบบทึบแสง 

void TFT_eSPI::drawTriangle(int32_t x1,int32_t y1, int32_t x2,int32_t y2, int32_t x3,int32_t y3, uint32_t color); // วาดสามเหลี่ยมแบบโปร่งแสง 
void TFT_eSPI::fillTriangle(int32_t x1,int32_t y1, int32_t x2,int32_t y2, int32_t x3,int32_t y3, uint32_t color); // วาดสามเหลี่ยมแบบทึบแสง 

การใช้งานทัชสกรีน Resistive

การใช้งานทัชสกรีนจำเป็นต้องมีการปรับจูนตำแหน่งก่อน มิฉะนั้นตำแหน่งที่ได้จากโค้ดโปรแกรมจะไม่ตรงกับตำแหน่งจริง ๆ บนหน้าจอ

การปรับจูนตำแหน่งให้ใช้โปรแกรมตัวอย่าง Touch_calibrate

อัพโหลดโปรแกรมตัวอย่าง Touch_calibrate เปิด Serial Monitor ขึ้นมา

ที่หน้าจอจะแสดงข้อความให้กดไปที่ตำแหน่งต่าง ๆ บนหน้าจอ ให้กดไปทีมุมของหน้าจอตามที่ข้อความกำหนด

การอ่านค่าตำแหน่งการกดบนหน้าจอใช้คำสั่ง tft.getTouch(); มีรูปแบบการใช้งานดังนี้

uint8_t TFT_eSPI::getTouch(uint16_t *x, uint16_t *y, uint16_t threshold = 600);

ค่าที่ส่งกลับมา (Return) จากคำสั่ง tft.getTouch(); คือ true กรณีที่มีการสัมผัสบนหน้าจอ และ false กรณีไม่มีการสัมผัสบนหน้าจอ

ตัวอย่าง แสดงค่าตำแหน่งที่กดบนหน้าจอ Serial Monitor

uint16_t x, y;
if (tft.getTouch(&x, &y)) {
Serial.printf("Touched at (%d, %d)\n", x, y);
}

การใช้งานทัชสกรีน Capacitive

ติดตั้งไลบรารี่ Arduino-FT6336U ตามขั้นตอนดังนี้

เข้าไปที่ https://github.com/ArtronShop/Arduino-FT6336U จากนั้นกดปุ่ม Code > Download ZIP รอจนกว่าจะโหลดเสร็จ

ที่โปรแกรม Arduino IDE ติดตั้งไลบรารี่จากไฟล์ .ZIP โดยกดเมนู Sketch > Include Library > Add .ZIP Library...

จากนั้นเข้าไปโฟลเดอร์ที่เก็บไฟล์ไลบรารี่ที่ดาวน์โหลดมา เลือกไฟล์ไลบรารี่ได้ดาวน์โหลดมา แล้วกด Open

รอจนกว่า Arduino IDE จะติดตั้งไลบรารี่เสร็จ เมื่อติดตั้งเสร็จจะแสดงข้อความ Library installed (ดังรูป)

การอ่านค่าตำแหน่งการกดบนหน้าจอ ต้องเรียกใช้คำสั่งดังนี้

1) ใช้คำสั่ง include นำเข้าคำสั่งไลบรารี่ Arduino-FT6336U ดังนี้

#include <FT6336U.h>

2) ประกาศสร้างออปเจค touch จากคลาส FT6336U

FT6336U tp;

3) ใน void setup() เรียกใช้คำสั่ง touch.begin(); เพื่อให้ชิปทัชเริ่มทำงาน

void setup() {
 tp.begin();
}

4) ใน void loop() ใช้คำสั่ง touch.read_td_status() เพื่ออ่านจำนวนนิ้วที่สัมผัสบนหน้าจอ โดยหากคำสั่งนี้พบว่ามีนิ้วสัมผัสบนหน้าจออย่างน้อย 1 นิ้ว ให้ใช้คำสั่ง touch.read_touch1_x() และ touch.read_touch1_y() อ่านค่าพิกัดบนหน้าจอที่นิ้วสัมผัส

void loop() {
 if (tp.read_td_status()) {
 int x = tp.read_touch1_x();
 int y = tp.read_touch1_y();
 Serial.printf("Touched at (%d, %d)\n", x, y);
 }
}

ได้โค้ดโปรแกรมอ่านค่าการสัมผัสบนหน้าจอแสดงผลบน Serial Monitor ฉบับเต็มดังนี้

หลังจากอัพโหลดโค้ดลงบอร์ด เปิด Serial Monitor ขึ้นมา เมื่อสัมผัสบนหน้าจอ พิกัดที่นิ้วสัมผัสจะแสดงขึ้นมา (ดังรูป)

โครงงานเปิด-ปิดไฟควบคุมผ่านจอ LCD

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

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

สั่งเทสีขาวทั้งหน้าจอ

tft.fillScreen(tft.color24to16(0x000000));

ใช้คำสั่งวาดวงกลมแบบทึบที่ตำแหน่ง (100, 100) รัศมี 60 พิกเซล สี 0xC3C3C3

tft.fillCircle(100, 100, 60, tft.color24to16(0xC3C3C3));

ใช้คำสั่งวาดสี่เหลี่ยมพื้นผ้าสีเขียวที่ตำแหน่งเริ่มต้น (0, 200) ขนาด 240x120 พิกเซล สี 0x1ABC9C

tft.fillRect(0, 200, 240, 120, tft.color24to16(0x1ABC9C));

ใช้คำสั่งวาดสี่เหลี่ยมพื้นผ้าสีแดงที่ตำแหน่งเริ่มต้น (240, 200) ขนาด 240x120 พิกเซล สี 0xE74C3C

tft.fillRect(240, 200, 240, 120, tft.color24to16(0xE74C3C));

ใส่ข้อความ GPIO ที่จุดเริ่มต้น (200, 100) กำหนดขนาด 6 กำหนดสี 0x3B3B3B และกำหนดชิดซ้ายกลางของจุดเริ่มต้น

tft.setTextSize(6);
tft.setTextColor(tft.color24to16(0x3B3B3B));
tft.setTextDatum(ML_DATUM);
tft.drawString(“GPIO14”, 200, 100);

ใส่ข้อความ NO ที่จุดเริ่มต้น (120, 260) และใส่ข้อความ OFF ที่จุดเริ่มต้น (360, 260) กำหนดขนาด 4 กำหนดสี 0xFFFFFF และกำหนดอยู่กึ่งกลางของจุดเริ่มต้น

tft.setTextSize(4);
tft.setTextColor(tft.color24to16(0xFFFFFF));
tft.setTextDatum(MC_DATUM);
tft.drawString("ON", 120, 260);
tft.drawString("OFF", 360, 260);

ผลที่ได้เป็นดังรูปด้านล่าง

ต่อมาเป็นการเขียนโปรแกรมให้เมื่อกดส่วนปุ่ม ON สีเขียว หลอดแอลอีดีที่ต่ออยู่กับขา GPIO14 จะต้องติดสว่างขึ้นมา และกดบริเวณปุ่ม OFF หลอดแอลอีดีจะดับ

เพิ่มคำสั่งกำหนด GPIO14 เป็นเอาต์พุตที่ void setup()

pinMode(14, OUTPUT);

หลักการเขียนโปรแกรมจอทัช คือ จำเป็นจะต้องรู้ก่อนว่าพื้นที่ตำแหน่งใด เมื่อกดแล้ว จะเกิดอะไรขึ้น จากเงื่อนไขที่กล่าวมา จะพบว่าปุ่ม ON อยู่ในพื้นที่แกน x ที่ 0 ถึง 240 และแกน y อยู่ที่ 200 ถึง 320

ปุ่ม OFF อยู่ในพื้นที่แกน x ที่ 240 ถึง 480 และแกน y อยู่ที่ 200 ถึง 320

จากตัวอย่างแสดงค่าตำแหน่งที่กดบนหน้าจอ Serial Monitor สามารถใช้เงื่อนไข if กำหนดพื้นที่ได้ดังนี้

uint16_t x, y;
if (tft.getTouch(&x, &y)) {
Serial.printf("Touched at (%d, %d)\n", x, y);
 if ((x > 0 && x < 240) && (y > 200 && y < 320)) { // จำกัดพื้นที่ปุ่ม ON
digitalWrite(14, HIGH); // สั่งให้หลอดแอลอีดีติด
} else if ((x > 240 && x < 480) && (y > 200 && y < 320)) { // จำกัดพื้นที่ปุ่ม OFF
digitalWrite(14, LOW); // สั่งให้หลอดแอลอีดีดับ
}
}

โดยโค้ดโปรแกรมด้านบนจำเป็นจะต้องอยู่ใน void loop() เพื่อให้มีการตรวจจับการกดบนหน้าจออยู่ตลอดเวลา

ต่อมา แก้ไขให้วงกลมสีเทาให้เปลี่ยนเป็นสีเขียวเมื่อแอลอีดีติด และกลับเป็นสีเทาเมื่อแอลอีดีดับ สามารถแก้ไขโปรแกรมเพิ่มเติมได้ดังนี้ (กรณีใช้บอร์ดแดง ทัช Resistive)

uint16_t x, y;
if (tft.getTouch(&x, &y)) {
Serial.printf("Touched at (%d, %d)\n", x, y);
 if ((x > 0 && x < 240) && (y > 200 && y < 320)) {
digitalWrite(14, HIGH);
tft.fillCircle(100, 100, 60, tft.color24to16(0x27AE60));
} else if ((x > 240 && x < 480) && (y > 200 && y < 320)) {
digitalWrite(14, LOW);
tft.fillCircle(100, 100, 60, tft.color24to16(0xC3C3C3));
}
}

(กรณีใช้บอร์ดดำ ทัช Capacitive)

if (touch.read_td_status()) {
int x = touch.read_touch1_x();
int y = touch.read_touch1_y();
Serial.printf("Touched at (%d, %d)\n", x, y);
 if ((x > 0 && x < 240) && (y > 200 && y < 320)) {
digitalWrite(14, HIGH);
tft.fillCircle(100, 100, 60, tft.color24to16(0x27AE60));
} else if ((x > 240 && x < 480) && (y > 200 && y < 320)) {
digitalWrite(14, LOW);
tft.fillCircle(100, 100, 60, tft.color24to16(0xC3C3C3));
}
}

เท่านี้โค้ดโปรแกรมของโครงงานเปิด-ปิดไฟควบคุมผ่านจอ LCD ก็เสร็จสมบูรณ์แล้ว (กรณีใช้บอร์ดแดง ทัช Resistive)

(กรณีใช้บอร์ดดำ ทัช Capacitive)

ผลที่ได้เป็นไปตามวีดีโอด้านล่างนี้

ข้อมูลเขียนบรรณานุกรม

จบไปแล้วสำหรับบทความ การใช้งานจอ LCD TFT ร่วมกับ ESP32 ด้วยไลบรารี่ TFT_eSPI ก็หวังว่าผู้อ่านทุกท่านจะได้รับความรู้เกี่ยวกับจอ LCD ไปบ้าง ไม่มากก็น้อย และเพื่อให้ร้านไอโอเอ็กซ์ฮ๊อบอยู่ได้ สามารถสนับสนุนเราได้โดยสั่งซื้อสินค้ากับเรา และอย่าลืมติดตามเราให้ครบทุกช่องทาง ทั้ง Facebook เพจ ArtronShop และ Youtube ช่อง ArtronShop แล้วพบกันในบทความหน้า สำหรับบทความนี้

~สวัสดีครับ~