使用GUI Guider工具在MCU上开发嵌入式GUI应用 (1)

• LVGL和GUI Guider简介
• 准备带有显示屏的开发板
• 在PC上安装GUI Guider

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

figure-all-menu
图x 完整教程文档的目录

LVGL和GUI Guider简介

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

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

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

figure-lvgl-boards
图x 在MCU开发板上适配LVGL

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

表x 主流嵌入式GUI的关键指标对比

由于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 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所示。

figure-gui-guider-layout-overview
图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存储芯片。

figure-bird-f3_f5-a
图x BIRD-F5开发板

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

figure-bird-f5-board-with-lcd
图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

figure-gui-guider-website-index
图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所示。

figure-gui-guider-startup-6
图x GUI Guider提示安装JDK

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

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

figure-gui-guider-install-openjdk-syspath
图x 配置JDK路径到系统环境变量

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

figure-gui-guider-startup-1
图x 启动GUI Guider软件

至此，安装GUI Guider软件的过程全部完成。在下文中将介绍如何准备能够适配GUI Guider软件生成源码的MCU工程。

（未完待续。。。）

作者：安德鲁苏
文章来源：安德鲁的设计笔记本

推荐阅读

• CAN总线开发一本全（9） - CANopen调试用例（2）
• CAN总线开发一本全（8） - CANopen调试用例（1）
• CAN总线开发一本全（7） - 基于FlexCAN适配CANopenNode
• CAN总线开发一本全（6） - CANopenNode组件（1）
• CAN 总线开发一本全（5） -CANopen 协议概述

更多MM32F5系列资料请关注灵动MM32 MCU专栏。如想进行MM32相关芯片技术交流，请添加极术小姐姐微信（id:aijishu20）加入微信群。