CN108089857A - 一种工业web实时监测页面的生成方法 - Google Patents

Abstract

本发明公开了一种工业web实时监测页面的生成方法，所述生成方法包括：增加用于生成web页面的对应输入接口；在组态系统生成组态页面的同时，自动获取相关组态图元；根据组态图元的类别，将其转换为对应的SVG图元；获取与SVG图元关联的变量名称，通过webSocket协议接口获取实时数据；通过SVG事件的关联响应,采用javascript脚本进行数据调用；定义SVG的事件，在事件函数中定时调用实时数据，并赋值给对应的SVG图元显示；重复上述步骤，即可完成整个工程的web页面生成。利用本发明，可有效解决采用传统ActiveX控件嵌入方式发布的代码重复编写、浏览器不兼容、系统不安全等诸多问题。

Description

一种工业web实时监测页面的生成方法

技术领域

本发明涉及一种页面的生成方法，尤其涉及一种工业web实时监测页面的生成方法。

背景技术

现有的工业监控或测控系统中，一般采用两种模式，一种是基于C/S（客户端/服务端）的模式，一种是基于B/S(浏览器/服务器)的方式，在目前的现有技术下，原有组态软件及监测软件鉴于响应速度、页面组态绘制、页面刷新的技术局限性，一般均以C/S模式居多。

在以上的系统中，考虑到C++语言在底层设备通信的优越性，绝大部分系统都采用C++语言编程来实现，比如实现图形组态系统、运行系统、数据采集系统等，随着智能化水平的不断深入，现场对网络分布式发布的要求也越来越高，为将组态的页面系统发布为可以浏览的WEB页面，在WINDOWS系统下，一般采用类似IIS+ActiveX来进行WEB发布。

ActiveX 是一个开放的集成平台,为开发人员、 用户和 Web生产商提供了一个快速而简便的在 Internet 和 Intranet 创建程序集成和内容的方法。ActiveX插件以前也叫做OLE控件或OCX控件，它是一些软件组件或对象，可以将其插入到WEB网页或其它应用程序中。

当前的组态软件中为将组态的监控画面，如系统接线图、系统流程图、业务逻辑管理图、四遥数据等画面发布出去供第三方如浏览器客户端访问，需将相关画面编辑发布为OCX控件，即ActiveX 控件，然后将控件插入到HTML页面中进行发布，以实现网络浏览的功能。

这个方式的优点是在语言方面，只要采用原有C++即可编辑完成，不用采用其他脚本语言来实现交互，但由于浏览器的兼容性问题，不同浏览器对控件的兼容性支持不一，实用性不容乐观，况且在安全性方面诟病诸多，某种程度上成为各种非法代码的温床，随着工控安全意识的不断深入，越来越不能为用户所接受。

发明内容

为克服现有技术的不足及存在的问题，本发明提供一种工业web实时监测页面的生成方法，以解决采用传统ActiveX控件嵌入方式发布的代码重复编写、浏览器不兼容、系统不安全等诸多问题，实现了原有组态或测控类软件的web页面生成，从而可实现传统电力组态软件具有组态页面发布的功能。

本发明是通过以下技术方案实现的：一种工业web实时监测页面的生成方法，应用于工业监控/测控系统中，所述工业监控/测控系统包括有相互连接的组态系统和数据采集系统，其特征在于，所述生成方法包括：

S1、在现有的工业测控软件系统中增加用于生成web页面的对应输入接口；

S2、在组态系统生成组态页面的同时，自动获取相关组态图元；

S3、根据组态图元的类别，将其转换为对应的SVG图元；

S4、获取与SVG图元关联的变量名称，通过webSocket协议接口获取实时数据；

S5、通过SVG事件的关联响应,采用javascript脚本进行数据调用；

S6、定义SVG的事件，在事件函数中定时调用步骤S5中的实时数据，并赋值给对应的SVG图元显示，以实现页面的动态生成和数据的自动更新；

S7、重复上述步骤S2-S6，即可完成整个工程的web页面生成。

优选地，所述步骤S3中，根据组态图元的类别，转换为对应的SVG图元的具体步骤包括：

S31、将获取的图元的长度和高度数值参数赋值给SVG图元的width 和height 参数，并填写SVG的版本信息，确保SVG图元的完整性；

S32、 根据组态系统中常用的图元编制不同的SVG图元模型，以供调用绘制；

S33、根据原图元类型调用不同的SVG图元模型，并根据组态系统图元的坐标值位置赋值给新绘制的SVG图元。

较佳地，所述组态图元的类别包括有文本类、按钮类以及图像类。

优选地，所述步骤S4中获取实时数据的具体步骤包括：

S41、在数据采集系统中建立套接字进行客户端连接侦听，根据规范建立webSocket服务器，定时解析客户端发出的握手请求，并产生应答信息返回给客户端，从而在客户端和服务器之间建立连接通道；

S42、浏览器客户端根据服务器的IP地址及端口号连接到服务器端；

S43、通过建立好的Socket通道，进行数据的读写操作，从而实现实时数据的获取。

进一步地，所述生成方法还包括：

S8、在完成整个工程的web页面生成后，根据原工程的画面链接关系，获取各按钮或画面的链接关系，并采用超链接的关系在web页面中生成该链接；将该链接导出在一个自定义的文件夹中，并在文件夹中生成对应的首页文件；

S9、完成以上步骤后，在浏览器中通过访问所述文件夹中的首页文件即可达到访问实际项目的web页面效果。

与现有技术相比，本发明提供的一种工业web实时监测页面的生成方法具有以下优点：

（1）具有快速、简便生成web页面的特点；

（2）抛弃传统的ActiveX 控件发布页面方式，有效避免了代码的重复编写、并降低了网络安全风险，并有效提高了系统的兼容性和可用性；

（3）高度利用了现有的组态系统代码，在保证系统组态页面便捷性的同时，还可实现使得传统电力组态软件具有组态页面发布的功能。

附图说明

图1是本发明实施例中所述工业监控/测控系统的结构示意图。

图2是本发明实施例中所述生成方法的流程示意图。

图3是本发明所述生成方法其中一个具体实施例的简要流程示意图。

具体实施方式

为了便于本领域技术人员的理解，以下结合附图和具体实施例对本发明作进一步详细描述。

本发明提供的一种工业web实时监测页面的生成方法，是一种灵活、便捷的页面生成方式，其通过对原有代码进行简单的改造即可实现工业web实时监测画面的生成，其主要思路是通过对原组态代码中图元进行重构并按图元特征采用SVG代替图元，利用webSocket做通信协议处理、采用javascript脚本进行数据调用，即采用webSocket实现监测系统的数据传输、SVG实现监测画面的绘制与重构，采用javascript脚本进行数据调用，也就是通过采用“webSocket+SVG+javascript+工业监测软件”来实现新web实时监测页面的生成。其中，WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信，是服务器主动发送信息给客户端。WebSocket协议通过浏览器发出websocket连线请求，然后服务器发出回应，这个过程通常称为“握手” (handshaking)。在WebSocket API，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就可形成了一条快速通道。而SVG（可缩放矢量图形）是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式、是一个开放标准，SVG在放大或改变尺寸的情况下其图形质量不会有所损失。由于SVG是XML文件，SVG图像可以用任何文本编辑器创建。

本发明的生成方法的详细实现过程如下：

如附图1-2所示，一种工业web实时监测页面的生成方法，应用于工业监控/测控系统中，所述工业监控/测控系统包括有相互连接的组态系统和数据采集系统，所述生成方法包括：

S1、在现有的工业测控软件系统中增加用于生成web页面的对应输入接口；本实施例中，所述工业测控软件系统，主要是指现有采用C/S模式开发的工业测控软件系统；

S2、在组态系统生成组态页面的同时，自动获取相关组态图元；

S3、根据组态图元的类别，将其转换为对应的SVG图元；本实施例中，所述组态图元的类别包括有文本类、按钮类以及图像类；

S4、获取与SVG图元关联的变量名称，通过webSocket协议接口获取实时数据；

S5、通过SVG事件的关联响应,采用javascript脚本进行数据调用；

S6、定义SVG的事件，在事件函数中定时调用步骤S5中的实时数据，并赋值给对应的SVG图元显示，以实现页面的动态生成和数据的自动更新；

S7、重复上述步骤S2-S6，即可完成整个工程的web页面生成。

作为优选的实施例，所述生成方法还包括：

S8、在完成整个工程的web页面生成后，根据原工程的画面链接关系，获取各按钮或画面的链接关系，并采用超链接的关系在web页面中生成该链接；将该链接导出在一个自定义的文件夹中，并在文件夹中生成对应的首页文件；

S9、完成以上步骤后，在浏览器中通过访问所述文件夹中的首页文件即可达到访问实际项目的web页面效果。

在其中一个优选的实施例中，所述步骤S3中，根据组态图元的类别，转换为对应的SVG图元的具体步骤包括：

S31、将获取的图元的长度和高度数值参数赋值给SVG图元的width 和height 参数，并填写SVG的版本信息，确保SVG图元的完整性；

S32、 根据组态系统中常用的图元编制不同的SVG图元模型，以供调用绘制；

S33、根据原图元类型调用不同的SVG图元模型（如绘制矩形、线条、文本等），并根据组态系统图元的坐标值位置赋值给新绘制的SVG图元，也就是说，通过获取原组态系统的图元的坐标值位置后，将该坐标值位置赋值给与其对应的SVG图元，以确保SVG图元的坐标值与其对应的原组态系统的图元的坐标值相同。

在其中一个优选的实施例中，所述步骤S4中获取实时数据的具体步骤包括：

S41、在数据采集系统中建立套接字进行客户端连接侦听，根据规范建立webSocket服务器，定时解析客户端发出的握手请求，并产生应答信息返回给客户端，从而在客户端和服务器之间建立连接通道；

S42、浏览器客户端根据服务器的IP地址及端口号连接到服务器端；

S43、通过建立好的Socket通道，进行数据的读写操作，从而实现实时数据的获取。

如附图3所示，在其中一个具体的实施中，所述生成方法包括：

S10、在现有的工业测控软件系统中增加用于生成web页面的对应输入接口；

S20、获取当前组态画面中的全部图元；

S30、逐个获取各图元的类别（如文本类、按钮类、图像类等），并根据图元的类别，转换为对应的SVG图元；

S40、获取与SVG图元关联的变量名称；

S50、通过webSocket协议接口获取实时数据；

S60、生成对应的javascript脚本，将其嵌入到新生成的web页面中，以调用实时数据；

S70、定义SVG的事件，在事件函数中定时调用步骤S5中的实时数据，并赋值给对应的SVG图元显示，以实现页面的动态生成和数据的自动更新；

S80、以上步骤完成了基本的WEB页面生成，若需完成整个工程的全部页面，则重复上述步骤S20-S70，即可完成整个工程的web页面生成。

作为优选，在完成整个工程的web页面生成后，根据原工程的画面链接关系，获取各按钮或画面的链接关系，并采用超链接的关系在web页面中生成该链接；将该链接导出在一个自定义的文件夹中，并在文件夹中生成对应的首页文件；完成以上步骤后，在浏览器中通过访问所述文件夹中的首页文件即可达到访问实际项目的web页面效果。

与现有技术相比，本发明实施例提供的方法具有以下优点：

（1）具有快速、简便生成web页面的特点；

（2）抛弃传统的ActiveX 控件发布页面方式，有效避免了代码的重复编写、并降低了网络安全风险，并有效提高了系统的兼容性和可用性；

（3）高度利用了现有的组态系统代码，在保证系统组态页面便捷性的同时，还可实现使得传统电力组态软件具有组态页面发布的功能。

上述实施例为本发明的较佳的实现方式，并非是对本发明的限定，在不脱离本发明的发明构思的前提下，任何显而易见的替换均在本发明的保护范围之内。

Claims (5)

1.一种工业web实时监测页面的生成方法，应用于工业监控/测控系统中，所述工业监控/测控系统包括有相互连接的组态系统和数据采集系统，其特征在于，所述生成方法包括：

S1、在现有的工业测控软件系统中增加用于生成web页面的对应输入接口；

S2、在组态系统生成组态页面的同时，自动获取相关组态图元；

S3、根据组态图元的类别，将其转换为对应的SVG图元；

S4、获取与SVG图元关联的变量名称，通过webSocket协议接口获取实时数据；

S5、通过SVG事件的关联响应,采用javascript脚本进行数据调用；

S6、定义SVG的事件，在事件函数中定时调用步骤S5中的实时数据，并赋值给对应的SVG图元显示，以实现页面的动态生成和数据的自动更新；

S7、重复上述步骤S2-S6，即可完成整个工程的web页面生成。

2.根据权利要求1所述的生成方法，其特征在于，所述步骤S3中，根据组态图元的类别，转换为对应的SVG图元的具体步骤包括：

S31、将获取的图元的长度和高度数值参数赋值给SVG图元的width 和height 参数，并填写SVG的版本信息，确保SVG图元的完整性；

S32、 根据组态系统中常用的图元编制不同的SVG图元模型，以供调用绘制；

S33、根据原图元类型调用不同的SVG图元模型，并根据组态系统图元的坐标值位置赋值给新绘制的SVG图元。

3.根据权利要求2所述的生成方法，其特征在于：所述组态图元的类别包括有文本类、按钮类以及图像类。

4.根据权利要求1所述的生成方法，其特征在于：所述步骤S4中获取实时数据的具体步骤包括：

S41、在数据采集系统中建立套接字进行客户端连接侦听，根据规范建立webSocket服务器，定时解析客户端发出的握手请求，并产生应答信息返回给客户端，从而在客户端和服务器之间建立连接通道；

S42、浏览器客户端根据服务器的IP地址及端口号连接到服务器端；

S43、通过建立好的Socket通道，进行数据的读写操作，从而实现实时数据的获取。

5.根据权利要求1～34任意一项所述的生成方法，其特征在于，所述生成方法还包括：

S8、在完成整个工程的web页面生成后，根据原工程的画面链接关系，获取各按钮或画面的链接关系，并采用超链接的关系在web页面中生成该链接；将该链接导出在一个自定义的文件夹中，并在文件夹中生成对应的首页文件；

S9、完成以上步骤后，在浏览器中通过访问所述文件夹中的首页文件即可达到访问实际项目的web页面效果。