【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         总结

6.1  初学者重要提示

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

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

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

6.2   GUIBuilder5.32的使用步骤

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

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

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

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

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

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

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

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

图片:6.7.png

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

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


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

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

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


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

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


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

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


    保存方法如下：

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

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模拟器后，左侧栏是这样的：

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

然后再展开Application文件分组：

这里打开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);
}
}

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);
     }
}

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

实际显示效果如下：

图片:6.19.png

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

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


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

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

本章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);
     }
}

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按键，串口打印）：

STemWin界面显示效果：
    800*480分辨率界面效果，小分辨率显示屏仅可以显示一部分。