|
特别说明:完整STemWin的1-60期教程和配套实例下载地址:链接 第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 |
此类键按下后,按钮状态改变为已按下。键释放后,按钮状态改变为未按下。 |
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. 删除创建的按钮。
显示效果如下:
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. 设置按钮按下或者常态时使用的图片。
显示效果如下:
40.4 对话框上使用按钮控件
通过uCGUIBulder建立一个如下的界面(分辨率480*272):
同时使能BUTTON0和BUTTON1的三个通知代码消息:
这里我们仅使用按钮的CLICKED消息,通过这两个按钮实现对话框中背景颜色的改变。源代码如下(可以直接的复制到开发板或者模拟器上面运行):
- #include <stddef.h>
- #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)
- }
复制代码 1. 对话框用户区可选的三种背景颜色。
2. 对话框回调函数中的重绘消息要执行的函数。
3. 设置按钮的字体。在uCGUIBulder中可以在这里设置:
4. 设置按钮按下后要处理的消息。
5. 同上,处理按钮按下后要处理的消息。
6. 创建阻塞式对话框。
这个程序的实际显示效果如下(480*272分辨率):
40.5 总结
本期教程主要是跟大家讲解了按钮控件的使用,希望大家可以把本期教程中讲的三个例子都跑跑,然后自己设计一个相关的例子进行试验学习。教程中只是使用了部分的按钮API,其它的API大家都可以试试。 |
|