基于Web 的远程监控系统人机界面开发设计与实现

张子涵

（东北林业大学，黑龙 江哈尔滨 150040）

传统的远程监控系统主要是基于C/S 架构，具有硬件成本高、维护工作量大等弊端。相比之下，基于Web 的远程监控系统，不仅解决了上述问题，而且降低了操作难度，可以支持资源共享以及实现全天候、全方位的监控。但是基于Web的远程监控系统，要通过浏览器查看监控画面，为了进一步提升网页图形图像及视频画面的清晰度，必须要开发设计更加友好的人机界面。基于此，本文对基于Web 的远程监控系统人机界面开发设计与功能实现展开了探究。

1 基于Web 的人机界面系统设计

在远程监控系统中，人机界面作为关键的组成部分，是连接系统与用户的重要媒介，也是决定系统操作体验的主要因素。从使用功能上来看，人机界面系统除了要提供基本的数据查询、画面（视频）显示和指令操作外，还必须具有交互性强、友好度高等特性，让用户在操作时获得更好的体验。基于用户操作需要和使用需求，在人机界面系统设计的流程如下：

第一，进行图形界面工具设计。其设计要求是能够采集到的各类数据或监控参数，以直观的方式（如图形、视频）展示给用户，让用户能够一目了然地掌握现场情况。设计环节要给用户提供两种类型的图形界面工具，一种是常见的基本图形，如直线、曲线、矩形、三角形等，另一种是较为复杂的图形，如开关、发电机等常用电力设备的示意图。

第二，进行曲线及趋势图设计。其设计要求是直观地反映实时数据和历史数据的变化情况，应基于曲线图或趋势图的分析进行预测，以便于更好地了解监控对象的未来变化情况，提前做好应对。实时曲线图侧重于直观反映监控对象当前情况，而历史趋势图则可以推测出发展规律，分析和利用价值更高。

第三，进行异常报警系统设计。在监测到异常数据后，需要自动调用报警指令发出警报，提醒技术人员加以处理。具体又可分成模拟量越界报警、系统故障报警等类型。

基于系统安全考虑，在人机界面开发设计时还应加入用户权限认证功能，既可以明确不同人员的职责分工，同时又可以防止用户越权操作。一般来说将用户划分成三类，即一般权限的操作员、高级权限的操作员，以及系统工程师。不同人员的权限设置如表1 所示。

表1 基于权限认证的用户操作权限划分

2 人机界面开发设计

2.1 基于Ajax 和SOAP 的人机界面系统设计

本设计对Java Script 和服务器脚本的人机界面框架进行改进，加入了Ajax 技术和SOAP 协议，保证在主站和子站之间的数据交换都是基于XML 进行，进一步提高了实时数据交换速率。设计环节中的Ajax 的Web 应用除了支持更高级的UI 功能外，还提供了更加平滑和优化的服务器交互过程，并且实现了异步通信，简化了Web 开发流程。在Web 页面运行时，通过Java Script 从服务器采集数据，并实时同步至页面中。所有工作均在后台完成，当用户发起操作请求时，客户端可立刻执行该操作，从而解决了数据处理和指令传达之间的矛盾。在客户端方面，选择SVG 矢量图形显示图形或视频内容。整个人机界面系统的结构组成如图1 所示。

图1 基于Web 的人机界面系统结构图

基于XML 语言的SVG（可缩放矢量图形）具有较强的可扩展性能，支持较大比例的放大、缩小，并且不会出现模糊、失真的情况。同时，SVG 图形文件的体积更小，一方面是减少了传输过程中对网络资源的占用，减轻了系统运行负担；另一方面也提高了数据传输效率，做到了同步显示。

2.2 人机界面系统的数据更新过程

该系统的数据采集、传输和更新过程包括：a.用户执行加载或检索数据的操作后，后台会通过Ajax 引擎向Web 服务器发出请求；b.Web 服务器接收请求后，无法从数据库中直接调用相应的数据，而是从SOAP 服务器发出数据服务请求，然后实时数据库根据该请求从对应的分区中调用数据，并反馈给SOAP 服务器。该服务器利用XML 对所得数据做格式化处理，将实时数据转化成标准格式数据后，再传输至Web 服务器，最后经由Web服务器将数据发送至客户端。c.在客户端内对XML文档进行解析，将解析后的实时数据制作成DOM节点树，使每一个阶段都能与SVG 的设备图元之间构建映射关系。d.根据解析获得的实时数据，运行客户端上的Java Script 脚本函数，并判断是否执行动画效果。如需执行，则SVG 会自动优化数据并生成最终的动画效果，通过屏幕呈现出来，完成用户与系统的动态交互。

3 基于Web 的远程监控系统人机界面功能实现

3.1 人机界面系统的开发环境

为了验证基于Web 的远程监控系统人机界面功能的运行情况，基于Windows 操作系统设计了仿真实验，人机界面系统的开发工具和运行环境如表2 所示。

表2 人机界面系统的开发与运行环境

3.2 人机界面系统的功能实现

3.2.1 图形界面工具

在人机界面系统的图形界面中，除了要向用户展示已经完成的图形画面外，还应支持用户自己设计图形画面来展示监控现场，这样才能根据用户自己的需要，灵活观察监控现场各个角落的细节信息。界面图形工具模块如图2 所示。

图2 图形界面工具

结合图2 可知，工具栏中不仅提供了常规的直线、曲线、圆形等简单形状，而且也能够选择更加复杂的图元直接添加到界面中心的绘画面板中。图形界面工具可支持的绘图功能有图形缩放、图形拖动、图形展示等多种。以图形缩放为例，用户只需要调出缩放菜单，手动输入缩小或放大的倍数，点击确定后即可完成图形缩放操作，其缩放系数与视口及视窗之间的关系比例为公式（1）：

3.2.2 历史数据统计图表显示

该系统中所有的数据交换都是基于XML 完成的，在进行历史数据处理时需要使用到XSLT（可扩展样式语言转换）。XSLT 是专门用于转换XML 文档结构的一种语言，其运行原理是寻找匹配符合特定条件的节点，然后利用既定的规则或遵循相关的协议（如SOAP 协议），将XML 数据转化成另一种可以准确描述数据的文档，如HTML 格式文档或PDF 格式文档等。由于该系统是基于SVG 矢量图形来展示监控内容的，因此最终需要将XML 数据文件转化成SVG 格式文档，转换过程如图3 所示。

结合图3 可知，XML 格式文档作为源文件，其中包含了大量与监控对象有关的统计图表。结合数据提取流程，XML文档是基于SOAP 协议从实时数据库中提取得来的，无法直接展示。因此需要使用转换器XML 格式文档转换为XSLT文件。根据图表数据内容的不同，转换后的XSLT 文件有饼状图、曲线图和柱状图三种类型。然后在从文件中提取数据得到对应的SVG 文档。

图3 使用XSLT 生成SVG 文档流程图

3.2.3 实时数据趋势图显示

远程监控系统在运行中，前端监控数据经过通信传递和后台处理后，最终在人机界面上呈现出来，由于中间会花费一定的时间，因此界面上显示的画面往往不是监控对象的实时状态。本系统结合SVG 和Ajax 异步传输优势，缩短了数据传输及加工时间，保证了通过浏览器可以展示实时数据曲线。生成实时数据趋势图主要步骤为：首先是由客户端每隔10-100ms 持续发出请求，一直到服务器接收请求。然后服务器执行SQL 语句获取想要的数据。得到数据后服务器将数据拼凑成SVG 语句, 其代码如下：

利用SVG 解析器实时渲染已经发生变化的部分，并在刷新页面后实时更新出来，得到实时数据趋势图，如图4 所示。

图4 模拟实时监控数据显示效果

结束语

本文设计的一种基于Web 的人机界面子系统，综合运用了Ajax 技术、SVG 技术和SOAP 协议，支持数据实时更新、方便用户自主操作，可同步展示监控对象当前状态，提高了远程监控系统的实用性。