emWin -- 可视化界面设计GUI Builder

 

emWin -- 可视化界面设计GUI Builder

分类： emWin

如果你以前做过点阵式的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