SVG技术实现动态图形输出的嵌入式Web服务

用SVG技术实现动态图形输出的嵌入式Web服务

来源：网络收集 作者： 时间：2007-06-06 点击： 632 摘 要 本文结合控制系统对嵌入式Web服务器的要求，分析了嵌入式Web服务器的基本原理、动态内容实现方法，并结合实例着重介绍了基于SVG技术实现动态图形输出的方法。
关键字 嵌入式系统 SVG Web CGI程序
1 引言
在传统的控制网络中引入嵌入式Internet（EmbeddedInternet）技术后，各种工业控制设备通过TCP/IP协议接入Intranet或Internet。因此，人们可以通过现有的网络设施，不受地域的限制，实现对控制网络中各个节点的设备进行实时监控[1]管理，监控对象包括温度、压力、流量、液位、转速等。这一技术目前已成为嵌入式系统应用的热点之一，具有广阔的应用前景，可应用在工业自动化、设备管理、智能建筑、智能公路、信息家电等领域。
如果将Web技术引入嵌入式Internet控制系统，每个被控设备都将是一个小Web服务器。通过这些Web服务器实现数据采集、信息反馈以及接受客户端Web浏览器的命令对现场设备进行控制。由于嵌入式系统需要Web服务器与Web浏览器进行交互并提供动态数据访问功能，特殊的应用中还需要提供动态的图形页面，而一般的HTML页面只能提供静态数据，因此嵌入式Web服务器中如何实现与客户端的交互并提供动态图形页面是软件系统设计中要解决的问题。
2 动态Web服务实现原理
2.1 Web服务器工作原理
Web服务器是基于HTTP协议（RFC2068）工作的，使用标准同步请求/响应的设计方法，与传统的客户机/服务器结构相同。当客户端浏览器向Web服务器提出请求时，需要发送一个HTTP请求报文；Web服务器接收到该请求并作处理后，使用HTTP报文返回相应的数据，这些数据可以是文本或图形；浏览器将收到HTTP响应报文，将对数据进行处理并显示在用户界面上。
2.2 动态Web服务的实现技术
由于嵌入式系统中需要与被控对象进行交互并获得实时信息，因此需要Web服务器提供与浏览器及其他应用程序进行交互的能力。
（1） CGI技术
Web服务器与Web浏览器及其他应用程序之间的交互，是通过调用CGI（Common GatewayInterface）程序[2]来实现的。CGI规定了Web服务器与浏览器及其他可执行程序的接口协议标准。当Web浏览器将请求信息（以POST或GET方法）发送给Web服务器时，Web服务器调用一个可执行的CGI程序，该程序根据用户请求的内容做出相应的处理，并将处理结果以Web服务器可识别的方式输出，Web服务器再将该结果回送给Web浏览器。
（2） 动态内容支持技术
为了简化CGI程序产生动态内容的处理过程，可以使用HTML中标记的概念，在开发时先构造一个HTML文件，在该文件中包含有准备解析的动态内容标记，如设计为<DATA x>，x是要插入到输出数据流中的动态内容的字符串名。如：
<p>
当前压力是：<DATA pressure>
<p>
在嵌入式Web服务器上添加一个接口，以便支持处理这个标记。该接口程序查找到关键字<DATA后，使用变量名（示例中为“pressure”）来检索实际内容，并替换该标记后输出。这种方法为动态Web服务的软件设计提供了很大的灵活性。
2.3 对动态图形内容的支持
当客户端的浏览器需要获得图形化的监控数据时，如监控对象随时间的变化曲线。由于受嵌入式系统资源和网络带宽的限制，Web服务器往往不能直接提供输出JPEG、GIF等格式的图形数据。这时，选择文本形式的VML或SVG格式文件作为Web服务器输出，则同样可以为用户提供高质量的矢量图形。
（1） VML
VML（Vector MarkupLanguage，矢量标记语言）[3]是一个基于XML标准的一种应用，它最初由Microsoft开发，并于1998年由W3C（WorldWide Web Consortium）正式公布，目前仅IE5.0以上版本能对其提供支持。
VML可支持高质量的矢量图形显示。在其规范中包含了大量的支持多种不同矢量图形特征的预定义图形元素，如：Shape、Path、Line、Polyline、Curve、Rect、Roundrect、Oval、Arc、Group等，其中有两个最基本的元素：Shape和Group，这两个元素定义了VML的全部结构。Shape描述一个矢量图形元素，而Group用来将这些图形结合起来，这样它们就可以作为一个整体进行处理。
由于VML使用简单的文本来表示图像，因此可用很少的字节来表示比较复杂的图像。此外，VML可以在图形中嵌入文本，并实现超级链接，还可通过脚本语言实现一定的动画功能。
（2） SVG
SVG（Scalable VectorGraphics，可缩放矢量图形）[4]是一种基于XML标准，用来描述二维矢量图形和矢量/点阵混合图形的标记语言。它是一种综合了VML的优点而推出的基于文本的矢量图形规范，由W3C和多家厂商（Adobe Systems 、AOL、AutoDesk等）于2001年正式发表，并得到众多厂商支持。
SVG规范定义了SVG的特征、语法和显示效果，包括模块化的XML命名空间（namespace）和SVG文档对象模型(DOM)，实现了图形、图像和文字的有机统一。SVG除了支持HTML中常用的标记外，还提供了大量针对图形、图像、动画的特定标记。在SVG中，允许矢量图像、点阵图像和文本三种图像对象存在。SVG定义了包括直线、圆形、椭圆形、矩形、多边形和折线在内的六种常用的基本矢量形状，在此基础上，利用坐标变换、路径、动画、滤镜等功能扩展，通过多层次组合矢量、点阵以及文本图，并配以各种属性，进行矢量绘图。用SVG创建的图形可以在不同平台和设备间进行缩放，而不会有质量损失。
SVG的XML语法使开发人员能够使用现有技术并利用现有的基于XML的基础结构和开发工具。可与现有的Web技术（如HTML、GIF、JPEG、PNG、SMIL、ASP、JSP 和JavaScript）集成，并可嵌入到现有基于浏览器的应用程序中，从而提供更加丰富的视觉效果。同时提供了丰富的消息触发及事件响应函数，实现与用户的交互。
与VML相比，SVG文件更小，下载浏览更加便捷，并能利用客户端跨平台的处理能力显示图形。既充分利用了客户机的资源，又减轻了服务器端的负担，可以更有效地利用网络带宽，是嵌入式Web服务器采用的理想图形格式文件。
3 动态图形输出实例
嵌入式Web服务器可以通过输出SVG格式图形文件，在浏览器上获取被控对象实时状态的变化曲线。借助于SVG中的line、path、polyline等矢量元素，并设置相关属性，进行矢量绘图。
3.1 SVG语法结构
（1）SVG文件结构
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>此标注相当于HTML中的title标注</title>
<desc>
SVG文件内容描述，类似文件功能注解，这部分内容不会出现在以后显示的画面中。
</desc>
这里是整个SVG文件的重心，向量图形、图像、文字、动画等内容都应包含置于此。
</svg>
在<svg>标注中，使用width和height属性设置图形的宽和高。
（2） SVG中常用的基本形状
SVG定义了六种基本形状，它们是圆（circle）、椭圆（ellipse）、矩形（rect）、线（line）、折线（polyline）和多边形（polygon），这些基本形状和路径（path）一道，可以组合成任意形状的图像。每个基本形状都带有指定其位置和大小的属性。它们的颜色和轮廓分别由fill、stroke、stroke-width属性确定。如以下标注显示一条从（0，150）到（400，150）宽度为2（像素）的蓝色直线：
<line x1="0" y1="150" x2="400" y2="150"
stroke-width="2" stroke="blue"/>
（3） 输出文本
除了形状以外，SVG图像还可以通过text标注输出文本信息。SVG提供给设计人员对文本的大量控制，可以获得很好的图形效果。如：
<text x="10" y="50" font-size="30">Welcome to the world of SVG!</text>
（4） 定义可重用部件
通常在SVG图像的构建中，各部分是可重用的，如显示坐标系统的网络线。这时可在文档的定义部分来预定义它们（作为<defs></defs>标注的一部分），并给它们指定以后可在图像主体中调用的标识。在图像主体部分通过用<use/>标注引用预定义项的元素将它们链接到文档。以下是绘出坐标系统并显示温度变化曲线的SVG文件定义及主体部分：
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth" markerWidth="3" markerHeight="10" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" fill="blue" stroke="black"/>
</marker>
<line id="x_Coordinate " x1="30" y1="180" x2="640" y2="180"
stroke-width="2" marker-end="url(#arrow)" stroke="blue" />
<line id="y_Coordinate" x1="30" y1="180" x2="30" y2="30"
stroke-width="2" marker-end="url(#arrow)" stroke="blue"/>
</defs>
<g id="origin_Coordinate ">
<use xlink:href="#x_Coordinate " />
<use xlink:href="#y_Coordinate " />
<text x="650" y="180" font-size="15"> 时间 </text>
<text x="5" y="20" font-size="15"> 温度 </text>
<polyline points="30,112 50,110 70,104 90,100 110,107 130,103
150,101 170,98 190,101 210,96 230,102 250,99
270,103 290,103"
fill="none" stroke="red" troke-width="2" />
</g>
（5）在HTML中嵌入SVG图像
在HTML页面中添加SVG图像，可通过< embed >标注实现：
<embed src="temperature.svg" name="svg" width="700" height="200" TYPE="image/svg+xml">
3.2 应用实例
在水质环境自动监控系统中，嵌入式Web服务器以CGI方式与客户端浏览器交互。通过浏览器设置监控参数，并从Web服务器上获取包含当前系统状态的SVG文件，运行结果见图1。SVG文件中描述监控对象状态的数据通过自定义的动态内容标注，由CGI程序写入。



4 结束语
在嵌入式Web服务器中提供动态图形输出，可以简化客户端的设计。实践证明，本文提出的采用SVG技术实现动态Web服务的方案是非常有效的，同时，该项技术也被成功地应用到基于嵌入式Web的机房环境监控系统中，并取得了较为理想的应用效果。
参考文献
[1]余成波，刘杰，陶红艳，基于Internet的设备远程监控技术的研究 [J].信息与控制，第31卷 第3期，2002 年6 月
[2]M.Tim Jones, TCP/IP Application Layer Protocols for Embedded Systems[M]. Massachusetts: Charles River Media, Inc, 2002.
[3] W3C，Scalable Vector Graphics (SVG) 1.1 Specification[EB/OL]. http://www.w3.org/TR/SVG11/, 2003-01-14.
[4] W3C，Vector Markup Language (VML)[EB/OL]. http://www.w3.org/TR/NOTE-VML/,1998-05-13.