基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)設(shè)計

王惠

摘? 要： 在傳統(tǒng)的網(wǎng)頁可視化視覺符號交互系統(tǒng)中，視覺符號加載給服務(wù)器帶來過大負(fù)荷，導(dǎo)致加載時間長。為此，設(shè)計一種基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)。通過網(wǎng)頁展現(xiàn)層、服務(wù)層和數(shù)據(jù)層，搭建系統(tǒng)總體架構(gòu);根據(jù)系統(tǒng)總體架構(gòu)，通過控制器、顯示器、存儲器、鍵盤、服務(wù)器、用戶終端，完成系統(tǒng)硬件設(shè)計;利用SVG技術(shù)將文檔轉(zhuǎn)換為視覺符號，通過Applet技術(shù)和JavaScript語言實現(xiàn)轉(zhuǎn)化程序，完成系統(tǒng)軟件設(shè)計。至此，完成基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)設(shè)計。實驗結(jié)果表明，與傳統(tǒng)的網(wǎng)頁可視化視覺符號交互系統(tǒng)相比，提出的基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)所需加載時間更短，能夠為用戶帶來更好的視覺體驗。

關(guān)鍵詞： 網(wǎng)頁可視化; 視覺符號; 交互系統(tǒng)設(shè)計; SVG技術(shù); 參數(shù)設(shè)置; 系統(tǒng)測試

Abstract： As the load of visual symbols in the traditional webpage visualization visual symbol interaction system brings too much load to the server， resulting in a long load time， a webpage visualization visual symbol interaction system based on SVG technology is designed. The overall system architecture is constructed by the web page presentation layer， service layer and data layer. The system hardware design is completed according to the overall system architecture， which is composed of the controller， display， memory， keyboard， servers and user terminal. The SVG technology are used to convert the document into the visual symbol， and the Applet technology and JavaScript language are used to achieve the conversion program， so that the system software design is completed. The design of webpage visualization visual symbol interaction system based on SVG technology is completed. The experimental results show that， in comparison with the traditional webpage visualization visual symbol interaction system， the proposed webpage visualization visual symbol interaction system based on SVG technology requires shorter loading time， and can bring better visual experience for users.

Keywords： webpage visualization; visual symbol; interactive system design; SVG technology; parameter setting; system testing

隨著科技的不斷發(fā)展，交互系統(tǒng)在電子設(shè)備中發(fā)揮的作用越來越重要。采用視覺符號和圖形等元素的可視化交互系統(tǒng)，交互界面直觀、友好。在網(wǎng)頁可視化視覺符號交互系統(tǒng)中，網(wǎng)頁向用戶提供了大量的信息，其中，視覺符號等圖形、圖像信息的展現(xiàn)，多數(shù)呈GIF，JPEG的格式[1]。

網(wǎng)頁在讀取這些視覺符號時，通常會對服務(wù)器造成一定負(fù)荷，導(dǎo)致加載視覺符號的速度變慢，且對圖像作任意縮放時，視覺符號的質(zhì)量會受到影響[2]。SVG技術(shù)是一種基于XML格式的文本式矢量圖形描述語言，能夠描述和組合各種幾何形狀，在對視覺符號任意縮放時，不會影響視覺符號的質(zhì)量，且擁有顯示效果好、可減少服務(wù)器負(fù)荷等優(yōu)點[3]?；谏鲜龇治?，設(shè)計一種基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)。

1? 基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)設(shè)計

基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)的總體架構(gòu)主要由硬件和軟件兩部分構(gòu)成。

1.1? 基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)總體架構(gòu)

交互系統(tǒng)主要由網(wǎng)頁展現(xiàn)層、服務(wù)層和數(shù)據(jù)層構(gòu)成，總體架構(gòu)如圖1所示。

網(wǎng)頁展現(xiàn)層主要展示網(wǎng)頁的視覺符號等信息，頁面布局及功能組件采用HTML5編寫[4?5]，加載轉(zhuǎn)換后的SVG文件，將視覺符號等信息展現(xiàn)出來。

服務(wù)層中主要是實現(xiàn)業(yè)務(wù)邏輯和規(guī)則，采用Spring腳本實現(xiàn)系統(tǒng)數(shù)據(jù)管理，通過發(fā)布Web Services實現(xiàn)網(wǎng)頁和交互系統(tǒng)其他部分的數(shù)據(jù)交互。

數(shù)據(jù)層主要是存儲系統(tǒng)中的各種數(shù)據(jù)，提供持久的數(shù)據(jù)服務(wù)。數(shù)據(jù)訪問組件為JDBC，C3P0對連接池實施管理，實現(xiàn)數(shù)據(jù)庫與系統(tǒng)其他部分的兼容。

1.2? 基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)硬件設(shè)計

根據(jù)系統(tǒng)的總體架構(gòu)，設(shè)計系統(tǒng)的硬件部分。系統(tǒng)的硬件結(jié)構(gòu)如圖2所示。

由圖2可知，系統(tǒng)硬件結(jié)構(gòu)主要由控制器（單片機(jī)）、OLED顯示器、存儲器、服務(wù)器、用戶終端等構(gòu)成。

單片機(jī)選用功能強(qiáng)大的C805F120型單片機(jī)，顯示器采用V008DF?001型顯示器，分辨率為240×320，采用的點陣式顯示模塊的最大色彩分辨率為26萬色。存儲器選用E2PROM芯片，其接口模式為三線串行接口，通過配置引腳，將其操作模式設(shè)置為8位。單片機(jī)與芯片的電路連接圖見圖3。

1.3? 基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)軟件設(shè)計

在硬件的支撐下，設(shè)計網(wǎng)頁可視化視覺符號交互系統(tǒng)的軟件部分。軟件的實現(xiàn)過程如圖4所示。

采用SVG技術(shù)將文件轉(zhuǎn)換為視覺符號，通過Applet技術(shù)和JavaScript語言實現(xiàn)轉(zhuǎn)換過程[6?8]。當(dāng)用戶想將其轉(zhuǎn)換為視覺符號時，僅需對文本信息做轉(zhuǎn)換，即可得到視覺符號。用戶通過對網(wǎng)頁中的任何視覺符號的操作實現(xiàn)交互。

SVG文件轉(zhuǎn)換為視覺符號的具體過程如下：

首先，將SVG文件存入存儲器中，要先獲取SVG文件，通過式（1）來實現(xiàn)：

式中：[wij]代表網(wǎng)頁中SVG的輸入函數(shù);[a]代表交互系統(tǒng)中網(wǎng)絡(luò)的控制系數(shù);[t]代表網(wǎng)絡(luò)節(jié)點;[xi]代表視覺符號集合的鄰近區(qū)域，[wij]與交互系統(tǒng)中的網(wǎng)絡(luò)節(jié)點[t]和控制系數(shù)[a]有關(guān)，變化值范圍在50～100之間[9?10]。通過式（1）獲取SVG文件。在獲取到SVG文件后，將其傳入存儲器中，對文件開展轉(zhuǎn)換工作，公式為：

式中：[f]代表轉(zhuǎn)換函數(shù);[t]代表轉(zhuǎn)換后的文件數(shù)據(jù);[A0]代表交互系統(tǒng)中的網(wǎng)絡(luò)數(shù)據(jù)轉(zhuǎn)換系數(shù);[e]代表轉(zhuǎn)換前的文件數(shù)據(jù)。當(dāng)完成數(shù)據(jù)轉(zhuǎn)換后，將文件輸出到用戶終端，其輸出通過式（3）實現(xiàn)：

式中：[g]代表將數(shù)據(jù)轉(zhuǎn)換為視覺符號的函數(shù);[B]代表交互系統(tǒng)與用戶終端連接的數(shù)據(jù)轉(zhuǎn)換系數(shù)[11?13]。通過式（3），將SVG文件以視覺符號的形式顯示在用戶終端，實現(xiàn)可視化，用戶對視覺符號作出操作，視覺符號會隨用戶的操作發(fā)生變化。

采用Servlet技術(shù)，讀取存儲器中的數(shù)據(jù)，輸出到SVG頁面，以設(shè)計一個矩形為例，具體過程如下：

通過SVG技術(shù)將文件轉(zhuǎn)換為視覺符號，然后通過對視覺符號的點擊等操作實現(xiàn)交互。

綜上，搭建系統(tǒng)總體架構(gòu)，在總體架構(gòu)基礎(chǔ)上，通過控制器、OLED顯示器、存儲器、鍵盤、服務(wù)器、用戶終端等完成系統(tǒng)硬件設(shè)計，通過Applet技術(shù)和JavaScript語言將SVG文件轉(zhuǎn)換為視覺符號，完成系統(tǒng)軟件設(shè)計。至此，完成基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)設(shè)計。

2? 實? 驗

采用提出的基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)，驗證其是否能為用戶帶來高效的交互體驗，并與傳統(tǒng)的網(wǎng)頁可視化視覺符號交互系統(tǒng)作比較。

2.1? 實驗過程

搭建實驗平臺，具體測試條件如表1所示。

搭建好實驗平臺后，設(shè)定實驗參數(shù)，具體參數(shù)值如表2所示。

在設(shè)定實驗參數(shù)后，分別采用基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)和傳統(tǒng)的網(wǎng)頁可視化視覺符號交互系統(tǒng)做實驗。實驗者點擊文件，交互系統(tǒng)將文件轉(zhuǎn)換為視覺符號，分別采用不同的網(wǎng)頁可視化視覺符號交互系統(tǒng)對文件轉(zhuǎn)換，得到不同交互系統(tǒng)對視覺符號的加載時間。

2.2? 實驗結(jié)果分析

不同網(wǎng)頁可視化視覺符號交互系統(tǒng)的加載時間對比結(jié)果如圖5所示。

由圖5可知，在同樣的硬件環(huán)境下，針對不同文件大小的視覺符號，不同交互系統(tǒng)的加載時間有較大差別。隨著文件大小的不斷增加，三個網(wǎng)頁可視化視覺符號交互系統(tǒng)所需的加載時間均有所增加。采用傳統(tǒng)的網(wǎng)頁可視化視覺符號交互系統(tǒng)2，當(dāng)文件大小為30 Kb時，與其他兩個系統(tǒng)相比，所需加載時間最多，當(dāng)文件大小達(dá)到30 000 Kb時，傳統(tǒng)的網(wǎng)頁可視化視覺符號交互系統(tǒng)1和系統(tǒng)2所需時間均達(dá)到3.6 s左右。而采用提出的基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)，隨著文件大小的不斷增大，其加載時間的增加并不多?？梢姡捎肧VG技術(shù)，對交互系統(tǒng)產(chǎn)生的負(fù)荷小，所以，與其他兩個傳統(tǒng)的網(wǎng)頁可視化視覺符號交互系統(tǒng)相比，需要更少的加載時間。

3? 結(jié)? 語

針對傳統(tǒng)的網(wǎng)頁可視化視覺符號交互系統(tǒng)存在的視覺符號加載時間長的缺點，設(shè)計基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)。通過對比實驗，與傳統(tǒng)的網(wǎng)頁可視化視覺符號交互系統(tǒng)作比較。實驗結(jié)果表明，提出的基于SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)能夠為用戶帶來更好的交互體驗。希望提出的SVG技術(shù)的網(wǎng)頁可視化視覺符號交互系統(tǒng)能夠得到廣泛的應(yīng)用。

參考文獻(xiàn)

[1] 李鑫.基于交互設(shè)計的網(wǎng)頁設(shè)計與制作課程體系改革[J].軟件工程，2017，20（8）：50?52.

[2] 劉挺，徐哲壯，何偉東，等.基于Android的移動化工業(yè)人機(jī)交互系統(tǒng)設(shè)計[J].傳感器與微系統(tǒng)，2017，36（10）：111?114.

[3] 李亞驊，尹念東，陳志.基于手勢識別的虛擬實驗交互系統(tǒng)的設(shè)計與實現(xiàn)[J].湖北工業(yè)大學(xué)學(xué)報，2018，33（1）：38?41.

[4] 李婷婷，余慶軍.虛擬交互系統(tǒng)開發(fā)及關(guān)鍵技術(shù)研究[J].計算機(jī)技術(shù)與發(fā)展，2017，27（12）：124?127.

[5] 范德軍，文勁松，徐勇，等.基于SolidWorks的可視化定制研究[J].圖學(xué)學(xué)報，2018，39（3）：573?578.

[6] 馬德濤，王銳，黃毅.基于SVG的電子海圖復(fù)雜矢量符號繪制方法[J].海洋測繪，2017，37（5）：71?75.

[7] 王弘堃，曹軼，肖麗.基于圖像的大規(guī)模數(shù)據(jù)集交互可視化[J].計算機(jī)研究與發(fā)展，2017，54（4）：855?860.

[8] 劉尚東，談杰，季一木，等.基于Storm的DSMS交互系統(tǒng)客戶端的設(shè)計與實現(xiàn)[J].計算機(jī)應(yīng)用研究，2018，35（1）：182?185.

[9] 劉珠妹，劉堅，李盛樂，等.基于可視化GMT的MapSIS制圖子系統(tǒng)設(shè)計與實現(xiàn)[J].大地測量與地球動力學(xué)，2018，38（3）：326?330.

[10] 趙林，張令濤，王贊，等.調(diào)度自動化系統(tǒng)多視圖人機(jī)交互界面設(shè)計[J].電力系統(tǒng)自動化，2018，42（6）：86?91.

[11] 柏茂源，代福平.網(wǎng)絡(luò)動態(tài)可視化的交互設(shè)計原則構(gòu)建[J].包裝工程，2018，39（4）：193?198.

[12] 蔡瑞初，林殷嫻，艾鵬.SBV：基于SVG的生物信息可視化軟件[J].計算機(jī)科學(xué)，2017，44（10）：33?37.

[13] 邱亞男.基于SVG的IETM數(shù)據(jù)模塊熱點交互技術(shù)[J].兵工自動化，2017，36（4）：45?48.