基于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小时内删除。