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

news2024/11/13 9:33:32

1 项目需求

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

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

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

2 移植 ucgui

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

相关文件介绍如下：

ucgui files.png

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

ucgui Project.png

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 导出的文件到工程项目中