Categories
บทความ

ESP32 Font ภาษาไทยสำหรับจอ LCD

    ในบทความนี้จะแสดงตัวอย่างการสร้าง 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

Categories
บทความ

เชื่อมต่อ ESP32 กับจอ LCD TFT 2.8″

ตัวอย่างการเชื่อมต่อ ESP32 กับจอ LCD 2.8″ โดยตัว TFT Controller จะใช้เบอร์ ILI9341 Interface ของจอจะเป็น SPI โดยขาของ ESP32 ที่ใช้เชื่อมต่อกับจอมีดังนี้

ขา ESP32 ขาของจอ LCD
GPIO12 MISO
GPIO13 MOSI
GPIO14 SCK
GPIO15 CS
GPIO23 DC
GPIO22 RESET
GPIO21 LED Backlight

รูปภาพที่จะนำมาทดสอบกับจอ LCD จะทำการแปลงจากไฟล์รูปภาพบนคอมโดยใช้โปรแกรม LCD Image Converter สามารถดาวน์โหลดได้จาก http://www.riuson.com/lcd-image-converter

ขั้นตอนการ Convert รูปภาพ เพื่อนำไปใช้กับ esp-idf v4.0.1 มีดังนี้
เปิดโปรแกรม LCD Image Converter ขึ้น แล้วเลือกที่เมนู File -> New Image

หลังจากนั้นให้เลือกที่เมนู Image -> Import แล้วเลือกรูปที่ต้องการ Convert

หลังจากนั้นให้เลือกที่เมนู Option -> Conversion แล้วเลือกที่ Tab Image โดยตั้งค่า Block size = 16 bit, Byte order = Big-Endian เสร็จแล้วกดปุ่ม OK ข้อสังเกตุการจัดเรียงข้อมูลในหน่วยความจำของ ESP32 เป็นแบบ Little endian ดังนั้น Byte order ของโปรแกรมนี้น่าจะสลับกันอยู่

หลังจากนั้นให้เลือกที่เมนู File -> Convert All เพื่อแปลงรูปภาพไปเป็น Array ในภาษาซี

หลังจากที่ Convert รูปภาพไปเป็น Array ภาษาซีแล้ว ให้คัดลอกไฟล์ดังกล่าวไปไว้ในโปรเจคที่สร้าง Eclipse หรือ สร้างเองจาก esp-idf ตัวอย่าง Source code โปรเจคดาวน์โหลดได้จาก https://www.micro.in.th/files/esp32/test_ili9341.7z