同窗口分屏配置模式研究

◎ 中國地質大學（武漢）信息工程學院 許 峰

【關鍵字】窗口分屏配置 框架管理 應急支持 大屏幕

1、引言

在使用城市供水水質監(jiān)控預警及應急支持系統(tǒng)應對城市供水突發(fā)事件時，常常需要將多個相關聯(lián)的功能模塊窗口同時顯示在大屏幕上，而且隨著事態(tài)的發(fā)展，各功能模塊窗口顯示與否以及顯示內(nèi)容需進行實時調整。由于目前大屏幕系統(tǒng)應用結構的限制，同時顯示多個功能模塊通常是將各功能模塊分配在多臺計算機上，再通過大屏幕控制系統(tǒng)將這些計算機的視頻圖像拼合疊加[1]，最后輸出在大屏幕上顯示，這樣調整一個模塊的內(nèi)容需要在對應的計算機上進行操作，且需要多個步驟，操作繁瑣；另外，由于整個應急支持系統(tǒng)采用B/S架構，如各個功能模塊分配在不同計算機上，模塊彼此間數(shù)據(jù)將無法關聯(lián)，無法進行實時聯(lián)動。而在城市供水應對突發(fā)事件時，大屏幕能否實時、迅速、正確的顯示數(shù)據(jù)，直接影響現(xiàn)場調度指揮人員的判斷[2]。因此，為提高大屏幕數(shù)據(jù)的顯示質量，必須對多個模塊窗口的數(shù)據(jù)更改、配置步驟進行優(yōu)化。

2、大屏幕系統(tǒng)在城市供水應急支持系統(tǒng)中的應用

2.1 應用原理

城市供水應急支持系統(tǒng)中的大屏幕顯示系統(tǒng)，主要由DLP投影拼接墻、Digicom多屏處理器、音視頻矩陣切換器，以及中央控制系統(tǒng)等四大部分組成。圖1為系統(tǒng)應用結構示意圖，圖中功能架構的描述，反映了城市供水應急支持系統(tǒng)的整個數(shù)據(jù)流程。

如圖1所示，在城市供水系統(tǒng)發(fā)生緊急事件應急指揮時，各監(jiān)測服務器將各自模塊窗口的VGA視頻信號以及遠程專家的視頻信號傳入視頻矩陣，中央控制系統(tǒng)操控多屏處理器生成最終要顯示的視頻信號傳入大屏幕投影機，最后由DLP投影拼接墻顯示出來，現(xiàn)場應急調度人員根據(jù)各監(jiān)測信息及專家建議，決議出最終的解決方案。

圖1 大屏幕系統(tǒng)數(shù)據(jù)流程

2.2 存在的問題

在上述處理過程中，現(xiàn)場調度人員常常需要對功能模塊窗口的大小、位置，以及其顯示的數(shù)據(jù)進行調整，而這些模塊窗口彼此間互有關聯(lián)，一個窗口數(shù)據(jù)的改變需要同時改變其他關聯(lián)窗口的數(shù)據(jù)，如采用圖1的常規(guī)應用結構，將多個功能模塊分配在多臺監(jiān)測服務器上進行顯示，則當調度人員需要對某個模塊進行調整時，要經(jīng)過以下步驟：

★ 現(xiàn)場調度人員將需求告知監(jiān)測服務器操作人員。

★ 監(jiān)測服務器操作人員根據(jù)需求進行操作，若需求會引起多個模塊聯(lián)動時，還需監(jiān)測服務器操作人員間互相協(xié)商、配合。

★ 若模塊改變涉及到窗口大小、位置的調整，則由大屏幕中央控制系統(tǒng)操作臺根據(jù)調度人員的需求對各模塊進行調整。

以上各步驟均為人工操作，且一次需求改變需多級轉達，這樣一個簡單的數(shù)據(jù)變更，將會帶來現(xiàn)場工作人員一系列繁瑣的操作，同時無法保證各模塊數(shù)據(jù)的實時性、正確性。

為解決上述問題，簡化操作流程，筆者特提出了“同窗口分屏配置”技術，該技術從整個操作步驟的源頭進行簡化，把多個功能模塊放入一個網(wǎng)頁窗口中，在一臺計算機上進行顯示，并將以上（2）、（3）步驟利用富客戶端技術進行程序化管理，既減少了繁瑣的操作，又提高了顯示數(shù)據(jù)的實時性、正確性。

3、“同窗口分屏配置”技術

“同窗口分屏配置”技術主要由框架管理技術、多模塊間數(shù)據(jù)聯(lián)動技術組成，其思路是：利用JavaScript在瀏覽器端構建框架管理技術，實現(xiàn)各模塊窗口的大小、位置的動態(tài)調整；同時利用隱藏框架頁面，保存整個事件處理過程中的各狀態(tài)變量，實現(xiàn)各模塊間數(shù)據(jù)的聯(lián)動?！巴翱诜制僚渲谩奔夹g流程示意圖2如下：

3.1 框架管理技術

框架管理技術是將Web瀏覽器窗口分為不同的區(qū)域，這些區(qū)域可獨立顯示單個模塊網(wǎng)頁窗口。此時的瀏覽器窗口就像一個框架容器，不僅能動態(tài)的創(chuàng)建框架，將新加入的模塊頁面放入顯示，還能利用其對子框架的大小、位置、框架內(nèi)模塊URL進行更改。框架管理技術采用腳本語言JavaScript實現(xiàn)，具有操作簡單、界面友好、維護方便等優(yōu)點，具體功能如下：

★ 當一個功能模塊加入整個顯示窗口時，框架管理模塊會在網(wǎng)頁內(nèi)新建一個IFrame框架，新加的功能模塊將會在該IFrame框架中顯示，此時若有多個模塊存在，新加入的框架能自動排列，大小自動適應。

★ 當一個功能模塊關閉時，框架管理模塊會關閉該IFrame框架的顯示，同時調整剩下模塊的位置，使其均向左側對齊。

圖2 同窗口分屏配置流程圖

★ 拖動網(wǎng)頁中任一框架，其他模塊的位置將會自動排列。

★ 任一功能模塊均可調整大小，當一個模塊大小改變時，其他模塊的位置將會自動排列。

圖3為城市供水應急處理系統(tǒng)中8個模塊同時配置顯示的情形。

3.2 多模塊間數(shù)據(jù)的聯(lián)動技術

為保證各模塊間數(shù)據(jù)的聯(lián)動，我們將整個應急處理流程中公共變量、各模塊操作狀態(tài)均存放于隱藏頁面中，并將部分重要數(shù)據(jù)存入數(shù)據(jù)庫，便于各模塊存取。多模塊間數(shù)據(jù)的聯(lián)動技術詳細功能如下：

★ 當一個模塊被創(chuàng)建時會讀取隱藏頁面的公共數(shù)據(jù)，從而實現(xiàn)其初始化。

★ 當某個模塊內(nèi)的內(nèi)容進行更改時，其狀態(tài)信息將會寫入隱藏頁面。

★ 當某個模塊內(nèi)容進行調整時，其他相關聯(lián)的模塊會重新讀取隱藏頁面的公共數(shù)據(jù)，刷新整個頁面的數(shù)據(jù)。

3.3 “同窗口分屏配置”技術的限制

如上圖所示，采用“同窗口分屏配置”技術的網(wǎng)頁窗口將多個功能模塊同時顯示，這樣該網(wǎng)頁窗口的大小將會是多個模塊長寬之和，因此為保證輸出給大屏幕控制中心VGA視頻信號的完整，方便現(xiàn)場應急工作人員操作，運行該網(wǎng)頁窗口的計算機的顯卡、顯示器的最大分辨率必須達到該網(wǎng)頁窗口的長和寬的值。例如：若將8個模塊分兩行嵌入該網(wǎng)頁窗口中，每個功能模塊正常狀態(tài)下的大小是600×600，該網(wǎng)頁窗口的大小將會達到2400×1200。這樣運行該網(wǎng)頁窗口的計算機的顯卡、顯示器的最大分辨率必須也達到2400×1200。

目前市場上非專業(yè)級顯卡最高分辨率已經(jīng)達到2560×1600，部分26寸的LCD顯示器的分辨率也達到了2560×1600，因此只要采用這些合適的硬件，就能完全滿足實際應用的需要。

4、結束語

針對城市供水應急支持系統(tǒng)中的大屏幕顯示系統(tǒng)模塊間無法聯(lián)動、操作略顯繁瑣的問題，本文詳細闡述了利用網(wǎng)頁框架以及JavaScript技術實現(xiàn)同窗口分屏配置。實際應用表明，采用該技術僅需兩名工作人員即可滿足實際工作的需要，不僅能大幅簡化工作人員的操作流程，使得城市供水發(fā)生突發(fā)事件時能更迅速、實時的反應，還能節(jié)省大量人手和硬件成本。

圖3 城市供水應急處理系統(tǒng)應急支持模塊