CW32L012移植SGL图形库

Q1.SGL是什么？SGL是一个符合现代审美设计的轻量级UI图形库。其设计思想来源于LVGL图形库。它具有关键的UI 设置，例如抗锯齿、圆角和边框。它还具有层的概念。不同的控件有不同的级别，并且可以设置透明度。控件也有父子关系，子控件可以继承父控件的一些属性。代码采用面向对象的思想，文件结构清晰，非常适合性能和内存有限的单片机。控件包括：圆角矩形、标签、开关、进度条、圆环、列表等。

SGL仓库地址：https://github.com/sgl-org/sgl

镜像仓库地址：https://gitee.com/sgl-org/sgl

Q2.有了LVGL图形库，SGL存在的意义是什么？LVGL 仍然过于占用内存和性能。当然，毫无疑问，LVGL是一个在嵌入式领域使用率很高的UI库（根据官方搜索，小米也在使用它）。它的功能很多，代码风格也很好。虽然它被认为是一个轻量级的UI库，但它仍然不够轻量。对于内存较小的微控制器来说，运行LVGL压力很大。那么我内存较小，想使用类似于LVGL的图形库？有的兄弟，有的就是我们介绍的主题SGL图形库。

Q3.SGL图形库到底解决了什么痛点？目前LVGL图形库虽然使用方便，但是对单片机的要求非常高。如果使用没有UI框架的方法，性能和内存占用确实很小，但是效果很差。产品够用，但缺乏竞争力。

（1）flash占用大：LVGL可以对函数进行剪裁，但由于其设计框架的原因，剪裁后的代码也占用了大量的内存。 SGL 是高度可修剪的，并且修剪后的函数不会被编译（直接或间接）。

(2)ram占用大：对于LVGL，每个控件占用大量RAM。 LVGL是为了功能丰富，而SGL的定位是更轻量级。因此，对于RAM的使用，作者严格控制每个字节的占用，在保证功能的情况下尽量减少占用。

（3）代码框架差：不使用框架时，批量代码、某宝商提供的代码、某SDN下载的测试代码。这类代码没有考虑程序的可读性、可维护性和功能的可扩展性。这种代码用来测试还可以，但用来实际项目开发就惨了。 SGL根本不存在这些问题。源代码文件目录分类清晰，函数API风格统一，也有配置文件，初始化简单，支持信息和文档齐全。

Q4.为什么选择CW32L012跑SGL?(1) 高频，96Mhz。

(2)SPI时钟可达48M。 SPI时钟高，非常适合驱动SPI屏幕。在同级别MCU中是比较优秀的。

(3) ram和flash大小合适（8K+64K）。 SGL对ram的要求是4K以上，flash是20k以上。

(4)性价比高。考虑到相同的外设资源、封装和引脚数，CW32L012 相对便宜。

5. SGL移植到CW32L012的步骤

我在这里教你这个过程。如果您不知道该怎么做也没关系。有一个样例工程已经移植了。示例项目名为“cw32l012_sgl_gui_demo”。在这里您可以大致了解步骤是什么以及需要注意的地方。

通过网盘分享的文件：cw32l012_sgl_gui_demo.rar 链接： https://pan.baidu.com/s/1RGcQ9_l8iK40jNl335mX0g?pwd=CW32 提取码： CW32

CW32L012多功能开发板（开源）

（1）从官网下载文件，https://github.com/sgl-org/sgl

文件夹中有多种类型的文件，我们只需要使用“source”文件夹即可

(2)准备已经调整好屏幕显示的工程

至少需要以下两个函数：屏幕初始化、矩形填充函数

(3)添加sql源代码

根据sql对应的文件结构，在编译器中创建对应的文件目录并添加.c文件，h文件即可包含

（keil中的工程目录结构）

Sgl中的源码目录结构

（含头文件）

Tips: 其实只需要添加源码中所有的.c文件即可。这里的分类是为了有一个好的文件结构。包含头文件需要源目录和包含目录。

(4)修改conf文件

配置文件修改名为“sgl_config.h”，一般只需要屏幕颜色深度，内存分配大小，其他的配置项可以参考下图，不清楚的可以保持默认。

(5)初始化SGL

初始化是使用该库的关键，重点是：屏幕分辨率、屏幕缓冲区大小、屏幕刷新功能、调试串口输出功能等。

详细讲解：例如示例的配置，屏幕分辨率为320x240（宽320，高240），显示屏幕“panel_buffer”为单行屏幕（屏幕大小均为屏幕宽度的倍数，最大1行即可，更大的屏幕，渲染与刷新的速度会比较快，但考虑轻量级，单行缓冲区用），然后是刷屏函数，其实就是调用我们之前要求写的仿真区域填充函数，另外就是日志输出函数，该函数如果前期没有写好日志输出，不强制要求实现，“uart_put_string”可以为空函数，最后调用“sgl_init”即可完成初始化。

(6)SGL运行的必要调用

初始化

心跳动画

SGL核心任务函数

如上图，“user_sgl_init”实际上就是SGL的初始化，之后它位于屏幕初始化，然后循环调用任务函数“sgl_task_handle”。

如上图，“sgl_anim_tick_inc”就是动画的心率，需要在一个标准的计时器中断中调用，如systick，此处的systick配置是1ms，动画tick函数的入参自然就是1。

看到这里，恭喜你，你已经完成了SGL移植！下一步是添加测试所需的控件和功能。

(7).编写测试代码

初始化完成以后，就可以添加一些控件来看看效果了，注意，创建控件的代码一定是在初始化之后写入（初始化结束了才能创建控件）。

创建一个圆角形状，位置为0，0，大小为100x100，主题颜色为蓝色，圆角大小为20，缝隙为127（满缺口为255），父亲宽度为4，父亲颜色为红色。

另外，我们再添加一个动画，动画的作用对象为创建的圆角“rect2”，动画延迟500ms，动画整个周期1500ms，动画化重复性设置-1代表一直重复，设置动画初始值0，结束动画值100，动画路径为一个函数“sgl_anim_path1”，动画算法采用“SGL_ANIM_PATH_LINEAR”，线性动画。

动画的本质：动画实现的本质是从起始设定值到结束设定值在一段时间内的数值变化。如果设置的值作用在一个坐标上，它的动画就变成了控件的移动。

该demo的内存使用情况

(8).最终效果

下面的gif是我们用动画效果创建的一个圆角矩形，它沿着x轴方向移动。

效果2：下图的gif是另外一个复杂的测试demo，测试不同控件加速渲染的能力，圆角正交调整设置的50%，可以透过圆角矩形看到底下的键盘。进度条和圆角矩形有相同的动画时基，都是1500ms，并且同时动画。

（9）。内存使用分析

这部分分析cw32l012移植sql的内存使用情况。

如上图，这是keil输出的map文件截图（AC6编译，优化级别O1）。图中包含了各部分的代码占用情况。 CW32开头的是官方的库文件。与其他厂商的库相比，flash占用量非常小。 SGL的开头是图形库，占用量和你使用的控件有关。这个demo只使用了不到6k字节的flash空间（当然，如果使用的控件较多，占用会更多，但不会超过32k，使用LVGL是绝对不可能的）。

七、结论

好了，现在结束了。恭喜，您已经了解了另一个GUI 库。 SGL是专为轻量级MCU开发的。这是一个长期项目，将不断优化和更新。同时，我们相信好的代码也是一件艺术品。开发这样的代码就是创造一件艺术品。使用这样的代码就是欣赏艺术品。生活不应该得过且过，但我们必须有更高的追求。下面是一些题外话，感兴趣的读者可以继续阅读。

8. 题外话

Q:这个效果也不行啊？为什么我感觉很卡？您可能认为当前效果非常滞后。其实主要是资源配置的问题。演示中的缓冲区仅使用一行，320x2=640 字节。如果要非常流畅，至少需要10行缓冲。另外，刷新屏幕的底层接口没有使用DMA，这也是速度慢的原因。另外，SGL核心任务调度是每30ms调度一次，这也是造成不流畅的原因。

Q:为什么不把各项配置调到最好？比如30ms的调度周期减少到5ms，不是很流畅吗？是的，确实如此，但是作为一个轻量级的MCU，你不应该这样做，因为你的性能是有限的，不可能将80%的性能分配给图形库。如果想要流畅，也可以加大缓冲。例如，使用10 行缓冲区，仅图形库的RAM 使用率就可能超过80%。可以运行其他任务吗？这里介绍的SGL库具有实际的项目应用价值。一定不能是一个只能运行demo、呆在实验室、吸引眼球的库。这样的图书馆是没有意义的。