emWin — 可視化介面設計GUI Builder

如果你以前做過點陣式的LCD屏，或是TFT螢幕的菜單，以及顯示效果設計，如果你曾經為了改善表徵圖的擺放位置，以及最佳化整體介面的搭配顯示效果，而不停的修改代碼，燒錄，運行，再修改的話，那麼你還是用上emWin吧。

如果你用過MicroSoft的Visual studio，那麼這裡就讓你體會一下，如何用類似的思路，可見即所得的思路，來設計整個儀錶的介面。

首先要請出emWin的另外一個工具軟體 -  emWinGUIBuilder。GUIBuilder應用程式是一款無需使用C程式設計語言即可建立對話方塊的工具,並且提供了豐富的控制項。控制項的擺放的位置以及控制項本身的大小，都可通過拖放操作來實現，而無需編寫原始碼。根據操作功能表，能添加其他各種屬性。對這些控制項的屬性進行編輯後，就能實現對控制項屬性的調整。該操作無需使用C 程式設計語言。對話方塊可以另存新檔C 檔案，並可以在emWin中直接載入。並可以通過修改該C檔案，來增強功能。並且還提供了相應的事件處理架構，讓客戶完全注重在事件的處理上，而不是限於整個介面的設計上。

好了，那我們舉個最簡單的例子，來操作一下。

硬體準備:GG DK 3750

軟體準備:GG DK 3750 -> Example -> guidemo,因為這個demo可以support touch。。這樣就可以操作控制項了。

1. 設計介面:

a. 開啟energymicro\reptile\emwin\exe檔案下的GUIBuilder.exe

b. 大家會在上面看到一排的控制項。點擊Window控制項，建立一個視窗。並在屬性視窗中設定視窗的大小為320*240，即xSize,ySize。

c. 然後依次在Window視窗，加入兩個Button，兩個Check，一個Progbar控制項。並修改控制項相應的屬性。例如Button的Name屬性，以及CheckBox的Label屬性。

d. 控制項的對齊，可以通過調整控制項屬性當中的xPos,yPos。

e.  如此，一個最簡單的介面就設計完成了。其目的就是想通過Button及checkBox，來控制DK板子上的LED等。順便熟悉整個事件響應的架構。

f. 點擊File -> Save，產生WindowDLG.c檔案。

2. 程式修改以及增加事件響應函數

a. 開啟guidemo工程。為了可以操作DK上的LED燈，需要在添加bsp_dk_leds.c， 這個檔案在energymicro\kits\common\bsp檔案夾下。

b. 將WindowDLG.c拷貝到工程energymicro\kits\EFM32GG_DK3750\examples\guidemo目錄下

c. 開啟GUIDEMO.c中，包含WindowDLG.c ，並修改main函數。代碼如下所示:

#include "GUI.h"
#include "WindowDLG.c"

int main(void)
{
  GUI_Init();
  PROGBAR_SetDefaultSkin(PROGBAR_SKIN_FLEX);
  WM_HWIN hWin;
  hWin = CreateWindow();
  PROGBAR_Handle hProg;
  hProg = WM_GetDialogItem(hWin, ID_PROGBAR_0);
  PROGBAR_SetValue(hProg, 0);
  PROGBAR_SetMinMax(hProg, 0, 5000);
  unsigned long ulDelay = 0;
  while(1)
  {
      GUI_Delay(10);
      ulDelay = ulDelay + 10;
      if(ulDelay > 5000)ulDelay = 0;
      PROGBAR_SetValue(hProg, ulDelay);
  }
}

d. 開啟WindowDLG.c，在裡面static void _cbDialog(WM_MESSAGE * pMsg)函數裡面增加事件響應，例如:

case ID_BUTTON_0: // Notifications sent by 'LED1'
      switch(NCode) {
      case WM_NOTIFICATION_CLICKED:
        static unsigned char ucFlag = 0;
        ucFlag = !ucFlag;
        if(ucFlag)
        {
            BSP_LedSet(1);
        }
        else
        {
            BSP_LedClear(1);
        }
        break;

e. 其他控制項也如此類推。上面的兩段函數中，都出現了ID_XXX，如ID_PROGBAR_0，ID_BUTTON_0，這個是控制項的標識符。ID顧名思義就是類似於身份證了。Visual Studio中也有類似的概念。

f. 最後就是ProgBar的操作，稍微複雜一些。所有的函數，在手冊裡面都可以查得到的。。呵呵。

以下是運行起來的照片。這個demo，是最簡單的一個demo，但是無論都複雜的demo，如果拆分開來，都是由簡單的組合而成的。因此，只要跨過這道門檻，也就為將來鋪平了道路。

如下是視頻:

http://v.youku.com/v_show/id_XNTAzOTc3NzE2.html

由於這個是根據今天的回憶寫的，怕有忘記的部分，所以把guidemo這個也上傳了。可以參考，如果後續要做項目的話，還是建議重新建立一個工程來做，比較好。

相關的代碼

http://download.csdn.net/detail/efm32/5010149