基于SVG的Web遠程實時監測客戶端研究

摘 要:針對現有基于Web的監測系統客戶端技術在實時性方面的不足，利用可縮放矢量圖形(SVG)和Ajax技術設計了一種新的基于Web的遠程實時監測客戶端系統。該系統利用SVG技術實現圖表繪制，利用Ajax進行數據通信和傳輸，完成了一套完整的基于Web的圖表組件，并在振動監測系統中得到了實現，具有良好的實時性。

關鍵詞:可縮放矢量圖形; 圖表組件; Web; 遠程實時監測客戶端

中圖分類號:TP393文獻標志碼:A

文章編號:1001-3695(2010)06-2144-03

doi:10.3969/j.issn.1001-3695.2010.06.042

Web remote realtime monitoring client based on scalable vector graphics

YANG Bin， ZHANG Lixin， ZHANG Lijun， SHI Peng

(National Center for Materials Service Safety， University of Science Technology Beijing， Beijing 100083， China)

Abstract:Based on the analysis on realtime problem of existing Web remote realtime monitoring client， proposed a new client system which utilize the SVG and Ajax. Used the SVG to draw the realtime chart， and used the Ajax technology to exchange data between client and server. Furthermore， implemented a set of chart component including SVG and Ajax， and used to vibration monitoring system. The system performs realtime well.

Key words:SVG(scalable vector graphics); chart component; Web; remote realtime monitoring client

0 引言

隨著計算機技術和網絡技術的不斷發展，大型裝備的狀態監測技術也發生了深遠的變化，逐步向實時、遠程、分布式和網絡化的方向發展。現有的遠程實時在線監測系統普遍采用C/S(客戶端/服務器)和B/S(瀏覽器/服務器)模式。其中B/S模式結構提供了系統更大的靈活性與開放性，便于系統的擴展、維護以及管理。大大提高客戶端性能是關系到整個監測系統運行效果的重要因素，因此受到了極大的關注[1~3]。

但 Web通信采用的是HTTP協議，該協議的工作模式是請求/響應模式，且無連接，所以Web服務器無法實時地將服務器中的數據主動傳送給Web瀏覽器。針對該問題，現有的解決方案主要采用以下兩種主要技術:a)通過開發 ActiveX控件擴展瀏覽器前端功能。該方式利用ActiveX與應用服務器通信，實時獲取最新的數據，然后在客戶端顯示出來。b)通過開發Applet來擴展瀏覽器前端功能，從而實現基于Web的遠程實時數據監測。該方式與ActiveX類似，只是在實現技術上采用的是Java技術[4，5]。Web遠程實時監測除了考慮數據傳送的實時性外，還需要考慮實時數據在瀏覽器的顯示問題，特別是各種圖表如線圖、餅圖、直方圖等的顯示，因為這些圖表在生成和顯示時會消耗瀏覽器大量的資源，很容易造成顯示上的不連貫現象及延滯現象。

本課題在一些相關研究成果的基礎上，針對監測系統的功能需求，設計和實現了一套基于SVG[6]和Ajax(asynchronous JavaScript and XML)[7](用于數據的獲取)技術的Web動態圖表組件，用于構建基于Web的遠程實時監測客戶端。

1 SVG技術

SVG是一種基于XML文檔的開放的矢量圖形描述語言，用于描述二維矢量圖形和矢量、點陣混合圖形的標志語言。與位圖不同，SVG的矢量圖形不是用大量的單個像素建立圖像，而主要用數學公式對物體(如圓、線等)行為描述，從而記錄圖形信息，并根據圖形信息進行繪制。SVG的關鍵是如何通過計算機指令和數學公式來描述物體。W3C組織定義了SVG的相關規范，其中包括SVG的特征、語法和顯示效果，包括模塊化的XML命名空間(nameSpace)和SVG文檔對象模型(document object model， DOM)。

SVG元素是指示如何繪制圖像的一些指令，閱讀器(viewer)解釋這些指令，把SVG 圖像在指定設備上顯示出來，同時SVG可以使用樣式表CSS、Script 腳本和DOM進行控制。SVG作為新一代的圖形處理技術主要有以下幾方面的優勢:a)文件尺寸小，方便Web頁面下載;b)SVG圖形格式可以用來動態生成圖形，可以SVG動態生成具有交互功能的數據圖形，嵌入網頁中，并顯示給終端用戶;c)可以用腳本控制與客戶的交互事件;d)SVG圖形格式可以方便地建立文字索引，從而實現基于內容的圖像搜索;e)基于文本的格式，可以輕松地與其他Web技術集成。

SVG是圖形、圖像和文字的整合體。根據功能不同，SVG的主要對象可以分為基本要素和頁面描述功能兩大類。SVG除了支持HTML中常用的標記，如文本、圖像、鏈接、交互性、CSS的使用、腳本外，還提供了大量針對圖形、圖像、動畫的特定標記。如圖1所示，SVG 定義了六種基本形狀，同時SVG定義了直線、斜線、圓弧和貝塞曲線等繪圖路徑指令，通過這六種基本形狀和不同的路徑進行組合，則可以形成任何圖像。

2 基于SVG的Web實時監測客戶端關鍵技術

2.1 SVG數據的嵌入與控制

雖然SVG 文檔本身就可以被所支持的Web瀏覽器(需要安裝SVG viewer插件)直接顯示，但通常應用系統需要將其嵌入在Web頁面中使用。同時將SVG嵌入在Web頁面中也使得SVG的顯示更加容易，有些瀏覽器由于用戶的設置可能會拒絕打開一個SVG文件，但顯示作為 Web 頁面一部分的 SVG 圖像將不會有問題。通常使用HTML的〈EMBED〉標簽將SVG圖形數據文件嵌入在Web頁面中。

基于SVG的動態圖表效果(類似動畫效果)是通過Java Script腳本的控制來實現的。JavaScript通過SVG的DOM接口與SVG文檔聯系在一起，控制SVG的元素及屬性，可以動態修改SVG元素的屬性，從而生成特定的動態效果。SVG標準允許將JavaScript腳本代碼以兩種方式來實現:a)使用Script 元素將JavaScript 腳本內嵌在SVG 文件中;b)使用Script的xlink:href 屬性從SVG文件之外連接JavaScript腳本文件。

在JavaScript下可以通過DOM定義的接口遍歷訪問在SVG文檔中的XML樹中的各個節點。通過JavaScript腳本可以對找到的節點屬性重新賦值，甚至還可以在當前文檔中刪除節點或添加新創建的節點。JavaScript在接收到服務器端的實時數據后，使用 DOM 進行解析返回的XML文本，獲取元素的ID、屬性名稱、屬性值。根據這些信息來動態地改變SVG中對應元素的顯示屬性，最后使 SVG 中的元素反應出數據的變化情況，實現實時監測的效果。

2.2 SVG文檔的數據結構設計

從本質上來說，SVG文檔是XML文檔，SVG文檔具有XML文檔的所有屬性。根據SVG的文檔結構規范，普通的SVG文件由文件版本、文件類型定義部分、元素定義部分和繪圖部分組成[8]。在一個復雜的SVG圖形中可以使用圖層元素對SVG進行結構和層次的劃分。在SVG文檔中，可以使用分組元素〈g〉來描述一個圖層。圖層作為一個容器對象，將各種相關的圖元對象組合和管理起來，更好地表達了需要構建的圖表的數據結構層次。針對監測系統中圖表的構造特征，如圖2所示，可以把SVG文檔劃分為以下幾個層次:a)背景層，主要負責構建圖表的背景和一些特殊效果，如曲線圖的背景網格;b)坐標層，主要用于圖表中一些坐標軸的顯示，如X軸、Y軸及其對應坐標等;c)動態圖元對象層，這里的基本圖元是指用于動態顯示信號數據的文字、棒圖、曲線或指針等，同時這些圖元對象將設計為可以通過JavaScript腳本進行動態控制的組件;d)文字描述層，用于顯示圖表中當前的一些特定屬性(如當前動態曲線對應的名稱)或相關的圖元注釋等;e)用戶交互層，用于向使用者提供交互功能的SVG控制部分，這些交互功能包括圖表的放大與縮小、特定點的選取和顯示等。通過層的Id屬性可以訪問和控制改變，從而可以在層中動態創建各種圖形和圖元對象。

2.3 服務器端的SVG控件

SVG的圖形數據文檔可以由服務器端的服務程序生成(如C#或Java等)。當客戶端向服務器請求SVG文件時(將在embeded標簽中SVG源指向服務器端的執行文件)，可以由服務器端的程序根據相關參數自動生成SVG文檔再傳給Web客戶端。利用服務器端的服務程序自動生成SVG圖形數據文件最大好處在于可以利用服務器端編程語言的強大功能實現非常復雜的SVG控件。

基于SVG的圖表組件可以分為兩個邏輯層面:a)描述圖表數據結構和動態行為的抽象數學模型;b)用于顯示各個圖元對象的SVG的數據文件，即圖表的動態實現。為了能夠更加有效地控制SVG文檔數據結構和圖元顯示，可以將圖表的數學抽象模型與SVG的實現部分進行分離，使它們都可以獨立地變化，從而可以快速地實現多樣的圖表形式。

這里參照上述的分離思想將整個SVG的控制模塊設計為兩個抽象類(C_Chart和C_Series)和兩個實現類(C_SVGShapes和C_SVGElements)。其中:C_Chart和C_Series系列類用于控制各個圖表的數學抽象模型;而C_SVGShapes和C_SVGElements類則用于實際的SVG數據文檔部分。在實際圖表的創建過程中只需要使用C_Chart和C_Series類向外部提供抽象接口，其內部則調用了C_SVGShapes和C_SVGElements的功能輸出實際的SVG數據文檔。

C_Chart類提供了創建圖表組件的基本容器。C_Chart類主要有兩個功能:a)通過C_Chart可以指定整個圖表的大小和圖表背景的基本屬性;b)管理圖表中的各個動態元素對象，即維護動態圖元的列表和顯示的相對屬性等。C_Chart的UML類圖如圖3所示。其中函數GetSVGDoc返回當前生成的SVG圖形的數據文檔，在Chart配置完成后通過此函數獲取完成的SVG文檔數據。函數CreateBaseSVGDoc用于創建SVG的基本文檔(SVG的Head部分);SetBackgound用于設置圖表的背景屬性;SetGrid用于設置圖表的網格(不使用則不設置);AddASeries、DeleteASeries、ClearSeries和IndexOf函數用于管理Chart中的動態圖元對象。

C_Series系列類包括C_SeriesBase類(C_SeriesBase是圖元對象的抽象類)和其繼承類C_SeriesLine及C_SeriesBar(將來還可以擴展其他新的動態圖元對象)。這些類和接口提供了創建動態圖元對象，即曲線圖中的曲線或者棒圖中的矩形。C_SVGShape則提供了基本的形狀繪圖接口，通過調用這些接口，可以根據輸入的參數生成繪制圖形的SVG文檔數據，如直線、折線、矩形和圓等。C_SVGElements用于其他SVG元素的創建，如層對象、文字元素等。

3 實時監測客戶端的實現

本課題針對監測系統的功能需求，設計和實現了一套基于SVG和Ajax(用于數據的獲取)技術的Web動態圖表組件。利用SVG和Ajax技術實現Web下的動態圖表基本原理如圖4所示。首先利用 SVG 來繪制基本的圖表形狀，然后通過使用 Ajax數據層向Web服務器請求最新的實時數據，當接收到實時數據時，再通過JavaScript 腳本調用DOM接口動態修改SVG圖形，這樣就實現了Web下的動態圖表。

在監測系統中經常需要使用的圖表是振動特征值的棒圖顯示、振動的波形數據的曲線顯示以及信號數據的趨勢曲線圖顯示。下面重點介紹這幾種類型的圖表的設計與實現。在設計這些圖表組件之前最重要的任務是需要計算圖形的比例因子，就是說在繪圖時每單位的數據值在對應圖形中的多少像素。比例因子可以用圖表的中坐標軸的尺寸除以數據的最大值來獲得。

1)特征值棒圖組件

動態棒圖的動態圖元對象是矩形(SVG的標簽是RECT)。動態生成棒圖的基本模型是:通過給定的圖表的寬度和矩形對象的個數(參數)可以計算出每個矩形和間隔所占的寬度，從而確定每個矩形的起始點和寬度。矩形的高度由實際數據值(乘以比例因子)控制，而矩形的顏色可以從顏色數組中依次選取。在創建每個矩形的同時，在矩形的下方創建其文字描述對象并插入文字層。棒圖組件的實際運行效果如圖5所示。

2)信號趨勢曲線圖的設計與實現

曲線圖的動態圖元對象是折線(SVG的標簽是POLYLINE)。動態生成曲線圖的基本模型是相對簡單，即根據相關參數設定POLYLINE的屬性，然后根據實際數據值(乘以比例因子)修改其POINTS屬性。在曲線圖的圖元對象中還需要有一個數據點隊列，一方面這個數據隊列保存了曲線圖中所有數據點的坐標值;另一方面通過這個數據點隊列可以動態地添加、修改和刪除數據點，從而實現動態曲線的繪制。趨勢曲線圖的設計運行效果如圖6所示(注釋表示測點1的均方根值)。

振動波形曲線圖的設計和實現與上述的趨勢曲線圖是完全一樣的，惟一的不同在于振動波形曲線圖不是對單個數據點進行動態操作，而是對曲線圖中所有的數據點進行動態操作。

4 結束語

針對現有B/S監測系統客戶端存在的實時性問題，本文研究了一種基于SVG的Web遠程實時監測系統客戶端系統。該系統中設計了一套基于SVG和 Ajax 技術基于Web的動態圖表組件，并在此基礎上實現了基于Web的遠程實時監測客戶端。系統利用SVG 來繪制基本的圖表形狀，通過使用 Ajax數據層向Web服務器請求最新的實時數據，當接收到實時數據后再通過JavaScript 腳本調用DOM接口動態修改SVG圖形，SVG與Ajax的結合帶來了一種全新的程序開發模式， 提供了一種與桌面應用程序相同的豐富的互聯網體驗。新的遠程實時監測客戶端將很大程度上改變現有客戶端系統的多種弊端，具有較好的應用前景。

參考文獻:

[1]周丹晨，殷國富，龍紅能，等. 基于Web的制造信息集成管理系統[J].計算機集成制造系統，2003， 9(2):962-100.

[2] 饒志敏，余陽，李長森. 基于Web Portal的工作流客戶端的研究與設計[J].計算機應用該研究，2007，24(4):212-214.

[3] 陳忠，鄭時雄. 基于Web技術的多級智能監測及診斷體系結構[J]，華南理工大學學報，2005，33(8):11-15.

[4] 羅培，黃輝先，馬茜. JNI和ActiveX技術在組態監控系統網絡化遷移中的應用[J]. 計算機應用研究，2007，24(12):266-268.

[5] 童雪娟，李霖，尹作為. 基于SVG/Java Applet的地圖Web發布技術[J]. 計算機工程，2005，31(11):62-64.

[6] 劉嘯，畢永年.基于XML的SVG應用指南[M]. 北京:科海集團公司， 2001.

[7] 柯自聰. Ajax 開發精要—概念、案例與框架[M].北京:電子工業出版社，2006.

[8] 張曉峰. SVG在網絡化測試曲線實時監控系統中的應用研究[D]. 青島:中國海洋大學，2006.