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

你可能感兴趣的:(emWin -- 可视化界面设计GUI Builder)