這個(gè)系列的第一篇，也是我在網(wǎng)上發(fā)布的第一篇帖子，寫寫心路吐槽和演示下最終效果。

也許是從接觸了純軟件和網(wǎng)頁之后，對以前那種框框塊塊、或者純文字顯示的顯示效果越看越難受（以前感覺還可以），然后就是為了炫各種踩坑。

說實(shí)話寫這個(gè)系列文章之前其實(shí)我并未搞過純代碼的LVGL，對于LVGL的UI制作一看那代碼就腦袋大，于是尋求界面化工具，Squareline是LVGL官方的工具，試用期過了后支持最多5個(gè)頁面，50個(gè)部件。

190刀一年。。。等待專業(yè)人士。。。

最開始接觸Squareline的時(shí)候毛病一大堆，扔進(jìn)了留觀區(qū)，后來找到恩智浦的GUI Guider，唉~。

不知是我沒找到還是本就如此，就制作一個(gè)漂亮的屏幕界面而言，找教程和工具是真的難，當(dāng)然更難的還有素材，如果能堅(jiān)持做下去，有想法弄一個(gè)素材的合集，搞創(chuàng)意、電路、編程已經(jīng)很費(fèi)勁了，一個(gè)坑連一個(gè)坑，設(shè)計(jì)UI這種東西反正我是沒有藝術(shù)細(xì)胞，不成套的東西湊起來是真的難看，國內(nèi)網(wǎng)絡(luò)上的玩意也是真的一言難盡。

反正兜兜轉(zhuǎn)轉(zhuǎn)不知多久最終又轉(zhuǎn)回來了Squareline，即使它毛病不少，但確實(shí)自家更懂自家貨。

吐槽一句，現(xiàn)在的網(wǎng)絡(luò)簡直就是個(gè)大型垃圾場，同質(zhì)化太嚴(yán)重了，LVGL作為一個(gè)主打硬件的UI框架，竟然特喵每個(gè)講Squareline這個(gè)軟件的教程都不講應(yīng)用的代碼，真搞不懂入門入了個(gè)啥？

送入坑嗎？

下到板子上能亮就完了，放個(gè)動(dòng)圖上去不更簡單？交互不需要控制是吧，反正我是從小白趟著坑過來的，LVGL的代碼我一個(gè)字都不懂，我只知道看完教程和沒看沒什么區(qū)別，該不會(huì)用還是不會(huì)用。

軟件上就這么點(diǎn)東西，只要搞懂界面上的英文是什么意思，稍微動(dòng)手實(shí)踐一下就知道它是干什么的，特喵又不是PS或者Altium。

古話還講送佛送到西，你這站門檻子上瞧屋內(nèi)，蹭蹭就不進(jìn)去是吧？

還是說官方教程沒說就默認(rèn)大家都懂了？（油管上官方視頻也是個(gè)鬼屎）

不避諱不藏著，我喜歡拿來主義和開箱即用，技術(shù)比我牛的人多了去了，我就是個(gè)普通愛好者，我能熬幾個(gè)通宵造輪子，但卻并不喜歡研究別人的代碼，尤其是賊多的那種，你不懂它的邏輯再?zèng)]有注釋是真的惡心。

硬件這條路，即使是別人走過的也是一坑又一坑，那些炫成果的，只有他自己知道糟了多么老罪。

最開始用Squareline時(shí)最頭痛的就是導(dǎo)出的代碼如何使用，當(dāng)然不是怎么下到板子里運(yùn)行，而是我的代碼如何獲取LVGL控件的數(shù)據(jù)、和LVGL控件觸發(fā)的事件如何執(zhí)行我的代碼。

這兩條也是交互最重要的東西，否則LVGL就成了自己玩自己的，和你毫不相干。

由于之前沒接觸過LVGL，網(wǎng)上那些講LVGL的教程和官方文檔也是真的難頂，找遍全網(wǎng)沒一個(gè)說怎么用的，百度翻到幾十頁都特喵一樣是真的想哭。

最終在官方論壇靠翻譯找了良久之后才找到，其實(shí)真的很簡單，刪掉ui_events.c或者干脆不輸出，直接在主函數(shù)里創(chuàng)建你那個(gè)名字的事件函數(shù)就行，教程里多這么句話虧網(wǎng)費(fèi)了還是怎么了？

簡單也只是在知道了才簡單，不知道的時(shí)候誰知道這玩意從哪來到哪去的，對于小白是真特喵的不友好。。。

這篇不是講這個(gè)的先略過，后面詳說從零構(gòu)建UI，再到結(jié)合自己代碼的每一步。

實(shí)戰(zhàn)不多講原理、只講應(yīng)用，有時(shí)候挺搞不懂的，我就只想用，為什么都想把我往精通上送，最終半瓶子咣當(dāng)還沒有用的熟效果好，賊無語。

甚至還有人教程搞留一手、讓你猜這種環(huán)節(jié)，實(shí)在是不知道該怎么評(píng)價(jià)，也許是忘了自己踩過的坑？或者讓別人掉坑里更有樂子？

有時(shí)真的你覺得就特喵這啊，的東西，可能在別人那就是個(gè)坎。也許是我太菜了？那么我為我的菜發(fā)言，你這我真不懂。。。

效果演示不用官方例程，一切從頭踩坑。

Squareline 版本 1.3.0，

LVGL 版本 8.3.7，

TFT-eSPI 版本 2.5.0，

TFT屏幕是ILI9341驅(qū)動(dòng)、 2.8寸、 240*320分辨率、電阻觸摸、 16位色，

主控為合宙ESP32-C3，

Arduino平臺(tái)（其它平臺(tái)的用法大差不差的，自己搞吧）。

很多人覺得Arduino低端、是玩具，但真的沒必要，實(shí)際應(yīng)用中Arduino做的產(chǎn)品還是有很多的，天天對著寄存器表撓頭才是高大上嗎？這個(gè)社會(huì)的節(jié)奏越來越快了，等你磨出來一個(gè)產(chǎn)品人家都迭代兩三代了，還有什么優(yōu)勢可言。當(dāng)然BUG多也是Arduino的劣勢，開源平臺(tái)沒辦法的事。

同樣我也挺看好合宙家Luatos的，雖然也在他家評(píng)論區(qū)里噴過，只能說有待完善，尤其是底層部分的手冊文檔，之前有個(gè)項(xiàng)目想移植個(gè)庫過去，搞了好久最終放棄了。就目前而言個(gè)人感覺，lua這個(gè)語言真的很友好，不過luatos目前做點(diǎn)小東西可以，在某些方面比Arduino優(yōu)勢更大，可一旦復(fù)雜了，就工作量而言，還是去Arduino里抓蟲子去吧，生態(tài)和環(huán)境還沒建起來。

作為一個(gè)國產(chǎn)開源平臺(tái)，我還是挺想貢獻(xiàn)一份bug的，講基礎(chǔ)使用的估計(jì)都爛大街了，還是等研究明白了再說吧。

物料都是成品模塊，碰到的最大的坑就是連線，我的杜邦線不是那種三五塊錢40p一板的便宜貨，25CM的線，SPI不通、不穩(wěn)定。。。IIC和SPI我甚至用過近半米的線都沒出過問題，但這個(gè)就碰上了，最終焊洞洞板上所有問題全部消失。

屏幕加觸摸占用9個(gè)IO，算了下C3的IO，拋去那些有限制的，帶完這塊屏沒剩幾個(gè)，所以畫了個(gè)板子做到一起了，想法是用這塊C3當(dāng)屏幕驅(qū)動(dòng)，剩一對串口和板載LED占用的那兩個(gè)IO，用來做外部擴(kuò)展。

有點(diǎn)類似串口屏，不過串口屏我也用過不少，只能說一般，限制很多，控制也很麻煩，兩者各有優(yōu)劣。

FPS 鎖33幀下，正常運(yùn)行CPU占用44%左右，摁下觸摸的時(shí)候88%左右（這個(gè)是觸摸檢測間隔小，不具太大參考性），如果再開個(gè)WIFI，自己的代碼如果多還是放到別的地方更好。

C3這塊板子，板載FLASH有點(diǎn)小，需要大的可以自己換，luatos的WIKI里有教程。

https://wiki.luatos.com/chips/esp32c3/change_flash.html

目前Squareline還不支持SD卡，自己從代碼改也行，不過C3由于掛了外置FLASH只剩1路SPI，還是屏幕和觸摸共用的，SDIO的引腳又都被占用了，況且平時(shí)也用不到什么動(dòng)畫視頻，板子上就沒做，C3自帶4MB FLASH，最大可更換為16MB的（需要自己改分區(qū)表，后面再說），只要圖片素材做的好點(diǎn)，一般都足夠用了。

（板子的圖紙有空整理下放到立創(chuàng)開源上，弄好了再回來加上鏈接，直接可以白嫖官方打板。）

照片拍的拉褲里了，切屏?xí)r的動(dòng)效掉幀比較嚴(yán)重，各小部件運(yùn)行都很流暢。

擴(kuò)大了些緩沖幀的空間，切屏流暢了點(diǎn)，但切屏動(dòng)效依然便秘，最低時(shí)只有7幀，畢竟價(jià)格在這擺著，總共才不到40塊，不要要求太高，大多數(shù)串口屏動(dòng)效這一項(xiàng)連有都沒有。

總之，這種能給單片機(jī)做UI的太少了，用和弄線框同樣的時(shí)間搞出這種來，個(gè)人感覺這點(diǎn)小毛病都能接受。