基于Selenium的數(shù)據(jù)可視化控制系統(tǒng)設(shè)計與開發(fā)

顧柳柳，何海樂

（上海計算機(jī)軟件技術(shù)開發(fā)中心，上海 201112）

0 引言

基于直觀、生動的展現(xiàn)特點，數(shù)據(jù)可視化成為當(dāng)前大數(shù)據(jù)領(lǐng)域研究焦點之一。當(dāng)前用于多領(lǐng)域展示大屏的數(shù)據(jù)可視化方案存在切換繁瑣、操作復(fù)雜等問題。為滿足大屏演示系統(tǒng)的靈活控制需求，需要一套便捷自動化的大屏控制解決方案。

Selenium是一個自動化測試工具，是為網(wǎng)站自動化測試而開發(fā)，它可以直接調(diào)用瀏覽器，讓瀏覽器自動打開頁面、切換頁面、關(guān)閉頁面、獲取數(shù)據(jù)、網(wǎng)頁截屏等。它有四個主要組成部分，包括Selenium IDE、Selenium遠(yuǎn)程控制器（現(xiàn)已棄用）、Selenium WebDriver和Selenium Grid。

在數(shù)據(jù)可視化控制系統(tǒng)中，主要使用了Selenium WebDriver和Selenium Grid。Selenium WebDriver提供了一個編程接口，用于支持識別網(wǎng)頁上的Web元素，然后對這些元素執(zhí)行所需的操作。Selenium Grid支持在不同的機(jī)器上并行運(yùn)行不同瀏覽器的操作，即可以在運(yùn)行不同瀏覽器和操作系統(tǒng)的不同物理設(shè)備上同時運(yùn)行，完成操作。

1 系統(tǒng)框架

數(shù)據(jù)可視化控制系統(tǒng)的總體架構(gòu)分為四層（見圖1），從最底層到最頂層依次為：數(shù)據(jù)層、支撐層、應(yīng)用層和展現(xiàn)層。用戶可以通過控制系統(tǒng)后臺對演講演示的設(shè)備、案例、場景進(jìn)行管理。支持用戶在演講的過程中，通過大屏演示前臺對已連接的大屏進(jìn)行相應(yīng)操作。

圖1 系統(tǒng)架構(gòu)圖

1.1 數(shù)據(jù)層

數(shù)據(jù)層主要用于數(shù)據(jù)的存儲、修改、刪除和讀取。使用了兩種類型的數(shù)據(jù)庫，在關(guān)系型數(shù)據(jù)庫MySQL的基礎(chǔ)上，引入了非關(guān)系型數(shù)據(jù)庫Redis的使用，用于解決演講時大屏需要少延遲地展現(xiàn)的問題。

1.2 支撐層

支撐層主要用于實現(xiàn)在不同物理設(shè)備上同時運(yùn)行不同瀏覽器和操作系統(tǒng)的需要，達(dá)成在一個系統(tǒng)中對多個不同物理設(shè)備上的數(shù)據(jù)可視化大屏進(jìn)行操作。其中使用的關(guān)鍵技術(shù)是Selenium套件中的Selenium WebDriver和Selenium Grid。

1.3 應(yīng)用層

應(yīng)用層向用戶提供可視化操作界面對設(shè)備、案例、場景進(jìn)行管理，主要包括大屏演示前臺和數(shù)據(jù)可視化控制系統(tǒng)后臺兩個部分。數(shù)據(jù)可視化控制系統(tǒng)后臺為管理員提供展示設(shè)備和演講內(nèi)容的設(shè)置，為之后的演講做好準(zhǔn)備工作。大屏演示平臺為演講人員提供一個大屏操作臺，用于一邊演講一邊操作相應(yīng)大屏，以數(shù)據(jù)可視化的方式完成一場演講宣傳。

1.4 展示層

展示層是數(shù)據(jù)可視化控制系統(tǒng)需要配置連接的主要物理設(shè)備，通過瀏覽器的方式，展示需要展示的數(shù)據(jù)可視化大屏內(nèi)容。

2 數(shù)據(jù)可視化控制系統(tǒng)后臺

數(shù)據(jù)可視化控制系統(tǒng)后臺的三大主要業(yè)務(wù)模塊為設(shè)備管理、案例管理、場景管理，三個模塊之間通過接口進(jìn)行連接。系統(tǒng)底層利用Selenium WebDriver支持廣泛的網(wǎng)絡(luò)瀏覽器、編程語言和測試環(huán)境，并且可以直接與Web瀏覽器通信等特性，實現(xiàn)多環(huán)境、多平臺、多瀏覽器的兼容性控制。

（1）設(shè)備管理模塊支持對設(shè)備進(jìn)行管理。主要功能包括設(shè)備的新增、查看、編輯和刪除等功能。

（2）案例管理模塊支持對案例進(jìn)行管理。主要功能包括數(shù)據(jù)可視化大屏案例的新增、查看、編輯和刪除等功能。

圖5顯示了本文所述施工段局部地表測點分布。盾構(gòu)始發(fā)段與接收段每隔 10 m布置一排監(jiān)測點，正常掘進(jìn)段每隔 30 m 布置一排監(jiān)測點，由于部分測點數(shù)據(jù)丟失，因此選取CK 46+785—CK 47+055區(qū)間中位置典型且數(shù)據(jù)完整的測點作為典型監(jiān)測點。

（3）場景管理模塊支持將案例設(shè)置成一組后，用于前臺批量控制。后臺的主要功能包括數(shù)據(jù)可視化大屏案例的新增、查看、編輯和刪除等功能。

2.1 登錄

用戶使用下發(fā)的賬號和密碼進(jìn)行登錄系統(tǒng)（見圖2）。

圖2 登錄界面

2.2 設(shè)備管理

用戶在“設(shè)備管理”界面中對設(shè)備進(jìn)行管理（見圖3）。主要包括維護(hù)設(shè)備的設(shè)備類型、設(shè)備IP地址、設(shè)備描述等信息，以及維護(hù)與對應(yīng)設(shè)備連接的屏幕信息，屏幕信息包括屏幕的分辨率、默認(rèn)展示的數(shù)據(jù)大屏案例。

圖3 設(shè)備管理

點擊“新增”按鈕，打開新增界面（見圖4）。需要填寫的內(nèi)容包括設(shè)備的基礎(chǔ)設(shè)置信息和操作大屏信息。基礎(chǔ)設(shè)置信息包括設(shè)備名稱、設(shè)備IP地址、設(shè)備類型、設(shè)備描述。

圖4 新增設(shè)備

在“操作大屏”模塊中，點擊“新增大屏”彈出“添加大屏”界面（見圖5），用于添加當(dāng)前設(shè)備IP地址下需要控制的大屏。

圖5 新增大屏

2.3 案例管理

用戶在“案例管理”界面中對數(shù)據(jù)大屏案例進(jìn)行管理（見圖6）。支持在一個數(shù)據(jù)大屏案例中添加多個頁面，用于實現(xiàn)大屏演示前臺的頁面切換操作。支持對頁面添加瀏覽器常用操作，用于實現(xiàn)大屏演示前臺的常用的單頁面操作。

圖6 案例管理

點擊“新增”按鈕，打開新增界面（見圖7）。需要填寫的內(nèi)容有案例的基礎(chǔ)設(shè)置信息和演示內(nèi)容設(shè)置?；A(chǔ)設(shè)置信息包括案例名稱、案例分類、案例描述。

圖7 新增案例

圖8 新增頁面

2.4 場景管理

用戶在“場景管理”界面中對場景進(jìn)行管理（見圖9）。支持對數(shù)據(jù)大屏案例進(jìn)行批量管理，用于實現(xiàn)大屏演示前臺的場景一鍵啟動操作。

圖9 場景管理

點擊“新增”按鈕，打開新增界面（見圖10）。需要填寫的內(nèi)容有案例的基礎(chǔ)設(shè)置信息和演示內(nèi)容設(shè)置。基礎(chǔ)設(shè)置信息包括案例名稱、案例分類、案例描述。

圖10 新增場景

在“場景案例”模塊中，點擊“新增”彈出“新增內(nèi)容”界面（見圖11），用于添加當(dāng)前場景中需要一鍵啟動的大屏案例，支持啟動不同設(shè)備、不同操作系統(tǒng)中的案例。

圖11 新增內(nèi)容

3 大屏演示前臺

大屏演示前臺（見圖12）為演講人員提供一個大屏操作臺，用于一邊演講一邊操作相應(yīng)大屏，以數(shù)據(jù)可視化的方式完成一場演講宣傳。主要功能包括熱門場景、硬件設(shè)備管理等功能。

圖12 大屏演示前臺

（1）熱門場景支持一鍵啟動該場景中配置的不同設(shè)備及其可視化案例。

（2）硬件設(shè)備支持按設(shè)備對設(shè)備內(nèi)顯示的數(shù)據(jù)可視化案例進(jìn)行操作。

3.1 熱門場景

熱門場景一鍵啟動主要基于演示場景模塊（見圖13），根據(jù)模塊中已有的場景信息，實現(xiàn)并發(fā)控制多個設(shè)備屏幕展示相應(yīng)案例的功能。

圖13 一鍵啟動

3.2 硬件設(shè)備

在硬件設(shè)備列表中選擇所需控制的設(shè)備，在跳轉(zhuǎn)到的設(shè)備詳情中選擇所需控制的屏幕后，即可在對應(yīng)屏幕下展示所需案例并控制其進(jìn)行一系列靈活操作。相關(guān)的界面設(shè)計如圖14所示。

圖14 單一設(shè)備控制

4 結(jié)語

本文給出了基于選擇思想的不改變數(shù)據(jù)的原始位置而對數(shù)據(jù)進(jìn)行排序的算法，并利用C#語言編程實現(xiàn)了該算法的動態(tài)演示；此外，本文基于Selenium套件對不同設(shè)備、不同操作系統(tǒng)的瀏覽器頁面進(jìn)行遠(yuǎn)程操作，并利用數(shù)據(jù)可視化控制系統(tǒng)的后臺和前臺的功能，實現(xiàn)了該技術(shù)的實際應(yīng)用。該算法和技術(shù)可用于解決實際工作中的一些相關(guān)問題，具有一定的實際意義。用C#語言實現(xiàn)的動態(tài)演示程序，以及用數(shù)據(jù)可視化控制系統(tǒng)實現(xiàn)的實際應(yīng)用均有助于讀者更好地理解和把握該算法和技術(shù)的基本思想和實現(xiàn)過程。