SIS 系统中SVG 图形转换方案的设计与实现

1、SIS 系统中SVG 图形转换方案的设计与实现    摘 要: 结合发电厂SIS 系统中组态发布平台模式的可行性,设计了一套完整的SVG 图形格式转换方案,并以EDPF-NT+分布式控制系统的图形文件为研究对象,采用遍历解析的方法,对图形转换这一技术难题做了详细阐述。该方法有深远的理论意义,并且有较好的工程使用价值。关键词：SIS；SVG；解析；图形转换1 前言近年来火力发电厂厂级监控信息系统（SIS）在国内电力行业取得了快速的发展，它一方面提供从分布式控制系统(DCS)取得的实时数据及其处理后的信息，为生产过程的实时监控和管理服务；另一方面通过计算和分

2、析，提取出生产过程综合信息作为管理和操作的依据和指导，成为发电厂和发电集团各级领导和管理人员开展各项管理的有效工具。目前,B/S模式的SIS 已经被广泛的应用到国内很多的火电发电厂,实现将所有与SIS 系统连接的下层控制系统的画面在本系统中进行统一发布是SIS 系统最基础和最重要的功能。SVG(Scalable Vector Graphics)是W3C 组织为适应Internet 应用飞速发展的需要而制定的新一代基于XML 面向网络应用的二维矢量图形图像标准格式。使用SVG 可以在网页上显示出各种各样的高质量的矢量图形1，支持几何图形、动画、渐变色、滤镜效果等多种功能，同时可以继承XML 的所

3、有特性。最关键的是完全用普通文本来描述的，是一种专门为网络而设计的基于文本的图像格式，能够很好实现跨平台网络传输，非常适用于远程可视化监控的Web 图形界面的设计和实现。目前,北京国电智深控制技术有限公司的EDPF-NT+分布式控制系统被广泛应用于国内的火电发电厂,本文将以其图形文件GOX为研究对象,以SVG图形文件为转换目标,设计一套完整的格式转换方案2,并针对解析过程中的图形转换做详细的论述。2 GOX-SVG Web 页面转换方案设计GOX文件是对EDPF-NT+主图描述的文本型文件,满足XML语法构成,同时拥有一套自己的图形描述语言,虽然SVG 文件也是满足XML 语法的文本文件,但是

4、在图形描述上两者有着很大的差异,鉴于二者在语法结构的相似性,可以采取如下方案来实现由GOX 文件向SVG文件的转换,并最终满足Web 发布。转换流程如下图所示:图1 转换流程Figure1. Desitn of transfer- 2 -2.1 GOX 文件的导入DOM(Document Object Mode)和SAX(Simple API for XML)是两种解析XML 的方案,采用何种解析方案解析XML 与被解析对象的大小和需执行的操作有关3。EDPF-NT+分布式控制系统的GOX图形文件属于XML体系结构,是一个相对较小的文本文件格式,一般为几百K;另外,需要通过遍历等多种方法不断的

5、对GOX 文件执行增加、修改、删除等操作,实现向SVG 图形文件转换,因此可以通过DOM 方案把GOX 文档一次性加载到内存中,生成一棵DOM 树,然后调用适当的DOM 方法来满足对GOX 文件的操作要求。2.2 GOX 文件的解析TinyXml 是一个开源的基于DOM 模型的XML 解析库, 简单易用且小巧玲珑,非常适用于GOX 这样操作量较小的文件。通过解析GOX 文件,在内存中生成一棵DOM 树4,这个文件的根标签对应于树中的rootElement,也就是GOX 文件的根节点,通过访问节点的childNode变量,能够访问到该节点以下的所有子节点,称为node。2.3 SVG 文件的生成

6、在经过对GOX 图形文件的导入和解析以后,再通过遍历对GOX 文件中的静态图形,动态图形,脚本语言等作各种相应的处理,进而转换为SVG 规范5下的对应图形和脚本语言。同时会在内存中生成另外的一棵SVG 图形文件DOM 树,最后通过TinyXML 提供的文件生成方法,将其以文件形式输出到磁盘,扩展名为svg。2.4 SVG Web 页的显示在服务器端SVG 图形文件用ASP 通过XML DOM 生成对应的XML 文件, 并实时从分布式控制系统的数据库中读取数据来改变XML 文件中对应的元素的值。在客户端这个XML文件到达后,立刻被相应的SVG 解析器所解析,并通过SVG DOM 和XML DOM

7、 的相互作用,把实时数据填到相应的SVG 元素中6,来实现监控画面的实时更新。3 转换中核心问题的解决在GOX 文件的解析过程中,图形转换是一项最基本,最重要的过程。整个的转换过程可以分为基本图元转换,图符转换,动态图形转换三个步骤。通过转换,就会生成与GOX 图形”相貌”一样的SVG 图形文件了。图2 转换步骤Figure2. The steps of transfer- 3 -3.1 基本图元的转换在GOX 文件中,用许多图形来表示实际中的设备,如再热器、管道等,这些图形都是由一些基本的直线,椭圆,矩形等基本图元组成的。为了能够还原这些图形为SVG 格式,需要对这些基本图元做相应的解析,分

8、析出每一种基本图元的组成规律,提取出必要的图元参数,从而应用到SVG 中的基本图元中。其中重要的参数的对应关系如下表:表1 Gox 和SVG 对照表Table1. Contranst of Gox and SVGgox Parameterof goxsvg Parameterof svgLINE N Line NRECTANGLE 2 Rect 3ELLIPSE 2 Ellipse 3ARC 4 Path 9PIE 4 Path 10POLYGON N Polygon NTEXT 2 text 2比如在GOX 文件中标识一个椭圆扇形,至少需要4 个点来确定,分别为圆心、外接矩形的一个顶点、扇形

9、弧上的起点、扇形弧上的终点。而在SVG 中是通过path 这个关键字来绘制的,需要10 个参数才能描述同样的椭圆扇形,分别为移动命令M、起始点坐标、椭圆弧命令A、长半轴长度、短半轴长度、此图所在椭圆的X 轴与水平方向的夹角、绘制的方向、椭圆弧角度的大小,终点坐标,关闭路径关键字Z。3.2 图符的转换在GOX 文件中,有一些常用设备的符号会被单独保存下来,如风机、泵、阀门、变压器、发电机等,叫做图符,应用时,只需选中了这个图符,就可以在鼠标单击后拉拽形成的矩形区域中显示了。由于被保存的原始图符也是由基本图形组合而成的,并且它们的坐标也是保持了自己的原始虚拟坐标,因此就无法直接判断新图符在新坐标系

10、中的实际坐标,为了能够正确的转换为SVG 格式,必须经过平移和缩放处理,最后在通过坐标变换7才能”复原”图符 。(1) 通过遍历GOX 文件的DOM 树,找到关键字为”SHAPE”的图符节点,在对原始图符内各组成元素做一次内部遍历来求取图符的外裹矩形坐标,由于此时所得到的是最初图符被制作时的虚拟坐标,因此在转换为组成元素的实际坐标时,这个值是必须被参考的。(2) 根据图形学中坐标变换的原理,在图符转换的过程中,需要计算求得原始图符外裹矩形与新图符在纵横轴向上的比例dSx 和dSy,以及原始图符和新图符在新坐标系统下的的偏移量的多少,这两个偏移量分别为原图符各个组成图元的最小左上角值dDx,dD

11、y 和dMx,dMy。(3) 利用前面通过遍历得到数值,实现图符的缩放和平移,来定位新图符在原坐标系中的虚拟坐标。pointi.x = (long)( (double)(pointi.x)-dMx)*dSx+dDx);pointi.y = (long)( (double)(pointi.y)-dMy)*dSy+dDy);(4) 因为GOX 文件采用的是16000*16000 的虚拟坐标方式存储,因此最后需要做一次坐- 4 -标变换,将其转换为新坐标系下实际的像素值,根据应用场合的不同这个值有可能是1024*768 或者其它值。通过pointi.x = pointi.x*1024 /16000;

12、pointi.y = pointi.y*768/16000 的处理,真正的图符便在SVG 中正确显示了 。如果一个阀门被定义为图符,那么经过上述四步的处理,就会转换为对应的SVG 图形了。<?xml version="1.0" encoding="utf-8" standalone="no" ?><svg xmlns xmlns:xlink="width="100%" height="100%" id="" version="1.1&qu

13、ot;><g><rect x="0" y="0" width="1024" height="768" fill="#919191" /><polygon points="201,274 201,283 217,274 217,283 " fill="#004040" stroke="#004040"stroke-width="1" /><polyline points=

14、"209,270 209,280 " fill="#004040" stroke="#004040" stroke-width="1" /><path d="M 213,268 A 3,2,0,0,0,213,268" fill="#004040" stroke="#004040"stroke-width="1" /><polyline points="206,266 206,260 209,267 &

15、quot; fill="#004040" stroke="#004040"stroke-width="1" /><polyline points="212,266 212,260 209,267 " fill="#004040" stroke="#004040"stroke-width="1" /></g></svg>3.3 动态图形的转换在GOX 文件中有三类特殊的图元,分别为TREND、BAR、PNT,代表实际

16、中的趋势图、棒图、点图,实时的显示了现场重要参数的变化情况。当遍历GOX 中的这三个图元,它们相继会被解析为SVG 中用来定义趋势图和棒图的rect 标识及ini 属性,定义点图的text 和tspan标识及tag 属性。这样当SIS 系统从底层的分布式控制系统中采集到实时数据的时候,这三个动态点图形就会呈现动态变换,绿色棒图时高时低,趋势图形上下实时浮动、点图会实时显示对应测点的数值变换。3.4 结果展示下面是经过转换后的SVG 格式图形,在EDPF-NT+分布式控制系统中,这些图形符号,用来标识电厂中常用的设备和重要参数的变换。图3 转换结果Figure3. Parts of transf

17、er- 5 -4 结束语本文围绕SVG图形标准,深入探讨了SVG作为下一代网络图形的一些优势,基于SVG图形格式在SIS 系统B/S 发布方式的可行性,针对当前被广泛应用于火电发电厂的EDPF-NT+        分布式控制系统,提出了一套有效的SVG 图形转换方案,最后通过逐一遍历解析的方式解决了转换过程中的图形转换这一技术难题。目前,SVG图形已经广泛应用于SIS项目中,此转换成果也已经在实际中得到了验证,满足了工程上的需要,节省了大量的工程实施时间，降低了企业成本。参考文献1 袁家政.可伸缩矢量图形(SVG

18、)的数据表示研究(Research on Data Representation of Scalable VectorGraphics).北京交通大学计算机系,2008.2 郭创新,齐旭,等.基于SVG 的电力调度图形支撑平台设计与实现(SVG-based Graphic System for PowerDispatching).电力系统及其自动化学报，第19 卷第2 期，2007 年4 月.3 陈思敏.XML 文档对象模型(XML DOM)研究与应用.苏州大学学报(自然科学版)， 2001,(02).4 王震江.XML 的DOM 编程.电脑编程技巧与维护，2006 年，10 期.5 Md.

19、Sumon Shahriar,Jixue Liu Data,Web Engineering Lab.Transition of Keys in XML DataTransformation.IEEE,2008,175-180.6 Musbah Shahop Sagar .An SVG Browser for XML Languages . Department of Computing, Oxford BrookesUniversity Oxford, OXON, UK.IEEE.2003.7 杨钦，徐永安，翟红英.计算机图形学.清华大学出版社， 2005，第4 章.The design and realization of the SVG graphictransfer plan in SIS system.SONG Ren-jie1,ZHANG Xiao-gang1,JIANG He-qing21.College of Information engineering,Northeast DianLi University , Ji lin（132012）2.Beijing Huadian Tianren Electric P