1. 介绍¶

SquareLine Studio 是一款专为嵌入式系统设计的UI开发工具，与LVGL紧密集成，提供图形化界面设计功能，支持通过拖放组件快速创建UI并自动生成代码，无需手动编写大量代码。用户如需使用，请自行下载安装。

2. 安装与使用¶

1. 下载安装¶

用户可以从SquareLine Studio的官方网站下载安装包，根据操作系统选择对应的版本进行下载。下载完成后，双击安装包进行安装，按照提示完成安装过程。

2. 打开SquareLine Studio¶

安装完成后，用户可以在应用程序列表中找到SquareLine Studio图标，双击打开该应用。

3. 创建项目¶

打开SquareLine Studio后，用户可以点击“文件”菜单中的“新建项目”选项，创建一个新的项目。在弹出的对话框中，用户需要填写项目名称、项目路径等信息，点击“确定”按钮创建项目。

4. 设计界面¶

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

5. 生成代码¶

设计完成界面后，用户可以点击“项目”菜单中的“生成代码”选项，将设计好的界面生成对应的C代码。用户可以在生成的代码中进行自定义修改，以满足项目需求。

3. 生成的代码如何接入Solution¶

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

6. 添加应用图标和缩略图¶

由于 Solution 支持两套应用菜单图标，并且支持预览应用缩略图，所以除了代码以外，还需要添加三个 PNG 图片。

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

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

7. 代码转换¶

7.1 放置源码¶

将 SquareLine 生成的工程代码放置在路径 solution\examples\_dynamic_app\squareline\app\origin 中，按照项目名进行分类。

7.2 转换脚本¶

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

7.3 编译代码¶

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

此时打开工程目录可以看到里面存在一个名称为readme.ini的文件，打开此文件可以看到其中有一项RES_0=410x494。请用户将410x494修改为应用的实际分辨率。编译器中只会显示与当前工程的分辨率相匹配的应用。比如黄山派的屏幕分辨率是390x450，那么此处只会显示出readme.ini中分辨率为390x450的应用。

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

8. 问题说明¶

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

8.1 字号适配¶

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

首先，在 HCPU 或 PC Simulator 工程中通过 menuconfig (Top) → Font Config → LV_FONT_MONTSERRAT Bitmap is used (USING_BITMAP_FONT) 使能 bitmap 字体。Font Config 是 Solution 框架直接加入根菜单的配置入口，LCPU 工程不显示。USING_BITMAP_FONT 无直接 depends on，默认关闭；启用后会自动选择 LV_FONT_MONTSERRAT_12、LV_FONT_MONTSERRAT_14、LV_FONT_MONTSERRAT_16、LV_FONT_MONTSERRAT_20、LV_FONT_MONTSERRAT_24、LV_FONT_MONTSERRAT_28 和 LV_FONT_MONTSERRAT_36，Solution 才会编译 bitmap 字体相关代码。

无需修改 sdk\external\lvgl_v8\src\lv_conf_internal.h；该文件由 LVGL 自动生成，会读取 Kconfig 生成的配置。启用 USING_BITMAP_FONT 后会自动选择 LV_FONT_MONTSERRAT_20，不应在源码或配置头中手工定义同名宏。

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

另外，如果在工具中使用ttf自行生成字体文件时，BPP必须设置为4，否则无法正常使用。

8.2 控件适配¶

8.2.1 LVGL原生控件¶

在 Solution 中，部分 LVGL 控件未被启用。因此，如果需要在 SquareLine 工程中使用未开启的控件，用户需要手动进行配置。下面以使用控件lv_btnmatrix为例。

优先通过 Kconfig 配置：menuconfig (Top) → SiFli SDK configuration → Third party packages → LittlevGL2RTT: The LittlevGl gui lib adapter RT-Thread (PKG_USING_LITTLEVGL2RTT) → LVGL configuration → select LVGL Version. → LVGL V8 → LVGL V8 configuration → Widget usage → Button matrix. (LV_USE_BTNMATRIX)。PKG_USING_LITTLEVGL2RTT 无直接 depends on，默认关闭；启用后 select LVGL Version. 默认选择 LVGL V8。LV_USE_BTNMATRIX 无直接 depends on，在未启用 LVGL minimal configuration. (LV_CONF_MINIMAL) 时默认开启；选择最小配置后默认关闭。该 SDK 配置路径在 HCPU、LCPU 和 PC Simulator 工程均可见。如果工程改为直接维护 lv_conf.h，才在该配置文件中设置 LV_USE_BTNMATRIX；两种方式不要同时维护，以免配置被覆盖。

8.2.2 色位匹配¶

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

当出现此问题时，先确认固件色位。SDK 的完整配置路径为：menuconfig (Top) → SiFli SDK configuration → Third party packages → LittlevGL2RTT: The LittlevGl gui lib adapter RT-Thread (PKG_USING_LITTLEVGL2RTT) → LVGL configuration → select LVGL Version. → LVGL V8 → LVGL V8 configuration → Color settings → Color depth.。先启用 PKG_USING_LITTLEVGL2RTT 并选择 LVGL V8；Color depth. 默认选择 16: RGB565 (LV_COLOR_DEPTH_16)，也可按实际屏幕选择 32: ARGB8888 (LV_COLOR_DEPTH_32) 等选项，再将 SquareLine Studio 的色位设为相同值。HCPU 和 PC Simulator 的 Solution 工程还可通过 menuconfig (Top) → LVGL config → Color depth. 修改同一组 LV_COLOR_DEPTH_* 符号；该 Solution 快捷菜单在 LCPU 工程不显示。

然后打开 SquareLine Studio，点击file -> project Settings打开设置页面，可以看到当前工程中的色位。需要将色位同步设置为16位色，然后重新生成导出代码。

8.3 开机无应用¶

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

8.4 函数接口未通过RTM_EXPORT声明¶

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

8.5 应用程序过大¶

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

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

8.6 LVGL版本差异¶

当前 SiFli Solution 使用的 LVGL 版本是 V8.3.1，与 SquareLine 使用的 LVGL 版本有差别。这会导致 SquareLine 中使用到的部分接口在 Solution 中并不存在，此时需要更新控件文件。