假如你找的字库没有中英文,那就和lvgl默认提供的字库不兼容,也就是中文和英文要分开显示。这是一个不合理的做法。
lvgl默认提供的字库是非常大,它是英文及字符全量的库,非常庞大,非常耗资源。
使用MCU_Font_Release资源也省了,它可以按需生成对应的字库。中英文,甚至日语,韩语,图标全部否能混搭使用,非常方便的一个工具。
它使用也很方便,它可以自动的提取源文件的字符,然后生成字库,这一点我是觉得牛逼的地方。
目前我已经使用这个工具来开发我的项目了,已将官方的:fontconverter,完全摒弃了。
1.做这个软件的初衷
因此我就想做一个工具,能够自动从我们的代码中提取需要显示的字符,自动的转换为字模数据,而且显示方便。
2.使用演示
LVGL中同时显示中文、韩文、日文、以及图标字体
LVGL官方lv_demo_printer示例运行后如下:
接下来使用我的小工具MCU_Font在上面界面中同时显示中文、韩文、日文、以及图标字体。
首先打开MCU_Font工具,打开后界面如下:
导出字体名称:生成的字体文件名称这里我们填"lv_font_montserrat_22"LVGL在本示例中使用了这个字体
「重要提示:为了支持多国语言,目前本软件使用UTF-8编码读取源程序,如果你的源程序文件为GB2312或其他编码则请转为UTF-8编码。可以使用notepad++转为UTF-8编码,但keil编辑器的编码可以任然使用GB2312。」
由于我们要显示多种字体,点击左上角多字体按钮后进入如下界面:
按照上图所示设置字体,软件会先从第一个字体查找字符,如查不到字符再从下一个字体查找,因此排在靠前的字体优先级高一些。当所有选择的字体都查不到该字符时会弹出提示。
这里设置字体大小时最好保证每种字体行高差不多。
抗锯齿我们选择4bpp。
接下来我们按如下所示将LVGL的demo代码中的英文改为中文、韩文、日文以及图标:
修改完以上代码后,我们先保存下,再切换到MCU_Font工具,点击生成。
1600240693195
最后出来如下提示,表示生成成功。
最后我们再次运行LVGL的demo程序如下所示:(可以看到最后一行同时显示中、韩、日及图标)
以后,如果你在你的源程序中新增了中文、韩文、日文或图标等字符,只需要先保存修改,再切换到MCU_Font点击生成就可以了。
3.图标字符提取
要使用图标字体需要到FontAwesome官网下载该图标字体并安装后,便可在MCU_Font工具里选择该字体。
安装完图标字体后,先选择图标字体、再点击字库浏览,如下图:
点击“字库浏览”后进入如下界面,图标字符的unicode编码默认是从0xF000开始的,如下图所示:
我们选择想要的图标后,便可以看到靠下侧的“字符符号”会显示相应符号。我们只要将该字符符号复制到我们的代码中保存后,再使用MCU_Font工具生成,便可显示该图标。
(V2.0版本中单击相应的图标单元格,软件将自动把字符拷贝到系统剪切板中)
4.定制图标(版本V2.0新增功能)
当字体图标FontAwesome中没有我们想要的图标时,我们可以使用定制图标功能来制作自己的图标字体。
在多字体设置中将第一种字体选择为【定制图标】(在字体列表中最后一项),还需再添加一种任意字体来设置大小,这里我们选择黑体,大小设置大点设为60,如下图所示。(排在前面的优先级高,我们将定制图标放在最前)
接下来我们在主界面中将字体切换到字体1即图标字体,然后点击字库浏览。
选择左上角e000的方格,再点击插入图片按钮(也可直接双击方格来插入图片),来选择一张图片。
(unicode编码E000-F8FF为私有区域,可以自定义使用,F000之后的已被图标字体FontAwesome使用,因此我们的定制图标默认从E000开始)
如下图添加了5张图片。插入图片后,单击相应的图片单元格,软件将自动把字符拷贝到系统剪切板中,之后我们只需要在LVGL代码中粘贴即可。
在LVGL中编写如下测试程序:
5.软件原理
软件先从我们的代码中取出需要显示的字符,然后将字符转为字模数据,再将字幕数据按照预定的格式存储为字体的.c文件,最后由单片机程序对字模数据解析并显示。
取出需要显示的字符
软件将自动提取所有被双引号""包围的字符,并会自动屏蔽掉被//和/**/注释掉的字符,头文件包含的双引号也会屏蔽。
将字幕数据按照预定的格式存储为字体的.c文件
字体文件格式
这里对未接触过LVGL字体格式的小伙伴做个提醒,生成的字体文件中的点阵数据不像我们平常在单片机中使用的字模。
首先每个字符的点阵数据所占字节数不相等,比如单引号","和"@"字符,他们所占的字节数是不相等的,这样做是为了节省空间将字符中空的行和列的地方不转化为点阵。这样的话就需要其他信息来控制字符的显示位置。因此字模数据中除了字模点阵数组、unicode数组外还有有个重要的数组glyph_dsc[],其内容如下:
.adv_w,字符宽度
.box_w,字模宽度
.box_h,字模高度
.ofs_x,字模水平方向偏移(右边为正向)
/*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转为uncode编码,再在字体文件中的unicode数组中查找对应的unicode编码的索引,再由索引查得glyph_dsc中相应字符的数据。由于unicode是按照升序排列可以使用中值查找法提高查找速度。
如要详细了解如何解析字体文件,可查看LVGL源码。
6.后记
QtCreator的编辑器是支持图标字体的,下面我们来在QtCreator编辑器中让他显示出来看看
先要将QtCreator的字体选择图标字体并应用如下图:
应用后可以看到编辑器中可以显示出图标字体的符号了,如下图:
但是其实使用图标字体后,编辑器的字体样式可能就不是我们喜欢的了,所以编辑器中还是选择我们自己喜欢的字体,图标看不到的话我们可以使用备注,或者做成宏定义就好了。
如想在无LVGL的程序中使用MCU_Font,需要在你的代码中修改字模数据的提取函数,可以参照LVGL的方式提取。可以参考以下示例:
7.软件获取地址
本软件如对你有帮助,可以打赏我一下,哈哈(点击MCU_Font软件的右下角“打赏”,1毛2毛也是对我的鼓励,哈哈)。你可以在gitee上查看使用说明,获取新版本或者给我留言。
审核编辑:郭婷
长沙市望城经济技术开发区航空路6号手机智能终端产业园2号厂房3层(0731-88081133)