ESP32开发学习 LVGL Littlevgl 加载外部SD卡字库显示

短命女 2022-09-03 03:26 2034阅读 0赞

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70][]

本文开发环境：  
Visual Studio Code V1.58.2

LVGL版本 V7.10.0

芯片平台：ESP32

IDF库版本：4.3.0

IDF TOOLS编译工具链版本：2.9

本文软件基于LVGL官方提供的ESP32工程lv\_port\_esp32修改而来

LVGL ESP32官方地址：[https://github.com/lvgl/lv\_port\_esp32][https_github.com_lvgl_lv_port_esp32]

开发板平台基于HelloBug ESP32开发板

开发板购买链接：[https://hellobug.taobao.com/][https_hellobug.taobao.com]

扩展阅读：

[ESP32开发学习 LVGL Littlevgl 使用文件系统][ESP32_ LVGL Littlevgl]

[ESP32开发学习 LVGL Littlevgl 使用文件系统加载PNG解码显示][ESP32_ LVGL Littlevgl _PNG]

[LVGL Littlevgl 解码显示JPG图片三种方式JPG\_SJPG\_C Array][LVGL Littlevgl _JPG_JPG_SJPG_C Array]

[littleVGL LVGL学习使用lv\_font\_conv离线工具 Font字体 FontAwesome图标字体的使用][littleVGL LVGL_lv_font_conv_ Font_ FontAwesome]

# 一、转换字体到Bin文件 #

转换工具这里使用的是LvglFontTool V0.4。

下载地址：[http://armbbs.cn/forum.php?mod=viewthread&tid=99387&highlight=LvglFontTool][http_armbbs.cn_forum.php_mod_viewthread_tid_99387_highlight_LvglFontTool]

下载后打开文件夹中的LvglFontTool.exe

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 1][]

打开软件后就可以开始制作字体了。

1、单击选择字体；2、选择你电脑中的一个字体文件；3、设置字体高度（这里的高度就是汉字在液晶上占用像素的高度）；4、单击确认

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 2][]

接下来单击下方按钮加入所有字体，如果你不要那么多，也可以直接在文本框内输入你要用到的所有字体，这样字库会小一点，16点高度全部字体的bin文件大概1.2M左右，选择LVGL版本，根据你的LVGL版本选择，类型选择外部bin文件，输入你的字体名字，单击开始转换。![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 3][]

单击开始转换会弹出你需要保存BIN文件的位置，单击选择文件夹，开始转换![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 5][]

转换完成后会在你刚才选择的目录下生成两个文件。myFont.bin myFont.c

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 6][]

将myFont.bin文件复制到你的SD卡里面，插入开发板，将myFont.c复制到你的LVGL工程目录：components\\lvgl\\lvgl\\src\\lv\_font\\文件夹下，文件结构如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 7][]

字体就制作好了，当然你也可以制作多个字体，因为是存在SD卡，大小不受限制，你可以制作多个不同字体，分别命名，一样的将bin文件放入SD卡，.c文件放入上图目录中。

# 二、修改读取字体接口 #

我们制作好了字库，也有了调用的.C文件，但还不能使用，要改写myFont.c文件中的读取字库接口函数，如果多个字库的话，更改方法相同。打开myFont.c，修改\_\_user\_font\_getdata函数如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 8][]

这里使用的是LVGL文件系统读取SD卡。没有实现的朋友参考我的另一篇文章：[ESP32开发学习 LVGL Littlevgl 使用文件系统][ESP32_ LVGL Littlevgl]

# 三、编译测试代码 #

接下来调用中文字库。打开你的工程main.c文件，定义部分下面添加声明字体。

LV_FONT_DECLARE(myFont);					// 字体声明

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 9][]

在lvgl初始化后添加代码

static lv_style_t label_style;									// 创建一个风格
    	lv_style_init(&label_style);									// 初始化风格
    	lv_style_set_text_font(&label_style, LV_STATE_DEFAULT, &myFont);// 设置风格的字体
    
    	lv_obj_t * textlabel = lv_label_create(lv_scr_act(), NULL);			// 在主屏幕创建一个标签
    	lv_label_set_long_mode(textlabel, LV_LABEL_LONG_BREAK);				// 标签长内容框，保持控件宽度，内容过长就换行
    	lv_obj_set_width(textlabel, 320);									// 设置标签宽度
    	lv_label_set_recolor(textlabel, true);								// 使能字符命令重新对字符上色
    	lv_label_set_text(textlabel, "我是SD卡字库哦,我在SD卡里面123abcABC");	// 设置显示文本
    	lv_obj_align(textlabel, NULL, LV_ALIGN_CENTER, 0, -60);				// 对齐到中心偏下
    	lv_obj_add_style(textlabel, LV_LABEL_PART_MAIN, &label_style);		// 应用效果风格

编译下载测试。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 10][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70]: /images/20220829/22d20091159446388390b42b82f51331.png
[https_github.com_lvgl_lv_port_esp32]: https://github.com/lvgl/lv_port_esp32
[https_hellobug.taobao.com]: https://hellobug.taobao.com/
[ESP32_ LVGL Littlevgl]: https://blog.csdn.net/cnicfhnui/article/details/118972851
[ESP32_ LVGL Littlevgl _PNG]: https://hellobug.blog.csdn.net/article/details/119318468
[LVGL Littlevgl _JPG_JPG_SJPG_C Array]: https://blog.csdn.net/cnicfhnui/article/details/119377567
[littleVGL LVGL_lv_font_conv_ Font_ FontAwesome]: https://blog.csdn.net/cnicfhnui/article/details/113665913
[http_armbbs.cn_forum.php_mod_viewthread_tid_99387_highlight_LvglFontTool]: http://armbbs.cn/forum.php?mod=viewthread&tid=99387&highlight=LvglFontTool
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/170f372041174186bf90043d352cc513.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/2b41f203b8e048aea338ca4f1885cdfa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/bc4760275db74e8b94cb3348c8f58fd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/313d1116249d46bc874d00eef0afc79a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 5]: /images/20220829/62115c07a1f4460897fa8bd27ee81f95.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 6]: /images/20220829/9b91a13f8ca64107acd6a0c29fb5c888.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 7]: /images/20220829/8c4b860c065443bb84e0d010d81b569c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 8]: /images/20220829/1b28808cc12b48f9b98aed0f005ec25a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 9]: /images/20220829/f6829da9dcc9406d94844644adaa723f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 10]: /images/20220829/056911b042b44d96be059b96a5abdd66.png