|
手把手教你如何使用GUI-Guider LVGL作为免费开源图像库，为相关系列芯片在创建动画、建立高级图形以及构建多种效果块方面提供了极大的便利。此外，LVGL已经集成到MCUXpresso SDK包中，既可通过SDK下载导入也可直接在GUI Guider中导入。 GUI Guider作为恩智浦推出的即用型GUI，在对NXP设备免费的基础上，更有操作便捷、自动编程、中英文界面及输入等一系列优点。 下面以LPC54S018开发板为例，通过建立一个简易UI界面，来让大家熟悉它的基本操作流程及用法。相关文档及操作视频链接附在最后。
1.新建工程
选择V8 lvgl版本,LPC54S018开发板，EmptyUI，设置英文名称及路径，点击完成后进入主界面。 图1 2.设置整体背景
鼠标左键长按，将Tab拖动至GUI Editor，将其调整为全屏大小。 图2 3.在第一个界面中，我们添加时间显示和代办项功能。 1）在右侧红框内将界面名称改为Clock。 图3 2）将aclock时钟拖入编辑界面，对其大小位置进行调整，并按图4红框，进行时间设置。 图4 3）将dclock时钟拖入编辑界面，对其大小位置进行调整，并按图5红框，进行时间设置。 图5 4）将checkbox拖入编辑界面，对其大小位置调整，按图6，对其内容进行编辑。 图6 4.在第二个界面中，我们添加简单的计数功能，并设置进度条与其交互。
1）添加背景。点击Import，导入背景图片，在小部件中，将image拖入编辑界面，设置大小位置，在图片路径中选择导入好的图片并设置其透明度，如图7。 图7 2）添加计数值、进度条及按键。如图8、9和图10。
在图8在添加进度条时，在第二步设置起始值。进度条的范围值由lv_bar_set_range(guider_ui.screen_progress_bar, 0, 100);设置。可加在按键事件中，但每次点击都会触发。因此更推荐将此代码加在后续的导出文件costomer.c中，在初始化时设置一次即可。 图8 图9 图10 3）对进度条加上一些解释文本。操作步骤如图11。 图11 4）在相对应的按键中创建事件，选择Customer Code，写上相应的代码，完成交互。，以ADD按键为例，如图12。 图12 5.在第三个界面中，向大家展示3D动画效果。
1）设置3D图片。选择3Dimg，拖入编辑界面，在图片路径中设置图片，之后选择选择中心和旋转角度，如图13。 图13 2）设置展示开关。打开开关显示3D图片，关闭开关后，图片消失。如图14。 图14 6.在第四个界面中，添加帮助界面。
1）添加logo。添加img，导入图片设置透明度。 图15 2）对前三个模块进行解释。将list拖入编辑界面，新建行数并修改图片和文本。
在完成后，按图16生成代码。结果可直接进行仿真展示，也可导入开发板中，在图17中，上方为仿真展示，下方为直接下载到开发板中。仿真运行结果如图18。
将设计界面下载到开发板中常有两种方式，一是直接在图17中选择可用的IDE，通过GUI Guider直接下载。二是先导出源文件，在相关IDE例程中逐一替换，最后进行调试下载。 图16 图17 图18
视频讲解：
| 
/4 
发表于 2022-7-6 14:41:16
沉默卡
照妖镜
发表于 2022-7-6 15:03:10
发表于 2022-7-7 09:26:17
发表于 2022-7-7 09:55:48
