張子涵

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

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

1 基于Web 的人機界面系統(tǒng)設計

在遠程監(jiān)控系統(tǒng)中，人機界面作為關鍵的組成部分，是連接系統(tǒng)與用戶的重要媒介，也是決定系統(tǒng)操作體驗的主要因素。從使用功能上來看，人機界面系統(tǒng)除了要提供基本的數(shù)據(jù)查詢、畫面（視頻）顯示和指令操作外，還必須具有交互性強、友好度高等特性，讓用戶在操作時獲得更好的體驗。基于用戶操作需要和使用需求，在人機界面系統(tǒng)設計的流程如下：

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

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

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

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

表1 基于權限認證的用戶操作權限劃分

2 人機界面開發(fā)設計

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

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

圖1 基于Web 的人機界面系統(tǒng)結構圖

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

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

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

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

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

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

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

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

3.2.1 圖形界面工具

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

圖2 圖形界面工具

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

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

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

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

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

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

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

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

圖4 模擬實時監(jiān)控數(shù)據(jù)顯示效果

結束語

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