基于Web 的遠程監控系統人機界面開發設計與實現

張子涵

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

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

1 基于Web 的人機界面系統設計

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

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

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

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

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

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

2 人機界面開發設計

2.1 基于Ajax 和SOAP 的人機界面系統設計

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

圖1 基于Web 的人機界面系統結構圖

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

2.2 人機界面系統的數據更新過程

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

3 基于Web 的遠程監控系統人機界面功能實現

3.1 人機界面系統的開發環境

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

表2 人機界面系統的開發與運行環境

3.2 人機界面系統的功能實現

3.2.1 圖形界面工具

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

圖2 圖形界面工具

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

3.2.2 歷史數據統計圖表顯示

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

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

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

3.2.3 實時數據趨勢圖顯示

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

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

圖4 模擬實時監控數據顯示效果

結束語

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