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

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

Display - ตอนที่ 4 : LCD 128x64

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

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

Publish : 28 May 2022

หัวข้อในบทนี้
- ทำความรู้จักกับจอ 128x64
- การต่อใช้งานกับ Arduino
- Library และเครื่องมือที่จะใช้งาน
- เตรียมรูปภาพเพื่อใช้งาน
- โปรแกรมตัวอย่าง

หลังจากเราทำความรู้จักจอ LCD กันไปถึง 3 ตอนแล้ว ในตอนนี้เรายังมีจอ LCD อีกแบบหนึ่ง คือจอแบบ Graphic ขนาด 128x64 พิกเซล ซึ่งมีขนาดใหญ่กว่าเดิมมาก แต่ก็มีวิธีการใช้งานแตกต่างกัน ไปดูกันเลยดีกว่าครับ

ทำความรู้จักกับจอ 128x64
จอ Graphic LCD ขนาด 128x64 พิกเซล หรือที่เรียกง่าย ๆ ว่า 12864 จะเป็นจอที่แตกต่างจากจอแบบ 1602 2004 0801 ที่เราเคยพูดกันในบทที่ผ่าน ๆ มา แม้จะมีจุดพิกเซลเล็ก ๆ เหมือนกัน แต่ก็ไม่ได้แยกกันเป็นตัวอักษร โดยพิกเซลทั้งหมด 128 คอลัม 64 แถว จะเรียงติดกันทั้ง 8192 จุด จึงทำให้เราสามารถวาดรูปบนจอนี้ได้ (จริง ๆ แบบเดิมตอนที่แล้วเราใช้ customChar มาเรียงต่อกันหลาย ๆ ช่องก็ได้ แต่จะไม่สวยงามเพราะแต่ละช่องจะมีช่องว่างห่างกัน) ที่สำคัญคือจอแบบ 12864 นี้จะใช้ชิปควบคุมเบอร์ ST7920 ไม่ใช่ HD77480 เหมือนเดิม
โดยขาของจอ 12864 นั้นมีทั้งหมด 20 ขา ก็คล้าย ๆ กับจอที่ผ่านมา ดังนี้

VSS	ต่อกับ GND
VDD	ต่อกับไฟเลี้ยง 5V (สามารถใช้ได้ตั้งแต่ 2.7 - 5.5V)
V0	ปรับค่า Contrast ของจอ
RS (หรือ D/I)	ขาเลือกค่า Register
R/W	ขาเลือกค่า Read/Write
E	ขาเลือก Enable จอ
D0 - D7	ขารับส่งข้อมูล
PSB (หรือ CS1)	ขาเลือก Interface
NC (หรือ CS2)	NC = Not Connect ไม่ใช้งาน
RST	ขา Reset
VOUT	Doubler Output
A	ขา A ของ LED Backlight
K	ขา K ของ LED Backlight

เราสามารถเลือกโหมดได้นะครับว่าเราจะต่อแบบ SPI หรือแบบ 4-bit Data เหมือนจอแบบเดิม ในตัวอย่างบทความนี้จะเลือกต่อแบบ SPI ครับ โดยเราจะเลือกโหมดผ่านขา PSB และก็เช่นเดิม หากต้องการจำกัดกระแสของ LED Backlight ก็ให้หาตัวต้านทาน 220Ω มาต่อได้เช่นกัน

การต่อใช้งานกับ Arduino
การต่อใช้งานนั้นจะมีวิธีการต่อคล้ายกับจอ 1602 ธรรมดาที่ผ่านมา มีการต่อตัวต้านทานปรับค่าได้และอื่น ๆ เช่นกัน ต่างกันตรงเราจะไม่ต่อ D4-D7 เพราะเราจะต่อแบบ SPI แทน ตามรูป

จะเห็นว่าการต่อใช้งานนั้นจะคล้ายกับการใช้งานจอที่ผ่านมามาก มีการต่อเพื่อปรับ Contrast เหมือนกัน ต่างกันตรง Data เราจะลอยไว้ เพื่อต่อแบบ SPI แทน อธิบายการต่อดังนี้

VSS	ต่อกับ GND
VDD	ต่อกับ 5V
V0	ต่อกับขากลางของตัวต้านทานปรับค่าได้
RS	ต่อกับขา 10 ของ Arduino
RW	ต่อกับขา 11 ของ Arduino
E	ต่อกับขา 13 ของ Arduino
CS1	ต่อกับ GND เพื่อเลือกโหมดแบบ SPI
A	ต่อกับ 5V
K	ต่อกับ GND

Library และเครื่องมือที่จะใช้งาน
ในด้านของ Library นั้นไม่ใช่เรื่องยากครับ เนื่องจาก Library มีคนเขียนไว้แล้วเรียบร้อย เราจะใช้ Library ที่ชื่อว่า U8g2 ที่สามารถใช้งานได้คลอบคลุมหลากหลายมากเนื่องจากเป็น Library ที่สร้างมาสำหรับจอ monochrome แทบทั้งหมดที่มีใช้ในวงการ Arduino และเราจะมีโอกาสได้ใช้ในจอชนิดต่อ ๆ อีกไปด้วย โดย Library สามารถติดตั้งจาก Library Manager ของ ArduinoIDE ได้เลย หรือ
ดาวน์โหลด Library U8g2 คลิกที่นี่
บทความที่เกี่ยวข้อง การเพิ่ม library ใน Arduino IDE

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

เตรียมรูปภาพเพื่อใช้งาน
ขั้นตอนต่อไปเราจะมาเตรียมรูปภาพที่เราต้องการกันครับ จะวาดเอง จะไปหามาก็ได้ แต่ควรเป็นรูปลายเส้นขาวดำจะทำง่ายกว่า ตัวอย่างขอใช้รูปด้านล่าง หามาจาก Google เป็นรูป CC0 License

ขั้นตอนแรกให้เปิดไฟล์รูปขึ้นมาในโปรแกรม GIMP (สามารถลากมาวางได้เลย) เลือกเมนู Image > Scale Image... ในช่อง Width: ให้ใส่ 128 เพื่อให้รูปมีขนาด 128x64 พิกเซล จากนั้นคลิกรูปโซ่ด้านหลัง (หากรูปไม่ได้สัดส่วนให้ดู Width ไม่เกิน 128 หรือ Height ไม่เกิน 64 จะได้ไม่เกินขนาดของจอ) จากนั้นคลิก Scale รูปจะกลายเป็นขนาด 128x64

จากนั้นจะเซฟไฟล์โดยการคลิก File > Export Image เลือกที่ที่จะเก็บไฟล์ไว้ มองลงมาตรง Select File Type คลิกเข้าไปจะมีรายการคลี่ออกมา ให้เลื่อนหา X BitMap Image คลิกเลือกจากนั้นคลิก Export

จะได้ไฟล์ใหม่นามสกุล xbm ขึ้นมา ให้คลิกขวา > Open with จากนั้นให้เลือกเปิดด้วย Text editor เช่น Notepad จะเห็นโค้ด HEX ขึ้นมา พร้อมแล้วครับ เราจะนำตรงนี้ไปใส่ในโปรแกรมเลย

โปรแกรมตัวอย่าง
การเขียนโปรแกรมสำหรับ Arduino เพื่อแสดงรูปภาพบนหน้าจอจะมีคำสั่งง่าย ๆ คือ

drawXBMP(x, y, w, h, myPic);

โดย x และ y คือ ตำแหน่งเริ่มต้นของการวางภาพ
w และ h คือ ความกว้างและความสูงของภาพ
myPic คือ ชื่อตัวแปลของรูปที่จะนำมาแสดง (ที่เรา Convert เป็น hex ไว้นั่นเอง)
การแสดงภาพก็จะได้โปรแกรมดังนี้

ตัวโค้ดเองที่จริงก็มีแค่ไม่กี่บรรทัด ที่มันยาวก็เพราะ HEX Code ของแต่ละจุดบนหน้าจอนั่นเองครับ

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