【安富莱原创】【STemWin教程】第40章 BUTTON-按钮控件

ti

`第40章 BUTTON-按钮控件

从本期教程开始讲解STemWin支持的控件。现在STemWin支持的控件类似已经非常完善了。利用好这些控件，会让设计的人机界面更加人性化。本期教程先从按钮的设计开始跟大家讲解。

40. 1 按钮控件介绍

40. 2 官方WIDGET_SimpleButton实例

40. 3 官方WIDGET_PhoneButton实例

40. 4 对话框上使用按钮控件

40. 5 总结

40.1 按钮控件介绍

按钮控件默认的显示效果如下：

开启皮肤后显示效果如下：

40.1.1 按钮支持的通知代码

以下事件是按钮控件作为WM_NOtiFY_PARENT消息的一部分发送给其父窗口的：

消息	描述
WM_NOTIFICATION_CLICKED	按钮已被点击。
WM_NOTIFICATION_RELEASED	按钮已被释放。
WM_NOTIFICATION_MOVED_OUT	按钮已被点击，且指针已移出按钮并且没有释放。

40.1.2 按钮支持键盘反应

如果控件具有输入焦点，则它将对下列各键做出反应：

按键	反应
GUI_KEY_ENTER	此类键按下后，按钮认为它被按下并立即释放，然后作出相应反应。
GUI_KEY_SPACE	此类键按下后，按钮状态改变为已按下。键释放后，按钮状态改变为未按下。

`

硬汉Eric2013 · 2015-5-2 11:56:46

40.2 官方WIDGET_SimpleButton实例

这个例子就是实现一个简单的按键显示功能。这个例子的位置在：

源代码如下：

#include "GUI.h"
#include "BUTTON.h"
/*******************************************************************
*
* static code
*
********************************************************************
*/
/*******************************************************************
*
* _DemoButton
*/
static void _DemoButton(void) {
BUTTON_Handle hButton;（1）
GUI_SetFont(&GUI_Font8x16);
GUI_DispStringHCenterAt("Click on button...", 160, 90);
//
// Create the button and set text
//
hButton = BUTTON_Create(110, 110, 100, 40, GUI_ID_OK, WM_CF_SHOW);（2）
BUTTON_SetText(hButton, "Click me...");（3）
//
// Let window manager handle the button
//
while (GUI_WaitKey() != GUI_ID_OK); （4）
//
// Delete the button
//
BUTTON_Delete(hButton);（5）
GUI_ClearRect(0, 50, 319, 239);
GUI_Delay(1000);
}
/*********************************************************************
*
* Public code
*
**********************************************************************
*/
/*********************************************************************
*
* MainTask
*/
void MainTask(void) {
GUI_Init();
GUI_SetBkColor(GUI_BLACK);
GUI_Clear();
GUI_SetColor(GUI_WHITE);
GUI_SetFont(&GUI_Font24_ASCII);
GUI_DispStringHCenterAt("WIDGET_SimpleButton - Sample", 160, 5);
while (1) {
_DemoButton();
}
}

复制代码

1. 按钮句柄。

2. 创建一个按钮控件，最后一个参数WM_CF_SHOW表示创建后立即显示，其它参数大家看手册中的介绍即可。

3. 设置按钮上显示的文本。

4. 等待按钮被按下。

5. 删除创建的按钮。

显示效果如下：

硬汉Eric2013 · 2015-5-2 11:58:08

40.3 官方WIDGET_PhoneButton实例

这个例子主要是在按钮上面显示图片，演示一种简单的来电话情景。这个例子所在模拟器中的位置：

源程序如下：

#include "GUI.h"
#include "BUTTON.h"
/*******************************************************************
*
* static variables
*
********************************************************************
*/
/*******************************************************************
*
* Bitmap data, 3 phone logos
*/
static const GUI_COLOR Colors[] = { 0x000000, 0xFFFFFF };
static const GUI_LOGPALETTE Palette = { 2, 1, Colors };（1）
static const unsigned char acPhone0[] = {
________, ________, ________, ________,
________, ________, ________, ________,
________, ________, ________, ________,
________, ________, ________, ________,
________, ________, ________, ________,
________, ________, ________, ________,
________, ________, ________, ________,
________, ________, ________, ________,
________, ________, ________, ________,
________, ________, ________, ________,
________, ________, ________, ________,
_____XXX, XXXXXXXX, XXXXXXXX, XXX_____,
___XXXXX, XXXXXXXX, XXXXXXXX, XXXXX___,
__XXXXXX, XXXXXXXX, XXXXXXXX, XXXXXX__,
_XXXXXXX, X_______, _______X, XXXXXXX_,
_XXXXXXX, X__XX___, ___XX__X, XXXXXXX_,
_XXXXXXX, X__XX___, ___XX__X, XXXXXXX_,
_XXXXXXX, X__XX___, ___XX__X, XXXXXXX_,
________, ___XX___, ___XX___, ________,
_______X, XXXXXXXX, XXXXXXXX, X_______,
______XX, XXXXXXXX, XXXXXXXX, XX______,
_____XXX, XXXX__X_, _X__XXXX, XXX_____,
____XXXX, XXXX__X_, _X__XXXX, XXXX____,
___XXXXX, XXXXXXXX, XXXXXXXX, XXXXX___,
___XXXXX, XXXX__X_, _X__XXXX, XXXXX___,
___XXXXX, XXXX__X_, _X__XXXX, XXXXX___,
___XXXXX, XXXXXXXX, XXXXXXXX, XXXXX___,
___XXXXX, XXXX__X_, _X__XXXX, XXXXX___,
___XXXXX, XXXX__X_, _X__XXXX, XXXXX___,
___XXXXX, XXXXXXXX, XXXXXXXX, XXXXX___,
___XXXXX, XXXXXXXX, XXXXXXXX, XXXXX___
};
static const unsigned char acPhone1[] = {
________, ________, ________, ________,
______XX, X_______, ________, ________,
____XXXX, XXXXX___, ________, ________,
____XXXX, XXXXXXX_, ________, ________,
___XXXXX, XXXXXXXX, X_______, ________,
___XXXXX, XXXXXXXX, XXX_____, ________,
_____XXX, XXXX_XXX, XXXXX___, ________,
_______X, XXXX___X, XXXXXXX_, ________,
________, _XX_____, _XXXXXXX, X_______,
________, ________, ___XXXXX, XXX_____,
________, ________, _____XXX, XXXXX___,
________, ________, _______X, XXXXXX__,
________, ________, ________, XXXXXXX_,
________, ________, ________, XXXXXXX_,
________, ________, _______X, XXXXXXXX,
________, ___XX___, ___XX__X, XXXXXXXX,
________, ___XX___, ___XX___, _XXXXXXX,
________, ___XX___, ___XX___, ___XXXX_,
________, ___XX___, ___XX___, _____XX_,
_______X, XXXXXXXX, XXXXXXXX, X_______,
______XX, XXXXXXXX, XXXXXXXX, XX______,
_____XXX, XXXX__X_, _X__XXXX, XXX_____,
____XXXX, XXXX__X_, _X__XXXX, XXXX____,
___XXXXX, XXXXXXXX, XXXXXXXX, XXXXX___,
___XXXXX, XXXX__X_, _X__XXXX, XXXXX___,
___XXXXX, XXXX__X_, _X__XXXX, XXXXX___,
___XXXXX, XXXXXXXX, XXXXXXXX, XXXXX___,
___XXXXX, XXXX__X_, _X__XXXX, XXXXX___,
___XXXXX, XXXX__X_, _X__XXXX, XXXXX___,
___XXXXX, XXXXXXXX, XXXXXXXX, XXXXX___,
___XXXXX, XXXXXXXX, XXXXXXXX, XXXXX___
};
static const unsigned char acPhone2[] = {
________, ________, ________, ________,
________, ________, _______X, XX______,
________, ________, ___XXXXX, XXXX____,
________, ________, _XXXXXXX, XXXX____,
________, _______X, XXXXXXXX, XXXXX___,
________, _____XXX, XXXXXXXX, XXXXX___,
________, ___XXXXX, XXX_XXXX, XXX_____,
________, _XXXXXXX, X___XXXX, X_______,
_______X, XXXXXXX_, _____XX_, ________,
_____XXX, XXXXX___, ________, ________,
___XXXXX, XXX_____, ________, ________,
__XXXXXX, X_______, ________, ________,
_XXXXXXX, ________, ________, ________,
_XXXXXXX, ________, ________, ________,
XXXXXXXX, X_______, ________, ________,
XXXXXXXX, X__XX___, ___XX___, ________,
XXXXXXX_, ___XX___, ___XX___, ________,
_XXXX___, ___XX___, ___XX___, ________,
_XX_____, ___XX___, ___XX___, ________,
_______X, XXXXXXXX, XXXXXXXX, X_______,
______XX, XXXXXXXX, XXXXXXXX, XX______,
_____XXX, XXXX__X_, _X__XXXX, XXX_____,
____XXXX, XXXX__X_, _X__XXXX, XXXX____,
___XXXXX, XXXXXXXX, XXXXXXXX, XXXXX___,
___XXXXX, XXXX__X_, _X__XXXX, XXXXX___,
___XXXXX, XXXX__X_, _X__XXXX, XXXXX___,
___XXXXX, XXXXXXXX, XXXXXXXX, XXXXX___,
___XXXXX, XXXX__X_, _X__XXXX, XXXXX___,
___XXXXX, XXXX__X_, _X__XXXX, XXXXX___,
___XXXXX, XXXXXXXX, XXXXXXXX, XXXXX___,
___XXXXX, XXXXXXXX, XXXXXXXX, XXXXX___
};
static const GUI_BITMAP bm_1bpp_0 = { 32, 31, 4, 1, acPhone0, &Palette}; （2）
static const GUI_BITMAP bm_1bpp_1 = { 32, 31, 4, 1, acPhone1, &Palette};
static const GUI_BITMAP bm_1bpp_2 = { 32, 31, 4, 1, acPhone2, &Palette};
/*******************************************************************
*
* static code
*
********************************************************************
*/
/*******************************************************************
*
* _Wait
*/
static int _Wait(int Delay) {（3）
int EndTime;
int r;
r = 1;
EndTime = GUI_GetTime() + Delay;
while (GUI_GetTime() < EndTime) {
GUI_Exec();
if (GUI_GetKey() == GUI_ID_OK) {
r = 0;
break;
}
}
return r;
}
/*******************************************************************
*
* _DemoButton
*/
static void _DemoButton(void) {
BUTTON_Handle hButton;
GUI_SetFont(&GUI_Font8x16);
GUI_DispStringHCenterAt("Click on phone button...", 160,80);
GUI_Delay(500);
//
// Create the button and modify its attributes
//
hButton = BUTTON_Create(142, 100, 36, 40, GUI_ID_OK, WM_CF_SHOW);（4）
BUTTON_SetBkColor (hButton, 1, GUI_RED);
//
// Loop until button is pressed
//
while (1) {
BUTTON_SetBitmapEx(hButton, 0, &bm_1bpp_1, 2, 4); （5）
BUTTON_SetBitmapEx(hButton, 1, &bm_1bpp_1, 2, 4);
if (!_Wait(50)) break;
BUTTON_SetBitmapEx(hButton, 0, &bm_1bpp_0, 2, 4);
BUTTON_SetBitmapEx(hButton, 1, &bm_1bpp_0, 2, 4);
if (!_Wait(45)) break;
BUTTON_SetBitmapEx(hButton, 0, &bm_1bpp_2, 2, 4);
BUTTON_SetBitmapEx(hButton, 1, &bm_1bpp_2, 2, 4);
if (!_Wait(50)) break;
BUTTON_SetBitmapEx(hButton, 0, &bm_1bpp_0, 2, 4);
BUTTON_SetBitmapEx(hButton, 1, &bm_1bpp_0, 2, 4);
if (!_Wait(45)) break;
}
BUTTON_SetBitmapEx(hButton, 0, &bm_1bpp_1, 2, 4);
BUTTON_SetBitmapEx(hButton, 1, &bm_1bpp_1, 2, 4);
GUI_ClearRect(0, 80, 319, 120);
GUI_DispStringHCenterAt("You have answered the telephone", 160, 145);
GUI_Delay(2000);
//
// Delete button object
//
BUTTON_Delete(hButton);
GUI_ClearRect(0, 50, 319, 239);
GUI_Delay(400);
}
/*********************************************************************
*
* Public code
*
**********************************************************************
*/
/*********************************************************************
*
* MainTask
*/
void MainTask(void) {
GUI_Init();
GUI_SetBkColor(GUI_BLACK);
GUI_Clear();
GUI_SetColor(GUI_WHITE);
GUI_SetFont(&GUI_Font24_ASCII);
GUI_DispStringHCenterAt("WIDGET_PhoneButton - Sample", 160, 5);
while (1) {
_DemoButton();
}
}

复制代码

1. 图片数据的调色板。

2. 用于应用函数调用的GUI_BITMAP格式图片数据。

3. 按键时间等待函数，如果超过了设置的等待时间，按钮还没有按下，那么返回1，如果在设置的时间内按下了，返回0.

4. 按钮按下时的背景颜色。

5. 设置按钮按下或者常态时使用的图片。

显示效果如下：

硬汉Eric2013 · 2015-5-2 12:00:55

40.4 对话框上使用按钮控件

通过uCGUIBulder建立一个如下的界面（分辨率480*272）：

同时使能BUTTON0和BUTTON1的三个通知代码消息：

这里我们仅使用按钮的CLICKED消息，通过这两个按钮实现对话框中背景颜色的改变。源代码如下（可以直接的复制到开发板或者模拟器上面运行）：

#include
#include "GUI.h"
#include "DIALOG.h"
#include "WM.h"
#include "BUTTON.h"
#include "CHECKBOX.h"
#include "DROPDOWN.h"
#include "EDIT.h"
#include "FRAMEWIN.h"
#include "LISTBOX.h"
#include "MULTIEDIT.h"
#include "RADIO.h"
#include "SLIDER.h"
#include "TEXT.h"
#include "PROGBAR.h"
#include "SCROLLBAR.h"
#include "LISTVIEW.h"
/*********************************************************************
*
* static data
*
**********************************************************************
*/
GUI_COLOR _acColor[3] = {GUI_BLUE,GUI_RED,GUI_YELLOW}; （1）
static char BackColor;
/*********************************************************************
*
* Dialog resource
*
* This table conatins the info required to create the dialog.
* It has been created by ucGUIbuilder.
*/
static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
{ FRAMEWIN_CreateIndirect, "armfly", 0, 0, 0, 480,272,FRAMEWIN_CF_MOVEABLE,0},
{ BUTTON_CreateIndirect, "BUTTON0", GUI_ID_BUTTON0, 52, 93, 110,30, 0,0},
{ BUTTON_CreateIndirect, "BUTTON1", GUI_ID_BUTTON1, 289,90, 117,33, 0,0}
};
/*****************************************************************
** FunctionName:void PaintDialog(WM_MESSAGE * pMsg)
** Function: to initialize the Dialog items
**
** call this function in _cbCallback --> WM_PAINT
*****************************************************************/
void PaintDialog(WM_MESSAGE * pMsg)（2）
{
WM_HWIN hWin = pMsg->hWin;
GUI_SetBkColor(_acColor[BackColor]);
GUI_Clear();
}
/*****************************************************************
** FunctionName:void InitDialog(WM_MESSAGE * pMsg)
** Function: to initialize the Dialog items
**
** call this function in _cbCallback --> WM_INIT_DIALOG
*****************************************************************/
void InitDialog(WM_MESSAGE * pMsg)
{
WM_HWIN hWin = pMsg->hWin;
//
//FRAMEWIN
//
FRAMEWIN_SetFont(hWin,&GUI_Font24B_ASCII);
FRAMEWIN_SetTextAlign(hWin,GUI_TA_VCENTER|GUI_TA_CENTER);
FRAMEWIN_AddCloseButton(hWin, FRAMEWIN_BUTTON_RIGHT, 0);
FRAMEWIN_AddMaxButton(hWin, FRAMEWIN_BUTTON_RIGHT, 1);
FRAMEWIN_AddMinButton(hWin, FRAMEWIN_BUTTON_RIGHT, 2);
FRAMEWIN_SetTitleHeight(hWin,30);
//
//GUI_ID_BUTTON0
//
BUTTON_SetFont(WM_GetDialogItem(hWin,GUI_ID_BUTTON0),&GUI_Font24B_ASCII); （3）
//
//GUI_ID_BUTTON1
//
BUTTON_SetFont(WM_GetDialogItem(hWin,GUI_ID_BUTTON1),&GUI_Font24B_ASCII);
/* 默认颜色取*/
BackColor = 0;
}
/*********************************************************************
*
* Dialog callback routine
*/
static void _cbCallback(WM_MESSAGE * pMsg)
{
int NCode, Id;
WM_HWIN hWin = pMsg->hWin;
switch (pMsg->MsgId)
{
case WM_PAINT:
PaintDialog(pMsg);
break;
case WM_INIT_DIALOG:
InitDialog(pMsg);
break;
case WM_KEY:
switch (((WM_KEY_INFO*)(pMsg->Data.p))->Key)
{
case GUI_KEY_ESCAPE:
GUI_EndDialog(hWin, 1);
break;
case GUI_KEY_ENTER:
GUI_EndDialog(hWin, 0);
break;
}
break;
case WM_NOTIFY_PARENT:
Id = WM_GetId(pMsg->hWinSrc);
NCode = pMsg->Data.v;
switch (Id)
{
case GUI_ID_OK:
if(NCode==WM_NOTIFICATION_RELEASED)
GUI_EndDialog(hWin, 0);
break;
case GUI_ID_CANCEL:
if(NCode==WM_NOTIFICATION_RELEASED)
GUI_EndDialog(hWin, 0);
break;
case GUI_ID_BUTTON0:
switch(NCode)
{
case WM_NOTIFICATION_CLICKED:（4）
BackColor++;
if (BackColor == 3)
{
BackColor = 0;
}
WM_InvalidateWindow(hWin);
break;
case WM_NOTIFICATION_RELEASED:
break;
case WM_NOTIFICATION_MOVED_OUT:
break;
}
break;
case GUI_ID_BUTTON1:
switch(NCode)
{
case WM_NOTIFICATION_CLICKED:（5）
BackColor--;
if (BackColor < 0)
{
BackColor = 2;
}
WM_InvalidateWindow(hWin);
break;
case WM_NOTIFICATION_RELEASED:
break;
case WM_NOTIFICATION_MOVED_OUT:
break;
}
break;
}
break;
default:
WM_DefaultProc(pMsg);
}
}
/*********************************************************************
*
* MainTask
*
**********************************************************************
*/
void MainTask(void)
{
GUI_Init();
WM_SetDesktopColor(GUI_WHITE); /* Automacally update desktop window */
WM_SetCreateFlags(WM_CF_MEMDEV); /* Use memory devices on all windows to avoid flicker */
PROGBAR_SetDefaultSkin(PROGBAR_SKIN_FLEX);
FRAMEWIN_SetDefaultSkin(FRAMEWIN_SKIN_FLEX);
PROGBAR_SetDefaultSkin(PROGBAR_SKIN_FLEX);
BUTTON_SetDefaultSkin(BUTTON_SKIN_FLEX);
CHECKBOX_SetDefaultSkin(CHECKBOX_SKIN_FLEX);
DROPDOWN_SetDefaultSkin(DROPDOWN_SKIN_FLEX);
SCROLLBAR_SetDefaultSkin(SCROLLBAR_SKIN_FLEX);
SLIDER_SetDefaultSkin(SLIDER_SKIN_FLEX);
HEADER_SetDefaultSkin(HEADER_SKIN_FLEX);
RADIO_SetDefaultSkin(RADIO_SKIN_FLEX);
GUI_ExecDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), &_cbCallback, 0, 0, 0);（6）
}