本帖最后由 小恩GG 于 2023-7-6 16:02 编辑
基于GUI Guider开发Smart Home技术分享 1．简介GUI Guider是恩智浦提供的用户友好型图形化界面开发工具，可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性，如小部件、动画和样式来创建GUI，而只需少量代码或根本无需任何代码。从GUI Guider生成的代码可以轻松添加到项目中，从而加快开发过程，并允许您无缝地将嵌入式用户界面添加到应用程序中。 近年来，智能家居（Smart Home）迅速兴起，发展势头强劲。智能家居将各种家用电器互连起来，提供照明控制、电话遥控、防盗报警和环境监测等服务。智能家居应用越来越广，但是好多开发人员觉得开发难度大，无从下手。利用恩智浦推出了GUI guider 可以提高开发速度，降低开发难度，缩短开发周期。 本文主要介绍了利用GUI Guider去实现智能家居（Smart Home）部分功能，分享GUI Guider使用过程中一些常用的方法，包括新建工程、添加控件、添加事件、界面设计与布局、控制硬件灯的亮灭等。 2. 开发环境2.1硬件环境：LPC54628的评估-LPCXpresso54628，同样适用于LPCxpresso54618, LPCxpresso54608。 2.2 软件环境：本智能家居演示用到的1.5.1版的GUI Guider来搭建软件环境。1.5.1版GUI Guider支持7.10.1和8.0.2版的LVGL。本介绍基于8.0.2版LVGL。 3. GUI Guider新建工程3.1、双击GUI Guider图标，启动GUI Guider。
3.2、单击Create a new project（“创建新项目”）按钮，启动项目创建过程。 3.3、选择LVGL版本为v8.3.2，然后单击Next（下一步）按钮 3.4、选择LPC54628作为目标板模板，然后单击Next（下一步）按钮。 3.5、选择空应用模板EmptyUI，点击下一步。
3.6、执行项目设置，设置项目名称、项目位置、屏幕型号(根据自己屏幕型号选择RK043FN66H或RK043FN02H)。 点击Creat创建项目。
3.7、项目创建完成后，界面如下图所示：
4.页面设计和布局 本小节主要介绍界面背景颜色调整、界面布局、多种控件（图片、图片按钮、文本和容器）添加和属性设置方式。4.1、创建image文件夹，项目中所需要的图片资源，放在所建image文件夹下
4.2、调整界面背景颜色 ① 单击Background颜色图标打开背景颜色设置。 ② 通过Gradient可以设置背景渐变色或单色。 ③ 然后通过移动小光圈选择背景颜色。
4.3、添加图片 ①打开控件选项。 ② 单击选择添加image控件。 ③ 然后在属性设置的Attribute框中单击图片形状按钮，会弹出Select Images。
在Select Images中挑选需要添加的图片，然后调整图片大小和位置，单击OK添加图片。
同样的方式，添加“小房屋”图片，在Widgets框下可以查看添加的图片和设置的图片名称，在Screen框下可以查看当前界面和设置的界面名称。
4.4、 添加文本 ①打开控件选项，选择单击Label控件。②在属性设置Text中设置文本内容为”SMART HOME”。③然后单击Background背景设置区域，设置Label控件背景。④设置Label控件颜色深度为0，无背景颜色。⑤在Font中设置字体颜色、大小、样式。
4.5、添加容器 容器本质上是具有布局和自动大小调整功能的基本对象。 ①打开控件选项，选择单击container添加容器控件，通过拖拽调整控件大小。②在属性设置中设置背景颜色。③然后Border中设置container容器控件的边框和圆角。
给添加的container容器控件命名为cont_TodayInfo，在container容器控件中添加其它控件，在Widgets可以查看给cont_TodayInfo容器添加的其它控件（包括图片、文本、线控件）。
4.6、添加图像按钮 图像按钮与简单的“按钮”对象非常相似。唯一的区别是它显示用户定义的每个状态下的图像。 ① 打开组件选项，选择单击imgbtn控件。②添加Released和Pressed的图片。
同样方式，添加其它imgbtn控件和Label控件。
5.界面切换本节主要介绍，如何创建子界面，以及主界面与子界面之间的切换。 5.1、添加第二个新界面 单击“+”添加新界面，给新界面重新命名为src_Light、并添加img、imgbtn控件和改变背景颜色。
5.2、添加界面切换触发条件 ①在第一个界面中选择imgbtn_Light 按钮。②选择Events设置。③单击“+“添加事件，然后进行事件的设置。④在事件设置中，需要选择触发条件，这里选择Clicked触发条件，Target选择需要加载的第二个新界面src_Llight，勾选删除当前界面。 程序运行时，当点击imgbtn_Light 按钮时，便会切换到第二个src_Light界面。
5.3、添加界面返回触发条件 ①选择imgbtn_Home控件。②在事件设置中，选择Clicked触发条件，Target选择需要加载的界面src_Welcome，勾选删除当前界面。 程序运行时，当点击imgbtn_Light 按钮时，便返回到src_Welcome第一个主界面。
5.4、对第二个界面进行设计 在第二个界面中添加控件，包括（Switch控件、Slider控件、Dropdown控件、image控件、imgbtn控件、label控件） Switch控件：该开关可用于打开/关闭灯，它看起来像一个小滑块。 Slider控件：滑块对象看起来像一个补充有旋钮的栏。可以拖动旋钮来设置值。滑块可以是垂直的，也可以是水平的。 Dropdown控件：下拉列表允许用户从列表中选择一个值。默认情况下，下拉列表处于关闭状态，并显示单个值或预定义文本。 image控件、imgbtn控件、label控件在前面已经介绍。
6．控制灯设计 智能家居通常会有灯的控制，通过控制界面控制硬件灯的亮灭，步骤如下：
6.1，GUI Guider生成代码工程
① 通过点击生成代码按钮，生成代码。
②单击“文件夹”图标，打开项目文件夹 6.2打开MDK工程
生成代码完成，打开项目文件夹后，在指定目录下打开MDK工程（支持MCUXpressoIDE, MDK, IAR）
6.3首先，在工程中加入控制灯开关的驱动 在lvgl_guider.c中添加GPIO初始化程序。
6.4、然后，在custom.c下添加自定义的Led控制函数 本例程添加了Led1_Control、Led2_Control、Led3_Control灯控制函数。
6.5、在GUI Guider 添加自定义事件程序 ① 选择第一个Switch控件，然后添加事件。 ② 在事件中，选择Trigger触发事件条件是Switch控件的打开和关闭，Target选项设置为Null。 ③ 在Action中选择以C语言形式添加自定义事件，单击后打开Edit Code。 ④ 在Edit Code中添加自定义事件函数（打开Led3，关闭led2、led1），另外需要添加自定义事件函数所在文件的头文件。 6.6、在MDK工程查看自定义事件 设置完成自定义事件后，在GUI Guider再次重新生成代码按钮后，可以在events_init.s找到设置的Led自定义触发事件。
7．程序下载与演示 工程开发完成后，下载，程序下载到开发板有两种方法： 用IDE（MCUXpresso IDE, KEIL or IAR）打开工程，编译下载程序到开发板； 在GUI Guider 中Target中选择MCUXpresso, Keil或者IAR会自动编译程序下载到开发板。 下图为在GUI Guider自动编译下载程序到开发板方法。
效果请参考附件中视频。
总结： 本篇主要分享基于GUI Guider的Smart Home界面设计，GUI Guider作为GUI设计的一款工具，功能强大，使用方便。本篇分享只是使用到GUI Guider少数部分功能，感兴趣的小伙伴们可以进一步学习发掘GUI Guider，工程代码Smart Home已放在附录，一起学习吧！ 在NXP官网可以找到GUI Guider的应用指导，以下也是学习使用GUI Guider时候，可以查找资料的一些方法。 1、 查看用户指导手册，单击help->User Guide
2、 控件设置和使用方法说明，可以单击下图小图标进行查看
附件：效果演示视频以及工程代码。 | 
/3 
发表于 2023-6-30 12:47:45
沉默卡
照妖镜
发表于 2023-6-30 15:30:26
发表于 2023-7-2 19:43:42
