基于HTML5标准实现HZ3000监控系统的W eb应用
苗洪雷，倪红波
(华自科技股份有限公司，湖南长沙410205)
摘要：针对监控系统实现Web应用的传统方式所存在的诸多弊端，介绍了 HTMLi的先进性与开放性，提出了一种基于HTMLi标准实现监控系统Web应用的思路与方法，并在一款监控系统软件上进行了实贱，开发了画面与报表的解析与转换工具软件，实现了 Web应用的具体案例。图5幅。
关键词：水电站；计算机监控系统；HTML5;Web应用
0引言
计算机监控系统广泛应用于电力、水利、工矿等行业的自动化与信息化系统项目中，实现设备的状态监控、生产的安全运行与管理。监控系统的核心功能之一是其组态设计功能，通过监控画面设计、脚本语言编程等二次开发功能，快速实现系统应用部署，满足工程定制化需求。监控系统组态设计功能需要应用到支持丰富图元与控件、矢量图的图形技术以及脚本语言技术，以实现监控画面的丰富表现力、无失真缩放、图元对象的动态变化以及画面包含的各类信息的文件存储等功能。传统的监控系统以C/S模式（客户端/服务器）为主，随着互联网在各行业应用的普及，基于Web服务的B/S 模式（浏览器/服务器）
应用越来越多。
监控系统要实现W eb应用浏览，传统方式通常采用的有Flash或Silverlight技术、SVG(可缩放矢量图形）标准，也有自定义专有格式。这些传统实现方式存在一些弊端，如S V G本身是一种优秀的2D矢量图形标准，但不支持其他多种控件应用，扩展性较差；Adobe公司的Flash或微软公司的Silverlight技术属于非开放性标准，且应用依赖
收稿日期：2017 - 06 - 22
作者简介：苗洪雷（1976-)，男，工程师，主要从事水电站自动化与信息化技术研发工作。
web标准有哪三大部分E-mail：mhl0101@126 于第三方插件来实现，不利于监控系统的长期发展与维护。当然监控系统厂家的自定义格式，更是存在技术封闭性的弊端。
HTML5是万维网联盟制定的新一代超文本标记语言标准规范，有良好的技术先进性与标准开放性，具备了直接基于HTML5标准实现监控系统Web应用的可行性。HTML5在语义特性、本地存储特性、连接特性、网页多媒体特性、图形特性等方面都有非常大的提升；如取消了一些过时标记，增加了新标记，使语言更简洁、高效；基于Can­vas、SVG、WebGL及 CSS3 的 3D等技术，实现了丰富图形表现力、惊人的视觉效果。作为新一代标准规范，HTML5得到所有主流浏览器的支持，在跨平台方面，包括不同操
作系统与浏览器、P C机与移动设备，都有良好一致的用户体验；其标准的开放性，更是摆脱了对第三方技术的依赖。
HTMI5标准的先进性与开放性，使监控系统W eb应用可以具备强大的功能与丰富的表现力。因此基于HTML5标准来实现监控系统W eb应用，成为非常好的选择。
1基本思路
监控系统的Web应用主要需要实现如下功能：
(1)文件组成。监控画面或报表的描述信息，通常以文件形式管理，一般一页监控画面或报表为一个文件，主要包括了图形信息与数据信息。
•64 •
(2)图元绘制。画面是由一个个图元组成，图元可以是点、线、面等基本图元，也可以是多个基
本图元组成的组合图元，还可以是实现特定用途的
功能图元，以及视频等控件图元。图元可以改变状
态、动画变化等功能。
(3)数据刷新。与实时数据服务器通讯，实现数据实时更新；或与历史数据服务器交互，获取历
史数据以报表、曲线等形式展现。
基于HTML5标准实现监控系统的W eb应用要
实现上述功能要求，可以有两种实现思路：
一种是基于Javascript脚本语目，开发个专
有引擎，实现类似Flash、Silverlight的功能，支持
各种图形元素、动画、特效，以及数据交互功能。
因为是基于Javascript开发的，不需要第二方插件，
具备良好的跨平台支持；目前Javascript功能已足
够强大，开发一个这样的引擎是可行的。缺点是开
发工作量很大，且执行效率相对较低，对于应用于
工业领域的监控系统来说，是一个明显不足。
另一种思路是每个监控画面就是一个W eb页
面，画面文件以HTML5标准描述信息以及存储，
直接被浏览器加载展现。这种方式简单直接，基于HTML5标准与Javascript语目，具有跨平台特性，
同时因为不需要解析或转换环节，执行效率也相对
较高。
本文采用第二种思路来实现。
2实现方法
2.1文件结构
每页监控画面就是一个HTML5标准的页面文
件，幽面由个个图元组成，图元基于Javascript
语言描述，在HTML5的Canvas对象上输出图形。
图元所关联的数据信息则基于Ajax(异步Javascript
和XML)技术连接服务器来获取，根据数据的实
时变化，改变图元状态信息，实现监控画面的动态
变化。
2.2 图元实现
图元分为基本图元、组合图元、功能图元及控
件图元等几类，基本图元由点、线、面三种类型组
成，可细分为点、直线、折线、曲线、圆及圆弧、
矩形、多边形、扇形、文本、图片等；组合图元由多个基本图元组合而成；功能图元用于实现特定功能，
图形组成与功能逻辑一般比较复杂，基于基本图元与功能代码来实现；控件图元指ActiveX等系统标准的第三方控件。由这些各种类别的图元，组成图元库。
每个图元都是一个对象，所有图元类都继承于一个基类Baseltem。Baseltem类是一个抽象类，定义了一些图元的基本属性，如风格、颜、填充等，以及一些基本的方法，实现图元的绘制、旋转、平移、缩放等功能。示例代码如下：
class Baseltem{
var style;
var color;
var fill;
void Drawltem (context，data);
void Rotate();
void Transform();
void Scale();
}
图元模型数据包括功能参数和几何参数两部分。功能参数就是包括用户为该图元定义的数据热点信息、动画信息、脚本信息等。几何参数包括几何形状、尺寸、颜、填充、样式等信息。图元的动态变换包含多种方式，如旋转、移动、缩放等，当任何一个图元关联的数据发生变化时都有可能驱动动画产生；因此在图元的外部，每次更新数据都需要检测画面内部哪些图元需要激活动画，当新的动幽产生时，则调用Baseltem的Rotate、Transform、Scale等函数来进行动画动作。由于图元是基于Javascript实现的，为尽量减少打开网页时下载资源所需的时间，在设计模型时还要考虑代码的优化，特别是对实现模型几何特性的代码优化。下面以直线图元和报表图元为例介绍其实现方法：
(1)直线图元的实现。直线图元属于基本图元，继承于基类Baseltem，主要是实现相关功能的函数。
绘制函数示例代码：
function Drawltem(context；startX，startY，endX，
•65 •
endY，lineWidth){
context-beginPathC);
context.lineWidth= lineWidth;
context-moveToC startX，startY);
context-lineTt^C endX，endY);
context-closePathC);
context-fine)；
}
旋转函数示例代码：
function Rotate(context，centerx，centery，angle) {
context-translateC centerx，centery);
context-rotateC angle);
}
平移函数示例代码：
funcion Transform^ context，x，y)
{
context-translateC x，y);
}
缩放函数示例代码：
function Scale(context，scalex，scaley)
context-scale(scalex，scaley);
}
(2)报表图元的实现。报表图元属于复杂的功能图元，1个报表由多个表页（Sheet)组成，每个表页由多个单元格组成，报表的类结构设计如下所示（见图1)。
单元格包括热点单元格、公式单元格、图片单元格、表头单元格、加载时间单元格、生成时间单元格等。
热点单元格：解析得到对应的数据编码标识，根据编码获取相应数据更新单元格。
表头单元格：利用换行符获取得到表头的文字，通过生成两个文本图元与直线图元来实现。
图片单元格：新建图片对象Image，并设置其为报表文件中对应的内容，最后通过图片图元的绘制函数DrawImage进行绘制。
公式单元格：公式的实现可通过定义相应的Javascript语目函数实现。
加载时间单元格、生成时间单元格以及生成人单元格：处理与热点单元格类似。
图1报表类结构
2.3数据刷新
传统的W eb应用为3层体系结构，分为用户层、业务层、数据层。监控系统的W eb应用在此基础上增加了设备层（见图2)，设备层采集设备的I/O数据，存储于实时与历史数据服务器，服务器提供标准数据服务接口，W eb服务程序与之进行数据交互。
• 66
•
图2监控系统W eb应用体系结构
监控画面的数据刷新采用A ja x技术来实现，通过在后台与服务器进行少量数据交换，实现页面的异步刷新。这样在不重新加载整个页面的情况下，对网页的某部分进行更新，大大提高更新效率与用户体验。首先为画面的每个图元、每个数据点分别设置编码ID，并创建图元与数据点之间的映射关系表（ItemMap)；定时从服务器获取所有数据(A jax函数），一般可以按300 m s或500 m s时间间隔；通过映射表，根据数据变化改变各个图元状态(RefreshData函数），示例代码如下：
function Refresh() {
ajax( {type:‘POST'
url:DataUrl，
data：params，
success：function(data){
RefreshData(oAj[‘result'，itemMap);
}
)；
}
3应用案例
HZ3000计算机监控系统应用于多个自动化与信息化领域，具有图形表现力丰富、组态设计功能强大、支持跨平台部署等特点，其监控画面与报表是采用XML(可扩展标记语言）标准格式，原本采用基于S V G技术来实现W eb应用；为了达到更好的应用效果，采用本文上述方法，实现了基于HTML5标准来实现Web应用。
HZ3000监控系统的画面与报表采用X M L格式
文件，与基于HTML5及Javascript语言的动态绘制
模式之间存在非常大的区别，因此实现的主要与关
键内容就是开发一个解析与转换工具，把HZ3000
监控系统的画面与报表文件，以及相关数据定义信
息等工程文件，转换生成HTML5及Javascript标准
格式的文件，实现Web模式的浏览监控。
解析与转换工具的实现，主要包括如下内容：
(1)由于画面及报表文件采用X M L格式进行描述，利用 Dom4j(l 个 JavaXML 的 API)对 XML
进行解析，获取各个图元的属性信息。
(2)基本图元转换。将画面及报表文件中的本图元转换为HTML5中对应的基本元素。基本图
元包括：直线、曲线、折线、矩形、多边形（三角
形、菱形、任意多边形）、圆形、椭圆、扇形、圆
弧（1/4 与 1/2)、图片（JPG、PNG、BMP、GIF等
格式）等。
(3)组合图元转换。组合图元由1个或多个本图元组合而成，每个组合图元包含多种状态，并
可根据读到的数据在不同状态之间切换。
(4)功能图元。功能图元由基本图元及功能码组成，具备扩展属性与数据点，可进行动态
修改。
(5)控件图元。支持ActiveX等控件，可根画面中针对控件设置的扩展属性、关联数据点实现
控件内的特定显示效果。
(6 )Javascript脚本响应。能够响应自定义的Javascript脚本函数。
(7)动画效果响应。根据关联数据点动态改图元的状态。
(8)远程控制输出。用户通过交互发送远程制命令，达到控制远程设备的目的。
(9)数据报表解析。数据报表类似于Excel，个报表包含多个Sheet。
总体的解析与转换流程如下所示（见图3)。
• 67
•
图3解析与转换流程示意
通过所开发的解析与转换工具，成功实现把 HZ 3000监控系统的画面与报表文件转换为HTML 5 标准的文件浏览器直接从W eb 服务器加载各画面 文件实现实时监控，大大提高了运行效率与展现效 果。通过测试结果显示，在正1、-d /*、0丨2*3〇5、 67248*等主流浏览器中，均获得良好一致的运行
效果；在页面包含图元1 000个、数据1 000点，数据通讯间隔300 ms 、画面刷新1 000 ms ，基于目 前市场主流配置P 6机与服务器，系统画面切换、 刷新、缩放等都表现流畅，用户体验良好。目前， 采用了本技术成果的HZ 3000监控系统已在电力、水 利等多个工程项目中示范应用（见图4、图5)。
图4
监控系统W eb 应用效果示意（一）
68
■:::：二
三--…；：':':?-'
™
•
: .
二.“ T ~：乂
：,I I I S .T
\
H H  S H
::<•;H B 133
■0:
5
:
H
E
二
9M 里
Q Q Q D Q Q D Q D D D Q
B

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。