CN111459501A - 基于SVG的Web组态画面存储与展示系统和方法及介质 - Google Patents

Abstract

本发明提供一种基于SVG的Web组态画面存储与展示方法和系统，通过拖拽配置的方式搭建监控画面，将监控画面对应的画面元素内容生成XML格式文件，生成画面脚本，将XML格式文件、画面脚本保存并发送至后台服务；后台服务接收XML格式文件、画面脚本，将XML格式文件、画面脚本转换为能够在浏览器中运行的HTML页面；画面运行态加载监控画面，在浏览器中渲染画面元素，向后台服务进行监控画面的注册、监控画面的数据刷新，响应用户交互事件，对画面元素进行刷新。实现浏览器环境下的工业监控HMI软件，提高企业生产效率，降低企业在实施工业监控项目中的成本，最终为企业管理层提供直观、全面、准确的决策依据。

Description

基于SVG的Web组态画面存储与展示系统和方法及介质

技术领域

本发明涉及工业监控领域，具体地，涉及一种基于SVG的Web组态画面存储与展示系统和方法及介质。

背景技术

在传统的SCADA系统中，HMI部分都是以CS模式进行部署和开发，但是随着BS应用和移动应用等的不断普及，传统的HMI软件也在向Web端迁移。随着Web相关技术最近几年非常迅速的发展，HTML5、Javascript、CSS3以及WebGL等相关标准也在不断完善，其中SVG技术使得可以在浏览器引擎中展现矢量图形，并且能够以对象模型的形式来组织画面中的各种元素。基于Web技术的HMI系统使用非常方便，可以说随时随地能够对用户所关心的资产进行监控，提供给管理层决策依据，对于企业来说能够真正提升生产效率，大幅降低成本。

Web HMI系统无需在客户端安装任何软件或插件，用户通过无处不在的浏览器端便可以直接使用，同时可以无缝扩展到移动端；Web HMI系统能够实现跨平台部署，可以在Windows、Linux和iOS、Android等系统中运行；Web HMI系统能够很方便的实现集中管理，通过页面间的链接与嵌入可以和已有的各种信息化系统进行集成；Web HMI系统更加易于使用，对于众多需要在工程现场进行项目实施的企业来说，基于浏览器的HMI系统更易于上手，能非常大程度降低对实施人员的培训成本。

专利文献CN108509192A公开了一种基于组态软件SVG发布服务的Web显示方法，在组态软件原有图形引擎的基础上将原先的图形界面转换为SVG格式并发布到SVG发布服务器上，浏览器从SVG发布服务器上下载SVG图形文件和相应脚本，在Web浏览器中进行展示，用户在Web浏览器中与图形的人机交互将由JavaScript脚本实现。该方法可以为降低Web程序开发的工作量，图形数据定义比较简单，只需在组态软件中进行定义即可，工作量相对较少，扩展了Web端的使用范围。但是上述专利文献无法让用户直接在浏览器环境中通过拖拽方式制作组态画面，编写事件响应脚本以及对图形元素进行关联点操作；并且也没有说明，如何在组态软件将画面转换为SVG格式的图形表示，因为每个组态软件定义的格式都不相同，所述转换过程将会非常复杂，如果处理不好，很容易出现画面不一致的情况。

专利文献CN108089857A公开了一种工业web实时监测页面的生成方法，所述生成方法包括：增加用于生成web页面的对应输入接口；在组态系统生成组态页面的同时，自动获取相关组态图元；根据组态图元的类别，将其转换为对应的SVG图元；获取与SVG图元关联的变量名称，通过webSocket协议接口获取实时数据；通过SVG事件的关联响应,采用javascript脚本进行数据调用；定义SVG的事件，在事件函数中定时调用实时数据，并赋值给对应的SVG图元显示；重复上述步骤，即可完成整个工程的web页面生成。可有效解决采用传统ActiveX控件嵌入方式发布的代码重复编写、浏览器不兼容、系统不安全等诸多问题。但是上述专利文献仍然需要在C/S客户端软件中制作组态画面，无法通过拖拽配置的方式直接在浏览器中搭建组态画面。只是应用了SVG标准中的各种图形展示，并不能有效扩充其他展示形态，比如趋势曲线控件、视频展示控件和实时报警列表控件等。

发明内容

针对现有技术中的缺陷，本发明的目的是提供一种基于SVG的Web组态画面存储与展示系统和方法及介质。

根据本发明提供的一种基于SVG的Web组态画面存储与展示系统，包括画面设计器模块、后台服务模块、画面运行态模块；

画面设计器模块：通过拖拽配置的方式搭建监控画面，将监控画面对应的画面元素内容生成XML格式文件，所述XML格式文件中记录画面元素的属性值，生成画面脚本，将XML格式文件、画面脚本保存并发送至后台服务；

后台服务模块：接收XML格式文件、画面脚本，将XML格式文件、画面脚本转换为能够在浏览器中运行的HTML页面，优选地，还包括能够在浏览器中运行的Javascript脚本；

画面运行态模块：加载监控画面，在浏览器中渲染画面元素，向后台服务进行监控画面的注册、监控画面的数据刷新，响应用户交互事件，根据数据刷新得到的属性值对画面元素进行刷新。

根据本发明提供的一种基于SVG的Web组态画面存储与展示方法，包括画面设计器步骤、后台服务步骤、画面运行态步骤；

画面设计器步骤：通过拖拽配置的方式搭建监控画面，将监控画面对应的画面元素内容生成XML格式文件，所述XML格式文件中记录画面元素的属性值，生成画面脚本，将XML格式文件、画面脚本保存并发送至后台服务；

后台服务步骤：接收XML格式文件、画面脚本，将XML格式文件、画面脚本转换为能够在浏览器中运行的HTML页面；

画面运行态步骤：加载监控画面，在浏览器中渲染画面元素，向后台服务进行监控画面的注册、监控画面的数据刷新，响应用户交互事件，根据数据刷新得到的属性值对画面元素进行刷新。

优选地，所述XML格式文件、画面脚本分别单独存储，画面脚本存储在浏览器的localStorage中；所述画面脚本是Javascript脚本。

优选地，对所述属性值绑定点值，所述数据刷新是根据当前属性值对应的点值，在监控画面中查询得到与所述点值绑定的属性值，根据所述属性值对所述当前属性值进行更新。

优选地，所述XML格式文件主要包括画面整体配置、画面元素及属性值配置、用户事件脚本配置、图片数据嵌入配置中的任一种或任多种。

优选地，所述后台服务遍历XML格式文件的画面元素和属性值，并逐一转换为SVG组态表示。

根据本发明提供的一种存储有计算机程序的计算机可读存储介质，所述计算机程序被处理器执行时实现上述的方法的步骤。

与现有技术相比，本发明具有如下的有益效果：

能够使HMI软件方便的进行跨平台部署、延伸到移动端浏览器、方便的与其他三方系统集成以及繁杂的部署和升级操作，实现浏览器环境下的工业监控HMI软件，提高企业生产效率，降低企业在实施工业监控项目中的成本，最终为企业管理层提供直观、全面、准确的决策依据。

附图说明

通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：

图1为页面转换流程图。

具体实施方式

下面结合具体实施例对本发明进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本发明，但不以任何形式限制本发明。应当指出的是，对本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变化和改进。这些都属于本发明的保护范围。

本发明能够利用SVG技术构建运行于浏览器中的组态监控画面，相比较传统的CS模式的HMI软件，本发明可以跨平台运行，客户端无需安装任何插件可直接运行监控画面，同时可以无缝扩展到手机端，如果需要与其他第三方系统集成也非常方便。通过该方案可以很大程度提高工业企业的生产效率，降低其在实施工业监控项目中的成本，最终为企业管理层提供直观、全面、准确的决策依据。本发明通过定义一种画面存储和展示格式，并通过后台服务模块进行转换成HTML，可以不局限于SVG标准定义的图元，可以自由扩充，应用场景广泛。且从画面设计、逻辑编写到画面运行、数据刷新都在同一系统中，各个环节紧密相连，非常适合工业监控现场项目的应用。

根据本发明提供的一种基于SVG的Web组态画面存储与展示方法，包括画面设计器步骤、后台服务步骤、画面运行态步骤；

画面设计器步骤：通过拖拽配置的方式搭建监控画面，将监控画面对应的画面元素内容生成XML格式文件，所述XML格式文件中记录画面元素的属性值，生成画面脚本，将XML格式文件、画面脚本保存并发送至后台服务；

后台服务步骤：接收XML格式文件、画面脚本，将XML格式文件、画面脚本转换为能够在浏览器中运行的HTML页面；

画面运行态步骤：加载监控画面，在浏览器中渲染画面元素，向后台服务进行监控画面的注册、监控画面的数据刷新，响应用户交互事件，根据数据刷新得到的属性值对画面元素进行刷新。

具体地，所述XML格式文件、画面脚本分别单独存储，画面脚本存储在浏览器的localStorage中；所述画面脚本是Javascript脚本。

具体地，对所述属性值绑定点值，所述数据刷新是根据当前属性值对应的点值，在监控画面中查询得到与所述点值绑定的属性值，根据所述属性值对所述当前属性值进行更新。

具体地，所述XML格式文件主要包括画面整体配置、画面元素及属性值配置、用户事件脚本配置、图片数据嵌入配置中的任一种或任多种。

具体地，所述后台服务遍历XML格式文件的画面元素和属性值，并逐一转换为SVG组态表示。

根据本发明提供的一种存储有计算机程序的计算机可读存储介质，其特征在于，所述计算机程序被处理器执行时实现上述的方法的步骤。

根据本发明提供的一种基于SVG的Web组态画面存储与展示系统，包括画面设计器模块、后台服务模块、画面运行态模块；

画面设计器模块：通过拖拽配置的方式搭建监控画面，将监控画面对应的画面元素内容生成XML格式文件，所述XML格式文件中记录画面元素的属性值，生成画面脚本，将XML格式文件、画面脚本保存并发送至后台服务；

后台服务模块：接收XML格式文件、画面脚本，将XML格式文件、画面脚本转换为能够在浏览器中运行的HTML页面；

画面运行态模块：加载监控画面，在浏览器中渲染画面元素，向后台服务进行监控画面的注册、监控画面的数据刷新，响应用户交互事件，根据数据刷新得到的属性值对画面元素进行刷新。

本发明提供的基于SVG的Web组态画面存储与展示系统，可以通过基于SVG的Web组态画面存储与展示方法的步骤流程实现。本领域技术人员可以将基于SVG的Web组态画面存储与展示方法理解为所述基于SVG的Web组态画面存储与展示系统的优选例。

以下结合附图对本发明的优选例做进一步的阐述。

如图1所示，本发明由三部分组成，分别是画面设计器、后台服务和画面运行态。实施本发明的基础硬件条件包括：一台Web服务器，内存配置不低于8G，CPU推荐4核心以上；一台工作站(客户端)，内存配置不低于4G，CPU推荐2核心以上；Web服务器中部署Tomcat服务，负责响应工作站浏览器请求，工作站中部署Chrome浏览器，负责在浏览器中制作监控画面和查看、运行最终画面。

画面设计器通过拖拽配置的方式搭建监控画面，对应画面元素内容会生成XML格式文件，在该文件中对应每个元素的每个属性都进行记录。该XML文件是完全表意文件，既通过查看该XML文件可以获悉该画面中所有元素的配置详情。需要注意的是画面中的Javascript脚本是单独存储在浏览器localStorage中，并不存储在该XML文件中，XML文件只存储元素表现相关的内容。

后台服务负责将画面设计器生成的XML文件转换为可在浏览器中运行的HTML页面。当用户设计完监控画面，进行保存的时候，前台生成的XML文件、Javascript画面脚本以及用户等信息将一并发送到后台服务中，后台服务根据XML文件的标签内容逐一遍历所有元素，逐个进行转换，最终生成可以在浏览器中直接运行的HTML页面。

画面运行态主要是加载监控画面，在浏览器中渲染画面元素，向后台进行画面注册、画面数据刷新，响应用户交互事件，并根据刷新到的点值数据对画面元素内容进行刷新。在画面设计阶段会给画面元素的属性绑定点值，这些点是在底层数据采集系统中获取，并最终通过运行态画面请求将这些数据获取到页面中。由于后台服务已经将画面内容转换为HTML+SVG形式，画面运行态并不需要再对画面格式进行转换，只需要对数据和画面元素的属性更新负责。每次数据刷新请求需要根据当前刷新的点找到画面中对应的绑定了该点的元素，并根据最新值对画面元素属性值进行变更，最终这样的变更将反应到画面中，也就实现了运行态画面根据后台数据点值进行变化的功能效果。

在本实施例中，将用户设计的画面以XML格式完整表述出来是第一步，该XML文件内容必须完整展现用户设计的画面样式。该XML画面格式主要包括以下几个内容：画面整体相关配置；元素及其属性相关配置；用户事件脚本相关配置；图片数据的嵌入。画面整体相关配置内容如表一所示，画面元素类型表二所示，针对每个不同的元素类型都有对应的属性需要进行配置，表三中列出了所有展现相关元素(不包括脚本)的通用属性。

表一

表二

元素类型	说明
		直线	<cell type＝”Line”/>
直角矩形	<cell type＝”Rectangle”/>
		圆角矩形	<cell type＝”RoundedRectangle”/>
椭圆	<cell type＝”Ellipse”/>
		弧线	<cell type＝”Arc”/>
三角形	<cell type＝”Triangle”/>
		折线	<cell type＝”Polyline”/>
闭合曲线	<cell type＝”ClosedCurve”/>
		图片	<cell type＝”Image”/>
报警控件	<cell type＝”AlarmWidget”/>
		趋势控件	<cell type＝”TrendWidget”/>
历史报警控件	<cell type＝”hisAlarmWidget”/>
		定时器控件	<cell type＝”Timer”/>
视频控件	<cell type＝”RtspPlayer”/>
		文本控件	<cell type＝”Text”/>
脚本	<cell type＝”PageScript”/>

表三

接下来的核心操作是将该XML表示转换为浏览器可直接加载的Web资源。转换完成的Web页面除过能够以SVG标准格式展现基本图形，还需要引入控制页面逻辑的运行态Javascript库，以及用户自己添加的事件响应Javascript脚本。运行态页面框架如下所示：

针对前台设计器保存生成的XML文件，后台服务需要遍历该文件中的所有元素和属性，逐一将其转换为SVG表示。Text元素是组态画面中常用元素，对于该元素的转换需要首先生成一个<g>元素，在<g>元素中添加该文本元素的元信息以及整体属性，比如ID、名称和旋转角度等；由于Text元素支持前景和背景色显示，故需要两个<rect>来充当前景和背景，<rect>元素的位置大小都来自于设计器用户配置的数据，颜色也根据实际用户配置的进行设置；文本内容通过创建<text>标签来完成，该标签中主要根据用户设计器中配置的字体、颜色、大小、输出格式以及文本内容来展示。一个简单的Text元素转换完成后的内容如下所示：

其余图形元素的转换过程与文本类似，但是Javascript脚本的转换有所不同。对于监控画面中的元素要能进行用户交互，需要支持用户对元素的单击、双击等操作。在后台服务转换过程中，首先需要从Javascript脚本中抽取function的名称，比如functiontext1_onClick这样的函数名称，便可以明确该事件是对文本元素text1的点击事件进行响应，然后再在text1的svg标签上添加onclick＝”text1_onClick()”这样的事件响应代码，那么在运行态当用户点击该文本标签就将触发该事件。

本领域技术人员知道，除了以纯计算机可读程序代码方式实现本发明提供的系统、装置及其各个模块以外，完全可以通过将方法步骤进行逻辑编程来使得本发明提供的系统、装置及其各个模块以逻辑门、开关、专用集成电路、可编程逻辑控制器以及嵌入式微控制器等的形式来实现相同程序。所以，本发明提供的系统、装置及其各个模块可以被认为是一种硬件部件，而对其内包括的用于实现各种程序的模块也可以视为硬件部件内的结构；也可以将用于实现各种功能的模块视为既可以是实现方法的软件程序又可以是硬件部件内的结构。

以上对本发明的具体实施例进行了描述。需要理解的是，本发明并不局限于上述特定实施方式，本领域技术人员可以在权利要求的范围内做出各种变化或修改，这并不影响本发明的实质内容。在不冲突的情况下，本申请的实施例和实施例中的特征可以任意相互组合。

Claims (7)

1.一种基于SVG的Web组态画面存储与展示系统，其特征在于，包括画面设计器模块、后台服务模块、画面运行态模块；

画面设计器模块：通过拖拽配置的方式搭建监控画面，将监控画面对应的画面元素内容生成XML格式文件，所述XML格式文件中记录画面元素的属性值，生成画面脚本，将XML格式文件、画面脚本保存并发送至后台服务；

后台服务模块：接收XML格式文件、画面脚本，将XML格式文件、画面脚本转换为能够在浏览器中运行的HTML页面；

画面运行态模块：加载监控画面，在浏览器中渲染画面元素，向后台服务进行监控画面的注册、监控画面的数据刷新，响应用户交互事件，根据数据刷新得到的属性值对画面元素进行刷新。

2.一种基于SVG的Web组态画面存储与展示方法，其特征在于，包括画面设计器步骤、后台服务步骤、画面运行态步骤；

画面设计器步骤：通过拖拽配置的方式搭建监控画面，将监控画面对应的画面元素内容生成XML格式文件，所述XML格式文件中记录画面元素的属性值，生成画面脚本，将XML格式文件、画面脚本保存并发送至后台服务；

后台服务步骤：接收XML格式文件、画面脚本，将XML格式文件、画面脚本转换为能够在浏览器中运行的HTML页面；

画面运行态步骤：加载监控画面，在浏览器中渲染画面元素，向后台服务进行监控画面的注册、监控画面的数据刷新，响应用户交互事件，根据数据刷新得到的属性值对画面元素进行刷新。

3.根据权利要求1所述的基于SVG的Web组态画面存储与展示系统或者根据权利要求2所述的基于SVG的Web组态画面存储与展示方法，其特征在于，所述XML格式文件、画面脚本分别单独存储，画面脚本存储在浏览器的localStorage中；所述画面脚本是Javascript脚本。

4.根据权利要求1所述的基于SVG的Web组态画面存储与展示系统或者根据权利要求2所述的基于SVG的Web组态画面存储与展示方法，其特征在于，对所述属性值绑定点值，所述数据刷新是根据当前属性值对应的点值，在监控画面中查询得到与所述点值绑定的属性值，根据所述点值对所述当前属性值进行更新，进而对画面元素进行更新。

5.根据权利要求1所述的基于SVG的Web组态画面存储与展示系统或者根据权利要求2所述的基于SVG的Web组态画面存储与展示方法，其特征在于，所述XML格式文件主要包括画面整体配置、画面元素及属性值配置、用户事件脚本配置、图片数据嵌入配置中的任一种或任多种。

6.根据权利要求1所述的基于SVG的Web组态画面存储与展示系统或者根据权利要求2所述的基于SVG的Web组态画面存储与展示方法，其特征在于，所述后台服务遍历XML格式文件的画面元素和属性值，并逐一转换为SVG组态表示。

7.一种存储有计算机程序的计算机可读存储介质，其特征在于，所述计算机程序被处理器执行时实现权利要求2至6中任一项所述的方法的步骤。

Images