简介
squareline studio 是一款专业的 ui 设计软件,它与 lvgl(light and versatile graphics library,轻量级通用图形库)紧密集成,允许用户通过直接拖放组件来设计用户界面,无需编写复杂的代码。
lvgl 是一个轻量化的、开源的、在嵌入式系统中广泛使用的图形库,它提供了一套丰富的控件和组件,只需要少量的内存和计算资源,使得在资源受限的设备上创建高端的图形界面成为可能。
squareline studio 支持多种组件和布局,用户可以自定义样式、动画和行为。设计完成后,它可以将设计直接导出为 c 代码,这些代码可以直接嵌入到嵌入式项目的源代码中,极大地简化了开发流程。它适合希望快速开发嵌入式设备用户界面的开发人员,特别是那些没有 ui 开发经验或不想直接编写 ui 代码的开发人员。
- 官方地址:https://squareline.io/
- 官方文档地址:https://docs.squareline.io/docs/squareline/
- lvgl 官方地址:https://lvgl.io/
软件安装
- 注册账号:https://squareline.io/sign-up
- 需验证下注册邮箱:
- 软件下载地址:https://squareline.io/downloads
- 下载为软件压缩包,解压缩后双击运行安装程序直接安装即可,安装完成后打开软件,输入注册邮箱、密码,点击
log in
:
- 勾选获取的许可证,点击
select license
:
- 许可证获取成功,点击
start squareline
即可开始使用:
工程配置
- 选择
create
,可以创建多种平台的 ui 工程,以桌面系统下的visual studio 2019
工程为例,配置工程信息,点击create
创建:
- 依次点击
file-->project settings
可重新配置工程:
- 此处可配置 ui 源码的导出路径,以及 lvgl 头文件
lvgl.h
的相对路径:
设计 ui
- 设计的 ui 界面如图所示,设计流程此处略:
导出源码
- 依次点击
export-->ui files
即可导出 ui 源码,若先前未配置导出路径,则需先选择 ui 源码的保存路径再导出:
- 导出成功后查看 ui 源码导出目录:
- 支持导出模板工程,依次点击
export-->template project
,浏览选择工程保存路径,即可导出:
- 查看模板工程导出目录:
- 用 visual studio 2019 打开,编译运行:
板级验证
- 将导出的 ui 源码添加到项目工程中,主程序中添加
ui.h
头文件,调用一次ui_init()
函数即可。
- 编译项目工程,下载、运行:
发表评论