同窗口分屏配置模式研究

◎ 中国地质大学（武汉）信息工程学院 许 峰

【关键字】窗口分屏配置 框架管理 应急支持 大屏幕

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 城市供水应急处理系统应急支持模块