ค้นหาบทความที่นี่

บทความทั้งหมด

Display - ตอนที่ 7 : Color LCD

2 ปีที่ผ่านมา

โดย เจ้าของร้าน

Publish : 23 September 2022

หัวข้อในบทความนี้
- การเชื่อมต่อกับบอร์ด

- คำสั่งต่าง ๆ ในการใช้งานเบื้องต้น
- การแสดงรูปภาพ

เดินทางมาสู่ช่วงท้ายกันแล้วครับสหกรับบทความชุดจอแสดงผล และเนื่องด้สยเนื้อหาที่เหลือมันมีความใกล้เคียงกันมาก คือเรื่องของจอสีต่าง ๆ จึงจะขอรวบเอาจอสีไว้ที่เดียวเลยนะครับ จอสีที่ว่าก็คือ TFT LCD 1.77", 2.4" ISP TFT LCD และ 2.4" ISP TFT LCD with Touch Screen ครับ โดยตัว 1.77 นิ้ว จะใช้ชิบควบคุม ST7735S และตัว 2.4" จะใช้ชิป ILI9341
ซึ่งก็เช่นเคย ผู้ใช้สามารถใช้ไล Library u8g2 ได้เช่นกัน จบงานครับ แต่สำหรับบทความนี้จะยกตัวอย่างอ้างอิงจากจอ 2.4 นิ้ว และใช้ Libary Adafruit ILI9341 และจะมี Library ที่บังคับใช้ด้วยกันอีกตัว คือ Adafruit GFX โดยทั้งสองตัวนี้สามารถดาวน์โหลดได้จาก Library Manager เลยครับ ()

การเชื่อมต่อกับบอร์ด
สำหรับการเชื่อมต่อกับบอร์ดนั้น จะเป็นการเชื่อมต่อแบบ SPI โดยให้ต่อไฟ GND กับไฟเลี้ยง 3-5V ตามปกติ จากนั้นจึงต่อขา SPI ให้ตรงกับบอร์ด ในตัวอย่างนี้จะใช้ Arduino UNO เชื่อมต่อได้ดังนี้ (ขา * สามารถย้ายไปขาอื่นและแก้ค่าในโค้ดได้)

LCD		Arduino UNO
VCC	<--->	5V
GND	<--->	GND
CS	<--->	10*
RESET	<--->	RESET
DC	<--->	9*
MOSI	<--->	11
SCK	<--->	13
LED	<--->	5V
MISO	<--->	12

คำสั่งต่าง ๆ ในการใช้งานเบื้องต้น
สำหรับโค้ดเบื้องต้นจะข้ามการแนะนำไปเลยนะครับ ซึ่งสามารถเปิดดูได้จาก Example > Adafruit_ILI9341 > graphictest ในที่นี้จะอธิบายเฉพาะคำสั่งต่าง ๆ ที่ใช้งาน ซึ่งแน่นอนว่ามันก็เหมือน ๆ กับบทความที่ผ่านมานั่นเอง
ถมจอเป็นสีต่าง ๆ
คำสั่งนี้เราจะเปลี่ยนพื้นหลังของจอให้เป็นสีใดสีหนึ่งทั้งหมด เช่นในกรณีที่เราจะเปลี่ยนจากหน้าจอสีดำเป็นสีแดง จะใช้คำสั่ง

tft.fillScreen(Color);

โดย Color ก็คือสีต่าง ๆ ที่ประกาศใน Adafruit_GFX Library ซึ่งเป็น Library ที่ Adafruit บังคับให้ใช้คู่กัน สำหรับ ILI9341 ก็จะเป็น ILI9341_XXXXX เช่น ILI9341_BLACK, ILI9341_BLUE เป็นต้น

การแสดงข้อความ
คำสั่งการแสดงข้อความนั้นก็จะมาเป็นชุด เช่นเดียวกับจอที่ผ่าน ๆ มา ซึ่งก้จะมีคำสั่งระบุคำแหน่งของข้อความ คำสั่งสีของข้อความ คำสั่งขนาดของข้อความ และข้อความที่จะแสดง เช่น

tft.setCursor(x, y);
ttt.setTextColor(Color);
tft.setTextSize(1);
tft.println("Text");

การวาดเรขาคณิตต่าง ๆ
คำสั่งสำหรับการวาดเรขาคณิตก็จะเหมือน ๆ กับตอนใช้จอ 12864 เลยครับ เพียงแต่จะเพิ่มในส่วนของสีเข้ามา ดังนี้

tft.drawLine(x1, y1, x2, y2, Color);

คำสั่งใช้วาดเส้น โดย x1, y1 คือจุดเริ่มต้น ลากไปสิ้นสุดที่จุด x2, y2 และให้เส้นมีสี Color

tft.drawRect(x, y, w, h, Color);
tft.fillRect(x, y, w, h, Color);

คำสั่งใช้วาดสี่เหลี่ยมโปร่งและสี่เหลี่ยมทึบ โดยจุดเริ่มคือ x, y ความกว้าง w ความสูง h และให้มีสี Color

tft.drawTriangle(p, l, r, Color);
tft.fillTriangle(p, l, r, Color);

คำสั่งใช้วาดสามเหลี่ยมโปร่งและสามเหลี่ยมทึบ โดยจุดยอดคือ p จุดฐานด้านซ้าย l และจุดฐานด้านขวา r ให้มีสี Color

tft.drawCircle(x, y, radius, Color);
tft.fillCircle(x, y, radius, Color);

คำสั่งใช้วาดวงกลมโปร่งและวงกลมทึบ โดยจุดกำเนิดคือ x, y มีรัศมี radius และให้มีสี Color

tft.drawRoundRect(x, y, w, h, r, Color);
tft.fillRoundRect(x, y, w, h, r, Color);

คำสั่งใช้วาดสี่เหลี่ยมลบมุมโปร่งและสี่เหลี่ยมลบมุมทึบ โดยจุดเริ่มคือ x, y ความกว้าง w ความสูง h และรัศมีของมุมคือ r ให้มีสี Color

การแสดงรูปภาพ
แน่นอนว่าเรามีจอสีอยู่ในมือและสามารถแสดงผลได้ถึง 16 ล้านสี ย่อมสามารถนำมาแสดงภาพถ่ายของเราได้ ซึ่งการแสดงผลนี้ก็จะคล้าย ๆ กับที่เราแสดงรูปภาพตอนใช้จอ 12864 กันเลยครับ เพียงแค่เราสามารถใช้ภาพสีมาทำได้เลย ไม่ต้องแปลงเป็นภาพขาวดำ จะทำยังไงนั้นไปดูวิธีทำกันเลย
เข้าไปที่เว็บไซต์ด้านล่างนี้ อัพโหลดรูปภาพขึ้นไปแล้วดาวน์โหลดโค้ดลงมาได้เลย

Rinky-Dink Electronics (rinkydinkelectronics.com)

ซึ่งไฟล์ที่ได้มานั้นเป็นโค้ด RGB Byte Array นั่นเอง ซึ่งมันจะแสดงว่าพิกเซลแรกให้แสดงสีอะไร พิกเซลที่สองให้สีอะไร ไล่ไปเรื่อย ๆ จนครบทั้งภาพของเรา ต่อไปเราจะทำการเขียนโปรแกรมแสดงรูปภาพ โดยจะใช้คำสั่ง

tft.drawRGBBitmap(x, y, bitmap[], w, h);

ซึ่งคำสั่งนี้ก็คือคำสั่งให้แสดง Bitmap ที่เราสร้างขึ้นมา โดย
- x, y คือ ตำแหน่งมุมซ้ายบนที่จะนำรูปไปวาง
- bitmap[] คือชื่อตัวแปร bitmap รูปภาพของเรา
- w, h คือ ความกว้างและความสูงของรูปภาพ (พิกเซล)
เขียนโปรแกรมแสดงผลรอไว้ได้ดังนี้

แต่ยังไม่จบแค่นี้นะครับ เราเขียนโค้ดให้มันแสดงรูปที่มีชื่อตัวแปรว่า "board" แต่เรายังไม่มีตัวแปรให้มันเลย ให้ทำการสร้างแท็ปใหม่ที่ชื่อว่า "picture.h" จะมีแท็ปไฟล์ picture.h เพิ่มขึ้นมา ในส่วนของหัวโปรแกรม ให้ include ไฟล์ของเราเข้าไปในโปรแกรมโดยการพิมพ์

#include "picture.h"

สลับไปที่แท็ป picture.h ให้ก็อปปี้โค้ดของรูปภาพที่ดาวน์โหลดมา มาวางไว้ในแท็ปนี้ และแก้ไข โดยโค้ดที่ดาวน์โหลดมาจะเป็นแบบในบรรทัดที่ 11 ให้แก้ไขให้อยู่ในรูปแบบของบรรทัดที่ 12

เลื่อนลงมาด้านล่างสุด โค้ด hex ตัวสุดท้ายที่โหลดมาจะมีลูกน้ำ ' , ' ให้ลบลูกน้ำตัวสุดท้ายนี้ออกดังภาพ

เพียงเท่านี้เองครับ ลองอัพโหลดโปรแกรมลงไปบนบอร์ดก็จะได้รูปภาพแสดงออกมาที่หน้าจอแล้ว

ผู้อ่านสามารถดาวน์โหลดโค้ดของตัวอย่างนี้ (ทั้งโค้ดหลักและ bitmap) ได้ที่นี่

อีกเรื่องที่ต้องพูดกัน คือการใช้จอแบบนี้มันค่อนข้างกินทรัพยากรสูง ถามว่าใช้บอร์ด Arduino UNO ตามตัวอย่างมันทำงานได้มั๊ย ต้องตอบเลยว่าได้ครับ ได้แบบไม่มีปัญหาด้วย แต่ด้วยความเร็วของ Arduino UNO ที่มีเพียง 16MHz ก็จะทำให้อะไรมันไม่ค่อยทันใจ กว่ารูปภาพจะขึ้นมามันก็สแกนทีละแถวไปเรื่อย ๆ แบบที่เราเห็นได้ชัดเจน แต่ถ้าเทียบกับบอร์ดที่มีความเร็วสูง ๆ อย่าง STM32 หรือ ESP8266 ESP32 หน้าจอจะสแกนได้เร็วกว่า และแสดงผลได้ลื่นสมูทกว่ามากครับ อีกอย่างคือหากใช้รูปที่มีขนาดใหญ่มากเกินไปก็จะทำให้คอมไพล์ไม่ผ่านเนื่องจาก Flash memory ของบอร์ดไม่พอนั่นเองครับ
สุดท้ายตรงนี้ จบในเรื่องของหน้าจอไปแล้ว คือส่วนการแสดงผล ณ ตรงนี้ ซีรี่ส์นี้ก็ได้ครอบคลุมทั้งหมดแล้วครับ แต่บทความยังไม่จบ บทต่อไปจะแถมเรื่องการใช้จอสัมผัสอีกตอน ติดตามกันต่อไปนะครับ

หากเห็นว่าบทความมีประโยชน์ต้องการสนับสนุนเป็นกำลังใจ เพียงซื้อกาแฟให้เรานั่งเขียนบทความตามลิงค์ด้านล่าง เพียงแก้วละ 40 บาท

https://ko-fi.com/pbangtawee

p.bangtawee (buymeacoffee.com)