Q1.SGL是什么？

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

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

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

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

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

Q3.SGL圖形庫到底解決了什么痛點？

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

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

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

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

Q4.為什么選擇CW32L012跑SGL?

（1）主頻高，96Mhz。

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

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

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

5.CW32L012移植SGL步驟

這里會教大家一遍流程，不會也沒關(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）準備好已經(jīng)調(diào)通屏幕顯示的工程

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

（3）添加sgl源碼

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

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

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

▲(頭文件包含)

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

（4）修改conf文件

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

（5）初始化SGL

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

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

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

①初始化

②動畫心跳

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

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

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

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

(7).編寫測試代碼

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

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

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

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

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

(8).最終效果

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

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

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

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

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

7.結(jié)語

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

8.題外話

Q:這個效果也不行??？為什么我感覺很卡？

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

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

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