书签 分享 收藏 举报 版权申诉 / 6

基于HTML5标准实现HZ3000监控系统的Web应用.pdf

  • 上传人:first2
  • 文档编号:100377463
  • 上传时间:2021-09-08
  • 格式:PDF
  • 页数:6
  • 大小:1.65MB
  • 配套讲稿:

    如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

    特殊限制:

    部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。

    关 键  词:
    基于 HTML5 标准 实现 HZ3000 监控 系统 Web 应用
    资源描述:
    计算机应用S M A I I H Y D R o 姗2 0 1 7 0 4 以0 J 嘶 基于H T ML 5 标准实现H Z 3 0 0 0 监控系统的W e b 应用 苗洪雷,倪红波 ( 华自科技股份有限公司,湖南长沙4 1 0 2 0 5 ) 摘要:针对监控系统实现w e b 应用的传统方式所存在的诸多弊端,介绍了H 肿5 的先进性与开放性,提出了一种基 于H 】M 5 标准实现监控系统w 曲应用的思路与方法,并在一款监控系统软件上进行了实践,开发了画面与报表的解析与转 换工具软件,实现了W 曲应用的具体案例。图5 幅。 关键词:水电站;计算机监控系统;硼:5 ;w e b 应用 0 弓l舌 计算机监控系统广泛应用于电力、水利、工矿 等行业的自动化与信息化系统项目中,实现设备的 状态监控、生产的安全运行与管理。监控系统的核 心功能之一是其组态设计功能,通过监控画面设 计、脚本语言编程等二次开发功能,快速实现系统 应用部署,满足工程定制化需求。监控系统组态设 计功能需要应用到支持丰富图元与控件、矢量图的 图形技术以及脚本语言技术,以实现监控画面的丰 富表现力、无失真缩放、图元对象的动态变化以及 画面包含的各类信息的文件存储等功能。传统的监 控系统以C S 模式( 客户端服务器) 为主,随着 互联网在各行业应用的普及,基于w e b 服务的B s 模式( 浏览器服务器) 应用越来越多。 监控系统要实现w e b 应用浏览,传统方式通 常采用的有n a s h 或S i l v e d i 1 t 技术、s v G ( 可缩放 矢量图形) 标准,也有自定义专有格式。这些传统 实现方式存在一些弊端,如S V G 本身是一种优秀 的2 D 矢量图形标准,但不支持其他多种控件应 用,扩展性较差;A d o b e 公司的n a s h 或微软公司 的s i l v e d i 小t 技术属于非开放性标准,且应用依赖 收稿日期:2 0 1 7 0 6 2 2 作者简介:苗洪雷( 1 9 r 7 6 一) ,男,工程师,主要从事水电 站自动化与信息化技术研发工作。 E m a i l :r r l h l 0 1 0 1 1 2 6 c o m 6 4 于第三方插件来实现,不利于监控系统的长期发展 与维护。当然监控系统厂家的自定义格式,更是存 在技术封闭性的弊端。 删是万维网联盟制定的新一代超文本标 记语言标准规范,有良好的技术先进性与标准开放 性,具备了直接基于H I M L 5 标准实现监控系统 w e b 应用的可行性。H 】 M L 5 在语义特性、本地存 储特性、连接特性、网页多媒体特性、图形特性等 方面都有非常大的提升;如取消了一些过时标记, 增加了新标记,使语言更简洁、高效;基于c a n v a s 、s V G 、W e b G 丑及C S S 3 的3 D 等技术,实现了丰 富图形表现力、惊人的视觉效果。作为新一代标准 规范,瑚:M 巧得到所有主流浏览器的支持,在跨 平台方面,包括不同操作系统与浏览器、P C 机与 移动设备,都有良好一致的用户体验;其标准的开 放性,更是摆脱了对第三方技术的依赖。 H I M l 5 标准的先进性与开放性,使监控系统 W e b 应用可以具备强大的功能与丰富的表现力。因 此基于m M L 5 标准来实现监控系统w e b 应用,成 为非常好的选择。 1 基本思路 监控系统的w 曲应用主要需要实现如下功能: ( 1 ) 文件组成。监控画面或报表的描述信息, 通常以文件形式管理,一般一页监控画面或报表为 一个文件,主要包括了图形信息与数据信息。 万方数据 小水电2 0 1 7 年第4 期( 总第1 9 6 期)计算机应用 ( 2 ) 图元绘制。画面是由一个个图元组成,图 元可以是点、线、面等基本图元,也可以是多个基 本图元组成的组合图元,还可以是实现特定用途的 功能图元,以及视频等控件图元。图元可以改变状 态、动画变化等功能。 ( 3 ) 数据刷新。与实时数据服务器通讯,实现 数据实时更新;或与历史数据服务器交互,获取历 史数据以报表、曲线等形式展现。 基于H I M L 5 标准实现监控系统的W e b 应用要 实现上述功能要求,可以有两种实现思路: 一种是基于J a v a s c r i p t 脚本语言,开发一个专 有引擎,实现类似n a s h 、S i l v e d i 出的功能,支持 各种图形元素、动画、特效,以及数据交互功能。 因为是基于J a v a s c r i p t 开发的,不需要第三方插件, 具备良好的跨平台支持;目前J a v a s c r i p t 功能已足 够强大,开发一个这样的引擎是可行的。缺点是开 发工作量很大,且执行效率相对较低,对于应用于 工业领域的监控系统来说,是一个明显不足。 另一种思路是每个监控画面就是一个W 曲页 面,画面文件以H 】 M L 5 标准描述信息以及存储, 直接被浏览器加载展现。这种方式简单直接,基于 H 】 M L 5 标准与J a v a s c r i p t 语言,具有跨平台特性, 同时因为不需要解析或转换环节,执行效率也相对 较高。 本文采用第二种思路来实现。 2 实现方法 2 1 文件结构 每页监控画面就是一个H 】 M L 5 标准的页面文 件,画面由一个个图元组成,图元基于J a v a s c r i p t 语言描述,在H 】 M L 5 的C a n v a s 对象上输出图形。 图元所关联的数据信息则基于A j a x ( 异步J a v a s c r i p t 和x M L ) 技术连接服务器来获取,根据数据的实 时变化,改变图元状态信息,实现监控画面的动态 变化。 2 2 图元实现 图元分为基本图元、组合图元、功能图元及控 件图元等几类,基本图元由点、线、面三种类型组 成,可细分为点、直线、折线、曲线、圆及圆弧、 矩形、多边形、扇形、文本、图片等;组合图元由 多个基本图元组合而成;功能图元用于实现特定功 能,图形组成与功能逻辑一般比较复杂,基于基本 图元与功能代码来实现;控件图元指A c t i v e X 等系 统标准的第三方控件。由这些各种类别的图元,组 成图元库。 每个图元都是一个对象,所有图元类都继承于 一个基类B a s e I t e m 。B a s e I t e m 类是一个抽象类,定 义了一些图元的基本属性,如风格、颜色、填充 等,以及一些基本的方法,实现图元的绘制、旋 转、平移、缩放等功能。示例代码如下: c l a s sB a s e I t e m 、s 哆l e ; v a rc o l o r : v a rl i U : v o i dD r a w I t e m ( c o n t e 】【t ,d a t a ) ; v o i dR o t a t e ( ) ; v o i dT r 硼s f o r I I l ( ) ; v o i dS c a l e ( ) ; 图元模型数据包括功能参数和几何参数两部 分。功能参数就是包括用户为该图元定义的数据热 点信息、动画信息、脚本信息等。几何参数包括几 何形状、尺寸、颜色、填充、样式等信息。图元的 动态变换包含多种方式,如旋转、移动、缩放等, 当任何一个图元关联的数据发生变化时都有可能驱 动动画产生;因此在图元的外部,每次更新数据都 需要检测画面内部哪些图元需要激活动画,当新的 动画产生时,则调用B a s e I t 咖的R o t a t e 、n a n s f o 册、 S c a l e 等函数来进行动画动作。由于图元是基于 J a v a s c I i p t 实现的,为尽量减少打开网页时下载资源 所需的时间,在设计模型时还要考虑代码的优化, 特别是对实现模型几何特性的代码优化。下面以直 线图元和报表图元为例介绍其实现方法: ( 1 ) 直线图元的实现。直线图元属于基本图 元,继承于基类B a s e I t e m ,主要是实现相关功能的 函数。 绘制函数示例代码: h l c t i o nD m w I t e m ( c o n t e x t ,s t a n X , s t a n Y ,e n d X , 6 5 万方数据 计算机应用 e n d Y ,l i n e W i d t h ) c o n t e x t b e g i n P a t h ( ) ; c o n t e x t 1 i n e W i d t h = l i n e W i d t h : c o n t e x t m o v e r o ( s t a I t X ,s t a r 【Y ) ; c o n t e x t 1 i n e ,r 0 ( e n d X ,e n d Y ) ; c o n t e x t c l o s e P a t h ( ) ; c o n t e x t f i U ( ) ; 旋转函数示例代码: f h n c t i o nR o t a t e ( c o n t e x t ,c e n t e D 【,c e n t e r y ,a n d e ) c o n t e x t t m n s l a t e ( c e n t e r x ,c e n t e r y ) ; c o n t e x t m t a t e ( a n d e ) ; 平移函数示例代码: f 曲c i o nT m s f o 彻( c o n t e x t ,x ,y ) c o n t e x t t r a n s l a t e ( x ,y ) ; 缩放函数示例代码: f h n c t i o nS c a l e ( c o n t e x f ,s c a l e x ,s c a l e y ) c o n t e 】( t s c a l e ( s c :a l e x ,s c a l e y ) ; ( 2 ) 报表图元的实现。报表图元属于复杂的功 能图元,1 个报表由多个表页( S h e e t ) 组成,每个 表页由多个单元格组成,报表的类结构设计如下所 示( 见图1 ) 。 单元格包括热点单元格、公式单元格、图片单 元格、表头单元格、加载时间单元格、生成时间单 元格等。 热点单元格:解析得到对应的数据编码标识, 根据编码获取相应数据更新单元格。 表头单元格:利用换行符获取得到表头的文 字,通过生成两个文本图元与直线图元来实现。 图片单元格:新建图片对象l I I l a g e ,并设置其 为报表文件中对应的内容,最后通过图片图元的绘 制函数D r 洲h 嘴进行绘制。 公式单元格:公式的实现可通过定义相应的 J a 、,鲴珂p t 语言函数实现。 加载时间单元格、生成时间单元格以及生成人 单元格:处理与热点单元格类似。 图1 报表类结构 2 3 数据刷新 传统的w e b 应用为3 层体系结构,分为用户 层、业务层、数据层。监控系统的W e b 应用在此 基础上增加了设备层( 见图2 ) ,设备层采集设备 6 6 的I O 数据,存储于实时与历史数据服务器,服务 器提供标准数据服务接口,w 曲服务程序与之进行 数据交互。 万方数据 小水电2 0 1 7 年第4 期( 总第1 9 6 期)计算机应用 设备层 数据层 业务层 用户层 图2 监控系统W 曲应用体系结构 监控画面的数据刷新采用A j a x 技术来实现, 通过在后台与服务器进行少量数据交换,实现页面 的异步刷新。这样在不重新加载整个页面的情况 下,对网页的某部分进行更新,大大提高更新效率 与用户体验。首先为画面的每个图元、每个数据点 分别设置编码,并创建图元与数据点之间的映 射关系表( I t e m M 印) ;定时从服务器获取所有数据 ( A j a D c 函数) ,一般可以按3 0 0 鹏或5 0 0 嬲时间间 隔;通过映射表,
    展开阅读全文
      文档分享网所有资源均是用户自行上传分享,仅供网友学习交流,未经上传用户书面授权,请勿作他用。
    关于本文
    本文标题:基于HTML5标准实现HZ3000监控系统的Web应用.pdf
    链接地址:https://www.wdfxw.net/doc100377463.htm
    关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

    版权所有:www.WDFXW.net 

    鲁ICP备14035066号-3




    收起
    展开