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

news2025/1/10 11:31:35

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

图 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 是一个全新的工具,之后还会持续添加新的功能,敬请期待。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/669.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SPI、RS232、485、IIC通信协议详细总结

通信协议大全 文章目录通信协议大全前言一、异步通信和同步通信二、RS232和RS4851.RS2322.RS4853.RS232和RS485的区别4.RS232、485与普通串口的区别?三、SPI协议四、IIC协议1.IIC的时序介绍2.IIC传输数据的格式总结前言 通信协议是每一个嵌入式工程师必备的技能。下…

几道简单的Linux驱动相关面试题,你看你会几题?

一、Linux基础 1、任意3种网络操作的Linux命令,并说明他们的含义 1. ifconfig 命令 ifconfig 用于查看和配置 Linux 系统的网络接口。 查看所有网络接口及其状态:ifconfig -a 。 使用 up 和 down 命令启动或停止某个接口:ifconfig eth0 up 和 ifconfi…

WEB渗透扫描与加固

WEB渗透扫描与加固 1.通过PC2中渗透测试平台BackTrack5中的httprint工具对服务器场景Server2003检测HTTP服务器(调用signatures.txt), 并将该操作显示结果“Banner Reported:”之后的字符串作为FLAG提交; 切换路径至/pentest/enumeration/web/httprint下 使用命令./httpr…

阿里巴巴面试题- - -多线程并发篇(二十九)

前言:七月末八月初的时候,秋招正式打响,公司会放出大量的全职和实习岗位。为了帮助秋招的小伙伴们,学长这里整理了一系列的秋招面试题给大家,所以小伙伴们不用太过焦虑,相信你们一定能超常发挥,收到心仪公司的Offer~~ 内容涵盖:Java、MyBatis、ZooKeeper、Dubbo、Elast…

网络安全:技术趋势

下面列出了GlobalData确定的影响网络安全的关键技术趋势。 维护IT系统的安全性是各种类型组织的一项长期任务。网络攻击频繁且越来越复杂,由那些推动地缘政治事业的人或意图赚钱的攻击者实施。2021年,由于员工在疫情期间远程工作,企业在网络…

直流信号隔离采样

前言 最近在做一个案子,这个案子中的一点是高压电压信号隔离采样; 常见的隔离有: 光隔离(光耦) 磁隔离(霍尔,变压器) 等等。 那么要测量直流电压线性隔离如何实现?…

C语言中程序的环境和预处理简述

文章目录程序是如何执行的?翻译预编译条件编译文件的包含嵌套引用不同的引用方式预定义符号编译汇编链接运行程序是如何执行的? 有时候会问自己,程序的运行是那么简单的事情吗? 我鼠标点到 visual studio 上,程序就跑起来了,然后在界面就能…

项目管理:如何使用甘特图制定项目计划

甘特图能够很直观地显示项目任务、进度随着时间推进的进展情况。 横轴为时间,纵轴为项目事项,用条形图的方式直观地展现项目中所有任务的时间及进度。 它可以直观地表明项目中有哪些任务?任务计划在什么时候进行,及实际进展与计划…

基于Vue+node的图书馆座位预约选座管理系统

目 录 一、绪论 1 (一)选题背景简介 1 (二)目的和意义 2 (三)基本内容及目标 2 二 技术简介 4 (一) React 4 (二)Vue 4 (三)Egg.js 5 …

生产者消费者模型

什么是生产者消费者模型? 生产者和消费是操作系统中一种重要的模型,它描述的是一种等待和通知的机制。一、概念引入 日常生活中,每当我们缺少某些生活用品时,我们都会去超市进行购买,那么,你有没有想过&am…

Node.js之Hello World

目录 简介 1.安装 2.安装后的效果 3.准备尝试运行的代码 4.运行JS代码 5.访问正在运行的代码(Hello World) 简介 Node.js 是一个基于"Chrome V8 引擎" 的JavaScript "运行环境"; NodeJS不是一门编程语言, NodeJS是一个运行环境&#xff…

C语言题解 | 消失的数字轮转数组

… 🌳🌲🌱本文已收录至:C语言题解系列 更多知识尽在此专栏中! 🎉🎉🎉欢迎点赞、收藏、关注 🎉🎉🎉文章目录🍉前言🍉正文&…

这才是使用ps命令的正确姿势

这才是使用ps命令的正确姿势 前言 在linux系统当中我们通常会使用命令去查看一些系统的进程信息,我们最常使用的就是 ps (process status)。ps 命令主要是用于查看当前正在运行的程序,以及他们相关的的信息,我们可以通过不同的选项进行查看…

全球名校AI课程库(12)| CMU卡内基梅隆 · 数据库系统进阶课程『Advanced Database Systems』

🏆 课程学习中心 | 🚧 计算机基础课程合辑 | 🌍 课程主页 | 📺 中英字幕视频 | 🚀 项目代码解析 课程介绍 CMU 15-721 是 CMU 卡内基梅隆大学开放的数据库方向进阶课程,讨论了很多数据库方向新的技术研究方…

基于Matlab使用跟踪筛选器跟踪机动目标仿真(附源码)

此示例演示如何使用各种跟踪筛选器跟踪机动目标。该示例显示了使用单个运动模型和多个运动模型的滤镜之间的差异。 一、定义方案 在此示例中,定义了一个目标,该目标最初以 200 m/s 的恒定速度行进 33 秒,然后输入 10 度/秒的恒定转弯。转弯…

【C++】类和对象(中)

类和对象是面向对象语言的一个重要部分,承接上一话,我们直接开始这一章的内容。 文章目录 一、类的6个默认成员函数二、构造函数三、析构函数四、拷贝构造函数五、赋值操作符重载六、 const成员函数七、取地址及const取地址操作符重载八、相关习题的练习…

Windows系统常用网络命令详解及命令示例(全)

1.最基本也是最常用的,PING ping 192.168.0.8 -t 测试物理网络   ,参数-t是等待用户中断测试   2.检查DNS、IP、Mac等   A. Win98:winipcfg   B.Win2000及以上:ipconfig /all      C.NSLOOKUP:如果查看河北…

初阶c语言之浅识指针

学习导航:> 1.指针是什么? 2.指针和指针类型 2.1指针-整数 2.2指针的解引用 3.野指针 3.1野指针成因 3.2如何规避野指针 4.指针运算 4.1指针-整数 4.2指针-指针 4.3指针的关系运算 5.指针和数组 6.二级指针 7.指针数组 1.指针是什么? 指…

动态路由协议解析(rip)

因为今天是1024程序猿节,小刘就在这里祝各位程序猿大佬们节日快乐啦 作者介绍: 💰作者:小刘在C站 ✨每天分享课堂笔记 🌸夕阳下,是最美的绽放 目录 动态路由协议和 rip 1.动态路由 2.动态路由协议工作…

非线性方程求根——牛顿迭代法

一、牛顿法 1.实质:牛顿法实质上是一种线性方法,其基本思想是将非线性方程f(x)0逐步归结为某种线性方程来解。 2.牛顿法公式: 已知方程f(x)0有近似解xk,假设,将f(x)在点xk泰勒展开,有则方程f(x)0可近似表示为&#…