草庐IT

ESP32 ESP-IDF + LVGL + SquareLine Studio 设计 UI 界面

晨之清风 2023-05-25 原文

陈拓 2022/12/10-2022/12/12

1. 概述

关于SquareLine Studio，乐鑫官方的ESP技术文章有介绍：
在 ESP 开发板上开发 UI 不再复杂 - 知乎如果您尝试过在没有图形库的情况下开发 UI，那么您一定知道这有多困难。幸运的是，由乐鑫芯片驱动的屏幕，可支持用户使用多种图形库来开发 UI， LVGL 就是其中之一。通常情况下，在使用 LVGL 或类似的图形库前，用…https://zhuanlan.zhihu.com/p/574436496

SquareLine Studio是一个可视化工具，可使用LVGL图形库开发UI，且支持多个平台，如MacOS、Windows和Linux。在该工具中，我们通过拖放就可以在屏幕上添加和移动小控件，图像和字体的处理也变得十分简单。

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

SquareLine Studio的官方网址：https://squareline.io/

SquareLine Studio的官方文档：

https://docs.squareline.io/docs/squareline/

2. SquareLine Studio下载

下载网址：https://squareline.io/downloads

  • 下载最新版本可以免费试用30天

  • 下载以前版本个人可以免费使用

 

  • 选择版本和平台下载

我下载Windows平台SquareLine Studio 1.1.0

SquareLine_Studio_Windows_v1_1_0.zip

  • 解压

解压得到SquareLine_Studio_1.1.0_Setup.exe

  • 安装

双击exe文件进行安装，照着提示做就行。

3. 注册账号

https://squareline.io/sign-up

注册成功。

 

4. 获取个人许可证

  • 打开SquareLine Studio

 

  • 点击LOG IN

输入账号密码登录

 

  • 获取个人许可证

 

通过邮件确认

 

点击START SQUARELINE开始使用。

  • 查看个人许可证

https://squareline.io/profile/licenses

 

5. 软件附带的例子

进入软件界面后，点击Example可以看到几个例子：

 

我手头有一块ST7789 240x360的显示屏，我就选Smart_Gadget.spj。

  • 双击打开项目

 

可以看到功能齐全的设计工具和配置选项，我们今天的关注点不在这里，我们只是想看看例子的效果。

选择不同的页面，点击播放按钮，可以预览UI效果。

  • 项目设置

 

File > Project Settings

 

开发板选择ESP-BOX，它的显示屏是240x320的。详情可参考：

乐鑫官方ESP-BOX的硬件gitee仓库：

https://toscode.gitee.com/EspressifSystems/esp-box/blob/master/docs/hardware_overview/esp32_s3_box/hardware_overview_for_box_cn.md

乐鑫官方ESP-BOX的硬件github仓库：

GitHub - espressif/esp-bsp: Board support components for Espressif development boards

点击APPLY CHANGES完成设置，设计页面转换为适合显示屏大小。

 

  • 导出设计文件

点击Export > Export UI Files

选择一个目录保存导出的代码：

  • 复制ui目录到ESP-IDF项目中

我们使用在《ESP32 ESP-IDF LVGL8.3.3移植》

ESP32 ESP-IDF LVGL8.3.3移植_晨之清风的博客-CSDN博客ESP32 ESP-IDF LVGL8.3.3移植。https://blog.csdn.net/chentuo2000/article/details/128269394?spm=1001.2014.3001.5501

一文中创建的项目。

将ui目录复制到main目录下：

 

  • 修改main.c

添加头文件：

#include "ui.h"

修改create_demo_application函数：

static void create_demo_application(void)
{
    ui_init();
}
  • 修改main目录下的CMakeLists.txt文件
idf_component_register(SRCS "main.c" 
"../ui/ui.c" 
"../ui/ui_comp.c" 
"../ui/ui_font_Number.c" 
"../ui/ui_helpers.c" 
"../ui/ui_img_album_png.c" 
"../ui/ui_img_avatar_png.c" 
"../ui/ui_img_backward_png.c" 
"../ui/ui_img_chatbox_png.c" 
"../ui/ui_img_chatbox2_png.c" 
"../ui/ui_img_clock_hour_png.c" 
"../ui/ui_img_clock_min_png.c" 
"../ui/ui_img_clock_sec_png.c" 
"../ui/ui_img_cloud_png.c" 
"../ui/ui_img_forward_png.c" 
"../ui/ui_img_pattern_png.c" 
"../ui/ui_img_phone_png.c" 
"../ui/ui_img_play_png.c"
"../ui/ui_img_weather_1_png.c"  
"../ui/ui_img_weather_2_png.c" 
"../ui/ui_img_weather_3_png.c" 
                    INCLUDE_DIRS "." "../ui")
  • 编译

idf.py build

编译错误：

 

在配置中选中18号字：

 

再编译成功。

  • 烧写

idf.py -p /dev/ttyUSB0 -b 460800 flash

  • ST7789 320x240屏显示效果

横屏

 

竖屏

 

参考文档

  1. 在 ESP 开发板上开发 UI 不再复杂
    在 ESP 开发板上开发 UI 不再复杂 - 知乎
  2. 在基于乐鑫芯片的用户定制开发板上开发 UI
    在基于乐鑫芯片的用户定制开发板上开发 UI - 知乎
  3. 捌月 / LVGL+ESP32桌面小时钟
    LVGL+ESP32桌面小时钟: 这一款非常实用的桌面小时钟，采用esp32和Lvgl视频链接：https://www.bilibili.com/video/BV1ud4y1w7M8

SquareLineESPmargin-leftstylemarginuiESP32LVGL

有关ESP32 ESP-IDF + LVGL + SquareLine Studio 设计 UI 界面的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - Rails - 子类化模型的设计模式是什么？ - 2

    我有一个模型:classItem项目有一个属性“商店”基于存储的值，我希望Item对象对特定方法具有不同的行为。Rails中是否有针对此的通用设计模式？如果方法中没有大的if-else语句，这是如何干净利落地完成的？ 最佳答案 通常通过Single-TableInheritance. 关于ruby-on-rails-Rails-子类化模型的设计模式是什么？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.co

  3. ruby-on-rails - 使用 rails 4 设计而不更新用户 - 2

    我将应用程序升级到Rails4，一切正常。我可以登录并转到我的编辑页面。也更新了观点。使用标准View时，用户会更新。但是当我添加例如字段:name时，它​​不会在表单中更新。使用devise3.1.1和gem'protected_attributes'我需要在设备或数据库上运行某种更新命令吗？我也搜索过这个地方，找到了许多不同的解决方案，但没有一个会更新我的用户字段。我没有添加任何自定义字段。 最佳答案 如果您想允许额外的参数，您可以在ApplicationController中使用beforefilter，因为Rails4将参数

  4. ruby-on-rails - 如何在 Ruby on Rails 中实现由 JSF 2.0 (Primefaces) 驱动的 UI 魔法 - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。问题1)我想知道ruby​​onrails是否有功能类似于primefaces的gem。我问的原因是如果您使用primefaces(http://www.primefaces.org/showcase-labs/ui/home.jsf)，开发人员无需担心javascript或jquery的东西。据我所知，JSF是一个规范，基于规范的各种可用实现，prim

  5. STM32读取串口传感器数据（颗粒物传感器，主动上传） - 2

    文章目录1.开发板选择*用到的资源2.串口通信（个人理解）3.代码分析（注释比较详细）1.主函数2.串口1配置3.串口2配置以及中断函数4.注意问题5.源码链接1.开发板选择我用的是STM32F103RCT6的板子，不过代码大概在F103系列的板子上都可以运行，我试过在野火103的霸道板上也可以，主要看一下串口对应的引脚一不一样就行了，不一样的就更改一下。*用到的资源keil5软件这里用到了两个串口资源，采集数据一个，串口通信一个，板子对应引脚如下：串口1，TX：PA9，RX：PA10串口2，TX：PA2，RX：PA32.串口通信（个人理解）我就从串口采集传感器数据这个过程说一下我自己的理解，

  6. LC滤波器设计学习笔记（一）滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》，侵权删。前言最近需要学习放大电路和滤波电路，但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放，所以也是相当从零开始学习了。滤波电路科普主要分类滤波器：主要是从不同频率的成分中提取出特定频率的信号。有源滤波器：由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波，最普通易于采用的无源滤波器结构是将电感与电容串联，可对主要次谐波（3、5、7）构成低阻抗旁路。无源滤波器：无源滤波器，又称

  7. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  8. ruby-on-rails - 设计注册确认 - 2

    我在我的项目中有一个用户和一个管理员角色。我使用Devise创建了身份验证。在我的管理员角色中，我没有任何确认。在我的用户模型中，我有以下内容:devise:database_authenticatable,:confirmable,:recoverable,:rememberable,:trackable,:validatable,:timeoutable,:registerable#Setupaccessible(orprotected)attributesforyourmodelattr_accessible:email,:username,:prename,:surname,:

  9. ruby-on-rails - 设计通过 reset_password_token 获取用户 - 2

    我正在尝试创建密码规则来设计可恢复的密码更改。我通过passwords_controller.rb做了一个父类(superclass)，但我需要在应用规则之前检查用户角色，但我所拥有的只是reset_password_token。 最佳答案 假设您的模型是用户:User.with_reset_password_token(your_token_here)Source 关于ruby-on-rails-设计通过reset_password_token获取用户，我们在StackOverflow

  10. ruby-on-rails - Rails 5，公寓和设计 : sign in with subdomains are not working - 2

    我已经使用Apartment设置了一个Rails5应用程序(1.2.0)和Devise(4.2.0)。由于某些DDNS问题，应用只能在app.myapp.com下访问(请注意子域app)。myapp.com重定向到app.myapp.com。我的用例是每个注册该应用的用户(租户)都应该通过他们的子域(例如tenant.myapp.com)访问他们的特定数据。用户不应限定在其子域内。基本上应该可以从任何子域登录。重定向到租户的正确子域由ApplicationController处理。根据Devise标准，登录页面位于app.myapp.com/users/sign_in。这就是问题开始的

随机推荐