การใช้งาน 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 ตัวใดก็ได้ขึ้นมา แล้วแก้ไขไฟล์ดังนี้

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

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

บันทึกไฟล์แล้วปิดไฟล์นี้ไปได้เลย

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

1. ค้นหาบรรทัด #define TFT_CS 15 แล้วแก้ไขเลข 15 เป็น

2. ค้นหาบรรทัด #define TFT_DC 2 แล้วแก้ไขเลข 2 เป็น 17

3. ค้นหาบรรทัด #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 เข้ามา

#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(3);

ระบบสี

ระบบสีีที่ใช้บนเครื่องคอมพิวเตอร์เป็นแบบ 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(150, 150, 80, tft.color24to16(0xFFFFFF));

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

tft.fillCircle(160, 100, 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", 20, 20);

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

การเปลี่ยนสีข้อความทำได้โดยใช้คำสั่ง 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); // วาดสามเหลี่ยมแบบทึบแสง 

การเขียนโปรแกรมรับค่าจากสวิตช์

การเขียนโปรแกรมรับค่าจากสวิตช์ สามารถใช้คำสั่ง pinMode() และ digitalRead() ที่มีในโปรแกรม Arduino ได้เลย

การเซ็ตโหมด

ก่อนอ่านค่าจากสวิตช จำเป็นต้องเซ็ตโหมดของขา ESP32 ให้พร้อมรับค่าก่อน โดยใช้คำสั่ง #define กำหนดขาต่อสวิตช์ดังนี้

#define SW1_PIN 33
#define SW2_PIN 35

ใน void setup() ใช้คำสั่ง pinMode() ดังนี้

pinMode(SW1_PIN, INPUT);
pinMode(SW2_PIN, INPUT);

จากนั้นใช้คำสั่ง digitalRead() เพื่ออ่านค่าออกมาได้เลย

การรับค่าจากสวิตช์

ใช้คำสั่ง digitalRead() เพื่ออ่านค่าจากสวิตช์ โดยค่าที่อ่านได้จะเป็น 0 หรือ LOW เมื่อกดสวิตช์อยู่ และอ่านค่าได้ 1 หรือ HIGH เมื่อไม่ได้กดสวิตช์

ตัวอย่าง อ่านค่าสถานะของสวิตช์ SW1 แสดงผลใน Serial Monitor

Serial.println(digitalRead(SW1_PIN));

ตัวอย่างโปรแกรมสุ่มเลข

เมื่อกด SW1 จะสุ่มตัวเลขแสดงขึ้นบนหน้าจอ และหากกด SW2 หน้าจอจะถูกเคลียร์

#include <TFT_eSPI.h>

#define SW1_PIN 33
#define SW2_PIN 35

TFT_eSPI tft = TFT_eSPI();

void setup() {
  pinMode(SW1_PIN, INPUT); // กำหนดโหมดของขาต่อ SW1
  pinMode(SW2_PIN, INPUT); // กำหนดโหมดของขาต่อ SW2

  tft.init(); // สั่งให้หน้าจอเริ่มทำงาน
  tft.setRotation(3); // หมุนหน้าจอ
  tft.fillScreen(tft.color24to16(0x000000)); // เคลียร์หน้าจอ
}

void loop() {
  if (digitalRead(SW1_PIN) == LOW) { // ถ้ากดสวิตช์ SW2
    while (digitalRead(SW1_PIN) == LOW) delay(10); // รอจนกว่าจะปล่อยสวิตช์

    tft.fillScreen(tft.color24to16(0x000000)); // เคลียร์หน้าจอ
    tft.setTextDatum(MC_DATUM); // กำหนดตำแหน่งข้อความตรงกลาง
    tft.setTextSize(6); // กำหนดตัวอักษรขนาด 6
    tft.setTextColor(tft.color24to16(0xFFFFFF)); // กำหนดตัวอักษรสีขาว
    tft.drawNumber(random(1111, 9999), 160 / 2, 80 / 2); // สุ่มเลข แล้วนำเลขไปแสดงตรงกลางหน้าจอ
  }
  if (digitalRead(SW2_PIN) == LOW) { // ถ้ากดสวิตช์ SW2
    while (digitalRead(SW2_PIN) == LOW) delay(10); // รอจนกว่าจะปล่อยสวิตช์

    tft.fillScreen(tft.color24to16(0x000000)); // เคลียร์หน้าจอ
  }
  delay(10);
}

การทดสอบ กดที่ SW1 ตัวเลขบนหน้าจอจะสุ่มแสดงขึ้นมา และเมื่อกด SW2 ตัวเลขในหน้าจอจะถูกล้าง (ดังวีดีโอ)