2×16 單色LCD
公司的產品都會用到單色的的 LCD (或稱 LCM)，由於現有程式歷史悠久，軟體架構用起來一直覺得不太好用，很想給它重新架構。寫 LCD 程式在部門裡算是個苦差事吧，由於只能硬刻，架構又不好，一點小改動往往就要修改不少程式碼。
u8glib – 單色面板專用
之前就有嘗試著找一些 opensource 的 library, u8glib 就是其中的一套。不得不說，比起本文要介紹的 littleVGL，u8glib 是為了單色的LCD而展開的 project。不過說實話，u8glib 的程式架構比較生澀難懂，porting 的過程也不是那麼順利，經過短暫的測試，最後未能在公司的版子帶起來。跟選舉一樣，只能怪自己努力不夠天分不足，畢竟還是有很多人成功帶起來了。
u8glib 畫面範例
u8glib 網友實際畫面
littleVGL – 本文主角
接下來就是本文的主角 littleVGL 了。乍看之下，還以為 littleVGL 是為了大型專案而開發的 LCD Library，但實際上它是非常有彈性的。可以針對個別功能開關，也可以使用單色的主題 (theme)。在最小的情況下，flash 佔用空間約 40K，RAM 則會依據 LCD 像素x畫面大小，最少需要 1/10的大小。
平板電腦介面
用途廣泛
就一些 MCU 而言，不可諱言，littleVGL佔用的空間還是蠻大的，這方面讀者可能要考量一下。如果是針對普通的 MCU，可能還是可以評估一下 u8glib 或是不要使用任何的 framework。但對一些稍微高檔一點的 MCU, (ex. Nordic nRF52840 256K RAM, 1Mb flash)，也是可以考慮。
至於對敝公司的產品，Linux 512MB RAM 256MB Flash, 40K RAM 連渣渣都算不上啊 XD。
從官網的例子上來看，這個opensource project的確是偏向給大型專案用的，以觸控介面為主。當然，要使用keypad來輸入也是可以，但是用起來稍不順手就是了。由於本人也是稍微嚐試而已，正式要採用可能也是要改不少東西。
Windows 上模擬
littleVGL 的一個優點，就是他可以在 Windows 上模擬執行，讓先期開發順利一點，而不用一定要直接porting到target平台上，這樣對於評估這個方案的確有不少方便之處。本篇會先說明如何在 Windows 上執行，下一篇會說明在 target 上如何修改。
LittleVGL on Windows
在 Windows 上要執行 littleVGL 其實還是小複雜的，要安裝不少東西，所以我將用的到的東西都放在網路上，讓使用者可以一步步照著執行即可。本文所有需的程式，可以在最後面的連結下載。
Step1 – 官網流程說明
關於如何設置 Windows 上的模擬，可以參考官網的完整說明(這裡)。正式名稱是 pc-simulator 或 simulator on pc，如果將來文件位置變了，可以此尋找。
Step2 – 下載 64bits Eclipse C++ 開發環境
Eclipse C++ IDE 下載
要執行 pc-simulator 有多種開發工具可選擇，包括 Eclipse, Visual studio, QT creator。這邊我們使用 Eclipse C++ IDE (CDT) 來當做測試環境，官方下載位址在這裡。
注意一下，為簡化設定。Eclipse 和 JRE 我們是使用 64 bit的， MinGW 和 SDL2 是使用 32bit 的。雖然這樣搭有點怪怪的，但運作上是ok。
Step3 – 下載 SDL2 套件
SDL 是一套 open source 的跨平台多媒體函式庫，由於我們只是使用，就不再說明，直接下載就好了。我們需要下載的是 mingw C 編譯器用的binary開發版本，下載位置在這裡。
SDL2下載類別
Step4 – 下載 Eclipse 的 pc-simulator 範例專案
接下來就是要下載 littleVGL pc-simulator 的 Eclipse 範例專案，官方的說明網頁在這裡。按下如下圖的下載即可。下載後解壓縮。
範例專案下載
Step5 – 下載 mingw 編譯環境
剛下載的 Eclipse C++ IDE 僅是一個開發介面，實際使用的編譯器則尚未案裝。因此這一步驟就是要下載 mingw 編譯器，其官方網站為 http://www.mingw.org/。在其左側面版有一個 Download 選項，點進去後就可以看到下載的檔案，但下載 link 感覺不是那麼明顯，需注意看一下。
側邊下載欄
不明顯的下載位置
啟動 mingw-get-setup.exe 後，就會跳出安裝的選項，請依下圖選擇並安裝在 C:\ ，以符合本文的說明。安裝後將 C:\MinGW\bin\mingw32-make.exe 複製一份，並改名為make.exe
minGW 的安裝選項
Step6 – 下載 JRE8
Eclipse C++ IDE 會使用到 Java，此處我們要下載 JRE8 64bit才行使用。本文所使用的是 8u221 的版本，由於往後肯定會有更新，若新版不能執行可以上網找相同的版本試試。下載完畢後安裝，一直按下一步應該就可以完成。
JRE 下載
Step7 – 將 MinGW 加入 PATH
接下來將MinGW 加入 PATH 中，讓 Eclipse 可以去執行 MinGW 的 compiler。開啟【控制台 –> 系統 –> 進階系統設定 –> 環境變數 】，將系統變數內的 PATH，加入 C:\MinGW\bin，然後將系統重開。
Step8 – 複制 SDL2 檔案
將下載下來的 SDL2 Library 解壓縮後，複製下列檔案
- i686-w64-mingw32\include\* 複製到 C:\MinGW\include
- i686-w64-mingw32\lib\* 複製到 C:\MinGW\lib
- i686-w64-mingw32\bin\SDL2.dll 複製到桌面，稍後會用到
Step9 – 編譯 pc-simulator 範例專案
解壓縮下載的 Eclipse 後，執行主執行檔。選擇 File –> Import –> General –> Existing Projects into workspace，然後會跳出一個視窗，點選 Select root directory 並指向 pc-simulator 解壓縮後的目錄。
選擇匯入專案
將路徑指向範例專案
匯入完成後，在左側 Project Explorer 內會出現 pc-simulator 的專案。在其上按右鍵選擇 【property –> C/C++ Build –> Setting –> Cross GCC Linker –> Libraries】，在上面的 Libraries 加入 mingw32 ，並移到第一順位。然後按 Apply and Close，回到主畫面。
加入 Library
接下來就可以選擇 Project –> Build All 來進行編譯，編譯完畢後在 pc-simulaotor 範例專案下會產生一個 Debug 目錄。在這可以看到已產生的執行檔 pc-simulator.exe，接著複製桌面上的 SDL2.dll 移到此處，再執行 pc-simulator.exe 就可以看到範例專案的畫面了。
範例程式
範例專案可能有什麼問題，無法直接從 Eclipse 上面執行該執行檔，需自行點擊執行檔，這點請注意了。
Step 10 – 修改範例為單色與簡易元件
最後我們做點簡易的修改，把畫面改成單色，並產生一個 checkbox 和 button。利用 Eclipse 開啟 pc-simulator 專案裡的 lv_examples –> lv_apps –> demo –> demo.c，然後到 demo_create() 並將其內容取代成下面程式碼。使用者可以參考官網更多的說明，和範例來使用其它的元件。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
lv_theme_t * th = lv_theme_mono_init(210, NULL); //Set a HUE value and a Font for the Night Theme lv_theme_set_current(th); /* Checkbox */ static lv_style_t style_border; lv_style_copy(&style_border, &lv_style_plain); style_border.glass = 1; style_border.body.empty = 1; lv_obj_t * cont; cont = lv_cont_create(lv_scr_act(), NULL); lv_cont_set_layout(cont, LV_LAYOUT_COL_L); /*Arrange the children in a column*/ lv_cont_set_fit(cont, true, true); /*Fit the size to the content*/ lv_obj_set_style(cont, &style_border); lv_obj_t * cb; cb = lv_cb_create(cont, NULL); lv_cb_set_text(cb, "Potato"); lv_obj_set_style(cb, &style_border); //lv_cb_set_action(cb, null); /* Button */ lv_obj_t * label;// = lv_label_create(lv_scr_act(), NULL); //lv_label_set_text(label, "Default buttons"); //lv_obj_align(label, NULL, LV_ALIGN_IN_TOP_MID, 0, 5); /*Create a normal button*/ lv_obj_t * btn1 = lv_btn_create(lv_scr_act(), NULL); lv_cont_set_fit(btn1, true, true); /*Enable resizing horizontally and vertically*/ //lv_obj_align(btn1, label, LV_ALIGN_OUT_BOTTOM_MID, 0, 10); lv_obj_set_free_num(btn1, 1); /*Set a unique number for the button*/ //lv_btn_set_action(btn1, LV_BTN_ACTION_CLICK, btn_click_action); /*Add a label to the button*/ label = lv_label_create(btn1, NULL); lv_label_set_text(label, "Normal"); lv_obj_align(btn1, NULL, LV_ALIGN_IN_TOP_MID, 100,100); //lv_obj_del(btn1); |
重新編譯後，再執行就可以看到如以下的畫面了。
結語
LittleVGL 算是一套不錯的圖型 UI 管理介面，但真的要寫複雜的 UI 似忽也不是那麼的容易。因為這只是開頭，到底如何也是要詳細深究，也許不存那種算又小又強大又好移植的框架吧 ~~~ Orz
下一篇，我們會將 littleVGL 直接在嵌入式系統上執行起來，並展示必要的修改。
 Windows 下進行模擬){kind=link}