GUI-Guider 生成打印机模板并在 ESP32-S3 上面运行
原文:https://www.jianshu.com/p/51fc4c1d1e66
目录
ESP32-S3 移植 GUI-Guider 的打印机例程
前提准备
- 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 生成工程
根据屏幕参数新建工程
注意文件路径不能含有中文和空格,项目名称必须以字母开头。长度必须至少为三个字符,只能包含字母、数字和下划线。
新建工程

界面改成中文

可以运行模拟器测试一下

模拟器界面

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

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


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 文件夹添加到编译环境里面,如下图所示。
实测并不需要,保持原样即可,像参考中那样做反而会报错。

调用生成的代码
在main\main.c
中,注释掉原本运行的例程所包含的头文件:

包含生成的代码,注意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;

然后注释掉原本运行的例程的 demo,并调用生成的代码:
/* 调用生成的代码 */
setup_ui(&guider_ui);
events_init(&guider_ui);

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

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

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

这时已经移植得差不多了,但是如果现在就编译的话还是会报错,主要是生成器生成的代码中包含 lvgl 头文件都是用这种形式#include "lvgl/lvgl.h"
,不过该例程中实际上用的都是#include "lvgl.h"
,生成器生成的文件这么多,怎么办呢?
其实也挺简单,首先在components\generated
文件夹里打开一个新的 VSCode 窗口:

然后搜索#include "lvgl/lvgl.h"
替换成
#ifdef LV_LVGL_H_INCLUDE_SIMPLE
#include "lvgl.h"
#else
#include "lvgl/lvgl.h"
#endif
就行了。


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

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

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

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,
右键打开分区表编辑器:

根据报错内容把factory
改大一点,这里改成 4M。
保存成功:

打开 sdk config 使用刚才的分区表:

改名,然后保存。

万事大吉,重新编译!

编译成功,烧录试试:

看看效果:

作者:猫猫蓝catcatBlue
链接:https://www.jianshu.com/p/51fc4c1d1e66
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
2020-11-19 SpringCloud面试题及答案
2020-11-19 Spring Boot面试题
2020-11-19 javaWeb常用面试题
2020-11-19 mysql行转列 问题 SUM(IF(条件,列值,0))
2020-11-19 mysql行列转换
2020-11-19 asp.net core 常见知识点
2020-11-19 C++面试常见题