ESP32 开发笔记(四)littleVGL LVGL学习使用lv_font_conv离线工具 Font字体 FontAwesome图标字体的使用

前言

先看效果,段式数码字体没选择好^_^。屏幕上这些全是字体,包括图标

在LVGL项目开发中经常会用到各种各样的字体显示包含简单的图标显示,此文就教大家怎么使用LVGL官方的字体转换工具来将电脑中的ttf/woff/woff2字体转换为C数组文件供LVGL调用显示,此文 只讲 lv_font_conv工具的离线使用方法,想在线转换的直接访问LVGL官方中的转换工具来在线转换。地址:

lv_font_conv是LVGL官方编写的一套离线字体转换工具,由于此工具是由node.js 写的,所以要在第一步安装node运行环境
离线工具没有图形化界面,需要使用命令行输入命令来转换,要比在线复杂点,优点就是无需网络,而且速度非常快。

一、安装node

官方网址:Node.js
我的系统是Windows10_64,下载的最新版本,如果你的电脑是Window7使用如下地址下载12及以前版本
全版本下载地址:Previous Releases | Node.js

选择长期支持版,下载后打开安装

单击下一步

勾选同意协议,单击下一步

选择安装位置,单击下一步

选择安装组件,默认即可,单击下一步

勾选自动安装需要的工具,因为有些模块编译需要用到python或vc构建工具,如果你的电脑已经有安装这些不用勾选,单击下一步

单击安装按钮,开始安装

接下来验证安装,安装程序会自动将环境变量设置好,打开cmd输入node --version命令查看版本号,能正常输出版本号即为安装成功

二、下载lv_font_conv


github地址:https://github.com/lvgl/lv_font_conv
网络好的同学可以试试LVGL官方的在线转换工具^_^,网址: (有同学反应此国外网站打不开,所以这里只教离线工具的使用)
打开 git cmd命令行工具,输入命令:git clone https://github.com/lvgl/lv_font_conv.git,将字体转换工具下载到本地(大概2M多)

关闭git cmd窗口,打开Windows cmd命令行工具cd到字体转换工具目录

接下来使用Node工具安装字体转换工具所有依赖项,输入命令npm install回车,开始安装(此步必须联网)

安装完成,发现原来这个文件夹只有2M,现在变为106M多,(需要在其它电脑上离线使用的话,将这个文件夹压缩备份,在没有网络的情况下只要有node安装程序和这个压缩包即可离线实现字体转换)接下来将字体转换工具模块使用node全局安装,这样在哪个目录也可以使用这个工具了
命令行输入命令:npm install -g F:\ESP32\LVGL\lv_font_conv

安装完成,此步不需要联网
接下来验证一下lv_font_conv工具是否安装成功,打开一个新的Windows cmd命令行工具,输入命令:lv_font_conv -h。这个命令将列出lv_font_conv所有的使用参数和方法

三、lv_font_conv 工具工具命令详解

lv_font_conv命令的参数(注意:命令中可以使用中文,但输入空格时必须要切换到英文输入法,不能有中文空格)
    --bpp: 抗锯齿大小,可选值为 1、2、3、4、8
    --size: 字体的大小,实际就是指字符的高度
    -o(或者--output): 输出路径,比如为C:\Users\Administrator\Desktop\my_font_heiti_30.c
    --format: 输出格式,可选值有 dump,bin,lvgl,我们只用 lvgl 就行了
    --font: ttf/woff/woff2 字体文件的路径
    -r(或--range): 所需字符的 unicode 编码范围,可选值为单个字符,字符范围,加可选的映射地址,首先你得必须保证你所需要的字符范围在--font 指定的字体文件中能找得到,-r 命令行参数可以在一条命令中多次出现,如下面例子所示:
        -r 0xF450 单个字符,十六进制和十进制都行
        -r 0xF450-0xF470 字符范围
        -r '0xF450=>0x81' 单个字符加映射地址
        -r '0xF450-0xF470=>0x81' 字符范围加映射地址
        -r 0xF450 -r 0xF451-0xF470 一下使用 2 次-r 命令行参数
        -r 0xF450,0xF451-0xF470 用单个-r 表示多种可选值
    --symbols: 和-r 的作用差不多,都是用来指示所要用到的字符,不过他们的表达形式不一样,对--symbols 而言,它是接受字符的字面量形式,而-r 是接受字符的编码形式,--symbols 和-r 可以同时使用,也可以只使用它们其中的一个,请看如下例子:  --symbols 0123456789 中 ABCD 国 EFG
    --no-compress: 禁止进行 RLE 压缩,我们在生成字体时,请禁止进行压缩

以上列出的都是比较常用的命令行参数,还有其它参数如:--autohint-off, --autohint-strong,--force-fast-kern-format, --no-prefilter, --no-kerning, --full-info
这些参数都是不太重要的,https://github.com/lvgl/lv_font_conv网站有详细介绍

命令举例:
lv_font_conv --no-compress --format lvgl --font D:\123\经典黑体简.TTF -o D:\123\myfont.c --bpp 4 --size 30 --symbols 唯心所现唯识所变 -r 0x20-0x7F
命令解释:
--no-compress:                     不压缩
--format lvgl:                         输出格式LVGL
--font D:\123\经典黑体简.TTF                要转换在字体文件目录
-o D:\123\myfont.c                  输出文件的路径及文件名
--bpp 4                                    抗锯齿大小设置为4
--size 30                                 输出字体为30像素高
--symbols 唯心所现唯识所变  要转换的字符“唯心所现唯识所变”
-r 0x20-0x7F                          编码范围,玩过单片机液晶显示的应该眼熟,看下表

命令的参数是可以组合的,再来个复杂的命令
lv_font_conv --no-compress --format lvgl --font D:\123\经典黑体简.TTF -o D:\123\myfont.c --bpp 4 --size 25 --symbols 路过人 -r 0x30-0x39 -r 0x41-0x5A -r 0x61-0x7A -r 0x95F4
命令解释:
--no-compress:                     不压缩
--format lvgl:                         输出格式LVGL
--font D:\123\经典黑体简.TTF                要转换在字体文件目录
-o D:\123\myfont.c                  输出文件的路径及文件名
--bpp 4                                    抗锯齿大小设置为4
--size 25                                 输出字体为25像素高
--symbols 路过人                   要转换的汉字字符“路过人”
-r 0x30-0x39                         要转换的字符0-9
-r 0x41-0x5A                         要转换的字符大写A-Z
-r 0x61-0x7A                         要转换的字符小写a-z
-r 0x95F4                              要转换的汉字字符“间”的unicode码16进制

四、使用lv_font_conv工具转换普通字体

经过第三章后大家应该都懂得怎么使用lv_font_conv命令了,接下实际转换两组字体,一组中文加英文,一组液晶段式数字,一会儿下载测试
生成黑体字,英文数字字母+路过人间四个汉字    myfont.c
lv_font_conv --no-compress --format lvgl --font D:\123\经典黑体简.TTF -o D:\123\myfont.c --bpp 4 --size 25 --symbols 路过人间 -r 0x20-0x7F
生成液晶段试 数字0-9     myledfont.c
lv_font_conv --no-compress --format lvgl --font D:\123\led16sgmnt-Regular.ttf -o D:\123\myledfont.c --bpp 4 --size 25 -r 0x30-0x39

五、使用lv_font_conv工具转换图标字体(FontAwesome)

接下来教大家怎么生成图标字体,其实LVGL工程中已经给我们集成了很多图标字体,下载过官方示例的同学应该在LCD界面中有看到,WIFI,蓝牙,保存,复制,等等图标。那如果项目中需要用到其它没有的图标怎么办呢。这里就要用到阿里的产品了。一个免费的图标字体平台

iconfont
阿里巴巴阿里妈妈MUX倾力打造的矢量图标管理、交流平台,设计师将图标上传到 iconfont 平台,用户可以自定义下载多种格式的icon,平台也可将图标转换为字体,便于前端工程师自由调整与调用

官方网址:iconfont-阿里巴巴矢量图标库

登录官网,没有账号的同学先在官网注册登录一下,目前只能以下方式登录

登录后先创建一个项目



接下来点主页,搜索需要的图标,例如天气在想要的图标上单击购物车图标先添加到购物车

然后单击右上角的购物车图标

选择添加到项目

添加到刚才创建 的项目,单击确认按钮

然后单击主页上的菜单资源管理->我的项目,你刚才选择的图标会在这个项目下,单击下载到本地

会弹出下载窗口

解压下载好的压缩包,里面有很多文件,我们其实只用到其中的iconfont.ttf字体文件,将iconfont.ttf解压到转换文件夹,我是放在D盘的123文件夹,你们随意
使用lv_font_conv命令生成my_icon_font30.c文件,我这里只转换了前五个图标,生成的my_icon_font30.c文件备用
lv_font_conv --no-compress --format lvgl --font D:\123\iconfont.ttf -o D:\123\my_icon_font30.c --bpp 4 --size 30 -r 0xe780,0xe61e,0xe622,0xe623,0xe624
这里注意-r参数,你的图标项目中,每一个图标下面都有一个图标对应的unicode编码,上面的-r参数就是图标对应的unicode编码,几个图标对应几个编码逗号隔开

六、使用lv_font_conv工具转换普通字体与图标字体合并

上面两章教大家怎么将字体文件生成c代码文件,一个字体生成了一个点c文件,这样的话在源码工程中用到几种字体就会有几个C文件,调用也很不方便,接下来教大家一条指令将项目中所用到的N种字体+图标字体合并转换为一个点c文件。
使用组合命令:

lv_font_conv --no-compress --format lvgl --font D:\123\经典黑体简.ttf --symbols 路过人间 --font D:\123\led16sgmnt-Regular.ttf -r 0x30-0x39 --font D:\123\iconfont.ttf -r 0xe780,0xe61e,0xe622,0xe623,0xe624 -o D:\123\my_merge_font_30.c --bpp 4 --size 30

命令解释:
经典黑体简:汉字‘路过人间’
液晶段式字体:0-9数字
天气图标字体:5个图标

以上三种字体合并转换为一个my_merge_font_30.c的文件

七、编辑代码

经过四五六章得到四个字体的点C文件,下面开始编写代码,调用这四个字体文件
myfont.c
myledfont.c
my_icon_font25.c
my_merge_font_25.c

将这四个文件放入工程目录LVGL_Font_Test\components\lvgl\lvgl\src\lv_font文件夹下

打开此工程,在main.c中添加字体声明

LV_FONT_DECLARE(my_icon_font30);//申明字体		图标字体
LV_FONT_DECLARE(myfont);//申明字体				汉字英文
LV_FONT_DECLARE(myledfont);//申明字体			LCD段式字体
LV_FONT_DECLARE(my_merge_font_30);//申明字体    以上合并字体

将图标字体的unicode码转换为UTF8编码并声明,这里要用到一个小工具,我用VC写的《Unicode编码转utf-8编码.exe》可以批量转换Unicode编码到utf8,直接转换成类似这种格式“"\xEE\x9E\x80",复制到代码中直接使用,看软件截图,界面有点糙,后面再改进吧,可以一次输入N个Unicode编码,用逗号隔开即可(工具下载地址:无需积分,如要积分,评论区说明一下,CSDN你懂的,Unicode编码到utf8工具,VS2013编译(非源码)-桌面系统文档类资源-CSDN下载

//定义图标字体1
#define MY_ICON_FONT1 "\xEE\x9E\x80"	// 0xe780
//定义图标字体2
#define MY_ICON_FONT2 "\xEE\x98\x9E"	// 0xe61e
//定义图标字体3
#define MY_ICON_FONT3 "\xEE\x98\xA2"	// 0xe622
//定义图标字体4
#define MY_ICON_FONT4 "\xEE\x98\xA3"	// 0xe623 
//定义图标字体5
#define MY_ICON_FONT5 "\xEE\x98\xA4"	// 0xe624

创建4个风格并设置四种字体,一会儿应用到Label标签上

	///
	///创建四个风格来调用不同字体
	///
	static lv_style_t label_shadow_style1;											// 创建一个风格
	lv_style_init(&label_shadow_style1);											// 初始化风格
	lv_style_set_text_font(&label_shadow_style1, LV_STATE_DEFAULT, &my_icon_font30);

	static lv_style_t label_shadow_style2;											// 创建一个风格
	lv_style_init(&label_shadow_style2);											// 初始化风格
	lv_style_set_text_font(&label_shadow_style2, LV_STATE_DEFAULT, &myfont);

	static lv_style_t label_shadow_style3;											// 创建一个风格
	lv_style_init(&label_shadow_style3);											// 初始化风格
	lv_style_set_text_font(&label_shadow_style3, LV_STATE_DEFAULT, &myledfont);

	static lv_style_t label_shadow_style4;											// 创建一个风格
	lv_style_init(&label_shadow_style4);											// 初始化风格
	lv_style_set_text_font(&label_shadow_style4, LV_STATE_DEFAULT, &my_merge_font_30);

创建四个标签并设置字符内容来演示字体的使用

图标字体Lable,五个图标

	///
	///Label1 /
	///	
	lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);	// 在主屏幕创建一个标签
	lv_label_set_long_mode(label1, LV_LABEL_LONG_BREAK);		// 标签长内容框,保持控件宽度,内容过长就换行
	lv_label_set_recolor(label1, true);							// 使能字符命令重新对字符上色
	lv_label_set_align(label1, LV_LABEL_ALIGN_CENTER);			// 内容居中对齐
	lv_label_set_text(label1, "#ff9900 "MY_ICON_FONT1"#" "#33ccff "MY_ICON_FONT2"#" "#ff3333 "MY_ICON_FONT3"#" "#9933cc "MY_ICON_FONT4"#" "#00ff00 "MY_ICON_FONT5"#");
	lv_obj_set_width(label1, 320);								// 设置标签宽度
	lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, -80);		// 对齐到中心偏上
	lv_obj_add_style(label1, LV_LABEL_PART_MAIN, &label_shadow_style1);		// 应用效果风格

汉字字体Lable

	///
	///Label2 /
	///
	lv_obj_t * label2 = lv_label_create(lv_scr_act(), NULL);	// 在主屏幕创建一个标签
	lv_label_set_long_mode(label2, LV_LABEL_LONG_BREAK);		// 标签长内容框,保持控件宽度,内容过长就换行
	lv_obj_set_width(label2, 320);								// 设置标签宽度
	lv_label_set_recolor(label2, true);							// 使能字符命令重新对字符上色
	lv_label_set_text(label2, "路过人间HelloBug12345");// 设置显示文本
	lv_obj_align(label2, NULL, LV_ALIGN_CENTER, 0, -40);			// 对齐到中心偏下
	lv_obj_add_style(label2, LV_LABEL_PART_MAIN, &label_shadow_style2);		// 应用效果风格

段式数码字体Lable,0-9

	///
	///Label3 /
	///
	lv_obj_t * Label3 = lv_label_create(lv_scr_act(), NULL);	// 在主屏幕创建一个标签
	lv_label_set_long_mode(Label3, LV_LABEL_LONG_BREAK);		// 标签长内容框,保持控件宽度,内容过长就换行
	lv_obj_set_width(Label3, 320);								// 设置标签宽度
	lv_label_set_recolor(Label3, true);							// 使能字符命令重新对字符上色
	lv_label_set_text(Label3, "0123456789");					// 设置显示文本
	lv_obj_align(Label3, NULL, LV_ALIGN_CENTER, 0, 10);			// 对齐到中心偏下
	lv_obj_add_style(Label3, LV_LABEL_PART_MAIN, &label_shadow_style3);		// 应用效果风格

合并字体Lable演示

	///
	///Label4 /
	///
	lv_obj_t * Label4 = lv_label_create(lv_scr_act(), NULL);	// 在主屏幕创建一个标签
	lv_label_set_long_mode(Label4, LV_LABEL_LONG_BREAK);		// 标签长内容框,保持控件宽度,内容过长就换行
	lv_obj_set_width(Label4, 320);								// 设置标签宽度
	lv_label_set_recolor(Label4, true);							// 使能字符命令重新对字符上色
	lv_label_set_text(Label4, "路过人间123"MY_ICON_FONT1 MY_ICON_FONT2);// 设置显示文本
	lv_obj_align(Label4, NULL, LV_ALIGN_CENTER, 0, 60);			// 对齐到中心偏下
	lv_obj_add_style(Label4, LV_LABEL_PART_MAIN, &label_shadow_style4);		// 应用效果风格

八、编译下载验证验证

开发板接入电脑下载固件,效果如下

评论 28
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值