【emWin实战教程V2.0】第6章 GUIBuilder5.32的使用方法

开发板

转最新教程
本小节主要带领大家学习GUIBuilder5.32的使用，很好的利用这个软件，能使得STemWin界面设计事半功倍。
  6.1 初学者重要提示
6.2  GUIBuilder5.32的使用步骤
6.3  emWin5.32模拟器上运行GUIBuilder5.32生成的代码
6.4  移植GUIBuilder5.32生成的代码到开发板
6.5  实验例程说明（RTOS）
6.6  实验例程说明（裸机）
6.7       总结

lee_st · 2017-1-2 00:27:50

6.1 初学者重要提示

1、模拟器使用的emWin是5.32版本，如果SEGGER官网以后有更高版本的推出，使用方法是一样的。另外，开发板用的STemWin版本也是5.32，如果STemWin有升级版发布，使用方法也是相同的。

2、模拟器的运行是采用的VC6.0精简版，大小仅16MB，支持XP系统，WIN7的32位和64位系统，WIN8和WIN10不支持，实际测试比较好用。默认情况下，本教程运行模拟器，全部用的是此软件。

3、对于初学者来说，务必要掌握GUIBuilder的使用方法，以及将其生成的代码移植到模拟器和开发板的方法。具体用到的emWin功能会在后面的章节中逐一讲解，本章节主要是学习使用方法。

lee_st · 2017-1-2 00:28:05

6.2 GUIBuilder5.32的使用步骤

首先需要大家按照第2章2.3.4小节的说明下载STemWin的软件包，其中GUIBuilder5.32位于路径：STM32Cube_FW_F4_V1.13.0MiddlewaresSTSTemWinSoftware里面

lee_st · 2017-1-2 00:28:24

6.2.1 第一步：建立一个对话框

1、找到GUIBuilder后，打开这个软件，并按照如下方式建立一个对话框。

2、修改对话框大小为800*480。

lee_st · 2017-1-2 00:28:41

3、下面设置对话框标题的字体，对齐方式，和显示的文本。首先，在建立的对话框上面右击鼠标，选择Set font。

弹出如下界面，并选择字体GUI_FONT_32B_ASCII，点击OK。

lee_st · 2017-1-2 01:10:05

设置好字体以后再设置对齐方式，还是右击鼠标，选择Set text alignment，并选择居中。

配置完成后，上面的字体Framewin字体会居中显示，然后还是鼠标右击，选择Set title text，并更改Framewin为armfly，修改的地方在左下角：

图片:6.7.png

设置好以后，对话框就算建立完毕。

lee_st · 2017-1-2 01:10:34

6.2.2 第二步：在对话框上面建立按钮

按钮的建立方法和上面的对话框是一样的。按钮上面的字体大小和显示内容，大家可以任意设置。按钮上的文本不支持对齐方式设置，默认是居中显示，这里是显示字符armfly，字体GUI_FONT_24B_ASCII，建立后的效果如下所示：

对于建立的按钮控件，用户可以任意拖动，并通过鼠标调整其大小，调整方法如下：先左击选中相应控件，会出现绿色的边框，在边框的地方拖动鼠标即可修改大小

lee_st · 2017-1-2 01:10:57

6.2.3 第三步：在对话框上面建立滚动条

同样的方法，添加滚动条后的效果如下所示：

lee_st · 2017-1-2 01:11:18

6.2.4 第四步：在对话框上面建立滑动条

同样的方法，添加滑动条后显示效果如下：

lee_st · 2017-1-2 01:11:42

6.2.5 第五步：建立好后点击File->save

保存方法如下：

保存后生成的文件在GUIBuilder5.32软件所在的文件夹里面：

lee_st · 2017-1-2 01:12:05

6.3 emWin5.32模拟器上运行GUIBuilder5.32生成的代码

这里为大家讲解emWin5.32上面运行GUIBuilder5.32所生成代码的方法。另外，很多没有用过VC6.0的初学者不知道怎么使用，这里就简单的啰嗦下。
首先，按照第2章的2.3.3小节所讲述的方法，将模拟器下载下来，然后解压模拟器软件包，VC6.0要打开的工程文件名是如下这个文件（先将VC6.0打开，然后将这个文件拖动到VC6.0上即可）：

VC6.0打开emWin5.32模拟器后，左侧栏是这样的：

lee_st · 2017-1-2 01:12:24

展开上面截图的‘+’后就可以看到：

然后再展开Application文件分组：

lee_st · 2017-1-2 01:12:42

这里打开GUIDEMO_Start.c，将此文件里面的内容全部删掉，然后将本章节6.2.5小节里面生成的FramewinDLG.c文件里的所有内容复制到GUIDEMO_Start.c文件里，仅这样程序还是不能够运行的，需要在GUIDEMO_Start.c文件的内容末尾再加入如下代码就可以运行了。
复制代码
/*********************************************************************
*
* MainTask
*/
void MainTask(void)
{
/* 窗口自动使用存储设备 */
WM_SetCreateFlags(WM_CF_MEMDEV);
/* 初始化 */
GUI_Init();
/* 创建对话框，使用GUIBulder5.28生成的对话框创建函数 */
CreateFramewin();
while(1)
{
GUI_Delay(10);
}
}

lee_st · 2017-1-2 01:13:05

GUIDEMO_Start.c文件中完整的内容如下：
复制代码
/*********************************************************************
*                                                                   *
*             SEGGER Microcontroller GmbH & Co. KG             *
*       Solutions for real time microcontroller applications       *
*                                                                   *
**********************************************************************
*                                                                   *
* C-file generated by:                                              *
*                                                                   *
*       GUI_Builder for emWin version 5.28                         *
*       Compiled Jan 30 2015, 16:41:06                            *
*       (c) 2015 Segger Microcontroller GmbH & Co. KG             *
*                                                                   *
**********************************************************************
*                                                                   *
*       Internet: www.segger.com  Support: support@segger.com    *
*                                                                   *
**********************************************************************
*/
// USER START (Optionally insert additional includes)
// USER END
#include "DIALOG.h"
/*********************************************************************
*
*    Defines
*
**********************************************************************
*/
#define ID_FRAMEWIN_0 (GUI_ID_USER + 0x00)
#define ID_BUTTON_0 (GUI_ID_USER + 0x01)
#define ID_SCROLLBAR_0 (GUI_ID_USER + 0x02)
#define ID_SLIDER_0 (GUI_ID_USER + 0x03)
// USER START (Optionally insert additional defines)
// USER END
/*********************************************************************
*
*    Static data
*
**********************************************************************
*/
// USER START (Optionally insert additional static data)
// USER END
/*********************************************************************
*
*    _aDialogCreate
*/
static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
  { FRAMEWIN_CreateIndirect, "Framewin", ID_FRAMEWIN_0, 0, 0, 800, 480, 0, 0x64, 0 },
  { BUTTON_CreateIndirect, "Button", ID_BUTTON_0, 130, 28, 147, 35, 0, 0x0, 0 },
  { SCROLLBAR_CreateIndirect, "Scrollbar", ID_SCROLLBAR_0, 129, 74, 147, 28, 0, 0x0, 0 },
  { SLIDER_CreateIndirect, "Slider", ID_SLIDER_0, 133, 118, 137, 25, 0, 0x0, 0 },
  // USER START (Optionally insert additional widgets)
  // USER END
};
/*********************************************************************
*
*    Static code
*
**********************************************************************
*/
// USER START (Optionally insert additional static code)
// USER END
/*********************************************************************
*
*    _cbDialog
*/
static void _cbDialog(WM_MESSAGE * pMsg) {
  WM_HWIN hItem;
  int    NCode;
  int    Id;
  // USER START (Optionally insert additional variables)
  // USER END
  switch (pMsg->MsgId) {
  case WM_INIT_DIALOG:
//
// Initialization of 'Framewin'
//
hItem = pMsg->hWin;
FRAMEWIN_SetFont(hItem, GUI_FONT_32B_ASCII);
FRAMEWIN_SetTextAlign(hItem, GUI_TA_HCENTER | GUI_TA_VCENTER);
FRAMEWIN_SetText(hItem, "armfly");
//
// Initialization of 'Button'
//
hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_0);
BUTTON_SetFont(hItem, GUI_FONT_24B_ASCII);
BUTTON_SetText(hItem, "armfly");
// USER START (Optionally insert additional code for further widget initialization)
// USER END
break;
  case WM_NOTIFY_PARENT:
Id = WM_GetId(pMsg->hWinSrc);
NCode = pMsg->Data.v;
switch(Id) {
case ID_BUTTON_0: // Notifications sent by 'Button'
   switch(NCode) {
   case WM_NOTIFICATION_CLICKED:
      // USER START (Optionally insert code for reacting on notification message)
      // USER END
      break;
   case WM_NOTIFICATION_RELEASED:
      // USER START (Optionally insert code for reacting on notification message)
      // USER END
      break;
   // USER START (Optionally insert additional code for further notification handling)
   // USER END
   }
   break;
case ID_SCROLLBAR_0: // Notifications sent by 'Scrollbar'
   switch(NCode) {
   case WM_NOTIFICATION_CLICKED:
      // USER START (Optionally insert code for reacting on notification message)
      // USER END
      break;
   case WM_NOTIFICATION_RELEASED:
      // USER START (Optionally insert code for reacting on notification message)
      // USER END
      break;
   case WM_NOTIFICATION_VALUE_CHANGED:
      // USER START (Optionally insert code for reacting on notification message)
      // USER END
      break;
   // USER START (Optionally insert additional code for further notification handling)
   // USER END
   }
   break;
case ID_SLIDER_0: // Notifications sent by 'Slider'
   switch(NCode) {
   case WM_NOTIFICATION_CLICKED:
      // USER START (Optionally insert code for reacting on notification message)
      // USER END
      break;
   case WM_NOTIFICATION_RELEASED:
      // USER START (Optionally insert code for reacting on notification message)
      // USER END
      break;
   case WM_NOTIFICATION_VALUE_CHANGED:
      // USER START (Optionally insert code for reacting on notification message)
      // USER END
      break;
   // USER START (Optionally insert additional code for further notification handling)
   // USER END
   }
   break;
// USER START (Optionally insert additional code for further Ids)
// USER END
}
break;
  // USER START (Optionally insert additional message handling)
  // USER END
  default:
WM_DefaultProc(pMsg);
break;
  }
}
/*********************************************************************
*
*    Public code
*
**********************************************************************
*/
/*********************************************************************
*
*    CreateFramewin
*/
WM_HWIN CreateFramewin(void);
WM_HWIN CreateFramewin(void) {
  WM_HWIN hWin;
  hWin = GUI_CreateDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), _cbDialog, WM_HBKWIN, 0, 0);
  return hWin;
}
/*********************************************************************
*
*    MainTask
*/
void MainTask(void)
{
   /* 窗口自动使用存储设备 */
   WM_SetCreateFlags(WM_CF_MEMDEV);
   /* 初始化 */
   GUI_Init();
/* 创建对话框，使用GUIBulder5.28生成的对话框创建函数 */
   CreateFramewin();
   while(1)
   {
      GUI_Delay(10);
   }
}

lee_st · 2017-1-2 01:13:30

点击这里进行编译和运行：

实际显示效果如下：

图片:6.19.png

此处初学者会有疑问，我们设置界面分辨率不是800*480吗，怎么显示的不全？这是因为默认的界面分辨率是320*240。第8章跟大家讲emWin模拟器的使用方法时，再详细讲解如何修改显示分辨率。

lee_st · 2017-1-2 01:13:57

6.4 移植GUIBuilder5.32生成的代码到开发板

移植到模拟器跟移植到开发板上的方法是一样的，先将本章节6.2.5小节里面生成的FramewinDLG.c文件里的所有内容复制到MDK或者IAR工程模板的MainTask.c文件里（这里以带RTOS的emWin模板为例进行截图，裸机版本是一样的，也是这个文件）：

lee_st · 2017-1-2 01:14:14

仅这样程序还是不能够运行的，需要在MainTask.c文件的内容末尾再加入如下代码就可以运行了。
复制代码
/*********************************************************************
*
* MainTask
*/
void MainTask(void)
{
/* 窗口自动使用存储设备 */
WM_SetCreateFlags(WM_CF_MEMDEV);
/* 初始化 */
GUI_Init();
/* 创建对话框，使用GUIBuilder5.28生成的对话框创建函数 */
CreateFramewin();
while(1)
{
GUI_Delay(10);
}
}

lee_st · 2017-1-2 01:14:29

本章6.5小节和6.6小节讲解的实验例程都是用的这个代码，不过修改了注释使其更加规范并修改了MainTask函数，使emWin在STM32F429/439的运行性能发挥到最佳，修改后的代码如下：
复制代码
/*
*********************************************************************************************************
* 函数名: MainTask
* 功能说明: GUI主函数
* 形参: 无
* 返回值: 无
*********************************************************************************************************
*/
void MainTask(void)
{

   /* 初始化 */
   GUI_Init();

   /*
   关于多缓冲和窗口内存设备的设置说明
      1. 使能多缓冲是调用的如下函数，用户要在LCDConf_Lin_Template.c文件中配置了多缓冲，调用此函数才有效：
         WM_MULTIBUF_Enable(1);
      2. 窗口使能使用内存设备是调用函数：WM_SetCreateFlags(WM_CF_MEMDEV);
      3. 如果emWin的配置多缓冲和窗口内存设备都支持，二选一即可，且务必优先选择使用多缓冲，实际使用
         STM32F429BIT6 + 32位SDRAM + RGB565/RGB888平台测试，多缓冲可以有效的降低窗口移动或者滑动时的撕裂
         感，并有效的提高流畅性，通过使能窗口使用内存设备是做不到的。
      4. 所有emWin例子默认是开启三缓冲。
   */
   WM_MULTIBUF_Enable(1);

   /*
   触摸校准函数默认是注释掉的，电阻屏需要校准，电容屏无需校准。如果用户需要校准电阻屏的话，执行
      此函数即可，会将触摸校准参数保存到EEPROM里面，以后系统上电会自动从EEPROM里面加载。
   */
//TOUCH_Calibration();

   /* 创建对话框 */
   CreateFramewin();

   while(1)
   {
      GUI_Delay(10);
   }
}

lee_st · 2017-1-2 01:15:05

6.5  实验例程说明（RTOS）

实验目的：
1.    学习GUIBuilder的使用。
2.    emWin功能的实现在MainTask.c文件里面。
实验内容：
1.    K1按键按下，串口打印任务执行情况（波特率115200，数据位8，奇偶校验位无，停止位1）。
2.    K2按键按下，实现截图功能，将图片以BMP格式保存到SD卡中。
3.    各个任务实现的功能如下：
                  App Task Start 任务：实现按键和触摸扫描。
                  App Task MspPro任务：实现截图功能，将图片以BMP格式保存到SD卡中。
                  App Task UserIF  任务：按键消息处理。
               App Task COM 任务：暂未使用。
   App Task GUI 任务：GUI任务。
μCOS-III任务调试信息（按K1按键，串口打印）：