CN107483840A

CN107483840A - 基于全景图的工业监控系统图形Web展示方法及装置

Info

Publication number: CN107483840A
Application number: CN201710914987.1A
Authority: CN
Inventors: 张娜; 文斌; 初成刚
Original assignee: Beijing Purple Energy Technology Co Ltd
Current assignee: Beijing Purple Energy Technology Co Ltd
Priority date: 2017-09-29
Filing date: 2017-09-29
Publication date: 2017-12-15

Abstract

本发明公开了一种基于全景图的工业监控系统图形Web展示方法，使用全景图场景编辑器将全景图资源集导入，编辑并生成全景图监控工程文件集；并将全景图监控工程文件集导出为Web项目文件集，用于导入到Web服务器中进行Web展示。本发明基于全景图片进行构建，既有二维图形开发周期短，成本低的优势，又具备3D模型通用性好、交互性强的特点，同时能够最大化的还原真实场景，可以与现有的工业监控系统配合使用满足复杂场景的展示和交互需求。

Description

基于全景图的工业监控系统图形Web展示方法及装置

技术领域

本发明属于工业监控系统领域,特别是涉及到一种基于全景图的工业监控系统图形Web展示方法及装置。

背景技术

全景，又称为3D实景，是一种新型的富媒体技术，与传统的流媒体相比，具有可操作、可交互的特点，随着数字摄影技术和互联网技术的发展，全景照片的制作、传播、浏览变得越来越容易。

传统的工业监控系统图形界面基于二维图形系统或虚拟3D建模技术构建，二维图形是平面图形，技术成熟度高，构建周期短，成本低，但可交互性差，难以满足复杂的展示和交互需求，3D建模依赖于三维制作软件制作的3D模型，具有极好的通用性和极强的交互性，但也存在建模工作量大，开发周期长，真实性差的问题。

发明内容

针对上述问题，本发明提出一种基于全景图的工业监控系统图形Web展示方法及装置，能够最大化的还原真实场景，可以与现有的工业监控系统配合使用满足复杂场景的展示和交互需求。

为达到上述目的，本发明的技术方案是这样实现的：

一种基于全景图的工业监控系统图形Web展示方法，包括：

一、获取全景图资源集；

二、将全景图资源集导入全景图场景编辑器，编辑并生成全景图监控工程文件集；

三、使用全景图场景编辑器，将全景图监控工程文件集导出为Web项目文件集；所述Web项目文件集可导入到Web服务器中，通过浏览器访问。

进一步的，步骤一所述全景图资源的获取方法包括：

使用全景相机拍摄监控对象所在位置的全景图若干，产生全景图资源集，包含内景及外景；

或：

使用普通相机拍摄监控对象所在位置的图片若干，通过全景图合成软件合成全景图。

进一步的，步骤二所述全景图监控工程文件集的同步配置方法为：在新建全景图监控工程时同时产生全景图监控工程文件集，包括：

配置文件P1，用于存储工程的相关配置信息；

监控点标记文件P2，用于存储添加的热区、热点、标签及跳转点；

资源文件P3，用于存储图片文件、视频文件、音频文件，以及全景图资源集的全景图；

当编辑引起相关的信息改变时，全景图场景编辑器会自动将改变同步到全景图监控工程文件集中对应部分。

进一步的，步骤三所述Web项目文件集的配置方法为：

资源文件H1，包含项目中用到的全景图文件、HTML文件、CSS样式文件、媒体文件；

脚本文件H2，所述脚本文件H2为打包好的JavaScript脚本文件，被浏览器执行，用于全景图的渲染和交互事件的监听和响应，以及外部数据的实时获取；

配置文件H3，包含了本Web项目的场景列表及每个场景对应的全景图信息以及每个场景内的监控点信息。

本发明还提供了一种基于全景图的工业监控系统图形Web展示装置，包括：

全景图获取模块，用于获取全景图资源集；

全景图场景编辑器，所述全景图场景编辑器包括：全景图资源集导入模块，用于将全景图资源集导入；工程文件集模块，用于编辑并生成全景图监控工程文件集；Web项目文件集模块，用于将全景图监控工程文件集导出为Web项目文件集；

Web展示模块，用于将Web项目文件集导入到Web服务器中。

进一步的，所述全景图获取模块包括：

全景相机拍摄单元，用于使用全景相机拍摄监控对象所在位置的全景图若干，产生全景图资源集，包含内景及外景；

或：

普通相机拍摄单元和软件合成单元，所述普通相机拍摄单元用于使用普通相机拍摄监控对象所在位置的图片若干，所述软件合成单元用于将图片通过合成软件合成全景图。

进一步的，工程文件集模块包括：

配置文件P1单元，用于存储工程的相关配置信息；

监控点标记文件P2单元，用于存储添加的热区、热点、标签及跳转点；

资源文件P3单元，用于存储图片文件、视频文件、音频文件，以及全景图资源集的全景图。

进一步的，Web项目文件集模块包括：

资源文件H1单元，用于提供项目中用到的全景图文件、HTML文件、CSS样式文件、媒体文件；

脚本文件H2单元，用于提供打包好的JavaScript脚本文件，被浏览器执行，用于全景图的渲染和交互事件的监听和响应，以及外部数据的实时获取；

配置文件H3单元，用于提供本Web项目的场景列表及每个场景对应的全景图信息以及每个场景内的监控点信息。

本发明还提供了一种全景图场景编辑器，包括：全景图资源集导入模块，用于将全景图资源集导入；工程文件集模块，用于编辑并生成全景图监控工程文件集；Web项目文件集模块，用于将全景图监控工程文件集导出为Web项目文件集；

所述工程文件集模块包括：

配置文件P1单元，用于存储工程的相关配置信息；

资源文件P3单元，用于存储图片文件、视频文件、音频文件，以及全景图资源集的全景图；

所述Web项目文件集模块包括：

进一步的，所述全景图场景编辑器为可视化编辑工具。

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

本发明中涉及的工业监控系统图形Web展示方法和装置，基于全景图片进行构建，既有二维图形开发周期短，成本低的优势，又具备3D模型通用性好、交互性强的特点，同时能够最大化的还原真实场景，可以与现有的工业监控系统配合使用满足复杂场景的展示和交互需求。

使用本发明可以完成工业设备的全景监控，无需复杂的3D建模，只需要使用全景相机拍摄全景图，然后利用全景图编辑器，创建全景图监控工程，通过简单编辑，对全景图添加热点、热区、标签及跳转点，最终导出标准的图形Web项目，极大的降低了工业监控系统全景图Web展示的难度。由于是基于真实世界的全景图，监控更直观，整个系统构建周期短、成本低、场景还原度高、交互性强，并且基于浏览器强大的渲染功能，还可以实现自动巡航，故障点自动定位、模拟仿真等高级功能。

附图说明

图1是本发明的软件结构示意图；

图2是本发明的主流程示意图；

图3是本发明的Web项目生成流程示意图；

图4是本发明的全景图Web展示流程图。

具体实施方式

需要说明的是，在不冲突的情况下，本发明中的实施例及实施例中的特征可以相互组合。

本发明的软件模块结构如图1所示，其中M为对全景图进行编辑的可视化工具，即全景图场景编辑器，用来生成和编辑全景图监控工程，导出图形Web项目；R为通过全景相机拍摄的全景图资源，一般为标准格式的图片文件；

P为M自动生成的工程文件集，包含工程的配置文件P1、监控点标记文件P2、项目中使用的资源文件P3，其中P1存储了项目的相关配置信息，如存储路径、输出路径，名称信息，资源文件路径等，P2存储了用户添加的热区、热点、标签及跳转点，热点是全景图中的一个点，热区由三个及以上的点组成，代表全景图中的一个区域，标签为一矩形区域，用来承载文字、图片等内容的展示，跳转点用于不同场景或视角的切换，通过跳转点可以实现本场景内不同视角的切换，或者不同场景之间的跳转；热点的属性包括名称、类型、坐标、关联点等，其坐标为一个包含x、y、z值的对象，热区的属性包括名称、类型、坐标、关联点等，其坐标为一组包含x、y、z值的对象数组。P3包含图片文件、视频文件、音频文件，也包含了R中的全景图，，步骤2中添加的热点、热区、标签及跳转点及其关联信息都会体现到工程文件中，并作为导出Web项目的依据。用户在添加热点、热区、标签及跳转点时，程序获取到的是屏幕上的x、y二维坐标，最终存储的x、y、z三维坐标经过了场景编辑器的坐标转换。

H为M根据P生成的Web项目文件集，包含了资源文件H1，H1包含了项目中用到的全景图文件、HTML文件，CSS样式文件，图片、视频、音频等媒体文件等，脚本文件H2，H2为一个打包好的JavaScript脚本文件，可以被浏览器执行，用于全景图的渲染和交互事件的监听和响应，外部数据的实时获取也在H2中实现，系统通过ajax的方式向外部系统发出请求，获取需要的数据，并根据预定义的规则。将结果渲染到到全景图中，以实现监控状态的实时更新，配置文件H3包含了本项目的场景列表及每个场景对应的全景图信息以及每个场景内的监控点信息。

如图2所示，本发明的系统主流程，如图2所示，包含如下步骤：

步骤1：使用全景相机拍摄监控对象所在位置的全景图若干，产生全景图资源集R，包含内景及外景，内景指室内的全景图，外景为室外区域全景图，为保证最终的效果，拍摄的全景图要包含被监控对象，且图片清晰、细节丰富，全景相机是全景图最为便捷的获取方式，但不是唯一方式，通过其他方式(如：普通相机拍摄，全景图合成软件合成)获取的全景图也可以使用。

步骤2：使用全景图场景编辑器M，生成全景图监控工程，将R导入，进行编辑，添加监控点(热点、热区、标签及跳转点等)信息。

步骤3：使用全景图场景编辑器M，将全景图监控工程导出为Web项目，导出文件都是W3C标准文件，可直接导入到Web服务器中，通过浏览器访问。

其中所述的Web项目的生成流程，如图3所示，包含如下步骤：

1：打包资源文件H1到项目输出目录；

2：打包脚本文件H2到项目输出目录；

3：根据项目信息生成配置文件H3，并打包至输出目录；

4：生成入口HTML文件，并打包至输出目录。

Web项目生成后，全景图Web展示的流程，如图4所示，包含如下步骤：

(1)：将输出的Web项目部署到服务器上，用户通过URL访问项目，浏览器自动加载资源文件并渲染；

(2)：脚本文件H2读取配置文件H3，将用户定义的监控点信息(热点、热区、标签及跳转点)渲染到全景图；

(3)：H2通过监听用户交互事件，并调整监控监控点信息的显示角度及坐标位置，并执行用户预定义的动作；

(4)：H2通过HTTP协议请求监控点信息，根据返回数据，实时更新全景图显示。

使用上述方案可以完成变电站设备的全景监控，无需复杂的3D建模，只需要使用全景相机拍摄全景图，然后利用变电站全景图编辑器，创建全景图监控工程，对全景图添加热点、热区、标签及跳转点，最终导出标准的Web项目，极大的降低了工业监控系统全景图Web展示的难度。由于是基于真实世界的全景图，监控更直观，基于浏览器强大的渲染功能，还可以实现自动巡航，故障点自动定位、模拟仿真等高级功能。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims

1.一种基于全景图的工业监控系统图形Web展示方法，其特征在于，包括：

一、获取全景图资源集；

二、全景图场景编辑器新建全景图监控工程，将全景图资源集导入全景图监控工程进行编辑，并自动同步配置全景图监控工程文件集；

三、使用全景图场景编辑器，将编辑后的全景图监控工程文件集导出为Web项目文件集，用于导入到Web服务器中进行Web展示。

2.根据权利要求1所述的一种基于全景图的工业监控系统图形Web展示方法，其特征在于，步骤一所述全景图资源的获取方法包括：

或：

3.根据权利要求1所述的一种基于全景图的工业监控系统图形Web展示方法，其特征在于，步骤二所述全景图监控工程文件集的同步配置方法为：在新建全景图监控工程时同时产生全景图监控工程文件集，包括：

配置文件P1，用于存储工程的相关配置信息；

4.根据权利要求1所述的一种基于全景图的工业监控系统图形Web展示方法，其特征在于，步骤三所述Web项目文件集的配置方法为：

5.一种基于全景图的工业监控系统图形Web展示装置，包括：

全景图获取模块，用于获取全景图资源集；

Web展示模块，用于将Web项目文件集导入到Web服务器中进行Web展示。

6.根据权利要求5所述的一种基于全景图的工业监控系统图形Web展示装置，其特征在于，所述全景图获取模块包括：

或：

7.根据权利要求5所述的一种基于全景图的工业监控系统图形Web展示装置，其特征在于，工程文件集模块包括：

配置文件P1单元，用于存储工程的相关配置信息；

8.根据权利要求5所述的一种基于全景图的工业监控系统图形Web展示装置，其特征在于，Web项目文件集模块包括：

9.一种全景图场景编辑器，包括：全景图资源集导入模块，用于将全景图资源集导入；工程文件集模块，用于编辑并生成全景图监控工程文件集；Web项目文件集模块，用于将全景图监控工程文件集导出为Web项目文件集；

所述工程文件集模块包括：

配置文件P1单元，用于存储工程的相关配置信息；

所述Web项目文件集模块包括：

10.根据权利要求9所述的编辑器，其特征在于，所述全景图场景编辑器为可视化编辑工具。