POP-X2 Rover บทที่ 2 การแสดงผลกราฟิกด้วย GLCD

จอแสดงผล GLCD

เป็นจอที่สามารถแสดงผลกราฟิก ด้วยความละเอียดจอ 128×160 พิกเซล ทั้งยังสามารถแสดงตัวอักษร ได้ที่ 21 ตัวอักษร 16 บรรทัด ในขนาดปกติ

ภายในไลบรารี่ popx2.h จะมีชุดคำสั่งสำหรับใช้งาน glcd ซึ่งจากตอนที่ 1 ได้ทดสอบใช้งานไปแล้ว ตอนนี้มาดูรายละเอียดชุดคำสั่งกันครับ

คำสั่ง glcd

ใช้เพื่อแสดงข้อความที่จอ GLCD ได้ 21 ตัว 16 บรรทัด (ขนาด 1 เท่า)

รูปแบบ

glcd(x,y,*p,…)

พารามิเตอร์

x คือตำแหน่งบรรทัดมีค่าตั้งแต่ 0-15

y คือตำแหน่งตัวอักษรมีค่าตั้งแต่ 0-24

*p คือข้อความที่ต้องการนำมาแสดง

ค่าพิเศษ

%d แสดงตัวเลขจำนวนเต็มในช่วง -32,768 ถึง 32,767

%h แสดงตัวเลขฐานสิบหก

%b แสดงตัวเลขฐานสอง

%l แสดงตัวเลขจำนวนเต็มในช่วง -2,147,483,648 ถึง 2,147,483,647

%f แสดงผลตัวเลขจำนวนจริง (แสดงทศนิยม 3 หลัก)

ตัวอย่าง

glcd(2,0,”Hello World“);

// เป็นการแสดงข้อความ Hello World ที่บรรทัดที่ 3 (นับจาก 0) และชิดซ้าย

 

คำสั่งเสริม สำหรับ glcd

จอแสดงผล glcd เป็นจอสี ดังนั้นนอกจากแสดงตัวอักษรธรรมดาแล้วยังสามารถปรับแต่งสี พื้นหลัง และขนาดของตัวอักษรได้ด้วย โดยใช้คำสั่งเหล่านี้

setTextColor      // คำสั่งกำหนดสีตัวอักษร ใช้งานก่อนใช้คำสั่ง glcd

setTextBackgroundColor       // คำสั่งกำหนดสีพื้นหลังตัวอักษร ใช้งานก่อนใช้คำสั่ง glcd

setTextBackgroundTransparent()       // คำสั่งยกเลิกการกำหนดสีพื้นหลัง

setTextSize      // ปรับขนาดตัวอักษร เป็นจำนวนเท่า ค่าปกติคือ 1 เท่า

glcdClear       // คำสั่งเคลียร์การแสดงผลที่หน้าจอ

glcdFillScreen      // คำสั่งถมสีหน้าจอเป็นสีที่ต้องการ

glcdMode       // คำสั่งกำหนดทิศทางการแสดงผล

การกำหนดค่าสี

ในไลบรารี่มีสีมาตรฐานให้เลือกใช้อยู่แล้ว สามารถอ้างชื่อเหล่านี้เพื่อเรียกใช้ได้เลย

สำหรับค่าทางด้านขวาคือชื่อของสีเมื่ออ้างอิงจากตัวแปรแบบอาเรย์

ในกรณีที่ต้องการกำหนดค่าสีด้วยตนเองจากการผสมสี R G B (แดง เขียว น้ำเงิน) สามารถใช้คำสั่ง

โดยระบุค่าตัวเลขของสีต่างๆ ลงไป แต่สีที่แสดงได้มีขนาด 16 บิต แบ่งออกเป็น สีแดง 5 บิต สีเขียว 6 บิต และ สีน้ำเงิน 5 บิต ทำให้ค่าตัวเลขสูงสุดที่กำหนดจะไม่เกินค่าเหล่านี้

โดยถ้ากำหนดเป็นค่าสูงสุดทุกสี จะแสดงเป็นสีขาวนั่นเอง

ตัวอย่าง
 
 
#include <popx2.h>
void setup() {
  setTextColor(GLCD_RED);
  glcd(0, 0, "Hello");
  setTextColor(GLCD_GREEN);
  glcd(1, 0, "World");
}
void loop() {}

จากตัวอย่างบรรทัดแรก ข้อความจะแสดงเป็นสีแดง ส่วนบรรทัดที่ 2 ข้อความจะเป็นสีเขียว

การปรับขนาดตัวอักษรด้วยคำสั่ง setTextSize()

ขนาดปกติของตัวอักษร ถ้าไม่เรียกใช้งานจะอยู่ที่ 1 เท่า แสดงตัวอักษรได้ 21 ตัวอักษร 16 บรรทัด

Note

สังเกตลักษณะการเขียนคำสั่ง จะใช้การแยกคำด้วยตัวพิมพ์ใหญ่เพื่อให้อ่านเข้าใจได้ง่าย เช่น setTextSize()

การปรับทิศทางตัวอักษรด้วยคำสั่ง glcdMode()

ตัวอักษร สามารถปรับทิศทางอยู่ในมุมมองต่างๆ ได้เหมือนโทรศัพท์มือถือของเรา โดยถ้าไม่กำหนดค่าจะเท่ากับโหมด 0 อยู่ในแนวตั้ง

การกำหนดสีพื้นหลังตัวอักษรด้วยคำสั่ง setTextBackgroundColor()

คำสั่งนี้ต้องเรียกใช้ก่อนเรียกใช้คำสั่ง glcd โดยปกติถ้าไม่กำหนด ตัวอักษรจะไม่มีพื้นหลัง (Transparent)

ตัวอย่าง
 
 
#include <popx2.h>
void setup(){
setTextBackgroundColor(GLCD_RED);
setTextColor(GLCD_YELLOW);
glcd(0,0,"Hello World");
}
void loop(){
}

ตัวอย่างนี้จะให้ สีพื้นหลังเป็นสีแดงและข้อความเป็นสีเหลือง

ก่อนจะไปทดสอบเขียนโค้ดตัวอย่าง ขอแนะนำคำสั่งหน่วงเวลาหรือ delay เพื่อให้เกิดการหน่วงค้างอยู่ที่คำสั่งนั้นๆ เท่ากับเวลาที่กำหนด

คำสั่ง delay

คำสั่งหน่วงเวลาค้างที่บรรทัดนี้นานเท่าค่า DelayTime

รูปแบบ

delay(DelayTime);

DelayTime คือค่าเวลาหน่วงหน่วยเป็นมิลลิวินาที

ตัวอย่าง

delay(2000); // หยุดค้างอยู่ที่บรรทัดนี้ 2 วินาที

 

ตัวอย่างที่ 1 ให้หน้าจอ GLCD สลับแสดงสีทั้งหน้าจอ

 
 
#include <popx2.h>
void setup() {}
void loop() {
  glcdFillScreen(GLCD_RED);
  delay(500);
  glcdFillScreen(GLCD_GREEN);
  delay(500);
  glcdFillScreen(GLCD_BLUE);
  delay(500);
}

ตัวอย่างนี้จะทำงานใน void loop() นั่นหมายความว่า คำสั่งจะวนทำซ้ำไปเรื่อยๆ โดยคำสั่ง glcdFillScreen จะเป็นการถมสีที่หน้าจอด้วยค่าสีที่ระบุจากนั้นหน่วงเวลาค้างไว้ 0.5 วินาที

แบบทดสอบ 1 สร้างตัวอักษรหลายสี บนหน้าจอ

มีเงื่อนไขดังนี้

1. สร้างตัวอักษรในแนวนอน ในบรรทัดเดียวกัน

2. ตัวอักษรมีขนาดใหญ่เป็น 5 เท่า

3. ตัวอักษรมีสีแตกต่างกันทั้งหมด

เมื่อทดลองทำด้วยตนเองแล้ว สามารถตรวจเปรียบเทียบโค้ดเฉลยได้จากลิงก์นี้ครับ

การแสดงผลกราฟิก

นอกจากแสดงตัวอักษรแล้ว glcd ยังสามารถแสดงผลกราฟิกได้ด้วย โดยคำสั่งจะเป็นการสร้างรูปทรงเรขาคณิต และระบุค่าพิกัดแกน x และแกน y ด้วยค่าตำแหน่งพิกเซลของ glcd 128×160 จุด

คำสั่งสร้างสี่เหลี่ยมผืนผ้า

x คือค่าจุดเริ่มต้นมุมบนซ้ายของแนวนอน

y คือค่าจุดเริ่มต้นมุมบนซ้ายของแนวตั้ง

width คือค่าความกว้างของสี่เหลี่ยม (Pixel)

height คือค่าความสูงของสี่เหลี่ยม (pixel)

color ค่าสี

glcdRect คือสีของเส้น

glcdFillRect คือสีของพื้นที่สี่เหลี่ยม

คำสั่งสร้างวงกลม

x ตำแหน่งจุดศูนย์กลางวงกลมแนวนอน
y ตำแหน่งจุดศูนย์กลางวงกลมแนวตั้ง
radius รัศมีของวงกลม (pixel)
color ค่าสี

glcdCircle
คือสีของเส้น

glcdFillCircle
คือสีของพื้นที่วงกลม

คำสั่งสร้างเส้นตรง

x1 จุดเริ่มต้นแนวนอน

y1 จุดเริ่มต้นแนวตั้ง

x2 จุดสิ้นสุดแนวตั้ง

y2 จุดสิ้นสุดแนวนอน

color สีของเส้น

 

คำสั่งสร้างเส้นโค้ง

x จุดเริ่มต้นของรัศมีเส้นโค้งแนวนอน

y จุดเริ่มต้นของรัศมีเส้นโค้งแนวตั้ง

r รัศมีเส้นโค้ง

startAngle มุมเริ่ม

endAngle มุมสิ้นสุด

color สีของเส้นโค้ง

ตัวอย่าง

glcdArc(64,80,64,0,90,GLCD_RED);

 

คำสั่งพล็อตจุด

x
ตำแหน่งจุดแนวนอน

y ตำแหน่งจุดแนวตั้ง

color สีของจุด

ตัวอย่าง

glcdPixel(64,80,GLCD_WHITE);

แบบทดสอบที่ 2 สร้างวงกลมสีแดงอยู่กึ่งกลางจอภาพ รัศมีเต็มจอพอดี

ทดลองเขียนโค้ดด้วยตัวเองดูครับ โดยใช้คำสั่ง glcdFillCircle() ตรวจสอบคำตอบกับเฉลยได้จากลิงก์

แบบทดสอบที่ 3 ลากเส้น 4 เส้นโดยมีจุดตัดอยู่ที่กลางจอภาพพอดี

ทดลองเขียนโดยใช้คำสั่ง glcdLine() 4 คำสั่ง ตรวจสอบคำตอบจากลิงก์

แบบทดสอบที่ 4 สร้างสี่เหลี่ยมซ้อนกัน ดังรูป

ทดลองเขียนโดยใช้คำสั่ง glcdRect() 4 คำสั่ง ตรวจสอบคำตอบจากลิงก์

แบบทดสอบที่ 5 สร้างสี่เหลี่ยม 4 สีขนาดเท่ากัน ในพิกัดดังรูป

ทดลองเขียนโค้ดโดยใช้คำสั่ง glcdFillRect() 4 คำสั่ง ตรวจสอบคำตอบจากลิงก์

การแสดงผลภาษาไทย

มาถึงตรงนี้ อาจจะมีคำถามมาว่า ถ้าต้องการแสดงข้อความเป็นภาษาไทย ทำได้หรือเปล่า คำตอบคือทำได้ครับ แต่ขั้นตอนจะซับซ้อนอยู่บ้าง ได้ทำเป็นบทความไว้แล้วสามารถไปตามอ่านได้จากลิงก์ แสดงข้อความภาษาไทย บนบอร์ดหุ่นยนต์ inex

สำหรับตอนต่อไป จะขอกล่าวถึงอุปกรณ์อินพุต/เอาต์พุตบนบอร์ด ไม่ว่าจะเป็นสวิตช์ ลำโพง หรือตัวต้านทานปรับค่าได้ ไว้พบกันครับ

Facebook Comments Box

Press Ctrl+C to copy the following code.
"