正文

esp32基础应用之lvgl显示中文(代码片段)

while(1)  while(1)  2022-12-19  304

关键词：

文章目录

1 工程简介
2 工程实现
3 存在问题

1 工程简介

该工程在《ESP32基础应用之LVGL基础》之上实现中文的显示。
参考文章

《ESP32 IDF LVGL8.0 flash 外部字库显示中文显示》

2 工程实现

2.1 制作字库

使用软件LvglFontToolV0.4自作二进制字库文件。

在电脑（C:\\Windows\\Fonts）找到合适的字体，并复制到桌面
打开 LvglFontToolV0.4 软件
最后获得两个文件，并查看myFont.bin大小，好后续为字库分配分区表大小。

2.2 为字库自作分区表

分区表知识可参考乐鑫官网《API 指南 — 分区表》

在官方例程中复制一份自定义分区表到lvgl工程中

修改分区表中的内容后如下

# Name,   Type, SubType, Offset,  Size, Flags
# Note: if you have increased the bootloader size, make sure to update the offsets to avoid overlap
nvs,        data, nvs,      0x9000,  0x6000,
phy_init,   data, phy,      0xf000,  0x1000,
factory,    app,  factory,  0x10000, 1M,
font,    data, 0x40,             , 2M,  //type选择data；SubType自定义（大于0x3F）；Size根据字库大小合理定义

在ESP32配置菜单中选择自定义分区表

2.3 将字库移植到lvgl工程中

将字库myFont.bin放置到lvgl工程目录下

2. 将 myFont.c 放到合适的位置（注意需要将myFont.c添加到CMakeLists.txt）

2.4 将字库myFont.bin烧录到分区表中

命令esptool.py --chip esp32 --port COM4 --baud 115200 write_flash -z 0x110000 myFont.bin
注意：烧录位置0x110000 可以通过自定义分区表计算，也可以在串口打印数据中查看

2.5 编写程序测试

修改myFont.c以适配工程，

/*
*---------------------------------------------------------------
*                        Lvgl Font Tool                         
*                                                               
* 注:使用unicode编码                                              
* 注:本字体文件由Lvgl Font Tool V0.4 生成                          
* 作者:阿里(qq:617622104)                                         
*---------------------------------------------------------------
*/
#include "main.h"
#include "esp_partition.h"
#include "lvgl/lvgl.h"![在这里插入图片描述](https://img-blog.csdnimg.cn/9882e48826b24e988d12e61d7ad04e21.png)

#include "lvgl_helpers.h"

#define TAG "myFont.c"

typedef struct
    uint16_t min;
    uint16_t max;
    uint8_t  bpp;
    uint8_t  reserved[3];
x_header_t;
typedef struct
    uint32_t pos;
x_table_t;
typedef struct
    uint8_t adv_w;
    uint8_t box_w;
    uint8_t box_h;
    int8_t  ofs_x;
    int8_t  ofs_y;
    uint8_t r;
glyph_dsc_t;


static x_header_t __g_xbf_hd = 
    .min = 0x0020,
    .max = 0x9fa0,
    .bpp = 2,
;![在这里插入图片描述](https://img-blog.csdnimg.cn/83af052dcf9a43bf942052986a0a4715.png)

static uint8_t __g_font_buf[144];//如bin文件存在SPI FLASH可使用此buff

esp_partition_t* partition_res=NULL;

static uint8_t *__user_font_getdata(int offset, int size)
    //如字模保存在SPI FLASH, SPIFLASH_Read(__g_font_buf,offset,size);
    //如字模已加载到SDRAM,直接返回偏移地址即可如:return (uint8_t*)(sdram_fontddr+offset);
    static uint8_t first_in = 1;  
    if(first_in==1)
          
        partition_res=esp_partition_find_first(0x01,0x40,NULL);//这个函数第一个参数是我们分区表的第四行的，第二列的参数，第二个是第三列的值
        first_in=0;
        if (partition_res == NULL)
        
            ESP_LOGI(TAG,"Failed to open file for reading\\n");
            return NULL;
        else
             ESP_LOGI(TAG,"Successfully open file for reading\\n");
        
    
    esp_err_t res=esp_partition_read(partition_res,offset,__g_font_buf,size);//读取数据
    if(res!=ESP_OK)
    
        ESP_LOGI(TAG,"Failed to reading\\n");
        
    return __g_font_buf;

static const uint8_t * __user_font_get_bitmap(const lv_font_t * font, uint32_t unicode_letter) 
    if( unicode_letter>__g_xbf_hd.max || unicode_letter<__g_xbf_hd.min ) 
        return NULL;
    
    uint32_t unicode_offset = sizeof(x_header_t)+(unicode_letter-__g_xbf_hd.min)*4;
    uint32_t *p_pos = (uint32_t *)__user_font_getdata(unicode_offset, 4);
    if( p_pos[0] != 0 ) 
        uint32_t pos = p_pos[0];
        glyph_dsc_t * gdsc = (glyph_dsc_t*)__user_font_getdata(pos, sizeof(glyph_dsc_t));
        return __user_font_getdata(pos+sizeof(glyph_dsc_t), gdsc->box_w*gdsc->box_h*__g_xbf_hd.bpp/8);
    
    return NULL;

static bool __user_font_get_glyph_dsc(const lv_font_t * font, lv_font_glyph_dsc_t * dsc_out, uint32_t unicode_letter, uint32_t unicode_letter_next) 
    if( unicode_letter>__g_xbf_hd.max || unicode_letter<__g_xbf_hd.min ) 
        return NULL;
    
    uint32_t unicode_offset = sizeof(x_header_t)+(unicode_letter-__g_xbf_hd.min)*4;
    uint32_t *p_pos = (uint32_t *)__user_font_getdata(unicode_offset, 4);
    if( p_pos[0] != 0 ) 
        glyph_dsc_t * gdsc = (glyph_dsc_t*)__user_font_getdata(p_pos[0], sizeof(glyph_dsc_t));
        dsc_out->adv_w = gdsc->adv_w;
        dsc_out->box_h = gdsc->box_h;
        dsc_out->box_w = gdsc->box_w;
        dsc_out->ofs_x = gdsc->ofs_x;
        dsc_out->ofs_y = gdsc->ofs_y;
        dsc_out->bpp   = __g_xbf_hd.bpp;
        return true;
    
    return false;

//FangSong_GB2312,,-1
//字模高度：18
//XBF字体,外部bin文件
lv_font_t myFont = 
    .get_glyph_bitmap = __user_font_get_bitmap,
    .get_glyph_dsc = __user_font_get_glyph_dsc,
    .line_height = 18,
    .base_line = 0,
;

在屏幕中显示中文

#include "lvgl/lvgl.h"
#include "lvgl_helpers.h"
#include "esp_partition.h"
LV_FONT_DECLARE(myFont);//引入字库
static lv_obj_t * tv;
static lv_style_t style_title;

void fun(void)

    tv = lv_tabview_create(lv_scr_act(), NULL);   //以屏幕为父控件创建选项卡
    lv_obj_t * label = lv_label_create(tv, NULL);
    lv_style_init(&style_title);
    lv_style_set_text_font(&style_title, LV_STATE_DEFAULT, &myFont);
    lv_obj_add_style(label, LV_LABEL_PART_MAIN, &style_title);
    lv_obj_set_pos(label, 100,100);
    lv_label_set_text(label ,"你好世界2022-12-17");

3 存在问题

文件之间的依赖行，即找不到所需的文件，这里要研究CMakeLists.txt文件
显示中文会很慢。

esp32基础应用之lvgl基础(代码片段)

文章目录1实验目的1.1参考文章2实验工具3准备工作3.1搭建ESP32开发环境3.2克隆lv_port_esp32工程4配置lv_port_esp32工程5实验验证6使用过程遇到的问题6.1触摸功能点击屏幕位置不对1实验目的本实验为使用ESP32实现LVGL（轻量级的嵌入... 查看详情

基于arduino的esp32学习笔记lvgl文件系统移植，中文字库和图片显示(代码片段)

...LVGL文件系统，读取SD卡中的中文字库和图片，并显示在屏幕上硬件准备ESP-WROOM-32E开发板ST7789240x2401.3寸SPI接口LCD屏16位色深RGB565SD卡插槽模查看详情

基于arduino的esp32学习笔记lvgl文件系统移植，中文字库和图片显示(代码片段)

...LVGL文件系统，读取SD卡中的中文字库和图片，并显示在屏幕上硬件准备ESP-WROOM-32E开发板ST7789240x2401.3寸SPI接口LCD屏16位色深RGB565SD卡插槽模块和SD卡一张软件准备VSCODE+PlatformIO各模块之间的连线可以看下我之前的博客相关... 查看详情

基于arduino的esp32学习笔记lvgl文件系统移植，中文字库和图片显示(代码片段)

littlevglesp32学习笔记①移植最新的lvgl版本到安信可esp32c3模组，显示一个二维码。（附带源码）(代码片段)

...0c;请留言，本人及时更改。系列一：ESP32系列模组基础学习系列笔记1、爬坑学习新旅程，虚拟机搭建esp32开发环境，打印“HellowWorld”。2、巧用eclipes编辑器，官方教程查看详情

esp32基础项目之资讯显示（更新中）

文章目录1项目简介2项目开发---测试阶段2.1搭建LVGL开发环境2.2连接网络2.2.1连接wifi2.3获取天气数据2.3.x还没解决的问题2.4获取网络时间SNTP1项目简介学习ESP32也有段时间了，想着用ESP32做一个综合性的小项目。即可进一步提升... 查看详情

esp32入门基础之sntp时间显示(代码片段)

文章目录1实验简介2实验分析1实验简介在esp-idf合集下就有该该工程，目录如下Espressif\\frameworks\\esp-idf-v4.4.2\\examples\\protocols\\sntp。在此工程直接编译烧录即可。2实验分析程序分析如下，注意以下程序经过增删改#include<st... 查看详情

esp32基础应用之使用两个esp32通过阿里云物联网平台实现相互通信(代码片段)

...云物联网平台在设备管理下创建两个设备，参考ESP32基础应用之ESP32与阿里云物联网平台实现数据互传（MQTT协议）在规则引擎下创建云产品流转，包括数据源、数据目的、解析器，参考云产品流转概述创建数据... 查看详情

esp32基础应用之http服务器(代码片段)

文章目录1HTTP服务器简介2ApiPost测试工具3HTTP服务器实验3.1ApiPost之GET测试3.2ApiPost之POST测试3.3ApiPost值PUT测试参考资料：esp32http服务器编程指南1HTTP服务器简介HTTP服务器一般指Web服务器，是指驻留于因特网上某种类型计算机... 查看详情

esp32基础应用之freertos使用(代码片段)

文章目录前言1FreeRTOS任务的使用1.1任务状态1.2任务优先级1.3创建任务2FreeRTOS事件标志组的使用参考资料：《STM32F103FreeRTOS开发手册V1.1.pdf》前言1FreeRTOS任务的使用1.1任务状态FreeRTOS中的任务有运行态、就绪态、阻塞态、挂起态... 查看详情

乐鑫esp32移植lvgl7.10(代码片段)

...对ESP-IDF开发有一个总体的认识，比我们后续学习打下基础&#x 查看详情

littlevglesp32学习笔记①移植最新的lvgl版本到安信可esp32c3模组，显示一个二维码。（附带源码）(代码片段)

...0c;请留言，本人及时更改。系列一：ESP32系列模组基础学习系列笔记1、爬坑学习新旅程，虚拟机搭建esp32开发环境，打印“HellowWorld”。2、巧用eclipes编辑器，官方教程在在Windows下搭建esp32开发环境，打印“... 查看详情

littlevglesp32学习笔记①移植最新的lvgl版本到安信可esp32c3模组，显示一个二维码。（附带源码）(代码片段)

lvgl|lvgl教程之修改lvgl中lv_dropdown(下拉列表)的选项文字(大小样式显示中文)(代码片段)

...表允许用户从列表中选择一个选项。下拉列表默认关闭并显示单个值或预定义文本。激活后（通过单击下拉列表），将创建一个列表，用户可以从中选择一个选项。当用户选择一个新值时，该列表将再次被删... 查看详情

esp32+st7789/ili9341运行lvgl例程，依赖esp-idf编译lv_port_esp32官方demo(代码片段)

...BRAM就足以满足简单的用户界面。LVGL可以驱动单色OLED、TFT显示器、监视器或任何其他显示器。c代码使其可在任何平台上使用，例如NXPLPC或iMX、STM32、查看详情

esp32spilcdili9488移植lvgl8.0(代码片段)

...对ESP-IDF开发有一个总体的认识，比我们后续学习打下基础&#x 查看详情

燃起来esp32移植lvgl最新版本8.2(代码片段)

...对ESP-IDF开发有一个总体的认识，比我们后续学习打下基础&#x 查看详情