Waveshare SquareLine Studio

简介

• Squareline Studio 是一个多平台设计师工具，可帮助设计师和开发人员以快速高效的方式工作。我们的目标是帮助设计师和开发人员使用相同的文件格式，而 SquareLine Studio 通过为您的项目创建完美的代码来实现这一点。无论您使用的是 C 语言还是 Python 语言，您都可以导出两者的代码。

安装

• Intel x64 PC 最低配置
  • CPU：支持 64 位的 Intel 或 AMD 处理器，1.5 GHz 或更快的处理器
  • RAM: 4 GB
  • HDD: 2 GB of storage space
  • GPU：支持 DirectX 11 或 OpenGL 3.2
• 操作系统
  • Windows 7 或更高版本（64 位）
  • 屏幕分辨率：1280 x 800
  • 需要 Internet 连接才能激活软件
• 下载并解压安装SquareLine Studio

• 双击SquareLine_Studio_Setup.exe进行安装

• 

  点击设置

• 

  设置安装目录后点击OK

• 

  点击Install，开始安装

• 

  安装完成，点击Finish

设计工具介绍

• 在桌面找到squareline studio图标，双击打开,打开后，可以使用或者登录

• 进入后，点击Create -> Desktop -> VS Code,下图所示：
  
  • Board Description：所选板的描述
  • Project Description：项目的描述
  • Project Settings：
    • Project name：工程名称
    • 工程路径
    • Resolution：屏幕分辨率
    • Rotation：屏幕旋转角度
    • Offset：偏移量设置
    • Shape：选择矩形还是圆形
    • Color depth：颜色深度
    • LVGL version：LVGL版本
    • Theme：主题颜色
    • Multilanguage：多语言模式
  • Create： 添加所有必需的参数后，您可以创建项目
    • 这边以waveshare ESP32-S3-Touch-LCD-4.3B-BOX的参数为例来创建项目
• 如果需要使用SquareLine Studio示例，只需从列表中选择适当的一个，然后单击“打开所选项目”按钮来加载它。
• 许可证相关信息可以参考此链接

• 编辑器布局介绍
• Preferences 介绍
• Project Settings 介绍
• Animation Panel 介绍
• Asset Panel 介绍
• Console Panel 介绍
• Font Manager Panel 介绍
• Hierarchy Panel 介绍
• History Panel 介绍
• Screens Panel 介绍
• Inspector Panel 介绍
• Widget Panel 介绍
• Error Panel 介绍
• 小部件类型介绍
• Styles 介绍
• Themes 介绍
• Events 介绍

编辑器布局介绍

• 该编辑器有三个主要部分：标题菜单、面板窗口和可编辑视图。在编辑器模式下，面板可以自由定位和测量，以创建您选择的工作空间。
• File
  • New：进入到创建页面
  • Open：进入到打开页面
  • Save：保存项目
  • Save As：另存为项目
  • Project settings：程序的常规设置
  • Preferences：当前项目的设置
  • Exit：关闭程序
• Export
  • Export UI Files：将项目导出为 C 文件
  • Create Template Project：根据设置的 OBP 配置导出模板项目
• Help
  • SquareLine Studio docs：进入到 SquareLine Studio 的文档
  • LVGL website：链接到 lvgl.io 网站
  • Youtube channel：链接到 SquareLine Studio 频道
  • EULA：链接到实际的最终用户许可协议
• 面板的基本元素介绍
  • Animations：创建和管理动画
  • Assets：可在项目中使用的图像和字体
  • Console：程序日志和错误消息
  • Font Maker：创建自定义字体
  • Hierachy：选择并放置添加到屏幕的元素
  • History：程序保存您的操作。它最多可以记录 200 个操作
  • Inspector：在 Inspector 面板中，您可以查看所选小组件的参数，并可以为其分配事件
  • Error：错误面板主要显示缺少参数的错误
  • Screens：您可以找到屏幕列表，选择并管理它们
  • Widget：您可以将此处列出的 Widget 放置在屏幕上
• 可编辑视图
  • 您可以在“可编辑视图”中编辑屏幕。单击小部件，可以对其进行选择、移动和缩放。长按鼠标中键，您可以平移屏幕，通过滚动滚轮，您可以放大或缩小。当用鼠标右键单击屏幕时，会出现一个小部件列表，您可以从中选择您喜欢的小部件。在屏幕之间的空白区域按住鼠标左键可平移屏幕。
  • 可以在可编辑视图界面中移动屏幕。通过在屏幕标题上按住鼠标左键并移动鼠标，您可以将其重新定位在界面上的任何位置。
  • ：逐个撤消或重做您的操作
  • ：使用此功能，您可以在屏幕上打开和关闭纹理过滤器。如果启用此功能，那么如果您放大或缩小屏幕，屏幕不会像素化。
  • ：使用鼠标滚轮或定义放大或缩小的比例
  • ：按下它后，所选屏幕将居中
  • ：播放所选屏幕动画

Preferences 介绍

• UI scale：放大或缩小 UI 设计
• Autosave：软件会定期自动保存项目，此功能不仅会覆盖项目文件，还会将在不同时间创建的文件保存在软件的 autosave 文件夹中
• Check for updates：可以在此处找到程序的标题和当前版本，以及 CHECK FOR UPDATES 按钮，您可以使用该按钮检查是否有程序的更新版本
• Undo history size：您可以设置要保存的历史记录版本数。此数字越高，您的计算机需要的内存就越多
• Default align：选择小组件的默认 ALIGN
• Format .spj and .ecomp files：是否格式化 .spj 和 .ecomp 文件
• Reset UI layout：按下重置按钮可将编辑器布局恢复为其默认状态
• Licence：您可以在此处找到该程序的许可证信息。您可以通过单击 REVOKE LICENSE 按钮来删除当前许可证
• About：SqaureLine Studio 信息
• Hot Keys：程序中可以使用的键盘快捷键列表

Project Settings 介绍

• Properties：项目的分辨率、颜色深度、旋转、偏移量、形状和命名方式设置
  • Object Naming：通过此功能，您可以为命名控件指定前缀选项，您可以使用屏幕名称或控件类型来补充控件的导出名称。与之前的版本相比，如果我们设置了屏幕名称在控件名称之前显示，之后更改屏幕名称时，我们不再需要逐个重命名每个控件。
  • Name：名字
  • Screen_name：用屏幕名称补充给定名称
  • [Screen]_Name：用屏幕名称补充给定名称，并用下划线分隔它们
  • [Screen_Widget]_Name：使用屏幕和小组件类型名称补充给定名称，以下划线分隔
  • [Screen]Name：用屏幕名称补充给定的名称
  • [ScreenWidget]Name：使用屏幕和 Widget 类型名称补充给定名称
  • [ScreenWidget]_Name：用屏幕和小组件类型名称补充给定名称，以下划线分隔
• Force Exported Names：通过选中此复选框，所有字母将在导出过程中转换为小写
• Board properties：选择开发板、IDE 和 LVGL 版本
• File export:文件导出
  • Project Export Root：导出项目模板项目文件的路径
  • UI Files Export Path：导出生成的 UI 文件的路径
  • LVGL Include Path：LVGL 库 lvgl.h 所在的路径
  • Multilanguage support：选择项目是否应支持多种语言（翻译）
  • Call function export file：您可以选择导出 ui_event 文件时使用的文件扩展名
  • Image export mode：要加载的图像/图片文件可以位于不同的位置，具体取决于所选的 LVGL fsdrv 驱动器类型
    • 对于 STDIO、POSIX、WIN32 模拟驱动器/分区，将在导出的代码中创建一个驱动器文件夹，其名为 assets 的子文件夹包含图像
    • 对于 FATFS（和 LVGL-8.3.11 支持的 LittleFS）实体驱动器，专用的 Flash 分区或外部 SD 卡等可以保存图像。您需要将 assets 文件夹从 drive 文件夹复制到 real 分区中
  • Force export all images：不仅导出使用的图像，还导出 assets 文件夹中的所有图像
  • Flat export：如果在项目设置中启用了此功能，则所有 UI 文件都将导出到单个文件夹中，而不是导出到屏幕、字体、图像等文件夹中。对于某些不处理目录的构建系统（例如 Arduino）来说，这可能很有用。
  • Project description：您可以修改开始时给出的项目描述

Animation Panel 介绍

• 您可以在动画面板中创建和管理自定义动画。您可以向每个动画添加多个动画属性，以便制作复杂的动画
• Add new animation：添加新动画
  • 在创建新动画之前，您应该为其选择一个名称。然后，它将被添加到 管理动画 通过单击列表 添加动画 按钮
• Manage animation：管理动画
  • 您可以在此部分中编辑选定的动画。您可以在此处创建、编辑或删除动画属性
• Select animation：选择动画
  • 您可以从下拉菜单中选择您的动画。您可以通过单击 Default 列表中首选小组件上的 按钮来启动选定的动画。可以通过单击 按钮来删除动画。在这种情况下，它将从已添加到的所有小部件中删除。
• Animation name：动画名称
  • 在此部分中，您可以重命名选定的动画
• Test object：测试对象
  • 在这里，您可以选择要测试当前动画的小部件
• Add property：添加属性
  • 属性是动画的属性。但是，并非每个属性都可以在所有小部件中使用
    • Position X：在 X 轴上移动
    • Position Y：在 Y 轴上移动
    • Width：设置小组件的宽度
    • Height：设置小组件的高度
    • Opacity：设置小组件的不透明度。这将更改 widget 的父不透明度。在这种情况下，子不透明度也会发生变化
    • Image angle：将图像构件旋转任意角度
    • Image zoom：放大或缩小图像 Widget
    • Image frame animation：可用于在彼此之后显示图像。图像的名称应以相同的文件名开头，但应以一个数字结尾，指示图像在序列中的索引。SquareLine 会自动识别这些图像序列，并且可以像任何其他属性一样对它们进行动画处理。Start （开始） 和 End （结束） 值指示从何处到哪个图像播放动画
• 每个动画都有四个参数：开始值和结束值、运动时间和延迟。在这里，您还可以设置动画的特征，下面我们来看看这些都是什么吧：
  • Start Value：动画的起始值
  • End Value：动画的结束值
  • Relative：如果选中，Start（开始）和 End（结束）值，则将相对于当前值进行解释
  • Delay：动画的延迟时间（毫秒）
  • Time：动画的运动时间（毫秒）
  • Instant：如果未选中，则 Start 值将仅在 “Delay” 之后应用
  • Playback delay：播放动画之前的延迟 （毫秒）
  • Playback time：动画播放的时间（0 将禁用播放）
  • Loop delay：重新启动动画之前的延迟（毫秒）
  • Loop count： 重复动画此次数
  • Infinite：选择则无限重复动画
  • Animation types：动画类型，您可以从 5 个动画特征中进行选择

Asset Panel 介绍

• 添加到项目中的图像和字体将显示在“Asset”中。创建项目后，还创建了一个 Asset 文件夹。如果您将项目所需的图像复制到那里，程序将自动加载它们，并在 资源面板中列出它们。允许使用 PNG 和 JPG 格式的图像。如果您在 资源面板中双击图像，它将在默认图像浏览器中打开
• 可以使用文件右上角的图标删除资产。此操作还会从项目文件夹中删除资源
• 如果要将字体添加到项目中，应将它们复制到 Asset/Fonts 文件夹中。然后程序将自动加载它们
• Add files into assets：将文件添加到 Assets 中
  • 如果要将图像添加到Assets，有两种方法可以做到这一点。您可以使用文件管理器程序将图像复制到 Asset 文件夹，也可以单击 Add file into Assets 按钮并选择要添加的图像，然后它会自动进入资源中

Console Panel 介绍

• 您可以在控制台面板中找到程序log和错误信息

Font Manager Panel 介绍

• 您可以在嵌入式 GUI 中使用操作系统字体。LVGL 应用 UTF-8 编码在任何语言上显示 Unicode 字符。在这里，您可以为 GUI 项目生成新字体。使用字体转换器工具，您可以从任何 TTF 或 WOFF 字体创建 C 数组。您可以选择 Unicode 字符的范围并指定 bpp（每像素位数）
• Create New Font：您可以在 Create New Font 部分创建新字体。在创建字体之前，您应该将至少一种字体复制到项目的 Assets/Fonts 文件夹中。您只能从文件夹中列出的字体生成新字体
  • Font Name：您可以可以命名您的字体
  • Select Font Asset：您可以从下拉菜单中选择 Assets/Fonts 文件夹中列出的字体
  • Font Size：您可以定义字体的大小
  • Bpp：您可以以每像素位数为单位定义字母边缘的模糊度
  • Letters：可以从 ASCII 字符列表中选择生成字体中的字母。默认设置是只有那些被选中的字母包含在生成的字体中
  • Range：您还可以定义自定义字母范围，即您想要包含的范围 和/或 字符，例如 0x20-0x7F、0x200、450
  • Symbols：要包含的字符列表。例如ABC0123ÁÉŐ
• Created Fonts：您可以在此处找到您的字体，您也可以修改或删除这些字体

Hierarchy Panel 介绍

• 在 Hierarchy 中，您可以找到按层次结构顺序显示在场景中的小组件列表。当然，您可以修改 Widget 顺序
• 在层次结构窗格的顶部，有一个搜索字段，允许您在层次结构列表中进行搜索
• 在搜索字段旁边，有一个图标，您可以使用该图标仅显示那些包含事件的小组件
• 登记项目前面的图标将显示小部件的类型。在图标旁边，是小部件的名称。选择列表项时，右侧会显示三个图标：
  • ：锁定小组件的位置
  • ：使用眼睛图标打开和关闭隐藏
  • ：上下文菜单
    • Duplicate：创建所选 Widget 的副本
    • Copy：将所选窗口小部件放置在剪贴板上
    • Paste：在所选 Widget 旁边插入剪贴板项
    • Paste as a child：将 Widget 作为所选 Widget 的子项插入到剪贴板上
    • Delete：删除选定的小组件
• 如果将事件添加到小组件中，则小组件名称之前会出现一个点，该点可以是绿色或红色
  • 绿点 - 指示小组件具有具有正确设置的事件
  • 红点 - 指示小组件具有事件，但某些操作缺少目标小组件。对于图像 Widget，它还指示缺少目标图像

• 

  正确设置

• 

  错误设置

• 在列表项上长按鼠标左键，您可以移动它并在释放时重新定位它。如果将一个小部件移动到另一个小部件的顶部，则顶部的那个将是子部件

History Panel 介绍

• History 中有一个操作列表。该程序最多可以将 200 个操作记录到列表中。选择列表中的任意操作，项目将恢复为之前的状态。如果在设置回项目后修改了项目的任何元素，则所选元素之后的操作将消失

Screens Panel 介绍

• 创建项目会导致创建屏幕。您可以通过单击屏幕小部件来添加新屏幕。在 Screens 面板中，可以通过拖放方法重新定位屏幕元素
• 选择一个列表项，右侧会显示三个图标：
  • ：删除选定的小组件
  • ：锁定小组件的位置
  • ：创建所选小组件的副本
• 在列表项上长按鼠标左键，您可以在释放时移动它并重新定位它
• Initial actions：层次结构面板的第一个元素始终是一个特殊的 “Initial actions” 元素。它不能被移除或移动。通过选择此元素，可以创建事件操作，该操作将在创建 UI 时运行一次。例如，它可用于创建初始动画

Inspector Panel 介绍

• Inspector 中有所选 widget 的参数。您可以向它们添加样式和事件
• 所有小组件都有必需的参数，例如名称、转换、标志和状态。此外，也可能有特殊设置
• Name：小组件命名
  • 名称的开头不能有数字、下划线或特殊字符。导出代码后，您可以按该名称找到 Widget
• Layout：您可以使用布局自动排列 Widget 的子项。如果启用了布局，则无法手动调整子项的 X 和 Y 值，除非在子项上启用了 IGNORE_LAYOUT 或 FLOATING 标志
  • Flex flow：行或列布局
• Transform：定义每个 widget 的位置和大小，以及它与自己的父级的对齐方式
  • X、Y：小组件的 X 和 Y 位置
    • 此值可以以像素或百分比添加。Percent 值将引用父 widget 的大小
  • Width，Height：小组件的宽度和高度
    • 此值可以像素、百分比添加，或者内容可以定义参数。百分比值将引用父 Widget 的大小，内容将复制子 Widget 的最大大小
    • 如果父级具有 Flex 布局，则子级的宽度/高度也可以以 fr 单位设置。它指示从轨道中的可用空间中按比例占用多少空间
  • Align：小组件与父项的对齐方式
• Flags：标志是连接到小部件的不同属性，可以启用或禁用
• 主要标志
  • Hidden：隐藏对象
  • Clickable：使对象可由输入设备单击
  • Checkable：单击对象时切换选中状态
  • Press lock：即使按压从对象上滑落，也保持按下对象状态
  • Click focusable：单击时向对象添加焦点状态
  • Adv hittest：允许执行更准确的命中（点击）测试。例如，考虑圆角
  • Ignore layout：使对象可由布局定位
  • Floating：当父项滚动并忽略布局时，不滚动对象
  • Overflow visibile：不将子项的内容剪辑到父项的边界
  • Flex in new track：允许创建自适应布局，可以自动调整组件的尺寸、间距和对齐方式，从而更方便地管理复杂的用户界面设计
  • Event bubble：事件气泡,将事件传播到父级
  • Gesture bubble：手势气泡,将事件传播到父级
  • Snappable： 如果在父对象上启用了滚动对齐，则它可以对齐到此对象
• 滚动标志
  • Scrollable：使对象可滚动
  • Scroll elastic：允许在内部滚动，但速度较慢
  • Scroll momentum：使对象在“抛出”时进一步滚动
  • Scroll on focus：自动滚动对象以使其在聚焦时可见
  • Scroll chain：允许将滚动传播到父项
  • Scroll with arrow:允许使用箭头键滚动聚焦的对象
  • Scroll one：仅允许滚动一个可贴靠的子项
• 滚动设置
  • Scrollbar mode：根据配置的模式显示滚动条。存在以下模式：
    • Off： 从不显示滚动条
    • On：始终显示滚动条
    • Active：在滚动对象时显示滚动条
    • Auto：当内容大到可以滚动时显示滚动条
• States：对象可以处于以下状态的组合：
  • Clickable：切换或选中状态
  • Disable：禁用状态
  • Focusable：通过键盘或编码器聚焦或通过触摸板/鼠标单击
  • Pressed：正在被按下
  • User 1：唯一用户1
  • User 2：唯一用户2
  • User 3：唯一用户3
  • User 4：唯一用户4
• Style settings：样式可用于向 widget 或其部分添加效果。您可以添加自定义背景颜色、边框、阴影等。在 Style Settings 中，您可以添加或修改这些参数的值
  • State：您可以为每个状态创建自定义样式
  • Style：相关介绍在下面的 Styles 介绍中
  • Events：相关介绍在下面的 Events 介绍中

Widget Panel 介绍

• 您可以在面板上找到 Widget，它们是 UI 的基本元素。每个小组件都有自己的首选项。您可以向小组件组件添加自定义样式，并允许以不同的状态配置它们，更多信息请转到下面的 小部件类型介绍

Error Panel 介绍

• 错误面板主要显示事件、动画或样式部分中缺少参数的错误。此处列出的错误也会显示在 Hierarchy （层次结构） 面板中，其中包含错误的小组件前面会显示一个红点
• 错误面板列表包括:
  • Screen/Component：出现错误的屏幕或组件
  • Widget：出现错误的 Widget 的名称
  • Property：错误参数的名称
  • Description：错误的详细描述

小部件类型介绍

• Screen：Screen 是主要对象。它定义了工作空间的分辨率，可以在此处添加小部件。您可以为项目创建多个界面。要在屏幕之间切换，您应该使用 Change Screen 事件
  • 选择Screen时，打开Inspector窗口，在 SCREEN 中的 Screen 里面会有两个选项：
    • Temporary：如果在屏幕上启用，则该屏幕将在加载时自动创建，并在卸载时删除。通过执行此操作，如果项目中有许多屏幕，则可以节省大量内存。使用此功能时，您需要小心，不要在发生某些事情的屏幕上启用它，即使它不可见。此类屏幕的示例包括在 initial action 部分创建的事件或持续播放的动画
    • Don't export screen：如果选中“不导出屏幕”复选框，则不会导出屏幕。通过这种方式，你可以创建一种 “艺术板”，例如将一些组件实例存储在一个地方，或者只是做一些实验
• Basic：基本小部件类别包括主要组件。这些是屏幕中最重要的元素
  • Arc：您可以使用 Arc 小部件绘制圆弧或创建交互式圆形滑块。
    • Arc的参数：
      • Range min,max：定义弧的最小值和最大值
      • Value：起始值
      • Bg start，end angle：背景的开始/结束角度（以度为单位）
      • Mode：您可以从 3 种不同的模式中进行选择：
        • Normal：指示弧从最小值绘制到当前值
        • Reverse：指示器的弧线从最大值逆时针绘制到当前值
        • Symmetrical：从中间点到当前值绘制指示弧
      • Rotation：可以添加到 0 度位置的偏移量
        
  • Button：按钮是一个基本对象。通过使用它，您可以快速轻松地创建按钮
    
  • Container：您可以创建不可见的组，通过这些组您可以轻松构建小部件的位置。容器导出为面板构件，但使用 lv_obj_remove_style_all（） 从中删除所有样式
  • Image：通过使用 Image widget，将显示 Asset 文件夹中的图像。有两个选项可用于显示 Asset 文件夹中的图像。您可以向屏幕添加图像小部件并设置要显示的图像，或者您可以简单地将首选图像从 Asset 文件夹拖到屏幕上，因此它将自动显示
    • Image的参数
      • Asset：您可以从 Asset 文件夹的图像列表中选择要在 Widget 上显示的图像
      • Pivot X, Y：Pivot 是图像的旋转和缩放中心点
      • Rotation：旋转角度（以度为单位）
      • Scale：用于调整图像缩放的属性
        
  • Label：通过使用 Label ，您可以向屏幕添加文本
    • Label的参数
      • Label mode：您可以为过长的行选择不同的解决方案
        • Wrap：过长自动换行
        • Dot：将标签右下角的最后 3 个字符替换为点
        • Scroll：如果文本比标签宽，则前后水平滚动文本。如果它较高，则垂直滚动。仅滚动一个方向，水平滚动具有更高的优先级
        • Scroll circular：如果文本比标签宽，则连续水平滚动文本。如果它较高，则垂直滚动。仅滚动一个方向，水平滚动具有更高的优先级
        • Clip：如果文本比标签宽，则剪辑文本的结尾
      • Text：您可以添加要显示的文本
      • Recolor：在文本中，您可以使用命令对文本的某些部分进行重新着色。例如：“Write a #ff0000 red# word
        
  • Panel：使用它，您可以创建一个可以使用样式自由转换的矩形。您可以制作圆角或添加背景颜色、阴影、边框等
    
  • Controller：Textarea 是一个 Basic 对象，上面有一个 Label 和一个光标。可以向其添加文本或字符。长行被换行，当文本变得足够长时，可以滚动文本区域
    • Controller 参数
      • Text：初始化文本宽中的内容
      • Placeholder：Textarea 独有的，它允许设置占位符文本的样式
      • One line mode：文本区域可以配置为单行。在此模式下，高度会自动设置为仅显示一行，忽略换行字符，并禁用自动换行
      • Password mode：文本区域的工作方式类似于密码区域，字符被星星取代
      • Accepted characters：您可以设置接受的字符列表，其他字符将被忽略
      • Max text length：可以限制最大字符数
      • To be translated：多语言部分的更多信息
        
  • Tabview：Tab 视图对象可用于组织选项卡中的内容。Tab 键按钮可以位于 Tab 视图的顶部、底部、左侧和右侧。可以通过单击选项卡按钮或在内容上水平滑动来选择新选项卡
    • 创建 tabview 小组件。您可以在检查器面板的 “Tabpages” 组中添加新页面。添加的页面将显示在层次结构面板中，因为它们是 Tabview 的子项。可以像在任何其他 Widget 上一样在页面上创建 Widget
    • Tabview 参数
      • Tab position：选择要在哪一侧放置 Tab 键按钮
      • Tab size：设置选项卡按钮标题的高度（如果放置在左侧或右侧，则设置宽度）
      • Tabpages：添加新页面。在 “NAME” 列中，设置小组件的名称 （在层次结构中使用）。在 “TITLE” 列中，您可以设置页面的标题。垃圾桶图标将删除该页面
    • Style settings：设置 Tabview 的各部分的样式
      • Style（Main）
      • Style（Button main）
      • Style（Button items）
        
• Controller：放置用于控制的小部件
  • Calendar：日历小部件是一个经典的日历，它可以：
    • 在 7x7 矩阵中显示任何月份的日期
    • 显示日期的名称
    • 突出显示当天 （today）
    • 突出显示任何用户定义的日期
    • Calendar小部件的参数
      • Day, Month, Year：您可以使用这些参数定义默认日期。
        
  • Checkbox：复选框 Widget 由一个 “tick box” 对象和一个标签组成。单击 Checkbox Widget 时，复选框将切换
    • Checkbox 小部件的参数
      • Title：复选框的名称
        
  • Colorwheel：允许用户选择一种颜色。颜色的色相、饱和度和值可以单独选择。长按对象，色轮将更改为颜色的下一个参数（色相、饱和度或值）。双击将重置当前参数
    • Colorwheel小部件的参数
      • Mode：可以从三种颜色选择模式中进行选择：
        • Hue：全色阶
        • Saturation：所选颜色的饱和度
        • Value：所选颜色的较暗/较亮版本
          
  • Dropdown：下拉小部件是一个列表，允许用户从列表中选择一个值
    • 默认情况下，下拉列表处于关闭状态，并显示单个值或预定义文本。激活后（通过单击下拉列表），将创建一个列表，用户可以从中选择一个选项。当用户选择新值时，将再次删除该列表，并仅显示所选值
    • 下拉列表将添加到默认组（如果已设置）。此外，下拉列表是一个可编辑对象，也允许选择带有编码器导航的选项
    • Dropdown小部件的参数
      • Options：选项作为字符串传递到下拉列表。您可以通过向列表中添加新行来创建已登记的元素
      • List align：列表的位置
      • Show selected：显示选定元素
      • Base text：默认情况下显示此文本
    • Style settings：设置各部分的样式
      • Style（Main）
      • Style（Indicator）：指示器
      • Style（List main）： 列表
      • Style（List scrollbar）：列表滚动条
      • Style（List selected ）：列出已选
        
  • Image button：图像按钮与简单的“按钮”对象非常相似。唯一的区别是它在每种状态下显示用户定义的图像，而不是绘制矩形。您可以设置左、右、居中图像，中心图像将重复以匹配对象的宽度
    • Image button小部件的参数
      • Button state：您可以在此处选择要显示图像的状态：
        • Released：释放
        • Pressed：压
        • Disabled：禁用
        • Checked Released：选中释放
        • Checked Pressed：选中按下
        • Checked Disabled：选中禁用
      • Image released：您可以选择处于assets中的图片
        
  • Keyboard：键盘允许您在屏幕上创建虚拟键盘
    • Keyboard小部件的参数
      • Target text area：键盘小部件是一个特殊的按钮矩阵，具有预定义的键盘映射和其他功能，可实现将文本写入文本区域的虚拟键盘
      • Mode：键盘具有以下模式：
        • Text lower：显示小写字母
        • Text upper：显示大写字母
        • Text special显示特殊字符
        • Number：显示数字、+/- 符号和小数点
        • User 1-4：用户定义的模式
          
  • Roller：允许您通过滚动从列表中选择一个选项
    • Roller小部件的参数
      • Options：您可以从 Roller 列表中选择的选项。您可以通过向列表中添加新行来创建已登记的元素
      • Mode：在正常模式和无限模式之间切换
        • Normal：您可以从头到尾滚动
        • Infinite：您可以重新滚动列表
      • Selected：指定列表中的默认项
        
  • Slider:可以拖动旋钮来设置值。就像 Bar 一样，Slider 可以是垂直的或水平的。
    • Slider小部件的参数
      • Min，Max：指定范围（最小值、最大值）
      • Mode：滑块可以是以下模式之一
        • Normal：如上所述的法线滑块
        • Symmertical：从零值到当前值绘制指标。需要负最小范围和正最大范围
        • Range：也允许设置起始值。起始值必须始终小于结束值
      • Value ：定义滑块的当前值
      • Value left：定义滑块的另一个旋钮的当前值
        
  • Spinbox：包含一个数字作为文本，该数字可以通过逐步增加或减少
    • Spinbox小部件的参数
      • Digit count：显示的位数
      • Separator position：小数分隔符的位置
      • Min，Max:最小值,最大值
      • Increment position：要递增的数字
      • Value：默认值
        
  • Switch：开关小部件看起来像一个小滑块，可用于打开和关闭某些内容。
    • Switch小部件的参数
      • Anim time：在Style(main)中，定义打开和关闭状态之间的动画时间
        
• Visualiser：可视化器小部件是那些用于显示的元素
  • Bar：条形构件具有背景和指示器。指标的宽度根据柱的当前值进行设置。如果对象的宽度小于其高度，则可以创建竖线。不仅可以设置柱线的结束值，还可以设置柱线的起始值，从而改变指标的起始位置
    • Bar小部件的参数
      • Min，Max：指定范围（最小值、最大值）
      • Value：定义当前值
      • Value start：定义开始值
  • Chart：图表是可视化数据点的基本对象。可以使用折线图、条形图和散点图
    • Chart小部件的参数
      • Chart：图表
        • Chart type：图表的类型。线、矩形、散点
        • Number of points：每个数据系列中的点数
        • Division line count X：水平分割线的数量
        • Division line count Y：垂直分割线的数量
        • Zoom X：水平缩放
        • Zoom Y：垂直缩放
      • X axis：X 轴
        • Major tick length：主刻度长度
        • Major tick count：主刻度数量
        • Minor tick lenght：次刻度长度
        • Minor tick count：次刻度数量
        • Label on X axis：在轴上显示/隐藏标签
        • Font size on axis：标签与轴的距离
      • Primary Y axis：主轴和轴
        • Primary Y range min：轴的最小值
        • Primary Y range max：轴的最大值
        • Major tick length：主刻度长度
        • Major tick count：主刻度数量
        • Minor tick lenght：次刻度长度
        • Minor tick count：次刻度数量
        • Label on Primary Y axis：在轴上显示/隐藏标签
        • Font size Primary Y axis：标签与轴的距离
      • Secondary Y axis：与主轴 Y 轴相同
      • Chart data：图表数据单击 ADD SERIES 将新的数据系列添加到图表中
        • Data：您可以设置颜色以及系列应附加到的 Y 轴。添加到 Data 字段的值将显示在序列上
          
  • Spinner：环上的旋转弧
    

Styles 介绍

• 可以为每个小组件创建自定义样式。使用样式，您可以定义 Widget 及其元素的外观以及正在使用的效果。
• Arc Style 介绍
  • Arc color：弧的颜色
  • Alpha：颜色深度，最大255，最小是0
  • Arc width：圆弧的宽度
  • Arc rounded：勾选上，圆弧线的端点是圆角的
  • Arc image：圆弧线的背景图像
• Background：Background Style 是小组件的背景。您可以创建渐变或使背景的角变圆
  • Bg radius：用于使背景角变圆的半径
  • Bg Color and alpha：设置对象的背景颜色(RGB888) 和 颜色深度
  • Bg Gradient color：设置背景的渐变颜色
  • Bg main stop：设置渐变背景颜色的起始点
  • Bg Gradient：颜色梯度
  • Gradient direction：渐变的方向。它可以是水平或垂直的
  • Clip corner：启用此选项可剪辑圆角上的溢出内容
    
• Background Image：可以将图像设置为背景图像
  • Bg image：用作背景图像的图像
  • Bg image opa：背景图像的不透明度
  • Bg image Recolor：使用 Recolor 功能，您可以在背景图像上使用颜色。通过更改 alpha 参数来设置颜色深度
  • Bg image tiled：如果启用，则背景图像将平铺
    
• Border：可以在内线上绘制所选对象周围的边框
  • Border color：边框的颜色
  • Border width：边框的宽度
  • Border side：边界的方向
    
• Line：线条样式可用于具有 线条 组件的小部件
  • Line Color：线条的颜色
  • Line Width：线条的宽度
  • Line rounded：线的端点将被取圆
• Outline：轮廓样式类似于边框样式，但在这里，您可以在所选 widget 部分周围绘制边
  • Outline color：轮廓的颜色
  • Outline width：轮廓的宽度
  • Outline pad：与构件侧面的距离（以像素为单位）
    
• Shadow：使用 Shadow Style（阴影样式），您可以为选定的 Widget 部分绘制阴影或发光
  • Shadow color：阴影的颜色
  • Shadow width：阴影的宽度
  • Shadow spread：阴影的深度
  • Shadow OX：在 X 轴上移动阴影
  • Shadow OY：在 Y 轴上移动阴影
    
• Blend：可以将当前 Widget 部分的像素颜色与后面的对象的颜色混合
  • Blend mode：从四个选项中进行选择
    • Normal：默认状态
    • Additive：添加像素
    • Subtractive：减去像素
    • Multiply：正片叠底像素
  • Blend opacity：您可以在此处设置构件部分的不透明度
• Paddings：层次结构中位于其下的部分将移动像素值填充中定义的距离
  • Pad：填充的范围
• Text：定义可在 Widget 上找到的文本参数
  • Text color:文本的颜色
  • Letter spacing：字母之间的间距
  • Line spacing：行间距
  • Text align：文本对齐的方向
  • Text decor：您可以为文本添加下划线或下划线
    • None：普通文本
    • Underline：带下划线的文本
    • Strikethrough：带上划线的文本
  • Text font：文本的字体
• Transform：变换样式允许您通过样式旋转、调整大小以及设置任何 Widget 的最小和最大大小
  • Min and max width：您可以在此处设置小组件的最小和最大宽度
  • Min and max height：您可以在此处设置小组件的最小和最大高度
  • Transform rotation：您可以以 0.1 度为增量旋转小组件
  • Transform scale：您可以缩放小组件，其中 100% 对应于值 256
  • Pivot x and y：使用这些值，您可以确定旋转的中心点

Themes 介绍

• Select Theme：您可以为项目创建全局颜色和主题。在主题面板中创建的颜色可以为任何样式颜色参数设置。如果您更改此颜色，它将在设置此颜色的每个小部件上更改。使用提供的颜色，您可以创建多个主题，并通过单个操作在它们之间切换
  • Selected theme：您可以从下拉菜单中选择要在编辑器中查看的主题
  • Refresh All Screens：使用此按钮可手动重新加载屏幕上设置的颜色
• Color of Default Theme：您可以为默认主题创建全局颜色。在 Color name 字段中输入颜色名称，然后单击 Add Color 按钮将其添加到列表中。颜色名称必须至少包含 3 个字符
  • Colors：创建的颜色显示在“颜色”组中。如果不再需要创建的颜色，可以使用垃圾桶图标将其删除
• Colors of More Themes：在这里，您可以创建新主题。在 Theme name 字段中输入主题名称，然后单击 Add Theme 按钮创建主题。创建的主题始终包含在默认主题中创建的颜色，这些颜色可以被覆盖。您可以在列表下方的 Rename 部分中重命名主题

Events 介绍

• 添加事件后，您可以为小部件创建不同的交互，例如通过按下按钮来更改屏幕、播放动画等
• Add Event：添加事件
  • Event name：事件的名称
  • Event Trigger：事件启动的交互，主要有以下的交互功能
    • Pressed：已按下对象
    • Clicked： 短时间按下对象，然后释放对象。滚动时不调用
    • Long pressed：对象被按下的时间较长
    • Long pressed repeat：每 long_press_repeat_time 毫秒在 long_press_time 后调用。滚动时不调用
    • Focused：对象已聚焦
    • Defocused：对象未聚焦
    • Value changed：对象的值已更改
    • Ready：流程已完成
    • Cancel：进程已被取消
    • Screen loaded：加载了一个屏幕，当所有动画都完成时调用
    • Screen unloaded：已卸载屏幕，在所有动画完成时调用
    • Screen load start：屏幕加载已启动，在屏幕更改延迟到期时触发
    • Screen unload start：屏幕卸载已启动，在调用 lv_scr_load/lv_scr_load_anim 时立即触发
    • Checked：小组件处于选中状态
    • Unchecked：未选中 Widget
    • Gesture：在具有所选方向的小组件上检测到手势
    • Short clicked：检测到短点击
    • Key：将密钥发送到小组件
  • Add Action：添加交互后，您应该添加要执行的操作
    • Action name：操作的名称
    • Action type：操作的类型
    • Actions：事件的那些元素，它们在触发器发生时启动
      • Call function：您可以添加事件可以引用的函数名称。在导出过程中，此函数将创建到 ui__events.c 或 ui_events.py 文件中
      • Change Screen：您可以通过此操作在屏幕之间切换
        • Screen to：您要更改为的屏幕
        • Fade mode：更改屏幕期间的动画
        • Speed：更改屏幕的速度
        • Delay：更改屏幕的延迟
      • Increment Arc：您可以修改 Arc Widget 的值
        • Target：目标弧形小组件
        • Value：增加/减少的值
      • Increment Bar：您可以修改 Bar Widget 的值
        • Target：目标 Bar 小组件
        • Value：增加/减少的值
        • Animate：值更改的动画时间
      • Increment Slider：您可以修改 Slider Widget 的值
        • Target：目标 Slider 小组件
        • Value：增加/减少的值
        • Animate：值更改的动画时间
      • Modify Flag：您可以修改 Widget 的标志状态
        • Object：目标对象
        • Flags：要更改的已定义标志
        • Action：要使用的操作
          • Add：添加标志
          • Remove：删除标志
          • Toggle：使用来自其他状态的标志
      • Play Animation：您可以播放在 Animation 面板中创建的动画
        • Animation：选定的动画
        • Target：目标小组件
        • Delay：动画的延迟时间
      • Set Opacity：所选小组件的不透明度
        • Target：目标小组件
        • Value：opacity 的值
      • Set Property：更改小组件的属性值
        • Target：目标对象
        • Property：要更改的参数
        • Value：属性的值
      • Set text value from arc：使用此操作在 Label Widget 上显示 Arc Widget 值
        • Target：用于显示值的 Label 小组件
        • Source：要显示的 Arc 小组件值
        • Prefix：Label 小组件上值之前的文本
        • Postfix：Label 小组件上值后的文本
      • Set text value from slider：使用此操作在 Label Widget 上显示 Slider Widget 值
        • Target：用于显示值的 Label 小组件
        • Source：要显示的 Slider 小组件值
        • Prefix：Label 小组件上值之前的文本
        • Postfix：Label 小组件上值后的文本
      • Set text value when checked：根据目标对象的选中或未选中状态更改 Label Widget 的文本
        • Target：用于显示文本的 Label 小组件
        • On text：文本处于选中状态
        • Off text：处于未选中状态的文本
      • Delete screen：删除所选屏幕
        • Screen：要删除的屏幕
      • Step spinbox：递增或递减所选 spinbox 的值
        • Target：要更改的旋转框
        • Direction：您可以选择增加或减少值
      • Switch Theme：从下拉菜单中，您可以选择要切换到的全局主题。发生这种情况时，它会刷新所有屏幕的所有 Widget 上的全局颜色，包括从代码创建的 Widget

故障排除

• 如果您发现 SquareLine Studio 有任何问题，请查看下面的列表（如果已经有解决方案）。如果没有，请打开 Topic 和 Forum。我们可能会要求您将日志发送给 SquareLine Studio。您可以在此处找到它们

Windows: C:\Users<your username>\AppData\LocalLow\SquareLine Kft_\SquareLine_Studio\Player.log

• 在 Windows 上未启动或 CPU 使用率较高
  • 尝试从命令行 SquareLine_Studio.exe -force-opengl 启动 SquareLine Studio

创建示例

1. 您只需下载并安装 SquareLine Studio。您无需在开始时购买许可证，因为有 30 天的试用版可供使用。如果您已经购买了许可证，请阅读 许可证管理器 部分，了解有关激活许可证的更多信息
2. 双击SquareLine Studio 图标，打开应用，打开后我们进入到登录界面，注册用户完成登录后，我们就可以创建工程了
3. 我们以 waveshare ESP32-S3-Touch-LCD-4.3B-BOX为例
4. 相关产品链接中文链接,英文链接
5. 创建工程如下图：
   
6. 先点击①->②->③
7. 设置好④的参数，ESP32-S3-Touch-LCD-4.3B-BOX的参数如上图所示，最后点击⑤创建即可
8. 创建成功后，就可以设计自己的UI了，把自己需要用到的背景图跟字体都复制到工程目录下的assets
9. 根据上面的设计工具介绍，自己设计好界面，然后生产代码即可
10. 我这边直接用squareline studio的 3d_printer 示例进行代码的创建,先点击①->②即可创建：
    
11. 创建完之后，需要修改一下相关的参数，并设置好需要保存工程跟代码的文件路径，我这边的配置如下：
    
    ①.打开工程设置
    ②.将色深设置成16bit
    ③.设置工程路径、ui 存放路径和 lvgl 的头文件路径（我这边会跟主函数放一起，所以是lvgl.h）
    ④.点击修改应用按钮完成配置
12. 导出 ui 代码：
    
    ①.点击导出按钮
    ②.选择导出 ui 文件
    ③.显示导出完成即可

ESP-IDF

1. 请先参考对应产品的wiki配置好ESP-IDF开发环境
2. 将导出的 ui 代码复制到 lvgl_Porting 的示例中，具体步骤如下：
   ①.打开 waveshare 提供的 ESP-IDF\lvgl Porting\main 文件夹
   ②.打开存放 ui 的文件夹
   ③.选中 ui
   ④.将 ui 复制到 main 文件夹中
   
3. 退回到 lvgl_Porting 中，用 vs code 打开示例，此时不能直接编译，编译会报错，需要修改脚本文件，具体修改如下：
   ①.修改 main 文件夹中的 CMakeLists.txt 文件
   ②.新建 partitions.csv 文件
   

• CMakeLists.txt 的内容如下：
  

file(GLOB_RECURSE srcs *.c
                   ui/*.c
                   ui/components/*.c
                   ui/screens/*.c
                   )
set(include_dirs 
   . 
   ui
   )
idf_component_register( SRCS ${srcs}
                       INCLUDE_DIRS ${include_dirs}
                       )
idf_component_get_property(lvgl_lib lvgl__lvgl COMPONENT_LIB)
target_compile_options(${lvgl_lib} PRIVATE -Wno-format)

• partitions.csv 的内容如下：

# Name,   Type, SubType, Offset,  Size, Flags
# Note: if you have increased the bootloader size, make sure to update the offsets to avoid overlap
nvs,      data, nvs,     0x9000,  0x6000,
phy_init, data, phy,     0xf000,  0x1000,
factory,  app,  factory, 0x10000, 8M,

• 如果使用的是8M Flash的ESP32，需要将分区表中的 8M 修改成 6M，比如 ESP32-S3-Touch-LCD-7 和 ESP32-S3-Touch-LCD-4.3。

1. 在 lvgl Porting 的 sdkconfig.defaults 里面加入 CONFIG_PARTITION_TABLE_CUSTOM=y 并保存
   
2. 在 lvgl Porting 的 main.c 中，注释 lv_demo_widgets(); 加入 ui 相关接口，如下图：
   
3. 我用的ESP-IDF版本是5.3.1，保存后即可编译烧录，选择好端口，开发板（esp32s3），然后点击进行烧录，首次编辑会比较久，耐心等待一下
4. 烧录成功后，vs code 会显示如下现象：
   
5. 屏幕会亮起：
   
6. 默认的刷新率相对较低，可以尝试提高S3的 FLASH 跟 PSRAM 的带宽，提升刷新率
7. 如果在切换页面时，发现反应比较慢，可以找到切换屏幕的控件，修改切换速度，比如：
   
   点击①->②->③，将 200 修改成 10，即可提升页面切换速度

Arduino ESP32

• 请先参考微雪对应产品的wiki资料，配置好Arduino开发环境
• 使用Arduino去移植squareline studio程序，需要修改Project Settings,具体修改如下图：

• 修改成功后，创建工程，因为 Arduino 跟 ESP-IDF不同，不能只导出UI文件：

• 进入工程的目录下，会有三个文件，将 libraries 中的 ui 复制到 Arduino IDE 的libraries 中，如果不清楚可以点击此链接查看：

• 复制成功后，进入 waveshare 提供的 Arduino-ESP32\lvgl_Porting 文件夹中，添加partitions.csv文件，内容如下：

 # Name,   Type, SubType, Offset,  Size, Flags
 # Note: if you have increased the bootloader size, make sure to update the offsets to avoid overlap
 nvs,      data, nvs,     0x9000,  0x6000,
 phy_init, data, phy,     0xf000,  0x1000,
 factory,  app,  factory, 0x10000, 8M,

• 使用Arduino IDE去打开 waveshare 提供的 Arduino-ESP32\lvgl_Porting\lvgl_Porting.ino 文件，打开之后在 lvgl_Porting.ino 中添加如下代码即可：

• 

  第一处

• 

  第二处

• 修改完成后，设置开发板参数:

• 烧录代码：

• 屏幕会亮起：
  

示例源码

• 示例代码与sq工程