【emWin实战教程V2.0】第60章 SLIDER-滑块控件

转最新版本教程

转最新版本教程
本章节为大家讲解STemWin支持的滑块控件，滑块控件主要用于数值修改，也属于易学易用控件。
60.1 初学者重要提示
60.2 滑块控件基础知识
60.3 使用GUIBuilder创建滑块控件并用模拟器显示出来
60.4 官方DIALOG_SliderColor.c实例讲解
60.5 实验例程说明（RTOS）
60.6 实验例程说明（裸机）
60.7 总结

lee_st · 2017-3-29 09:34:44

60.3.2 第二步：在对话框上面建立滑块控件

（当前GUIBuilder对滑块控件的支持非常简单，仅支持大小调整以及水平或者垂直方式创建）
滑块控件的建立方法和上面的对话框是一样的。先将滑块钮控件拖到对话框上面，建立后的效果如下所示：

lee_st · 2017-3-29 09:34:56

对于建立的滑块控件，用户可以任意拖动，并通过鼠标调整其大小，调整方法如下：先左击选中相应控件，会出现绿色的边框，在边框的地方拖动鼠标即可修改大小，

lee_st · 2017-3-29 09:35:10

接下来我们将滑块调整到适当大小，并给对话框上面添加一个文本控件，字体大小设置为GUI_FONT_16_ASCII，这样的话，我们可以通过文本控件，将滑块当前的数值显示出来。

lee_st · 2017-3-29 09:35:36

60.3.3 第三步：建立好后点击File-save

保存方法如下：

lee_st · 2017-3-29 09:35:48

保存后生成的文件在GUIBuilder5.32软件所在的文件夹里面：

lee_st · 2017-3-29 09:35:58

60.3.4 第四步：在模拟器上运行GUIBuilder生成的代码

在模拟器上面如何演示GUIBuilder生成的代码已经在第6章的6.3小节详细讲述了，这里不再赘述。可以在模拟器上面运行的完整代码如下，此代码对应的例子是V6-595_STemWin实验_Slider滑块控件（模拟器）：
（由于GUIBuilder创建滑块控件的功能有限，我们这里添加新的代码，调整滑块控件后，滑块控件的数值会显示到文本控件上）

lee_st · 2017-3-29 09:36:06

/*********************************************************************
*                                                                    *
*                SEGGER Microcontroller GmbH & Co. KG                *
*        Solutions for real time microcontroller applications        *
*                                                                    *
**********************************************************************
*                                                                    *
* C-file generated by:                                               *
*                                                                    *
*        GUI_Builder for emWin version 5.32                          *
*        Compiled Oct  8 2015, 11:59:02                              *
*        (c) 2015 Segger Microcontroller GmbH & Co. KG               *
*                                                                    *
**********************************************************************
*                                                                    *
*        Internet: www.segger.com  Support: support@segger.com       *
*                                                                    *
**********************************************************************
*/

// USER START (Optionally insert additional includes)
// USER END

#include "DIALOG.h"
#include "stdio.h"

/*********************************************************************
*
*       Defines
*
**********************************************************************
*/
#define ID_FRAMEWIN_0 (GUI_ID_USER + 0x00)
#define ID_SLIDER_0 (GUI_ID_USER + 0x01)
#define ID_TEXT_0 (GUI_ID_USER + 0x02)

// USER START (Optionally insert additional defines)
// USER END

/*********************************************************************
*
*       Static data
*
**********************************************************************
*/

// USER START (Optionally insert additional static data)
// USER END

/*********************************************************************
*
*       _aDialogCreate
*/
static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
  { FRAMEWIN_CreateIndirect, "Framewin", ID_FRAMEWIN_0, 0, 0, 800, 480, 0, 0x64, 0 },
  { SLIDER_CreateIndirect, "Slider", ID_SLIDER_0, 50, 118, 241, 41, 0, 0x0, 0 },  //--------------（1）
  { TEXT_CreateIndirect, "Text", ID_TEXT_0, 87, 58, 80, 20, 0, 0x0, 0 },
  // USER START (Optionally insert additional widgets)
  // USER END
};

/*********************************************************************
*
*       Static code
*
**********************************************************************
*/

// USER START (Optionally insert additional static code)
// USER END

/*********************************************************************
*
*       _cbDialog
*/
static void _cbDialog(WM_MESSAGE * pMsg) {
  WM_HWIN hItem;
  int     NCode;
  int     Id;
  char    buf[20];
  int     index;

  // USER START (Optionally insert additional variables)
  // USER END

  switch (pMsg->MsgId) {
  case WM_INIT_DIALOG:
    //
    // Initialization of 'Framewin'
    //
    hItem = pMsg->hWin;
    FRAMEWIN_SetFont(hItem, GUI_FONT_32B_ASCII);
    FRAMEWIN_SetText(hItem, "armfly");
    FRAMEWIN_SetTextAlign(hItem, GUI_TA_HCENTER | GUI_TA_VCENTER);
    //
    // Initialization of 'Text'
    //
    hItem = WM_GetDialogItem(pMsg->hWin, ID_TEXT_0);
    TEXT_SetFont(hItem, GUI_FONT_16_ASCII);
TEXT_SetText(hItem, "SLIDER = 0");     //--------------（2）

     hItem = WM_GetDialogItem(pMsg->hWin, ID_SLIDER_0); //--------------（3）
     SLIDER_SetNumTicks(hItem, 10);                     //--------------（4）
     SLIDER_SetRange(hItem, 0, 9);                   //--------------（5）
    // USER START (Optionally insert additional code for further widget initialization)
    // USER END
    break;
  case WM_NOTIFY_PARENT:
    Id    = WM_GetId(pMsg->hWinSrc);
    NCode = pMsg->Data.v;
    switch(Id) {
    case ID_SLIDER_0: // Notifications sent by 'Slider'
      switch(NCode) {
      case WM_NOTIFICATION_CLICKED:
        // USER START (Optionally insert code for reacting on notification message)
        // USER END
        break;
      case WM_NOTIFICATION_RELEASED:
        // USER START (Optionally insert code for reacting on notification message)
        // USER END
        break;
      case WM_NOTIFICATION_VALUE_CHANGED:
          hItem = WM_GetDialogItem(pMsg->hWin, ID_SLIDER_0);
          index = SLIDER_GetValue(hItem);                  //--------------（6）
          sprintf(buf, "SLIDER = %d", index);
          hItem = WM_GetDialogItem(pMsg->hWin, ID_TEXT_0);
           TEXT_SetText(hItem, buf);                        //--------------（7）
        // USER START (Optionally insert code for reacting on notification message)
        // USER END
        break;
      // USER START (Optionally insert additional code for further notification handling)
      // USER END
      }
      break;
    // USER START (Optionally insert additional code for further Ids)
    // USER END
    }
    break;
  // USER START (Optionally insert additional message handling)
  // USER END
  default:
    WM_DefaultProc(pMsg);
    break;
  }
}

/*********************************************************************
*
*       Public code
*
**********************************************************************
*/
/*********************************************************************
*
*       CreateFramewin
*/
WM_HWIN CreateFramewin(void);
WM_HWIN CreateFramewin(void) {
  WM_HWIN hWin;

  hWin = GUI_CreateDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), _cbDialog, WM_HBKWIN, 0, 0);
  return hWin;
}

// USER START (Optionally insert additional public code)
// USER END

/*********************************************************************
*
*       MainTask
*/
void MainTask(void)
{
     /* 初始化 */
     GUI_Init();

     /* 窗口自动使用存储设备 */
     WM_SetCreateFlags(WM_CF_MEMDEV);

     /* 创建对话框，使用GUIBulder5.32生成的对话框创建函数 */
     CreateFramewin();

     while(1)
     {
         GUI_Delay(50);
     }
}

/*************************** End of file ****************************/

lee_st · 2017-3-29 09:36:23

创建的这个例子相对比较容易，主要实现了在对话框上面创建滑块控件和文本控件，文本控件用来实时显示滑块控件当前的数值。
1.    在对话框的资源列表中创建一个滑块控件。
2.    首次显示，先将文本控件显示设置为SLIDER = 0。
3.    通过函数WM_GetDialogItem获得ID为ID_SLIDER_0的滑块控件句柄。
4.    通过函数SLIDER_SetNumTicks设置滑块控件上面显示10个刻度标记。

lee_st · 2017-3-29 09:36:31

5.    通过函数SLIDER_SetRange设置滑块控件的数值范围，最大值9，最小值0。滑动条移动的时候，每次是以1个数值为单位进行移动的，这点要特别注意，如果不是很理解的话，实际操作下滑块就明白了。
6.    通过函数SLIDER_GetValue获取滑块控件当前的数值。
7.    通过函数TEXT_SetText显示滑块控件当前的数值。

lee_st · 2017-3-29 09:36:55

60.4 官方DIALOG_SliderColor.c实例讲解

这个例子在模拟器中的位置：

lee_st · 2017-3-29 09:37:07

主要功能介绍：
这个例子非常具有代表性，而且实战。这个例子实现了一个简单的颜色板功能，通过三个滑块控件分别控制R,G,B三个颜色通道，数值范围都是0-255。用户调节了滑块控件后，将最终的颜色效果显示出来。
程序代码如下：

lee_st · 2017-3-29 09:37:14

#include
#include "GUI.h"
#include "DIALOG.h"

/*********************************************************************
*
*       Defines
*
**********************************************************************
*/
//
// Recommended memory to run the sample with adequate performance
//
#define RECOMMENDED_MEMORY (1024L * 15)

/*********************************************************************
*
*       Static data, SeggerLogo
*
**********************************************************************
*/
/*********************************************************************
*
*       Bitmap SeggerLogo
*/
static const GUI_COLOR ColorsSeggerLogoBlue16[] = {
     0x0000FF,0x000000,0x888888,0xFFFFFF
    ,0xFF0000,0xBBBBBB
};

static const GUI_LOGPALETTE PalSeggerLogoBlue16 = {
  6, // number of entries
  1,     // Has transparency
  &ColorsSeggerLogoBlue16[0]
};

static const unsigned char acSeggerLogoBlue16[] = {
  0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
     /* 其余代码省略未贴 */
};

static const GUI_BITMAP bmSeggerLogoBlue = {
138,                  // XSize
  65,                  // YSize
  69,                  // BytesPerLine
   4,                  // BitsPerPixel
acSeggerLogoBlue16,   // Pointer to picture data (indices)
&PalSeggerLogoBlue16  // Pointer to palette
};

/*********************************************************************
*
*       Static data, dialog resource
*
**********************************************************************
*/
/*********************************************************************
*
*       Dialog resource
*
* Function description
*   This table conatins the info required to create the dialog.
*   It has been created manually, but could also be created by a GUI-builder.
*/
static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {    //--------------（1）
  { FRAMEWIN_CreateIndirect, "Adjust color", 0,         10,  40, 300, 160, FRAMEWIN_CF_MOVEABLE},
  { TEXT_CreateIndirect,     "Red:" ,  0,                5,  20,  35,  20, TEXT_CF_LEFT },
  { TEXT_CreateIndirect,     "Green:", 0,                5,  50,  35,  20, TEXT_CF_LEFT },
  { TEXT_CreateIndirect,     "Blue:",  0,                5,  80,  35,  20, TEXT_CF_LEFT },
  { TEXT_CreateIndirect,     "Preview",0,              205,   4,  81,  15, TEXT_CF_HCENTER },
  { SLIDER_CreateIndirect,   NULL,     GUI_ID_SLIDER0,  40,  20, 100,  20 },
  { SLIDER_CreateIndirect,   NULL,     GUI_ID_SLIDER1,  40,  50, 100,  20 },
  { SLIDER_CreateIndirect,   NULL,     GUI_ID_SLIDER2,  40,  80, 100,  20 },
  { EDIT_CreateIndirect,     NULL,     GUI_ID_EDIT0,   145,  20,  30,  20, 0, 3 },
  { EDIT_CreateIndirect,     NULL,     GUI_ID_EDIT1,   145,  50,  30,  20, 0, 3 },
  { EDIT_CreateIndirect,     NULL,     GUI_ID_EDIT2,   145,  80,  30,  20, 0, 3 },
  { BUTTON_CreateIndirect,   "OK",     GUI_ID_OK,       10, 110,  60,  20 },
  { BUTTON_CreateIndirect,   "Cancel", GUI_ID_CANCEL,  230, 110,  60,  20 },
};

/*********************************************************************
*
*       Static data, colors
*
**********************************************************************
*/
static U8 _aColorSep[3] = {0, 127, 255};  // Red, green and blue components

/*********************************************************************
*
*       Static code
*
**********************************************************************
*/
/*********************************************************************
*
*       _OnPaint
*
* Function description
*   This routine draws the color rectangles.
*   The widgets are drawn automatically.
*/
static void _OnPaint(void) {     //--------------（2）
  //
  // Draw RGB values
  //
  GUI_SetColor(_aColorSep[0]);
  GUI_FillRect(180, 20, 199, 39);
  GUI_SetColor(_aColorSep[1] << 8);
  GUI_FillRect(180, 50, 199, 69);
  GUI_SetColor(((U32)_aColorSep[2]) << 16);
  GUI_FillRect(180, 80, 199, 99);
  //
  // Draw resulting color
  //
  GUI_SetColor(_aColorSep[0] | (((U32)_aColorSep[1]) << 8) | (((U32)_aColorSep[2]) << 16));
  GUI_FillRect(205, 20, 285, 99);
}

/*********************************************************************
*
*       _OnValueChanged
*/
static void _OnValueChanged(WM_HWIN hDlg, int Id) {
  unsigned Index;
  unsigned v;
  WM_HWIN  hSlider;
  WM_HWIN  hEdit;

  Index = 0;
  v     = 0;
  if ((Id >= GUI_ID_SLIDER0) && (Id <= GUI_ID_SLIDER2)) {     //--------------（3）
    Index = Id - GUI_ID_SLIDER0;
    //
    // SLIDER-widget has changed, update EDIT-widget          //--------------（4）
    //
    hSlider = WM_GetDialogItem(hDlg, GUI_ID_SLIDER0 + Index);
    hEdit   = WM_GetDialogItem(hDlg, GUI_ID_EDIT0 + Index);
    v = SLIDER_GetValue(hSlider);
    EDIT_SetValue(hEdit, v);
  } else if ((Id >= GUI_ID_EDIT0) && (Id <= GUI_ID_EDIT2)) {
    Index = Id - GUI_ID_EDIT0;
    //
    // If EDIT-widget has changed, update SLIDER-widget      //--------------（5）
    //
    hSlider = WM_GetDialogItem(hDlg, GUI_ID_SLIDER0 + Index);
    hEdit   = WM_GetDialogItem(hDlg, GUI_ID_EDIT0 + Index);
    v = EDIT_GetValue(hEdit);
    SLIDER_SetValue(hSlider, v);
  }
  _aColorSep[Index] = v;
  //
  // At last invalidate dialog client window                //--------------（6）
  //
  WM_InvalidateWindow(WM_GetClientWindow(hDlg));
}

/*********************************************************************
*
*       _cbBkWindow
*/
static void _cbBkWindow(WM_MESSAGE * pMsg) {                //--------------（7）
  int xPos;
  int yPos;

  xPos = LCD_GetXSize() / 2 - bmSeggerLogoBlue.XSize/2;
  yPos = LCD_GetYSize() / 2 - bmSeggerLogoBlue.YSize/2 ;
  switch (pMsg->MsgId) {
  case WM_PAINT:
    GUI_SetBkColor(GUI_BLUE);
    GUI_Clear();
    GUI_SetColor(GUI_WHITE);
    GUI_SetFont(&GUI_Font24_ASCII);
    GUI_DispStringHCenterAt("DIALOG_SliderColor - Sample", 160, 5);
    GUI_DrawBitmap(&bmSeggerLogoBlue, xPos, yPos );
  default:
    WM_DefaultProc(pMsg);
  }
}

/*********************************************************************
*
*       _cbCallback
*/
static void _cbCallback(WM_MESSAGE * pMsg) {
  WM_HWIN hDlg;
  WM_HWIN hItem;
  int     i;
  int     NCode;
  int     Id;

  hDlg = pMsg->hWin;
  switch (pMsg->MsgId) {
    case WM_PAINT:
      _OnPaint();
      return;
    case WM_INIT_DIALOG:
      for (i = 0; i < 3; i++) {          //--------------（8）
        hItem = WM_GetDialogItem(hDlg, GUI_ID_SLIDER0 + i);
        SLIDER_SetRange(hItem, 0, 255);
        SLIDER_SetValue(hItem, _aColorSep[i]);
        //
        // Init EDIT-widgets
        //
        hItem = WM_GetDialogItem(hDlg, GUI_ID_EDIT0 + i);
        EDIT_SetDecMode(hItem, _aColorSep[i],   0, 255, 0, 0);
      }
      break;
    case WM_KEY:
      switch (((WM_KEY_INFO*)(pMsg->Data.p))->Key) {
        case GUI_KEY_ESCAPE:
          ;
          break;
        case GUI_KEY_ENTER:
          GUI_EndDialog(hDlg, 0);
          break;
      }
      break;
    case WM_NOTIFY_PARENT:
      Id    = WM_GetId(pMsg->hWinSrc);      // Id of widget
      NCode = pMsg->Data.v;                 // Notification code
      switch (NCode) {
        case WM_NOTIFICATION_RELEASED:      // React only if released
          if (Id == GUI_ID_OK) {            // OK Button
            GUI_EndDialog(hDlg, 0);
          }
          if (Id == GUI_ID_CANCEL) {        // Cancel Button
            GUI_EndDialog(hDlg, 1);
          }
          break;
        case WM_NOTIFICATION_VALUE_CHANGED: // Value has changed     //--------------（9）
          _OnValueChanged(hDlg, Id);
          break;
      }
      break;
    default:
      WM_DefaultProc(pMsg);
  }
}

/*********************************************************************
*
*       Public code
*
**********************************************************************
*/
/*********************************************************************
*
*       MainTask
*/
void MainTask(void) {
  WM_SetCreateFlags(WM_CF_MEMDEV);  // Use memory devices on all windows to avoid flicker
  GUI_Init();
  //
  // Check if recommended memory for the sample is available
  //
  if (GUI_ALLOC_GetNumFreeBytes() < RECOMMENDED_MEMORY) {
    GUI_ErrorOut("Not enough memory available.");
    return;
  }
  GUI_CURSOR_Show();
  WM_SetCallback(WM_HBKWIN, _cbBkWindow);
  while (1) {
    GUI_ExecDialogBox(_aDialogCreate, GUI_COUNTOF(_aDialogCreate), &_cbCallback, 0, 0, 0);
    GUI_Delay(1000);
  }
}

lee_st · 2017-3-29 09:37:31

1. 对话框资源列表。
2. 这个函数用于绘制三个小的单色矩形方框和一个大的矩形方框。

lee_st · 2017-3-29 09:37:44

3.    通过控件ID号判断此控件是否是滑块控件。
4.    如果是滑块控件，获取滑块控件的值来设置编辑框显示的数值，保证两者是统一的。
5.    通过控件ID号判断此控件是否是编辑框控件。如果是编辑框控件，获取编辑框控件的值来设置滑块控件的数值，保证两者是统一的。
6.    通过函数WM_InvalidateWindow让对话框客户端窗口无效，从而触发对话框回调函数中WM_PAINT重绘消息的执行。

lee_st · 2017-3-29 09:37:53

7.    桌面窗口回调函数。
8.    对话框初始化消息，用来初始化三个滑块控件和三个编辑框控件。其中，滑块控件的范围是通过函数SLIDER_SetRange来设置，
而滑块控件的数值通过函数SLIDER_SetValue来设置。
9.    编辑框的数值或者滑块控件中滑动条的位置发生改变，都会触发这个消息。

lee_st · 2017-3-29 09:38:05

实际显示效果如下：

lee_st · 2017-3-29 09:38:18

60.5 实验例程说明（RTOS）

实验目的：
      1.    本实验主要学习滑块控件的使用。
      2.    emWin功能的实现在MainTask.c文件里面。
实验内容：
      1.    K1按键按下，串口打印任务执行情况（波特率115200，数据位8，奇偶校验位无，停止位1）。
      2.    K2按键按下，实现截图功能，将图片以BMP格式保存到SD卡中。
      3.    GUI任务在对话框上面创建了一个滑块控件和一个文本控件，当用户调节滑动条时，文本控件实时显示滑块控件的数值。
      4.    各个任务实现的功能如下：
            App Task Start 任务：实现按键和触摸扫描。
            App Task MspPro任务：实现截图功能，将图片以BMP格式保存到SD卡中。
            App Task UserIF  任务：按键消息处理。
            App Task COM 任务：暂未使用。
         App Task GUI 任务：GUI任务。

lee_st · 2017-3-29 09:38:29

μCOS-III任务调试信息（按K1按键，串口打印）：

lee_st · 2017-3-29 09:38:59

STemWin界面显示效果：
      800*480分辨率界面效果。
#define EX_SRAM   1/*1 used extern sram, 0 used internal sram */

#if EX_SRAM
#define GUI_NUMBYTES  (1024*1024*8)
#else
#define GUI_NUMBYTES  (100*1024)
#endif

lee_st · 2017-3-29 09:39:06

通过宏定义来配置使用内部SRAM还是外部的SDRAM做为emWin的动态内存，当配置：
#define EX_SRAM 1 表示使用外部SDRAM作为emWin动态内存，大小8MB。
#define EX_SRAM 0 表示使用内部SRAM作为emWin动态内存，大小100KB。
默认情况下，本教程配套的所有emWin例子都是用外部SDRAM作为emWin动态内存。

搜索历史

【emWin实战教程V2.0】第60章 SLIDER-滑块控件

相关推荐

66 条评论

评论

精选推荐

热门帖

站长推荐 /7