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.CW32L012移植SGL步驟

這里會教大家一遍流程，不會也沒關系，有已經移植好的示例工程，示例工程名為“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）添加sgl源碼

根據sgl對應的文件結構，在編譯器中同樣創建對應的文件目錄并添加.c文件，.h文件包含即可

▲（keil中的工程目錄結構）

▲Sgl 中的source 目錄結構

▲(頭文件包含)

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

（4）修改conf文件

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

（5）初始化SGL

初始化是使用該庫的關鍵，重點關注：屏幕分辨率，屏幕緩沖區大小，刷屏函數，debug串口輸出函數等

詳細講解：例如范例的配置，屏幕分辨率為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移植sgl的內存占用情況

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

7.結語

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

8.題外話

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

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

Q:為什么不把各項配置調到最好？

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