第45章emWin(ucgui)GRAPH-图形控件

GUI_ID_CHECK3
{ CHECKBOX_CreateIndirect, 0,
GUI_ID_CHECK4
{ CHECKBOX_CreateIndirect, 0,
GUI_ID_CHECK5
{ TEXT_CreateIndirect,
"Effect",
0
{ RADIO_CreateIndirect, 0,
static const GUI_WIDGET_CREATE_INFO _aDialogCreate[] = {
{ FRAMEWIN_CreateIndirect, "Graph widget demo", 0
{ GRAPH_CreateIndirect, 0,
GUI_ID_GRAPH0
{ TEXT_CreateIndirect,
GRAPH_DATA_YT_AddValue(_ahData[i], _aValue[i]); } }
STM32-V5 开发板 STemWin 教程
/*********************************************************************
*
*
_UserDraw
45.2官方 WIDGET_GraphYT 实例
官方的这个实例很好的演示了 GraphYT 的使用，这个例子在模拟器中的位置：
第 3 页 共 14 页
STM32-V5 开发板 STemWin 教程
源码如下（程序中进行了详细的注释）：
----------------------------------------------------------------------
45.1.2 创建和删除图形小工具
创建图形控件的过程如下： 创建图形控件并设置所需的属性。
创建数据对象。
将数据对象附加到图形控件。 创建可选的刻度对象。
将刻度对象附加到图形控件。
附加到图形控件后，就不需要通过应用程序来删除数据和刻度对象，而由图形控件完成。 示例
GRAPH_DATA_Handle hData; GRAPH_SCALE_Handle hScale; WM_HWIN hGraph; hGraph = GRAPH_CreateEx(10, 10, 216, 106, WM_HBKWIN, WM_CF_SHOW, 0, GUI_ID_GRAPH0); hData = GRAPH_DATA_YT_Create(GUI_DARKGREEN, NumDataItems, aData0, MaxNumDataItems); GRAPH_AttachData(hGraph, hData); hScale = GRAPH_SCALE_Create(28, GUI_TA_RIGHT, GRAPH_SCALE_CF_VERTICAL, 20); GRAPH_AttachScale(hGraph, hScale); /* Do something with the widget... */ WM_DeleteWindow(hGraph);
/* 设置字体 */ GUI_SetFont(&GUI_Font13_ASCII); FontSizeY = GUI_GetFontSizeY();
第 2 页 共 14 页
45.1.3 绘制过程
STM32-V5 开发板 STemWin 教程
如前所述，图形控件由不同部分和 “子”对象组成。以下描述了绘制控件的顺序： 1. 用背景色填充背景。 2. 调用可选的回调例程。例如，这样就能绘制用户定义的网格。 3. 绘制网格 （如已启用）。 4. 绘制数据对象和边框区域。 5. 绘制刻度对象。 6. 调用可选的回调例程。例如，这样就能绘制用户定义的刻度，或一些其他的文本和/或图形。
Add = rand() % (2 + i * i); Vz = ((rand() % 2) << 1) - 1; _aValue[i] += Add * Vz; if (_aValue[i] > MAX_VALUE) {
_aValue[i] = MAX_VALUE; } else if (_aValue[i] < 0) {
{ CHECKBOX_CreateIndirect, 0,
GUI_ID_CHECK8
};
, 0, 0, 320, 240, FRAMEWIN_CF_MOVEABLE }, , 5, 5, 270, 175 }, , 10, 185, 50, 20 }, , 10, 205, 50, 20 }, , 60, 185, 60, 16 }, , 60, 205, 60, 16 }, , 130, 185, 50, 0 }, , 130, 205, 50, 0 }, , 280, 5, 35, 15 }, , 280, 20, 35, 0 }, , 280, 40, 35, 0 }, , 280, 60, 35, 0 }, , 280, 80, 35, 0 }, , 280, 100, 35, 15 }, , 275, 115, 35, 0, 0, 3 }, , 180, 185, 50, 0 }, , 180, 205, 50, 0 }, , 235, 185, 65, 18 }, , 235, 205, 70, 0 },
45.1.4 支持的曲线类型
显示测量值连续更新的曲线的要求不同于显示具有 X/Y 坐标的函数图形的要求。因此，控件当前支持 2 种数据对象，如下表所示：
GRAPH_DATA_XY：此数据对象用于显示由点阵列组成的曲线，对象数据绘制为折线。此数据对象的典型 应用是绘制函数图形。 GRAPH_DATA_YT：此数据对象用于显示图形上每个 X 位置都具有一个 Y 值的曲线。此数据对象的典型应 用是显示测量值连续更新的曲线。
*/
#define MAX_VALUE 180
/*********************************************************************
*
*
Static data
*
**********************************************************************
*
* 本函数的目的：
* 在绘制之前和绘制之后调用这个函数 ,此函数只是显示字母 Temperature
*/
static void _UserDraw(WM_HWIN hWin, int Stage) {
/* 在绘制之后被调用 */ if (Stage == GRAPH_DRAW_LAST) {
char acText[] = "Temperature"; GUI_RECT Rect, RectInvalid; int FontSizeY;
截图中每个参数表示的含义如下：
第 1 页 共 14 页
STM32-V5 开发板 STemWin 教程
参数
描述
Border
可选边框是图形小工具的一部分。
Frame
数据区四周的细线，是图形小工具的一部分。
Grid
显示在数据区的背景中，是图形小工具的一部分。
Data area
网格和数据对象的显示区域。
Data object(s)
图形控件可用于可视化数据。图形控件的典型应用是显示测量值或函数图形的曲线，可同时显示多条曲 线。可使ห้องสมุดไป่ตู้水平和垂直刻度来标记曲线。可在背景上显示具有不同水平和垂直间距的网格。如果数据阵列不 能容纳进图形的可见区域，小工具可自动显示滚动条，从而可在大的数据阵列中进行滚动。
45.1.1 图形控件的结构
图形控件由不同种类的对象组成： 图形控件自身，可以附加数据对象和刻度对象。 可选的一个或多个数据对象。 可选的一个或多个刻度对象。 下图显示了图形控件的详细结构：
STM32-V5 开发板 STemWin 教程
static I16 _aValue[3]; static int _Stop;
/* 三种曲线的显示颜色 */ static GUI_COLOR _aColor[] = {GUI_RED, GUI_GREEN, GUI_LIGHTBLUE};
/* 对话框资源 */
File
: WIDGET_Graph.c
Purpose : Demonstrates the use of the GRAPH widget
----------------------------------------------------------------------
*/
#include <stdlib.h> #include <string.h>
GUI_ID_CHECK0
{ CHECKBOX_CreateIndirect, 0,
GUI_ID_CHECK1
{ TEXT_CreateIndirect,
"Border",
0
{ CHECKBOX_CreateIndirect, 0,
GUI_ID_CHECK2
{ CHECKBOX_CreateIndirect, 0,
#include "DIALOG.h" #include "GRAPH.h"
/*********************************************************************
*
*
Defines
*
**********************************************************************
STM32-V5 开发板 STemWin 教程