LVGL Font 字体

最新推荐文章于 2024-09-24 16:46:54 发布

冷太阳88

最新推荐文章于 2024-09-24 16:46:54 发布

阅读量9.1k

点赞数 14

分类专栏： LVGL Font 文章标签：单片机 mcu

本文链接：https://blog.csdn.net/tianjianwudiwowudi/article/details/108636146

版权

LVGL 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

Font

2 篇文章 0 订阅

订阅专栏

MCU_Font 自动字模提取工具

1.做这个软件的初衷

当我们要在单片机或其他一些小型系统中显示非英文字符如汉语、韩语，同时又不想将整个字库刷到设备中时，我们就需要将我们用到的这些字符一个个地使用取模软件取出字模数据放到我们的程序中，操作相当繁琐。

因此我就想做一个工具，能够自动从我们的代码中提取需要显示的字符，自动的转换为字模数据，而且显示方便。

2.软件原理

软件先从我们的代码中取出需要显示的字符，然后将字符转为字模数据，再将字幕数据按照预定的格式存储为字体的.c文件，最后由单片机程序对字模数据解析并显示。

取出需要显示的字符

软件将自动提取所有被双引号""包围的字符，并会自动屏蔽掉被 // 和 /**/ 注释掉的字符，头文件包含的双引号也会屏蔽。
将字幕数据按照预定的格式存储为字体的.c文件

为了后期能和 littleVGL （LVGL）的UI库兼容，字体文件的格式和 LVGL 的字体格式一样，字体文件中主要存储两种信息，一种是字模数组数据另一种是对应的unicode编码数组数据。单片机解析字体时是根据unicode编码来找到对应字符点阵数据的。
字体文件格式

这里对未接触过 LVGL 字体格式的小伙伴做个提醒，生成的字体文件中的点阵数据不像我们平常在单片机中使用的字模。

首先每个字符的点阵数据所占字节数不相等，比如单引号",“和”@"字符，他们所占的字节数是不相等的，这样做是为了节省空间将字符中空的行和列的地方不转化为点阵。这样的话就需要其他信息来控制字符的显示位置。因此字模数据中除了字模点阵数组、unicode数组外还有有个重要的数组 glyph_dsc[]，其内容如下：

.bitmap_index , 字符对应的字模数据索引

.adv_w, 字符宽度

.box_w, 字模宽度

.box_h, 字模高度

.ofs_x, 字模水平方向偏移（右边为正向）

.ofs_y 字模竖直方向偏移（上边为正向）（当字符需要在基线以下显示时使用这个参数让字模下沉）
```
/* 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 源码。

3.使用演示

LVGL中同时显示中文、韩文、日文、以及图标字体

这里我们使用LVGL的 lv_demo_printer_scr 仿真示例程序，我使用的环境为 Qt Creator。

LVGL 官方 lv_demo_printer 示例运行后如下：

1600237615029

接下来使用我的小工具 MCU_Font 在上面界面中同时显示中文、韩文、日文、以及图标字体。

首先打开 MCU_Font 工具，打开后界面如下：
在这里插入图片描述

导出字体名称：生成的字体文件名称这里我们填 “lv_font_montserrat_22” LVGL 在本示例中使用了这个字体

导出字体路径：导出的字体文件存放的路径，这里根据你们的实际存放路径来填，我的路径是 D:/webPro/littlevGL/pc_sim_lvgl/pc_sim_lvgl/lvgl/src/lv_font

读取路径添加：添加需要提取字符的程序代码路径，可以选文件也可以选文件夹。如是文件夹的话会遍历该文件夹内部所有文件，但不会递归继续读取下层文件夹。这里我直接选择 demo 的.c文件 lv_demo_printer.c，如下图

1600240941517

由于我们要显示多种字体，点击左上角多字体按钮后进入如下界面：

1600239561528

按照上图所示设置字体，软件会先从第一个字体查找字符，如查不到字符再从下一个字体查找，因此排在靠前的字体优先级高一些。当所有选择的字体都查不到该字符时会弹出提示。

第二个为韩文字体，第三个为日文字体，这两个都是Window系统自带的，最后一个为图标字体，接触过前端的人应该都知道这种字体，需要到 FontAwesome 官网下载该图标字体的字体文件并安装后，便可在 MCU_Font 工具里选择该字体。

这里设置字体大小时最好保证每种字体行高差不多。

抗锯齿我们选择 4bpp 。

接下来我们按如下所示修改 LVGL的 demo 代码来同时显示中、韩、日、及图标：

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个是图标字体

最后两个是图标字体的两个符号，在后面我再介绍如何使用 MCU_Font 工具获取图标字符，我们先继续，先让效果出来。

修改完以上代码后，我们先保存下，再切换到 MCU_Font 工具，点击生成。

1600240693195

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

1600241359828

最后我们再次运行 LVGL 的 demo 程序如下所示：（可以看到最后一行同时显示中、韩、日及图标）

1600241514504

4.图标字符提取

要使用图标字体需要到 FontAwesome 官网下载该图标字体并安装后，便可在 MCU_Font 工具里选择该字体。

安装完图标字体后，先选择图标字体、再点击字库浏览，如下图：

1600241873071

点击 “字库浏览” 后进入如下界面，图标字符的 unicode 编码是从 0xF000 开始的，我们在 “unicode编码” 输入框中输入 F000 后便跳到可用的图标字体页，如下图所示：

1600242299902

我们选择想要的图标后，便可以看到靠下侧的 “字符符号” 会显示相应符号。我们只要将该字符符号复制到我们的代码中保存后，再使用 MCU_Font 工具生成，便可显示该图标。

5.后记

当我们把字符符号拷贝到我们的代码中时会发现是个空格或框框，这其实不影响我们 MCU_Font 的使用，只是我们自己看不到而已。这是因为我们的 IDE 编辑器设置的不是图标字体，我们可以把编辑器选择为图标字体来显示图标。但是有的编辑器就不支持图标字体比如我们单片机开发者经常使用的 keil ，但这其实对字模的生成是没影响的。

Qt Creator的编辑器是支持图标字体的，下面我们来在 Qt Creator 编辑器中让他显示出来看看

先要将 Qt Creator 的字体选择图标字体并应用如下图：

1600243379865