正文 

当前位置： 首页 > java > java教程

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

张竞豪 张竞豪     2022-12-04     314

关键词：

前言

本文的目的是为了给将要制作的ESP32手环做技术储备

记录移植LVGL文件系统，制作LVGL中文字库，将图片和字库放在SD卡里，通过移植好的LVGL文件系统，读取SD卡中的中文字库和图片，并显示在屏幕上

硬件准备

  • ESP-WROOM-32E开发板
  • ST7789 240x240 1.3寸 SPI接口LCD屏 16位色深RGB565
  • SD卡插槽模块和SD卡一张

软件准备

  • VSCODE+PlatformIO

各模块之间的连线可以看下我之前的博客

相关链接

文件系统移植相关

lvgl官方文件系统移植文档，已经讲的比较清楚了

https://docs.lvgl.io/master/overview/file-system.html

lvgl官方给的移植好的范例

https://github.com/lvgl/lv_fs_if/blob/master/lv_fs_fatfs.c

雉晖君的小项目，我基于雉晖君移植好的文件系统函数，但是我用的lvgl版本是8.0.0，还是要稍微改下才能用

https://github.com/peng-zhihui/HoloCubic

中文字体相关

lvgl官方文档

https://docs.lvgl.io/master/overview/font.html

lvgl官方离线字库制作软件

https://github.com/lvgl/lv_font_conv

离线字库制作软件使用方法相关博客

https://blog.csdn.net/cnicfhnui/article/details/113665913

图片相关

lvgl官方文档

https://docs.lvgl.io/master/overview/image.html

图片制作与读取只用看官方文档就够了，制作图片可以使用官方的在线图片制作工具

https://lvgl.io/tools/imageconverter

LVGL文件系统移植

为了使LVGL可以通过SD卡读取中文字体和图片，需要移植LVGL文件系统

在此之前需要建立一个已经移植好lvgl的ESP32 arduino工程，我已经移植好了一个工程

然后参考雉晖君的小项目，我也对SD卡，屏幕的等做了面向对象的封装，然后把雉晖君移植好的

lv_port_fatfs.c和lv_port_fatfs.h放到我的工程下面，尝试编译，中间发现会出错，继续查看官方文档改改之后编译就通过了，具体可以看我的代码

中文字体显示

首先要看完lvgl的官方文档，要显示中文字体首先要建立自己的中文字库，字库是一个二进制bin文件，放在SD卡里，使用的时候通过文件系统读取放在SD卡里的中文字库

所以要显示中文字体，最重要的是通过官方给的工具，制作中文字库，具体制作方法可以参考上文的相关博客，下面是对制作方法的简单介绍：

安装nodejs，然后根据github上lv_font_conv仓库的说明文档，输入命令安装lv_font_conv

https://github.com/lvgl/lv_font_conv

或者从github上clone官方的lv_font_conv工具，然后根据上文相关博客中的方法安装lv_font_conv

打开控制面板，搜索字体，查找到自己电脑字体所在的位置，然后拷贝一份你想要的字体放在方便的位置

也就是下图的STXIHEI.TTF文件

然后打开cmd，输入如下指令

lv_font_conv --no-compress --format bin --font F:\\ESP32\\font\\ttf\\STXIHEI.TTF -o F:\\ESP32\\font\\ttf\\myfont.bin --bpp 4 --size 30 --symbols 中国智造

要注意一定要加入参数–no-compress，否则生成字库会失败

–format bin是生成bin格式的字库，用来存放在SD卡中

–font F:\\ESP32\\font\\ttf\\STXIHEI.TTF是想要转化字体文件的存放位置

-o F:\\ESP32\\font\\ttf\\myfont.bin是生成字库的路径和生成字库名

–bpp 4 --size 30抗锯齿等级和字体大小

–symbols 中国智造 “中国智造”是要生成的字，你的字库里只会包含这些字

然后把生成的bin文件放在SD卡中

/* 字体测试*/
    lv_font_t *my_font;
    my_font = lv_font_load("S:/myfont.bin");
    if (my_font == NULL)
    
        Serial.println("font load failed");
    

    static lv_style_t font_style;
    lv_style_init(&font_style);
    lv_style_set_text_font(&font_style, my_font);

    lv_obj_t *label_zh = lv_label_create(lv_scr_act());
    lv_obj_align(label_zh, LV_ALIGN_BOTTOM_MID, 0, 0);
    lv_obj_add_style(label_zh, &font_style, 0);
    lv_label_set_text(label_zh, "中国智造");

然后在setup函数中输入以下代码，测试是否可以显示中文，试验成功

显示图片

显示图片主要是使用官方提供的在线图片生成工具

https://lvgl.io/tools/imageconverter

普通的png，jpg格式的图片占用空间太大，还需要编解码，最好的方式是通过在线图片生成工具转化成lvgl所需要的格式

indexed 16 colors或者indexed 4 colors是最佳的，虽然这样图片只有16种颜色或者4中颜色，但是可以大幅减少图片所占用的存储空间

图片有两种存储方式，一种是转化成.c文件存放在rom里，这种方式读取图片并显示会比较快，但是rom比较小存放不了几张，还有一种是转化成bin二进制文件存放在SD卡里，这样读取速度会比较慢，但是可以存放大一点的图片

在我的项目中，需要用到动画，也有静态的图片，计划把动画的每一帧图片都以 .c文件的形式存放在rom里，提高读取速度，静态的图片对时间的要求没有很高，就存在SD卡里

选了一张罗小黑的图片进行转化，分别转化成bin格式和c格式，进行测试，具体代码见本文附带的工程文件

二进制形式图片读取并显示

    lv_obj_t *img1 = lv_img_create(lv_scr_act());
    lv_img_set_src(img1, "S:/abc.bin");
    lv_obj_align(img1, LV_ALIGN_CENTER, 0, 0);

要注意的是在lv_conf.h文件中必须要把LV_IMG_CACHE_DEF_SIZE设为1以上的数字，这个决定了打开图片文件的数量

#define LV_IMG_CACHE_DEF_SIZE 1

c代码格式图片读取并显示

    lv_obj_t* img1 = lv_img_create(lv_scr_act());
    lv_img_set_src(img1, &abc);
	lv_obj_align(img1,LV_ALIGN_CENTER, 0, 0);

要注意的是lvgl毕竟是c语言，而arduino是c++，如果在c++里直接写上面的代码会导致编译出错，具体解决方案可以看本文附带的工程文件

最终中文显示和图片显示的效果如下

基于arduino的esp32学习笔记tft_espi和lvgl库使用笔记(代码片段)

...的目的是为了给将要制作的ESP32手环做技术储备记录基于arduino的ESP32驱动TFT-LCD屏幕的配置过程，并且进一步使用LVGL这个GUI框架硬件准备ST7789240x2401.3寸SPI接口LCD屏16位色深RGB565ESP-WROOM-32E开发板ESP32的数据手册链接https://download.c... 查看详情

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

前言本文的目的是为了给将要制作的ESP32手环做技术储备记录移植LVGL文件系统，制作LVGL中文字库，将图片和字库放在SD卡里，通过移植好的LVGL文件系统，读取SD卡中的中文字库和图片，并显示在屏幕上硬件准... 查看详情

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

前言本文的目的是为了给将要制作的ESP32手环做技术储备记录移植LVGL文件系统，制作LVGL中文字库，将图片和字库放在SD卡里，通过移植好的LVGL文件系统，读取SD卡中的中文字库和图片，并显示在屏幕上硬件准... 查看详情

esp32学习笔记-基于esp32移植lvgl8.3

以前写过一篇文章，讲述了如何基于ESP32芯片移植LVGL这个GUI框架，当时是在LVGL移植好的工程lv_port_esp32上进行的，这个工程最新支持到LVGL7.9版本，关于之前的移植文章，可以参考以下链接：ESP32学习笔记-移植LVGL随着LVGL不断在高... 查看详情

基于arduino的esp32学习笔记基于esp32的智能花盆

前言本文的目的是为了给将要制作的ESP32手环做技术储备准备学习下ESP32，还有嵌入式GUI框架LVGL，通过做几个小项目练手是不错的选择，最终目标是做一个ESP32的手环做一个ESP32手环任务量还是比较大的，涉及到很... 查看详情

基于arduino的esp32学习笔记基于esp32的智能花盆

前言本文的目的是为了给将要制作的ESP32手环做技术储备准备学习下ESP32，还有嵌入式GUI框架LVGL，通过做几个小项目练手是不错的选择，最终目标是做一个ESP32的手环做一个ESP32手环任务量还是比较大的，涉及到很... 查看详情

基于arduino的esp32学习笔记基于esp32的智能花盆

前言本文的目的是为了给将要制作的ESP32手环做技术储备准备学习下ESP32，还有嵌入式GUI框架LVGL，通过做几个小项目练手是不错的选择，最终目标是做一个ESP32的手环做一个ESP32手环任务量还是比较大的，涉及到很... 查看详情

基于arduino的esp32学习笔记基于aida64的电脑性能监控(代码片段)

前言本文的目的是为了给将要制作的ESP32手环做技术储备记录基于AIDAS软件，编写ESP32代码，使ESP32可以实时监控PC性能硬件准备ESP-WROOM-32E开发板软件准备VSCODE+PlatformIOAIDA64AIDA64使用安装AIDA64软件打开文件-设置-LCD-启用Rem... 查看详情

基于arduino的esp32学习笔记基于aida64的电脑性能监控(代码片段)

前言本文的目的是为了给将要制作的ESP32手环做技术储备记录基于AIDAS软件，编写ESP32代码，使ESP32可以实时监控PC性能硬件准备ESP-WROOM-32E开发板软件准备VSCODE+PlatformIOAIDA64AIDA64使用安装AIDA64软件打开文件-设置-LCD-启用Rem... 查看详情

esp32学习笔记-移植lvgl

LVGL是一款用C语言编写的开源轻量级图形显示框架，LVGL集成了资源占用小，多平台使用，移植简单等一系列特点，特别适合在嵌入式设备上进行开发使用。ESP32是一款强大的WiFiSOC，特别适合用在物联网WiFi设备... 查看详情

基于arduino的esp32学习笔记sd卡使用(代码片段)

前言本文的目的是为了给将要制作的ESP32手环做技术储备记录使用ESP32的SPI接口操作SD卡，暂时不涉及文件读写，主要验证硬件可行性硬件准备ESP-WROOM-32E开发板microSD卡microSD卡插槽模块软件准备VSCODE+PlatformIO使用过程改MI... 查看详情

esp32学习笔记-esp32使用gui-guider制作lvgl图形界面

...运行LVGL的官方demo，上一篇文章请参考以下链接。ESP32学习笔记-移植LVGL_EmbedIoTStudio-CSDN博客截止至2021年11月，LVGL官方尚未推出PC端的GUI设计工具，因此，在大多数情况下使用LVGL开发图形 查看详情

esp32学习笔记-esp32使用gui-guider制作lvgl图形界面

...P）为了方便广大工程师开发LVGL界面应用，推出了基于LVGL的拖曳式GUI编程辅助工具，GUIGuider，这个工具的链接地址，如下所示。GUIGuider|NXPSemiconductors使用GUIGuider，可以通过拖放控件的方式进行LVGL的图形界... 查看详情

esp32学习笔记-移植lvgl

LVGL是一款用C语言编写的开源轻量级图形显示框架，LVGL集成了资源占用小，多平台使用，移植简单等一系列特点，特别适合在嵌入式设备上进行开发使用。ESP32是一款强大的WiFiSOC，特别适合用在物联网WiFi设备... 查看详情

基于arduino的esp32学习笔记通过心知天气获取天气数据(代码片段)

前言本文的目的是为了给将要制作的ESP32手环做技术储备记录通过心知天气API获取天气数据硬件准备ESP-WROOM-32E开发板软件准备VSCODE+PlatformIO相关链接https://blog.csdn.net/weixin_42487906/article/details/113767644在我之前的文章里，实现... 查看详情

基于arduino的esp32学习笔记通过心知天气获取天气数据(代码片段)

前言本文的目的是为了给将要制作的ESP32手环做技术储备记录通过心知天气API获取天气数据硬件准备ESP-WROOM-32E开发板软件准备VSCODE+PlatformIO相关链接https://blog.csdn.net/weixin_42487906/article/details/113767644在我之前的文章里，实现... 查看详情

足够你学习esp32，提供史上最全的esp32教程(驱动/蓝牙/wi-fi/lvgl/arduino...)

本文章目的：1）针对单片机外设做详细的教程，丰富个人技能吃，彻底从原理+应用来写外设2）给广大蓝牙爱好者提供蓝牙应用方面的教程(结合我们的蓝牙协议栈会事半功倍)蓝牙协议栈教程点击我3）... 查看详情

基于arduino的esp32学习笔记基于aida64的电脑性能监控(代码片段)

前言本文的目的是为了给将要制作的ESP32手环做技术储备记录基于AIDAS软件，编写ESP32代码，使ESP32可以实时监控PC性能硬件准备ESP-WROOM-32E开发板软件准备VSCODE+PlatformIOAIDA64AIDA64使用安装AIDA64软件打开文件-设置-LCD-启用Rem... 查看详情