LVGL的多語言轉(zhuǎn)換工具：MCU_Font_Release

【正點(diǎn)原子戰(zhàn)艦V3_多國語言示例】 https://gitee.com/WuBinCPP/MCU_Font_Release/tree/master/戰(zhàn)艦V3_MCU_Font示例

1.做這個(gè)軟件的初衷

當(dāng)我們要在單片機(jī)或其他一些小型系統(tǒng)中顯示非英文字符如漢語、韓語，同時(shí)又不想將整個(gè)字庫刷到設(shè)備中時(shí)，我們就需要將我們用到的這些字符一個(gè)個(gè)地使用取模軟件取出字模數(shù)據(jù)放到我們的程序中，操作相當(dāng)繁瑣。

因此我就想做一個(gè)工具，能夠自動(dòng)從我們的代碼中提取需要顯示的字符，自動(dòng)的轉(zhuǎn)換為字模數(shù)據(jù)，而且顯示方便。

2.使用演示

LVGL中同時(shí)顯示中文、韓文、日文、以及圖標(biāo)字體

這里我們使用LVGL的 lv_demo_printer_scr 仿真示例程序，我使用的環(huán)境為 Qt Creator。

LVGL 官方 lv_demo_printer 示例運(yùn)行后如下：

接下來使用我的小工具 MCU_Font 在上面界面中同時(shí)顯示 中文、 韓文、日文、以及圖標(biāo)字體。

首先打開 MCU_Font 工具，打開后界面如下：

導(dǎo)出字體名稱：生成的字體文件名稱 這里我們填 "lv_font_montserrat_22" LVGL 在本示例中 使用了這個(gè)字體

導(dǎo)出字體路徑：導(dǎo)出的字體文件存放的路徑，這里根據(jù)你們的實(shí)際存放路徑來填，我的路徑是 D:/webPro/littlevGL/pc_sim_lvgl/pc_sim_lvgl/lvgl/src/lv_font

讀取路徑添加：添加需要提取字符的程序代碼路徑，可以選文件也可以選文件夾。如是文件夾的話會(huì)遍歷該文件夾內(nèi)部所有文件，但不會(huì)遞歸繼續(xù)讀取下層文件夾。這里我直接選擇 demo 的.c文件 lv_demo_printer.c，如下圖

「重要提示：為了支持多國語言，目前本軟件使用 UTF-8 編碼讀取源程序，如果你的源程序文件為 GB2312 或其他編碼 則請(qǐng)轉(zhuǎn)為 UTF-8編碼?？梢允褂?notepad++ 轉(zhuǎn)為 UTF-8 編碼，但 keil 編輯器的編碼可以任然使用 GB2312。」

由于我們要顯示多種字體，點(diǎn)擊左上角多字體按鈕后進(jìn)入如下界面：

按照上圖所示設(shè)置字體，軟件會(huì)先從第一個(gè)字體查找字符，如查不到字符再從下一個(gè)字體查找，因此排在靠前的字體優(yōu)先級(jí)高一些。當(dāng)所有選擇的字體都查不到該字符時(shí)會(huì)彈出提示。

第二個(gè)為韓文字體，第三個(gè)為日文字體，這兩個(gè)都是Window系統(tǒng)自帶的，最后一個(gè)為圖標(biāo)字體，接觸過前端的人應(yīng)該都知道這種字體，需要到 FontAwesome 官網(wǎng)下載該圖標(biāo)字體的字體文件并安裝后，便可在 MCU_Font 工具里選擇該字體。

這里設(shè)置字體大小時(shí)最好保證每種字體行高差不多。

抗鋸齒我們選擇 4bpp 。

接下來我們按如下所示將 LVGL的 demo 代碼中的英文改為中文、韓文、日文以及圖標(biāo)：

icon=add_icon(box,&lv_demo_printer_img_copy,"加油",lv_color_hex(0xbf3ebf));
lv_obj_align_origo(icon,NULL,LV_ALIGN_IN_LEFT_MID,1*(box_w-20)/8+10,-15);
lv_obj_set_event_cb(icon,copy_open_icon_event_cb);

icon=add_icon(box,&lv_demo_printer_img_scan,"努力",lv_color_hex(0x4b55c4));
lv_obj_align_origo(icon,NULL,LV_ALIGN_IN_LEFT_MID,3*(box_w-20)/8+10,-15);
lv_obj_set_event_cb(icon,scan_open_icon_event_cb);

icon=add_icon(box,&lv_demo_printer_img_print,"奮斗",lv_color_hex(0x46b147));
lv_obj_align_origo(icon,NULL,LV_ALIGN_IN_LEFT_MID,5*(box_w-20)/8+10,-15);
lv_obj_set_event_cb(icon,print_open_event_cb);

icon=add_icon(box,&lv_demo_printer_img_setup,"歐耶",lv_color_hex(0xe22e2f));
lv_obj_align_origo(icon,NULL,LV_ALIGN_IN_LEFT_MID,7*(box_w-20)/8+10,-15);

lv_obj_set_style_local_value_str(box,LV_CONT_PART_MAIN,LV_STATE_DEFAULT,
"你好-????-おはようご-?-?");//這里同時(shí)顯示3種語言，最后2個(gè)是圖標(biāo)字體

最后兩個(gè)是圖標(biāo)字體的兩個(gè)符號(hào)，在后面我再介紹如何使用 MCU_Font 工具獲取圖標(biāo)字符，我們先繼續(xù)，先讓效果出來。

修改完以上代碼后，我們先保存下，再切換到 MCU_Font 工具，點(diǎn)擊生成。

1600240693195

最后出來如下提示，表示生成成功。

最后我們再次運(yùn)行 LVGL 的 demo 程序如下所示：（可以看到最后一行同時(shí)顯示中、韓、日及圖標(biāo)）

以后，如果你在你的源程序中新增了中文、韓文、日文或圖標(biāo)等字符，只需要先保存修改，再切換到 MCU_Font 點(diǎn)擊生成就可以了。

3.圖標(biāo)字符提取

要使用圖標(biāo)字體需要到 FontAwesome 官網(wǎng)下載該圖標(biāo)字體并安裝后，便可在 MCU_Font 工具里選擇該字體。

安裝完圖標(biāo)字體后，先選擇圖標(biāo)字體、再點(diǎn)擊字庫瀏覽，如下圖：

點(diǎn)擊 “字庫瀏覽” 后進(jìn)入如下界面，圖標(biāo)字符的 unicode 編碼默認(rèn)是從 0xF000 開始的，如下圖所示：

我們選擇想要的圖標(biāo)后，便可以看到靠下側(cè)的 “字符符號(hào)” 會(huì)顯示相應(yīng)符號(hào)。我們只要將該字符符號(hào)復(fù)制到我們的代碼中保存后，再使用 MCU_Font 工具生成，便可顯示該圖標(biāo)。

（V2.0版本中單擊相應(yīng)的圖標(biāo)單元格，軟件將自動(dòng)把字符拷貝到系統(tǒng)剪切板中）

4.定制圖標(biāo) （版本V2.0新增功能）

當(dāng)字體圖標(biāo) FontAwesome 中沒有我們想要的圖標(biāo)時(shí)，我們可以使用定制圖標(biāo)功能來制作自己的圖標(biāo)字體。

在多字體設(shè)置中將第一種字體選擇為【定制圖標(biāo)】（在字體列表中最后一項(xiàng)），還需再添加一種任意字體來設(shè)置大小，這里我們選擇黑體，大小設(shè)置大點(diǎn)設(shè)為60，如下圖所示。（排在前面的優(yōu)先級(jí)高，我們將定制圖標(biāo)放在最前）

接下來我們在主界面中將字體切換到字體1即圖標(biāo)字體，然后點(diǎn)擊字庫瀏覽。

選擇左上角e000的方格，再點(diǎn)擊插入圖片按鈕（也可直接雙擊方格來插入圖片），來選擇一張圖片。

（unicode編碼E000-F8FF為私有區(qū)域，可以自定義使用，F(xiàn)000 之后的已被圖標(biāo)字體FontAwesome使用，因此我們的定制圖標(biāo)默認(rèn)從E000開始）

如下圖添加了5張圖片。插入圖片后，單擊相應(yīng)的圖片單元格，軟件將自動(dòng)把字符拷貝到系統(tǒng)剪切板中，之后我們只需要在LVGL代碼中粘貼即可。

在LVGL中編寫如下測試程序:

LV_FONT_DECLARE(mcu_font_16)
voidlv_test(void)
{
lv_obj_t*label=lv_label_create(lv_scr_act(),NULL);
lv_obj_set_style_local_text_font(label,LV_OBJ_PART_MAIN,LV_STATE_DEFAULT,&mcu_font_16);
lv_obj_set_style_local_text_color(label,LV_LABEL_PART_MAIN,LV_STATE_DEFAULT,LV_COLOR_BLUE);
lv_obj_set_style_local_bg_color(lv_scr_act(),LV_LABEL_PART_MAIN,LV_STATE_DEFAULT,LV_COLOR_YELLOW);
lv_label_set_text(label,"");//這里為前面5張圖片對(duì)應(yīng)的字符
}

將上述LVGL測試程序保存后，切換到 MCU_Font.exe 工具中，點(diǎn)擊生成。最后再運(yùn)行 LVGL 的測試程序。

5.軟件原理

軟件先從我們的代碼中取出需要顯示的字符，然后將字符轉(zhuǎn)為字模數(shù)據(jù)，再將字幕數(shù)據(jù)按照預(yù)定的格式存儲(chǔ)為字體的.c文件，最后由單片機(jī)程序?qū)ψ帜?shù)據(jù)解析并顯示。

取出需要顯示的字符

軟件將自動(dòng)提取所有被雙引號(hào)""包圍的字符，并會(huì)自動(dòng)屏蔽掉被 // 和 /**/ 注釋掉的字符，頭文件包含的雙引號(hào)也會(huì)屏蔽。

將字幕數(shù)據(jù)按照預(yù)定的格式存儲(chǔ)為字體的.c文件

為了后期能和 littleVGL （LVGL）的UI庫兼容，字體文件的格式和 LVGL 的字體格式一樣，字體文件中主要存儲(chǔ)兩種信息，一種是字模數(shù)組數(shù)據(jù)另一種是對(duì)應(yīng)的unicode編碼數(shù)組數(shù)據(jù)。單片機(jī)解析字體時(shí)是根據(jù)unicode編碼來找到對(duì)應(yīng)字符點(diǎn)陣數(shù)據(jù)的。

字體文件格式

這里對(duì)未接觸過 LVGL 字體格式的小伙伴做個(gè)提醒，生成的字體文件中的點(diǎn)陣數(shù)據(jù)不像我們平常在單片機(jī)中使用的字模。

首先每個(gè)字符的點(diǎn)陣數(shù)據(jù)所占字節(jié)數(shù)不相等，比如單引號(hào)","和"@"字符，他們所占的字節(jié)數(shù)是不相等的，這樣做是為了節(jié)省空間將字符中空的行和列的地方不轉(zhuǎn)化為點(diǎn)陣。這樣的話就需要其他信息來控制字符的顯示位置。因此字模數(shù)據(jù)中除了字模點(diǎn)陣數(shù)組、unicode數(shù)組外還有有個(gè)重要的數(shù)組 glyph_dsc[]，其內(nèi)容如下：

.bitmap_index , 字符對(duì)應(yīng)的字模數(shù)據(jù)索引

.adv_w, 字符寬度

.box_w, 字模寬度

.box_h, 字模高度

.ofs_x, 字模水平方向偏移（右邊為正向）

.ofs_y 字模豎直方向偏移（上邊為正向）（當(dāng)字符需要在基線以下顯示時(shí)使用這個(gè)參數(shù)讓字模下沉）

/*U+5f"_"*/
{.bitmap_index=1974,.adv_w=152,.box_w=10,.box_h=1,.ofs_x=0,.ofs_y=-3},
...
/*U+67"g"*/
{.bitmap_index=5824,.adv_w=264,.box_w=14,.box_h=19,.ofs_x=1,.ofs_y=-4},

解析字體文件

程序會(huì)先得到待顯示字符的 UTF-8 編碼，然后將 UTF-8 轉(zhuǎn)為 uncode 編碼，再在字體文件中的 unicode 數(shù)組中查找對(duì)應(yīng)的 unicode 編碼的索引 ，再由索引查得 glyph_dsc 中相應(yīng)字符的數(shù)據(jù)。由于 unicode 是按照升序排列可以使用中值查找法提高查找速度。

如要詳細(xì)了解如何解析字體文件，可查看 LVGL 源碼。

6.后記

當(dāng)我們把字符符號(hào)拷貝到我們的代碼中時(shí)會(huì)發(fā)現(xiàn)是個(gè)空格或框框，這其實(shí)不影響我們 MCU_Font 的使用，只是我們自己看不到而已。這是因?yàn)槲覀兊?IDE 編輯器設(shè)置的不是圖標(biāo)字體，我們可以把編輯器選擇為圖標(biāo)字體來顯示圖標(biāo)。但是有的編輯器就不支持圖標(biāo)字體比如我們單片機(jī)開發(fā)者經(jīng)常使用的 keil ，但這其實(shí)對(duì)字模的生成是沒影響的 。

Qt Creator的編輯器是支持圖標(biāo)字體的，下面我們來在 Qt Creator 編輯器中讓他顯示出來看看

先要將 Qt Creator 的字體選擇 圖標(biāo)字體 并應(yīng)用如下圖：

應(yīng)用后可以看到編輯器中可以顯示出圖標(biāo)字體的符號(hào)了，如下圖：

但是其實(shí)使用圖標(biāo)字體后，編輯器的字體樣式可能就不是我們喜歡的了，所以編輯器中還是選擇我們自己喜歡的字體，圖標(biāo)看不到的話我們可以使用備注，或者做成宏定義就好了。

如想在無 LVGL 的程序中使用 MCU_Font ，需要在你的代碼中修改字模數(shù)據(jù)的提取函數(shù)，可以參照 LVGL 的方式提取?？梢詤⒖家韵率纠?/p>

【正點(diǎn)原子戰(zhàn)艦V3_多國語言示例】 https://gitee.com/WuBinCPP/MCU_Font_Release/tree/master/戰(zhàn)艦V3_MCU_Font示例

7.軟件獲取地址

本軟件如對(duì)你有幫助，可以打賞我一下，哈哈（點(diǎn)擊 MCU_Font 軟件的右下角“打賞”，1毛2毛也是對(duì)我的鼓勵(lì)，哈哈）。你可以在 gitee 上查看使用說明，獲取新版本或者給我留言。

MCU_Font 地址 https://gitee.com/WuBinCPP/MCU_Font_Release

審核編輯：郭婷