在 ESP 开发板上开发 UI 不再复杂

乐鑫科技 Espressif

已于 2022-10-25 10:26:17 修改

阅读量5k

点赞数 3

文章标签：乐鑫 ESP 开发板 UI LVGL

于 2022-10-17 18:21:21 首次发布

本文链接：https://blog.csdn.net/espressif/article/details/127366004

版权

SquareLineStudio是一款免费的可视化工具，支持使用LVGL图形库在没有图形库的情况下轻松开发UI。它提供了一个拖放界面，允许用户在多个平台上（如MacOS、Windows和Linux）创建和编辑屏幕，而无需深入理解LVGL的API。此工具特别适用于乐鑫芯片驱动的屏幕，内置了ESP-BOX和ESP-WROVER-KIT开发板的模板，简化了代码生成和导出过程。尽管还有改进空间，如增加更多控件和优化编译烧录流程，SquareLineStudio已显著提升了UI开发的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果您尝试过在没有图形库的情况下开发 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 显示屏大小相同的屏幕，左侧的两个标签栏中，Hierarchy 表示已经添加到屏幕上的控件列表，这些控件按层级排列。在其下方的 Widgets 代表了可用的控件。这里包含了 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 工程相对应。