GUI Guider使用分享——实用基础篇

NXP管管 · 发表于 2021-5-6 10:16:15

GUI Guider使用分享——实用基础篇

引言

想必很多人已经知道，GUI Guider是恩智浦新近推出的一个PC端开发工具，专门用于LVGL（light and Versatile Graphics Library）GUI开发。

显然可见，恩智浦在大力支持这个LVGL软件，且它也已被NXP SDK软件包纳入并提供了多个例程。所以，感兴趣和有需要的读者可以为之多学习了解。
本篇不是详细介绍此工具或如何使用它一步步开发，对此介绍的相关资料已不少，比如，用户手册，视频，微信文章等。本篇是基于个人使用体验，本着“实用主义”，从此工具最基础方面提取一些要点和注意点，来进行分享介绍。
希望让初学者少走些“弯路”，更快上手掌握此工具的使用。即使对于已经使用过的读者，或也可以“实践联系理论”，对此工具获得更全面深入认识，从而做到用得更明白。

GUI Guider一览

GUI Guider是NXP推出的用于开发LVGL GUI界面的图形化开发工具。同其他图形化开发工具一样，GUI Guider也是基于所见即所得，可通过简单的拖放控件操作来实现LVGL GUI界面的开发，以替代大量的API调用编程，从而使得LVGL GUI的开发快速简单。

按照惯例，NXP推出的开发工具，对所有使用NXP MCU的用户是免费的，本GUI Guider也不例外。
GUI Guider提供了简单明了的集成开发环境，对于常年沉浸于图形界面PC的使用者来说，这IDE的使用简直太“小儿科”了，基本可以边用边学。如遇不明之处，GUI Guider也提供了一份用户手册对此工具有详细说明，可供使用者查阅（当然，涉及到LVGL基本概念的名称，则需要查阅LVGL的说明文档）。
另外，在NXP官网提供的GUI Guider资源（链接见下节）里，也提供了视频讲解如何使用GUI Guider。

GUI Guider安装

在NXP官网上以下链接可获取有关此工具的所有资源，包括下载安装：
https://www.nxp.com/design/software/development-software/gui-guider:GUI-GUIDER。
需要提醒注意的是，此工具安装目前支持：Windows 10和Ubuntu 20.04。
要在Win10下安装使用的话，还需要安装Java环境：Java Runtime Environment，JRE-8 is verified。如果PC里已经有JRE，那很简单，只要安装好GUI Guider即可使用；否则，需要去获取安装JRE。这个安装并不难，只是要注意JRE安装后需要设置环境路径，这点在GUI Guider用户手册中有详细说明。
用户手册在GUI Guider安装后的此路径下：GUI-Guider\resources。且所有环境下的安装步骤在手册中都有详尽介绍。

GUI Guider创建项目

点击打开GUI Guider，首先映入眼帘的是用于创建项目和打开最近项目的窗口。
这窗口相当的简洁，别的不提，就想提提此工具的开发者们为了尽可能减少GUI开发者的工作量，煞费苦心地在这里提供了两类模板——板子模块和应用模板，并可以在此设置好显示色深（当前只有默认的一种——16bit）和分辨率（这个提供了灵活的选择，用户可以自己设置）。
下图便是项目创建窗口，红框内即是提供的“特色服务”（以下详细介绍）。

板子模板Board Templates里提供了simulator模式（默认模式），和目前GUI Guider支持的5种NXP EVB板子：
·NXP i.MX RT1050
·i.MX RT1062
·i.MX RT1064
·LPC54S018
·LPC54628
若选择其中某种板子作为模板，可以在PC上进行仿真（simulator），还可以在线交叉编译烧写程序到相应EVB板子上运行，直接看实际板上效果；可以生成相应的完整SDK软件包，为基于它做GUI开发节省大量工作；也可以选择只输出相应GUI代码。具体后面还会介绍。

若选择simulator模式，在以上功能中，只支持PC上仿真。
应用模板Application Templates里目前给出了6种常用的GUI应用场景，当然若没有合适的则直接选用默认的空白模板进行开发。如下部分截图：

GUI开发

项目配置好后点击“Create”或点击打开已经创建好的项目，就进入到开发主体界面（如下图）。

简单介绍下此主界面：左边摆放了所有支持的控件，中间是要拖放控件的GUI屏幕（大小就是创建项目时配置好的），右边是拖放好的控件的属性和事件配置。
这里简要介绍开发基本过程（具体细节读者可阅读相关资料）：

从左边拖出所需控件，放入中间GUI屏幕上，右边随即显示出此控件属性，根据需要进行相关属性配置
点击右边“Event”页，还可以配置相关事件响应处理行为（当然需要此控件支持事件处理，万能的用户手册里详尽给出了所有控件支持的事件/行为）
如此直至完成开发。
当然，实际开发中，一般不会这样一股脑地一直进行开发，中途会需要验证效果，这时，可以点击界面中上部的图标“Run Simulator”，在PC上直接验证效果。

也可以连上相应EVB板子（注意要先连上板子），点击图标“Run Target”，在线交叉编译直接烧写到EVB板子上运行，在板上验证实际运行效果。

注意：要执行此功能，得在PC上先下载安装好MCUXpresso IDE v11.3.0及以上版本。因为它才支持GUI Guider来完成此项功能。此功能是GUI Guider的一大特色，让开发者方便了不少。

另外，个人认为还有3大亮点想分享给读者：

一、控件的复制功能

在主界面左边的“Resource”页下，显示了当前GUI屏幕里摆放的所有控件资源名称，这里提供了对所有这些控件复制，删除功能的“copy”，“delete”快捷图标。

这样，可以快速的在同一屏幕下增加相同控件；也可以快速增加类似的新的一屏（screen），因为在一个GUI应用中往往需要切换显示不同的屏幕，若是类似的一屏，通过复制整屏，可以省去再次拖放的很多工作量。

如图，只要点击screen旁红框中的”copy”图标，随即产生与screen完全一样的screen1且包含了screen里所有控件资源，同时在中间GUI屏幕上也呈现出来，开发者可以对其进行相应修改。

二、动画的配置功能

GUI Guider还在主界面右边的控件属性栏中，提供了通过简单的图形化配置来实现控件动画效果的功能（当然首先要此控件支持动画效果），此动画效果是指移动的效果。

如图，只要勾选“MOVE ANIMATION”，就使能了动画效果。其他项用来配置具体的动画效果。

“DESTINATION”是配置控件移动的目标坐标位置(X，Y)；
“ANIMATION PATH”可选择控件如何移动，这可以产生一些移动的效果，比如，默认的线性移动（linear）,还可以步进式移动，先慢后快等等效果；
“DURATION”是通过设置移动持续时间来控制速度效果，设置的数值越大，移动越慢，反之越快。
此功能让动画的实现so easy。

三、事件的配置功能

同样在主界面的右边，GUI Guider提供了一页“Event”，用于控件的事件响应行为的配置（当然也首先要此控件支持事件响应，比如按钮）。

此功能又进一步减少开发者的工作，大大提高了此工具的便利性。将以往需要开发者自己写代码调用API实现事件响应行为的工作，简化为进行图形化配置来完成。

如图，在”Event“页，若当前指定控件支持事件响应，则会显示“+”按钮。点击它，即表示添加一个事件响应行为（多次点击它，则会添加多个），表现为会显示出图中大红框所示的事件响应配置框，供开发者通过配置实现具体的事件响应行为。

“Source Widget”自动显示当前控件的名字；
“Tigger”可选择具体的事件触发条件，比如点击，按下，释放等等；
“Target Source”可选择当前screen里所有控件资源中，要响应触发产生事件行为的某个目标控件，比如图中选择了”label1”标签；
“Action”可选择目标控件将产生什么响应行为。比如，图中的更新标签宽度值，其他还有更新背景颜色，透明度等等。
依据不同控件属性，支持的行为略有不同，比如，标签还支持更新标签文本内容。
再次说明，有关更多细节，使用者可自行学习查阅。
“Value”项是根据“Action”里选择的行为来定的，因为“Action”的行为是更新宽度，所以这里弹出“Value”让开发者设置具体的宽度值。
这个事件响应配置后实现的功能就是当前screen中，按钮“btn2”在点击后，标签“label1”的宽度值更新为“Value”设定的值。

在这个事件响应行为配置里，还有一个相当灵活的选择，就是可以添加自己的代码来实现自己想要的行为。

另外，图中右下角还有一个垃圾桶图标，点击它，可删除当前事件配置——做到可增可减之灵活便利。

总结

以上就是本文对NXP GUI开发工具GUI Guider基础的分享，介绍了此工具的资源获取，安装和基本使用，分享了个人对其一些特性的认识和提醒了一些注意点。
希望本文能帮助读者/使用者全面了解和使用好此工具。

一个好工具，不就是能很好的提高人的效率么，而这正是体现在很好的减少人的负荷，窃以为GUI Guider努力去这样做了且做得不错。

当然，任何工具都不是万能的、完美的，GUI应用场景千万种，自力更生第一条——有些还是要自己写代码来实现的。

阅读全文