【STemWin教程】第55章 SLIDER-滑块控件

席萌0209

特别说明：完整STemWin的1-60期教程和配套实例下载地址：链接

第55章 SLIDER-滑块控件

    本期教程讲解STemWin支持的滑块控件。
    55. 1滑块控件介绍
    55. 2 官方DIALOG_SliderColor实例
    55. 3 使用官方GUIBulder建立滑块控件
    55. 4 总结

55.1 滑块控件介绍
    滑块控件的常见用途是：使用滑动条来修改各项数值。滑块包含滑动条和滑动条旁边的刻度标记。
    在拖动滑动条时，这些刻度标记可规定光标按指定间距移动。

    设置皮肤后显示效果如下：

55.1.1 滑块支持的通知代码
    以下事件是滑块控件作为WM_NOTIFY_PARENT消息的一部分发送给其父窗口的：

消息	描述
WM_NOTIFICATION_CLICKED	已单击滑块小工具。
WM_NOTIFICATION_RELEASED	已释放滑块小工具。
WM_NOTIFICATION_VALUE_CHANGED	滑块控件的值可以通过移动缩略图进行更改。

55.1.2 滑块支持的键盘反应
    如果控件具有输入焦点，则它将对下列各键做出反应：

按键	反应
GUI_KEY_RIGHT	将滑动条的当前值增加一个项目。
GUI_KEY_LEFT	将滑动条的当前值减小一个项目。

55.2 官方DIALOG_SliderColor实例
    官方的这个实例很好的演示了slider的使用，这个例子在模拟器中的位置：

源码如下（程序中进行了详细的注释，数据部分没有贴出）：

1. /*********************************************************************
2. *
3. *       Dialog resource
4. *        对话框资源表
5. */
6. static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
7.   { FRAMEWIN_CreateIndirect, "Adjust color", 0,         10,  40, 300, 160, FRAMEWIN_CF_MOVEABLE},
8.   { TEXT_CreateIndirect,     "Red:" ,  0,                5,  20,  35,  20, TEXT_CF_LEFT },
9.   { TEXT_CreateIndirect,     "Green:", 0,                5,  50,  35,  20, TEXT_CF_LEFT },
10.   { TEXT_CreateIndirect,     "Blue:",  0,                5,  80,  35,  20, TEXT_CF_LEFT },
11.   { TEXT_CreateIndirect,     "Preview",0,              205,   4,  81,  15, TEXT_CF_HCENTER },
12.   { SLIDER_CreateIndirect,   NULL,     GUI_ID_SLIDER0,  40,  20, 100,  20 },
13.   { SLIDER_CreateIndirect,   NULL,     GUI_ID_SLIDER1,  40,  50, 100,  20 },
14.   { SLIDER_CreateIndirect,   NULL,     GUI_ID_SLIDER2,  40,  80, 100,  20 },
15.   { EDIT_CreateIndirect,     NULL,     GUI_ID_EDIT0,   145,  20,  30,  20, 0, 3 },
16.   { EDIT_CreateIndirect,     NULL,     GUI_ID_EDIT1,   145,  50,  30,  20, 0, 3 },
17.   { EDIT_CreateIndirect,     NULL,     GUI_ID_EDIT2,   145,  80,  30,  20, 0, 3 },
18.   { BUTTON_CreateIndirect,   "OK",     GUI_ID_OK,       10, 110,  60,  20 },
19.   { BUTTON_CreateIndirect,   "Cancel", GUI_ID_CANCEL,  230, 110,  60,  20 },
20. };
22. /*********************************************************************
23. *
24. *       Static data, colors
25. *
26. **********************************************************************
27. */
28. static U8 _aColorSep[3] = {0, 127, 255};  // Red, green and blue components
30. /*********************************************************************
31. *
32. *       _OnPaint
33. *  这个函数用于绘制三个小的单色矩形方框和一个大的举行方框
34. */
35. static void _OnPaint(void) {
36.   //
37.   // 绘制RGB颜色方框
38.   //
39.   GUI_SetColor(_aColorSep[0]);
40.   GUI_FillRect(180, 20, 199, 39);
41.   GUI_SetColor(_aColorSep[1] << 8);
42.   GUI_FillRect(180, 50, 199, 69);
43.   GUI_SetColor(((U32)_aColorSep[2]) << 16);
44.   GUI_FillRect(180, 80, 199, 99);
45.   //
46.   // 绘制RGB三种颜色混合后的结果
47.   //
48.   GUI_SetColor(_aColorSep[0] | (((U32)_aColorSep[1]) << 8) | (((U32)_aColorSep[2]) << 16));
49.   GUI_FillRect(205, 20, 285, 99);
50. }
52. /*********************************************************************
53. *
54. *       _OnValueChanged
55. */
56. static void _OnValueChanged(WM_HWIN hDlg, int Id) {
57.   unsigned Index;
58.   unsigned v;
59.   WM_HWIN  hSlider;
60.   WM_HWIN  hEdit;
62.   Index = 0;
63.   v     = 0;
64.   if ((Id >= GUI_ID_SLIDER0) && (Id <= GUI_ID_SLIDER2)) {
65.     Index = Id - GUI_ID_SLIDER0;
66.     //
67.     // 滑块的数值被更改后，更新编辑框中的数值
68.     //
69.     hSlider = WM_GetDialogItem(hDlg, GUI_ID_SLIDER0 + Index);
70.     hEdit   = WM_GetDialogItem(hDlg, GUI_ID_EDIT0 + Index);
71.     v = SLIDER_GetValue(hSlider);
72.     EDIT_SetValue(hEdit, v);
73.   } else if ((Id >= GUI_ID_EDIT0) && (Id <= GUI_ID_EDIT2)) {
74.     Index = Id - GUI_ID_EDIT0;
75.     //
76.     // 编辑框中的数值更改后，更新滑块的数值
77.     //
78.     hSlider = WM_GetDialogItem(hDlg, GUI_ID_SLIDER0 + Index);
79.     hEdit   = WM_GetDialogItem(hDlg, GUI_ID_EDIT0 + Index);
80.     v = EDIT_GetValue(hEdit);
81.     SLIDER_SetValue(hSlider, v);
82.   }
83.   _aColorSep[Index] = v;
84.   //
85.   // 最后通过使得对话框客户端窗口无效，进而执行对话框回调函数中的WM_PAINT消息
86.   //
87.   WM_InvalidateWindow(WM_GetClientWindow(hDlg));
88. }
90. /*********************************************************************
91. *
92. *       _cbBkWindow
93. *     桌面窗口回调函数
94. */
95. static void _cbBkWindow(WM_MESSAGE * pMsg) {
96.   int xPos;
97.   int yPos;
99.   xPos = LCD_GetXSize() / 2 - bmSeggerLogoBlue.XSize/2;
100.   yPos = LCD_GetYSize() / 2 - bmSeggerLogoBlue.YSize/2 ;
101.   switch (pMsg->MsgId) {
102.   case WM_PAINT:
103.     GUI_SetBkColor(GUI_BLUE);
104.     GUI_Clear();
105.     GUI_SetColor(GUI_WHITE);
106.     GUI_SetFont(&GUI_Font24_ASCII);
107.     GUI_DispStringHCenterAt("DIALOG_SliderColor - Sample", 160, 5);
108.     GUI_DrawBitmap(&bmSeggerLogoBlue, xPos, yPos );
109.   default:
110.     WM_DefaultProc(pMsg);
111.   }
112. }
114. /*********************************************************************
115. *
116. *       _cbCallback
117. */
118. static void _cbCallback(WM_MESSAGE * pMsg) {
119.   WM_HWIN hDlg;
120.   WM_HWIN hItem;
121.   int     i;
122.   int     NCode;
123.   int     Id;
125.   hDlg = pMsg->hWin;
126.   switch (pMsg->MsgId) {
127.     case WM_PAINT:
128.       _OnPaint();
129.       return;
130.     case WM_INIT_DIALOG:
131.       for (i = 0; i < 3; i++) {
132.         /* 初始化滑块 */
133. hItem = WM_GetDialogItem(hDlg, GUI_ID_SLIDER0 + i);
134.         SLIDER_SetRange(hItem, 0, 255);
135.         SLIDER_SetValue(hItem, _aColorSep[i]);
136.         //
137.         // 初始化编辑框
138.         //
139.         hItem = WM_GetDialogItem(hDlg, GUI_ID_EDIT0 + i);
140.         EDIT_SetDecMode(hItem, _aColorSep[i],   0, 255, 0, 0);
141.       }
142.       break;
143.     case WM_KEY:
144.       switch (((WM_KEY_INFO*)(pMsg->Data.p))->Key) {
145.         case GUI_KEY_ESCAPE:
146.           ;
147.           break;
148.         case GUI_KEY_ENTER:
149.           GUI_EndDialog(hDlg, 0);
150.           break;
151.       }
152.       break;
153.     case WM_NOTIFY_PARENT:
154.       Id    = WM_GetId(pMsg->hWinSrc);      // Id of widget
155.       NCode = pMsg->Data.v;                 // Notification code
156.       switch (NCode) {
157.         case WM_NOTIFICATION_RELEASED:      // React only if released
158.           if (Id == GUI_ID_OK) {            // OK Button
159.             GUI_EndDialog(hDlg, 0);
160.           }
161.           if (Id == GUI_ID_CANCEL) {        // Cancel Button
162.             GUI_EndDialog(hDlg, 1);
163.           }
164.           break;
165.         case WM_NOTIFICATION_VALUE_CHANGED: // Value has changed
166.           _OnValueChanged(hDlg, Id);
167.           break;
168.       }
169.       break;
170.     default:
171.       WM_DefaultProc(pMsg);
172.   }
173. }
175. /*********************************************************************
176. *
177. *       Public code
178. *
179. **********************************************************************
180. */
181. /*********************************************************************
182. *
183. *       MainTask
184. */
185. void MainTask(void) {
186.   GUI_Init();
187.   GUI_CURSOR_Show();
188.   WM_SetCallback(WM_HBKWIN, _cbBkWindow);  
189.   WM_SetCreateFlags(WM_CF_MEMDEV);  // Use memory devices on all windows to avoid flicker
190.   while (1) {
191.     GUI_ExecDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), &_cbCallback, 0, 0, 0);
192.     GUI_Delay(1000);
193.   }
194. }

复制代码

实际显示效果如下：

55.3 使用官方GUIBulder建立单选按钮控件
    这里用GUIBulder5.22建立一个如下的界面（分辨率480*272）：

    默认建立的是水平滑块，可以通过选中滑块后，右击鼠标更改为垂直的：

    将生成的代码直接复制到模拟器或者开发板上面运行，实际显示效果如下（生成的代码在本期教程配套的例子中）：

55.4 总结
    本期教程主要是跟大家讲解了滑块控件的基础知识。希望大家可以把本期教程中讲的这两个例子跑跑，然后自己设计一个相关的例子进行试验学习。教程中只是使用了部分的滑块控件API，其它的API大家都可以试试。