ESP32 ESP-IDF LVGL8 显示中文

news2025/1/15 14:39:17

陈拓 2022/12/15-2022/12/16

1. 开发环境

《ESP32 ESP-IDF LVGL8.3.3移植》

ESP32 ESP-IDF LVGL8.3.3移植_晨之清风的博客-CSDN博客ESP32 ESP-IDF LVGL8.3.3移植。https://blog.csdn.net/chentuo2000/article/details/128269394?spm=1001.2014.3001.5501

2. 使用LVGL自带的中文字库

字库文件

~/esp442/esp32_lvgl833/components/lvgl/src/font/lv_font_simsun_16_cjk.c

其中：

CJK是CJK Unified Ideographs的缩写，意思是“中日韩统一表意文字”，把分别来自中文、日文、韩文、越文中的本质、意义相同、形状一样或稍异的表意文字赋予相同编码，其中主要为汉字，也有仿汉字如日本国字、韩国独有汉字、越南的喃字等。

这个lv_font_simsun_16_cjk字库只有1000个常用字和部首偏旁。在

~/esp442/esp32_lvgl833/components/lvgl/src/lv_conf_internal.h

中有说明：

#ifndef LV_FONT_SIMSUN_16_CJK
    #ifdef CONFIG_LV_FONT_SIMSUN_16_CJK
        #define LV_FONT_SIMSUN_16_CJK CONFIG_LV_FONT_SIMSUN_16_CJK
    #else
        #define LV_FONT_SIMSUN_16_CJK            0  /*1000 most common CJK radicals*/
    #endif
#endif

1000个最常见的CJK字根（偏旁部首）

配置项目

idf.py menuconfig

1) 选择theme字号

2) 选择中文字库

使用自带的中文字库Simsun 16 CJK。

选择Enable Dejavu 16 Persian, Hebrew, Arabic letters是为了能通过后面的编译。

3) 选择双向文本

选择Support bidirectional text是为了能通过后面的编译。

使用LVGL自带的例子

~/esp442/esp32_lvgl833/components/lvgl/examples/widgets/label/lv_example_label_3.c

代码中有编译条件

#if LV_USE_LABEL && LV_BUILD_EXAMPLES && LV_FONT_DEJAVU_16_PERSIAN_HEBREW && LV_FONT_SIMSUN_16_CJK && LV_USE_BIDI

其中：LV_USE_LABEL和LV_BUILD_EXAMPLES是默认配置。其他3个条件就是我们在前面配置中所选择的。

修改main.c

添加头文件：

#include "examples/lv_examples.h"

修改create_demo_application函数

static void create_demo_application(void)
{
    lv_example_label_3();
}

修改main目录下的 CMakelists.txt

idf_component_register(SRCS "main.c" 
"../components/lvgl/examples/widgets/label/lv_example_label_3.c"                     
                    INCLUDE_DIRS ".")

编译、烧写
ST7789 320x240显示屏效果

操作细节见《ESP32 ESP-IDF LVGL8.3.3移植》

ESP32 ESP-IDF LVGL8.3.3移植_晨之清风的博客-CSDN博客ESP32 ESP-IDF LVGL8.3.3移植。https://blog.csdn.net/chentuo2000/article/details/128269394?spm=1001.2014.3001.5501

3. 自定义中文字库

介绍一个很好的学习LVGL的资源网站

http://lvgl.100ask.net/8.2/tools/fonts-zh-source.html

我们可以从这里找到很多免费的字库，网站有视频教你怎样使用。

3.1 使用Windows字库

选择字库

我们可以使用Windows带的字库：

例如，我们选择华文隶书。

复制粘贴所选字体到另一个目录，得到文件：

STLITI.TTF

使用lvgl官方在线转换工具

https://lvgl.io/tools/fontconverter

如图设置，点击Convert得到字库文件lv_font_stliti_24.c

选项说明

Name：字库名称lv_font_stliti_24

Size：字符大小24

Bpp：每个像素的比特（位），位数越大效果越好，字库尺寸越大。

Font compression：启用字体压缩（减小大小，但导致渲染速度变慢）

Horizontal subpixel rendering：水平子像素渲染（可能会提高字体质量，但会导致更大的字体库）

Try to use glyph color info from font to create grayscale icons：尝试使用字体中的字形颜色信息创建灰度图标。

由于灰色色调是通过透明度模拟的，所以仅在对比度背景上效果会很好。

详细说明见：

https://docs.lvgl.io/master/overview/font.html#subpixel-rendering

Range：选择字符范围，我们只选择了ASCII码表。可以选择多个范围，用空格分隔。

Symbols：如果在Range中选择全字库范围将得到一个很大的字库，占用很多空间。在项目中我们只用到少量中文，将这些中文写在Symbols中，这样生成的字库很小。

Include another font：包含另一个字库。

这个功能可以将不同的字库合并到一个字库中

具体的使用方法见：

https://www.bilibili.com/video/BV1Ya411r7K2/?p=15

3.2 在程序中使用生成的字库文件

将字库文件lv_font_stliti_24.c复制到font目录下

~/esp442/esp32_lvgl833/components/lvgl/examples/assets/font

修改main目录下的 CMakelists.txt

idf_component_register(SRCS "main.c" 
"../components/lvgl/examples/widgets/label/lv_example_label_3.c"
"../components/lvgl/examples/assets/font/lv_font_stliti_24.c"                     
                    INCLUDE_DIRS ".")

在代码中引用自定义字体

按照转换工具下面的说明，要在代码中添加对自定义字体的引用声明：

LV_FONT_DECLARE(lv_font_stliti_24);

修改lv_example_label_3.c 文件的lv_example_label_3函数

void lv_example_label_3(void)
{
    LV_FONT_DECLARE(lv_font_stliti_24);

    lv_obj_t * cz_label = lv_label_create(lv_scr_act());
    lv_label_set_recolor(cz_label, true);
    lv_label_set_text(cz_label, "温度: 18℃  湿度: 65%\n    #ff5151 晴##99cc33 到##2894ff 多云#");
    lv_obj_set_style_text_font(cz_label, &lv_font_stliti_24, 0);    
    lv_obj_set_width(cz_label, 310);
    lv_obj_align(cz_label, LV_ALIGN_LEFT_MID, 5, 0);
}