基于Web 的遠(yuǎn)程監(jiān)控系統(tǒng)人機(jī)界面開發(fā)設(shè)計(jì)與實(shí)現(xiàn)

張子涵

（東北林業(yè)大學(xué)，黑龍 江哈爾濱 150040）

傳統(tǒng)的遠(yuǎn)程監(jiān)控系統(tǒng)主要是基于C/S 架構(gòu)，具有硬件成本高、維護(hù)工作量大等弊端。相比之下，基于Web 的遠(yuǎn)程監(jiān)控系統(tǒng)，不僅解決了上述問題，而且降低了操作難度，可以支持資源共享以及實(shí)現(xiàn)全天候、全方位的監(jiān)控。但是基于Web的遠(yuǎn)程監(jiān)控系統(tǒng)，要通過瀏覽器查看監(jiān)控畫面，為了進(jìn)一步提升網(wǎng)頁圖形圖像及視頻畫面的清晰度，必須要開發(fā)設(shè)計(jì)更加友好的人機(jī)界面?；诖?，本文對基于Web 的遠(yuǎn)程監(jiān)控系統(tǒng)人機(jī)界面開發(fā)設(shè)計(jì)與功能實(shí)現(xiàn)展開了探究。

1 基于Web 的人機(jī)界面系統(tǒng)設(shè)計(jì)

在遠(yuǎn)程監(jiān)控系統(tǒng)中，人機(jī)界面作為關(guān)鍵的組成部分，是連接系統(tǒng)與用戶的重要媒介，也是決定系統(tǒng)操作體驗(yàn)的主要因素。從使用功能上來看，人機(jī)界面系統(tǒng)除了要提供基本的數(shù)據(jù)查詢、畫面（視頻）顯示和指令操作外，還必須具有交互性強(qiáng)、友好度高等特性，讓用戶在操作時(shí)獲得更好的體驗(yàn)?；谟脩舨僮餍枰褪褂眯枨螅谌藱C(jī)界面系統(tǒng)設(shè)計(jì)的流程如下：

第一，進(jìn)行圖形界面工具設(shè)計(jì)。其設(shè)計(jì)要求是能夠采集到的各類數(shù)據(jù)或監(jiān)控參數(shù)，以直觀的方式（如圖形、視頻）展示給用戶，讓用戶能夠一目了然地掌握現(xiàn)場情況。設(shè)計(jì)環(huán)節(jié)要給用戶提供兩種類型的圖形界面工具，一種是常見的基本圖形，如直線、曲線、矩形、三角形等，另一種是較為復(fù)雜的圖形，如開關(guān)、發(fā)電機(jī)等常用電力設(shè)備的示意圖。

第二，進(jìn)行曲線及趨勢圖設(shè)計(jì)。其設(shè)計(jì)要求是直觀地反映實(shí)時(shí)數(shù)據(jù)和歷史數(shù)據(jù)的變化情況，應(yīng)基于曲線圖或趨勢圖的分析進(jìn)行預(yù)測，以便于更好地了解監(jiān)控對象的未來變化情況，提前做好應(yīng)對。實(shí)時(shí)曲線圖側(cè)重于直觀反映監(jiān)控對象當(dāng)前情況，而歷史趨勢圖則可以推測出發(fā)展規(guī)律，分析和利用價(jià)值更高。

第三，進(jìn)行異常報(bào)警系統(tǒng)設(shè)計(jì)。在監(jiān)測到異常數(shù)據(jù)后，需要自動(dòng)調(diào)用報(bào)警指令發(fā)出警報(bào)，提醒技術(shù)人員加以處理。具體又可分成模擬量越界報(bào)警、系統(tǒng)故障報(bào)警等類型。

基于系統(tǒng)安全考慮，在人機(jī)界面開發(fā)設(shè)計(jì)時(shí)還應(yīng)加入用戶權(quán)限認(rèn)證功能，既可以明確不同人員的職責(zé)分工，同時(shí)又可以防止用戶越權(quán)操作。一般來說將用戶劃分成三類，即一般權(quán)限的操作員、高級(jí)權(quán)限的操作員，以及系統(tǒng)工程師。不同人員的權(quán)限設(shè)置如表1 所示。

表1 基于權(quán)限認(rèn)證的用戶操作權(quán)限劃分

2 人機(jī)界面開發(fā)設(shè)計(jì)

2.1 基于Ajax 和SOAP 的人機(jī)界面系統(tǒng)設(shè)計(jì)

本設(shè)計(jì)對Java Script 和服務(wù)器腳本的人機(jī)界面框架進(jìn)行改進(jìn)，加入了Ajax 技術(shù)和SOAP 協(xié)議，保證在主站和子站之間的數(shù)據(jù)交換都是基于XML 進(jìn)行，進(jìn)一步提高了實(shí)時(shí)數(shù)據(jù)交換速率。設(shè)計(jì)環(huán)節(jié)中的Ajax 的Web 應(yīng)用除了支持更高級(jí)的UI 功能外，還提供了更加平滑和優(yōu)化的服務(wù)器交互過程，并且實(shí)現(xiàn)了異步通信，簡化了Web 開發(fā)流程。在Web 頁面運(yùn)行時(shí)，通過Java Script 從服務(wù)器采集數(shù)據(jù)，并實(shí)時(shí)同步至頁面中。所有工作均在后臺(tái)完成，當(dāng)用戶發(fā)起操作請求時(shí)，客戶端可立刻執(zhí)行該操作，從而解決了數(shù)據(jù)處理和指令傳達(dá)之間的矛盾。在客戶端方面，選擇SVG 矢量圖形顯示圖形或視頻內(nèi)容。整個(gè)人機(jī)界面系統(tǒng)的結(jié)構(gòu)組成如圖1 所示。

圖1 基于Web 的人機(jī)界面系統(tǒng)結(jié)構(gòu)圖

基于XML 語言的SVG（可縮放矢量圖形）具有較強(qiáng)的可擴(kuò)展性能，支持較大比例的放大、縮小，并且不會(huì)出現(xiàn)模糊、失真的情況。同時(shí)，SVG 圖形文件的體積更小，一方面是減少了傳輸過程中對網(wǎng)絡(luò)資源的占用，減輕了系統(tǒng)運(yùn)行負(fù)擔(dān)；另一方面也提高了數(shù)據(jù)傳輸效率，做到了同步顯示。

2.2 人機(jī)界面系統(tǒng)的數(shù)據(jù)更新過程

該系統(tǒng)的數(shù)據(jù)采集、傳輸和更新過程包括：a.用戶執(zhí)行加載或檢索數(shù)據(jù)的操作后，后臺(tái)會(huì)通過Ajax 引擎向Web 服務(wù)器發(fā)出請求；b.Web 服務(wù)器接收請求后，無法從數(shù)據(jù)庫中直接調(diào)用相應(yīng)的數(shù)據(jù)，而是從SOAP 服務(wù)器發(fā)出數(shù)據(jù)服務(wù)請求，然后實(shí)時(shí)數(shù)據(jù)庫根據(jù)該請求從對應(yīng)的分區(qū)中調(diào)用數(shù)據(jù)，并反饋給SOAP 服務(wù)器。該服務(wù)器利用XML 對所得數(shù)據(jù)做格式化處理，將實(shí)時(shí)數(shù)據(jù)轉(zhuǎn)化成標(biāo)準(zhǔn)格式數(shù)據(jù)后，再傳輸至Web 服務(wù)器，最后經(jīng)由Web服務(wù)器將數(shù)據(jù)發(fā)送至客戶端。c.在客戶端內(nèi)對XML文檔進(jìn)行解析，將解析后的實(shí)時(shí)數(shù)據(jù)制作成DOM節(jié)點(diǎn)樹，使每一個(gè)階段都能與SVG 的設(shè)備圖元之間構(gòu)建映射關(guān)系。d.根據(jù)解析獲得的實(shí)時(shí)數(shù)據(jù)，運(yùn)行客戶端上的Java Script 腳本函數(shù)，并判斷是否執(zhí)行動(dòng)畫效果。如需執(zhí)行，則SVG 會(huì)自動(dòng)優(yōu)化數(shù)據(jù)并生成最終的動(dòng)畫效果，通過屏幕呈現(xiàn)出來，完成用戶與系統(tǒng)的動(dòng)態(tài)交互。

3 基于Web 的遠(yuǎn)程監(jiān)控系統(tǒng)人機(jī)界面功能實(shí)現(xiàn)

3.1 人機(jī)界面系統(tǒng)的開發(fā)環(huán)境

為了驗(yàn)證基于Web 的遠(yuǎn)程監(jiān)控系統(tǒng)人機(jī)界面功能的運(yùn)行情況，基于Windows 操作系統(tǒng)設(shè)計(jì)了仿真實(shí)驗(yàn)，人機(jī)界面系統(tǒng)的開發(fā)工具和運(yùn)行環(huán)境如表2 所示。

表2 人機(jī)界面系統(tǒng)的開發(fā)與運(yùn)行環(huán)境

3.2 人機(jī)界面系統(tǒng)的功能實(shí)現(xiàn)

3.2.1 圖形界面工具

在人機(jī)界面系統(tǒng)的圖形界面中，除了要向用戶展示已經(jīng)完成的圖形畫面外，還應(yīng)支持用戶自己設(shè)計(jì)圖形畫面來展示監(jiān)控現(xiàn)場，這樣才能根據(jù)用戶自己的需要，靈活觀察監(jiān)控現(xiàn)場各個(gè)角落的細(xì)節(jié)信息。界面圖形工具模塊如圖2 所示。

圖2 圖形界面工具

結(jié)合圖2 可知，工具欄中不僅提供了常規(guī)的直線、曲線、圓形等簡單形狀，而且也能夠選擇更加復(fù)雜的圖元直接添加到界面中心的繪畫面板中。圖形界面工具可支持的繪圖功能有圖形縮放、圖形拖動(dòng)、圖形展示等多種。以圖形縮放為例，用戶只需要調(diào)出縮放菜單，手動(dòng)輸入縮小或放大的倍數(shù)，點(diǎn)擊確定后即可完成圖形縮放操作，其縮放系數(shù)與視口及視窗之間的關(guān)系比例為公式（1）：

3.2.2 歷史數(shù)據(jù)統(tǒng)計(jì)圖表顯示

該系統(tǒng)中所有的數(shù)據(jù)交換都是基于XML 完成的，在進(jìn)行歷史數(shù)據(jù)處理時(shí)需要使用到XSLT（可擴(kuò)展樣式語言轉(zhuǎn)換）。XSLT 是專門用于轉(zhuǎn)換XML 文檔結(jié)構(gòu)的一種語言，其運(yùn)行原理是尋找匹配符合特定條件的節(jié)點(diǎn)，然后利用既定的規(guī)則或遵循相關(guān)的協(xié)議（如SOAP 協(xié)議），將XML 數(shù)據(jù)轉(zhuǎn)化成另一種可以準(zhǔn)確描述數(shù)據(jù)的文檔，如HTML 格式文檔或PDF 格式文檔等。由于該系統(tǒng)是基于SVG 矢量圖形來展示監(jiān)控內(nèi)容的，因此最終需要將XML 數(shù)據(jù)文件轉(zhuǎn)化成SVG 格式文檔，轉(zhuǎn)換過程如圖3 所示。

結(jié)合圖3 可知，XML 格式文檔作為源文件，其中包含了大量與監(jiān)控對象有關(guān)的統(tǒng)計(jì)圖表。結(jié)合數(shù)據(jù)提取流程，XML文檔是基于SOAP 協(xié)議從實(shí)時(shí)數(shù)據(jù)庫中提取得來的，無法直接展示。因此需要使用轉(zhuǎn)換器XML 格式文檔轉(zhuǎn)換為XSLT文件。根據(jù)圖表數(shù)據(jù)內(nèi)容的不同，轉(zhuǎn)換后的XSLT 文件有餅狀圖、曲線圖和柱狀圖三種類型。然后在從文件中提取數(shù)據(jù)得到對應(yīng)的SVG 文檔。

圖3 使用XSLT 生成SVG 文檔流程圖

3.2.3 實(shí)時(shí)數(shù)據(jù)趨勢圖顯示

遠(yuǎn)程監(jiān)控系統(tǒng)在運(yùn)行中，前端監(jiān)控?cái)?shù)據(jù)經(jīng)過通信傳遞和后臺(tái)處理后，最終在人機(jī)界面上呈現(xiàn)出來，由于中間會(huì)花費(fèi)一定的時(shí)間，因此界面上顯示的畫面往往不是監(jiān)控對象的實(shí)時(shí)狀態(tài)。本系統(tǒng)結(jié)合SVG 和Ajax 異步傳輸優(yōu)勢，縮短了數(shù)據(jù)傳輸及加工時(shí)間，保證了通過瀏覽器可以展示實(shí)時(shí)數(shù)據(jù)曲線。生成實(shí)時(shí)數(shù)據(jù)趨勢圖主要步驟為：首先是由客戶端每隔10-100ms 持續(xù)發(fā)出請求，一直到服務(wù)器接收請求。然后服務(wù)器執(zhí)行SQL 語句獲取想要的數(shù)據(jù)。得到數(shù)據(jù)后服務(wù)器將數(shù)據(jù)拼湊成SVG 語句, 其代碼如下：

利用SVG 解析器實(shí)時(shí)渲染已經(jīng)發(fā)生變化的部分，并在刷新頁面后實(shí)時(shí)更新出來，得到實(shí)時(shí)數(shù)據(jù)趨勢圖，如圖4 所示。

圖4 模擬實(shí)時(shí)監(jiān)控?cái)?shù)據(jù)顯示效果

結(jié)束語

本文設(shè)計(jì)的一種基于Web 的人機(jī)界面子系統(tǒng)，綜合運(yùn)用了Ajax 技術(shù)、SVG 技術(shù)和SOAP 協(xié)議，支持?jǐn)?shù)據(jù)實(shí)時(shí)更新、方便用戶自主操作，可同步展示監(jiān)控對象當(dāng)前狀態(tài)，提高了遠(yuǎn)程監(jiān)控系統(tǒng)的實(shí)用性。