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

使用GUI Guider工具在MCU上开发嵌入式GUI应用 (1) - GUI Guider简介及安装

news 2026/2/8 22:07:57

使用GUI Guider工具在MCU上开发嵌入式GUI应用 (1) - GUI Guider简介及安装

受限于每篇文章最多只能贴9张图的限制，这个教程被拆分成了多篇文章连载发布，完整目录结构如下图x所示。后续会发布完整教程的pdf文件，敬请期待。
在这里插入图片描述

图x 完整教程文档的目录

文章目录

  • 使用GUI Guider工具在MCU上开发嵌入式GUI应用 (1) - GUI Guider简介及安装
    • LVGL和GUI Guider简介
    • 准备带有显示屏的开发板
    • 在PC上安装GUI Guider

LVGL和GUI Guider简介

LVGL是一个开源免费（MIT许可）的嵌入式GUI组件（https://lvgl.io/），支持触摸屏操作，移植简单方便，开发者一直在不断完善更新。

LVGL的作者是来自匈牙利的Gabor Kiss-Vamosikisvegabor，LVGL用C语言编写，以实现最大的兼容性（与C ++兼容），模拟器可在没有嵌入式硬件的PC上启动嵌入式GUI设计，同时LVGL作为一个图形库，它自带着接近三十多种小工具可以供开发者使用。这些强大的构建块按钮搭配上带有非常丝滑的动画以及可以做到平滑滚动的高级图形，同时兼具着不高的配置要求以及开源属性，显著的优势使得LVGL蔚然成风，成为广大开发者在选择GUI时的第一选择。

LVGL自带了丰富的控件：窗口、按键、标签、列表、图表等，还可以自定义控 件；支持很多特效：透明、阴影、自动显示隐藏滚动条、界面切换动画、图标打开关闭动画、平滑的拖拽控件、分层显示、反锯齿、仅耗少量内存的字体等等。

在这里插入图片描述

图x 在MCU开发板上适配LVGL

同LVGL应用场景类似的主流的嵌入式GUI组件还有emWin、TouchGFX等，相比较而言，LVGL对于开发者更加友好，对比典型指标如表x所示。

表x 主流嵌入式GUI的关键指标对比
LVGLemWinTouchGFX
商业使用免费收费收费
可移植性多平台多平台主要为STM32
开源程度源码开源不开源部分开源
组件丰富度三十几种控件二十几种控件丰富
开发文档较为丰富较为丰富一般

由于LVGL被广泛应用，也衍生了一些以LVGL为基础的开发工具，便于嵌入式系统开发者自定义自己的GUI应用。例如 GUI Guider、Square Line Studio、LVGL Windows Simulater等。其中：

  • Square Line Studio是LVGL官方开发工具，面向个人和专业人士的UI编辑器，可快速轻松地为您的嵌入式设备设计和开发漂亮的UI，便捷地设计界面并一键生成代码导出，导出的代码在模拟器和嵌入式设备上都适用，但该软件商业使用需要付费。
  • LVGL Windows Simulater是LVGL官方提供的轻量级的仿真器，使用 GNU GCC 编译器和 SDL 驱动库或 Windows API 在 PC 机上绘制界面，但需要用户自行编写源码设计UI。
  • 相对而言，GUI Guider开源，并且支持图形环境的设计和仿真功能，最具符合开发者全面需求。
表 x 常用LVGL模拟器的关键指标对比
GUI GuilderSquare Line StudioLVGL Windows Simulater
使用难度功能丰富，上手简单较为复杂功能一般
功能丰富度功能丰富功能丰富功能单一
可视化设计支持支持不支持
开发文档一般较为丰富一般
同步调试支持不支持支持

GUI Guider是恩智浦提供的用户友好型图形用户界面开发工具，可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性，如小部件、动画和样式来创建GUI，而只需少量代码或根本无需任何代码。单击按钮，您可以在模拟环境中运行应用或将其导出到目标项目。可以很轻松地将GUI Guider生成的代码添加到MCUXpresso IDE或IAR Embedded Workbench项目中，从而加速开发过程，并允许无缝地将嵌入式用户界面添加到应用中。

GUI Guider是NXP公司推出的一款用户友好的嵌入式图形应用开发工具。它使用开源LVGL图形库作为底层图形引擎，提供可视化所见即所得的拖放UI编辑器，能够快速、轻松地为嵌入式应用程序创建漂亮的图形用户界面。图形设计师能够直接使用GUI Guider创建UI，并将已经工作的UI交付给软件开发人员，而软件开发人员只需专注于底层业务逻辑开发。通过这种方式，GUI Guider可以支持个人或者团队高效地协同工作。GUI Guider的软件界面，如图x所示。
在这里插入图片描述

图x GUI Guider的软件界面

准备带有显示屏的开发板

本例使用基于国产灵动微电子“星辰”处理器内核系列的MCU产品，MM32F5270/MM32F5280，设计的开发板BIRD-F5，配合ST7796U的3.5寸TFT液晶显示屏模块。任何可以连接液晶显示模块的开发板均可用于开发LVGL，只要开发者预先适配好具体的液晶屏驱动，以及在具体开发板上做好LVGL工程的移植，后续开发图形界面的工作将全部在GUI Guider环境中进行开发，同具体的开发板和显示模块无关。

MM32F5270微控制器使用ArmChina的STAR-MC1处理器内核（基本兼容Arm Cortex-M33内核），最高主频可达120MHz，片内集成192KB的SRAM（128KB的SRAM、32KB的ITCM和32KB的DTCM）和256KB的Flash，以及包括FSMC在内的众多外设模块。MM32F5280在MM32F5270的基础之上，在QSPI接口上合封了一块2MB容量的qspiflash存储芯片。

在这里插入图片描述

图x BIRD-F5开发板

BIRD-F5开发板以MM32F5277E9PV为主控芯片，集成了FPC插座，可以组装TFT显示屏模块，将MM32F5270芯片上的FSMC接口同TFT液晶屏对接通信，如图x所示。

在这里插入图片描述

图x 组装TFT模块后的BIRD-F5开发板

  • MM32F5270微控制器的产品主页：https://www.mindmotion.com.cn/products/mm32mcu/mm32f/mm32f_performance/mm32f5270/

  • BIRD-F5开发板的KiCAD项目工程（包含原理图）：https://gitee.com/suyong_yq/lvgl-gui-guider-dev/tree/master/bird-f5_lvgl_v8/hardware/bird-f5_v1.3

  • 灵动微电子官方发布的PLUS-F5270开发板的购买链接：https://item.taobao.com/item.htm?spm=a230r.1.14.1.664025d1Z2SRxb&id=675495302966

  • ST7796U TFT液晶模块购买链接：https://item.taobao.com/item.htm?spm=a1z09.2.0.0.40ce2e8dBpnWJx&id=521624918530

在PC上安装GUI Guider

理想情况下，基于MCU的UI应用的开发，重点应该放在UI的设计上，而MCU相关的开发工作，只是为UI软件提供一个运行环境。如此，在本例中搭建的软件开发环境，也主要分为两个部分：搭建基于MCU的UI应用运行环境，搭建基于PC的UI应用开发环境。这里的准备工作，需要创建一个包含了能够支持GUI
Guider源码的MCU的源码工程，当在GUI
Guider中编辑好UI素材，对应生成的源码可以被直接集成到MCU工程中，编译并能够在具体的开发板上运行。

本例中搭建嵌入式GUI开发环境（基于Windows操作系统）需要安装如下软件工具包：

  • Keil MDK - MCU源码项目的编译和下载工具
  • 一个移植好LVGL的MCU源码工程，可以点亮液晶屏
  • GUI Guider - 基于PC机的生成UI源码的软件工具

登录NXP官网，在搜索栏中输入GUI Guider即可找到GUI Guider工具的软件包，目前可以运行在Windows、Linux和MacOS等多种操作系统。

也可直接进入GUI Guider的产品主页：https://www.nxp.com/design/software/development-software/gui-guider:GUI-GUIDER

在这里插入图片描述

图x GUI Guider的产品主页

从GUI Guider的产品主页上，可以获取GUI Guider软件的下载链接，例如：https://cache.nxp.com.cn/secured/bsps/Gui-Guider-Setup-1.5.1-GA.exe

运行GUI Guider需要配置JDK，如果本机上没有JDK，启动GUI Guider后会有提示。如图x所示。

在这里插入图片描述

图x GUI Guider提示安装JDK

可以使用开源的OpenJDK即可。OpenJDK的下载地址：https://learn.microsoft.com/zh-cn/java/openjdk/download。

在安装OpenJDK的过程中，切记要将JDK的可执行文件的路径添加到开发主机系统的环境变量中。如图x所示。安装OpenJDK的最后步骤中，可能也有自动添加系统环境变量的操作选项，也可勾选其中，自动完成添加。

在这里插入图片描述

图x 配置JDK路径到系统环境变量

安装GUI Guider和OpenJDK完毕后，运行GUI Guider软件，可以进入图形UI编辑界面。如图x所示。
在这里插入图片描述

图x 启动GUI Guider软件

（未完待续。。。）

相关文章：

使用GUI Guider工具在MCU上开发嵌入式GUI应用 (1) - GUI Guider简介及安装

使用GUI Guider工具在MCU上开发嵌入式GUI应用 (1) - GUI Guider简介及安装 受限于每篇文章最多只能贴9张图的限制，这个教程被拆分成了多篇文章连载发布，完整目录结构如下图x所示。后续会发布完整教程的pdf文件，敬请期待。 图x 完整教程文档…...

编程日记 2023/8/12 9:30:30

解决：django设置DEBUG=false时出现的问题

首先，我用的是django4.2，python3.10版本 本来，如果在settings.py中使用 DEBUG True，那么什么问题也没有，当然，这属于调试模式。 DEBUG True TEMPLATE_DEBUG DEBUGSTATIC_URL /static/ STATICFILES_DI…...

编程日记 2023/8/12 9:29:29

2023-08-10力扣每日一题

链接： 1289. 下降路径最小和 II 题意： 每一行选择一个数字，相邻行选择不能是同一列，求选择的数字和最小是多少 解： 每一行选择最小的次小的，下一行能加最小的（列坐标不冲突）就加…...

编程日记 2023/8/12 9:28:28

C#与halcon联合 缩放移动自适应图像

读取图片 //获取文件路径下的图片public HObject GetImgFromPath(string imgPath){HObject L_Img;HOperatorSet.GenEmptyObj(out L_Img);//清空图片L_Img.Dispose();//释放HOperatorSet.ReadImage(out L_Img, imgPath);//读取图片存入到l_imgreturn L_Img;}拉伸显示 //图片拉…...

编程日记 2023/8/12 9:27:26

推荐 4 个 yyds 的 GitHub 项目

本期推荐开源项目目录： 1. 开源的 Markdown 编辑器 2. MetaGPT 3. SuperAGI 4. 一个舒适的笔记平台 01 开源的 Markdown 编辑器 Cherry 是腾讯开源的 Markdown 编辑器，基于 Javascript具有轻量简洁、易于扩展等特点， 它可以运行在浏览器或服…...

编程日记 2023/8/12 9:26:25

chrome插件开发实例05-页面间通信

目录 一、页面间通信的方式 方式1： 通过消息通信...

编程日记 2023/8/12 9:25:24

linux安装ftp

一、安装 参考博客 https://blog.csdn.net/dafeigecsdn/article/details/126518069 rpm -qa |grep vsftpd # 查看是否安装ftp yum -y install vsftpd # 安装vsftpuseradd -d /home/lanren312 lanren312 # 指定在/home目录下创建用户 passwd lanren312 # 给用户设置密码 # 输…...

编程日记 2023/8/12 9:24:23

前后端分离------后端创建笔记（上）

本文章转载于【SpringBootVue】全网最简单但实用的前后端分离项目实战笔记 - 前端_大菜007的博客-CSDN博客 仅用于学习和讨论，如有侵权请联系 源码：https://gitee.com/green_vegetables/x-admin-project.git 素材：https://pan.baidu.com/s/…...

编程日记 2023/8/12 9:23:22

Java不可变集合详解

什么是不可变集合 不可变集合，英文叫 immutable 顾名思义就是说集合是不可被修改的。集合的数据项是在创建的时候提供，并且在整个生命周期中都不可改变。 为什么要使用不可变集合 不可变对象有很多优点，包括： 当对象被不可信的…...

编程日记 2023/8/12 9:22:21

常见的JavaScript日常问题

在众多的编程语言中， JavaScript 给大部分的人的第一印象是人畜无害，看起来就简单的，对稍微有点儿开发经验的人来说，在网页中写个JavaScript功能也相当简单。但是当你真的得了解了JavaScript之后就会发现，它比我们想象…...

编程日记 2023/8/12 9:21:19

css modules的用法和在react项目中的应用

参考文章 CSS Modules 的用法 CSS Modules 的功能很单纯，只加入了局部作用域和模块依赖，可以保证某个组件的样式，不会影响到其他组件。 局部作用域 CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。…...

编程日记 2023/8/12 9:20:16

【LangChain概念】了解语言链️：第2部分

一、说明 在LangChain的帮助下创建LLM应用程序可以帮助我们轻松地链接所有内容。LangChain 是一个创新的框架，它正在彻底改变我们开发由语言模型驱动的应用程序的方式。通过结合先进的原则，LangChain正在重新定义通过传统API可以实现的极限。 在上一篇博…...

编程日记 2023/8/12 9:19:15

步入React前厅 - Css In React

目录 扩展学习资料 行内样式 引入样式表 CSS Module /src/components/common.module.css /src/components/listitem.module.css css管理进阶 Css管理工具 练习 扩展学习资料 资料名称 链接 css module CSS Modules 用法教程 - 阮一峰的网络日志 在React中使…...

编程日记 2023/8/12 9:18:14

OpenCV（三）——图像分割（二）

目录 4.边缘检测 4.1 图像梯度的概念 4.2 模板卷积和梯度图的概念 4.3 梯度算子...

编程日记 2023/8/12 9:17:12

28.Netty源码之缓存一致性协议

Mpsc Queue 基础知识 Mpsc 的全称是 Multi Producer Single Consumer，多生产者单消费者。Mpsc Queue 可以保证多个生产者同时访问队列是线程安全的，而且同一时刻只允许一个消费者从队列中读取数据。 Netty Reactor 线程中任务队列 taskQueue 必须满足多个…...

编程日记 2023/8/12 9:16:11

造个轮子-任务调度执行小框架-任务清单执行恢复实现

文章目录 前言恢复执行流程失败任务执行重启执行中任务恢复执行修复组件整合组件整合容器启动类总结前言 okey,通过前面的两篇文章，关于这个任务执行这一块，我想应该是明白了。但是这里的话，还是不够的。我们希望对于任务还可以做到执行失败的重试执行，关于这个意外宕机的…...

编程日记 2023/8/12 9:15:10

若依部署前后端

打包项目 前端打包 npm run build:prod将代码上传到指定目录 配置nginx转发 server{listen 8090;server_name localhost;location / {root /home/cc_library/dist;index index.html index.htm;# 配置 history模式，刷新页面会404，，因为服…...

编程日记 2023/8/12 9:14:09

2009年上半年 软件设计师 下午试卷

博主介绍：✌全网粉丝3W，全栈开发工程师，从事多年软件开发，在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战，博主也曾写过优秀论文，查重率极低，在这方面有丰富的经验…...

编程日记 2023/8/12 9:13:07

SpringBoot使用自定义事件监听器的demo

记录一下SpringBoot自定义事件监听器的使用方法 案例源码:SpringBoot使用自定义事件监听器的demo 使用的SpringBoot2.0.x版本 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><…...

编程日记 2023/8/12 9:12:07

arcgis定义投影与投影

1、定义 地理坐标系&#xff08;GCS&#xff09;&#xff1a;利用地球表面的经纬度表示的坐标系统。一般单位为度。投影坐标系&#xff08;PCS&#xff09;&#xff1a;利用数学换算将三维地球表面上的经纬度坐标转换到二维平面上的坐标系统。一般单位为米。可以认为&#xff…...

编程日记 2023/8/12 9:11:06

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2026/2/8 12:24:34

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

编程新知 2026/1/15 4:25:16

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

编程新知 2026/1/29 5:34:29

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2026/1/31 2:13:57

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2026/2/6 3:24:58

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

编程新知 2026/1/26 9:30:45

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

编程新知 2026/1/31 4:40:38

在 Spring Boot 项目里，MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

编程新知 2025/7/9 16:55:37

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

编程新知 2026/2/4 11:39:13