【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 17:55:51

52.1  初学者重要提示

1、初学者爱问的问题简单汇总：
      （1）问题1：图形控件是否可以从左往右显示，系统默认都是从右往左显示？
      答：可以的，详情看这个帖子的说明http://bbs.armfly.com/read.php?tid=22517 。
      （2）问题2：图形控件的显示速度比较慢，是否可以加快？
      答：不支持，图形控件的波形刷新速度的确比较慢，所以仅适合用于波形慢速刷新的场合。
2、图形控件不支持皮肤色设置。

lee_st · 2017-3-9 17:56:02

3、图形控件的所有API函数在emWin手册中都有讲解，下图是中文版手册里面API函数位置：

lee_st · 2017-3-9 17:56:12

下图是英文版手册里面API函数的位置：

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

52.2 图形控件基础知识

图形控件用于数据可视化，图形控件的典型应用是显示测量值（比如CPU利用率，温度值，湿度值等等）或函数图形的曲线，特点如下：
1、可同时显示多条曲线。
2、可使用水平和垂直刻度来标记曲线。
3、可在背景上显示具有不同水平和垂直间距的网格。
4、如果图形的可见区域无法容纳数组中所有的数据进行显示，图形控件可以自动显示滚动条，从而可通过滚动条显示数组中的所有数据。

lee_st · 2017-3-9 18:08:02

52.2.1 图形控件的结构

下面我们通过图形控件的结构对其有一个感性的认识，图形控件由不同种类的对象组成：
1、图形控件自身，可以附加数据对象和刻度对象。
2、可选的一个或多个数据对象。
3、可选的一个或多个刻度对象。

lee_st · 2017-3-9 18:08:22

下图显示了图形控件的详细结构：

lee_st · 2017-3-9 18:08:34

52.2.2 图形控件支持的曲线类型

图形控件支持以下两种方式的曲线绘制：

GRAPH_DATA_XY：此数据对象用于绘制由坐标值（x，y）组成的曲线，每个坐标位置确定一个点，这种方式的典型应用是绘制函数图形。
GRAPH_DATA_YT：此数据对象用于绘制每个x位置都具有一个y值的曲线。这种方式的典型应用是数据连续更新的曲线。

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

52.2.3 图形控件支持的通知代码

图形控件不支持通知代码。

lee_st · 2017-3-9 18:08:49

52.2.4 图形控件支持的键盘反应（输入聚焦）

图形控件不支持输入聚焦，这点要特别注意。不支持输入聚焦的话，外置键盘或者类似外置键盘的输入设备给图形控件发消息是没有任何反应的。
（输入聚焦是一个重要的知识点，使用外置键盘或者类似外置键盘的输入设备要用到）

lee_st · 2017-3-9 18:08:58

52.2.5 图形控件API函数

图形控件的API函数比较多，对比前面章节的几个控件，图形控件的调用还是有些难度的，后面用到什么函数再跟大家详细讲解。
本章节教程配套例子是将图形控件配合对话框一起使用的，实际项目中也推荐大家这么做，可以很方便的进行界面管理。在对话框上面使用图形框控件是通过函数GRAPH_CreateIndirect()来实现的。根据第41章41.7.1小节讲解的_CreateIndirect()函数，GUI_WIDGET_CREATE_INFO结构体类型定义如下：

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

typedef struct {
GUI_WIDGET_CREATE_FUNC * pfCreateIndirect;    // 间接创建函数
const char * pName;                           // 控件名(不是所有控件都需要)
I16 Id;                                       // 控件ID
I16 x0, y0, xSize, ySize;                     // 控件的坐标位置和大小
I16 Flags;                                    // 控件用到的标志，没有就写0
I32 Para;                                     // 控件用到的参数，没有就写0
U32 NumExtraBytes;                            // 函数 _SetUserData & _GetUserData用到的
// 额外字节。
} GUI_WIDGET_CREATE_INFO;

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

上面结构体成员里面的标记Flags和参数Para是可选的，函数GRAPH_CreateIndirect()没有用到参数Para，但用到了标记Flags，与函数GRAPH_CreateEx的形参ExFlags是等效的，具体形参ExFlags支持哪些标记参看emWin官方手册中的说明即可
这里举一个对话框资源列表里面创建图形控件的例子，帮助大家更好的理解：

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

/*
*********************************************************************************************************
*                           宏定义
*********************************************************************************************************
*/
#define ID_FRAMEWIN_0 (GUI_ID_USER + 0x00)
#define ID_GRAPH_0    (GUI_ID_USER + 0x01)

/*
*********************************************************************************************************
*                           GUI_WIDGET_CREATE_INFO类型数组
*********************************************************************************************************
*/
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 },
};

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

上面的对话框资源列表里面依次创建了框架窗口控件，图形控件。图形控件的参数和GUI_WIDGET_CREATE_INFO结构成员的对应关系如下：

pfCreateIndirect = GRAPH_CreateIndirect;
pName = "Graph";
Id = ID_GRAPH_0;
x0 = 10;
y0 = 10;
xSize = 400;
ySzie = 240;
Flags = 0;
Para = 0;
NumExtraBytes = 0;

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

对于这个对应关系要注意以下两点：
1、这里的x0和y0坐标位置是相对于对话框资源列表中框架窗口的客户端窗口的位置坐标。
2、Id号，这里的Id号是用户自定义的，emWin在GUI.h文件中也定义了部分绘图控件的Id号，用户是可以直接使用的：

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

#define GUI_ID_GRAPH0     0x220
#define GUI_ID_GRAPH1     0x221
#define GUI_ID_GRAPH2     0x222
#define GUI_ID_GRAPH3     0x223

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

52.2.6 创建和删除图形控件

创建图形控件的过程如下：
1、创建图形控件并设置所需的属性。
2、创建数据对象。
3、将数据对象附加到图形控件。
4、创建可选的刻度对象。
5、将刻度对象附加到图形控件。
附加到图形控件后，就不需要通过应用程序来删除数据和刻度对象，直接删除图形控件即可，数据对象和刻度对象会被自动删除。

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

示例
GRAPH_DATA_Handle hData;
GRAPH_SCALE_Handle hScale;
WM_HWIN hGraph;
/* 1. 创建图形控件 */
hGraph = GRAPH_CreateEx(10, 10, 216, 106, WM_HBKWIN, WM_CF_SHOW, 0, GUI_ID_GRAPH0);
/* 2. 创建数据对象 */
hData = GRAPH_DATA_YT_Create(GUI_DARKGREEN, NumDataItems, aData0, MaxNumDataItems);
/* 3. 将创建的数据对象附件到图形控件 */
GRAPH_AttachData(hGraph, hData);
/* 4. 创建刻度对象 */
hScale = GRAPH_SCALE_Create(28, GUI_TA_RIGHT, GRAPH_SCALE_CF_VERTICAL, 20);
/* 5. 将创建的可读对象附件到图形控件 */
GRAPH_AttachScale(hGraph, hScale);
/*
6. 操作图形控件，此时省略未写
*/
/* 7. 不使用了，直接删除图形控件即可，数据对象和刻度对象无需再单独删除 */
WM_DeleteWindow(hGraph);

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

52.2.7 图形控件绘制过程

官方手册中给了一个图形控件的绘制顺序，讲解太笼统（重点还是配合本章节配套的例子进行学习），我们这里也将其罗列出来：
1. 用背景色填充背景。
2. 调用可选的回调函数。比如，可以用这种方式绘制用户定义的网格。
3. 绘制网格（如果已启用）。
4. 绘制数据对象和边框区域。
5. 绘制刻度对象。
6. 调用可选的回调函数。比如，可以用这种方式绘制用户定义的刻度，或一些其他的文本和图形。

搜索历史

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

相关推荐

86 条评论

评论

精选推荐

热门帖

站长推荐 /6