基于SVG技術(shù)的WEB化監(jiān)控系統(tǒng)

萬詩新,張雪松

摘要：SVG是W3C推出的用于描述二維矢量圖形基于XML的一種開放圖形格式，本文對SVG的概念，基于SVG的WEB化監(jiān)控系統(tǒng)技術(shù)及實(shí)現(xiàn)架構(gòu)進(jìn)行了詳細(xì)剖析，提及的相關(guān)技術(shù)、設(shè)計(jì)理念在實(shí)際項(xiàng)目上均得到了很好的應(yīng)用。

關(guān)鍵詞：SVG WEB化矢量圖形監(jiān)控系統(tǒng)

監(jiān)控系統(tǒng)軟件是一套集數(shù)據(jù)采集、監(jiān)測、控制于一體，通過豐富的流程畫面、曲線、報(bào)警等手段對數(shù)據(jù)進(jìn)行展現(xiàn)的軟件包，其應(yīng)用領(lǐng)域很廣，它可以應(yīng)用于電力系統(tǒng)、給水系統(tǒng)、石油、化工等領(lǐng)域的數(shù)據(jù)采集與監(jiān)視控制以及過程控制等諸多領(lǐng)域。在Internet 技術(shù)飛速發(fā)展的今天，基于Web瘦客戶機(jī)的B/S構(gòu)架已成為監(jiān)控系統(tǒng)信息發(fā)布的重要方式。當(dāng)前主流通用監(jiān)控系統(tǒng)軟件均支持流程圖畫面WEB化發(fā)布功能，其中以ActiveX控件技術(shù)、Flash技術(shù)、Java技術(shù)為主。三項(xiàng)技術(shù)的本質(zhì)比較類似，都是在客戶端瀏覽器中，通過下載、安裝或運(yùn)行控件/插件的方式，來實(shí)現(xiàn)圖形的再現(xiàn)以及靜態(tài)、動(dòng)態(tài)效果。其技術(shù)優(yōu)點(diǎn)在于控件/插件以二進(jìn)制方式在客戶端瀏覽器中運(yùn)行，效率較高，但缺點(diǎn)很明顯，一是數(shù)據(jù)不開放，尤其是圖形數(shù)據(jù)，基本無法重用；二是下載、安裝由于瀏覽器的安全性，常常會(huì)出現(xiàn)兼容性的問題。

可縮放矢量圖形（SVG）是基于可擴(kuò)展標(biāo)記語言（標(biāo)準(zhǔn)通用標(biāo)記語言的子集），用于描述二維矢量圖形的一種圖形格式，它由萬維網(wǎng)聯(lián)盟制定，是一個(gè)開放標(biāo)準(zhǔn)。它的出現(xiàn)為監(jiān)控系統(tǒng)軟件流程圖WEB化實(shí)現(xiàn)提供了新的思路。

SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴(kuò)展標(biāo)記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG嚴(yán)格遵從XML語法，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式。其格式優(yōu)點(diǎn)有：

①基于可擴(kuò)展標(biāo)記語言（外語縮寫：XML）。SVG是完全基于可擴(kuò)展標(biāo)記語言，并能和由W3C開發(fā)的DOM1，DOM2，CSS，XML，XPointer，XSLT，XSL，SMIL，HTML，XHTML等各項(xiàng)技術(shù)相融會(huì)的新一代的網(wǎng)絡(luò)圖像格式，繼承了XML的跨平臺(tái)性和可擴(kuò)展性，從而在圖形可重用性上邁出了一大步。

②采用文本來描述對象。SVG包括3種類型的對象：矢量圖形（包括直線、曲線在內(nèi)的圖形邊）、點(diǎn)陣圖像和文本。各種圖像對象能夠組合、變換，并且修改其樣式，也能夠定義成預(yù)處理對象。

③具有交互性和動(dòng)態(tài)性。SVG是基于XML的，它提供無可匹敵的動(dòng)態(tài)交互性。你可以在SVG文件中嵌入動(dòng)畫元素（如運(yùn)動(dòng)路徑、漸現(xiàn)或漸隱效果、生長的物體、收縮、快速旋轉(zhuǎn)、改變顏色等），或通過腳本定義來達(dá)到高亮顯示、聲音、動(dòng)畫等效果。

④完全支持DOM。由于SVG完全支持DOM，因而SVG文檔可以通過一致的接口規(guī)范與外界的程序打交道。SVG以及SVG中的物件元素完全可以通過腳本語言接受外部事件的驅(qū)動(dòng)，例如鼠標(biāo)動(dòng)作，實(shí)現(xiàn)自身或?qū)ζ渌锛D像的控制等。

SVG是一個(gè)XML文件，用于XML編程的兩種模型DOM和SAX也適用于它。因?yàn)镾VG是被設(shè)計(jì)用于互聯(lián)網(wǎng)，所以通過Javascript和DOM訪問它就是最重要的應(yīng)用模式。通過Javascript和DOM可以動(dòng)態(tài)地修改HTML，同樣也可以在瀏覽器中動(dòng)態(tài)地創(chuàng)建、修改和刪除圖片。

以下面SVG文件為例。SVG文件必須使用.svg后綴來保存：

各行含義描述：

行1：標(biāo)準(zhǔn)XML頭，標(biāo)識(shí)XML版本，每個(gè)XML文件（SVG文件屬于XML）都必須有此XML頭。

行2，3：

行4：繪制一個(gè)文本，屬性x，屬性y表示文本的左上角坐標(biāo)，font-family表示字體，font-size表示字體大小，fill表示文本顯示顏色。

行5：繪制一個(gè)矩形，屬性x，屬性y表示矩形框的左上角坐標(biāo)，width表示矩形的顯示寬度，height表示高度，fill表示矩形框填充色，stroke表示矩形框邊框色，stroke-width表示矩形框邊框?qū)挾取?/p>

行6：關(guān)閉標(biāo)簽的作用是關(guān)閉SVG元素和文檔本身。

WEB化監(jiān)控系統(tǒng)就是通過互聯(lián)網(wǎng)技術(shù)，在瀏覽器上實(shí)現(xiàn)被控對象的監(jiān)視與控制。其實(shí)現(xiàn)方法：將流程圖Web文件，通過IIS平臺(tái)發(fā)布到Intranet/Internet，WEB服務(wù)器實(shí)現(xiàn)與后臺(tái)數(shù)據(jù)采集系統(tǒng)的雙向數(shù)據(jù)交換，WEB客戶端（瀏覽器）實(shí)時(shí)向WEB服務(wù)器請求數(shù)據(jù)，在WEB客戶端（瀏覽器）上實(shí)現(xiàn)監(jiān)控過程。

監(jiān)控系統(tǒng)軟件通常都有一個(gè)強(qiáng)大流程圖制作工具，用來完成流程圖畫面的制作。流程圖畫面包括靜態(tài)、動(dòng)態(tài)圖形信息。靜態(tài)信息包括圖形位置、顏色、風(fēng)格等；基本圖形對象包括直線、矩形、圓角矩形、橢圓、多邊形、折線、曲線、扇形、弧、弦、文本、時(shí)間、按鈕、開關(guān)以及導(dǎo)入資源等；動(dòng)態(tài)信息則要包括各靜態(tài)圖形的動(dòng)態(tài)變化詳盡信息，包括顯示/隱藏、前/背景色、漸變換色、水平移動(dòng)、垂直移動(dòng)、比例填充、縮放、旋轉(zhuǎn)以及閃爍等。諸多而又復(fù)雜的圖形信息想在WEB上發(fā)布難度很大。

SVG支持矩形、圓形、拆線等基本圖元繪制；通過path可以繪制出豐富的曲線效果；通過matrix幾何矩陣實(shí)現(xiàn)對圖元的移動(dòng)、縮放、旋轉(zhuǎn)控制；通過style等屬性實(shí)現(xiàn)對圖元的顏色、字體等的控制。這樣可以在基于SVG技術(shù)的流程圖Web文件中構(gòu)建與監(jiān)控系統(tǒng)軟件流程圖中元素相對應(yīng)的標(biāo)簽節(jié)點(diǎn)，以保存監(jiān)控系統(tǒng)軟件流程圖中與元素相關(guān)的靜態(tài)和動(dòng)態(tài)屬性，結(jié)合JavaScript腳本，在WEB客戶端（瀏覽器）上實(shí)現(xiàn)WEB流程圖靜態(tài)和動(dòng)態(tài)展示。

如表1為畫面基本圖元與SVG標(biāo)簽節(jié)點(diǎn)的轉(zhuǎn)換關(guān)系：

如表2為畫面圖元?jiǎng)討B(tài)屬性與SVG屬性節(jié)點(diǎn)的轉(zhuǎn)換關(guān)系：

在自主開發(fā)的監(jiān)控系統(tǒng)軟件中，可開發(fā)流程圖到WEB頁面導(dǎo)出指令和流程圖批量轉(zhuǎn)換工具，來實(shí)現(xiàn)監(jiān)控流程圖的快速轉(zhuǎn)換發(fā)布。對SVG矢量畫面圖像格式的概念、特性及其與JavaScript相結(jié)合實(shí)現(xiàn)的流程圖監(jiān)控的WEB技術(shù)進(jìn)行詳細(xì)剖析研究，開發(fā)人員可以基于此方案完成實(shí)時(shí)監(jiān)控系統(tǒng)的“一鍵式”發(fā)布，為同類技術(shù)的研究及開發(fā)提供了一種新的思路和方法。

參考文獻(xiàn)：

[1]鐘萍.基于SVG技術(shù)人物動(dòng)畫課件生成系統(tǒng)的設(shè)計(jì)與應(yīng)用[D].南昌大學(xué)，2010年.

[2]楊清林.SVG在變電站系統(tǒng)自動(dòng)化中的應(yīng)用研究[D].山東大學(xué)，2010年.

[3]黃凱偉.SVG開發(fā)實(shí)踐[M].電子工業(yè)出版社.

[4]陳暉，孟凡順，郭樹祥.實(shí)時(shí)數(shù)據(jù)Web發(fā)布技術(shù)研究[J].中國科技信息，2010（02）.

作者簡介：萬詩新（1963-），男，湖北武漢人，碩士，高級(jí)工程師， 碩士研究生導(dǎo)師，國家國防科技工業(yè)局特聘技術(shù)專家，現(xiàn)任國核自儀系統(tǒng)工程有限公司研發(fā)中心主任，長期從事工業(yè)自動(dòng)化產(chǎn)品研發(fā)及管理工作；張雪松（1973-），男，山西神池人，本科，中煤集團(tuán)平朔集團(tuán)公司動(dòng)力中心高級(jí)工程師，主要研究方向：變電站綜合自動(dòng)化。