STM32——EMWIN BUTTON 控件显示位图（十五）

EMWIN

前言

有时候我们希望在按钮上显示一些图片以区分打开和关闭，比如上一小节中打开 LED，使用 emwin 自带的 BUTTON 控件的时候打开和关闭 LED 时 BUTTON 的状态都是一样的，不能很只管的判断出此时 LED 灯的状态，需要我们去查看 LED 的亮灭才能判断。emwin 提供了在 BUTTON 上显示位图的 API 函数，那么我们就可以在打开和关闭的时候通过显示不同的位图来区分开、关这两种状态

一、制作位图 C 文件

首先我们肯定需要制作两个位图文件，当关闭的时候我们在 BUTTON 上显示图 14.6.1 所示图片，打开的时候显示图 14.6.2 所示图片，这两种图片的格式均为 BMP。

怎么生成.c文件看之前的博客就可以了。

二、GUIBulider 设计界面

用 GUIBulider 设计出的界面中使用了一个我们还没有用过的控件：TEXT，我们用 TEXT 控件显“LED1:”和“BEEP:”这两个提示信息。图中的按钮还是使用的 emwin默认的按钮类型，要想修改为位图就需要修改生成的 C 文件，注意：BUTTON 控件上没有显示字符，GUIBulider 只是生成一个大体的程序框架而已

在 buttonbmp.c 文件就是将前面生成的那两个位图 C 文件复制到一个 C 文件里面buttonbmp.h 文件主要是声明了两个 GUI_BITMAP 结构体变量：bmBUTTONOFF 和bmBUTTONON，这样我们就可以在其他文件中调用这两个结构体变量，可以简单的理解为这两个结构体变量就是图片 OFF 和 ON。

#define ID_FRAMEWIN_0 (GUI_ID_USER + 0x00)
#define ID_BUTTON_0 (GUI_ID_USER + 0x01)
#define ID_BUTTON_1 (GUI_ID_USER + 0x02)
#define ID_TEXT_0 (GUI_ID_USER + 0x03)
#define ID_TEXT_1 (GUI_ID_USER + 0x04)
GUI_BITMAP buttonbmp_tab[2];
//对话框资源表
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, 350, 122, 110, 40, 0, 0x0, 0 },
{ BUTTON_CreateIndirect, "Button", ID_BUTTON_1, 350, 251, 110, 40, 0, 0x0, 0 },
{ TEXT_CreateIndirect, "Text", ID_TEXT_0, 266, 132, 80, 20, 0, 0x64, 0 },
{ TEXT_CreateIndirect, "Text", ID_TEXT_1, 266, 261, 80, 20, 0, 0x64, 0 },
};
//对话框回调函数
static void _cbDialog(WM_MESSAGE * pMsg) 
{
WM_HWIN hItem;
int NCode;
int Id;
static u8 ledflag=0;
static u8 beepflag=0;
switch (pMsg->MsgId) 
{
case WM_PAINT: (1)
GUI_SetBkColor(GUI_WHITE);
GUI_Clear();
break;
case WM_INIT_DIALOG:
//初始化对话框
hItem = pMsg->hWin;
FRAMEWIN_SetTitleHeight(hItem, 30);
FRAMEWIN_SetText(hItem, "ALIENTEK BUTTONBMP DISP");
FRAMEWIN_SetFont(hItem, GUI_FONT_24_ASCII);
FRAMEWIN_SetTextAlign(hItem, GUI_TA_HCENTER | GUI_TA_VCENTER);
FRAMEWIN_SetTextColor(hItem, 0x0000FFFF);
//初始化 BUTTON0
hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_0);
BUTTON_SetBitmapEx(hItem,0,&buttonbmp_tab[0],0,0); (2)
BUTTON_SetText(hItem, "");
//初始化 BUTTON1
hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_1);
BUTTON_SetBitmapEx(hItem,0,&buttonbmp_tab[0],0,0); (3)
BUTTON_SetText(hItem, "");
//初始化 TEXT0
hItem = WM_GetDialogItem(pMsg->hWin, ID_TEXT_0);
TEXT_SetTextAlign(hItem, GUI_TA_HCENTER | GUI_TA_VCENTER);
TEXT_SetFont(hItem, GUI_FONT_32_ASCII);
TEXT_SetText(hItem, "LED1:");
//初始化 TEXT1
hItem = WM_GetDialogItem(pMsg->hWin, ID_TEXT_1);
TEXT_SetTextAlign(hItem, GUI_TA_HCENTER | GUI_TA_VCENTER);
TEXT_SetFont(hItem, GUI_FONT_32_ASCII);
TEXT_SetText(hItem, "BEEP:");
break;
case WM_NOTIFY_PARENT:
Id = WM_GetId(pMsg->hWinSrc);
NCode = pMsg->Data.v;
switch(Id) 
{
case ID_BUTTON_0: //BUTTON_0 的通知代码，控制 LED1
hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_0);
switch(NCode) 
{
case WM_NOTIFICATION_CLICKED:
break;
case WM_NOTIFICATION_RELEASED: //按钮被按下并释放
LED1=~LED1; //LED1 反转
ledflag=~ledflag;
BUTTON_SetBitmapEx(hItem,0,ledflag?\ (4)
&buttonbmp_tab[1]:&buttonbmp_tab[0],0,0);
break;
}
break;
case ID_BUTTON_1: //BUTTON_1 的通知代码，控制 BEEP
hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_1);
switch(NCode) 
{
case WM_NOTIFICATION_CLICKED:
break;
case WM_NOTIFICATION_RELEASED:
BEEP=~BEEP; //蜂鸣器反转
beepflag=~beepflag;
BUTTON_SetBitmapEx(hItem,0,beepflag?\ (5)
&buttonbmp_tab[1]:&buttonbmp_tab[0],0,0);
break;
}
break;
}
break;
default:
WM_DefaultProc(pMsg);
break;
} }
//创建一个对话框
WM_HWIN CreateFramewin(void) 
{
WM_HWIN hWin;
buttonbmp_tab[0]=bmBUTTONOFF;
buttonbmp_tab[1]=bmBUTTONON;
hWin = GUI_CreateDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate)\
, _cbDialog, WM_HBKWIN, 0, 0);
return hWin;
}
//BUTTON 按钮上显示位图
void Buttonbmp_Demo(void)
{
WM_HWIN hWin;
hWin=CreateFramewin();
while(1)
{
GUI_Delay(100);
} }

(1)、WM_PAINT 消息，使用 GUIBulider 生成的 C 文件中没有这个消息，这里需要我们手动添加进去，当接收到 WM_PAINT 消息的时候就将对话框的背景色刷新为白色。
(2)、初始化 BUTTON0 的时候调用函数 BUTTON_SetBitmapEx()在 BUTTON 上显示位图OFF。
(3)、初始化 BUTTON1 的时候调用函数 BUTTON_SetBitmapEx()在 BUTTON 上显示位图OFF。
(4)、根据 ledflag 的不同调用函数 BUTTON_SetBitmapEx()在 BUTTON 上显示 OFF 或者ON。
(5)、根据 beepflag 的不同调用函数 BUTTON_SetBitmapEx()在 BUTTON 上显示 OFF 或者ON。

点击 LED1 和 BEEP 的开关，显示如图 14.6.9 所示，并且 LED1 点亮，蜂鸣器响。