一.设计思路
LVGL是一款开源的轻量型图形库,具体包含哪些控件,哪些优势功能,详细的文本资料可以直接阅读官方网站,这里不做过多赘诉。
本章节内容,主要是实现如何将一张图片,通过LVGL的FontConverter工具,以字体显示的方式来显示在屏幕上。
一张JPG格式的图片如果通过LVGL的image converter来进行转化处理的话,会占用大量的内存空间。针对如下图所示的所含颜色位数不多的JGP图片而言,如果改用以字体显示的方式去显示,能够节省不少空间。
LVGL所提供的fontconverter工具,并不支持直接修改JPG格式图片,支持的文件格式为TTF/WOFF的字体文件格式。所以如果要实现通过FontConverter工具去实现转化,并输出为对应的C文件的话,则需要先将JPG图片转换为TTF或者WOFF格式文件。
这里不多废话,直接将此次需要使用的转化工具链接提供如下。
在线字体编辑器魔法精灵
链接: https://font.eelf.cn
LVGL官网提供的字体转换器
链接: https://lvgl.io/tools/fontconverter
二.处理方式
1.文件转换处理
1.进入到在线字体编辑器,点击新字形,然后点击导入图片,选中图片将被导入到项目中。这里只是简单操作,并不涉及图片修改等其他操作。(直接将JPG图片导入,一定程度上会和原图存在部分差异,追求一模一样,建议可以先处理为SVG格式图片,然后导入)
2.点击保存后,会在右上角方框中出现对应得图标,说明保存成功。
3.在该编辑页面下单击鼠标右键,在对应选项中选择字形信息,unicode可以根据自己的需求去设计,该编码是LVGL字体转换器所需要使用的。最后导出对应的字体文件即可,导出TTF或者其他格式,本案例中导出TTF文件。(注意:这里的$38等同与0x38,相当于字符中的数字“8”,ASCII值为56)
4.该使用工具需要注意一点的是,需要添加缺失字形,否则导出TTF文件后,使用LVGL加载字体文件会出现无法查找到字体的错误。具体的解释在该使用工具的说明也有,具体如下:
5.通过补充,添加后的缺失字形,具体如下:
6.通过预览选项可以看到显示字体正常。
7.选中TTF选项,即可将当前右上方的字形导出。其导出的具体内容可见字体内容。
2.LVGL字体转化工具处理
具体操作方法可见下图。
1.添加字体文件。
2.填写对应的编码值。
3.填写文件名称和选择文字的大小。
三.演示效果
LVGL生成的C文件内容
#ifndef UI_FONT_ICONFONT24
#define UI_FONT_ICONFONT24 1
#endif
#if UI_FONT_ICONFONT24
/*-----------------
* BITMAPS
*----------------*/
/*Store the image of the glyphs*/
static LV_ATTRIBUTE_LARGE_CONST const uint8_t glyph_bitmap[] = {
/* U+0038 "8" */
0x0, 0x0, 0x0, 0x0, 0x5b, 0x20, 0x0, 0x0,
0x0, 0x0, 0xdf, 0x60, 0x0, 0x0, 0x0, 0x0,
0x36, 0x0, 0x0, 0x0, 0x1c, 0xcc, 0x90, 0x0,
0x0, 0x0, 0x88, 0x7f, 0xf0, 0x0, 0x0, 0x0,
0xd0, 0x9f, 0xb0, 0x0, 0x0, 0x4, 0x80, 0xff,
0x3c, 0xf2, 0x0, 0x0, 0x3, 0xff, 0x31, 0x10,
0x0, 0x0, 0x0, 0x1c, 0xe3, 0x0, 0x0, 0x0,
0x3e, 0x20, 0xdd, 0x10, 0xb, 0xff, 0xff, 0x10,
0x2f, 0x80, 0x4, 0x65, 0x52, 0x0, 0xd, 0xb0,
0x0, 0x0, 0x0, 0x0, 0xb, 0x80, 0x0, 0x0,
0x0, 0x0, 0x4, 0x0
};
/*---------------------
* GLYPH DESCRIPTION
*--------------------*/
static const lv_font_fmt_txt_glyph_dsc_t glyph_dsc[] = {
{.bitmap_index = 0, .adv_w = 0, .box_w = 0, .box_h = 0, .ofs_x = 0, .ofs_y = 0} /* id = 0 reserved */,
{.bitmap_index = 0, .adv_w = 768, .box_w = 12, .box_h = 14, .ofs_x = 0, .ofs_y = 0}
};
/*---------------------
* CHARACTER MAPPING
*--------------------*/
/*Collect the unicode lists and glyph_id offsets*/
static const lv_font_fmt_txt_cmap_t cmaps[] =
{
{
.range_start = 56, .range_length = 1, .glyph_id_start = 1,
.unicode_list = NULL, .glyph_id_ofs_list = NULL, .list_length = 0, .type = LV_FONT_FMT_TXT_CMAP_FORMAT0_TINY
}
};
/*--------------------
* ALL CUSTOM DATA
*--------------------*/
#if LVGL_VERSION_MAJOR == 8
/*Store all the custom data of the font*/
static lv_font_fmt_txt_glyph_cache_t cache;
#endif
#if LVGL_VERSION_MAJOR >= 8
static const lv_font_fmt_txt_dsc_t font_dsc = {
#else
static lv_font_fmt_txt_dsc_t font_dsc = {
#endif
.glyph_bitmap = glyph_bitmap,
.glyph_dsc = glyph_dsc,
.cmaps = cmaps,
.kern_dsc = NULL,
.kern_scale = 0,
.cmap_num = 1,
.bpp = 4,
.kern_classes = 0,
.bitmap_format = 0,
#if LVGL_VERSION_MAJOR == 8
.cache = &cache
#endif
};
extern const lv_font_t ui_font_iconfont24;
/*-----------------
* PUBLIC FONT
*----------------*/
/*Initialize a public general font descriptor*/
#if LVGL_VERSION_MAJOR >= 8
const lv_font_t ui_font_iconfont24 = {
#else
lv_font_t ui_font_iconfont24 = {
#endif
.get_glyph_dsc = lv_font_get_glyph_dsc_fmt_txt, /*Function pointer to get glyph's data*/
.get_glyph_bitmap = lv_font_get_bitmap_fmt_txt, /*Function pointer to get glyph's bitmap*/
.line_height = 14, /*The maximum line height required by the font*/
.base_line = 0, /*Baseline measured from the bottom of the line*/
#if !(LVGL_VERSION_MAJOR == 6 && LVGL_VERSION_MINOR == 0)
.subpx = LV_FONT_SUBPX_NONE,
#endif
#if LV_VERSION_CHECK(7, 4, 0) || LVGL_VERSION_MAJOR >= 8
.underline_position = 2,
.underline_thickness = 0,
#endif
.dsc = &font_dsc, /*The custom font data. Will be accessed by `get_glyph_bitmap/dsc` */
#if LV_VERSION_CHECK(8, 2, 0) || LVGL_VERSION_MAJOR >= 9
.fallback = &ui_font_iconfont24,
#endif
.user_data = NULL,
};
#endif /*#if UI_FONT_ICONFONT24*/
项目例程所对应的显示图标的部分代码内容
//LVGL部分显示跑步图标的代码
ui_StepiconLabel = lv_label_create(ui_HomePage);
lv_obj_set_width(ui_StepiconLabel, LV_SIZE_CONTENT); /// 1
lv_obj_set_height(ui_StepiconLabel, LV_SIZE_CONTENT); /// 1
lv_obj_set_x(ui_StepiconLabel, -80);
lv_obj_set_y(ui_StepiconLabel, -5);
lv_obj_set_align(ui_StepiconLabel, LV_ALIGN_CENTER);
lv_label_set_text(ui_StepiconLabel, "8"); //设置显示字体的内容
lv_obj_set_style_text_color(ui_StepiconLabel, lv_color_hex(0x3278FF), LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_text_opa(ui_StepiconLabel, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
lv_obj_set_style_text_font(ui_StepiconLabel, &ui_font_iconfont24, LV_PART_MAIN | LV_STATE_DEFAULT);