当前位置: 首页 > news >正文

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

如果您尝试过在没有图形库的情况下开发 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 则包含全部的历史信息、警告和错误信息。

图 1 - 主编辑器 – SquareLine Studio 示例项目

按下屏幕右上角的播放按钮可以启动模拟器,以模拟所有组件的动作和动画效果。您可以按下播放按钮试一下,看看 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 相对应。

图 2 - SquareLine Studio 中支持的乐鑫开发板

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

图 3 - 屏幕上的组件示例

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

图 4 - 在 ESP-BOX 上生成代码

SquareLine Studio 是否免费?

SquareLine Studio 对个人用户是免费的,但是有一些限制,每个项目最多可使用 5 个屏幕和 50 个组件。其他价格信息可参考 SquareLine 网站。

结论

我们认为,SquareLine Studio 对于帮助用户开发 UI 非常有用,在增加了开发板模版后,SquareLine Studio 的使用变得更为简单。它能使您更加便捷地编辑一些 UI 或调整组件位置。

但这个工具还缺少一些组件,例如 tabview 组件。此外,在组件之间复制格式的功能,以及乐鑫开发板的编译和烧录,都存在改进的空间。

SquareLine Studio 是一个全新的工具,之后还会持续添加新的功能,敬请期待。

相关文章:

  • 【链表算法题记录】两两交换链表中的节点
  • Linux 基本组件与性能优化与根目录
  • 五大方法教你如何分分钟构造百万测试数据!
  • 面试整理(昆明)去面试就更新
  • day11-项目集成SpringSecurity-今日指数
  • 基础光学系列:(三)揭秘机器视觉中的光圈、焦距与景深的作用
  • 中兴通讯携吉林移动迈向5G-A新阶段,完成3CC技术应用
  • wpf 3d 后台加载模型和调整参数
  • 文献速递:GAN医学影像合成--用生成对抗网络生成 3D TOF-MRA 体积和分割标签
  • RocketMQ生产环境常见问题分析与总结
  • 免费搭建个人网盘
  • 代码随想录算法训练营Day27 || leetCode 93.复原IP地址 || 78.子集 || 90.子集II
  • 最适合新手的100个深度学习实战项目
  • 队列的链式存储结构及其基本运算实现
  • 算法学习 【第一周】Ⅰ
  • Vue跳转页面隐藏底部导航tabbar的两种方法
  • memo,useCallback(),strapi,fetch,数据加载的提示,处理错误,await
  • Oh-My-Zsh安装与配置
  • “难产”的恒驰5,前途堪忧
  • 威胁情报分析平台
  • AtCoder Beginner Contest 272「ABCDE」
  • 基于虚拟机源码分析move合约(三):整数的位运算和强制转换
  • 【sklearn】模型融合_投票法
  • ASP.NET MVC会计教学管理端项目系列--Log4Net日志组件
  • AD域帐户密码过期,终端802.1x认证自动重连导致AD账号被锁,员工无法上网、办公怎么办?
  • iOS小技能:跳转到地图APP(navForIOSMap)
  • Unreal Engine源代码下载方法
  • JavaScript简识
  • 【正点原子STM32连载】第五十一章 视频播放器实验 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
  • 下一个(全)排列
  • 读懂MEV链上套利操作
  • Mac 电脑下载 AppStore 中的 ipa 软件包详细流程