一種基于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日
【發明人】郭循釗, 張志抗, 甘險峰, 鄭建宇
【申請人】河南派亞尼爾自動化設備有限公司