โปรเจกต์ คู่มือสำหรับ Beginner ในการใช้งาน TFT LCD Displays

ในบทความนี้ คุณจะได้เรียนรู้วิธีการใช้งาน TFT LCD ร่วมกับบอร์ด Arduino โดยจะมีการอธิบายตั้งแต่คำสั่งพื้นฐานไปจนถึงการออกแบบและเทคนิคระดับมืออาชีพ เมื่ออ่านจบคุณจะสามารถ:

• เขียนข้อความและตัวเลขด้วย Font ของคุณเอง

• วาดรูปทรงต่างๆ เช่น วงกลม สามเหลี่ยม สี่เหลี่ยม และอื่นๆ

• เปลี่ยนค่าพารามิเตอร์ของหน้าจอ เช่น การหมุน (Rotation)

Drivers & Libraries

ดาวน์โหลด Library จาก Arduino Library Manager

คุณจำเป็นต้องใช้ Library ดังต่อไปนี้:

• Adafruit_GFX
• MCUFRIEND_kbv

Including Libraries

#include "Adafruit_GFX.h"
#include "MCUFRIEND_kbv.h"
MCUFRIEND_kbv tft;  

บรรทัดเหล่านี้คือ Library กราฟิกหลักสำหรับการแสดงผล (เขียนโดย Adafruit)

Basic Commands

Running the LCD

uint16_t ID = tft.readID();
tft.begin(ID);

ฟังก์ชัน tft.readID จะอ่านค่า ID จากจอแสดงผลและเก็บไว้ในตัวแปร ID จากนั้นฟังก์ชัน tft.begin จะรับค่า ID เพื่อให้ LCD พร้อมสำหรับการใช้งาน

Resolution of the Display

ขนาดที่เป็นที่นิยมสำหรับจอแสดงผล Arduino ได้แก่ 3.5 นิ้ว 480×320, 2.8 นิ้ว 400×240, 2.4 นิ้ว 320×240 และ 1.8 นิ้ว 220×176

Color of the Screen

tft.fillScreen(t);

ฟังก์ชัน fillScreen จะเปลี่ยนสีของหน้าจอเป็นสี t โดย t ควรเป็นตัวแปรแบบ 16bit ที่เก็บ Code สีแบบ UTFT

#define BLACK 0x0000
#define NAVY 0x000F
#define DARKGREEN 0x03E0
#define DARKCYAN 0x03EF
#define MAROON 0x7800
#define PURPLE 0x780F
#define OLIVE 0x7BE0
#define LIGHTGREY 0xC618
#define DARKGREY 0x7BEF
#define BLUE 0x001F
#define GREEN 0x07E0
#define CYAN 0x07FF
#define RED 0xF800
#define MAGENTA 0xF81F
#define YELLOW 0xFFE0
#define WHITE 0xFFFF
#define ORANGE 0xFD20
#define GREENYELLOW 0xAFE5
#define PINK 0xF81F

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

Filling Pixels

tft.drawPixel(x,y,t); //drawPixel(int16_t x, int16_t y, uint16_t t)
tft.readPixel(x,y); //uint16_t readPixel(int16_t x, int16_t y)

drawPixel ฟังก์ชันนี้จะเติมสี t ลงใน Pixel ที่ตำแหน่ง x และ y

readPixel ฟังก์ชันนี้จะอ่านค่าสีของ Pixel ที่ตำแหน่ง x และ y

Drawing Lines

tft.drawLine(xi,yi,xj,yj,t); 
//drawLine(int16_t x0, int16_t y0, int16_t x1, int16_t y1, uint16_t t)

drawLine ฟังก์ชันนี้จะวาดเส้นตรงที่เริ่มต้นจากตำแหน่ง xi, yi ไปสิ้นสุดที่ xj, yj ด้วยสี t

Drawing Rectangles

 tft.fillRect(x,y,w,h,t); 
//fillRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t t)
tft.drawRect(x,y,w,h,t); 
//drawRect(int16_t x, int16_t y, int16_t w, int16_t h, uint16_t t)

fillRect ฟังก์ชันนี้จะวาดรูปสี่เหลี่ยมแบบทึบที่ตำแหน่ง x และ y โดย w คือความกว้าง, h คือความสูง และ t คือสีของสี่เหลี่ยม

drawRect ฟังก์ชันนี้จะวาดรูปสี่เหลี่ยมที่ตำแหน่ง x และ y ด้วยความกว้าง w ความสูง h และสี t

Drawing Round Rectangles

tft.fillRoundRect(x,y,w,h,r,t);
//fillRoundRect (int16_t x, int16_t y, int16_t w, int16_t h, uint8_t R , uint16_t t)
tft.drawRoundRect(x,y,w,h,r,t);
//drawRoundRect(int16_t x, int16_t y, int16_t w, int16_t h, uint8_t R , uint16_t t)

fillRoundRect ฟังก์ชันนี้จะวาดรูปสี่เหลี่ยมมุมโค้งแบบทึบ โดยมีรัศมีมุมโค้ง r ที่ตำแหน่ง x และ y ความกว้าง w ความสูง h และสี t

drawRoundRect ฟังก์ชันนี้จะวาดรูปสี่เหลี่ยมมุมโค้ง โดยมีรัศมีมุมโค้ง r ที่ตำแหน่ง x และ y ความกว้าง w ความสูง h และสี t

Drawing Circles

tft.drawCircle(x,y,r,t); 
//drawCircle(int16_t x, int16_t y, int16_t r, uint16_t t)
tft.fillCircle(x,y,r,t); 
//fillCircle(int16_t x, int16_t y, int16_t r, uint16_t t)

drawCircle ฟังก์ชันนี้จะวาดรูปวงกลมที่ตำแหน่ง x และ y โดยมีรัศมี r และสี t

fillCircle ฟังก์ชันนี้จะวาดรูปวงกลมแบบทึบที่ตำแหน่ง x และ y โดยมีรัศมี r และสี t

Drawing Triangles

 tft.drawTriangle(x1,y1,x2,y2,x3,y3,t); 
//drawTriangle(int16_t x1, int16_t y1, int16_t x2, int16_t y2, int16_t x3, int16_t y3,// uint16_t t)
tft.fillTriangle(x1,y1,x2,y2,x3,y3,t); 
//fillTriangle(int16_t x1, int16_t y1, int16_t x2, int16_t y2, int16_t x3, int16_t y3,// uint16_t t)

drawTriangle ฟังก์ชันนี้จะวาดรูปสามเหลี่ยมด้วยตำแหน่งมุมทั้งสาม (x, y และ z) และสี t

fillTriangle ฟังก์ชันนี้จะวาดรูปสามเหลี่ยมแบบทึบด้วยตำแหน่งมุมทั้งสาม (x, y และ z) และสี t

Displaying Text

 tft.setCursor(x,y); //setCursor(int16_t x, int16_t y) 

Code นี้จะกำหนดตำแหน่ง Cursor ไปที่ x และ y

tft.setTextColor(t); //setTextColor(uint16_t t)tft.setTextColor(t,b); //setTextColor(uint16_t t, uint16_t b)

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

tft.setTextSize(s); //setTextSize(uint8_t s)

Code นี้ใช้สำหรับกำหนดขนาดของข้อความด้วยค่า s ซึ่ง s คือตัวเลขระหว่าง 1 ถึง 5

tft.write('c'); //write(uint8_t c)

Code นี้ใช้สำหรับแสดงผลตัวอักษร (Character)

tft.println("www.dayalsoft.com");
tft.print("www.dayalsoft.com");

ฟังก์ชันแรกจะแสดงผล String และเลื่อน Cursor ไปยังบรรทัดใหม่

ฟังก์ชันที่สองจะแสดงผล String เพียงอย่างเดียว

t.setCursor(20, 160);
t.setTextColor(WHITE);
t.setTextColor(WHITE, BLACK); 
t.setTextSize(2);
t.println("www.dayalsoft.com");

นี่คือ Code สำหรับการแสดงผลข้อความหนึ่งบรรทัด

Rotating the Screen

tft.setRotation(r); //setRotation(uint8_t r) 

Code นี้ใช้สำหรับหมุนหน้าจอ โดย 0=0, 1=90, 2=180, 3=270 องศา

Reset

tft.reset();

Code นี้ใช้สำหรับ Reset หน้าจอ