一种基于html5的可视化监控平台及应用方法
【专利摘要】一种基于HTML5的可视化监控平台及应用方法是工业监控与数据可视化领域，它包括监控服务器和监控终端，所述监控服务器提供基于HTML5可视化监控网站的Web服务、用户权限管理服务和数据服务；所述基于HTML5可视化监控网站由系统登录、可视化组态、可视化监控等多页面组成，可视化组态与可视化监控的页面由Canvas技术实现；所述可视化监控网站包括工程师、操作员和访问员等权限；所述监控服务器通过HTTP协议向监控终端提供可视化控件和图元信息数据服务，通过WebSocket协议提供实时和历史数据服务；通过浏览器与监控服务器连接实现可视化组态或监控。
【专利说明】
一种基于HTML5的可视化监控平台及应用方法
技术领域
[0001]本发明涉及监控与数据可视化领域，尤其是一种基于HTML5的可视化监控平台及应用方法。
【背景技术】
[0002]随着互联网的发展，传统的工业监控与数据可视化技术已越来越不能满足用户需求，用户不仅期望可以在监控室看到监控数据，同时也可以在监控室外的地方利用随身携带的移动终端(手机、平板电脑等)查看监控数据，若在监控页面上发现问题时也可以在移动终端上随时做出调整。目前大部分的监控终端需要让用户安装监控软件，少部分提供浏览器方式，但需要安装相应插件，数据实时性不高，这为用户的安装操作带来很大不便。
【发明内容】
[0003]本发明的目的在于提出一种跨平台、可视化程度高、数据实时性强、操作方便的一种基于HTML5的可视化监控平台及应用方法，它克服了现有技术存在的不足，为了达到上述目的，本发明采用以下技术方案予以实现。
[0004]本发明包括监控服务器和监控终端，所述监控服务器提供基于HTML5可视化监控网站的Web服务、用户权限管理服务和数据服务;所述基于HTML5可视化监控网站由系统登录、可视化组态、可视化监控多页面组成，可视化组态与可视化监控的页面由Canvas技术实现;所述可视化监控网站访问权限包括工程师、操作员和访问员；所述监控服务器通过HTTP协议向监控终端提供可视化控件和图元数据服务，通过WebSocket协议提供实时和历史数据服务;所述监控终端可以是手机、平板电脑、PC机或智能电视，通过浏览器与监控服务器连接实现可视化组态或监控。
[0005]本发明的进一步特点在于:
所述基于HTML5可视化监控网站由系统登录、可视化组态、可视化监控多页面组成；可视化组态与可视化监控的页面由HTML5的Canvas技术实现，利用Canvas和JavaScript建立可视化程度高的控件与图元，每个控件和图元都有若干属性和函数，可与监控服务器特定实时数据或历史数据进行关联。组态时构建导航菜单，可对导航菜单项进行添加、删除和修改操作，在导航菜单下添加空白页面，拖动控件或图元，修改属性，关联数据，组态出不同页面;可视化监控页面是已组态好的页面，页面中的控件和图元将与监控服务器关联的数据可视化，用户可查看或进行相关操作。
[0006]所述可视化监控网站包括工程师、操作员和访问员权限；在用户登录系统时，工程师权限的用户进入可视化组态主页面，可实现监控画面的组态、添加、删除和修改操作，其他权限的用户进入可视化监控的主页面，可对实时或历史数据进行相关操作。
[0007]所述监控服务器通过HTTP协议提供可视化控件和图元信息数据服务。所述监控服务器通过WebSocket协议提供实时数据和历史数据服务，所述实时数据服务是监控服务器通过推送形式将实时数据发送至监控终端浏览器，所述历史数据服务是监控服务器在监控终端浏览器查询时才将历史数据发送至要查询的监控终端浏览器。
[0008]所述监控终端可为手机、平板电脑、PC机或智能电视，在支持HTML5的浏览器中输入监控服务器所指定的基于HTML5可视化监控网站的网址，登录系统进入可视化监控平台，实现可视化组态或监控。
[0009]本发明的应用方法是:监控服务器提供基于HTML5可视化监控网站的Web服务、用户权限管理服务与数据服务;基于HTML5可视化监控网站由系统登录、可视化组态、可视化监控多个页面组成，可视化组态与可视化监控的页面由Canvas技术实现;监控服务器通过HTTP协议向监控终端提供可视化控件和图元信息数据服务，通过WebSocket协议提供实时和历史数据服务。监控终端可为手机、平板电脑、笔记本电脑、PC机，用户在支持HTML5浏览器中输入监控服务器所指定的基于HTML5可视化监控网站的网址，进入系统登录界面，输入监控服务器分配的用户名和密码，工程师权限的用户进入可视化组态主页面，可实现监控画面的组态、添加、删除、修改操作，其他权限的用户进入可视化监控的主页面，可根据不同的用户权限对实时或历史数据进行相关操作。
[0010]基于以上技术方案的公开，本发明具有以下显著效果:
(I)监控终端跨平台。本发明基于HTML5技术来实现，HTML5是最新的HTML技术，具有跨平台特性和设备兼容性，因此监控终端不用安装任何软件或插件就可以在不同的系统(Window、Linux、Unix、Android、1S、WP等)浏览器下运行。
[0011](2)可视化程度高。本发明可视化组态与监控页面中所有的控件与图元采用HTML5的Canvas技术实现，控件和图元可根据实际监控对象任意绘制，并可添加图元库中，最大程度地实现监控数据的可视化，使监控更为形象与直观。
[0012](3)数据实时性强。本发明在监控服务器与监控终端的数据传输上采用WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯，实时数据采用服务器推送的机制，历史数据采用浏览器查询的机制，进一步提高了监控数据的实时性。
[0013](4)监控更简单。本发明可以利用手机、平板电脑、笔记本电脑、PC机等多种方式实现监控，在监控终端不必安装其他软件或插件，只需要在浏览器上输入网址就可以做到，因此本发明的监控打破了传统监控的地域局限，监控画面需要修改，用户也不必去监控室，通过随身携带的手机或可上网的电脑做画面组态，操作更直观、简单，更具人性化。
【附图说明】
[0014]图1为一种基于HTML5的可视化监控平台结构示意图。
[0015]图2为本发明监控服务器服务结构示意图。
[0016]图3为一种基于HTML5的可视化监控平台的应用方法流程图。
[0017]图4为本发明监控服务器数据服务原理示意图。
【具体实施方式】
[0018]实施例1、本发明包括监控服务器和监控终端;所述监控服务器提供基于HTML5可视化监控网站的Web服务、用户权限管理服务和数据服务;所述基于HTML5可视化监控网站由系统登录、可视化组态、可视化监控等多页面组成，可视化组态与可视化监控的页面由Canvas技术实现;所述可视化监控网站访问权限包括工程师、操作员和访问员;所述监控服务器通过HTTP协议向监控终端提供可视化控件和图元数据服务，通过WebSocket协议提供实时和历史数据服务;所述监控终端可以是手机、平板电脑、PC机或智能电视，通过浏览器与监控服务器连接实现可视化组态或监控。
[0019]实施例2、所述基于HTML5可视化监控网站由系统登录、可视化组态、可视化监控多页面组成；可视化组态与可视化监控的页面由HTML5的Canvas技术实现，利用Canvas和JavaScript建立可视化程度高的控件与图元，每个控件和图元都有若干属性和函数，可与监控服务器特定实时数据或历史数据进行关联;组态时构建导航菜单，可对导航菜单项进行添加、删除和修改操作，在导航菜单下添加空白页面，拖动控件或图元，修改属性，关联数据，组态出不同页面。可视化监控页面是已组态好的页面，页面中的控件和图元将与监控服务器关联的数据可视化，用户可查看或进行相关操作。
[0020]实施例3、所述可视化监控网站包括工程师、操作员和访问员权限；在用户登录系统时，工程师权限的用户进入可视化组态主页面，可实现监控画面的组态、添加、删除和修改操作，其他权限的用户进入可视化监控的主页面，可对实时或历史数据进行相关操作。
[0021]实施例4、所述监控服务器通过HTTP协议提供可视化控件和图元信息数据服务;所述监控服务器通过WebSocket协议提供实时数据和历史数据服务，所述实时数据服务是监控服务器通过推送形式将实时数据发送至监控终端浏览器，所述历史数据服务是监控服务器在监控终端浏览器查询时才将历史数据发送至要查询的监控终端浏览器。
[0022]实施例5、所述监控终端可为手机、平板电脑、PC机或智能电视，在支持HTML5的浏览器中输入监控服务器所指定的基于HTML5可视化监控网站的网址，登录系统进入可视化监控平台，实现可视化组态或监控。
[0023]实施例6、本发明的应用方法是:监控服务器提供基于HTML5可视化监控网站的Web服务、用户权限管理服务与数据服务;基于HTML5可视化监控网站由系统登录、可视化组态、可视化监控多个页面组成，可视化组态与可视化监控的页面由Canvas技术实现。监控服务器通过HTTP协议向监控终端提供可视化控件和图元信息数据服务，通过WebSocket协议提供实时和历史数据服务；监控终端可为手机、平板电脑、笔记本电脑、PC机，用户在支持HTML5浏览器中输入监控服务器所指定的基于HTML5可视化监控网站的网址，进入系统登录界面，输入监控服务器分配的用户名和密码，工程师权限的用户进入可视化组态主页面，可实现监控画面的组态、添加、删除、修改操作，其他权限的用户进入可视化监控的主页面，可根据不同的用户权限对实时或历史数据进行相关操作。
[0024]以上所述仅为本发明的优选实施例而已，在基本原理相同的情况下所做出的变化、改型、添加或替换，也应属于本发明的保护范围。
【主权项】
1.一种基于HTML5的可视化监控平台，其特征在于，包括监控服务器和监控终端;所述监控服务器提供基于HTML5可视化监控网站的Web服务、用户权限管理服务和数据服务;所述基于HTML5可视化监控网站由系统登录、可视化组态、可视化监控多页面组成，可视化组态与可视化监控的页面由Canvas技术实现;所述可视化监控网站访问权限包括工程师、操作员和访问员；所述监控服务器通过HTTP协议向监控终端提供可视化控件和图元数据服务，通过WebSocket协议提供实时和历史数据服务;所述监控终端可以是手机、平板电脑、PC机或智能电视，通过浏览器与监控服务器连接实现可视化组态或监控。2.根据权利要求1所述的一种基于HTML5的可视化监控平台，其特征在于，所述基于HTML5可视化监控网站由系统登录、可视化组态、可视化监控多页面组成；可视化组态与可视化监控的页面由HTML5的Canvas技术实现，利用Canvas和JavaScript建立可视化程度高的控件与图元，每个控件和图元都有若干属性和函数，可与监控服务器特定实时数据或历史数据进行关联;组态时构建导航菜单，可对导航菜单项进行添加、删除和修改操作，在导航菜单下添加空白页面，拖动控件或图元，修改属性，关联数据，组态出不同页面;可视化监控页面是已组态好的页面，页面中的控件和图元将与监控服务器关联的数据可视化，用户可查看或进行相关操作。3.根据权利要求1所述的一种基于HTML5的可视化监控平台，其特征在于，所述可视化监控网站包括工程师、操作员和访问员权限，在用户登录系统时，工程师权限的用户进入可视化组态主页面，可实现监控画面的组态、添加、删除和修改操作，其他权限的用户进入可视化监控的主页面，可对实时或历史数据进行相关操作。4.根据权利要求1所述的一种基于HTML5的可视化监控平台，其特征在于，所述监控服务器通过HTTP协议提供可视化控件和图元信息数据服务;所述监控服务器通过WebSocket协议提供实时数据和历史数据服务，所述实时数据服务是监控服务器通过推送形式将实时数据发送至监控终端浏览器，所述历史数据服务是监控服务器在监控终端浏览器查询时才将历史数据发送至要查询的监控终端浏览器。5.根据权利要求1所述的一种基于HTML5的可视化监控平台，其特征在于，所述监控终端可为手机、平板电脑、PC机或智能电视，在支持HTML5的浏览器中输入监控服务器所指定的基于HTML5可视化监控网站的网址，登录系统进入可视化监控平台，实现可视化组态或监控。6.权利要求1所述一种基于HTML5的可视化监控平台的应用方法，其特征在于，监控服务器提供基于HTML5可视化监控网站的Web服务、用户权限管理服务与数据服务;基于HTML5可视化监控网站由系统登录、可视化组态、可视化监控多个页面组成，可视化组态与可视化监控的页面由Canvas技术实现;监控服务器通过HTTP协议向监控终端提供可视化控件和图元信息数据服务，通过WebSocket协议提供实时和历史数据服务;监控终端可为手机、平板电脑、笔记本电脑、PC机，用户在支持HTML5浏览器中输入监控服务器所指定的基于HTML5可视化监控网站的网址，进入系统登录界面，输入监控服务器分配的用户名和密码，工程师权限的用户进入可视化组态主页面，可实现监控画面的组态、添加、删除、修改操作，其他权限的用户进入可视化监控的主页面，可根据不同的用户权限对实时或历史数据进行相关操作。
【文档编号】H04L12/24GK105915394SQ201610437077
【公开日】2016年8月31日
【申请日】2016年6月20日
【发明人】郭循钊, 张志抗, 甘险峰, 郑建宇
【申请人】河南派亚尼尔自动化设备有限公司