网站首页  词典首页

请输入您要查询的论文:

 

标题 基于SVG技术的WEB化监控系统
范文 万诗新,张雪松
摘要:SVG是W3C推出的用于描述二维矢量图形基于XML的一种开放图形格式,本文对SVG的概念,基于SVG的WEB化监控系统技术及实现架构进行了详细剖析,提及的相关技术、设计理念在实际项目上均得到了很好的应用。
关键词:SVG WEB化矢量图形监控系统
监控系统软件是一套集数据采集、监测、控制于一体,通过丰富的流程画面、曲线、报警等手段对数据进行展现的软件包,其应用领域很广,它可以应用于电力系统、给水系统、石油、化工等领域的数据采集与监视控制以及过程控制等诸多领域。在Internet 技术飞速发展的今天,基于Web瘦客户机的B/S构架已成为监控系统信息发布的重要方式。当前主流通用监控系统软件均支持流程图画面WEB化发布功能,其中以ActiveX控件技术、Flash技术、Java技术为主。三项技术的本质比较类似,都是在客户端浏览器中,通过下载、安装或运行控件/插件的方式,来实现图形的再现以及静态、动态效果。其技术优点在于控件/插件以二进制方式在客户端浏览器中运行,效率较高,但缺点很明显,一是数据不开放,尤其是图形数据,基本无法重用;二是下载、安装由于浏览器的安全性,常常会出现兼容性的问题。
可缩放矢量图形(SVG)是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式,它由万维网联盟制定,是一个开放标准。它的出现为监控系统软件流程图WEB化实现提供了新的思路。
SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。其格式优点有:
①基于可扩展标记语言(外语缩写:XML)。SVG是完全基于可扩展标记语言,并能和由W3C开发的DOM1,DOM2,CSS,XML,XPointer,XSLT,XSL,SMIL,HTML,XHTML等各项技术相融会的新一代的网络图像格式,继承了XML的跨平台性和可扩展性,从而在图形可重用性上迈出了一大步。
②采用文本来描述对象。SVG包括3种类型的对象:矢量图形(包括直线、曲线在内的图形边)、点阵图像和文本。各种图像对象能够组合、变换,并且修改其样式,也能够定义成预处理对象。
③具有交互性和动态性。SVG是基于XML的,它提供无可匹敌的动态交互性。你可以在SVG文件中嵌入动画元素(如运动路径、渐现或渐隐效果、生长的物体、收缩、快速旋转、改变颜色等),或通过脚本定义来达到高亮显示、声音、动画等效果。
④完全支持DOM。由于SVG完全支持DOM,因而SVG文档可以通过一致的接口规范与外界的程序打交道。SVG以及SVG中的物件元素完全可以通过脚本语言接受外部事件的驱动,例如鼠标动作,实现自身或对其他物件、图像的控制等。
SVG是一个XML文件,用于XML编程的两种模型DOM和SAX也适用于它。因为SVG是被设计用于互联网,所以通过Javascript和DOM访问它就是最重要的应用模式。通过Javascript和DOM可以动态地修改HTML,同样也可以在浏览器中动态地创建、修改和删除图片。
以下面SVG文件为例。SVG文件必须使用.svg后缀来保存:
各行含义描述:
行1:标准XML头,标识XML版本,每个XML文件(SVG文件属于XML)都必须有此XML头。
行2,3:根标签,每个XML文件只能有一个根标签。
行4:绘制一个文本,属性x,属性y表示文本的左上角坐标,font-family表示字体,font-size表示字体大小,fill表示文本显示颜色。
行5:绘制一个矩形,属性x,属性y表示矩形框的左上角坐标,width表示矩形的显示宽度,height表示高度,fill表示矩形框填充色,stroke表示矩形框边框色,stroke-width表示矩形框边框宽度。
行6:关闭标签的作用是关闭SVG元素和文档本身。
WEB化监控系统就是通过互联网技术,在浏览器上实现被控对象的监视与控制。其实现方法:将流程图Web文件,通过IIS平台发布到Intranet/Internet,WEB服务器实现与后台数据采集系统的双向数据交换,WEB客户端(浏览器)实时向WEB服务器请求数据,在WEB客户端(浏览器)上实现监控过程。
监控系统软件通常都有一个强大流程图制作工具,用来完成流程图画面的制作。流程图画面包括静态、动态图形信息。静态信息包括图形位置、颜色、风格等;基本图形对象包括直线、矩形、圆角矩形、椭圆、多边形、折线、曲线、扇形、弧、弦、文本、时间、按钮、开关以及导入资源等;动态信息则要包括各静态图形的动态变化详尽信息,包括显示/隐藏、前/背景色、渐变换色、水平移动、垂直移动、比例填充、缩放、旋转以及闪烁等。诸多而又复杂的图形信息想在WEB上发布难度很大。
SVG支持矩形、圆形、拆线等基本图元绘制;通过path可以绘制出丰富的曲线效果;通过matrix几何矩阵实现对图元的移动、缩放、旋转控制;通过style等属性实现对图元的颜色、字体等的控制。这样可以在基于SVG技术的流程图Web文件中构建与监控系统软件流程图中元素相对应的标签节点,以保存监控系统软件流程图中与元素相关的静态和动态属性,结合JavaScript脚本,在WEB客户端(浏览器)上实现WEB流程图静态和动态展示。
如表1为画面基本图元与SVG标签节点的转换关系:
如表2为画面图元动态属性与SVG属性节点的转换关系:
在自主开发的监控系统软件中,可开发流程图到WEB页面导出指令和流程图批量转换工具,来实现监控流程图的快速转换发布。对SVG矢量画面图像格式的概念、特性及其与JavaScript相结合实现的流程图监控的WEB技术进行详细剖析研究,开发人员可以基于此方案完成实时监控系统的“一键式”发布,为同类技术的研究及开发提供了一种新的思路和方法。
参考文献:
[1]钟萍.基于SVG技术人物动画课件生成系统的设计与应用[D].南昌大学,2010年.
[2]杨清林.SVG在变电站系统自动化中的应用研究[D].山东大学,2010年.
[3]黄凯伟.SVG开发实践[M].电子工业出版社.
[4]陈晖,孟凡顺,郭树祥.实时数据Web发布技术研究[J].中国科技信息,2010(02).
作者简介:万诗新(1963-),男,湖北武汉人,硕士,高级工程师, 硕士研究生导师,国家国防科技工业局特聘技术专家,现任国核自仪系统工程有限公司研发中心主任,长期从事工业自动化产品研发及管理工作;张雪松(1973-),男,山西神池人,本科,中煤集团平朔集团公司动力中心高级工程师,主要研究方向:变电站综合自动化。
随便看

 

科学优质学术资源、百科知识分享平台,免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。

 

Copyright © 2004-2023 puapp.net All Rights Reserved
更新时间:2024/12/22 17:55:15