SVG技術(shù)在煤礦監(jiān)控系統(tǒng)中的應(yīng)用研究

陳運(yùn)啟

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

?

SVG技術(shù)在煤礦監(jiān)控系統(tǒng)中的應(yīng)用研究

陳運(yùn)啟

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

摘要：為了以圖形圖像形式高效發(fā)布煤礦實(shí)時(shí)數(shù)據(jù)，提出將SVG技術(shù)應(yīng)用到煤礦監(jiān)控系統(tǒng)中，介紹了基于SVG技術(shù)的實(shí)時(shí)數(shù)據(jù)發(fā)布方案。該方案采用Ajax技術(shù)獲取數(shù)據(jù)庫(kù)服務(wù)器中的實(shí)時(shí)數(shù)據(jù)，并利用SVG技術(shù)構(gòu)建直觀、實(shí)時(shí)的遠(yuǎn)程監(jiān)控矢量圖形頁(yè)面，實(shí)現(xiàn)了實(shí)時(shí)數(shù)據(jù)的加載及顯示。

關(guān)鍵詞：煤礦監(jiān)控系統(tǒng)； SVG； 矢量圖形； Ajax

網(wǎng)絡(luò)出版地址：http://www.cnki.net/kcms/detail/32.1627.TP.20160803.1008.019.html

0　引言

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

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

1　SVG技術(shù)

SVG技術(shù)主要面向網(wǎng)絡(luò)應(yīng)用[2-3]，能夠幫助Web開(kāi)發(fā)與設(shè)計(jì)人員擺脫傳統(tǒng)HTML網(wǎng)頁(yè)開(kāi)發(fā)限制，滿足對(duì)圖形可擴(kuò)展性、無(wú)失真放縮、可交互性等方面的需求[4]。SVG技術(shù)具有以下特征：

(1) 基于XML標(biāo)準(zhǔn)。為保證圖形能夠與目前已有的DOM，CSS，XML，HTML，XHTML，XSL等相關(guān)技術(shù)及ICC，RGB，URI，JavaScript等標(biāo)準(zhǔn)技術(shù)相互兼容，SVG技術(shù)完全基于XML標(biāo)準(zhǔn)。XML具有跨平臺(tái)、可擴(kuò)展等特點(diǎn)，使SVG語(yǔ)言拓寬了應(yīng)用環(huán)境及使用平臺(tái)。SVG文檔支持與其他XML文檔內(nèi)容直接相互嵌入。

(2) 由文本構(gòu)成。SVG圖形由文本構(gòu)成，采用算法指令描述圖形。基本圖形可由簡(jiǎn)單的算法指令進(jìn)行描述，復(fù)雜圖形可由簡(jiǎn)單指令語(yǔ)句組合進(jìn)行描述。SVG圖形文件尤其適合在網(wǎng)絡(luò)上傳播，且下載速度快。對(duì)于圖形處理用戶來(lái)說(shuō)，僅使用簡(jiǎn)單的文本編輯工具就能新建、打開(kāi)及編輯矢量圖形，還可利用各種流行的矢量圖形編輯工具編輯出美觀度高的SVG矢量圖形。

(3) 面向?qū)ο蟆VG提供了圖形、文字、圖像等基本要素對(duì)象及填充、動(dòng)畫(huà)、透明、裁剪、鏈接等頁(yè)面描述功能對(duì)象。將基本要素對(duì)象與路徑有效結(jié)合起來(lái)，可以繪制任意矢量圖形。

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

(5) 支持交互性。SVG提供了對(duì)DOM接口的支持，可通過(guò)統(tǒng)一的接口規(guī)范與用戶進(jìn)行交互。SVG文檔及內(nèi)部對(duì)象可通過(guò)腳本語(yǔ)言接收外部事物的驅(qū)動(dòng)。SVG圖形格式提供了無(wú)可比擬的動(dòng)態(tài)交互能力，一方面可以在SVG文檔中嵌入動(dòng)畫(huà)腳本元素，另一方面可通過(guò)腳本控制實(shí)現(xiàn)圖形元素聲音、動(dòng)畫(huà)、高亮顯示等效果。

2　Ajax技術(shù)

Ajax是一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，由JavaScript，CSS，DOM，XMLHttpRequest，XHTML等眾多成熟的技術(shù)組合而成[5-6]，如圖1所示。Ajax的核心是JavaScript內(nèi)置的XMLHttp-Request對(duì)象。通過(guò)XMLHttpRequest對(duì)象，網(wǎng)頁(yè)可以向Web服務(wù)器發(fā)送異步請(qǐng)求，并響應(yīng)處理結(jié)果，而不會(huì)阻塞用戶網(wǎng)頁(yè)。

圖1　Ajax技術(shù)

Ajax技術(shù)提供了實(shí)體間異步交互方式。Ajax引擎改變了傳統(tǒng)模式下客戶端與Web服務(wù)器之間“請(qǐng)求-等待-請(qǐng)求”的同步數(shù)據(jù)交互形式。用戶無(wú)需等待HTTP請(qǐng)求處理結(jié)果，也不必為更新局部數(shù)據(jù)而刷新整個(gè)頁(yè)面。只有在Web請(qǐng)求結(jié)果到達(dá)時(shí)，才會(huì)由瀏覽器在合適的時(shí)間刷新局部?jī)?nèi)容。因此，使用Ajax技術(shù)可節(jié)約網(wǎng)絡(luò)帶寬，加快網(wǎng)頁(yè)下載速度，縮短用戶等待時(shí)間，改善用戶操作體驗(yàn)。

3　SVG技術(shù)在煤礦監(jiān)控系統(tǒng)中的應(yīng)用

3.1基于SVG技術(shù)的實(shí)時(shí)數(shù)據(jù)發(fā)布方案

實(shí)時(shí)數(shù)據(jù)發(fā)布功能是煤礦在線實(shí)時(shí)監(jiān)控系統(tǒng)的一項(xiàng)基礎(chǔ)、核心功能。煤礦實(shí)時(shí)數(shù)據(jù)首先通過(guò)采集、編碼、傳輸、解碼、存儲(chǔ)等步驟進(jìn)行處理，然后通過(guò)實(shí)時(shí)數(shù)據(jù)發(fā)布功能進(jìn)行顯示，滿足用戶監(jiān)測(cè)要求，減少安全事故。

本文利用SVG技術(shù)構(gòu)建形象、直觀、實(shí)時(shí)、人機(jī)交互友好、界面刷新無(wú)閃爍的遠(yuǎn)程監(jiān)控Web矢量圖形頁(yè)面，同時(shí)結(jié)合Ajax技術(shù)及實(shí)時(shí)數(shù)據(jù)庫(kù)優(yōu)勢(shì)，提出一種實(shí)時(shí)數(shù)據(jù)遠(yuǎn)程加載、頁(yè)面動(dòng)態(tài)局部刷新實(shí)施方案，該方案整體結(jié)構(gòu)如圖2所示。

圖2　基于SVG技術(shù)的實(shí)時(shí)數(shù)據(jù)發(fā)布方案

3.2SVG圖形文件制作

Web監(jiān)控圖形畫(huà)面由SVG背景底圖文件與各類圖元對(duì)象構(gòu)成。本文將Web監(jiān)控矢量圖形所包含的內(nèi)部對(duì)象定義為圖元，并將圖元進(jìn)行分類，構(gòu)建圖元文件庫(kù)。底圖文件及圖元對(duì)象文件需要離線制作，文件可放置在服務(wù)器某一目錄下，也可序列化保存到數(shù)據(jù)庫(kù)服務(wù)器中。

編輯實(shí)時(shí)數(shù)據(jù)監(jiān)控頁(yè)面之前，首先需要進(jìn)行SVG底圖文件及圖元對(duì)象制作。底圖文件是靜態(tài)文件，不需要改變文件內(nèi)部對(duì)象屬性。圖元對(duì)象屬于動(dòng)態(tài)文件，需要根據(jù)實(shí)時(shí)數(shù)據(jù)來(lái)改變文件內(nèi)部對(duì)象屬性，以便直觀反映實(shí)時(shí)數(shù)據(jù)動(dòng)態(tài)變化情況。SVG圖形文件制作有3種方式：① 簡(jiǎn)單的圖形可直接通過(guò)記事本等文本編輯工具進(jìn)行編輯。② 針對(duì)已有的CAD圖形文件，可通過(guò)CAD轉(zhuǎn)換工具直接轉(zhuǎn)換成SVG格式的文件。③ 對(duì)于復(fù)雜的背景圖形，可通過(guò)流行的矢量圖形工具進(jìn)行制作，如Adobe Illustrator CS5，Inkscape，LateXDraw等。

編輯Web實(shí)時(shí)數(shù)據(jù)監(jiān)控圖形畫(huà)面時(shí)，首先加載對(duì)應(yīng)的Web底圖文件，然后根據(jù)業(yè)務(wù)需求將相關(guān)圖元附加到監(jiān)控圖形畫(huà)面的對(duì)應(yīng)位置。圖元添加完畢后，可設(shè)置圖元的設(shè)備屬性，使圖元與物理監(jiān)測(cè)設(shè)備進(jìn)行關(guān)聯(lián)。Web監(jiān)控圖形畫(huà)面發(fā)布后，根據(jù)采集到的設(shè)備實(shí)時(shí)數(shù)據(jù)，利用JavaScript腳本語(yǔ)言動(dòng)態(tài)、實(shí)時(shí)改變圖元的顯示狀態(tài)。

3.3圖元基本結(jié)構(gòu)

為便于對(duì)圖元顯示狀態(tài)進(jìn)行有效控制，Web監(jiān)控圖形畫(huà)面將圖形中的每一類圖元元素抽象定義成JavaScript對(duì)象，并將其加入到圖元對(duì)象集合中。所有圖元對(duì)象繼承于同一個(gè)基類，該基類定義了公共屬性及操作，不同類型的圖元對(duì)象根據(jù)自身實(shí)際情況對(duì)基類進(jìn)行擴(kuò)展及重載。基類圖元JavaScript對(duì)象結(jié)構(gòu)如圖3所示。

圖3　基類圖元JavaScript對(duì)象結(jié)構(gòu)

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

基類圖元基本操作：① RunStatusLevel-Operate，圖元狀態(tài)執(zhí)行函數(shù)，根據(jù)實(shí)時(shí)數(shù)據(jù)不同狀態(tài)執(zhí)行不同的內(nèi)部操作。② RunAnimateOperate，動(dòng)畫(huà)執(zhí)行函數(shù)，根據(jù)實(shí)時(shí)數(shù)據(jù)狀態(tài)執(zhí)行不同的動(dòng)畫(huà)效果。③ SetProperty，用于設(shè)置圖元屬性。④ BindingDeviceLabel，將圖元與某一具體物理設(shè)備綁定。⑤ GetProperty，獲取圖元屬性。

3.4實(shí)時(shí)數(shù)據(jù)加載機(jī)制

由于實(shí)時(shí)數(shù)據(jù)會(huì)隨時(shí)間的改變而改變，所以需要將頁(yè)面刷新代碼放在客戶端瀏覽器下定時(shí)刷新。定時(shí)刷新的時(shí)間間隔可根據(jù)業(yè)務(wù)系統(tǒng)自身特點(diǎn)設(shè)置。每一時(shí)間間隔內(nèi)，采用Ajax技術(shù)從服務(wù)器端遠(yuǎn)程加載存儲(chǔ)于數(shù)據(jù)庫(kù)服務(wù)器中的實(shí)時(shí)數(shù)據(jù)，根據(jù)返回的實(shí)時(shí)數(shù)據(jù)修改SVG文件，刷新圖形中圖元的顯示狀態(tài)。

3.5實(shí)時(shí)數(shù)據(jù)刷新機(jī)制

客戶端XMLHttpRequest對(duì)象成功接收到服務(wù)器端發(fā)送的實(shí)時(shí)數(shù)據(jù)后，利用回調(diào)函數(shù)實(shí)現(xiàn)實(shí)時(shí)數(shù)據(jù)刷新功能。實(shí)時(shí)數(shù)據(jù)刷新流程：① 通過(guò)實(shí)時(shí)數(shù)據(jù)設(shè)備標(biāo)識(shí)查找到SVG圖形中的對(duì)應(yīng)圖元對(duì)象。② 根據(jù)實(shí)時(shí)數(shù)據(jù)調(diào)用圖元對(duì)象中的RunStatusLevelOperate函數(shù)，修改圖元的內(nèi)部屬性及動(dòng)畫(huà)狀態(tài)。

4　結(jié)語(yǔ)

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

參考文獻(xiàn)：

[1]張麗靜,楊繼家,商李彪.SVG技術(shù)在實(shí)時(shí)信息發(fā)布系統(tǒng)中的應(yīng)用[J].計(jì)算機(jī)仿真,2006,23(1):255-257.

[2]黃凱偉.SVG開(kāi)發(fā)實(shí)踐[M].北京:電子工業(yè)出版社,2008:4-10.

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

[4]徐婧,張?zhí)鞂m,車(chē)曉東.基于SVG的WebGIS的設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代電子技術(shù),2013(17):137-139.

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

[6]吳燦培,胡順豪,王海航,等.基于Ajax和SVG的Web遠(yuǎn)程實(shí)時(shí)監(jiān)控系統(tǒng)[J].計(jì)算機(jī)工程與設(shè)計(jì),2011,32(9):3004-3007.

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

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

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

基金項(xiàng)目：工信部國(guó)家物聯(lián)網(wǎng)專項(xiàng)項(xiàng)目(2014083105)。

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

中圖分類號(hào)：TD76

文獻(xiàn)標(biāo)志碼：A網(wǎng)絡(luò)出版時(shí)間：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

陳運(yùn)啟.SVG技術(shù)在煤礦監(jiān)控系統(tǒng)中的應(yīng)用研究[J].工礦自動(dòng)化，2016,42(8)：77-79.