Category: บทความ

    ในบทความนี้จะแสดงตัวอย่างการสร้าง Font จากโปรแกรม BM Font แปลง Font ที่ได้ไปเป็น Array ภาษาซี และใช้งาน Library font ภาษาไทย สำหรับแสดงผลบนจอ LCD โดยใช้ ESP32 บน Eclipse + esp-idf

ขาสัญญาณของ ESP32 ที่ใช้เชื่อมต่อกับ LCD ILI9341 มีดังนี้

    วิธีการสร้าง 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