【emWin实战教程V2.0】第52章 GRAPH-图形控件

转最新版本教程

转最新版本教程
本章节为大家讲解STemWin支持的图形控件，相比前面几个章节讲解的控件，图形控件的使用要稍麻烦些。图形控件在显示数据的波形曲线时非常方便，不过这个控件也有一个缺点，显示速度慢，所以仅适合显示一些温度，湿度，CPU利用率等只需慢速更新的场合。
      52.1 初学者重要提示
      52.2 图形控件基础知识
      52.3 使用GUIBuilder创建图形控件并用模拟器显示出来
      52.4 官方WIDGET_GraphYT.c实例
      52.5 实验例程说明（RTOS）
      52.6 实验例程说明（裸机）
      52.7 总结

lee_st · 2017-3-9 18:10:31

52.3 使用GUIBuilder创建图形控件并用模拟器显示出来

（这句话放在开头说，GUIBuilder仅仅能够创建图形控件的框架，直接使用还要做一些函数的初始化）

首先需要大家按照第2章2.3.4小节的说明下载STemWin的软件包，其中GUIBuilder5.32位于路径：STM32Cube_FW_F4_V1.13.0MiddlewaresSTSTemWinSoftware里面

lee_st · 2017-3-9 18:10:45

52.3.1 第一步：建立一个对话框，主体是框架窗口
1、找到GUIBuilder后，打开这个软件，并按照如下方式建立一个对话框。

lee_st · 2017-3-9 18:11:01

2、修改框架窗口大小为800*480。

lee_st · 2017-3-9 18:11:16

3、下面设置对话框标题的字体，对齐方式，和显示的文本。首先，在建立的对话框上面右击鼠标，选择Set font。

lee_st · 2017-3-9 18:11:28

弹出如下界面，并选择字体GUI_FONT_32B_ASCII，点击OK。

lee_st · 2017-3-9 18:11:41

设置好字体以后再设置对齐方式，还是右击鼠标，选择Set text alignment，并选择居中

lee_st · 2017-3-9 18:11:54

配置完成后，上面的文本Framewin会居中显示，然后还是鼠标右击，选择Set title text，并更改Framewin为armfly，修改的地方在左下角：

设置好以后，对话框就算建立完毕。

lee_st · 2017-3-9 18:12:09

52.3.2 第二步：在对话框上面建立图形控件

图形控件的建立方法和上面的对话框是一样的。先将图形控件拖到对话框上面，建立后的效果如下所示：

lee_st · 2017-3-9 18:12:28

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

lee_st · 2017-3-9 18:12:41

我们这里直接通过鼠标左键选中后，在左下角的表格里面设置大小为400*240。

lee_st · 2017-3-9 18:12:53

设置完毕后，鼠标左键选中图形控件，右击选择Set boader sizes，设置上下左右四个边界的大小分别是10,10,20,10。

GUIBuilder仅支持设置这一项，别的设置不支持，需要我们在代码里面实现。

lee_st · 2017-3-9 18:13:25

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

保存方法如下：

图片:2.17.png

lee_st · 2017-3-9 18:13:40

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

lee_st · 2017-3-9 18:13:52

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

在模拟器上面如何演示GUIBuilder生成的代码已经在第6章的6.3小节详细讲述了，这里不再赘述。可以在模拟器上面运行的完整代码如下，此代码对应的例子是V6-575_STemWin实验_Graph图形控件（模拟器）：
（由于GUIBuilder创建图形控件的功能有限，我们这里要添加的代码稍多）

lee_st · 2017-3-9 18:14:00

/*********************************************************************
*                                                                    *
*                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 "stdlib.h"

/*********************************************************************
*
*       Defines
*
**********************************************************************
*/
#define ID_FRAMEWIN_0 (GUI_ID_USER + 0x00)
#define ID_GRAPH_0 (GUI_ID_USER + 0x01)

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

/*********************************************************************
*
*       Static data
*
**********************************************************************
*/
static GRAPH_SCALE_Handle hScaleV;     //--------------（1）
static GRAPH_DATA_Handle  ahData;

// 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 },
  { GRAPH_CreateIndirect, "Graph", ID_GRAPH_0, 10, 10, 400, 240, 0, 0x0, 0 },  //--------------（2）
  // 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;
  // 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 'Graph'
    //
    hItem = WM_GetDialogItem(pMsg->hWin, ID_GRAPH_0); //--------------（3）

     /* 创建数据对象 ***********************/
     ahData = GRAPH_DATA_YT_Create(GUI_GREEN, 400, 0, 0);  //--------------（4）

     /* 数据对象添加到图形控件 */
     GRAPH_AttachData(hItem, ahData);  //--------------（5）

     /* 设置Y轴方向的栅格间距 */
     GRAPH_SetGridDistY(hItem, 20);   //--------------（6）

     /* 固定X轴方向的栅格 */
    GRAPH_SetGridFixedX(hItem, 1);  //--------------（7）

     /* 设置栅格可见 */
    GRAPH_SetGridVis(hItem, 1);    //--------------（8）

     /* 创建刻度对象  ********************/
    hScaleV = GRAPH_SCALE_Create( 20, GUI_TA_RIGHT, GRAPH_SCALE_CF_VERTICAL, 20); //--------------（9）

     /* 将垂直刻度对象添加到图形控件 */
    GRAPH_AttachScale(hItem, hScaleV);  //--------------（10）

     /* 用于设置比例刻度的因子 */
     GRAPH_SCALE_SetFactor(hScaleV, 0.5); //--------------（11）

     /* 设置标签字体颜色 */
    GRAPH_SCALE_SetTextColor(hScaleV, GUI_RED); //--------------（12）

     /* 设置上下左右边界的大小 */
    GRAPH_SetBorder(hItem, 20, 10, 10, 10); //--------------（13）
    // USER START (Optionally insert additional code for further widget initialization)
    // 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;
}

/*********************************************************************
*
*       MainTask
*/
void MainTask(void)
{

     /* 初始化 */
     GUI_Init();

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

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

     while(1)
     {
         /* 每50ms给绘图控件添加一次新的数据 */
         GRAPH_DATA_YT_AddValue(ahData, rand()%100); //--------------（14）
         GUI_Delay(50);
     }
}

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

lee_st · 2017-3-9 18:14:17

创建的这个例子相对稍麻烦，主要实现了在对话框上面创建一个图形控件，对话框的主体是用的框架窗口控件。
1.    定义刻度对象和数据对象的句柄变量。
2.    在对话框的资源列表中创建一个图形控件。
3.    通过函数WM_GetDialogItem获得对话框上ID为ID_GRAPH_0的图形控件句柄。
4.    通过函数GRAPH_DATA_YT_Create创建数据对象，此类对象要求 x 轴上的每个点在 y 轴上都有一个值，通常用于与时间相关的图形，每个参数的定义说明如下（最后两个参数仅在首次创建的时候使用一次，以后将用不上，我们这里直接取0，不使用）：

lee_st · 2017-3-9 18:14:24

ahData = GRAPH_DATA_YT_Create(GUI_GREEN,   /* 图形控件上面显示波形的颜色 */
400,   /* 此数据对象最大支持的数据个数 */
0,   /* 首次创建指向的数据地址 */
0);  /* 首次创建添加的数据个数 */

lee_st · 2017-3-9 18:14:35

5.    通过函数GRAPH_AttachData将数据对象附加到图形控件。
6.    通过函数GRAPH_SetGridDistY设置Y轴方向的栅格间距。
7.    通过函数GRAPH_SetGridFixedX固定X轴方向的栅格间距。
8.    通过函数GRAPH_SetGridVis设置栅格可见。
9.    通过函数GRAPH_SCALE_Create可以为图形控件创建X轴方向和Y轴方向的刻度标签，这里是创建的Y轴方向的刻度标签，此函数具体每个形参的定义说明如下：

lee_st · 2017-3-9 18:14:44

hScaleV = GRAPH_SCALE_Create( 20  /* 相对于图形控件顶边或者左边的距离，由于这里创建的是垂直刻度，所以是
左边 */,
GUI_TA_RIGHT,            /* 刻度标记的对齐方式 */
GRAPH_SCALE_CF_VERTICAL, /* 绘制的垂直刻度 */
20);                     /* 刻度标记之间的间距 */

lee_st · 2017-3-9 18:14:57

10.  通过函数GRAPH_AttachScale将垂直标记附加到图形控件。
11.  通过函数GRAPH_SCALE_SetFactor设置垂直刻度的比例因子，比如此函数的第二个参数设置为1，那么刻度就是以实际像素为单位进行创建的，如果这里设置为0.5表示缩小到一半，也就是2个像素点代表一个刻度，设置为0.1表示缩小10倍，也就是10个像素代表一个刻度，以此类推。如果此参数的取值大于1，表示放大，比如取值10，表示0.1个像素代表一个刻度。如果还不理解的话，实际
操作下就明白了。
12.  通过函数GRAPH_SCALE_SetTextColor设置刻度标签的颜色。
13.  通过函数GRAPH_SetBorder设置上下左右四个边界的大小。如果不理解这几个参数的作用，可以在GUIBuilder上面操作这个四个边界值，就比较明白了。
14.  通过函数GRAPH_DATA_YT_AddValue给图形控件的数据对象添加数据，这里是通过GUI_Delay每50ms执行一次，从而实现慢速更新的效果。

搜索历史

【emWin实战教程V2.0】第52章 GRAPH-图形控件

相关推荐

86 条评论

评论

精选推荐

热门帖

站长推荐 /6