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

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

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

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

這里設(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,
"你好-????-おはようご-?-?");//這里同時顯示3種語言，最后2個是圖標(biāo)字體

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

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

1600240693195

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

如下圖添加了5張圖片。插入圖片后，單擊相應(yī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張圖片對應(yīng)的字符
}

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

5.軟件原理

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

取出需要顯示的字符

軟件將自動提取所有被雙引號""包圍的字符，并會自動屏蔽掉被 // 和 /**/ 注釋掉的字符，頭文件包含的雙引號也會屏蔽。

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

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

字體文件格式

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

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

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

.adv_w, 字符寬度

.box_w, 字模寬度

.box_h, 字模高度

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

.ofs_y 字模豎直方向偏移（上邊為正向）（當(dāng)字符需要在基線以下顯示時使用這個參數(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},

解析字體文件

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

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

6.后記

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

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

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

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

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

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

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

7.軟件獲取地址

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

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

審核編輯：郭婷