LVGL的多語(yǔ)言轉(zhuǎn)換工具--MCU_Font_Release

簡(jiǎn)介

在gitee發(fā)現(xiàn)一個(gè)很不錯(cuò)的工具 -- MCU_Font_Release

最近弄一個(gè)項(xiàng)目用到了LVGL，然后需要中英文切換，官方也提供一個(gè)轉(zhuǎn)換工具，不過(guò)需要有字庫(kù)，而且操作起來(lái)非常復(fù)雜。

假如你找的字庫(kù)沒(méi)有中英文，那就和lvgl默認(rèn)提供的字庫(kù)不兼容，也就是中文和英文要分開顯示。這是一個(gè)不合理的做法。

lvgl默認(rèn)提供的字庫(kù)是非常大，它是英文及字符全量的庫(kù)，非常龐大，非常耗資源。

我在想肯定有大牛也遇到這些問(wèn)題，果真，我在國(guó)內(nèi)開源網(wǎng)站gitee就找到了，解決了我的問(wèn)題。

使用MCU_Font_Release資源也省了，它可以按需生成對(duì)應(yīng)的字庫(kù)。中英文，甚至日語(yǔ)，韓語(yǔ)，圖標(biāo)全部否能混搭使用，非常方便的一個(gè)工具。

它使用也很方便，它可以自動(dòng)的提取源文件的字符，然后生成字庫(kù)，這一點(diǎn)我是覺(jué)得牛逼的地方。

目前我已經(jīng)使用這個(gè)工具來(lái)開發(fā)我的項(xiàng)目了，已將官方的：fontconverter，完全摒棄了。

——正文作者：吳斌 / MCU_Font_Release

MCU_Font 自動(dòng)字模提取工具

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

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

當(dāng)我們要在單片機(jī)或其他一些小型系統(tǒng)中顯示非英文字符如漢語(yǔ)、韓語(yǔ)，同時(shí)又不想將整個(gè)字庫(kù)刷到設(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)行后如下：

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

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

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

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

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

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

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

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

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

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

抗鋸齒我們選擇 4bpp 。

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

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

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

1600240693195

最后出來(lái)如下提示，表示生成成功。

最后我們?cè)俅芜\(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)擊字庫(kù)瀏覽，如下圖：

點(diǎn)擊 “字庫(kù)瀏覽” 后進(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 中沒(méi)有我們想要的圖標(biāo)時(shí)，我們可以使用定制圖標(biāo)功能來(lái)制作自己的圖標(biāo)字體。

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

接下來(lái)我們?cè)谥鹘缑嬷袑⒆煮w切換到字體1即圖標(biāo)字體，然后點(diǎn)擊字庫(kù)瀏覽。

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

(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中編寫如下測(cè)試程序:

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

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庫(kù)兼容，字體文件的格式和 LVGL 的字體格式一樣，字體文件中主要存儲(chǔ)兩種信息，一種是字模數(shù)組數(shù)據(jù)另一種是對(duì)應(yīng)的unicode編碼數(shù)組數(shù)據(jù)。單片機(jī)解析字體時(shí)是根據(jù)unicode編碼來(lái)找到對(duì)應(yīng)字符點(diǎn)陣數(shù)據(jù)的。

字體文件格式

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

首先每個(gè)字符的點(diǎn)陣數(shù)據(jù)所占字節(jié)數(shù)不相等，比如單引號(hào)","和"@"字符，他們所占的字節(jié)數(shù)是不相等的，這樣做是為了節(jié)省空間將字符中空的行和列的地方不轉(zhuǎn)化為點(diǎn)陣。這樣的話就需要其他信息來(lái)控制字符的顯示位置。因此字模數(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ù)讓字模下沉)

解析字體文件

程序會(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)字體來(lái)顯示圖標(biāo)。但是有的編輯器就不支持圖標(biāo)字體比如我們單片機(jī)開發(fā)者經(jīng)常使用的 keil ，但這其實(shí)對(duì)字模的生成是沒(méi)影響的 。

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

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

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

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

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

7.軟件獲取地址

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