你的浏览器版本过低,可能导致网站不能正常访问!
为了你能正常使用网站功能,请使用这些浏览器。

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

[复制链接]
baiyongbin2009 提问时间:2015-3-12 14:43 /
特别说明:完整STemWin的1-60期教程和配套实例下载地址:链接
第55章 SLIDER-滑块控件

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

55.1 滑块控件介绍
    滑块控件的常见用途是:使用滑动条来修改各项数值。滑块包含滑动条和滑动条旁边的刻度标记。
在拖动滑动条时,这些刻度标记可规定光标按指定间距移动。
55.1.png
    设置皮肤后显示效果如下:
55.2.png
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的使用,这个例子在模拟器中的位置:
55.3.png
源码如下(程序中进行了详细的注释,数据部分没有贴出):
  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. };

  21. /*********************************************************************
  22. *
  23. *       Static data, colors
  24. *
  25. **********************************************************************
  26. */
  27. static U8 _aColorSep[3] = {0, 127, 255};  // Red, green and blue components

  28. /*********************************************************************
  29. *
  30. *       _OnPaint
  31. *  这个函数用于绘制三个小的单色矩形方框和一个大的举行方框
  32. */
  33. static void _OnPaint(void) {
  34.   //
  35.   // 绘制RGB颜色方框
  36.   //
  37.   GUI_SetColor(_aColorSep[0]);
  38.   GUI_FillRect(180, 20, 199, 39);
  39.   GUI_SetColor(_aColorSep[1] << 8);
  40.   GUI_FillRect(180, 50, 199, 69);
  41.   GUI_SetColor(((U32)_aColorSep[2]) << 16);
  42.   GUI_FillRect(180, 80, 199, 99);
  43.   //
  44.   // 绘制RGB三种颜色混合后的结果
  45.   //
  46.   GUI_SetColor(_aColorSep[0] | (((U32)_aColorSep[1]) << 8) | (((U32)_aColorSep[2]) << 16));
  47.   GUI_FillRect(205, 20, 285, 99);
  48. }

  49. /*********************************************************************
  50. *
  51. *       _OnValueChanged
  52. */
  53. static void _OnValueChanged(WM_HWIN hDlg, int Id) {
  54.   unsigned Index;
  55.   unsigned v;
  56.   WM_HWIN  hSlider;
  57.   WM_HWIN  hEdit;

  58.   Index = 0;
  59.   v     = 0;
  60.   if ((Id >= GUI_ID_SLIDER0) && (Id <= GUI_ID_SLIDER2)) {
  61.     Index = Id - GUI_ID_SLIDER0;
  62.     //
  63.     // 滑块的数值被更改后,更新编辑框中的数值
  64.     //
  65.     hSlider = WM_GetDialogItem(hDlg, GUI_ID_SLIDER0 + Index);
  66.     hEdit   = WM_GetDialogItem(hDlg, GUI_ID_EDIT0 + Index);
  67.     v = SLIDER_GetValue(hSlider);
  68.     EDIT_SetValue(hEdit, v);
  69.   } else if ((Id >= GUI_ID_EDIT0) && (Id <= GUI_ID_EDIT2)) {
  70.     Index = Id - GUI_ID_EDIT0;
  71.     //
  72.     // 编辑框中的数值更改后,更新滑块的数值
  73.     //
  74.     hSlider = WM_GetDialogItem(hDlg, GUI_ID_SLIDER0 + Index);
  75.     hEdit   = WM_GetDialogItem(hDlg, GUI_ID_EDIT0 + Index);
  76.     v = EDIT_GetValue(hEdit);
  77.     SLIDER_SetValue(hSlider, v);
  78.   }
  79.   _aColorSep[Index] = v;
  80.   //
  81.   // 最后通过使得对话框客户端窗口无效,进而执行对话框回调函数中的WM_PAINT消息
  82.   //
  83.   WM_InvalidateWindow(WM_GetClientWindow(hDlg));
  84. }

  85. /*********************************************************************
  86. *
  87. *       _cbBkWindow
  88. *     桌面窗口回调函数
  89. */
  90. static void _cbBkWindow(WM_MESSAGE * pMsg) {
  91.   int xPos;
  92.   int yPos;

  93.   xPos = LCD_GetXSize() / 2 - bmSeggerLogoBlue.XSize/2;
  94.   yPos = LCD_GetYSize() / 2 - bmSeggerLogoBlue.YSize/2 ;
  95.   switch (pMsg->MsgId) {
  96.   case WM_PAINT:
  97.     GUI_SetBkColor(GUI_BLUE);
  98.     GUI_Clear();
  99.     GUI_SetColor(GUI_WHITE);
  100.     GUI_SetFont(&GUI_Font24_ASCII);
  101.     GUI_DispStringHCenterAt("DIALOG_SliderColor - Sample", 160, 5);
  102.     GUI_DrawBitmap(&bmSeggerLogoBlue, xPos, yPos );
  103.   default:
  104.     WM_DefaultProc(pMsg);
  105.   }
  106. }

  107. /*********************************************************************
  108. *
  109. *       _cbCallback
  110. */
  111. static void _cbCallback(WM_MESSAGE * pMsg) {
  112.   WM_HWIN hDlg;
  113.   WM_HWIN hItem;
  114.   int     i;
  115.   int     NCode;
  116.   int     Id;

  117.   hDlg = pMsg->hWin;
  118.   switch (pMsg->MsgId) {
  119.     case WM_PAINT:
  120.       _OnPaint();
  121.       return;
  122.     case WM_INIT_DIALOG:
  123.       for (i = 0; i < 3; i++) {
  124.         /* 初始化滑块 */
  125. hItem = WM_GetDialogItem(hDlg, GUI_ID_SLIDER0 + i);
  126.         SLIDER_SetRange(hItem, 0, 255);
  127.         SLIDER_SetValue(hItem, _aColorSep[i]);
  128.         //
  129.         // 初始化编辑框
  130.         //
  131.         hItem = WM_GetDialogItem(hDlg, GUI_ID_EDIT0 + i);
  132.         EDIT_SetDecMode(hItem, _aColorSep[i],   0, 255, 0, 0);
  133.       }
  134.       break;
  135.     case WM_KEY:
  136.       switch (((WM_KEY_INFO*)(pMsg->Data.p))->Key) {
  137.         case GUI_KEY_ESCAPE:
  138.           ;
  139.           break;
  140.         case GUI_KEY_ENTER:
  141.           GUI_EndDialog(hDlg, 0);
  142.           break;
  143.       }
  144.       break;
  145.     case WM_NOTIFY_PARENT:
  146.       Id    = WM_GetId(pMsg->hWinSrc);      // Id of widget
  147.       NCode = pMsg->Data.v;                 // Notification code
  148.       switch (NCode) {
  149.         case WM_NOTIFICATION_RELEASED:      // React only if released
  150.           if (Id == GUI_ID_OK) {            // OK Button
  151.             GUI_EndDialog(hDlg, 0);
  152.           }
  153.           if (Id == GUI_ID_CANCEL) {        // Cancel Button
  154.             GUI_EndDialog(hDlg, 1);
  155.           }
  156.           break;
  157.         case WM_NOTIFICATION_VALUE_CHANGED: // Value has changed
  158.           _OnValueChanged(hDlg, Id);
  159.           break;
  160.       }
  161.       break;
  162.     default:
  163.       WM_DefaultProc(pMsg);
  164.   }
  165. }

  166. /*********************************************************************
  167. *
  168. *       Public code
  169. *
  170. **********************************************************************
  171. */
  172. /*********************************************************************
  173. *
  174. *       MainTask
  175. */
  176. void MainTask(void) {
  177.   GUI_Init();
  178.   GUI_CURSOR_Show();
  179.   WM_SetCallback(WM_HBKWIN, _cbBkWindow);  
  180.   WM_SetCreateFlags(WM_CF_MEMDEV);  // Use memory devices on all windows to avoid flicker
  181.   while (1) {
  182.     GUI_ExecDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), &_cbCallback, 0, 0, 0);
  183.     GUI_Delay(1000);
  184.   }
  185. }
复制代码
实际显示效果如下:
55.4.png
55.3 使用官方GUIBulder建立单选按钮控件
    这里用GUIBulder5.22建立一个如下的界面(分辨率480*272):
55.5.png
    默认建立的是水平滑块,可以通过选中滑块后,右击鼠标更改为垂直的:
55.6.png
    将生成的代码直接复制到模拟器或者开发板上面运行,实际显示效果如下(生成的代码在本期教程配套的例子中):
55.7.png
55.4 总结
    本期教程主要是跟大家讲解了滑块控件的基础知识。希望大家可以把本期教程中讲的这两个例子跑跑,然后自己设计一个相关的例子进行试验学习。教程中只是使用了部分的滑块控件API,其它的API大家都可以试试。

收藏 评论2 发布时间:2015-3-12 14:43

举报

2个回答
大浪10010 回答时间:2015-3-12 15:21:08
学习了,,,
zhangdaijin 回答时间:2015-3-13 13:32:29

所属标签

相似问题

关于
我们是谁
投资者关系
意法半导体可持续发展举措
创新与技术
意法半导体官网
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
官方最新发布
STM32Cube扩展软件包
意法半导体边缘AI套件
ST - 理想汽车豪华SUV案例
ST意法半导体智能家居案例
STM32 ARM Cortex 32位微控制器
关注我们
st-img 微信公众号
st-img 手机版