說明：

端午在家宅，進(jìn)行了LVGL的多端移植測試。

• 目標(biāo)是使用Squreline繪圖生成的同一段代碼，實(shí)現(xiàn)在PC端、安卓端、彩屏單片機(jī)端、單色屏單片機(jī)端四端顯示。最終目標(biāo)我是想實(shí)現(xiàn)在任意一端操作界面，其他幾端都能實(shí)現(xiàn)同步變化。

• 目前已經(jīng)實(shí)現(xiàn)了四端的簡單顯示：

• 安卓手機(jī)端、墨水屏手機(jī)、單片機(jī)彩屏端、單片機(jī)單色黑白屏端：

•  

• Windows端：
  

   

• 我手頭上也有幾款能用于移植演示的linux開發(fā)板，但由于我的老電腦壞掉了，新的電腦環(huán)境配置還沒裝，所以嵌入式Linux就還沒弄。但是想來也是一樣的效果。

簡單教程

1. 硬件和環(huán)境說明

目前使用的硬件如下：

1. 安卓：使用了一款電子墨水屏手機(jī)，一款普通手機(jī)，開發(fā)環(huán)境為AndroidStudio
2. 單片機(jī)彩屏開發(fā)板，是ArtinChip基于D133CBS的昆侖派開發(fā)板,分辨率480*272，帶觸摸
3. 單片機(jī)單色屏開發(fā)板，是我自己畫的板子，可以放單色電子墨水屏和一款魚鷹光電的2.9寸類墨水屏高反TFT單色屏，圖上的是魚鷹光電的屏。電子墨水的屏之前驅(qū)動(dòng)沒問題，電路板其實(shí)還有幾塊，但是懶得裝了，就沒放上去測試。目前的單片機(jī)是STM32F401，后續(xù)會(huì)換成HC32F460芯片（板子也畫好了，程序也調(diào)過，但是可能我買了假的芯片，燒寫幾次就報(bào)廢燒不進(jìn)去了，所以懶得焊接了，已經(jīng)放在一邊好久了，上班都沒心情焊板子，更別說下班了，哈哈）。
4. 桌面端使用Code::Blokcs的LVGL模擬器環(huán)境

2. 使用SquareLine創(chuàng)建一個(gè)簡單的頁面

• 在[SquareLine]頁面下載并安裝的最新軟件。

• 它有30天的免費(fèi)試用期。

• 然后，首先創(chuàng)建一個(gè)新的工程，保存到你能找到的文件地址中，然后設(shè)置分辨率，我設(shè)置的是480*320，這個(gè)可以自行根據(jù)需要來，畢竟是測試。界面如圖：

•  

• 中文的導(dǎo)入方式：

• • 首先，在電腦中搜索.ttf格式的字庫文件，選一個(gè)你要用的中文字庫，將它復(fù)制到上面保存的文件地址中的assets文件夾下
  • 然后在界面上點(diǎn)擊右側(cè)的font界面，此時(shí)可以刷新出剛剛復(fù)制的字體庫，然后在Symbols文本框中輸入你需要的中文字體
    

     

  此處我還沒搞清楚怎么樣支持外部flash的字庫，后續(xù)我會(huì)根據(jù)需要搞一下。因?yàn)槲易罱K是想實(shí)現(xiàn)一個(gè)文本閱讀器的，不可能只顯示極個(gè)別的中文。

  • 然后就可以使用中文了：

  •  

  • 點(diǎn)擊Export來導(dǎo)出文件,第一次需要選擇保存點(diǎn)，此處我們創(chuàng)建一個(gè)ui文件夾，用于放導(dǎo)出的文件。這個(gè)文件夾就是后面我們需要用到的文件。

    注意：直接復(fù)制ui文件的話，有些地方需要改路徑，比如 #include "lvgl/lvgl.h"會(huì)報(bào)錯(cuò)，改為 #include "lvgl.h" 即可。具體的請(qǐng)自行根據(jù)實(shí)際情況判斷處理。

3. PC客戶端移植

• 使用LVGL官方教程，有一個(gè) Code::Blocks的模擬器教程：從 [Simulator on PC] 頁面跳轉(zhuǎn)到 [code::blocks]頁面，根據(jù)教程一步一步來，先下載codeBlocks，然后下載當(dāng)前git，再下載lvgl包，解壓到對(duì)應(yīng)文件夾，再使用codeBlocks打開工程，然后一步步直到編譯通過。
• 但是官網(wǎng)的是最新的9.1版本的LVGL，所以內(nèi)部只有一個(gè)lvgl文件夾，不需要像這個(gè)教程一樣下載多個(gè)。
• 以上環(huán)境搭建好，并且能夠編譯執(zhí)行，正常跳出LVGL界面后，說明環(huán)境搭建完成。此時(shí)其實(shí)運(yùn)行后會(huì)顯示一個(gè)命令行的黑框，在 [build->select target]中選擇Release版本就沒有了。但是新的環(huán)境選擇release版本會(huì)報(bào)錯(cuò)，我以前在公司的環(huán)境解決過，好久沒弄，忘記怎么弄了，家里面的環(huán)境還是報(bào)錯(cuò)。先不管它了。
• 然后將SquareLine生成的ui文件夾復(fù)制到codeblocks工程文件所在目錄，然后在codeBlocks中對(duì)工程下的文件夾右擊，選擇 Add files recursively 來快速導(dǎo)入ui下所有的文件:
  

   

然后將ui/ui.c中的 ui_init() 替換掉之前main函數(shù)中的的LVGL的相關(guān)函數(shù)，然后包含相關(guān)的頭文件，再次編譯，修改代碼直到編譯成功即可運(yùn)行看效果。

注意，SquareLine只能選擇8.6或是8.11版本的LVGL，而codeblocks下載的LVGL大概率是最新版V9.0的，所以內(nèi)部有些函數(shù)是不兼容的，主要報(bào)錯(cuò)例如：
error: unknown type name 'lv_scr_load_anim_t'; did you mean 'lv_screen_load_anim_t'?|
則是由于新的函數(shù)命名不同，可以按照后面的提示，改為 lv_screen_load_anim_t 即可（其他還有 lv_screen_load_anim 等也類似處理）。

還有一個(gè)報(bào)錯(cuò)是：undefined reference to `lv_mem_free'，改為 lv_free 即可。
其他的錯(cuò)誤自行處理。

如果報(bào)錯(cuò)位置類似于：

#if LV_COLOR_DEPTH != 16
    #error "LV_COLOR_DEPTH should be 16bit to match SquareLine Studio's settings"
#endif

可以直接屏蔽掉中間的 #error 預(yù)編譯指令，或者自行更改對(duì)應(yīng)程序的LVGL配置。

一切無誤后，點(diǎn)擊運(yùn)行則會(huì)實(shí)現(xiàn)與SquareLine中繪制的同樣的界面（如果不是的話，可能是配置中的界面大小不同，找一下配置一下即可）。

本來想移植為與SquareLine同樣版本的LVGL的，但是移植了半天，還是沒成功，直接替換LVGL文件夾的話，最后有個(gè).cbp的工程文件需要處理，沒時(shí)間搞明白它了，就先放著。

4. 安卓端

安卓端我是參考的 [LVGL-在安卓上的移植].

• • 首先安裝[AndroidStudio],搭建好必要的環(huán)境后，它會(huì)自行安裝一些環(huán)境包。（寫安卓我是業(yè)余的，雖然很久之前就開始用AndroidStudio寫過安卓程序了，還學(xué)過寫小游戲，但是一直沒做過項(xiàng)目，都是自己玩，所以很水，時(shí)間長了就忘了，頁面只會(huì)用原生的拖拽控件實(shí)現(xiàn)，也沒學(xué)控件美化，很丑，所以想看看移植LVGL后效果怎么樣，如果還可以的話就多用LVGL寫界面）。
• 前期我是移植編譯不通過，然后胡亂按了一下 Ctrl+F5 還是 Ctrl+F9來著，它自己就把一些包下載好了。前期還會(huì)一個(gè)版本的錯(cuò)誤，直接在 build.gradle 中將 minSdkVersion 由19改為21 就能用了

•  

• 一切編譯通過后，插上手機(jī)，正確識(shí)別后（多數(shù)手機(jī)現(xiàn)在都需要打開開發(fā)者模式，允許USB調(diào)試。魅族手機(jī)是需要在 [設(shè)置 -> 我的手機(jī) ]中連續(xù)點(diǎn)擊 系統(tǒng)版本 5次，然后就可以在設(shè)置的附中功能中找到開發(fā)者選項(xiàng)，并打開USB調(diào)試。海信手機(jī)是在[設(shè)置->關(guān)于手機(jī)]中連續(xù)點(diǎn)擊 內(nèi)核版本 號(hào)，就能打開開發(fā)者模式。其他手機(jī)自行查找）即可點(diǎn)擊運(yùn)行調(diào)試。一切順利后就能運(yùn)行其編寫的測試程序了。
• 運(yùn)行成功后，即可移植我們自己的ui程序。
• 將ui文件夾直接復(fù)制到安卓工程所在文件夾下的 lvgl-android\app\src\main\cpp 文件夾下，與LVGL放在同一文件夾下（其他文件夾也行，自行處理），然后用 ui_init() 替換之前的代碼，包含頭文件，一切正確后即可編譯通過，然后用虛擬機(jī)或是實(shí)際手機(jī)就可以查看效果了，觸摸也能用。
• 由于手機(jī)分辨率高，480*272屏幕下繪制的各種控件看起來很大，但是放到手機(jī)中就非常小了，所以分辨率的適配還是一項(xiàng)很繁雜的功能，因?yàn)镾quareLine生成的代碼都是絕對(duì)地址，而且是像素級(jí)別的，所以如果想適配屏幕，要么重新用SquareLine繪制對(duì)應(yīng)屏幕大小的控件，要么自己手動(dòng)更改每一個(gè)控件的值。

5. MCU端

　　硬件使用的是ArtinChip的基于D133的昆侖派。這個(gè)芯片速度是480MHz，但是實(shí)際上跑LVGL跑分結(jié)果普遍在60-70FPS，而同樣速度的STM32H750，同樣的480*272的屏幕，我記得跑速普遍在180FPS（具體記不清了，以前在公司買的開發(fā)板上跑過），不知道是它沒優(yōu)化好還是真的就那么大差距。

• 它的資料都在 [ArtinChip]，按照教程下載文件包和下載工具后就能用了，環(huán)境都包含好了。里面也有各種開發(fā)教程。

• 將ui文件夾復(fù)制到packages的lvgl-ui文件夾下。由于使用的是RTT的scons編譯環(huán)境，所以需要構(gòu)建編譯鏈，用的是SConscript腳本。

• 直接復(fù)制lvgl-ui下的SConscript文件到 ui 文件夾下，將if GetDepend 下面的 src += Glob('xxx)部分修改，增加ui文件夾下的所有.c文件的路徑，然后就能編譯通過了。將aic_ui.c中的demo部分的函數(shù)直接替換為ui_init() 并包含ui.h頭文件，即可完成修改。編譯后下載就能看到效果圖，觸摸也能用。

• 單色屏則需要首先實(shí)現(xiàn)單色屏的畫點(diǎn)、刷屏函數(shù)。由于使用的單色屏它的刷新很慢，如果直接將畫點(diǎn)函數(shù)和局刷函數(shù)移植到LVGL對(duì)應(yīng)的接口上，效果很不好，會(huì)頻繁的局刷，整屏顯示要刷好久。所以將對(duì)應(yīng)的函數(shù)綁定到向緩沖區(qū)畫點(diǎn)，然后使用判斷是否完成緩沖區(qū)的畫點(diǎn)，完成后使用信號(hào)量來通知將緩沖區(qū)填充到屏幕，即可實(shí)現(xiàn)較為流暢的刷屏了。
  另外由于是單色屏，所以需要根據(jù)顏色范圍判斷需要畫黑點(diǎn)還是白點(diǎn)，以是否大于0x8FFF(使用16位色繪圖時(shí))來判斷，就可以實(shí)現(xiàn)有效區(qū)分（實(shí)際上，繪圖時(shí)只用了0xffff和0兩種顏色，但是LVGL渲染字體時(shí)，部分像素會(huì)變淺，所以不能用0或0xFFFF來判斷）

• 這個(gè)單色屏設(shè)備是我當(dāng)時(shí)想做一款電子單詞卡的項(xiàng)目，當(dāng)時(shí)剛畢業(yè)沒多久，軟硬件功底都很一般，摸索著完成了。當(dāng)時(shí)純用裸機(jī)和手寫界面，完成了菜單、TF卡文本閱讀、單詞卡展示切換等比較完善的功能。但是當(dāng)時(shí)代碼寫的比較LOW，界面也是純手繪，很LOW，硬件走線也很一般，本來一直想開源的，后面想想還是制作好一點(diǎn)再開源吧。結(jié)果這一拖就是好幾年，專利沒交錢也過期了。現(xiàn)在滿大街都是電子單詞卡，當(dāng)年我做完了市場上都是沒有的。
  現(xiàn)在想著，用LVGL做一個(gè)多端同步的設(shè)備，可以做很多好玩的東西，就不單單是一個(gè)電子閱讀器了。

• 另外，單色屏分辨率是 168*384，使用ui中的文件它會(huì)顯示中間部分，所以圖上控件放到中間單色屏上才能顯示。

• 這款屏幕其實(shí)很奇怪，當(dāng)時(shí)我買來時(shí)，它只有一個(gè)全屏刷圖的例子，圖片的分辨率很低。畫點(diǎn)只能畫一個(gè)矩形塊！！經(jīng)過我的嘗試，才發(fā)現(xiàn)，它一個(gè)像素，前六位表示6個(gè)像素點(diǎn)，還是交叉排列的，后面兩位是沒用的！！就很奇葩的設(shè)計(jì)。估計(jì)他們的工程師也沒調(diào)出來單個(gè)像素的畫點(diǎn)，后面我搞定了。它清晰度是比同為2.9寸的電子墨水屏要高一些（電子墨水屏的分辨率是128*296的），但是反光效果不太好，有點(diǎn)像鏡子，導(dǎo)致強(qiáng)光下燈珠都能看到，暗光下啥都看不到，所以需要找到角度才能看到，墨水屏在這方面會(huì)稍微強(qiáng)一點(diǎn)。二者刷新率都差不多，這個(gè)屏?xí)煲恍菚?huì)有很明顯的卷簾現(xiàn)象，問了廠家也解決不了（可能是他們不上心），我也懶得看手冊(cè)，先這么用吧。

結(jié)尾

首先得感謝上面我參考的一些文章作者。
對(duì)于多屏幕的快速適配我還需要多花點(diǎn)時(shí)間研究研究LVGL，比如安卓的分辨率較高，效果就不好，而且不同分辨率的屏幕顯示大小也不同。而且安卓不是全屏，有框和提示，后面有時(shí)間我需要優(yōu)化一下，爭取多端都做到無邊框。
還有就是PC端由于是9.0的LVGL版本，所以程序不是完全兼容，后面需要降級(jí)優(yōu)化一下。

這次程序就不放了，因?yàn)榉诸愄啵掖a也沒有幾行需要自己寫的，按照教程自行體驗(yàn)即可。

后面想做不少東西，順便看看能不能用來掙點(diǎn)錢。馬上要離職了，年紀(jì)也不小了，整天就玩玩板子寫程序，拿著點(diǎn)工資，老婆都找不著，唉，得多考慮搞錢了，有錢才能找老婆，沒錢只能打光棍。

本文水平有限，內(nèi)容很多詞語由于知識(shí)水平問題不嚴(yán)謹(jǐn)或很離譜，但主要作為記錄作用，能理解就好了，希望以后的自己和路過的大神對(duì)必要的錯(cuò)誤提出批評(píng)與指點(diǎn)，對(duì)可笑的錯(cuò)誤不要嘲笑，指出來我會(huì)改正的。 

 另外，轉(zhuǎn)載使用請(qǐng)注明作者和出處，不要?jiǎng)h除文檔中的關(guān)于作者的注釋。                                                                                                

                                                                                             隨夢，隨心，隨愿，恒執(zhí)念，為夢執(zhí)戰(zhàn)，執(zhí)戰(zhàn)蒼天！    ------------------執(zhí)念執(zhí)戰(zhàn)