基于stm32使用ucgui+GUIBuilder开发ui实例

1 项目需求

1.1 基于Tft 触摸屏实现一个自锁按键

1.2 按键在按下后背景色需要进行变化，以凸显当前按键状态（选中or 未选中）

1.3 按键选中时对某一gpio输出低电平，非选中时输出高电平

2 移植 ucgui 

 UCGUI的文件数量很大，主要用到/Config 和 GUI两个文件夹下文件

        相关文件介绍如下：

    将Config和GUI下所有文件加入工程，MDK中新建工程需要划分好结构，这是UCGUI官方推荐的结构：

  

        

        JPEG, MemDev , MultiLayer , Widget , Wm 这5 个文件夹的内容可以暂时不加入MDK工程。

因为这些文件起到的是扩展功能，在移植阶段可以先不添加，等到以后用到其中的功能时再选择添加。但是建议都添加进去，避免遇到各种无解问题。

      ConverMono , ConverColor ,Core ,Font 这四个目录下的文件是不用修改的。要修改的文件在LCDDriver ，Config 这两个目录下。

    LCDDriver 是LCD的驱动接口函数文件，需要将自己的LCD驱动函数提供给UCGUI调用。

    需要提供3个LCD底层驱动函数：

• void LCD_L0_SetPixelIndex(int x, int y, int PixelIndex)  LCD画点函数, 用指定颜色填充一个像素
• unsigned int LCD_L0_GetPixelIndex(int x, int y)  LCD读取定点颜色函数，读取一个像素点的16位RGB颜色值

LCDDriver 下有三个文件， LCDDummy.c 、 LCDNull.c 和LCDWin.c。 这三个都是UCGUI LCD接口模板文件。功能一样，只是移植时修改的细节不一样。我们可以选用其中一个，稍作修改作为接口文件。以LCDDummy.c为例，需要把其中LCD_L0_SetPixelIndex、LCD_L0_GetPixelIndex接口函数基于自己开发板的进行实现。

详细移植参考

stm32 UCGUI 完美移植_基于stm32的ucgui移植手册-CSDN博客

考虑我使用的ucgui库不支持自锁按键的功能，分析源码后对源码进行了修改设计中通过GUI_GetKey()函数获取被按下的键值，通过按下键值在应用层进程自锁功能设计，调用按键背景颜色改变来实现按下后背景变化功能，想了解详细实现可下载源码进行分析

3 基于 GUIBuilder 设计ui交互

下载地址GUIBuilder下载地址  ucGUI模拟器资源-CSDN文库

3.1打开GUIBuilder，界面如下

3.2添加 window 窗体

3.3 添加3个 button按键，分别设置为button1、button2、button3

3.4 将以上ui设计导出为c文件，选择file 中save ，导出文件默认存储在GUIBuilder 当前软件目录下，名称为WindowDLG.c

3.5 WindowDLG.c文件内容如下

/*********************************************************************
*                                                                    *
*                SEGGER Microcontroller GmbH & Co. KG                *
*        Solutions for real time microcontroller applications        *
*                                                                    *
**********************************************************************
*                                                                    *
* C-file generated by:                                               *
*                                                                    *
*        GUI_Builder for emWin version 5.22                          *
*        Compiled Jul  4 2013, 15:16:01                              *
*        (c) 2013 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_WINDOW_0        (GUI_ID_USER + 0x00)
#define ID_BUTTON_0        (GUI_ID_USER + 0x01)
#define ID_BUTTON_1        (GUI_ID_USER + 0x02)
#define ID_BUTTON_2        (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[] = {
  { WINDOW_CreateIndirect, "Window", ID_WINDOW_0, -1, 1, 240, 320, 0, 0x0, 0 },
  { BUTTON_CreateIndirect, "Button1", ID_BUTTON_0, 25, 17, 181, 72, 0, 0x0, 0 },
  { BUTTON_CreateIndirect, "Button2", ID_BUTTON_1, 28, 125, 177, 74, 0, 0x0, 0 },
  { BUTTON_CreateIndirect, "Button3", ID_BUTTON_2, 26, 232, 179, 66, 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) {
  int NCode;
  int Id;
  // USER START (Optionally insert additional variables)
  // USER END

  switch (pMsg->MsgId) {
  case WM_NOTIFY_PARENT:
    Id    = WM_GetId(pMsg->hWinSrc);
    NCode = pMsg->Data.v;
    switch(Id) {
    case ID_BUTTON_0: // Notifications sent by 'Button1'
      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_BUTTON_1: // Notifications sent by 'Button2'
      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_BUTTON_2: // Notifications sent by 'Button3'
      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;
    // 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
*
**********************************************************************
*/
/*********************************************************************
*
*       CreateWindow
*/
WM_HWIN CreateWindow(void);
WM_HWIN CreateWindow(void) {
  WM_HWIN hWin;

  hWin = GUI_CreateDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), _cbDialog, WM_HBKWIN, 0, 0);
  return hWin;
}

// USER START (Optionally insert additional public code)
// USER END

/*************************** End of file ****************************/
 

考虑程序uggui库与GUIBuilder 导出的库有些兼容问题，先把源码中红色删除

static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
  { WINDOW_CreateIndirect, "Window", ID_WINDOW_0, -1, 1, 240, 320, 0, 0x0, 0 },
  { BUTTON_CreateIndirect, "Button1", ID_BUTTON_0, 25, 17, 181, 72, 0, 0x0, 0 },
  { BUTTON_CreateIndirect, "Button2", ID_BUTTON_1, 28, 125, 177, 74, 0, 0x0, 0 },
  { BUTTON_CreateIndirect, "Button3", ID_BUTTON_2, 26, 232, 179, 66, 0, 0x0, 0 },
  // USER START (Optionally insert additional widgets)
  // USER END
};

3 移植GUIBuilder 导出的文件到工程项目中

在主程序中根据GUI_GetKey返回的当前被按下的键值进行自锁功能设计

比如，按下1次为选中，按下2两次为取消

对button1、button2、button3 进行逻辑互斥，只要一个按下其他都为取消

4 运行效果

4.1按下button1

4.2 按下button3

4.3 取消button3

5、 源码下载

基于stm32使用ucgui+GUIBuilder开发ui实例源码资源-CSDN文库