CN108447108A - 码头设备监控画面解析系统及方法 - Google Patents

Abstract

本发明公开了一种设备监控画面解析系统及方法，该系统包括C/S软件端、浏览器端、SVG生成器、SVG解析器。其中，SVG生成器进一步包括Direct2D渲染器和渲染器相关接口，SVG解析器进一步包括子解析器和动画生成器。SVG生成器设置于C/S软件端，用以生成Html5可识别的SVG画面、SVG动画的相关参数、以及生成动画的界面，SVG解析器配置在浏览器端，用以解析SVG画面、读入SVG动画相关参数、从后台获取数据点并根据数据点使SVG画面动画。本发明采用全新的B/S架构实现模式，不仅可以减轻和简化服务端和客户端的访问形式，而且可以很好的与现有的架构进行兼容。

Description

码头设备监控画面解析系统及方法

技术领域

本发明涉及一种图像处理系统及方法，更具体地说，涉及一种码头设备监控画面解析系统及方法。

背景技术

SCADA(Supervisory Control And Data Acquisition)系统，即数据采集与监视控制系统，是以计算机为基础的DCS与电力自动化监控系统。它应用领域很广，可以应用于电力、冶金、石油、化工、燃气、铁路等领域的数据采集与监视控制以及过程控制等诸多领域。

随着技术的发展和社会的发展，基于Web页面的Scada系统的需要越来越多，WebScada基于Html5的技术，可以在平板电脑，iPhone及安卓平板在内的多种设备上应用。

随着自动化码头的发展，数据监控平台轻量化需求被越来越多的提及。然而C/S架构的模式决定了它具有厚重的服务端和客户端的部署环境，而且很难扩展到移动端。

发明内容

针对现有技术中存在的上述问题，本发明的目的是提供一种码头设备监控画面解析系统及方法。

为实现上述目的，本发明采用如下技术方案：

一种码头设备监控画面解析系统，包括C/S软件端、浏览器端、SVG生成器、SVG解析器。其中，SVG生成器进一步包括Direct2D渲染器和渲染器相关接口，SVG解析器进一步包括子解析器和动画生成器。SVG生成器设置于C/S软件端，用以生成Html5可识别的SVG画面、SVG动画的相关参数、以及生成动画的界面，SVG解析器配置在浏览器端，用以解析SVG画面、读入SVG动画相关参数、从后台获取数据点并根据数据点使SVG画面动画。

进一步地，渲染器相关接口包括延时渲染队列和渲染节点、延时渲染器、GDC接口、CDC接口。

进一步地，SVG生成器还包括SVG界面配置单元、附加功能单元、按钮事件响应单元、提示消息显示单元、打开页面事件单元以及关闭页面事件单元。

进一步地，SVG解析器的子解析器还包括缩放解析器、位移解析器、旋转解析器、Symbol解析器、数组解析器、字符串解析器。子解析器将动画信息以附加信息的形式保留在SVG画面中，包括缩放、位移、旋转、数组动画元素，以及相关的缩放参数最大值、缩放最小值、绑定顶点信息。

进一步地，SVG解析器的动画生成器还包括定时器和Ajax数据接口。定时器每隔500毫秒将所有用到的数据整理好，通过Ajax数据接口将请求发送到后台的服务器中，并返回每个数据点的当前值。

为实现上述目的，本发明还采用如下技术方案：

一种码头设备监控画面解析方法，包括：在C/S软件端和浏览器端额外设置SVG生成器和SVG解析器；在SVG生成器内进一步设置Direct2D渲染器和渲染器相关接口；在SVG解析器内进一步设置子解析器和动画生成器；将SVG生成器设置于C/S软件端，用以生成Html5可识别的SVG画面、SVG动画的相关参数、以及生成动画的界面；将SVG解析器配置在浏览器端，用以解析SVG画面、读入SVG动画相关参数、从后台获取数据点并根据数据点使SVG画面动画。

进一步地，在渲染器相关接口内设置延时渲染队列和渲染节点、延时渲染器、GDC接口、CDC接口。

进一步地，在SVG生成器内设置SVG界面配置单元、附加功能单元、按钮事件响应单元、提示消息显示单元、打开页面事件单元以及关闭页面事件单元。

进一步地，在SVG解析器的子解析器内设置缩放解析器、位移解析器、旋转解析器、Symbol解析器、数组解析器、字符串解析器。子解析器将动画信息以附加信息的形式保留在SVG画面中，包括缩放、位移、旋转、数组动画元素，以及相关的缩放参数最大值、缩放最小值、绑定顶点信息。

进一步地，在SVG解析器的动画生成器内设置定时器和Ajax数据接口。定时器每隔500毫秒将所有用到的数据整理好，通过Ajax数据接口将请求发送到后台的服务器中，并返回每个数据点的当前值。

在上述技术方案中，本发明的码头设备监控画面解析系统及方法采用全新的B/S架构实现模式，不仅可以减轻和简化服务端和客户端的访问形式，而且可以很好的与现有的架构进行兼容。这样一来，同一份工程可以部署在不同的平台中，实现客户端的自由访问。

附图说明

图1是本发明码头设备监控画面解析系统的结构示意图；

图2是图1中SVG生成器的结构示意图；

图3是图1中SVG解析器的结构示意图。

具体实施方式

下面结合附图和实施例进一步说明本发明的技术方案。

如图1所示，本发明首先公开一种码头设备监控画面解析系统，其主要结构包括C/S软件端、浏览器端、SVG生成器、SVG解析器，而本发明的重点在于SVG生成器、SVG解析器在此架构中的应用。

从系统架构上来看，SVG生成器进一步包括Direct2D渲染器、渲染器相关接口、SVG界面配置单元、附加功能单元、按钮事件响应单元、提示消息显示单元、打开页面事件单元以及关闭页面事件单元，而渲染器相关接口包括延时渲染队列和渲染节点、延时渲染器、GDC接口、CDC接口。

继续参照图1的系统架构，SVG解析器进一步包括子解析器和动画生成器。SVG解析器的子解析器还包括缩放解析器、位移解析器、旋转解析器、Symbol解析器、数组解析器、字符串解析器。SVG解析器的动画生成器还包括定时器和Ajax数据接口。

从功能上来看，SVG生成器设置于C/S软件端，用以生成Html5可识别的SVG画面、SVG动画的相关参数、以及生成动画的界面，SVG解析器配置在浏览器端，用以解析SVG画面、读入SVG动画相关参数、从后台获取数据点并根据数据点使SVG画面动画。

上述系统架构与现有技术相比，具有以下的优点：

1.继承了C/S框架下的编辑功能，可以方便快捷轻松的将C/S框架下的画面转化为浏览器可以识别的SVG画面。

2.用户无需做关心网页的具体细节，只需将生成界面复制到Web端的目录下，系统即可自动识别网页并与之组合成组态软件网站。

如图2所示，SVG生成器布置在原有的C/S架构上，拓展了原有的C/S架构的Scada软件，可以利用原有的编辑器编辑画面和动画，继承了Scada软件良好的界面风格和动画配置，拓展了一键生成界面，用户只需要选择需要转化为SVG的画面，点击一键生成按钮，就可以根据Scada的配置生成相映的动画。SVG动画还添加了一些附加的功能，比如按钮事件响应，消息提示，打开页面事件，关闭页面事件。

继续参照图2，SVG生成器拓展了Direct2D渲染器的底层，将SVG元素像绘制Direct2D图元一样生成在SVG格式的文件中。在生成中，将所有元素以一棵树的数据结构组织在一起，留有树的深度等关键字，方便生成有缩进，有层次的SVG画面。生成图元时，SVG生成器将动画信息以附加信息的形式保留在SVG画面中，比如缩放、位移、旋转、数组等动画元素，以及相关的缩放参数最大值、缩放最小值、绑定顶点等信息。SVG生成器还对Direct2D渲染器进行了修改，将绘制Direct2D画面改为生成SVG画面文件。

如图3所示，SVG解析器放置在浏览器的前台端口，Html5能够很好地支持SVG元素画面，打开生成器生成的SVG画面，就可以重新显示SVG画面。如果需要显示SVG的动画，则需要JavaScript前台语言的支持，程序读入SVG画面后，本发明设置一个定时器，每隔500毫秒将所有用到的数据整理好，通过Ajax数据接口将请求发送到后台的服务器中，返回每个数据点的当前值。将所有包含附加信息的元素提取出来，根据附加信息的数值，重新定义每个元素的位置、大小、旋转、是否显示、显示何种数值。

对应上述系统架构，本发明的方法具有类似的流程：

1.在C/S软件端和浏览器端额外设置SVG生成器和SVG解析器；

2.在所述SVG生成器内进一步设置Direct2D渲染器和渲染器相关接口；

3.在所述SVG解析器内进一步设置子解析器和动画生成器；

4.将SVG生成器设置于C/S软件端，用以生成Html5可识别的SVG画面、SVG动画的相关参数、以及生成动画的界面；

5.将SVG解析器配置在浏览器端，用以解析SVG画面、读入SVG动画相关参数、从后台获取数据点并根据数据点使SVG画面动画。

综上所述，本发明的码头设备监控画面解析系统及方法具有以下的特点：

1.采用Html5标准规范，该标准在图形动画和手机开发方面，无论是性能还是开发效率都得到大幅提升，并且是目前最为流行的语言。

2.通过Direct2D渲染模块将二进制图形对象解析出来，并以SVG格式保存为文件。

3.根据C/S中已有类找寻SVG对应的关键字，并将属性赋值。

4.C/S中已有类事件解析为SVG树节点事件，再通过javascript脚本定向到后台事件执行过程。

5.将二次开发的脚本迁移到后台程序中，通过javascript脚本定向到后台事件执行过程，并将相关参数传递进去。

6.通过定时器Ajax向服务器后台发送请求并获取数据点值，SVG则根据扩展信息的变化重新定位元素位置。

7.本发明可以将原有C/S架构设计的程序发布为Web应用和手机应用，实现了多平台通用。一方面减少了工程人员制作工程的工作量，另一方面节省了跨平台的研发成本。而且整个系统都是用C#.NET开发，保证了开发平台的一致性，为后续功能的扩展奠定了基础。

本技术领域中的普通技术人员应当认识到，以上的实施例仅是用来说明本发明，而并非用作为对本发明的限定，只要在本发明的实质精神范围内，对以上所述实施例的变化、变型都将落在本发明的权利要求书范围内。

Claims (10)

1.一种码头设备监控画面解析系统，其特征在于，包括：

C/S软件端、浏览器端、SVG生成器、SVG解析器；

所述SVG生成器进一步包括Direct2D渲染器和渲染器相关接口；

所述SVG解析器进一步包括子解析器和动画生成器；

所述SVG生成器设置于C/S软件端，用以生成Html5可识别的SVG画面、SVG动画的相关参数、以及生成动画的界面；

SVG解析器配置在浏览器端，用以解析SVG画面、读入SVG动画相关参数、从后台获取数据点并根据数据点使SVG画面动画。

2.如权利要求1所述的码头设备监控画面解析系统，其特征在于：

所述渲染器相关接口包括延时渲染队列和渲染节点、延时渲染器、GDC接口、CDC接口。

3.如权利要求1所述的码头设备监控画面解析系统，其特征在于：

所述SVG生成器还包括SVG界面配置单元、附加功能单元、按钮事件响应单元、提示消息显示单元、打开页面事件单元以及关闭页面事件单元。

4.如权利要求1所述的码头设备监控画面解析系统，其特征在于：

所述SVG解析器的子解析器还包括缩放解析器、位移解析器、旋转解析器、Symbol解析器、数组解析器、字符串解析器；

所述子解析器将动画信息以附加信息的形式保留在SVG画面中，包括缩放、位移、旋转、数组动画元素，以及相关的缩放参数最大值、缩放最小值、绑定顶点信息。

5.如权利要求1所述的码头设备监控画面解析系统，其特征在于：

所述SVG解析器的动画生成器还包括定时器和Ajax数据接口；

所述定时器每隔500毫秒将所有用到的数据整理好，通过Ajax数据接口将请求发送到后台的服务器中，并返回每个数据点的当前值。

6.一种码头设备监控画面解析方法，其特征在于，包括：

在C/S软件端和浏览器端额外设置SVG生成器和SVG解析器；

在所述SVG生成器内进一步设置Direct2D渲染器和渲染器相关接口；

在所述SVG解析器内进一步设置子解析器和动画生成器；

将SVG生成器设置于C/S软件端，用以生成Html5可识别的SVG画面、SVG动画的相关参数、以及生成动画的界面；

将SVG解析器配置在浏览器端，用以解析SVG画面、读入SVG动画相关参数、从后台获取数据点并根据数据点使SVG画面动画。

7.如权利要求6所述的码头设备监控画面解析方法，其特征在于：

在渲染器相关接口内设置延时渲染队列和渲染节点、延时渲染器、GDC接口、CDC接口。

8.如权利要求6所述的码头设备监控画面解析方法，其特征在于：

在所述SVG生成器内设置SVG界面配置单元、附加功能单元、按钮事件响应单元、提示消息显示单元、打开页面事件单元以及关闭页面事件单元。

9.如权利要求6所述的码头设备监控画面解析方法，其特征在于：

在所述SVG解析器的子解析器内设置缩放解析器、位移解析器、旋转解析器、Symbol解析器、数组解析器、字符串解析器；

所述子解析器将动画信息以附加信息的形式保留在SVG画面中，包括缩放、位移、旋转、数组动画元素，以及相关的缩放参数最大值、缩放最小值、绑定顶点信息。

10.如权利要求6所述的码头设备监控画面解析方法，其特征在于：

在所述SVG解析器的动画生成器内设置定时器和Ajax数据接口；

所述定时器每隔500毫秒将所有用到的数据整理好，通过Ajax数据接口将请求发送到后台的服务器中，并返回每个数据点的当前值。