说明

NXP GUI Guider 是恩智浦推出的嵌入式图形界面开发工具，基于开源LVGL图形库，提供可视化拖放编辑功能，支持快速开发高性能嵌入式GUI应用。

安装与使用

1. 下载安装

用户需从NXP官方网站下载安装包，注册账号后即可获取。按照提示完成安装过程即可。

2. 打开GUI Guider

安装完成后，在应用程序列表中找到GUI Guider图标，双击打开应用。

3. 创建项目

点击"文件"菜单中的"新建项目"选项，在弹出的对话框中填写项目名称、项目路径等信息。需选择LVGL版本、评估板模板(如MIMXRT1060-EVKC)和应用模板，点击"确定"按钮创建项目。需要注意，此处我们使用的LVGL版本为V8.3.11.

4. 设计界面

在界面设计区域，通过拖放组件的方式创建界面元素。GUI Guider提供了丰富的组件库，用户可以根据需求选择不同的组件进行设计。

5. 生成代码

设计完成后，点击"项目"菜单中的"生成代码"选项，将设计好的界面生成对应的C代码。生成的代码包含setup_ui()和events_init()函数，setup_ui()已包含事件绑定，无需重复调用events_init()。代码分为generated和custom两个文件夹，用户可在custom文件夹中进行自定义修改。

接入SiFli Solution

想要将GUI Guider制作的应用代码接入SiFli Solution中运行，需要手动操作几个步骤。

1. 添加应用图标和缩略图

由于Solution支持两套应用菜单图标。所以除了代码以外，我们需要添加两个png图片来当作应用图标。

在生成目录中手动创建一个文件夹《app_icon》,用于放置应用图标的png图片。

对于图片的名称固定:tn.png,tn2.png。
tn1为90x90的圆形图标，tn2为110x110的方形图标。

2. 代码转换

2.1 放置源码

将 GUI Guider 生成的工程代码放置在路径 solution\examples_dynamic_app\nxp\app\origin 中，按照项目名进行分类。

2.2 转换脚本

在路径：solution\components\nxp中存放有代码转换的批处理脚本nxp.bat以及代码模板。在完成了上一步放置源码的操作以后，双击nxp.bat即可开始一键转换代码。转换成功的结果如下图所示：

2.3 编译代码

在2.2中完成转换以后，会生成工程并放在路径：solution\examples\_dynamic_app\nxp\app\target中。在图中可见，有三个工程与源码中相对应。

然后打开编译工具：solution\tools\sifli_develop\Butterfli\Butterfli.exe, 点击资源刷新，即可看到上一步转换以后的应用。将需要编译的应用设置为预置，编译以后即可烧录到固件中运行。

注意：编译器中只会显示与当前工程的分辨率相匹配的应用。比如黄山派的屏幕分辨率是390x450，那么此处只会显示出分辨率为390x450的应用aircon。应用的分辨率信息写在应用目录下的readme.ini中，用户可以打开查看或者直接修改用于调试。

3. 问题说明

某些场景下转换以后的代码并不能直接运行，仍需做一些修改。

3.1 字号适配

在 Solution 中可用的 bitmap 字号并不多，所以如果需要在 NXP 的工程中使用其他的字号，用户需要手动进行配置。这里以使用字号 lv_font_montserrat_20 为例。

首先，在Hcpu的menuconfig中使能:Bitmap is used。只有使能此项，Solution编译的时候才会将bitmap相关的代码进行编译。

然后，在文件：sdk\external\lvgl_v8\src\lv_conf_internal.h中，找到LV_FONT_MONTSERRAT_20的宏定义，并将其配置为1。

同时需要检查资源路径：solution\examples\watch\resource\fonts\bitmap中，是否存在对应的字体文件：

3.2 控件适配

3.2.1 LVGL原生控件

在Solution中，部分LVGL的工具未被启用。所以如果需要在nxp的工程中使用没有开启的控件时，用户需要手动进行配置。后面以使用控件：lv_btnmatrix为例。

在文件：sdk\external\lvgl_v8\src\lv_conf_internal.h中，找到LV_USE_BTNMATRIX的宏定义，并将其配置为1。

3.2.2 NXP控件

nxp在GUI Guider的工程源码中提供了很多自定义的控件供GUI Guider使用，但是导出代码的时候没有一并输出到代码目录中，所以执行前面的步骤以后，仍然找不到这些控件来使用。这种情况下需要将nxp的自定义控件代码放到Solution中去参与编译。后续以smartwatch中的dclock为例。

当GUI Guider的工程中使用了数字时钟控件时，生成的代码中就会有dclock控件的引用。在初始化的时候就会报错。

dclock控件的原始文件在GUI Guider的项目路径下：smartwatch\lvgl\src\extra\widgets\dclock。
用户可以在代码的输出目录下，创建文件夹widget用来存放dclock的控件代码。

打开dclock的源文件和头文件，可以看到其中有宏定义来设置控件开关。由于Solution中并没有这个宏，所以我们直接将其修改为1。

重新编译下载即可完成适配。

3.3 色位匹配

可能会存在GUI Guider中配置的色位和固件代码中设置的色位不同的情况，此时编译会报错。

当出现此问题时，我们首先需要确认固件上的色位是多少。打开Hcpu的menuconfig，搜索color depth,可以看到当前工程配置的颜色为16位色。

然后打开GUI Guider，点击工程->系统设置打开设置页面，可以看到当前工程中的色位，我们需要将色位同步设置为16位色。然后重新生成导出代码。

3.4 开机无应用

当应用作为外置应用的情况下，在开机的时候可能因为初始化失败导致开机以后无法看到应用图标。开机的时候在log中搜索module，即可看到此应用初始化时候的相关信息。

3.4.1 函数接口未export

代码中部分接口可能并没有通过EXPORT进行声明，在固件初始化的时候会因为找不到函数导致初始化失败。
文件solution\framework\gui_fwk\dyn_fwk\export\lvsf_rtm_export.c是专用于存放export接口的文件。当在log中发现有接口未声明的时候，就需要用户到lvsf_rtm_export.c中去手动添加接口声明。

#if USING_BITMAP_FONT
    LV_FONT_DECLARE(lv_font_montserrat_14);
    RTM_EXPORT(lv_font_montserrat_14);
#endif

#ifdef lv_meter_h
    RTM_EXPORT(lv_meter_create);
    RTM_EXPORT(lv_meter_add_scale_lines);
    RTM_EXPORT(lv_meter_add_needle_line);
    RTM_EXPORT(lv_meter_add_arc);
    RTM_EXPORT(lv_meter_add_scale);
    RTM_EXPORT(lv_meter_set_scale_ticks);
    RTM_EXPORT(lv_meter_set_scale_major_ticks);
    RTM_EXPORT(lv_meter_set_scale_range);
    RTM_EXPORT(lv_meter_set_indicator_start_value);
    RTM_EXPORT(lv_meter_set_indicator_end_value);
    RTM_EXPORT(lv_meter_set_indicator_value);
#endif

3.4.2 应用程序过大

在搜索module的列表之中，可以看到dlm_malloc failed!的报错。这种情况就是应用程序过大，系统没有足够内存供程序运行。

这种情况只能缩减应用程序的大小，尽量减少其中的图片与自定义字体文件的使用。

3.4.3 LVGL版本差异

现在Sifli Solution使用的LVGL版本是V8.3.1,与nxp Gui Guider使用的lvgl版本有差别。这导致Gui Guider中使用到的部分接口在Solution中并不存在，这种情况下需要更新控件文件。控件文件都在Gui Guider的项目工程之中：lvgl\src\extra\widgets。