แสดงข้อความภาษาไทย บนบอร์ดหุ่นยนต์ inex

IPST-SE, POP-X2, POP-7, ATX2
ต่างก็มีมาตรฐานจอภาพแบบเดียวกันคือ จอ GLCD ขนาด 128×160 พิกเซล

การแสดงตัวอักษรมีคำสั่งพื้นฐานต่างๆ ให้ใช้ ดังนี้

glcd                แสดงตัวอักษรที่หน้าจอ

setTextColor            กำหนดสีตัวอักษร

setTextBackgroundColor    กำหนดสีพื้นหลังตัวอักษร

setTextSize            กำหนดขนาดตัวอักษร

glcdClear            เคลียร์หน้าจอ

glcdFillScreen         ถมสีหน้าจอ

glcdMode            กำหนดทิศทางการแสดงข้อความ

glcdPixel            แสดงเม็ดพิกเซลในตำแหน่งที่กำหนด

glcdRect            แสดงรูปสีเหลี่ยม

glcdFillRect            แสดงรูปสี่เหลี่ยมแบบถมสี

glcdLine            แสดงเส้น

glcdCircle            แสดงวงกลม

glcdFillCircle        แสดงวงกลมแบบถมสี

glcdArc            แสดงส่วนของเส้นโค้ง

แต่คำสั่งทั้งหมดที่กล่าวมา แสดงได้เฉพาะข้อความที่เป็นภาษาอังกฤษ

และเมื่อ Coach Jack ได้ไลฟ์สดวิธีการแสดงผลภาษาไทยบนบอร์ด INEX และมีไฟล์ Video บน Youtube

https://youtu.be/WmuV_QmvAKE

พร้อมทั้งมีลิงก์ของไฟล์ตัวอย่างไว้อย่างครบครันที่ https://drive.google.com/drive/folders/1C-KFmzJZGTRcbuP6lw3yVGEylspOH0MK ปัญหาเรื่องภาษาไทยสำหรับบอร์ด inex ก็มีทางออก

บทความนี้ขอสรุป และย่อย การไลฟ์สดของ Coach Jack เพื่อให้ผู้ใช้งานบอร์ด inex สามารถนำไปใช้งานได้โดยง่าย

ก่อนอื่นต้องอ้างอิงถึงผู้พัฒนาซอฟต์แวร์ สำหรับสร้างไลบรารี่ฟอนต์ภาษาไทย ที่ Coach Jack นำมาใช้งานก่อน นั่นคือ

UTF-8 Graphic Font Library for Microcontroller

โดยผู้พัฒนาซอฟต์แวร์แจ้งว่า

ไลบรารี่นี้สร้างเพื่อการเรนเดอร์ตัวอักษรตามมาตรฐาน UTF-8 , โดยสามารถแปลงฟอนต์นามสกุล .ttf หรือ otf ผ่านแอป DW Font Exporter ไลบรารี่ตัวนี้สามารถใช้งานได้กับทุกๆรูปแบบ แต่ขณะนี้ทางเราออกแบบให้ใช้กับ Arduino บน ESP8266 ก่อน

สำหรับ Windows ดาวน์โหลดซอฟต์แวร์ตรงๆ ได้จากลิงก์
(https://github.com/deaware/dw_utf8_gfont_library/blob/master/generator_app/dwFontExporter/dwFontExporter_win32_release_v1.0.zip?raw=true)

จากรายละเอียดที่ใช้จะเป็นการออกแบบสำหรับจอ OLED การนำมาประยุกต์ใช้กับจอ GLCD ของ inex ก็ต้องดัดแปลงกันพอสมควร

ขั้นตอนการแปลงฟอนต์ให้กลายเป็นไลบรารี่

  1. คลิกที่ลิงก์ dwFontExporter_win32_release_v1.0.zip เพื่อดาวน์โหลด ซอฟต์แวร์สำหรับแปลงฟอนต์


  1. แตกไฟล์ dwFontExporter_win32_release_v1.0.zip ที่ดาวน์โหลดมา
  2.     จะพบไฟล์ dwFontExporter.exe ให้ดับเบิ้ลคลิกเพื่อเปิดขึ้นมา


1.4    กด Browse เพื่อเลือกฟอนต์ที่ต้องการแปลง สำหรับฟอนต์ที่แนะนำคือ THSarabunNew เนื่องจากจะไม่มีปัญหาเรื่องสระและวรรณยุกต์ และฟอนต์ค่อนข้างสวยอ่านง่าย ที่สำคัญให้ใช้งานได้ฟรี ใครยังไม่มี ดาวน์โหลดได้จากลิงก์
https://www.f0nt.com/download/sipafonts/THSarabunNew.zip


  1. เมื่อแตกไฟล์แล้ว THSarabunNew.ttf จะมีด้วยกันหลายไฟล์ เป็นตัวเอียง ตัวเข้ม ให้เลือกตัวปกติดังรูป


  1. เมื่อกลับมาที่หน้าต่างหลัก ให้กำหนดขนาดฟอนต์ โดยขนาดที่แนะนำคือ 20 ขึ้นไป เนื่องจากถ้าน้อยกว่านี้ จะอ่านไม่ค่อยชัด


  1. กด Export เพื่อสร้างไฟล์ไลบรารี่ โดยจะเก็บในรูปแบบของชื่อฟอนต์ตามด้วยขนาด นามสกุล .c


  1. อาจจะปรับเปลี่ยนขนาดตัวอักษรเป็นหลายขนาดแล้วบันทึกไว้ใช้งานภายหลัง

คัดลอกไฟล์ไลบรารี่ ไว้ที่โฟลเดอร์ไลบรารี่

ตำแหน่งไลบรารี่ของบอร์ด inex ถ้าผู้ใช้งานติดตั้งซอฟต์แวร์จาก inex และไม่มีการเปลี่ยนแปลงจะอยู่ที่

C:\Arduino18\libraries

ภายในจะมีโฟลเดอร์ที่เก็บชุดไลบรารี่แยกเอาไว้ โดย POP-X2 POP7 และ IPST-SE มีฮาร์ดแวร์ใกล้เคียงกัน ไลบรารี่จะรวมอยู่ในโฟลเดอร์ IPST ส่วน ATX2 มีฮาร์ดแวร์ที่ต่างออกไปบ้างจะแยกออกมา สำหรํบโฟลเดอร์ INEX จะเก็บไลบรารี่ที่ใช้งานร่วมกันเช่น GP2D120 หรือ LED8 ดังนั้นโฟลเดอร์ INEX คือโฟลเดอร์ที่เราจะใช้เก็บไฟล์ไลบรารี่ภาษาไทยของเรา

  1. ดาวน์โหลดไฟล์ไลบรารี่ https://doc.inex.co.th/wp-content/uploads/2020/05/thaiFontLib.zip


  1. แตกไฟล์ ทั้งหมดไว้ในโฟลเดอร์ C:\Arduino18\libraries\INEX

ภายในประกอบไปด้วย

dw_font.c และ dw_font.h ไลบรารี่หลักสำหรับการวาดฟอนต์

font_th_sarabun_new_regular20.c

font_th_sarabun_new_regular30.c

font_th_sarabun_new_regular30.c

ไลบรารี่เก็บฟอนต์ภาษาไทย ที่ถูกสร้างขึ้นจากโปรแกรมก่อนหน้านี้

glcdThai.h

ไลบรารี่เพื่อเรียกใช้งาน ที่เราสร้างขึ้นเอง และปรับปรุงจากที่
Coach Jack แนะนำ

การทำงานของ glcdThai.h

 
 
#include "dw_font.h"
unsigned int pixelColor=GLCD_RED;
extern dw_font_info_t font_th_sarabun_new_regular20;
dw_font_t myfont;
void draw_pixel(int16_t x, int16_t y){
    glcdPixel(x,y,pixelColor);
}
void clear_pixel(int16_t x, int16_t y){
  glcdPixel(x,y,GLCD_BLACK);
}
void initThai(){
  dw_font_init(&myfont,160,128,draw_pixel,clear_pixel);
  dw_font_setfont(&myfont, &font_th_sarabun_new_regular20);      
}
void glcdThai(int x,int y,char* text,unsigned int Colors){
  pixelColor=Colors;
  dw_font_goto(&myfont,x,y);
  dw_font_print(&myfont,text);
}
  1. บรรทัดแรกเป็นการเรียกใช้ไลบรารี่ dw_font.h แน่นอนเรามีเก็บไว้แล้วที่โฟลเดอร์ INEX
  2. บรรทัดที่ 2 เป็นการประกาศตัวแปรสี ค่าเริ่มต้นตอนนี้ให้เป็นสีแดง
  3. ส่งชื่อฟอนต์ให้ไลบรารี่รับรู้ โดยการประกาศตัวแปรแบบ extern
  4. กำหนดชื่อออปเจ็กเป็นชื่อ myfont สำหรับเรียกใช้งาน
  5. การวาดตัวอักษร คือการพล็อตพิกเซลในตำแหน่งที่ต้องการทีละจุด ในตำแหน่งที่ต้องการเอาออกก็พล็อตเหมือนกัน แต่ให้เป็นสีดำ สำหรับบอร์ดของ inex คำสั่งในการพล็อตพิกเซลคือ glcdPixel ดังนั้นถ้าไลบรารี่หลักต้องการสร้างฟังก์ชั่นเพื่อพล็อตพิกเซลก็ใช้ glcdPixel ระบุสีที่ต้อง หรือเคลียร์พิกเซลก็ใช้ glcdPixel และรุบุสีเป็นสีดำ เป็นที่มาของฟังก์ชั่น draw_pixel() และ clear_pixel()
  6. การกำหนดค่าเริ่มต้น ค่าที่กำหนดคือขนาดของจอภาพ โดย GLCD ของบอร์ด inex มีขนาด 128×160 พิกเซล ถ้ามองเป็นแนวนอนก็ 160×128 พิกเซล ฟังก์ชั่น initThai() จะต้องเรียกใช้ก่อนการใช้งาน
  7. ถ้าต้องการเปลี่ยนชื่อฟอนต์เช่น font_th_sarabun_new_regular20 ให้เป็น font_th_sarabun_new_regular30 ตำแหน่งที่ต้องเปลี่ยนมี 2 ที่ คือบรรทัดที่ 3 และ 13

ฟังก์ชั่นหลักสำหรับเรียกใช้งาน glcdThai()

ใช้แสดงข้อความเช่นเดียวกับคำสั่ง glcd คือจะต้องระบุตำแหน่งแกน x และแกน y ระบุข้อความในเครื่องหมายคำพูด และที่ฟังก์ชั่นนี้เพิ่มเติมขึ้นมาคือระบุสีของข้อความด้วยตัวอย่าง

    glcdThai(10,20,”อินโนเวตีฟ เอ็กเพอริเมนต์”,GLCD_YELLOW);

แสดงข้อความโดยนับจากซ้ายไป 10 พิกเซล และนับลงมาจากด้านบน 20 พิกเซล (ไม่สามารถแสดงข้อความชิดด้านบนสุดได้เนื่องจากภาษาไทยมีวรรณยุกต์

ทดสอบเขียนโค้ดกับบอร์ด POP-X2

 
 
#include <popx2.h>
#include <glcdThai.h>
void setup() {
  glcdMode(1);
  initThai();
  glcdThai(10,20,"อินโนเวตีฟ เอ็กเพอริเมนต์",GLCD_YELLOW);
}
void loop() {  }

 

เปิดโปรแกรม Arduino เลือกบอร์ดเป็น POP-X2 เขียนโค้ดตามตัวอย่างและดาวน์โหลดไปยัง POP-X2

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

 
 
#include <popx2.h>
#include <glcdThai.h>
void setup() {
  glcdMode(1);
  initThai();
  glcdThai(5,80,"กรุงเทพฯ 10260",GLCD_RED);
  glcdThai(5,60,"แขวงบางนา เขตบางนา",GLCD_GREEN);
  glcdThai(5,40,"108 ซอยสุขุมวิท 101/2",GLCD_BLUE);
  glcdThai(10,20,"อินโนเวตีฟ เอ็กเพอริเมนต์",GLCD_YELLOW);
}
void loop() {  }

 

เนื่องจากฟอนต์ที่ใช้มีขนาด 20 ดังนั้นระยะห่างแต่ละบรรทัดควรกำหนดไว้ที่ 20 เพื่อให้ระยะช่องไฟเหมาะสม

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

จากในรูป ใช้หน่วยความจำไปถึง 72% ทีเดียว

สุดท้ายต้องขอบคุณ Coach Jack สำหรับเรื่องราวดีๆ และ https://github.com/deaware/dw_utf8_gfont_library (Deaware System : http://www.deaware.com) โดย

Surawut Aonjaiaow และ Burin Sapsiri สำหรับซอฟต์แวร์ที่สุดยอด

Facebook Comments Box

Press Ctrl+C to copy the following code.
"