目錄
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 使用剛才的分區表：
改名，然后保存。
萬事大吉，重新編譯！
編譯成功，燒錄試試：
看看效果：
