Q1.SGL是什么？

SGL是一個(gè)輕量級的UI圖形庫，符合現(xiàn)代化審美設(shè)計(jì)，其設(shè)計(jì)思想來源于LVGL圖形庫，具有抗鋸齒，圓角，邊框等關(guān)鍵UI設(shè)置項(xiàng)，同時(shí)具有圖層概念，不同控件有不同的層次，可設(shè)置透明度，控件同樣有父子關(guān)系，子控件可繼承部分父控件屬性。代碼采用面向?qū)ο蟮乃枷耄募Y(jié)構(gòu)清晰，非常適合應(yīng)用于性能以及內(nèi)存有限的單片機(jī)，控件有：圓角矩形、標(biāo)簽、開關(guān)、進(jìn)度條、圓環(huán)、列表等。

SGL倉庫地址：https://github.com/sgl-org/sgl

鏡像倉庫地址：https://gitee.com/sgl-org/sgl

Q2.有了LVGL圖形庫，SGL存在的意義是什么？

LVGL對內(nèi)存和性能的占用仍然太大。當(dāng)然，毫無疑問，LVGL是目前嵌入式領(lǐng)域使用率比較高的一個(gè)UI庫（據(jù)官方搜索小米也在用），功能多，代碼風(fēng)格好，雖然也算輕量級UI庫，但輕量級的程度仍然不夠。對于內(nèi)存小的單片機(jī)來說，運(yùn)行LVGL壓力非常大，那么我內(nèi)存小，又想用類似LVGL的圖形庫有嗎？有的兄弟，有的，就是我們介紹的主題SGL圖形庫。

Q3.SGL圖形庫到底解決了什么痛點(diǎn)？

目前LVGL圖形庫是好用，但是對單片機(jī)要求特別高，如果使用無UI框架的方式，性能以及內(nèi)存占用確實(shí)小，但做出來的效果又特別差勁，做出來的產(chǎn)品夠用，但缺乏競爭力。

（1）flash占用大：LVGL可以對功能進(jìn)行裁剪，但由于其設(shè)計(jì)框架的原因，裁剪過后的代碼對內(nèi)存占用也十分大，SGL是高度可裁剪，裁剪過后的功能，一定不會(huì)被編譯（直接或間接）。

（2）ram占用大：對于LVGL來說，每個(gè)控件對RAM的占用都是很大的，LVGL是為了功能的豐富，但SGL的定位是為了更加輕量級，因此，對于RAM的使用，作者嚴(yán)格地控制每一個(gè)字節(jié)的占用，盡可能保證功能的前提下做到最小占用。

（3）代碼框架差：當(dāng)不使用任何框架時(shí)，散裝的代碼，某寶賣家配套的代碼，某SDN下載的測試代碼，這類代碼不考慮程序可讀性，可維護(hù)性，功能可擴(kuò)展性，用這種代碼測試是可以，用于實(shí)際項(xiàng)目開發(fā)是災(zāi)難性的。SGL是完全沒有這些問題的，源代碼文件目錄分類清晰，函數(shù)API風(fēng)格統(tǒng)一，同樣有配置文件，初始化簡單，配套資料文檔齊全。

Q4.為什么選擇CW32L012跑SGL?

（1）主頻高，96Mhz。

（2）SPI時(shí)鐘可達(dá)48M。SPI時(shí)鐘高，非常適合SPI屏的驅(qū)動(dòng)，在同檔位MCU中算比較優(yōu)秀的。

（3）ram和flash大小合適（8K+64K）。SGL對于ram的要求是4K以上，flash是20k以上。

（4）性價(jià)比高。同樣外設(shè)資源、封裝、引腳數(shù)情況下，CW32L012算比較便宜的。

5.CW32L012移植SGL步驟

這里會(huì)教大家一遍流程，不會(huì)也沒關(guān)系，有已經(jīng)移植好的示例工程，示例工程名為“cw32l012_sgl_gui_demo”，這里可以大概了解一下有哪些步驟，需要關(guān)注哪些地方。

通過網(wǎng)盤分享的文件：cw32l012_sgl_gui_demo.rar鏈接: https://pan.baidu.com/s/1RGcQ9_l8iK40jNl335mX0g?pwd=CW32 提取碼: CW32

▲CW32L012多功能開發(fā)板（已開源）

（1）從官網(wǎng)下載文件，https://github.com/sgl-org/sgl

文件夾內(nèi)有很多類型的文件，我們只需要使用“source”文件夾

（2）準(zhǔn)備好已經(jīng)調(diào)通屏幕顯示的工程

需要至少有以下兩個(gè)函數(shù): 屏幕初始化，矩形填充函數(shù)

（3）添加sgl源碼

根據(jù)sgl對應(yīng)的文件結(jié)構(gòu)，在編譯器中同樣創(chuàng)建對應(yīng)的文件目錄并添加.c文件，.h文件包含即可

▲（keil中的工程目錄結(jié)構(gòu)）

▲Sgl 中的source 目錄結(jié)構(gòu)

▲(頭文件包含)

Tips: 實(shí)際只需要將source里的所有.c文件全部添加，這里分類是為了有良好的文件結(jié)構(gòu)。包含頭文件需要包含source目錄和include目錄。

（4）修改conf文件

配置文件名為“sgl_config.h”，一般只需要修改屏幕顏色深度，內(nèi)存分配大小，其他的配置項(xiàng)可以參考下圖，不明白的可以保持默認(rèn)。

（5）初始化SGL

初始化是使用該庫的關(guān)鍵，重點(diǎn)關(guān)注：屏幕分辨率，屏幕緩沖區(qū)大小，刷屏函數(shù)，debug串口輸出函數(shù)等

詳細(xì)講解：例如范例的配置，屏幕分辨率為320x240（寬320，高240），顯示緩沖區(qū)“panel_buffer”為單行緩沖區(qū)（緩沖區(qū)大小都是屏幕寬度的倍數(shù)，最小1行即可，更大的緩沖區(qū)，渲染與刷新的速度會(huì)更加快，但考慮輕量級，單行緩沖區(qū)足夠用），然后是刷屏函數(shù)，其實(shí)就是調(diào)用我們之前要求寫的矩形區(qū)域填充函數(shù)，另外就是日志輸出函數(shù)，該函數(shù)如果前期沒有寫好日志輸出，不強(qiáng)制要求實(shí)現(xiàn)，“uart_put_string”可以為空函數(shù)，最后調(diào)用“sgl_init”即可完成初始化。

（6）SGL運(yùn)行起來的必要調(diào)用

①初始化

②動(dòng)畫心跳

③SGL核心任務(wù)函數(shù)

如上圖，“user_sgl_init”實(shí)際就為SGL的初始化，它位于屏幕初始化之后，然后周期性調(diào)用任務(wù)函數(shù)“sgl_task_handle”。

如上圖，“sgl_anim_tick_inc”就是動(dòng)畫的心跳，需要在一個(gè)標(biāo)準(zhǔn)的定時(shí)器中斷中調(diào)用，如systick，此處的systick配置的是1ms，動(dòng)畫tick函數(shù)的入?yún)⒆匀痪褪?。

看到了這里，恭喜你，已經(jīng)完成了SGL的移植啦！后面就是添加自己需要的控件和功能進(jìn)行測試了。

(7).編寫測試代碼

初始化完成以后，即可添加一些控件來看看效果了，注意，創(chuàng)建控件的代碼一定是寫在初始化之后（初始化完了才能創(chuàng)建控件）。

創(chuàng)建了一個(gè)圓角矩形，位置為0，0，大小為100x100，主題顏色為藍(lán)色，圓角大小為20，透明度為127（滿透明度為255），邊框?qū)挾葹?，邊框顏色為紅色。

另外，我們再添加一個(gè)動(dòng)畫，動(dòng)畫的作用對象為創(chuàng)建的圓角矩形“rect2”，動(dòng)畫延時(shí)500ms，動(dòng)畫整個(gè)周期1500ms，動(dòng)畫化重復(fù)性設(shè)置-1代表一直重復(fù)，設(shè)置動(dòng)畫起始值0，動(dòng)畫結(jié)束值100，動(dòng)畫路徑為一個(gè)函數(shù)“sgl_anim_path1”,動(dòng)畫算法采用“SGL_ANIM_PATH_LINEAR”，線性動(dòng)畫。

動(dòng)畫本質(zhì)：動(dòng)畫實(shí)現(xiàn)的本質(zhì)就是，起始設(shè)定值到結(jié)束設(shè)定值，在一段時(shí)間內(nèi)的數(shù)值變化。如果設(shè)定值作用于坐標(biāo)，其動(dòng)畫就變成控件的移動(dòng)。

該demo的內(nèi)存占用情況

(8).最終效果

下圖gif就是我們創(chuàng)建的一個(gè)圓角矩形加上動(dòng)畫的效果，循環(huán)x軸方向移動(dòng)。

效果2：下圖的gif是另外一個(gè)復(fù)雜的測試demo，測試不同控件疊加渲染的能力，圓角矩形透明度設(shè)置的50%，可以透過圓角矩形看到底下的鍵盤。進(jìn)度條和圓角矩形是同一個(gè)動(dòng)畫時(shí)基，都是1500ms，同步做動(dòng)畫。

(9).內(nèi)存占用情況分析

這一部分來分析cw32l012移植sgl的內(nèi)存占用情況

如上圖，這是一份keil輸出的map文件的截圖（AC6編譯，優(yōu)化等級O1），圖中包含了各部分部分的代碼占用情況，cw32開頭是官方的庫文件，相比其他廠家的庫來說，flash占用非常小。SGL開頭是圖形庫，占用和你使用的控件有關(guān)，本demo只用了不到6k字節(jié)的flash空間（當(dāng)然控件用的多了會(huì)占用比較多，但也不會(huì)超過32k，用LVGL是絕對不可能的事情）。

7.結(jié)語

好啦，看到這里就已經(jīng)結(jié)束了，恭喜你又了解了一個(gè)GUI庫，SGL是專門面向輕量級MCU開發(fā)的，它是一個(gè)長期的項(xiàng)目，會(huì)持續(xù)優(yōu)化及更新。同時(shí)我們認(rèn)為，好的代碼一樣是藝術(shù)品，開發(fā)這樣的代碼就是創(chuàng)造藝術(shù)品，使用這樣的代碼就是欣賞藝術(shù)品，人生不應(yīng)得過且過，要有更高的追求。下面是一些題外話，有興趣的讀者可以繼續(xù)看下去。

8.題外話

Q:這個(gè)效果也不行啊？為什么我感覺很卡？

目前的效果大家可能覺得很卡，其實(shí)主要是分配的資源問題，demo中緩沖區(qū)只用一行，320x2 = 640字節(jié)，要很流暢的話至少要10行的緩沖區(qū)，另外刷屏底層接口沒有用DMA，也是慢的原因，再者，SGL核心任務(wù)調(diào)度每隔30ms調(diào)度一次，這也是不流暢的原因。

Q:為什么不把各項(xiàng)配置調(diào)到最好？

例如30ms調(diào)度周期降低到5ms，豈不是流暢的很？是的，的確，但是作為輕量級MCU，不應(yīng)該這么做，因?yàn)槟愕男阅苡邢薏豢赡?0%的性能都分配給圖形庫，要流暢緩沖區(qū)也可以加大，例如10行的緩沖區(qū)，光圖形庫RAM占用率可能就超過80%，其他的任務(wù)還跑不跑了？這里介紹的SGL庫是有實(shí)際項(xiàng)目應(yīng)用價(jià)值的，絕對不能是只能跑個(gè)demo的，停留在實(shí)驗(yàn)室的，博眼球的庫，這樣的庫是沒有意義的。