说明

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

安装与使用

1. 下载安装

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

2. 打开SquareLine Studio

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

3. 创建项目

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

4. 设计界面

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

5. 生成代码

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

接入SiFli Solution

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

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

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

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

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

2. 代码转换

2.1 放置源码

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

2.2 转换脚本

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

2.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, 点击资源刷新，即可看到上一步转换以后的应用。将需要编译的应用设置为预置，编译以后即可烧录到固件中运行。

3. 问题说明

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

3.1 字号适配

在Solution中能用的bitmap字号并不多，所以如果需要在squareline的工程中使用其他的字号，用户需要手动进行配置。后面以使用字号：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中，是否存在对应的字体文件：

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

3.2 控件适配

3.2.1 LVGL原生控件

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

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

3.3 色位匹配

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

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

然后打开Squareline Studio，点击file->project Settings打开设置页面，可以看到当前工程中的色位，我们需要将色位同步设置为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,与squareline使用的lvgl版本有差别。这导致squareline中使用到的部分接口在Solution中并不存在，这种情况下需要更新控件文件。