SVG技術在煤礦監控系統中的應用研究

陳運啟

(中煤科工集團重慶研究院有限公司， 重慶　400039)

?

SVG技術在煤礦監控系統中的應用研究

陳運啟

(中煤科工集團重慶研究院有限公司， 重慶400039)

摘要：為了以圖形圖像形式高效發布煤礦實時數據，提出將SVG技術應用到煤礦監控系統中，介紹了基于SVG技術的實時數據發布方案。該方案采用Ajax技術獲取數據庫服務器中的實時數據，并利用SVG技術構建直觀、實時的遠程監控矢量圖形頁面，實現了實時數據的加載及顯示。

關鍵詞：煤礦監控系統； SVG； 矢量圖形； Ajax

網絡出版地址：http://www.cnki.net/kcms/detail/32.1627.TP.20160803.1008.019.html

0　引言

隨著計算機及互聯網技術的迅猛發展，計算機網絡已經成為信息系統發布的重要媒介。信息系統發布的信息不僅包含傳統的靜態文本與圖像，還包括海量的動態多媒體內容，這是導致Internet網絡帶寬日益緊張的關鍵原因之一[1]。目前，各大瀏覽器對于圖形圖像處理功能支持程度普遍不足。可擴展矢量圖形(Scalable Vector Graphics，SVG)是基于可擴展標記語言(XML)，用于描述二維矢量圖形的一種圖形格式，在應對當前Internet及其應用的種種難題上，有著積極的意義與廣闊的市場前景。

在煤礦行業，實時監控系統是煤礦企業信息化建設中的一項核心內容，在保障煤礦安全、穩定、高效生產方面有著重大的意義。實時監控系統開發與部署主要有2種方式：一種是桌面應用程序的C/S(客戶端/服務器)模式；一種是基于Web的B/S(瀏覽器/服務器)模式。B/S模式以其部署簡便、便于升級管理、對客戶端要求較低等優勢，應用前景越來越廣泛[1]。目前，基于Web的煤礦監控系統實時數據發布與顯示主要有數據列表與圖形圖像2種形式。數據列表形式簡單直觀，但界面單調，且僅以文字作為信息表達的媒介。圖形圖像形式生動形象，引入動畫機制，極大增強了視覺感官特效，該形式已經成為實時監控系統開發的首要選擇。為了以圖形圖像形式高效發布煤礦實時數據，解決圖形制作開發難度大等方面的問題，本文將SVG技術應用到煤礦監控系統中，結合SVG、Ajax(Asynchronous JavaScript and XML，異步JavaScript和XML)及實時數據庫技術，實現了實時數據的加載及顯示。

1　SVG技術

SVG技術主要面向網絡應用[2-3]，能夠幫助Web開發與設計人員擺脫傳統HTML網頁開發限制，滿足對圖形可擴展性、無失真放縮、可交互性等方面的需求[4]。SVG技術具有以下特征：

(1) 基于XML標準。為保證圖形能夠與目前已有的DOM，CSS，XML，HTML，XHTML，XSL等相關技術及ICC，RGB，URI，JavaScript等標準技術相互兼容，SVG技術完全基于XML標準。XML具有跨平臺、可擴展等特點，使SVG語言拓寬了應用環境及使用平臺。SVG文檔支持與其他XML文檔內容直接相互嵌入。

(2) 由文本構成。SVG圖形由文本構成，采用算法指令描述圖形。基本圖形可由簡單的算法指令進行描述，復雜圖形可由簡單指令語句組合進行描述。SVG圖形文件尤其適合在網絡上傳播，且下載速度快。對于圖形處理用戶來說，僅使用簡單的文本編輯工具就能新建、打開及編輯矢量圖形，還可利用各種流行的矢量圖形編輯工具編輯出美觀度高的SVG矢量圖形。

(3) 面向對象。SVG提供了圖形、文字、圖像等基本要素對象及填充、動畫、透明、裁剪、鏈接等頁面描述功能對象。將基本要素對象與路徑有效結合起來，可以繪制任意矢量圖形。

(4) 矢量圖形。矢量圖形是由計算機對矢量數據進行計算后繪制而成。SVG圖形是一種由線框與填充物構成的矢量圖形,可任意放大和縮小，且不會失真。

(5) 支持交互性。SVG提供了對DOM接口的支持，可通過統一的接口規范與用戶進行交互。SVG文檔及內部對象可通過腳本語言接收外部事物的驅動。SVG圖形格式提供了無可比擬的動態交互能力，一方面可以在SVG文檔中嵌入動畫腳本元素，另一方面可通過腳本控制實現圖形元素聲音、動畫、高亮顯示等效果。

2　Ajax技術

Ajax是一種創建交互式網頁應用的網頁開發技術，由JavaScript，CSS，DOM，XMLHttpRequest，XHTML等眾多成熟的技術組合而成[5-6]，如圖1所示。Ajax的核心是JavaScript內置的XMLHttp-Request對象。通過XMLHttpRequest對象，網頁可以向Web服務器發送異步請求，并響應處理結果，而不會阻塞用戶網頁。

圖1　Ajax技術

Ajax技術提供了實體間異步交互方式。Ajax引擎改變了傳統模式下客戶端與Web服務器之間“請求-等待-請求”的同步數據交互形式。用戶無需等待HTTP請求處理結果，也不必為更新局部數據而刷新整個頁面。只有在Web請求結果到達時，才會由瀏覽器在合適的時間刷新局部內容。因此，使用Ajax技術可節約網絡帶寬，加快網頁下載速度，縮短用戶等待時間，改善用戶操作體驗。

3　SVG技術在煤礦監控系統中的應用

3.1基于SVG技術的實時數據發布方案

實時數據發布功能是煤礦在線實時監控系統的一項基礎、核心功能。煤礦實時數據首先通過采集、編碼、傳輸、解碼、存儲等步驟進行處理，然后通過實時數據發布功能進行顯示，滿足用戶監測要求，減少安全事故。

本文利用SVG技術構建形象、直觀、實時、人機交互友好、界面刷新無閃爍的遠程監控Web矢量圖形頁面，同時結合Ajax技術及實時數據庫優勢，提出一種實時數據遠程加載、頁面動態局部刷新實施方案，該方案整體結構如圖2所示。

圖2　基于SVG技術的實時數據發布方案

3.2SVG圖形文件制作

Web監控圖形畫面由SVG背景底圖文件與各類圖元對象構成。本文將Web監控矢量圖形所包含的內部對象定義為圖元，并將圖元進行分類，構建圖元文件庫。底圖文件及圖元對象文件需要離線制作，文件可放置在服務器某一目錄下，也可序列化保存到數據庫服務器中。

編輯實時數據監控頁面之前，首先需要進行SVG底圖文件及圖元對象制作。底圖文件是靜態文件，不需要改變文件內部對象屬性。圖元對象屬于動態文件，需要根據實時數據來改變文件內部對象屬性，以便直觀反映實時數據動態變化情況。SVG圖形文件制作有3種方式：① 簡單的圖形可直接通過記事本等文本編輯工具進行編輯。② 針對已有的CAD圖形文件，可通過CAD轉換工具直接轉換成SVG格式的文件。③ 對于復雜的背景圖形，可通過流行的矢量圖形工具進行制作，如Adobe Illustrator CS5，Inkscape，LateXDraw等。

編輯Web實時數據監控圖形畫面時，首先加載對應的Web底圖文件，然后根據業務需求將相關圖元附加到監控圖形畫面的對應位置。圖元添加完畢后，可設置圖元的設備屬性，使圖元與物理監測設備進行關聯。Web監控圖形畫面發布后，根據采集到的設備實時數據，利用JavaScript腳本語言動態、實時改變圖元的顯示狀態。

3.3圖元基本結構

為便于對圖元顯示狀態進行有效控制，Web監控圖形畫面將圖形中的每一類圖元元素抽象定義成JavaScript對象，并將其加入到圖元對象集合中。所有圖元對象繼承于同一個基類，該基類定義了公共屬性及操作，不同類型的圖元對象根據自身實際情況對基類進行擴展及重載。基類圖元JavaScript對象結構如圖3所示。

圖3　基類圖元JavaScript對象結構

基類圖元核心屬性：① graphicsMetaID，矢量圖形內部圖元對象唯一性標志。② graphicsMeta-Type，圖元類型。③ deviceID，與圖元關聯的具體物理設備ID。④ coordX，圖元在圖形中的X坐標。⑤ coordY，圖元在圖形中的Y坐標。⑥ layerID，圖元所屬圖層ID。⑦ opacity，圖元顯示的透明度。

基類圖元基本操作：① RunStatusLevel-Operate，圖元狀態執行函數，根據實時數據不同狀態執行不同的內部操作。② RunAnimateOperate，動畫執行函數，根據實時數據狀態執行不同的動畫效果。③ SetProperty，用于設置圖元屬性。④ BindingDeviceLabel，將圖元與某一具體物理設備綁定。⑤ GetProperty，獲取圖元屬性。

3.4實時數據加載機制

由于實時數據會隨時間的改變而改變，所以需要將頁面刷新代碼放在客戶端瀏覽器下定時刷新。定時刷新的時間間隔可根據業務系統自身特點設置。每一時間間隔內，采用Ajax技術從服務器端遠程加載存儲于數據庫服務器中的實時數據，根據返回的實時數據修改SVG文件，刷新圖形中圖元的顯示狀態。

3.5實時數據刷新機制

客戶端XMLHttpRequest對象成功接收到服務器端發送的實時數據后，利用回調函數實現實時數據刷新功能。實時數據刷新流程：① 通過實時數據設備標識查找到SVG圖形中的對應圖元對象。② 根據實時數據調用圖元對象中的RunStatusLevelOperate函數，修改圖元的內部屬性及動畫狀態。

4　結語

利用SVG技術構建Web矢量圖形遠程監控頁面，具有形象直觀、動畫效果良好、人機交互性強、內部元素可局部更新、性能好等優勢；結合Ajax技術及實時數據庫優勢，提出一種實時數據遠程加載、頁面動態局部刷新實施方案，并應用到煤礦監控系統實時數據發布功能中。采用SVG技術可以很好地模擬煤礦井下生產場景，展示設備實時數據和運行狀態，可滿足實時監測的需要。與組態技術和GIS技術相比，SVG技術在成本方面具有非常大的優勢，且不需要插件，可以直接在多種類型瀏覽器上兼容使用，這在現場使用中也得到了實際檢驗和認可。

參考文獻：

[1]張麗靜,楊繼家,商李彪.SVG技術在實時信息發布系統中的應用[J].計算機仿真,2006,23(1):255-257.

[2]黃凱偉.SVG開發實踐[M].北京:電子工業出版社,2008:4-10.

[3]劉世磊.基于SVG與AutoCAD的WebGIS的研究與應用[D].淮南:安徽理工大學,2008.

[4]徐婧,張天宮,車曉東.基于SVG的WebGIS的設計與實現[J].現代電子技術,2013(17):137-139.

[5]王重英,王濤.基于Ajax的SVG在模擬實時數據顯示上的應用[J].現代電子技術,2011,34(4):32-34.

[6]吳燦培,胡順豪,王海航,等.基于Ajax和SVG的Web遠程實時監控系統[J].計算機工程與設計,2011,32(9):3004-3007.

文章編號：1671-251X(2016)08-0077-03

DOI:10.13272/j.issn.1671-251x.2016.08.019

收稿日期：2016-04-25；修回日期：2016-06-20；責任編輯：胡嫻。

基金項目：工信部國家物聯網專項項目(2014083105)。

作者簡介：陳運啟(1984-)，男，安徽蕭縣人，助理研究員，碩士，主要從事煤礦綜合自動化與信息化等方面的研究工作，E-mail:chen.yun.qi@qq.com。

中圖分類號：TD76

文獻標志碼：A網絡出版時間：2016-08-03 10:08

Research and application of SVG technology in coal mine monitoring and control system

CHEN Yunqi

(CCTEG Chongqing Research Institute, Chongqing 400039, China)

Abstract:In order to release coal mine real-time data with high efficiency and in the form of graphic image, the paper proposed to apply SVG technology in coal mine monitoring system, and introduced real-time data release scheme based on SVG technology. The scheme uses Ajax technology to obtain real-time data in database server, and uses SVG technology to build intuitive and real-time vector graphics page of remote monitoring, which achieves loading and display of real-time data.

Key words:coal mine monitoring and control system; SVG; vector graphic; Ajax

陳運啟.SVG技術在煤礦監控系統中的應用研究[J].工礦自動化，2016,42(8)：77-79.