论文写作网

　　2.2 SVG文档的数据布局设计 
　　从本质上来说,SVG文档是XML文档,SVG文档具有XML文档的所有属性。按照SVG的文档布局类型,普通的SVG文件由文件版本、文件范例界说部门、元素界说部门和画图部门构成[8]。在一个巨大的SVG图形中可以利用图层元素对SVG举办布局和条理的分别。在SVG文档中,可以利用分组元素〈g〉来描写一个图层。图层作为一个容器工具,将各类相关的图元工具组合和打点起来,更好地表达了需要构建的图表的数据布局条理。针对监测系统中图表的结构特征,如图2所示,可以把SVG文档分别为以下几个条理:a)配景层,主要认真构建图表的配景和一些非凡结果,如曲线图的配景网格;b)坐标层,主要用于图表中一些坐标轴的显示,如X轴、Y轴及其对应坐标等;c)动态图元工具层,这里的根基图元是指用于动态显示信号数据的文字、棒图、曲线或指针等,同时这些图元工具将设计为可以通过JavaScript剧本进动作态节制的组件;d)文字描写层,用于显示图表中当前的一些特定属性(如当前动态曲线对应的名称)或相关的图元注释等;e)用户交互层,用于向利用者提供交互成果的SVG节制部门,这些交互成果包罗图表的放大与缩小、特定点的选取和显示等。通过层的Id属性可以会见和节制改变,从而可以在层中动态建设各类图形和图元工具。 
　　 
　　2.3 处事器端的SVG控件 
　　SVG的图形数据文档可以由处事器端的处事措施生成(如C#或Java等)。当客户端向处事器请求SVG文件时(将在embeded标签中SVG源指向处事器端的执行文件),可以由处事器端的措施按拍照关参数自动生成SVG文档再传给Web客户端。操作处事器端的处事措施自动生成SVG图形数据文件最大长处在于可以操作处事器端编程语言的强大成果实现很是巨大的SVG控件。 
　　基于SVG的图表组件可以分为两个逻辑层面:a)描写图表数据布局和动态行为的抽象数学模子;b)用于显示各个图元工具的SVG的数据文件,即图表的动态实现。为了可以或许越发有效地节制SVG文档数据布局和图元显示,可以将图表的数学抽象模子与SVG的实现部门举办疏散,使它们都可以独立地变革,从而可以快速地实现多样的图表形式。 
　　这里参照上述的疏散思想将整个SVG的节制模块设计为两个抽象类(C_Chart和C_Series)和两个实现类(C_SVGShapes和C_SVGElements)。个中:C_Chart和C_Series系列类用于节制各个图表的数学抽象模子;而C_SVGShapes和C_SVGElements类则用于实际的SVG数据文档部门。在实际图表的建设进程中只需要利用C_Chart和C_Series类向外部提供抽象接口,其内部则挪用了C_SVGShapes和C_SVGElements的成果输出实际的SVG数据文档。 
　　C_Chart类提供了建设图表组件的根基容器。C_Chart类主要有两个成果:a)通过C_Chart可以指定整个图表的巨细和图表配景的根基属性;b)打点图表中的各个动态元素工具,即维护动态图元的列表和显示的相对属性等。C_Chart的UML类图如图3所示。个中函数GetSVGDoc返回当前生成的SVG图形的数据文档,在Chart设置完成后通过此函数获取完成的SVG文档数据。函数CreateBaseSVGDoc用于建设SVG的根基文档(SVG的Head部门);SetBackgound用于配置图表的配景属性;SetGrid用于配置图表的网格(不利用则不配置);AddASeries、DeleteASeries、ClearSeries和IndexOf函数用于打点Chart中的动态图元工具。 
　　 
　　C_Series系列类包罗C_SeriesBase类(C_SeriesBase是图元工具的抽象类)和其担任类C_SeriesLine及C_SeriesBar(未来还可以扩展其他新的动态图元工具)。这些类和接口提供了建设动态图元工具,即曲线图中的曲线可能棒图中的矩形。C_SVGShape则提供了根基的形状画图接口,通过挪用这些接口,可以按照输入的参数生成绘制图形的SVG文档数据,如直线、折线、矩形和圆等。C_SVGElements用于其他SVG元素的建设,如层工具、文字元素等。 
　　3 及时监测客户端的实现 
　　本课题针对监测系统的成果需求,设计和实现了一套基于SVG和Ajax(用于数据的获取)技能的Web动态图表组件。操作SVG和Ajax技能实现Web下的动态图表根基道理如图4所示。首先操作 SVG 来绘制根基的图表形状,然后通过利用 Ajax数据层向Web处事器请求最新的及时数据,当吸收到及时数据时,再通过JavaScript 剧本挪用DOM接口动态修改SVG图形,这样就实现了Web下的动态图表。 
　　 
　　在监测系统中常常需要利用的图表是振动特征值的棒图显示、振动的波形数据的曲线显示以及信号数据的趋势曲线图显示。下面重点先容这几种范例的图表的设计与实现。在设计这些图表组件之前最重要的任务是需要计较图形的比例因子,就是说在画图时每单元的数据值在对应图形中的几多像素。比例因子可以用图表的中坐标轴的尺寸除以数据的最大值来得到。 
　　1)特征值棒图组件 
　　动态棒图的动态图元工具是矩形(SVG的标签是RECT)。动态生成棒图的根基模子是:通过给定的图表的宽度和矩形工具的个数(参数)可以计较出每个矩形和隔断所占的宽度,从而确定每个矩形的起始点和宽度。矩形的高度由实际数据值(乘以比例因子)节制,而矩形的颜色可以从颜色数组中依次选取。在建设每个矩形的同时,在矩形的下方建设其文字描写工具并插入文字层。棒图组件的实际运行结果如图5所示。 
　　 
　　2)信号趋势曲线图的设计与实现 
　　曲线图的动态图元工具是折线(SVG的标签是POLYLINE)。动态生成曲线图的根基模子是相对简朴,即按拍照关参数设定POLYLINE的属性,然后按照实际数据值(乘以比例因子)修改其POINTS属性。在曲线图的图元工具中还需要有一个数据点行列,一方面这个数据行列生存了曲线图中所有数据点的坐标值;另一方面通过这个数据点行列可以动态地添加、修改和删除数据点,从而实现动态曲线的绘制。趋势曲线图的设计运行结果如图6所示(注释暗示测点1的均方根值)。 
　　振动波形曲线图的设计和实现与上述的趋势曲线图是完全一样的,惟一的差异在于振动波形曲线图不是对单个数据点进动作态操纵,而是对曲线图中所有的数据点进动作态操纵。 
　　 
　　4 竣事语 
　　针对现有B/S监测系统客户端存在的及时性问题,本文研究了一种基于SVG的Web长途及时监测系统客户端系统。该系统中设计了一套基于SVG和 Ajax 技能基于Web的动态图表组件,并在此基本上实现了基于Web的长途及时监测客户端。系统操作SVG 来绘制根基的图表形状,通过利用 Ajax数据层向Web处事器请求最新的及时数据,当吸收到及时数据后再通过JavaScript 剧本挪用DOM接口动态修改SVG图形,SVG与Ajax的团结带来了一种全新的措施开拓模式, 提供了一种与桌面应用措施沟通的富厚的互联网体验。新的长途及时监测客户端将很洪流平上改变现有客户端系统的多种漏洞,具有较好的应用前景。 
　　参考文献: 
　　[1]周丹晨,殷国富,龙红能,等. 基于Web的制造信息集成打点系统[J].计较机集成制造系统,2003, 9(2):962-100. 
　　[2] 饶志敏,余阳,李长森. 基于Web Portal的事情流客户端的研究与设计[J].计较机应用该研究,2007,24(4):212-214. 
　　[3] 陈忠,郑时雄. 基于Web技能的多级智能监测及诊断体系布局[J],华南理工大学学报,2005,33(8):11-15. 
　　[4] 罗培,黄辉先,马茜. JNI和ActiveX技能在组态监控系统网络化迁移中的应用[J]. 计较机应用研究,2007,24(12):266-268. 
　　[5] 童雪娟,李霖,尹作为. 基于SVG/Java Applet的舆图Web宣布技能[J]. 计较机工程,2005,31(11):62-64. 
　　[6] 刘啸,毕永年.基于XML的SVG应用指南[M]. 北京:科海团体公司, 2001. 
　　[7] 柯自聪. Ajax 开拓精要—观念、案例与框架[M].北京:电子家产出书社,2006. 
　　[8] 张晓峰. SVG在网络化测试曲线及时监控系统中的应用研究[D]. 青岛:中国海洋大学,2006. 　　跟着计较机技能和网络技能的不绝成长,大型装备的状态监测技能也产生了深远的变革,慢慢向及时、长途、漫衍式和网络化的偏向成长。现有的长途及时在线监测系统普遍回收C/S(客户端/处事器)和B/S(欣赏器/处事器)模式。个中B/S模式布局提供了系统更大的机动性与开放性,便于系统的扩展、维护以及打点。大大提高客户端机能是干系到整个监测系统运行结果的重要因素,因此受到了极大的存眷[1~3]。 
　　但 Web通信回收的是HTTP协议,该协议的事情模式是请求/响应模式,且无毗连,所以Web处事器无法及时地将处事器中的数据主动传送给Web欣赏器。针对该问题,现有的办理方案主要回收以下两种主要技能:a)通过开拓 ActiveX控件扩展欣赏器前端成果。该方法操作ActiveX与应用处事器通信,及时获取最新的数据,然后在客户端显示出来。b)通过开拓Applet来扩展欣赏器前端成果,从而实现基于Web的长途及时数据监测。该方法与ActiveX雷同,只是在实现技能上回收的是Java技能[4,5]。Web长途及时监测除了思量数据传送的及时性外,还需要思量及时数据在欣赏器的显示问题,出格是各类图表如线图、饼图、直方图等的显示,因为这些图表在生成和显示时会耗损欣赏器大量的资源,很容易造成显示上的不连贯现象及延滞现象。 
　　本课题在一些相关研究成就的基本上,针对监测系统的成果需求,设计和实现了一套基于SVG[6]和Ajax(asynchronous JavaScript and XML)[7](用于数据的获取)技能的Web动态图表组件,用于构建基于Web的长途及时监测客户端。 
　　1 SVG技能 
　　SVG是一种基于XML文档的开放的矢量图形描写语言,用于描写二维矢量图形和矢量、点阵殽杂图形的符号语言。与位图差异,SVG的矢量图形不是用大量的单个像素成立图像,而主要用数学公式对物体(如圆、线等)行为描写,从而记录图形信息,并按照图形信息举办绘制。SVG的要害是如何通过计较机指令和数学公式来描写物体。W3C组织界说了SVG的相关类型,个中包罗SVG的特征、语法和显示结果,包罗模块化的XML定名空间(nameSpace)和SVG文档工具模子(document object model, DOM)。 
　　SVG元素是指示如何绘制图像的一些指令,阅读器(viewer)表明这些指令,把SVG 图像在指定设备上显示出来,同时SVG可以利用样式表CSS、Script 剧本和DOM举办节制。SVG作为新一代的图形处理惩罚技能主要有以下几方面的优势:a)文件尺寸小,利便Web页面下载;b)SVG图形名目可以用来动态生成图形,可以SVG动态生成具有交互成果的数据图形,嵌入网页中,并显示给终端用户;c)可以用剧本节制与客户的交互事件;d)SVG图形名目可以利便地成立文字索引,从而实现基于内容的图像搜索;e)基于文本的名目,可以轻松地与其他Web技能集成。 
　　SVG是图形、图像和文字的整合体。按照成果差异,SVG的主要工具可以分为根基要素和页面描写成果两大类。SVG除了支持HTML中常用的标志,如文本、图像、链接、交互性、CSS的利用、剧本外,还提供了大量针对图形、图像、动画的特定标志。如图1所示,SVG 界说了六种根基形状,同时SVG界说了直线、斜线、圆弧和贝塞曲线等画图路径指令,通过这六种根基形状和差异的路径举办组合,则可以形成任何图像。 
　　 
　　2 基于SVG的Web及时监测客户端要害技能 
　　2.1 SVG数据的嵌入与节制 
　　固然SVG 文档自己就可以被所支持的Web欣赏器(需要安装SVG viewer插件)直接显示,但凡是应用系统需要将其嵌入在Web页面中利用。同时将SVG嵌入在Web页面中也使得SVG的显示越发容易,有些欣赏器由于用户的配置大概会拒绝打开一个SVG文件,但显示作为 Web 页面一部门的 SVG 图像将不会有问题。凡是利用HTML的〈EMBED〉标签将SVG图形数据文件嵌入在Web页面中。 
　　基于SVG的动态图表结果(雷同动画结果)是通过Java Script剧本的节制来实现的。JavaScript通过SVG的DOM接口与SVG文档接洽在一起,节制SVG的元素及属性,可以动态修改SVG元素的属性,从而生成特定的动态结果。SVG尺度答允将JavaScript剧本代码以两种方法来实现:a)利用Script 元素将JavaScript 剧本内嵌在SVG 文件中;b)利用Script的xlink:href 属性从SVG文件之外毗连JavaScript剧本文件。 
　　在JavaScript下可以通过DOM界说的接口遍历会见在SVG文档中的XML树中的各个节点。通过JavaScript剧本可以对找到的节点属性从头赋值,甚至还可以在当前文档中删除节点或添加新建设的节点。JavaScript在吸收随处事器端的及时数据后,利用 DOM 举办理会返回的XML文本,获取元素的ID、属性名称、属性值。按照这些信息来动态地改变SVG中对应元素的显示属性,最后使 SVG 中的元素回响出数据的变革环境,实现及时监测的结果。