基于 LVGL 使用 SquareLine Studio 快速设计 UI 界面

简介: 基于 LVGL 使用 SquareLine Studio 快速设计 UI 界面

简介

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() 函数即可。

  • 编译项目工程,下载、运行:

更多内容

  • CSDN博客:@Hello阿尔法
  • 哔哩哔哩:@Hello阿尔法
  • 知乎:@Hello阿尔法


相关文章
|
13天前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
随着移动应用市场的蓬勃发展,用户对界面设计的要求日益提高。为此,掌握由Google推出的Material Design设计语言成为提升应用颜值和用户体验的关键。本文将带你深入了解Material Design的核心原则,如真实感、统一性和创新性,并通过丰富的组件库及示例代码,助你轻松打造美观且一致的应用界面。无论是色彩搭配还是动画效果,Material Design都能为你的Android应用增添无限魅力。
30 1
|
2月前
|
编解码 前端开发 vr&ar
从零开始的PICO教程(4)--- UI界面绘制与响应事件
这篇文章是PICO开发系列教程的第四部分,主要介绍了如何在PICO 4 VR环境中创建UI界面,包括Canvas和Panel的配置、UI元素的绘制、以及Button和Slider的事件响应绑定,并通过示例展示了数字增减和滑块功能的具体实现。
从零开始的PICO教程(4)--- UI界面绘制与响应事件
|
2月前
|
编解码 Android开发
【Android Studio】使用UI工具绘制,ConstraintLayout 限制性布局,快速上手
本文介绍了Android Studio中使用ConstraintLayout布局的方法,通过创建布局文件、设置控件约束等步骤,快速上手UI设计,并提供了一个TV Launcher界面布局的绘制示例。
37 1
|
5月前
|
安全 Linux Nacos
如何使用公网地址远程访问内网Nacos UI界面查看注册服务
如何使用公网地址远程访问内网Nacos UI界面查看注册服务
286 0
|
2月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
47 0
|
3月前
|
XML Android开发 UED
💥Android UI设计新风尚!掌握Material Design精髓,让你的界面颜值爆表!🎨
【7月更文挑战第28天】随着移动应用市场的发展,用户对界面设计的要求不断提高。Material Design是由Google推出的设计语言,强调真实感、统一性和创新性,通过模拟纸张和墨水的物理属性创造沉浸式体验。它注重色彩、排版、图标和布局的一致性,确保跨设备的统一视觉风格。Android Studio提供了丰富的Material Design组件库,如按钮、卡片等,易于使用且美观。
96 1
|
3月前
|
异构计算 Python
30行代码实现一个带UI界面的图片背景移除工具:并附带web网页
人工智能技术正处于蓬勃发展中,移除图片背景的方法众多,涵盖了各式各样的实现途径和模型。然而,这些方法往往在安装和配置环境方面稍显复杂。今天,介绍一种极其简便的方法——大约30行代码,就能实现这一功能。虽然相比之下可能稍显简单,但对于不太苛刻的需求来说,这种方法颇为方便实用。
Pycharm主题切换(禁用)导致UI界面显示异常解决
问题记录 UI显示异常 安装多个主题时,当禁用某些主题,切换回one dark theme时,发现代码编辑窗口背景变成白色,菜单栏其他地方背景为黑色 问题原因 查看Settings>Editor>Color Scheme>General,发现方案被改为-Classic Light
|
4月前
|
XML Android开发 数据格式
【Android UI】使用RelativeLayout与TableLayout实现登录界面
【Android UI】使用RelativeLayout与TableLayout实现登录界面
48 5
|
5月前
|
JavaScript API
鸿蒙开发接口UI界面:【@ohos.mediaquery (媒体查询)】
鸿蒙开发接口UI界面:【@ohos.mediaquery (媒体查询)】
58 1
下一篇
无影云桌面