上一章节中已经完成了lvgl适配以及tslib的屏幕校准。自己要展示的内容还没有展示出来，还是使用玩转树莓派屏幕之二：自定义屏幕显示 中直接展示的文字，没有任何渲染。
lvgl中支持很多控件，屏幕展示的内容更加丰富。但是让自己去配置这些组件以及布局，搞不了搞不了。。。
还好现在有很多的GUI 设计工具可以使用。本次使用的是GUI Guider，也支持LVGL v9系列。不得不吐槽一下，lvgl不同系列代码api有很大变化，在网上的大部分教程在v9版本都不能适用。
一、使用Gui Guider设计GUI
-
选择新建 -> LVGL 9.2.1 -> 设备 simulator --> 模版为Empty UI，点击创建工程。
-
工程名称自取，树莓派MHS色深选择16bit，屏幕选择480*320，点击创建
-
界面介绍：
- 设计GUI界面：
- 点击模拟：
这也看不出来啥。。。。。
- 点击生成代码，选择C
-
查看生成文件：
custom、generated是我们要的文件。
二、适配Gui Guider
3.1 目录移植
新建guider_gui目录，将生成的custom、generated放入其中。
├── CMakeLists.txt
├── LICENSE
├── Makefile
├── README.md
├── guider_gui
│ ├── custom
│ └── generated
├── lvgl
├── scripts
│ └── backend_conf.sh
├── src
│ ├── lib
│ ├── main.c
│ └── usr
├── toolchain.cmake
└── user_cross_compile_setup.cmake
3.2 配置CMake.txt
让项目编译过程中能够识别新增加的gui内容，需要配置CMake引入.c文件和.h文件。
# 包含 tslib 头文件（自动从 pkg-config 获取）
include_directories(${TSLIB_INCLUDE_DIRS})
link_directories(${TSLIB_LIBRARY_DIRS})# 重新生成了src/usr内容
#aux_source_directory(src/usr/)
include_directories(src/usr)
file(GLOB_RECURSE SRC_USR_ADD ${PROJECT_SOURCE_DIR}/src/usr/*.c)# 引入guider-gui生成内容
include_directories(${PROJECT_SOURCE_DIR}/guider_gui/generated)
include_directories(${PROJECT_SOURCE_DIR}/guider_gui/custom)
include_directories(${PROJECT_SOURCE_DIR}/guider_gui/generated/images)#aux_source_directory(${PROJECT_SOURCE_DIR}/guider_gui/custom/)
file(GLOB_RECURSE SRC_LVGL_GUIGUIDER ${PROJECT_SOURCE_DIR}/guider_gui/generated/*.c)
file(GLOB_RECURSE SRC_LVGL_IMG ${PROJECT_SOURCE_DIR}/guider_gui/generated/images/*.c${PROJECT_SOURCE_DIR}/guider_gui/generated/guider_fonts/*.c
)add_executable(lvglsim src/main.c ${LV_LINUX_SRC} ${LV_LINUX_BACKEND_SRC} ${SRC_LVGL_GUIGUIDER} ${SRC_USR_ADD}src/usr/NetTools.c ${SRC_LVGL_IMG})target_include_directories(lvglsim PRIVATE ${TSLIB_INCLUDE_DIRS})
target_link_libraries(lvglsim lvgl_linux lvgl PkgConfig::TSLIB dl pthread)
这里只放了新增的部分，其他使用的LVGL demo中自带的。具体其他细节可以看下面的github链接地址。
3.4 修改main文件
在src/main中引入头文件和定义，在while循环中定期去刷新屏幕内容，这里是设置了1s刷新一次。
#include "gui_guider.h"
lv_ui guider_ui;int main() {....setup_ui(&guider_ui);while (true){uint32_t start_tick = lv_tick_get();usleep(LVGL_TICK); /*Sleep for 5 millisecond*/lv_task_handler();lv_tick_inc(LVGL_TICK); /*Tell LVGL that 5 milliseconds were elapsed*/if (start_tick - last_update >= 1000) {// 每秒执行刷新动作}}
}
更改屏幕中的显示内容，可以通过直接设置label的text内容进行修改：
lv_label_set_text(guider_ui.screen_cpu_show_info, tempStr);
三、效果展示
Gui-Guider设置展示
实物展示
四、开源地址
已经将GuiGuider和LVGL的源码放到了github：
https://github.com/secoworld/RaspberryPi_LCD_Monitor
参考文档：
- https://github.com/Temperature6/DevMonitor_for_Pis
