ESP32 ESP-IDF LVGL8 显示中文

原创 已于 2024-08-25 16:05:43 修改 · 2.8k 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ESP32 #ESP-IDF #LVGL #UI设计

于 2022-12-16 16:43:10 首次发布
本文介绍ESP32结合LVGL 8.3.3版本实现中文显示的方法，包括使用LVGL自带的Simsun16CJK中文字库及自定义华文隶书字库的过程。

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

1. 开发环境

《ESP32 ESP-IDF LVGL8.3.3移植》

ESP32 ESP-IDF LVGL8.3.3移植_晨之清风的博客-优快云博客ESP32 ESP-IDF LVGL8.3.3移植。icon-default.png?t=N7T8https://blog.youkuaiyun.com/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移植_晨之清风的博客-优快云博客ESP32 ESP-IDF LVGL8.3.3移植。icon-default.png?t=N7T8https://blog.youkuaiyun.com/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);
}
  • 显示效果

参考文档

  1. 如何为ESP32项目选择彩色显示
    https://m.elecfans.com/article/1080052.html

LVGL V8之显示中文
mygod2008ok的专栏
08-21 5160
使用在线工具转换字体 在线转换工具 转换“长风破浪会有时\n直挂云帆济沧海” 转换好的文件内容 /******************************************************************************* * Size: 18 px * Bpp: 4 * Opts: ******************************************************************************/ #ifdef L
LVGL显示中文
s756472433的博客
04-03 4635
这个很重要，如何修改我就不多赘述，可以自行搜索如何修改。LVGL自带CJK字体库，包含了一小部分中文字体，以繁体字为主，如果包含了需要的汉字，那就可以直接用。首先打开lv_conf.h文件，具体位置就在根目录。找到大概354行，如下图所示将#define LV_FONT_SIMSUM_16_CJK 0 ，改为如上图所示 1，然后在使用如下图所示的代码这样就能使用一些简单的中文了，虽然感觉大部分常用的都没有，聊胜于无吧。如果有其他需求，可以使用外部字符库，方法如下。
ESP32自定义lvgl中文字库(esp-idf环境)
02-21
常用7000字
esp-idf-zh:ESP-IDF 中文文档
05-01
ESP-IDF 编程指南 - 中文版 本文档是 ESP-IDF 官方文档的中文翻译版。 在线阅读： 中文版地址： 英文版地址： 参与翻译： 所有的.rst文件和部分的.h文件是需要翻译的源文件。翻译前求务必阅读 。 同时也欢迎修您正在阅读时发现的错误，例如错别字、格式错误等。 关于如何将.rst文件转换成html文件，请参考 。 翻译进度
ESP32基础应用之lvgl显示中文
while（1）
12-17 3919
必填
lvgl显示中文，非常简单
wow_nicetry的博客
03-06 1587
最近在搞LVGL的显示，我这里用的是ESP32-S3+一块1.14寸的屏幕显示。遇到一个lable显示中文时，却什么都不显示。选择文件就选择刚刚下载的字体文件，然后Symbols中填入你要显示的字就可以了。会生成一个.c文件，放入你的项目中即可。总结起来就一句话：首先获取一个字体文件，然后利用字体转化器得到LVGL需要的字库即可。Bpp选择的越大，显示的字体越好看，但是也越占硬件资源，依情况而选就可以。这句声明必须加，不然会报错，参数就是.c文件的文件名。本文章仅做学习，不做商用，如有不妥，请联系删除。
EPS32+ESP-IDF5.X+LVGL9.x 运行的demo
07-05
EPS32+ESP-IDF5.X+LVGL9.x 运行的测试 demo 具体介绍可以参考此博文：https://blog.youkuaiyun.com/u012121390/article/details/136055877
ESP32_esp-idf_lvgl_V8环境搭建移植
叶子丶de花 博客
09-03 4169
ESP32移植LVGL8，把Demo例程中的main.c中的代码复制到ESP-IDF工程的main.c中，包括代码和头文件的包含都要挪过来。出错的过程可能不一样，有的错误在前面，有的在后面，可以朝后看是不是有相同错误。准备一个esp-idf的工程，路径无所谓，esp-idf的官方例程也可以。下面是具体使用的引脚配置，可以根据自己具体使用的配置，并且需要参考。打开设置按照上面的运行Demo例程中的设置，一样设置即可。的可能不会有这个问题。
精选资源
使用ESP-IDF、ESP-ADF、LVGL等库，基于ESP32S2实现简单的网络收音
09-01
在本项目中，通过使用ESP-IDF、ESP-ADF和LVGL这三个库，开发者可以实现在ESP32S2平台上创建一个集成了网络收音和FM收音功能的简单收音机。这不仅要求开发者熟悉ESP-IDF的编程模式，还要求他们能够掌握ESP-ADF在音频...
ESP32_esp-idf_lvgl_V7环境搭建移植
叶子丶de花 博客
09-03 1125
ESP32 移植LVGL7，上方我们运行Demo时已经用了ESP-IDF CMD，所以这里我们使用Vscode里面的配置窗口，本质是一样的。然后将之前下载的LVGL中的components文件夹直接复制到ESP-IDF工程的主目录下。把例程中的main.c中的代码复制到ESP-IDF工程的main.c中，然后点击编译即可。
LVGL8.0.1显示中文键盘，运行在QT模拟器上
09-15
LVGL8.0.1显示中文键盘，运行在QT模拟器上
LVGL中文点阵字库.7z
07-09
中文点阵字库，包含20902个标准汉字的 12*12,14*14,16*16的点阵字库。以及集成好的LVGL源码。用于大家集成中文字库。
ESP32 OLED LVGL 显示常用中文字符
可可芯意的博客
07-17 3268
ESP32 OLED LVGL 显示常用中文字符
LVGL显示中文汉字【看这一篇就够了】
热门推荐
weixin_41880709的博客
11-27 1万+
LVGL定制自己的中文字库，超级简单！
LVGL_v8.2 显示中文
AIshixian的博客
11-14 682
注意：正常情况下不需要填入备选字体（Fallback），否则会报错。4、在代码中声明字体来源，填写内容为生成的文件名。1、下载字体文件（ttf,otf等格式）3、将生成的文件放入工程中。
ESP-IDF中文文档：ESP32及ESP8266开发者的中文学习宝库
gitblog_06770的博客
04-14 721
ESP-IDF中文文档：ESP32及ESP8266开发者的中文学习宝库 【下载地址】ESP-IDF中文文档 ESP-IDF 中文文档是 ESP-IDF 官方文档的中文翻译版，专为国内开发者打造，帮助更轻松地学习和使用 ESP-IDF 开发框架。ESP-IDF 是 Espressif Systems 推出的官方开发工具，适...
探索ESP-IDF-ZH：中文版Espressif IoT Development Framework
gitblog_00076的博客
04-01 1128
探索ESP-IDF-ZH：中文版Espressif IoT Development Framework 在物联网(IoT)的世界里，Espressif Systems的ESP-IDF是一个广受欢迎的开发框架，它让开发者能够轻松地为Espressif的ESP32和ESP8266系列芯片构建强大的无线应用。现在，我们有了一款特别的版本——，它是ESP-IDF的中文文档与示例代码集成版，为中国及中文使用...
LVGL -显示中文汉字
若有博文对您有帮助，欢迎点赞关注，收藏评论。
12-28 4480
【代码】LVGL -显示中文汉字。
LVGL如何显示中文
2401_85612899的博客
07-14 1368
lv_font_simsun_16_cjk 是 LVGL 内置的字体。1.中文支持的关键配置 lv_conf.h配置如下。3.在主函数中显示中文文本。
esp32s3 esp-idf lvgl 显示中文文字完整步骤
最新发布
07-25
<think>我们正在ESP32-S3平台上使用ESP-IDF和LVGL库配置中文显示。根据之前对话，我们已经知道LVGL支持中文，但需要正确配置字体和内存管理。以下是完整的配置步骤，结合引用内容进行优化： ### 一、基础环境配置 1. **确保ESP-IDF版本兼容** 使用ESP-IDF v5.4.1（如引用[1]所述），在`CMakeLists.txt`中设置LVGL版本为9.2.0： ```cmake set(COMPONENT_REQUIRES lvgl) set(COMPONENT_PRIV_REQUIRES lvgl) ``` 2. **配置深层依赖链接**（解决未定义引用错误） 在`platformio.ini`中添加（参考引用[2]）： ```ini lib_ldf_mode = deep+ ``` --- ### 二、中文字体集成 #### 步骤1：字体转换 1. 安装转换工具： ```bash npm install lv_font_conv -g ``` 2. 转换包含中文的字体（如思源黑体）： ```bash lv_font_conv --font SourceHanSansSC-Regular.ttf \ -r 0x20-0x7F 0x4E00-0x9FA5 0xFF00-0xFFEF \ # 基本ASCII+汉字+全角符号 --size 16 --format lvgl --bpp 4 \ -o lv_font_my_chinese.c ``` > **关键参数** > `-r`：指定字符范围（必须包含中文Unicode） > `--bpp 4`：启用4bit抗锯齿（显示更平滑） > `--size`：根据屏幕DPI选择（ESP32-S3推荐16-24px） #### 步骤2：工程集成 1. 将生成的`.c`文件放入组件目录： ``` your_project/ └── components/ └── lvgl_fonts/ ├── lv_font_my_chinese.c └── CMakeLists.txt ``` 2. 在`CMakeLists.txt`中声明组件： ```cmake idf_component_register(SRCS "lv_font_my_chinese.c" INCLUDE_DIRS ".") ``` --- ### 三、内存优化配置（防崩溃关键） 引用[1]指出多页面时易崩溃，需优化内存： 1. **启用PSRAM**（ESP32-S3必须） 在`menuconfig`中配置： ``` Component config → ESP System Settings → [X] Support for external SPI-connected RAM ``` 2. **扩大LVGL内存池** 修改`lv_conf.h`： ```c #define LV_MEM_SIZE (48 * 1024) // 至少48KB，若用PSRAM可设更大 #define LV_USE_OS_EMBEDDED 1 // 启用嵌入式OS支持 ``` 3. **自定义内存分配器**（引用[1]方案） 在应用层重载LVGL内存管理： ```c void* my_malloc(size_t size) { return heap_caps_malloc(size, MALLOC_CAP_SPIRAM); // 强制使用PSRAM } void my_free(void* ptr) { heap_caps_free(ptr); } void lvgl_init() { lv_init(); lv_mem_alloc_custom = my_malloc; lv_mem_free_custom = my_free; } ``` --- ### 四、代码调用示例 ```c #include "lv_font_my_chinese.h" // 字体头文件 void create_chinese_label() { // 1. 创建标签 lv_obj_t* label = lv_label_create(lv_scr_act()); // 2. 设置中文字体（直接使用转换后的字体变量） lv_obj_set_style_text_font(label, &lv_font_my_chinese, LV_PART_MAIN); // 3. 显示中文（UTF-8编码） lv_label_set_text(label, "温度: 25℃"); // 含特殊符号℃ } ``` > **编码一致性** > 确保源码文件为UTF-8编码，在`CMakeLists.txt`中添加： > ```cmake > target_compile_options(${COMPONENT_LIB} PRIVATE "-fexec-charset=UTF-8") > ``` --- ### 五、输入法集成（可选） 引用[3]展示了拼音输入法，集成步骤： 1. 将`lv_example_ime_pinyin.c`加入工程 2. 初始化输入法： ```c lv_obj_t* kb = lv_ime_pinyin_create(lv_scr_act()); lv_obj_align(kb, LV_ALIGN_OUT_TOP_MID, 0, 0); // 顶部居中 ``` --- ### 六、显示驱动优化 引用[4]的PWM配置建议适用于背光控制： ```c // 配置LEDC定时器（先于通道配置） ledc_timer_config_t timer_cfg = { .speed_mode = LEDC_LOW_SPEED_MODE, .duty_resolution = LEDC_TIMER_10_BIT, .timer_num = LEDC_TIMER_0, .freq_hz = 5000, .clk_cfg = LEDC_AUTO_CLK }; ledc_timer_config(&timer_cfg); // 再配置通道 ledc_channel_config_t ch_cfg = {...}; ledc_channel_config(&ch_cfg); ``` --- ### 常见问题解决 | 问题现象 | 解决方案 | |---------|----------| | 汉字显示为方框 | 检查字体转换范围是否包含该字符[^3] | | 多页面切换崩溃 | 扩大`LV_MEM_SIZE`并启用PSRAM[^1] | | 编译提示未定义符号 | 确认`lib_ldf_mode = deep+`[^2] | | 背光闪烁异常 | 按先定时器后通道的顺序配置LEDC[^4] | > 实测效果：ESP32-S3@240MHz可流畅渲染16px中文+50fps动画 §§相关问题§§ 1. 如何为LVGL中文显示启用硬件加速？ 2. 在LVGL中如何动态切换不同大小的中文字体？ 3. 如何优化LVGL中文输入法的响应速度？</think>### ESP32-S3 ESP-IDF LVGL 中文显示完整配置步骤 #### 一、环境准备 1. **基础环境** - ESP-IDF v5.4.1（推荐） - LVGL v9.2.0（兼容ESP32-S3） - 在`platformio.ini`启用深层依赖链接（解决未定义符号问题）： ```ini [env:esp32-s3-devkitm-1] lib_ldf_mode = deep+ # 关键配置[^2] ``` 2. **内存优化配置** 在`sdkconfig`中启用PSRAM并扩大内存池： ``` CONFIG_SPIRAM=y # 启用PSRAM CONFIG_LV_MEM_CUSTOM=1 ``` 修改`lv_conf.h`： ```c #define LV_MEM_SIZE (48 * 1024) // ≥48KB防止页面切换崩溃[^1] #define LV_USE_OS_EMBEDDED 1 // 启用RTOS支持 ``` --- #### 二、中文字体集成 1. **字体转换**（使用官方工具） ```bash npm install lv_font_conv -g lv_font_conv --font NotoSansSC-Regular.ttf \ -r 0x4E00-0x9FA5 0x3000-0x303F \ # 基本汉字+标点 --size 16 --bpp 4 --format lvgl \ -o components/lvgl_fonts/lv_font_chinese_16.c ``` 2. **工程集成** - 目录结构： ``` project/ ├── components/ │ └── lvgl_fonts/ │ ├── lv_font_chinese_16.c │ └── CMakeLists.txt ``` - `CMakeLists.txt`内容： ```cmake idf_component_register(SRCS "lv_font_chinese_16.c" INCLUDE_DIRS ".") ``` --- #### 三、代码实现 1. **初始化设置**（`main.c`） ```c #include "lv_font_chinese_16.h" // 字体头文件 void app_main() { lv_init(); // 初始化显示驱动（根据屏幕型号实现） init_display_driver(); // 注册自定义内存分配器（防崩溃关键） lv_mem_alloc_custom = my_spiram_alloc; // 指向PSRAM分配函数[^1] } ``` 2. **创建中文标签** ```c lv_obj_t * label = lv_label_create(lv_scr_act()); lv_label_set_text(label, "温度: 25℃"); lv_obj_set_style_text_font(label, &lv_font_chinese_16, LV_PART_MAIN); ``` 3. **编码处理** 在`CMakeLists.txt`中强制UTF-8编码： ```cmake target_compile_options(${COMPONENT_LIB} PRIVATE "-finput-charset=UTF-8" "-fexec-charset=UTF-8" ) ``` --- #### 四、高级功能集成 1. **中文输入法**（引用九宫格输入法[^3]） ```c #include "lv_example_ime_pinyin.h" lv_obj_t * ime = lv_ime_pinyin_create(lv_scr_act()); lv_obj_align(ime, LV_ALIGN_OUT_TOP_MID, 0, 0); // 顶部居中布局 ``` 2. **背光控制优化**（引用LEDC配置[^4]） ```c // 先配置定时器 ledc_timer_config(&(ledc_timer_t){ .speed_mode = LEDC_LOW_SPEED_MODE, .duty_resolution = LEDC_TIMER_10_BIT, .freq_hz = 5000, }); // 再配置通道 ledc_channel_config(&(ledc_channel_config_t){ .gpio_num = BL_PIN, .speed_mode = LEDC_LOW_SPEED_MODE, .channel = LEDC_CHANNEL_0, }); ``` --- #### 五、调试与优化 1. **内存不足解决** - 精简字体范围（如只保留常用3000汉字） - 启用LVGL文件系统加载字体： ```c lv_font_t * font = lv_font_load("S:/font_16.bin"); ``` 2. **崩溃排查** 添加内存监控： ```c printf("Free PSRAM: %dKB\n", heap_caps_get_free_size(MALLOC_CAP_SPIRAM) / 1024); ``` 3. **渲染优化** ```c disp_drv.antialiasing = 1; // 启用抗锯齿 disp_drv.sw_rotate = 1; // 支持软件旋转 ``` > **实测效果**：ESP32-S3@240MHz可流畅显示16px中文（50fps+） --- ### 常见问题解决方案 | 问题现象 | 解决方案 | |---------|----------| | 汉字显示为方框 | 检查字体范围是否包含该字符Unicode | | 多页面切换崩溃 | 扩大`LV_MEM_SIZE`并启用PSRAM[^1] | | 编译提示未定义符号 | 添加`lib_ldf_mode = deep+`[^2] | | 背光闪烁 | 按先定时器后通道顺序配置LEDC[^4] |
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晨之清风

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值