CN103034502B - 一种在svg界面中嵌入动态实时监测图表的方法 - Google Patents

Abstract

本发明属于计算机应用领域，涉及一种动态实时监测图表的生成方法，特别是在SVG界面中嵌入动态实时监测图表方法。方法包括如下步骤：1）配置实时监测图表控件，并将配置好的图表控件存入数据库中，用唯一的图表控件配置ID区分；2）在SVG监测画面中绘制虚拟窗口并进行布局配置；3）在SVG监测界面中生成动态实时监测图表。实现虚拟窗口定义和配置，在SVG界面中快速插入、定位、关联及设定动态实时监测图表控件，虚拟窗口用于生成动态实时监测图表；解析包含虚拟窗口的SVG文件，将包含虚拟窗口的XML格式的SVG文件生成监测界面；在虚拟窗口处动态生成显示实时监测图表。解析和刷新速度加快，监测图表功能丰富、便捷、高效。

Description

一种在SVG界面中嵌入动态实时监测图表的方法

技术领域

本发明属于计算机应用领域，涉及一种动态实时监测图表的生成方法，特别是在SVG界面中嵌入动态实时监测图表的方法。

背景技术

电力监测图形可分为静态图形（解释性文字描述、连接文字、接线图、拓扑图等）和动态图形（开关图、电流电压表、状态指示、趋势数据曲线、各种实时分析图表等）。CCAPI的图形工作组在2001年成立，并建议采用基于XML的可伸缩矢量图SVG(ScalableVectorGraphics)作为电力系统图形交换的标准，正在电力系统中得到不断的应用。

在SVG规范中，只提供了基本图形和绘制方法，没有定义专用于电力系统的标准化的电力元件图形元素和属性，在电力监测曲线和各种分析图形方面更没有标准可依。另外，虽然SVG标准提供了动画功能，它却没有提供外部数据接口。因此，用SVG实现静态监测图形及简单动态界面是比较容易，但是，若用SVG实现动态可变的实时监测界面，尤其是复杂的电力监测和分析用实时动态图表界面是极其困难的。

通常用SVG实现动态实时监测图表的做法如下：

第一种是利用SVG文件内部或外部的脚本，该方法利用脚本调取实时数据，代价极高，代码量庞大且不容易编写，若是SVG内部嵌入的脚本会导致SVG文件偏大，脚本读取实时数据库或历史数据库占用资源大、速度慢、无法满足实时显示的需求等等。

第二种是用在SVG文件内部自定义的一些自定义SVG元素，其中包含循环控制模块、条件验证模块等，并结合外部实时数据模块推送的数据，要先解析SVG文档中的各种模块，然后再调取外部实时数据模块推送的数据（一般放在内存中）后才能进行刷新，达到动画的效果。该方法虽然把一部分功能模块在SVG以外部分执行，但主要功能模块都配置在SVG文件中，利用SVG提供的动画来实现，在实现闪烁、变位、颜色变化等简单功能时有一定优势，但若实现复杂电力监测图表（如油色谱分析中的大卫三角图、立方图，局部放电分析用的PRPS、PRPD图，各种需要同时访问历史和实时数据库的图表等）和鼠标互动功能（如通道选取响应、标尺等）功能时，因其根本上没有脱离对SVG动画的依赖以及主要功能模块配置在SVG文件中，所以仍然存在刷新速度慢、SVG文件偏大等问题，显得力不从心。

发明内容

本发明的目的是针对上述不足之处提供一种在SVG界面中嵌入动态实时监测图表的方法，借用虚拟窗口图元把预定义配置好的复杂监测实时图表控件嵌入到SVG监测界面中，在实现实时监测图表时脱离了对脚本和SVG动画的依赖，性能得到显著提高。解决了在监测SVG界面中，复杂多变的动态实时监测界面的构建问题，提供了将定义配置好的动态实时监测界面嵌入SVG界面中的方法，实现了复杂多变实时性强的SVG监测界面的快速便捷布局编辑和生成显示。

一种在SVG界面中嵌入动态实时监测图表的方法是采取以下技术方案实现的：

在SVG界面中嵌入动态实时监测图表的方法包括如下步骤，

1）配置实时监测图表控件，并将配置好的图表控件存入数据库中，用唯一的图表控件配置ID区分，只要提供此图表控件配置ID，就能调取所有与图表配置相关信息。

所述控件包括图表标题、类型、通道数、通道关联数据点、显示坐标轴单位和刷新休眠时间等等。

所述实时监测图表控件配置的过程包括：

1.1）编辑通道，生成唯一标示的通道ID号；关联通道的数据来源，编辑数据通道名称及描述，然后保存到数据库中，供实时监测图表控件调用。

1.2）编辑图表，生成唯一标示的图表控件配置ID号，选择图表的类型，根据所选择的图表类型，生成相应的配置选项。

1.3）添加通道，给图表控件添加数据通道，数据通道绑定1.1）步骤中保存的通道ID，然后对通道的显示颜色进行配置，保存图表控件到数据库，完成对图表控件的配置过程。

2）在SVG监测画面中绘制虚拟窗口并进行布局配置

虚拟窗口的绘制和布局的方法包括如下步骤：

2.1）在SVG界面的绘图画布中插入虚拟窗口图元；

2.2）对虚拟窗口进行实时监测图表参数配置，配置完成后在虚拟窗口中显示所选图表的模拟图。

所述参数包括关联图标、定义虚拟窗口的大小、位置、关联步骤1）中所述的图表控件配置ID及配置线程优先级等。

2.3）将所绘制虚拟窗口和监测界面分析转化成XML格式的SVG界面文件，其中虚拟窗口按步骤2.4）述格式插入SVG文件中，随SVG界面文件一并保存到数据库中。

2.4）对虚拟窗口进行必要的配置，在不影响快速解析监测界面SVG的前提下，又能提供足够的信息动态显示生成监测图表。

所述虚拟窗口的SVG描述是全部放入<g></g>的一个组合里。例如可以将其定义如下：

<g

……

elementClass="界面布局绘制时插入图元类型，这里是虚拟窗口类型"

chartId="实时监测图表ID"

chartType="实时监测图表类型"

chartPriority="图表线程优先等级"

scale(1)//缩放系数

rotate(0)">//旋转系数

<rectx="图表X坐标"y="图表Y坐标"

width="图表长度"height="图表宽度"/>

……

</g>

3）在SVG监测界面中生成动态实时监测图表

所述SVG监测界面中生成动态实时监测图表的过程包括：

3.1）读取数据库中SVG界面信息；

3.2）提取虚拟窗口的配置信息；

3.3）解析虚拟窗口，获取图形控件ID及相关配置；

3.4）读取数据库中的已配置好的图形控件的配置信息；

3.5）生成图形控件并显示运行。

所述生成图形控件并显示运行的具体步骤包括：

3.5.1）当解析SVG界面到虚拟窗口信息时，调用外部动态链接库中的实时监测图表生成接口；

3.5.2）传递的信息是图表ID、位置、大小、线程优先级等信息以及当前显示场景（Scene）；

3.5.3）图表控件以场景为父亲生成一个部件（Widget）；

3.5.4）此部件定位到所传递信息中的“位置”上，并调整大小为所传递信息中的“大小”；

3.5.5）根据所传信息中的优先级设置线程优先级，并进行各种初始化和绘图刷新功能。

所述动态实时监测图表的特点是：可配置（通道、数据点等等），支持同时读取实时数据库和历史数据库，可嵌入到SVG界面中，并根据需求运行在不同线程优先级上，独立运行，因此它生成以后几乎不影响界面刷新效率。

利用本发明方法，可以实现虚拟窗口定义和配置，在SVG界面中快速插入、定位、关联及设定动态实时监测图表控件，虚拟窗口用于生成动态实时监测图表；解析包含虚拟窗口的SVG文件，将包含虚拟窗口的XML格式的SVG文件生成监测界面；根据解析结果，在虚拟窗口处动态生成显示动态实时监测图表。

本发明方法提供利用定义虚拟窗口的方法实现了SVG监测界面中嵌入复杂动态实时监测图表的功能，阐述了动态实时监测图表的配置方法、SVG界面绘制布局的方法和解析生成显示动态实时监测图表的方法。在实现复杂监测实时图表时脱离了对脚本和SVG动画的依赖，嵌入的图表控件独立运行，线程优先级和休眠时间根据需求进行配置提高了界面运行效率，解析和刷新SVG界面速度加快，监测图表的功能丰富、便捷、效率高；将监测界面布局和逻辑定义分离，避免了界面与功能逻辑的耦合，图表控件一次配置多处调用，达到界面布局快捷、可重用性好。

附图说明

以下将结合附图对本发明作进一步说明：

图1是本发明在SVG界面中嵌入动态实时监测图表的方法的步骤流程图。

具体实施方式

参照附图1，本发明在SVG界面中嵌入动态实时监测图表的方法包括如下步骤，

1）配置实时监测图表控件，并将配置好的图表控件存入数据库中，用唯一的图表控件配置ID区分，只要提供此图表控件配置ID，就能调取所有与图表配置相关信息。

所述控件包括图表标题、类型、通道数、通道关联数据点、显示坐标轴单位和刷新休眠时间等等。

所述实时监测图表控件配置的过程包括：

1.1）编辑通道，生成唯一标示的通道ID号；关联通道的数据来源，编辑数据通道名称及描述，然后保存到数据库中，供实时监测图表控件调用。

1.2）编辑图表，生成唯一标示的图表控件配置ID号，选择图表的类型，根据所选择的图表类型，生成相应的配置选项，如填写曲线图表标题、曲线X,Y轴的标题和单位、刷新休眠时间、X轴的显示长度（一般为时间）等等。

1.3）添加通道，给图表控件添加数据通道，数据通道绑定1.1）步骤中保存的通道ID，然后对通道的显示颜色进行配置，保存图表控件到数据库，完成对图表控件的配置过程。

2）在SVG监测画面中绘制虚拟窗口并进行布局配置

虚拟窗口的绘制和布局的方法包括如下步骤：

2.1）在SVG界面的绘图画布中插入虚拟窗口图元；

2.2）对虚拟窗口进行实时监测图表参数配置，配置完成后在虚拟窗口中显示所选图表的模拟图。

所述参数包括关联图标、定义虚拟窗口的大小、位置、关联步骤1）中所述的图表控件配置ID及配置线程优先级等。

2.3）将所绘制虚拟窗口和监测界面分析转化成XML格式的SVG界面文件，其中虚拟窗口按步骤2.4）述格式插入SVG文件中，随SVG界面文件一并保存到数据库中。

2.4）对虚拟窗口进行必要的配置，在不影响快速解析监测界面SVG的前提下，又能提供足够的信息动态显示生成监测图表。

所述虚拟窗口的SVG描述是全部放入<g></g>的一个组合里。例如可以将其定义如下：

<g

……

elementClass="界面布局绘制时插入图元类型，这里是虚拟窗口类型"

chartId="实时监测图表ID"

chartType="实时监测图表类型"

chartPriority="图表线程优先等级"

scale(1)//缩放系数

rotate(0)">//旋转系数

<rectx="图表X坐标"y="图表Y坐标"

width="图表长度"height="图表宽度"/>

……

</g>

3）在SVG监测界面中生成动态实时监测图表

所述SVG监测界面中生成动态实时监测图表的过程包括：

3.1）读取数据库中SVG界面信息；

3.2）提取虚拟窗口的配置信息；

3.3）解析虚拟窗口，获取图形控件ID及相关配置；

3.4）读取数据库中的已配置好的图形控件的配置信息；

3.5）生成图形控件并显示运行。

所述生成图形控件并显示运行的具体步骤包括：

3.5.1）当解析SVG界面到虚拟窗口信息时，调用外部动态链接库中的实时监测图表生成接口；

3.5.2）传递的信息是图表ID、位置、大小、线程优先级等信息以及当前显示场景（Scene）；

3.5.3）图表控件以场景为父亲生成一个部件（Widget）；

3.5.4）此部件定位到所传递信息中的“位置”上，并调整大小为所传递信息中的“大小”；

3.5.5）根据所传信息中的优先级设置线程优先级，并进行各种初始化和绘图刷新功能。

Claims (6)

1.一种在SVG界面中嵌入动态实时监测图表的方法，其特征在于，包括如下步骤：

1）配置实时监测图表控件，并将配置好的图表控件存入数据库中，用唯一的图表控件配置ID区分；

2）在SVG监测界面中绘制虚拟窗口并进行布局配置；

3）在SVG监测界面中生成动态实时监测图表；

步骤2）中所述虚拟窗口的绘制和布局的方法包括如下步骤：

2.1）在SVG界面的绘图画布中插入虚拟窗口图元；

2.2）对虚拟窗口进行实时监测图表参数配置，配置完成后在虚拟窗口中显示所选图表的模拟图；

2.3）将所绘制虚拟窗口和监测界面分析转化成XML格式的SVG界面文件，其中虚拟窗口按步骤2.4）所述格式插入SVG界面文件中，随SVG界面文件一并保存到数据库中；

2.4）对虚拟窗口进行配置，在不影响快速解析监测界面SVG的前提下，又能提供足够的信息动态显示生成监测图表；

所述格式为虚拟窗口的SVG描述全部放入<g></g>的一个组合里。

2.根据权利要求1所述的在SVG界面中嵌入动态实时监测图表的方法，其特征在于，所述控件包括图表标题、类型、通道数、通道关联数据点、显示坐标轴单位和刷新休眠时间。

3.根据权利要求1所述的在SVG界面中嵌入动态实时监测图表的方法，其特征在于，步骤1）中所述实时监测图表控件配置的过程包括：

1.1）编辑通道，生成唯一标示的通道ID号；关联通道的数据来源，编辑数据通道名称及描述，然后保存到数据库中，供实时监测图表控件调用；

1.2）编辑图表，生成唯一标示的图表控件配置ID号，选择图表的类型，根据所选择的图表类型，生成相应的配置选项；

1.3）添加通道，给图表控件添加数据通道，数据通道绑定1.1）步骤中保存的通道ID，然后对通道的显示颜色进行配置，保存图表控件到数据库，完成对图表控件的配置过程。

4.根据权利要求1所述的在SVG界面中嵌入动态实时监测图表的方法，其特征在于，步骤2.2）中所述参数配置包括定义虚拟窗口的大小及位置、关联步骤1）中所述的图表控件配置ID及配置线程优先级。

5.根据权利要求1所述的在SVG界面中嵌入动态实时监测图表的方法，其特征在于，步骤3）中所述SVG监测界面中生成动态实时监测图表的过程包括：

3.1）读取数据库中SVG界面文件；

3.2）提取虚拟窗口的配置信息；

3.3）解析虚拟窗口，获取图表控件配置ID及相关配置；

3.4）读取数据库中的已配置好的图表控件的配置信息；

3.5）生成图表控件并显示运行。

6.根据权利要求5所述的在SVG界面中嵌入动态实时监测图表的方法，其特征在于，步骤3.5）中所述生成图表控件并显示运行的具体步骤包括：

3.5.1）当解析到SVG界面虚拟窗口信息时，调用外部动态链接库中的实时监测图表生成接口；

3.5.2）传递的信息是图表控件配置ID、位置、大小、线程优先级信息以及当前显示场景；

3.5.3）图表控件以场景为父亲生成一个部件；

3.5.4）此部件定位到所传递信息中的“位置”上，并调整大小为所传递信息中的“大小”；

3.5.5）根据所传递信息中的优先级设置线程优先级，并进行各种初始化和绘图刷新功能。