当前位置：首页 > news >正文

iMX6ULL使用GUI Guider开发LVGL

news 2025/11/7 15:41:00

前言：GUI Guider是恩智浦为LVGL开发了一个上位机GUI设计工具，可以通过拖放控件的图形化设计方式开发LVGL GUI页面，加速GUI的设计。相比LVGL官方推出的付费工具 SquareLine Studio ，GUI Guider完全免费，它们甚至开发页面的布局都类似，但两者功能上，GUI Guider也相应的没有SquareLine Studio 细致和丰富，希望NXP能持续的优化更新。GUI Guider工具完成的GUI设计可在PC端仿真运行，实现无硬件开发，通过仿真调试完成后，可快速方便的整合到MCU的工程中。

一、下载软件

快速创建现代嵌入式 GUI |恩智浦半导体

二、创建新工程

GUI GuiderV1.10.0只支持LVGL8.3.10和LVGL9.2.1，因此需要保证自己移植的版本号正确

要注意修改色彩深度和面板类型，例如我使用的是正点原子的IMX6ULL，色彩深度就是16位,LCD屏幕大小就是800*480

GUI Guider的ui界面设计采用拖拽形式，此文只是演示一个完整的移植过程，因此，直接拖动一个标签，显示HELLO

三、生成代码

ctrl+G生成代码，然后切换到你的工程目录下面

在lv_port_linux_frame_buffer下创建ui文件夹，将生成的custom和generated放入ui文件夹，然后再把ui文件夹放到lv_port_linux_frame_buffer下

如果imx6ull没有lv_port_linux_frame_buffer，请参考下面博客，构建环境，在进行移植，但是要注意，git获取版本号时要保证LVGL版本一致，其他操作类似。

IMX6ULL移植LVGL（V8.2版本）-CSDN博客

修改main.c文件

添加头文件
#include "gui_guider.h"
#include "custom.h"定义一个全局变量 guider_ui
lv_ui guider_ui;屏蔽原有的demo初始化 改为 最新的ui初始化
lv_demo_widgets();改成setup_ui(&guider_ui);

修改Makefile文件

再MAINSRC = ./main.c上面添加以下代码，这样做的目的是，原本只会编译main.c这一个文件，现在还会编译ui目录下面的所有文件UI_DIR = ./ui# 递归查找 ui 目录及其所有子目录下的 .c 文件
UI_SRCS = $(shell find $(UI_DIR) -name '*.c')# 自动提取所有包含 .c 文件的目录路径
UI_INCLUDE_DIRS = $(sort $(dir $(UI_SRCS)))# 添加到头文件搜索路径
CFLAGS += $(addprefix -I, $(UI_INCLUDE_DIRS))
CFLAGS += -I$(LVGL_DIR)/lvgl# 将 UI 源文件添加到编译列表
CSRCS += $(UI_SRCS)

编译