企业官网建设流程全解析

一.问题的引入

我们使用纯代码编写LVGL界面的方式比较麻烦，所以LVGL社区和第三方公司给LVGL开发出一些配套的UI设计工具，比如说squareLineStudio,允许用户以所见即所得的方式创建界面布局，然后导出为LVGL代码。本文主要介绍squareLineStudio软件的操作方式。

squareLineStudio

二.squareLineStudio介绍

SquareLine Studio是一款专业的Ul设计软件,它与LVGL（Light and Versatile Graphics Library,轻量级通用图形库）紧密集成。LVGL是一个轻量化的、开源的、在嵌入式系统中广泛使用的图形库，它提供了一套丰富的控件和组件，使得在资源受限的设备上创建高端的图形界面成为可能。

SquareLineStudio具有直观的拖放界面，用户可以通过拖放组件来设计用户界面，无需编写复杂的代码。它支持多种组件和布局，并允许用户自定义样式、动画和行为。此外，SquareLineStudio也提供了丰富的模板供用户选择，用户可以根据需求快速创建各类设计项目，如海报、邀请函等。

除了UI设计功能，SquareLineStudio还具备二维制图、三维建模和参数化设计的能力。用户可以轻松创建各种建筑图纸，如平面图、立面图、剖面图等;也可以构建精确的三维模型以展示建筑空间和结构;同时，通过参数化设计，用户可以快速调整建筑模型的尺寸和形状，实现灵活的设计变更。

在SquareLineStudio中，用户还可以添加各种设计元素，如文本、图片、形状、图表等，并可以从图库中选择现成的设计元素。在编辑过程中，用户可以通过调整设计元素的大小、颜色、字体等属性进行个性化编辑。完成设计后，用户还可以预览整体效果，并导出为图片或PDF格式保存到本地。

不过，目前该软件只能支持30天试用，而且免费版的使用有诸多限制，所以需要开发复杂的界面还需要进行付费购买。

三.下载安装

1.下载

点击SquareLine Studio - Design and build UIs with ease，进行下载

2.如何使用squareLineStudio

对于如何使用该软件，最好的方式是查看官网文档 SquareLine Studio 1.6.1 Documentation | SquareLine Studio

四. 创建工程

安装完成之后，可以看到如图画面，点击创建工程

不过为了加快工程构建，颜色深度Color depth 选择16bit即可

创建出来之后，可以看到如图界面

五.操作使用

1.软件布局介绍

2.设置工程导出路径

我们使用该软件的目的就是为了导出UI设计器生成界面的C文件，所以要先进行设置工程导出的存储位置，以及导出的C文件包含的头文件

3.添加PNG图像

此时可以看到添加成功

这些图像可以作为界面的背景图片 或者 控件的背景图片

4.导出C文件

【文件夹】

components文件夹：通常这个文件夹用于存放自定义组件的相关代码，这些组件是在SquareLine Studio中设计并自定义的，例如某些特殊的按钮样式、图表或其他复合控件。如果项目中包含了自定义组件，那么它们的实现代码将会在这个文件夹下。

fonts文件夹：存放字体资源，包括已转换为LVGL可读格式的字体文件，可能有预编译后的二进制字体数据文件，或者是原始的字体文件以及相关的加载和注册代码。

images文件夹：包含项目中使用的图像资源，如图标、背景图片等。这些图像经过处理后，通常是转换成C语言数组形式的二进制数据，可以直接被嵌入到应用程序中并在LVGL中显示。

screens文件夹：存储每个屏幕或页面的布局和组件信息。每个屏幕对应一个或多个C文件，其中包含了屏幕的初始化代码，即定义并创建UI界面上所有控件的代码。

【c文件】

ui.c和ui.h:

u.c是主要的UI实现文件，它包含了所有屏幕的初始化函数以及可能的全局变量声明和初始化。通过调用这些函数来实例化和连接UI界面的所有元素。

ui.h则是对应的头文件，包含了对外公开的函数声明和常量定义，以便在主程序或其他模块中引用和调用UI初始化及交互函数。

ui_events.c和ui_events.h:这些文件通常包含了对UI组件事件处理的代码，如按钮按下、滑动事件、输入框文本变化等。

ui_events.c实现具体的事件回调函数，而ui_events.h 则是对外部可见的事件处理函数声明。

ui_helpers.c和ui_helpers.h:这些文件用于存放辅助函数，用于简化UI组件的创建、更新和管理，或者是封装了一些通用的LVGL对象操作逻辑。这些函数有助于提高代码的可读性和复用性。

总结来说，SquareLine Studio导出的文件集合是为了方便用户直接将设计的Ul界面整合到嵌入式系统项目中，涵盖了所需的全部资源文件和实现代码，使得开发者能够快速地将设计成果部署到目标平台上运行。

六.将导出的C文件合并到ARM-LVGL项目

导出的C文件要进行简单修改，最终合并到LVGL项目中执行

1.SquareLine工程中要设置

2.导出C文件

导出之后，可以在LVGL工程下看到 已经包含了 squareLine 软件导出的所有C文件

3.修改LVGL工程中的Makefile文件

现在我们将整个squareLine软件导出的文件 放入了LVGL工程中，所以需要在Makefile文件中指定导出的C源文件和对应的头文件

4.在main.c函数中，添加头文件和直接调用 导出的C文件的函数 ui_init()

5.编译工程

最后编译可以了