GUI 設計原來可以這么簡單！

時間：2018-06-13 15:23:54

關鍵字： gui 嵌入式開發(fā)

手機看文章

掃描二維碼
隨時隨地手機看文章

[導讀]i.MX RT1052具有增強型顯示接口(eLCDIF),支持8/16/18/24位的數(shù)據(jù)總線模式。M1052核心板最高可支持1366x768的高清圖像顯示，芯片內置音頻接口，搭載免費的emWin圖形庫可廣泛應用多媒體設計。

i.MX RT1052具有增強型顯示接口(eLCDIF),支持8/16/18/24位的數(shù)據(jù)總線模式。M1052核心板最高可支持1366x768的高清圖像顯示，芯片內置音頻接口，搭載免費的emWin圖形庫可廣泛應用多媒體設計。

一、emWin介紹

emWin是Segger公司針對嵌入式平臺開發(fā)的穩(wěn)定、高效的圖形軟件庫，適合用于任何圖形LCD的操作應用，并可輸出高質量的無鋸齒的文字和圖形，通過調用emWin提供的函數(shù)接口，開發(fā)嵌入式圖形界面應用變得簡單而快捷。

使用emWin開發(fā)界面是個細致活，設計一個界面，往往需要對控件進行多次調整才能到達理想效果，這里向大家分享兩款設計emWin界面的利器：PC模擬器和GUI Builder。

二、emWin開發(fā)利器之一“模擬器”

為解決前期開發(fā)沒有硬件的煩惱,Segger提供了一個基于PC的emWin模擬器，用戶可在模擬器上進行GUI界面的設計，待界面設計成熟之后，再將代碼移植到嵌入式開發(fā)平臺，可加快整個工程的開發(fā)進度。如圖 1所示為emWin模擬器運行效果：

圖 1

emWin模擬器提供了全部的源碼，用戶可根據(jù)實際LCD的分辨率修改模擬器的屏幕分辨率。模擬器附帶的Demo源碼極具參考價值，幾乎涵蓋了emWin中所有的控件使用，用戶通過學習這些例程，并參考官方的emWin手冊，可快速入門emWin的開發(fā)。Demo源碼如圖 2所示：

圖 2

三、emWin開發(fā)利器之二“GUI builder”

GUIBuilder是emWin附帶的一款無需使用C語言編程即可創(chuàng)建對話框的工具，并提供了豐富的控件，用戶只需在GUIBuilder中通過拖拽控件，擺放控件的位置和調整控件的大小，還可以在上下文菜單中設置各控件的屬性，將設計的界面另存為C文件，可以直接拿到emWin工程中使用，生成的C代碼中還自動添加了事件處理框架，用戶只需關注事件的處理上。讓用戶從為設計一個界面而反復修改代碼，燒錄，運行，再修改的痛苦中解放出來。

在GUIBuilder上經過控件的拖拽，調整，修改屬性，輕松創(chuàng)建一個網(wǎng)絡設置對話框界面，如圖 3所示。

圖 3

將其生成的C代碼移植到項目工程中，再進行一些細節(jié)修改和調整，并將控件的文本顯示替換為中文顯示，界面的最終效果如圖 4所示:

圖 4

四、使用M1052核心板開發(fā)emWin

M1052核心板板載16MB SDRAM，完全滿足開發(fā)emWin高清圖形應用的條件。M1052配套的AWorks SDK軟件包，已經為用戶配置好LCD屏驅動，用戶無需關心底層驅動的實現(xiàn)，可直接啟動emWin應用程序的開發(fā)。并提供一款精簡的桌面UI系統(tǒng)Demo程序，給用戶一定的參考，使用戶能夠快速開發(fā)自己的桌面應用程序。Demo酷炫主界面如圖 5所示：

圖 5

桌面一共實現(xiàn)9個App應用，在主界面點擊對應圖標即可進入APP界面。“文件瀏覽”

可對所有被掛載的儲存設備文件進行瀏覽，可逐級進入和退出子目錄。如圖 6所示。

圖 6

“網(wǎng)絡設置”可對系統(tǒng)的IP地址、網(wǎng)關、子網(wǎng)掩碼進行設置和保存。如圖 7所示。

圖 7

“任務管理”可對系統(tǒng)中各任務的優(yōu)先級，堆棧信息，CPU占用率數(shù)據(jù)進行預覽。并以歷史曲線記錄CPU的占用率。如圖 8、圖 9所示。

圖 8

圖 9

“系統(tǒng)信息”可對當前系統(tǒng)的版本和資源進行預覽。如圖 10所示。

圖 10

“外設控制”可以通過界面上按鈕開啟或關閉評估板上的蜂鳴器和Led燈。如圖 11所示。