一種基于html5的可視化監(jiān)控平臺及應(yīng)用方法
【專利摘要】一種基于HTML5的可視化監(jiān)控平臺及應(yīng)用方法是工業(yè)監(jiān)控與數(shù)據(jù)可視化領(lǐng)域，它包括監(jiān)控服務(wù)器和監(jiān)控終端，所述監(jiān)控服務(wù)器提供基于HTML5可視化監(jiān)控網(wǎng)站的Web服務(wù)、用戶權(quán)限管理服務(wù)和數(shù)據(jù)服務(wù)；所述基于HTML5可視化監(jiān)控網(wǎng)站由系統(tǒng)登錄、可視化組態(tài)、可視化監(jiān)控等多頁面組成，可視化組態(tài)與可視化監(jiān)控的頁面由Canvas技術(shù)實(shí)現(xiàn)；所述可視化監(jiān)控網(wǎng)站包括工程師、操作員和訪問員等權(quán)限；所述監(jiān)控服務(wù)器通過HTTP協(xié)議向監(jiān)控終端提供可視化控件和圖元信息數(shù)據(jù)服務(wù)，通過WebSocket協(xié)議提供實(shí)時和歷史數(shù)據(jù)服務(wù)；通過瀏覽器與監(jiān)控服務(wù)器連接實(shí)現(xiàn)可視化組態(tài)或監(jiān)控。
【專利說明】
一種基于HTML5的可視化監(jiān)控平臺及應(yīng)用方法
技術(shù)領(lǐng)域
[0001]本發(fā)明涉及監(jiān)控與數(shù)據(jù)可視化領(lǐng)域，尤其是一種基于HTML5的可視化監(jiān)控平臺及應(yīng)用方法。
【背景技術(shù)】
[0002]隨著互聯(lián)網(wǎng)的發(fā)展，傳統(tǒng)的工業(yè)監(jiān)控與數(shù)據(jù)可視化技術(shù)已越來越不能滿足用戶需求，用戶不僅期望可以在監(jiān)控室看到監(jiān)控數(shù)據(jù)，同時也可以在監(jiān)控室外的地方利用隨身攜帶的移動終端(手機(jī)、平板電腦等)查看監(jiān)控數(shù)據(jù)，若在監(jiān)控頁面上發(fā)現(xiàn)問題時也可以在移動終端上隨時做出調(diào)整。目前大部分的監(jiān)控終端需要讓用戶安裝監(jiān)控軟件，少部分提供瀏覽器方式，但需要安裝相應(yīng)插件，數(shù)據(jù)實(shí)時性不高，這為用戶的安裝操作帶來很大不便。

【發(fā)明內(nèi)容】

[0003]本發(fā)明的目的在于提出一種跨平臺、可視化程度高、數(shù)據(jù)實(shí)時性強(qiáng)、操作方便的一種基于HTML5的可視化監(jiān)控平臺及應(yīng)用方法，它克服了現(xiàn)有技術(shù)存在的不足，為了達(dá)到上述目的，本發(fā)明采用以下技術(shù)方案予以實(shí)現(xiàn)。
[0004]本發(fā)明包括監(jiān)控服務(wù)器和監(jiān)控終端，所述監(jiān)控服務(wù)器提供基于HTML5可視化監(jiān)控網(wǎng)站的Web服務(wù)、用戶權(quán)限管理服務(wù)和數(shù)據(jù)服務(wù);所述基于HTML5可視化監(jiān)控網(wǎng)站由系統(tǒng)登錄、可視化組態(tài)、可視化監(jiān)控多頁面組成，可視化組態(tài)與可視化監(jiān)控的頁面由Canvas技術(shù)實(shí)現(xiàn);所述可視化監(jiān)控網(wǎng)站訪問權(quán)限包括工程師、操作員和訪問員；所述監(jiān)控服務(wù)器通過HTTP協(xié)議向監(jiān)控終端提供可視化控件和圖元數(shù)據(jù)服務(wù)，通過WebSocket協(xié)議提供實(shí)時和歷史數(shù)據(jù)服務(wù);所述監(jiān)控終端可以是手機(jī)、平板電腦、PC機(jī)或智能電視，通過瀏覽器與監(jiān)控服務(wù)器連接實(shí)現(xiàn)可視化組態(tài)或監(jiān)控。
[0005]本發(fā)明的進(jìn)一步特點(diǎn)在于:
所述基于HTML5可視化監(jiān)控網(wǎng)站由系統(tǒng)登錄、可視化組態(tài)、可視化監(jiān)控多頁面組成；可視化組態(tài)與可視化監(jiān)控的頁面由HTML5的Canvas技術(shù)實(shí)現(xiàn)，利用Canvas和JavaScript建立可視化程度高的控件與圖元，每個控件和圖元都有若干屬性和函數(shù)，可與監(jiān)控服務(wù)器特定實(shí)時數(shù)據(jù)或歷史數(shù)據(jù)進(jìn)行關(guān)聯(lián)。組態(tài)時構(gòu)建導(dǎo)航菜單，可對導(dǎo)航菜單項進(jìn)行添加、刪除和修改操作，在導(dǎo)航菜單下添加空白頁面，拖動控件或圖元，修改屬性，關(guān)聯(lián)數(shù)據(jù)，組態(tài)出不同頁面;可視化監(jiān)控頁面是已組態(tài)好的頁面，頁面中的控件和圖元將與監(jiān)控服務(wù)器關(guān)聯(lián)的數(shù)據(jù)可視化，用戶可查看或進(jìn)行相關(guān)操作。
[0006]所述可視化監(jiān)控網(wǎng)站包括工程師、操作員和訪問員權(quán)限；在用戶登錄系統(tǒng)時，工程師權(quán)限的用戶進(jìn)入可視化組態(tài)主頁面，可實(shí)現(xiàn)監(jiān)控畫面的組態(tài)、添加、刪除和修改操作，其他權(quán)限的用戶進(jìn)入可視化監(jiān)控的主頁面，可對實(shí)時或歷史數(shù)據(jù)進(jìn)行相關(guān)操作。
[0007]所述監(jiān)控服務(wù)器通過HTTP協(xié)議提供可視化控件和圖元信息數(shù)據(jù)服務(wù)。所述監(jiān)控服務(wù)器通過WebSocket協(xié)議提供實(shí)時數(shù)據(jù)和歷史數(shù)據(jù)服務(wù)，所述實(shí)時數(shù)據(jù)服務(wù)是監(jiān)控服務(wù)器通過推送形式將實(shí)時數(shù)據(jù)發(fā)送至監(jiān)控終端瀏覽器，所述歷史數(shù)據(jù)服務(wù)是監(jiān)控服務(wù)器在監(jiān)控終端瀏覽器查詢時才將歷史數(shù)據(jù)發(fā)送至要查詢的監(jiān)控終端瀏覽器。
[0008]所述監(jiān)控終端可為手機(jī)、平板電腦、PC機(jī)或智能電視，在支持HTML5的瀏覽器中輸入監(jiān)控服務(wù)器所指定的基于HTML5可視化監(jiān)控網(wǎng)站的網(wǎng)址，登錄系統(tǒng)進(jìn)入可視化監(jiān)控平臺，實(shí)現(xiàn)可視化組態(tài)或監(jiān)控。
[0009]本發(fā)明的應(yīng)用方法是:監(jiān)控服務(wù)器提供基于HTML5可視化監(jiān)控網(wǎng)站的Web服務(wù)、用戶權(quán)限管理服務(wù)與數(shù)據(jù)服務(wù);基于HTML5可視化監(jiān)控網(wǎng)站由系統(tǒng)登錄、可視化組態(tài)、可視化監(jiān)控多個頁面組成，可視化組態(tài)與可視化監(jiān)控的頁面由Canvas技術(shù)實(shí)現(xiàn);監(jiān)控服務(wù)器通過HTTP協(xié)議向監(jiān)控終端提供可視化控件和圖元信息數(shù)據(jù)服務(wù)，通過WebSocket協(xié)議提供實(shí)時和歷史數(shù)據(jù)服務(wù)。監(jiān)控終端可為手機(jī)、平板電腦、筆記本電腦、PC機(jī)，用戶在支持HTML5瀏覽器中輸入監(jiān)控服務(wù)器所指定的基于HTML5可視化監(jiān)控網(wǎng)站的網(wǎng)址，進(jìn)入系統(tǒng)登錄界面，輸入監(jiān)控服務(wù)器分配的用戶名和密碼，工程師權(quán)限的用戶進(jìn)入可視化組態(tài)主頁面，可實(shí)現(xiàn)監(jiān)控畫面的組態(tài)、添加、刪除、修改操作，其他權(quán)限的用戶進(jìn)入可視化監(jiān)控的主頁面，可根據(jù)不同的用戶權(quán)限對實(shí)時或歷史數(shù)據(jù)進(jìn)行相關(guān)操作。
[0010]基于以上技術(shù)方案的公開，本發(fā)明具有以下顯著效果:
(I)監(jiān)控終端跨平臺。本發(fā)明基于HTML5技術(shù)來實(shí)現(xiàn)，HTML5是最新的HTML技術(shù)，具有跨平臺特性和設(shè)備兼容性，因此監(jiān)控終端不用安裝任何軟件或插件就可以在不同的系統(tǒng)(Window、Linux、Unix、Android、1S、WP等)瀏覽器下運(yùn)行。
[0011](2)可視化程度高。本發(fā)明可視化組態(tài)與監(jiān)控頁面中所有的控件與圖元采用HTML5的Canvas技術(shù)實(shí)現(xiàn)，控件和圖元可根據(jù)實(shí)際監(jiān)控對象任意繪制，并可添加圖元庫中，最大程度地實(shí)現(xiàn)監(jiān)控數(shù)據(jù)的可視化，使監(jiān)控更為形象與直觀。
[0012](3)數(shù)據(jù)實(shí)時性強(qiáng)。本發(fā)明在監(jiān)控服務(wù)器與監(jiān)控終端的數(shù)據(jù)傳輸上采用WebSocket協(xié)議，能更好的節(jié)省服務(wù)器資源和帶寬并達(dá)到實(shí)時通訊，實(shí)時數(shù)據(jù)采用服務(wù)器推送的機(jī)制，歷史數(shù)據(jù)采用瀏覽器查詢的機(jī)制，進(jìn)一步提高了監(jiān)控數(shù)據(jù)的實(shí)時性。
[0013](4)監(jiān)控更簡單。本發(fā)明可以利用手機(jī)、平板電腦、筆記本電腦、PC機(jī)等多種方式實(shí)現(xiàn)監(jiān)控，在監(jiān)控終端不必安裝其他軟件或插件，只需要在瀏覽器上輸入網(wǎng)址就可以做到，因此本發(fā)明的監(jiān)控打破了傳統(tǒng)監(jiān)控的地域局限，監(jiān)控畫面需要修改，用戶也不必去監(jiān)控室，通過隨身攜帶的手機(jī)或可上網(wǎng)的電腦做畫面組態(tài)，操作更直觀、簡單，更具人性化。
【附圖說明】
[0014]圖1為一種基于HTML5的可視化監(jiān)控平臺結(jié)構(gòu)示意圖。
[0015]圖2為本發(fā)明監(jiān)控服務(wù)器服務(wù)結(jié)構(gòu)示意圖。
[0016]圖3為一種基于HTML5的可視化監(jiān)控平臺的應(yīng)用方法流程圖。
[0017]圖4為本發(fā)明監(jiān)控服務(wù)器數(shù)據(jù)服務(wù)原理示意圖。
【具體實(shí)施方式】
[0018]實(shí)施例1、本發(fā)明包括監(jiān)控服務(wù)器和監(jiān)控終端;所述監(jiān)控服務(wù)器提供基于HTML5可視化監(jiān)控網(wǎng)站的Web服務(wù)、用戶權(quán)限管理服務(wù)和數(shù)據(jù)服務(wù);所述基于HTML5可視化監(jiān)控網(wǎng)站由系統(tǒng)登錄、可視化組態(tài)、可視化監(jiān)控等多頁面組成，可視化組態(tài)與可視化監(jiān)控的頁面由Canvas技術(shù)實(shí)現(xiàn);所述可視化監(jiān)控網(wǎng)站訪問權(quán)限包括工程師、操作員和訪問員;所述監(jiān)控服務(wù)器通過HTTP協(xié)議向監(jiān)控終端提供可視化控件和圖元數(shù)據(jù)服務(wù)，通過WebSocket協(xié)議提供實(shí)時和歷史數(shù)據(jù)服務(wù);所述監(jiān)控終端可以是手機(jī)、平板電腦、PC機(jī)或智能電視，通過瀏覽器與監(jiān)控服務(wù)器連接實(shí)現(xiàn)可視化組態(tài)或監(jiān)控。
[0019]實(shí)施例2、所述基于HTML5可視化監(jiān)控網(wǎng)站由系統(tǒng)登錄、可視化組態(tài)、可視化監(jiān)控多頁面組成；可視化組態(tài)與可視化監(jiān)控的頁面由HTML5的Canvas技術(shù)實(shí)現(xiàn)，利用Canvas和JavaScript建立可視化程度高的控件與圖元，每個控件和圖元都有若干屬性和函數(shù)，可與監(jiān)控服務(wù)器特定實(shí)時數(shù)據(jù)或歷史數(shù)據(jù)進(jìn)行關(guān)聯(lián);組態(tài)時構(gòu)建導(dǎo)航菜單，可對導(dǎo)航菜單項進(jìn)行添加、刪除和修改操作，在導(dǎo)航菜單下添加空白頁面，拖動控件或圖元，修改屬性，關(guān)聯(lián)數(shù)據(jù)，組態(tài)出不同頁面?？梢暬O(jiān)控頁面是已組態(tài)好的頁面，頁面中的控件和圖元將與監(jiān)控服務(wù)器關(guān)聯(lián)的數(shù)據(jù)可視化，用戶可查看或進(jìn)行相關(guān)操作。
[0020]實(shí)施例3、所述可視化監(jiān)控網(wǎng)站包括工程師、操作員和訪問員權(quán)限；在用戶登錄系統(tǒng)時，工程師權(quán)限的用戶進(jìn)入可視化組態(tài)主頁面，可實(shí)現(xiàn)監(jiān)控畫面的組態(tài)、添加、刪除和修改操作，其他權(quán)限的用戶進(jìn)入可視化監(jiān)控的主頁面，可對實(shí)時或歷史數(shù)據(jù)進(jìn)行相關(guān)操作。
[0021]實(shí)施例4、所述監(jiān)控服務(wù)器通過HTTP協(xié)議提供可視化控件和圖元信息數(shù)據(jù)服務(wù);所述監(jiān)控服務(wù)器通過WebSocket協(xié)議提供實(shí)時數(shù)據(jù)和歷史數(shù)據(jù)服務(wù)，所述實(shí)時數(shù)據(jù)服務(wù)是監(jiān)控服務(wù)器通過推送形式將實(shí)時數(shù)據(jù)發(fā)送至監(jiān)控終端瀏覽器，所述歷史數(shù)據(jù)服務(wù)是監(jiān)控服務(wù)器在監(jiān)控終端瀏覽器查詢時才將歷史數(shù)據(jù)發(fā)送至要查詢的監(jiān)控終端瀏覽器。
[0022]實(shí)施例5、所述監(jiān)控終端可為手機(jī)、平板電腦、PC機(jī)或智能電視，在支持HTML5的瀏覽器中輸入監(jiān)控服務(wù)器所指定的基于HTML5可視化監(jiān)控網(wǎng)站的網(wǎng)址，登錄系統(tǒng)進(jìn)入可視化監(jiān)控平臺，實(shí)現(xiàn)可視化組態(tài)或監(jiān)控。
[0023]實(shí)施例6、本發(fā)明的應(yīng)用方法是:監(jiān)控服務(wù)器提供基于HTML5可視化監(jiān)控網(wǎng)站的Web服務(wù)、用戶權(quán)限管理服務(wù)與數(shù)據(jù)服務(wù);基于HTML5可視化監(jiān)控網(wǎng)站由系統(tǒng)登錄、可視化組態(tài)、可視化監(jiān)控多個頁面組成，可視化組態(tài)與可視化監(jiān)控的頁面由Canvas技術(shù)實(shí)現(xiàn)。監(jiān)控服務(wù)器通過HTTP協(xié)議向監(jiān)控終端提供可視化控件和圖元信息數(shù)據(jù)服務(wù)，通過WebSocket協(xié)議提供實(shí)時和歷史數(shù)據(jù)服務(wù)；監(jiān)控終端可為手機(jī)、平板電腦、筆記本電腦、PC機(jī)，用戶在支持HTML5瀏覽器中輸入監(jiān)控服務(wù)器所指定的基于HTML5可視化監(jiān)控網(wǎng)站的網(wǎng)址，進(jìn)入系統(tǒng)登錄界面，輸入監(jiān)控服務(wù)器分配的用戶名和密碼，工程師權(quán)限的用戶進(jìn)入可視化組態(tài)主頁面，可實(shí)現(xiàn)監(jiān)控畫面的組態(tài)、添加、刪除、修改操作，其他權(quán)限的用戶進(jìn)入可視化監(jiān)控的主頁面，可根據(jù)不同的用戶權(quán)限對實(shí)時或歷史數(shù)據(jù)進(jìn)行相關(guān)操作。
[0024]以上所述僅為本發(fā)明的優(yōu)選實(shí)施例而已，在基本原理相同的情況下所做出的變化、改型、添加或替換，也應(yīng)屬于本發(fā)明的保護(hù)范圍。
【主權(quán)項】
1.一種基于HTML5的可視化監(jiān)控平臺，其特征在于，包括監(jiān)控服務(wù)器和監(jiān)控終端;所述監(jiān)控服務(wù)器提供基于HTML5可視化監(jiān)控網(wǎng)站的Web服務(wù)、用戶權(quán)限管理服務(wù)和數(shù)據(jù)服務(wù);所述基于HTML5可視化監(jiān)控網(wǎng)站由系統(tǒng)登錄、可視化組態(tài)、可視化監(jiān)控多頁面組成，可視化組態(tài)與可視化監(jiān)控的頁面由Canvas技術(shù)實(shí)現(xiàn);所述可視化監(jiān)控網(wǎng)站訪問權(quán)限包括工程師、操作員和訪問員；所述監(jiān)控服務(wù)器通過HTTP協(xié)議向監(jiān)控終端提供可視化控件和圖元數(shù)據(jù)服務(wù)，通過WebSocket協(xié)議提供實(shí)時和歷史數(shù)據(jù)服務(wù);所述監(jiān)控終端可以是手機(jī)、平板電腦、PC機(jī)或智能電視，通過瀏覽器與監(jiān)控服務(wù)器連接實(shí)現(xiàn)可視化組態(tài)或監(jiān)控。2.根據(jù)權(quán)利要求1所述的一種基于HTML5的可視化監(jiān)控平臺，其特征在于，所述基于HTML5可視化監(jiān)控網(wǎng)站由系統(tǒng)登錄、可視化組態(tài)、可視化監(jiān)控多頁面組成；可視化組態(tài)與可視化監(jiān)控的頁面由HTML5的Canvas技術(shù)實(shí)現(xiàn)，利用Canvas和JavaScript建立可視化程度高的控件與圖元，每個控件和圖元都有若干屬性和函數(shù)，可與監(jiān)控服務(wù)器特定實(shí)時數(shù)據(jù)或歷史數(shù)據(jù)進(jìn)行關(guān)聯(lián);組態(tài)時構(gòu)建導(dǎo)航菜單，可對導(dǎo)航菜單項進(jìn)行添加、刪除和修改操作，在導(dǎo)航菜單下添加空白頁面，拖動控件或圖元，修改屬性，關(guān)聯(lián)數(shù)據(jù)，組態(tài)出不同頁面;可視化監(jiān)控頁面是已組態(tài)好的頁面，頁面中的控件和圖元將與監(jiān)控服務(wù)器關(guān)聯(lián)的數(shù)據(jù)可視化，用戶可查看或進(jìn)行相關(guān)操作。3.根據(jù)權(quán)利要求1所述的一種基于HTML5的可視化監(jiān)控平臺，其特征在于，所述可視化監(jiān)控網(wǎng)站包括工程師、操作員和訪問員權(quán)限，在用戶登錄系統(tǒng)時，工程師權(quán)限的用戶進(jìn)入可視化組態(tài)主頁面，可實(shí)現(xiàn)監(jiān)控畫面的組態(tài)、添加、刪除和修改操作，其他權(quán)限的用戶進(jìn)入可視化監(jiān)控的主頁面，可對實(shí)時或歷史數(shù)據(jù)進(jìn)行相關(guān)操作。4.根據(jù)權(quán)利要求1所述的一種基于HTML5的可視化監(jiān)控平臺，其特征在于，所述監(jiān)控服務(wù)器通過HTTP協(xié)議提供可視化控件和圖元信息數(shù)據(jù)服務(wù);所述監(jiān)控服務(wù)器通過WebSocket協(xié)議提供實(shí)時數(shù)據(jù)和歷史數(shù)據(jù)服務(wù)，所述實(shí)時數(shù)據(jù)服務(wù)是監(jiān)控服務(wù)器通過推送形式將實(shí)時數(shù)據(jù)發(fā)送至監(jiān)控終端瀏覽器，所述歷史數(shù)據(jù)服務(wù)是監(jiān)控服務(wù)器在監(jiān)控終端瀏覽器查詢時才將歷史數(shù)據(jù)發(fā)送至要查詢的監(jiān)控終端瀏覽器。5.根據(jù)權(quán)利要求1所述的一種基于HTML5的可視化監(jiān)控平臺，其特征在于，所述監(jiān)控終端可為手機(jī)、平板電腦、PC機(jī)或智能電視，在支持HTML5的瀏覽器中輸入監(jiān)控服務(wù)器所指定的基于HTML5可視化監(jiān)控網(wǎng)站的網(wǎng)址，登錄系統(tǒng)進(jìn)入可視化監(jiān)控平臺，實(shí)現(xiàn)可視化組態(tài)或監(jiān)控。6.權(quán)利要求1所述一種基于HTML5的可視化監(jiān)控平臺的應(yīng)用方法，其特征在于，監(jiān)控服務(wù)器提供基于HTML5可視化監(jiān)控網(wǎng)站的Web服務(wù)、用戶權(quán)限管理服務(wù)與數(shù)據(jù)服務(wù);基于HTML5可視化監(jiān)控網(wǎng)站由系統(tǒng)登錄、可視化組態(tài)、可視化監(jiān)控多個頁面組成，可視化組態(tài)與可視化監(jiān)控的頁面由Canvas技術(shù)實(shí)現(xiàn);監(jiān)控服務(wù)器通過HTTP協(xié)議向監(jiān)控終端提供可視化控件和圖元信息數(shù)據(jù)服務(wù)，通過WebSocket協(xié)議提供實(shí)時和歷史數(shù)據(jù)服務(wù);監(jiān)控終端可為手機(jī)、平板電腦、筆記本電腦、PC機(jī)，用戶在支持HTML5瀏覽器中輸入監(jiān)控服務(wù)器所指定的基于HTML5可視化監(jiān)控網(wǎng)站的網(wǎng)址，進(jìn)入系統(tǒng)登錄界面，輸入監(jiān)控服務(wù)器分配的用戶名和密碼，工程師權(quán)限的用戶進(jìn)入可視化組態(tài)主頁面，可實(shí)現(xiàn)監(jiān)控畫面的組態(tài)、添加、刪除、修改操作，其他權(quán)限的用戶進(jìn)入可視化監(jiān)控的主頁面，可根據(jù)不同的用戶權(quán)限對實(shí)時或歷史數(shù)據(jù)進(jìn)行相關(guān)操作。
【文檔編號】H04L12/24GK105915394SQ201610437077
【公開日】2016年8月31日
【申請日】2016年6月20日
【發(fā)明人】郭循釗, 張志抗, 甘險峰, 鄭建宇
【申請人】河南派亞尼爾自動化設(shè)備有限公司