ในบทความนี้จะแสดงตัวอย่างการสร้าง Font จากโปรแกรม BM Font แปลง Font ที่ได้ไปเป็น Array ภาษาซี และใช้งาน Library font ภาษาไทย สำหรับแสดงผลบนจอ LCD โดยใช้ ESP32 บน Eclipse + esp-idf
ขาสัญญาณของ ESP32 ที่ใช้เชื่อมต่อกับ LCD ILI9341 มีดังนี้
ขา ESP32 | ขาของจอ LCD |
GPIO12 | MISO |
GPIO13 | MOSI |
GPIO14 | SCK |
GPIO15 | CS |
GPIO23 | DC |
GPIO22 | RESET |
GPIO21 | LED Backlight |
วิธีการสร้าง Bitmap font จากโปรแกรม BM Font มีขั้นตอนดังนี้
เริ่มต้นด้วยการเปิดโปรแกรม BM Font ขึ้นมา แล้วเลือกที่เมนู Option -> Font settings แล้วเลือก Font ที่ต้องการแปลงในช่อง Font หรือเลือก Font ที่ไม่ได้ติดตั้งในเครื่องโดยกดที่ปุ่ม Add font file
ทำเครื่องหมายในช่อง OEM แล้วเลือก Font เป็น Thai กำหนดขนาดของ Font ตรง Size โดยขนาดที่เรากำหนดจะเป็นขนาดความสูงของ Font มีหน่วยเป็น Pixel หลังจากที่ตั้งค่าต่างๆเสร็จแล้วก็กดที่ปุ่ม OK
ขั้นตอนต่อไปคือการเลือกตัวอักษรที่ต้องการแปลงไปเป็น Bitmap font โดยคลิกซ้ายที่ตัวอักษรที่ต้องการใช้งานให้ครบทุกตัว หรือหากต้องการแปลง Font ทุกตัวอักษรให้คลิกขวาแล้วเลือกที่ Select marked subset(s)
หลังจากนั้นให้คลิกที่เมนู Option -> Export option เพื่อกำหนดรูปแบบของ Font ที่ต้องการแปลง โดยต้องกำหนดขนาดของ Texture ให้ครอบคลุมกับตัวอักษรที่เลือก ตรง File format ในช่อง Textures ให้เลือกเป็น png- Portable Network Graphic หลังจากที่ตั้งค่าต่างๆเสร็จแล้วให้คลิดปุ่ม OK
หากต้องการดูตัวอย่างรูปของ Font ที่ต้องการแปลง ให้เลือกที่เมนู Option -> Visualize จะมีหน้าต่าง Preview รูปของ Bitmap font ออกมา
เมื่อตั้งค่าต่างๆเสร็จแล้ว ให้คลิกที่เมนู Option -> Save bitmap font as เพื่อบันทึก Font ที่ต้องการแปลงเป็นรูปภาพ เมื่อคลิดแล้วโปรแกรมจะให้เราตั้งชื่อไฟล์ ในตัวอย่างนี้จะตั้งชื่อไฟล์ว่า loma40 ตาม Font และความสูงที่เลือกไว้ Output ของโปรแกรมนี้จะมีอยู่ 2 ไฟล์คือ loma40.fnt และ loma40.png โดยไฟล์ .fnt จะเป็นตัวเก็บรายละเอียดของตัวอักษรแต่ละตัว ส่วนไฟล์ .png จะเป็น bitmap ที่ได้จาก Font ที่เราแปลง ตัวอย่างดังรูป
การเลือกใช้ Font มีข้อสำคัญอย่างหนึ่งคือ ต้องเลือก Font ที่สามารถพิมพ์สระได้โดยไม่มีวงกลมแสดงหน้าสระ ตัวอย่างของ Font Loma ที่สามารถพิมพ์สระได้โดยไม่มีวงกลมแสดงหน้าสระ https://www.micro.in.th/esp32-font-converter/national.7z
หลังจากได้ไฟล์ .fnt และ .png มาแล้ว ให้เข้าไปที่หน้า https://www.micro.in.th/esp32-font-converter เพื่อทำการแปลงไฟล์ Bitmap font ไปเป็น Array ในภาษาซี สำหรับนำไปใช้กับ esp-idf เมื่อเข้าไปที่หน้าเว็บแปลงไฟล์แล้ว ให้เลือกไฟล์ .fnt และ .png แล้วกดปุ่ม Convert ตัว Server ก็จะทำหน้าที่แปลงไฟล์ Bitmap font ไปเป็น Array แล้วให้เราบันทึกไฟล์ดังกล่าวลงบนคอมพิวเตอร์ หลังจากนั้นก็นำไฟล์ดังกล่าวเข้าไปในโปรเจคของ esp-idf ที่สร้างจาก Eclipse เพื่อเรียกใช้ Font จากไฟล์ดังกล่าว
สำหรับการเรียกใช้งาน Font นั้นทำได้โดยดูจากตัวอย่างดังนี
ใส่ extern const char loma40px[]; ในไฟล์ที่ต้องการใช้ Font ภาษาไทย หรือจะใส่ไว้ใน header file แล้ว include ไปใช้งานก็ได้
#define BLINK_GPIO 2 extern const char loma40px[]; void app_main() { gpio_pad_select_gpio(BLINK_GPIO); gpio_set_direction(BLINK_GPIO, GPIO_MODE_OUTPUT); ili9341_init(); ili9341_fill_bar(COLOR_WHITE, 0, 0, 240, 320); thaifont_set_font((char*)&loma40px); while(1) { ili9341_fill_bar(COLOR_YELLOW, 0, 0, 240, 120); thaifont_set_color(COLOR_RED); thaifont_draw_text((char*)"Hello world", 5, 0); thaifont_set_color(COLOR_GREEN); thaifont_draw_text((char*)"สวัสดีชาวโลก", 5, 40); thaifont_set_color(COLOR_BLUE); thaifont_draw_text((char*)"0123456789", 5, 80); /* Blink off (output low) */ gpio_set_level(BLINK_GPIO, 0); vTaskDelay(1000 / portTICK_PERIOD_MS); ili9341_fill_bar(COLOR_CYAN, 0, 0, 240, 120); thaifont_set_color(COLOR_GREEN); thaifont_draw_text((char*)"0123456789", 5, 0); thaifont_set_color(COLOR_BLUE); thaifont_draw_text((char*)"Hello world", 5, 40); thaifont_set_color(COLOR_RED); thaifont_draw_text((char*)"สวัสดีชาวโลก", 5, 80); /* Blink on (output high) */ gpio_set_level(BLINK_GPIO, 1); vTaskDelay(1000 / portTICK_PERIOD_MS); } }
Download source code จาก https://www.micro.in.th/files/esp32/ili9341_thai_font.7z