同窗口分屏配置模式研究

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

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

1、引言

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

2、大屏幕系統在城市供水應急支持系統中的應用

2.1 應用原理

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

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

圖1 大屏幕系統數據流程

2.2 存在的問題

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

★ 現場調度人員將需求告知監測服務器操作人員。

★ 監測服務器操作人員根據需求進行操作，若需求會引起多個模塊聯動時，還需監測服務器操作人員間互相協商、配合。

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

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

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

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

“同窗口分屏配置”技術主要由框架管理技術、多模塊間數據聯動技術組成，其思路是：利用JavaScript在瀏覽器端構建框架管理技術，實現各模塊窗口的大小、位置的動態調整；同時利用隱藏框架頁面，保存整個事件處理過程中的各狀態變量，實現各模塊間數據的聯動。“同窗口分屏配置”技術流程示意圖2如下：

3.1 框架管理技術

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

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

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

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

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

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

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

3.2 多模塊間數據的聯動技術

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

★ 當一個模塊被創建時會讀取隱藏頁面的公共數據，從而實現其初始化。

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

★ 當某個模塊內容進行調整時，其他相關聯的模塊會重新讀取隱藏頁面的公共數據，刷新整個頁面的數據。

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

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

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

4、結束語

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

圖3 城市供水應急處理系統應急支持模塊