51fc4c1d1e66

ESP32-S3 移植 GUI-Guider 的打印机例程

参考链接
ESP32 学习笔记 - ESP32 使用 GUI-Guider 制作 LVGL 图形界面

前提准备

esp-idf v4.4 开发环境 + VSCode 的 idf 插件 v1.4.0
带 ili9481 或其他屏幕的 esp32-s3(n8r16 或 n8r8) 开发板
已经移植的 lvgl(v7) 例程（见lv_port_esp32），以及你需要会移植（如何移植到esp32？）。
GUI Guider 1.3.0

其实自带的例程就有这个打印机 demo，但是为了使用 GUI Guider，因此还是移植一遍这个。
关于工程模板以及移植好的工程，不会上传zip，有需要留言吧。

1. GUI Guider 生成工程

根据屏幕参数新建工程

注意文件路径不能含有中文和空格，项目名称必须以字母开头。长度必须至少为三个字符，只能包含字母、数字和下划线。

新建工程

1648689615245.png

界面改成中文

1648689785505.png

可以运行模拟器测试一下

1648689851418.png

模拟器界面

1648689910760.png

玩完了就可以直接生成代码了

1648690117589.png

生成完毕之后就可以用生成的代码了，主要用到这俩文件夹，在项目文件夹里面。
注意：先把 custom 复制到 generated 里面，然后复制 generated 到移植好的 lvgl 例程里的 components 文件夹里，使生成的代码作为组件使用。

1648690388036.png

1648690757803.png

2.移植代码到 lvgl 例程里

关于组件

将生成的代码作为组件使用

用 VSCode 打开 lvgl 工程，生成的代码还不能直接作为组件使用，还需要一个 CMakeLists.txt 把代码包含在工程里面。在 generated 文件夹创建 CMakeLists.txt，其内容如下：

if(ESP_PLATFORM)

file(GLOB_RECURSE SOURCES *.c ./images/*.c  ./guider_fonts/*.c ./custom/*.c)

idf_component_register(SRCS ${SOURCES}
                       INCLUDE_DIRS .
                                    ./guider_customer_fonts
                                    ./guider_fonts
                                    ./images
                                    ./custom
                                    ../lvgl
                                    ../lvgl/src/lv_core
                                    ../lvgl/src/lv_draw
                                    ../lvgl/src/lv_font
                                    ../lvgl/src/lv_gpu
                                    ../lvgl/src/lv_hal
                                    ../lvgl/src/lv_misc
                                    ../lvgl/src/lv_themes
                                    ../lvgl/src/lv_widgets
                       REQUIRES lvgl)

else()
    message(FATAL_ERROR "LVGL LV examples: ESP_PLATFORM is not defined. Try reinstalling ESP-IDF.")
endif()

这个 CMakeLists.txt 是从 components\lv_examples 里复制的，根据 generated 所用到的代码添加内容。
其中../lvgl/src/lv_core以下的一长串只有../lvgl/src/lv_font是必须的，因为在components\generated\guider_fonts\guider_fonts.h里有#include "lv_font.h"，其他没啥用，注释掉也行，方便接别的移植工程复制这个 CMakeLists.txt。

与参考链接中的不同

在参考链接(ESP32 学习笔记 - ESP32 使用 GUI-Guider 制作 LVGL 图形界面)中，需要 lv_lib_split_jpg，但是本项目移植图片已经的全都是.c 文件了不需要把 jpg 转为 c 了。
参考链接中

6、然后再修改 main 文件夹里面的 CMakeLists.txt，把 generated 文件夹添加到编译环境里面，如下图所示。

实测并不需要，保持原样即可，像参考中那样做反而会报错。

1648692511208.png

调用生成的代码

在main\main.c中，注释掉原本运行的例程所包含的头文件：

1648692870232.png

包含生成的代码，注意lv_ui guider_ui;不能丢，在components\generated\gui_guider.h里声明了extern lv_ui guider_ui;，需要调用这个guider_ui：

#include "gui_guider.h"
#include "guider_lv_conf.h"
#include "guider_fonts.h"
#include "events_init.h"

lv_ui guider_ui;

1648692967270.png

然后注释掉原本运行的例程的 demo，并调用生成的代码：

    /* 调用生成的代码 */
    setup_ui(&guider_ui);
    events_init(&guider_ui);

1648693308838.png

由于static void create_demo_application(void)声明了 static，使用需要注释掉它的声明和实现，不然在本文件中不调用create_demo_application的话编译器也会报错。

1648693594634.png

特别注意，这里有个反斜杠，这里也要注释！不然编译器会识别为多行注释报错。

1648694291720.png

除此之外，在components\generated\guider_lv_conf.h里生成了一些配置，由于之前移植的 lvgl 例程里面已经有了，如果这边再声明一遍会报错，因此通过#if 0和#endif注释掉整个文件就行了。

1648694374551.png

这时已经移植得差不多了，但是如果现在就编译的话还是会报错，主要是生成器生成的代码中包含 lvgl 头文件都是用这种形式#include "lvgl/lvgl.h"，不过该例程中实际上用的都是#include "lvgl.h"，生成器生成的文件这么多，怎么办呢？

其实也挺简单，首先在components\generated文件夹里打开一个新的 VSCode 窗口：

1648693933685.png

然后搜索#include "lvgl/lvgl.h"替换成

#ifdef LV_LVGL_H_INCLUDE_SIMPLE
#include "lvgl.h"
#else
#include "lvgl/lvgl.h"
#endif

就行了。

1648694474166.png

1648694481961.png

回到打开 lvgl 的窗口。
由于生成的例程有点大，需要大一点的 flash，需要改分区表，首先先编译一次以方便打开 sdk config。

1648694791152.png

现在编译肯定会报错空间不够。

1648694810349.png

关于分区表

随便从别的例程复制一个分区表partitions_example.csv到项目根文件夹：

1648695041381.png

partitions_example.csv 内容如下：

# 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,
storage,  data, fat,     ,        1M,

右键打开分区表编辑器：