一种嵌入式Web组态图元的实现方法与流程

本发明属于web图元应用领域，具体涉及一种嵌入式web组态图元的实现方法。

背景技术：

组态是使用软件工具对计算机及软件的各种资源进行配置，达到使计算机或软件按照预先设置，自动执行特定行为，满足使用者要求的目的。

传统组态图元一般被划分成三类简单的对象：线、填充形状和文本。每个简单的对象有影响其外观的属性。基本属性包括：线的颜色、填充颜色、高度、宽度、取向、位置移动等。属性可以是静态的，也可以是动态的。静态属性在系统投入运行后保持不变，与原来组态是一致。动态属性随变量表达式值的变化而实时改变。最终在运行环境下根据其配置属性被分类解析成不同的gdi绘图指令，从而驱动显示为不同的图形元素。

传统组态图元存在配置结构固定、动态属性变量范围局限、图形显示效果单一等不足；配置属性不能按需动态增加，无法适应前端展示信息频繁更新；动态属性变量选择范围较小，一般只能从系统实时库选取；可利用的专业图形库较少，对于多功能曲线等展示需要难以满足。

技术实现要素：

针对现有技术中的上述不足，本发明提供的一种嵌入式web组态图元的实现方法解决了传统组态图元存在的问题。

为了达到上述发明目的，本发明采用的技术方案为：一种嵌入式web组态图元的实现方法，包括以下步骤：

s1、通过qt模块的qwebchannel组件将继承自qobject核心的c++对象进行注册，并暴露给html页面，在html页面中调用qwebchannel.js组件，建立html页面对c++对象的调用权；

s2、通过c++主程序定义通信中间件的c++对象，并将通信中间件的c++对象作为与html页面中javascript脚本双向通讯的载体；

s3、将qt模块的qwebengineview组件和qwebchannel组件引入c++主程序中，将通信中间件的c++对象注册至qwebchannel组件中，并设置qwebengineview组件的通信信道为qwebchannel；

s4、在html页面中使用qt模块的qwebchannel.js组件，并将其绑定至qwebchannel组件的通信中间件；

s5、通过javascript脚本声明connectsignal函数，并定义通信中间件的c++对象的信号接收函数和信号处理函数；

s6、以通信信道qwebchannel为基础，c++主程序通过通信中间件的c++对象发送信号，并调用信号接收函数和信号处理函数，完成c++主程序到html页面中javascript脚本的通信；

s7、通过javascript脚本调用c++主程序中通信中间件的c++对象函数jssendmessage，完成html页面中javascript脚本到c++主程序的通讯；

s8、使用步骤s1-s7的方法实现监控系统中c++主程序与html页面中javascript脚本的双向通信；

s9、选择监控系统的人机界面组态工具ipm中的web曲线控件，通过web曲线控件设置web曲线组态图元属性，并按设定属性驱动显示web组态图元；

s10、配置web组态图元的设置参数和变量数据信息，并按设置参数和变量数据信息对web组态图元进行展示。

进一步地，所述步骤s2中通信中间件继承自qobject核心，所述c++对象与html页面中javascript脚本进行通讯的方法为：在html页面中连接c++signal函数与javascript脚本函数的方式以及在html页面中调用c++q_invokable修饰函数的方式。

进一步地，所述步骤s2中通信中间件包括jssendmessage接口、sigsendconfig信号接口和sigsenddata信号接口；所述jssendmessage接口用于嵌入式web图元发送消息到监控系统人机界面主程序，所述sigsendconfig信号接口用于监控系统人机界面主程序发送图元配置信息到web图元，所述sigsenddata信号接口用于监控系统人机界面主程序发送变量数据信息到web图元。

进一步地，所述步骤s6包括以下分步骤：

s61、以通信信道qwebchannel为基础，c++主程序通过通信中间件的c++对象发送信号，并采用qt信号槽机制触发信号的发送；

s62、通过html页面接收信号，并调用信号接收函数和信号处理函数，完成c++主程序到html页面中javascript脚本的通信。

进一步地，所述步骤s61中信号包括web组态图元的设置参数和变量数据信息。

进一步地，所述步骤s7包括以下分步骤：

s71、定义html页面中的onload函数，向监控系统人机界面c++主程序发送html页面加载完成的消息；

s72、调用通信中间件的jssendmessage接口，完成html页面加载完成的消息发送，完成html页面中javascript脚本到c++主程序的通讯。

进一步地，所述步骤s9中web曲线组态图元属性包括：webhtml页面的url和静态配置参数。

进一步地，所述步骤s10中设置参数包括曲线展示功能参数、曲线点配置参数、坐标轴设置参数、坐标空间美化参数、曲线颜色参数和曲线数据拾取参数。

进一步地，所述步骤s10包括以下分步骤：

s101、配置web组态图元的设置参数和变量数据信息；

s102、在index.html文档中引入hcharts.js库，动态传入web组态图元的设置参数，并根据配置好的设置参数，对hcharts.js库进行设置；

s103、动态传入变量数据信息，根据设置好的hcharts.js库和变量数据信息对web组态图元进行展示。

进一步地，所述设置参数和变量数据信息的格式均为json格式。

本发明的有益效果为：

(1)本发明基于javascript和htmlcanvas技术实现，具有美观的界面交互效果和强大的功能，能构建高体验的组态界面。

(2)本发明基于qt的qwebchannel技术，实现了c++和html/javascript脚本的双向通信，同时实现c++和html/javascript脚本的解耦，方便开发人员的分工及系统集成，从而将c++与html、javascript脚本和css结合起来，构建出一个混合应用，使web组态图元可以无缝嵌入到监控系统人机界面。

(3)本发明提出了一种嵌入式web组态图元的实现方法，从而使图元的属性可动态配置并解析，能够适应前端展示信息需要频繁更新的生产系统；动态属性变量数据灵活，支持json格式的任何第三方数据；并可采用互联网资源中的各种图形组件库。

附图说明

图1为本发明提出的一种嵌入式web组态图元的实现方法流程图。

具体实施方式

下面对本发明的具体实施方式进行描述，以便于本技术领域的技术人员理解本发明，但应该清楚，本发明不限于具体实施方式的范围，对本技术领域的普通技术人员来讲，只要各种变化在所附的权利要求限定和确定的本发明的精神和范围内，这些变化是显而易见的，一切利用本发明构思的发明创造均在保护之列。

下面结合附图详细说明本发明的实施例。

如图1所示，一种嵌入式web组态图元的实现方法，包括以下步骤：

s1、通过qt模块的qwebchannel组件将继承自qobject核心的c++对象进行注册，并暴露给html页面，在html页面中调用qwebchannel.js组件，建立html页面对c++对象的调用权。

s2、通过c++主程序定义通信中间件的c++对象，并将通信中间件的c++对象作为与html页面中javascript脚本双向通讯的载体。

s3、将qt模块的qwebengineview组件和qwebchannel组件引入c++主程序中，将通信中间件的c++对象注册至qwebchannel组件中，并设置qwebengineview组件的通信信道为qwebchannel。

在本实施例中，qwebengineview组件作为html页面展示的宿主控件，可以嵌入到监控系统人机界面主窗口中。qwebchannel组件作为html页面和监控系统人机界面主程序的通信信道，承担了具体的底层通信任务。将通信中间件注册到qwebchannel中，以便于监控系统人机界面主程序和html页面通过访问通信中间件的接口和信号，来实现交互。

s4、在html页面中使用qt模块的qwebchannel.js组件，并将其绑定至qwebchannel组件的通信中间件。

在本实施例中，webchannel.js库包装了内部通信的接口，可以供用户透明化访问。通过在web中html引入并使用qt的qwebchannel.js组件库，作为html页面和监控系统人机界面主程序的通信桥梁。

s5、通过javascript脚本声明connectsignal函数，并定义通信中间件的c++对象的信号接收函数和信号处理函数。

s6、以通信信道qwebchannel为基础，c++主程序通过通信中间件的c++对象发送信号，并调用信号接收函数和信号处理函数，完成c++主程序到html页面中javascript脚本的通信。

在本实施例中，c++主程序通过cbridge中间件发送消息到html页面。c++主程序采用qt信号槽机制具体触发消息的发送。c++主程序的发送到html的数据分为配置信息和数据信息两部分，配置信息用来设置web组态图元的外观展示样式等，数据信息用来设置web组态图元的展示内容。

s7、通过javascript脚本调用c++主程序中通信中间件的c++对象函数jssendmessage，完成html页面中javascript脚本到c++主程序的通讯。

在本实施例中，在html页面的onload()函数中，发送消息到监控系统人机界面主程序，表示html页面加载完成。采用调用已经注册的通信中间件的jssendmessage接口方式，完成html页面加载完成的消息发送。监控系统人机界面主程序收到html页面加载完成消息后，将有关变量数据发送到web嵌入式图元中。

s8、使用步骤s1-s7的方法实现监控系统中c++主程序与html页面中javascript脚本的双向通信。

s9、选择监控系统的人机界面组态工具ipm中的web曲线控件，通过web曲线控件设置web曲线组态图元属性，并按设定属性驱动显示web组态图元；

s10、配置web组态图元的设置参数和变量数据信息，并按设置参数和变量数据信息对web组态图元进行展示。

所述步骤s2中通信中间件继承自qobject核心，所述c++对象与html页面中javascript脚本进行通讯的方法为：在html页面中连接c++signal函数与javascript脚本函数的方式以及在html页面中调用c++q_invokable修饰函数的方式。

所述步骤s2中通信中间件包括jssendmessage接口、sigsendconfig信号接口和sigsenddata信号接口；所述jssendmessage接口用于嵌入式web图元发送消息到监控系统人机界面主程序，所述sigsendconfig信号接口用于监控系统人机界面主程序发送图元配置信息到web图元，所述sigsenddata信号接口用于监控系统人机界面主程序发送变量数据信息到web图元。

所述步骤s6包括以下分步骤：

s61、以通信信道qwebchannel为基础，c++主程序通过通信中间件的c++对象发送信号，并采用qt信号槽机制触发信号的发送；

s62、通过html页面接收信号，并调用信号接收函数和信号处理函数，完成c++主程序到html页面中javascript脚本的通信。

所述步骤s61中信号包括web组态图元的设置参数和变量数据信息。

所述步骤s7包括以下分步骤：

s71、定义html页面中的onload函数，向监控系统人机界面c++主程序发送html页面加载完成的消息；

s72、调用通信中间件的jssendmessage接口，完成html页面加载完成的消息发送，完成html页面中javascript脚本到c++主程序的通讯。

所述步骤s9中web曲线组态图元属性包括：webhtml页面的url和静态配置参数。

所述步骤s10中设置参数包括曲线展示功能参数、曲线点配置参数、坐标轴设置参数、坐标空间美化参数、曲线颜色参数和曲线数据拾取参数。

所述步骤s10包括以下分步骤：

s101、配置web组态图元的设置参数和变量数据信息；

s102、在index.html文档中引入hcharts.js库，动态传入web组态图元的设置参数，并根据配置好的设置参数，对hcharts.js库进行设置；

s103、动态传入变量数据信息，根据设置好的hcharts.js库和变量数据信息对web组态图元进行展示。

所述设置参数和变量数据信息的格式均为json格式。

本发明的有益效果为：

(1)本发明基于javascript和htmlcanvas技术实现，具有美观的界面交互效果和强大的功能，能构建高体验的组态界面。

(2)本发明基于qt的qwebchannel技术，实现了c++和html/javascript脚本的双向通信，同时实现c++和html/javascript脚本的解耦，方便开发人员的分工及系统集成，从而将c++与html、javascript脚本和css结合起来，构建出一个混合应用，使web组态图元可以无缝嵌入到监控系统人机界面。

(3)本发明提出了一种嵌入式web组态图元的实现方法，从而使图元的属性可动态配置并解析，能够适应前端展示信息需要频繁更新的生产系统；动态属性变量数据灵活，支持json格式的任何第三方数据；并可采用互联网资源中的各种图形组件库。