emWin 之 GRAPH 控件使用简介

emWin 是 Segger 公司针对嵌入式平台开发的稳定、高效的图形软件库，适合用于任何图形 LCD 的操作应用，并可输出高质量的无锯齿的文字和图形，通过调用 emWin 提供的函数接口，开发嵌入式图形界面应用变得简单而快捷。其丰富的控件，更是有着极其重要的作用，本文简单介绍了 GRAPH 图形曲线控件的使用。

 

 一、 概述

       GRAPH 图形曲线控件可用于可视化数据，其典型应用是显示测量值或函数的曲线。GRAPH可以同时显示多条曲线，带有的水平和垂直刻度标尺可以用来标记曲线。背景上还可以显示具有不同水平和垂直间距的网格。

       GRAPH 控件一般由 GRAPH 、数据对象和刻度对象三部分组成：

• GRAPH ：可附加需要显示的数据对象和与数据相对应的刻度对象。
• 数据对象 ：要显示的数组，可以是一个或多个。
• 刻度对象 ：与数组相对应的刻度标尺，可以是一个或多个。

二、 使用步骤

2.1 创建 GRAPH 图形曲线控件

        GRAPH_Handle GRAPH_CreateEx(int x0, int y0, int xSize, int ySize, WM_HWIN hParent, int WinFlags, int ExFlags, int Id);

• x0 、 y0 ： GRAPH 控件左上角的坐标（以父窗口为参考）。
• xSize 、 ySize ：分别是GRAPH 控件的长和宽（以像素为单位）。
• hParent ：父窗口句柄，若为 0 ，则表示在桌面创建。
• WinFlags ：创建标记，一般使用 WM_CF_SHOW 使控件创建后可见。
• ExFlags ：标志 GRAPH_CF_GRID_FIXED_X 表示“固定”X 轴方向上的网格，此功能也有单独的函数可实现。
• Id : GRAPH控件的 ID， emWin 中提供了四个默认的 ID ：GUI_ID_GRAPH0 - GUI_ID_GRAPH3。

       应用举例：

       hGraph = GRAPH_CreateEx(100, 50, 600, 380, hWinBK, WM_CF_SHOW, 0, GUI_ID_GRAPH0);     //创建 Graph 控件

2.2 创建并添加数据对象

       数据对象分为 GRAPH_DATA_XY 和 GRAPH_DATA_YT 两种：

1. GRAPH_DATA_XY ：用于显示由点阵列组成的曲线，对象数据绘制为折线，其典型应用是绘制函数图形。
2. GRAPH_DATA_YT ：用于显示图形上每个X 位置都具有一个Y 值的曲线，其典型应用是显示测量值连续更新的曲线。

       以 GRAPH_DATA_YT 为例，创建一个数据对象：

       GRAPH_DATA_Handle GRAPH_DATA_YT_Create(GUI_COLOR Color, unsigned MaxNumItems, I16 * pData, unsigned NumItems);

• Color ：所绘制的数据曲线的颜色。
• MaxNumItems ：数据项的最大个数。
• pData ：指向要添加到对象的数据的指针，该指针应指向一组I16 值。
• NumItems ：要添加的数据项数。

       应用举例：

       hData1 = GRAPH_DATA_YT_Create(GUI_LIGHTBLUE, 500, &Data1_rand, 1);     //创建数据对象

       若要添加多个数据对象，则可直接创建多个并附加。

       当采集的值更新时，可用 GRAPH_DATA_YT_AddValue() 添加新的数据项。

        GRAPH_DATA_YT_AddValue(hData1, Data1_rand);     //添加新的随机数

2.3 创建并添加刻度对象

       GRAPH_SCALE_Handle GRAPH_SCALE_Create(int Pos, int TextAlign, unsigned Flags, unsigned TickDist);

• Pos ：相对于曲线图控件的左边/顶边的位置。
• TextAlign ：用于绘制数字的文本对齐方式。
• Flags ：创建水平刻度对象还是垂直刻度对象。
• TickDist ：从一个刻度线到下一刻度线的距离。

       应用举例：

       hScale = GRAPH_SCALE_Create(35, GUI_TA_RIGHT, GRAPH_SCALE_CF_VERTICAL, 50);     //创建刻度对象

三、 GRAPH 控件实验

3.1 实验介绍

1. 通过本实验，理解和掌握 GRAPH 控件的使用。
2. 描述：此实验用 GRAPH 控件显示一组随机数的曲线并实时更新，刻度范围：-25 到 150，数据范围：-20 到 300。
3. 结果：曲线会通过模拟器显示出来。

3.2 软/硬件环境

       A. PC 所使用的 CPU 不重要，只需要一个至少满足以下国际标准之一的、符合 ANSI 标准的C 语言编译器：

• ISO/IEC/ANSI 9899:1990 (C90)，支持C++ 样式注释(//)
• ISO/IEC 9899:1999 (C99)
• ISO/IEC 14882:1998 (C++)

       B. 模拟器：SeggerEval_WIN32_MSVC_MinGW_GUI_V550，用 Visual Studio 2019 打开
       C. LPC54608 开发板，在 NXP 官网下载 SDK 包

3.3 实验步骤

1. 编写程序并在模拟器上运行
2. 观察 PC 上的 LCD 模拟器
3. 移植到 LPC54608 开发板

3.4 实验结果 

       模拟器的运行结果如下图所示，此 LCD 分辨率为 800 * 480，为了显示负值，将刻度和数据都进行了向上偏移，新的随机数在背景窗口回调函数里的重绘过程中，通过函数 GRAPH_DATA_YT_AddValue() 添加。

       接着将程序移植到 LPC54608 开发板，移植过程如下。

       先将 emWin 的例程从 SDK 包分离出来，作为独立的工程进行修改，首先打开 MCUXpresso Config Tools v6 （NXP 官网可下载），选择 “创建一个新的基于 SDK 示例或 hello world 工程的新配置”，接着选择SDK 路径、工具链以及要分离出来的例程，如下图所示。

         

       接着打开刚刚分离出来的工程，对其进行修改，将模拟器上的程序移植进去，编译、下载后现象如下图所示，这里的 LCD 分辨率为 480 * 272，故对控件大小和刻度进行了修改。

,

3.5 模拟器代码

#include"GUI.h"
#include "WM.h"
#include "GRAPH.h"

GRAPH_Handle hGraph;      //Graph 控件
GRAPH_DATA_Handle hData1;      //数据对象
GRAPH_SCALE_Handle hScale;      //刻度对象
I16 Data1_rand;     //随机数

//--------------------------------------------------------------------------------------------------
//----------------------------- Callback routine for Background window -----------------------------
static void cbWinBK(WM_MESSAGE* pMsg)
{
       GUI_KEY_STATE* pkeyStatus;
       switch (pMsg->MsgId)
       {
              case WM_PAINT:
              {
                     GUI_SetBkColor(GUI_BLACK);
                     GUI_Clear();

                     GRAPH_DATA_YT_AddValue(hData1, Data1_rand);      //添加新的随机数
                     break;
              }
              default:
              {
                     WM_DefaultProc(pMsg);
              }
       }
}

void MainTask(void)
{
       WM_HWIN hWinBK;    //背景窗口

       GUI_Init();

       hWinBK = WM_CreateWindowAsChild(0, 0, 800, 480, 0, WM_CF_SHOW , cbWinBK, 0);      //创建背景窗口（父为桌面顶级窗口）
       GUI_SetBkColor(GUI_BLACK);
       GUI_Clear();

       hGraph = GRAPH_CreateEx(100, 50, 600, 380, hWinBK, WM_CF_SHOW, 0, GUI_ID_GRAPH0);     //创建 Graph 控件
       GRAPH_SetBorder(hGraph, 50, 5, 5, 5);      //设置边界
       GRAPH_SetGridVis(hGraph, 1);      //启用网格，默认间距均为 50
       GRAPH_SetGridDistX(hGraph, 100);      //设置 X 轴网格间距
       GRAPH_SetGridFixedX(hGraph, 1);      //固定 X 轴的网格

       //------- Data -------
       hData1 = GRAPH_DATA_YT_Create(GUI_LIGHTBLUE, 500, &Data1_rand, 1);      //创建数据对象
       GRAPH_AttachData(hGraph, hData1);      //附加 数据对象
       GRAPH_DATA_YT_SetOffY(hData1, 50);      //将数据上移 50 个像素，与刻度对应
       GRAPH_DATA_YT_SetAlign(hData1, GRAPH_ALIGN_LEFT);     //设置数据对齐方式

       //------- Scale -------
       hScale = GRAPH_SCALE_Create(35, GUI_TA_RIGHT, GRAPH_SCALE_CF_VERTICAL, 50);     //创建刻度对象
       GRAPH_SCALE_SetFactor(hScale, 0.5);     //给定因子应将像素值转换为所需的单位,像素：-20 -- 300，刻度：-10 -- 150
       GRAPH_SCALE_SetNumDecs(hScale, 1);     //设置刻度小数点后的位数
       GRAPH_SCALE_SetOff(hScale, 50);     //将刻度上移 50 个像素，即将 Y 轴零点上移
       GRAPH_AttachScale(hGraph, hScale);     //附加 刻度对象

       GUI_Exec();

       while (1)
       {
              Data1_rand = rand() % 320 - 20;     //实际像素点 -20 - 300，对应刻度 -10 - 150
              WM_InvalidateWindow(hWinBK);
              GUI_Delay(100);
       }
}