LittleVGL – 嵌入式系統的 LCD 涵式庫 (1) Windows 下進行模擬

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() 並將其內容取代成下面程式碼。使用者可以參考官網更多的說明,和範例來使用其它的元件。

 

重新編譯後,再執行就可以看到如以下的畫面了。

結語

LittleVGL 算是一套不錯的圖型 UI 管理介面,但真的要寫複雜的 UI 似忽也不是那麼的容易。因為這只是開頭,到底如何也是要詳細深究,也許不存那種算又小又強大又好移植的框架吧 ~~~ Orz

下一篇,我們會將 littleVGL 直接在嵌入式系統上執行起來,並展示必要的修改。

 

檔案下載

本文所用到的檔案

Leave a Reply