如果您尝试过在没有图形库的情况下开发 UI,那么您一定知道这有多困难。幸运的是,由乐鑫芯片驱动的屏幕,可支持用户使用多种图形库来开发 UI, LVGL 就是其中之一。通常情况下,在使用 LVGL 或类似的图形库前,用户必须先了解清楚它们的 API,以及如何使用这些 API 来开发 UI。然而现在我们可以省略这些复杂的步骤了。
SquareLine Studio 不仅可以帮助用户开发出更精美的 UI,并且无需了解额外的 LVGL API 信息。
SquareLine Studio
SquareLine Studio 是一个可视化工具,可使用 LVGL 图形库开发 UI,且支持多个平台,如 MacOS、Windows 和 Linux。在该工具中,我们通过拖放就可以在屏幕上添加和移动小组件,图像和字体的处理也变得十分简单。
启动 SquareLine Studio 并创建一个新项目(或打开一个示例项目)后,会出现主编辑器视图。如图 1 所示,中间部分是一个或多个与输出 LCD 显示屏大小相同的屏幕,左边是一些可以添加到屏幕上的组件,这些组件按类别分层放置,下面是另一些可用的组件。这里没有包括所有的 LVGL 组件,只包括其中的大部分。右边有三个标签。其中 Inspector 是最重要的,Font manager 也非常有用。根据选择的组件不同,Inspector 会产生相应的变化,包括改变组件的外观。Event 可为选中的组件添加事件,有多种事件可供选择,包括点击、滑动等。Font manager 可以使用任意 TTF 字体文件制作 LVGL 字体,并可以只选择一部分字符以节省内存。下方有两个标签。其中 Assets 包含项目中所有的多媒体文件,Console 则包含全部的历史信息、警告和错误信息。

按下屏幕右上角的播放按钮可以启动模拟器,以模拟所有组件的动作和动画效果。您可以按下播放按钮试一下,看看 UI 会有什么变化。
在最上面的菜单栏里,可以看到 Export 菜单,用于创建代码文件及导出 UI 文件。
SquareLine Studio v1.1 引入了新的功能——开发板模版,里面包含一些公司预先开发好的开发板模板,所以您可以为相应的开发板生成包含 UI 代码的完整项目。可通过 Export -> Create Template Project 来创建项目,然后通过 Export -> Export UI Files 来导出 UI 文件(改动 UI 文件后,必须重新进行导出)。
SquareLine Studio 支持的 ESP 开发板
在 SquareLine Studio 中,乐鑫创建了两款开发板模板,即 ESP-BOX 与 ESP-WROVER-KIT。使用 Create 创建应用程序之后,就可以在 Espressif 菜单中选择相应的开发板(图 2)。每个开发板都包含尺寸、旋转角度及色彩深度等信息,与生成代码中的 ESP-BSP 相对应。

选择开发板之后,您可以在应用程序的主编辑器中看到一个空白屏幕。这个空白屏幕与开发板屏幕大小相同。然后,如图 3 所示,您就可以在屏幕上拖放一些小组件、放置文本,以及设置事件。

创建模版文件 (Export->Create Template Project) 并导出 UI 文件 (Export->Export UI Files) 之后,就和在其他 ESP 示例项目中一样(如果您之前使用过 ESP-IDF),可以通过以下步骤编译并烧录项目。

SquareLine Studio 是否免费?
SquareLine Studio 对个人用户是免费的,但是有一些限制,每个项目最多可使用 5 个屏幕和 50 个组件。其他价格信息可参考 SquareLine 网站。
结论
我们认为,SquareLine Studio 对于帮助用户开发 UI 非常有用,在增加了开发板模版后,SquareLine Studio 的使用变得更为简单。它能使您更加便捷地编辑一些 UI 或调整组件位置。
但这个工具还缺少一些组件,例如 tabview 组件。此外,在组件之间复制格式的功能,以及乐鑫开发板的编译和烧录,都存在改进的空间。
SquareLine Studio 是一个全新的工具,之后还会持续添加新的功能,敬请期待。