利用XML、XSLT以及微软的VML技术，可以实现组态软件流程图的Web化。在对主流的网络化技术进行比较的基础上，本文详细讲解了一套包括图形的导出、描述，图形的转换和重现的可行性技术的原理和实践。

在工业自动化控制系统中，随着生产信息化的不断发展，用户不再满足传统的本地生产监控功能应用。远程监视生产监控流程图等生产信息逐渐成为一个基本、必须需求。同时这一功能的实现，也是实现生产信息从过程控制系统上升到制造执行、管理系统的关键。采用基于网络技术（Internet模式）的解决方案是目前主流技术趋势。Internet是以TCP/IP协议为基础，以Web为核心的网络。由于简单易用的客户浏览器、客户端操作界面的一致性，克服了两层结构C/S模式客户端多种程序带来的不一致性；服务器端的开放和基于标准的连接方案大大加强了企业与外部的联系。数据库不是直接服务于每个客户机，而与Web服务器沟通，有利于实现对客户信息服务的动态性、实时性和交互性。总之，以Web技术为核心的Internet使管控一体化系统更接近客户，更接近应用，更有利于网络的进一步扩展，是当今信息系统发展趋势的主流。

纵观业内相关解决方案，在不约而同地采用网络相关技术来进行实现的同时，具体技术又各有不同。其中以ActiveX控件技术、Flash技术、Java技术为主。三项技术的本质比较类似，都是在客户端浏览器中，通过下载、安装或运行控件/插件的方式，来实现图形的再现以及静态、动态效果。其技术优点在于控件/插件以二进制方式在客户端浏览器中运行，效率较高，但缺点很明显，一是数据不开放，尤其是图形数据，基本无法重用；再是下载、安装由于浏览器的安全性，常常会出现不成功的问题。在产品开发过程中，探索出一种崭新的图形网络发布技术，较好地解决上述所有问题。

原理

首先了解几条技术概念：XML中文意思是“可扩展标记语言”。本文中，流程图信息导出存储将采用XML格式，这样首先是格式清晰，便于定义、编辑和扩展；其次是不同版本流程图导出的信息可以通过XML文件进行隔离、兼容。从而带来另一个好处，即不同版本流程图的组态互通性。XSLT中文意思是“可扩展样式语言转换”。本文中，流程图信息导出后的XML文档，尚不能被IE浏览器直接还原成可视的流程图，需要采用XSLT，将XML数据转换为其他形式（例如网页）。微软的IE自带了VML（Vector Markup Language）解析引擎，可以直接浏览、显示包含VML语言的页面。采用VML，最大的好处是客户端不用安装任何插件、控件；还利用AJAX技术实现网页中数据点的动态刷新。由于AJAX所包含的技术，全部是IE浏览器支持及W3C推荐的标准，不用借助任何第三方插件、控件，为客户端的部署带来极大好处，实现了真正意义上的Web化，并为后续的RIA应用开发奠定了基础。

流程图的Web化的核心思想，就是利用XSL/DLL，将流程图文件（XML）转换成Web文件（ASP），结合JavaScript文件，通过IIS平台发布到Intranet/Internet。针对HMI实时监控实现Web方式的“零”部署只读模式访问，主要包含流程图导出、转换、发布三个环节（图1、图2）。

流程图转换有静态、动态两种模式。静态转换意味着在网页发布前，网页已经存在，而动态转换意味着网页仅在用户通过IE访问时才动态生成。考虑到负荷，建议采用静态转换，即在网页发布前，先通过XSLT模版将XML转换为网页文件，供发布后访问。网页格式，推荐使用ASP而不是HTML。对于ASP3.0而言，纯静态页面的执行并不会造成效率的下降。另外ASP文件可以提供更加灵活、丰富的RIA应用。

流程图的发布比较简单，可以通过手动、自动方式对IIS进行配置，产生虚拟站点或虚拟目录即可。

对于网页中的动态数据，Web服务器端可以采用微软ASP扩展ActiveX Dll，实现与异构系统的数据采集。客户端IE则通过AJAX技术实时向服务器请求数据，从而实现客户端IE数据异步、局部的实时刷新。

在客户端IE中，网页的动态图形配合JavaScript脚本后台执行，实时请求得到的数据，进行相关运算。在条件满足时，对IE中图形相关动态属性进行修改，从而达到图形动态变化的效果；对于网页中的用户交互事件实现，可以利用JavaScript脚本监听用户鼠标、键盘事件，结合相关数据变化条件，进行交互事件。包括弹出式流程图，警告提示框等。

总体而言，流程图Web化流程可以分成组态期和运行期两个阶段。组态期：绘制并导出流程图相关信息为XML格式文件；利用XSL对XML文件进行一一解析并生成网页格式服务器端文件，同时完成Web服务器发布及部属。运行期：客户端访问Web服务器；Web服务器负责图形、数据的所有管理（图3）。

实践

首先是流程图文件的导出，可以通过组态软件直接导出，格式为XML。

导出流程图信息包含流程图内所有静态、动态图形信息。静态信息包括图形位置、颜色、风格等；基本图形对象包括直线、矩形、圆角矩形、椭圆、多边形、折线、曲线、扇形、弧、弦、文本、时间、按钮、开关以及导入资源等；动态信息则要包括各静态图形的动态变化详尽信息，包括显示/隐藏、前/背景色、渐变换色、水平移动、垂直移动、比例填充、缩放、旋转以及闪烁等。

下面为XML文件代码片断：

<ShapeObject>

<object ObjectType="INDEX_POLYLINE">

<ObjectName>polyline1</ObjectName>

<Position>69，58</Position>

<Size>124，97</Size>

<BackgroundColor>8388736</BackgroundColor>

<NodeList>(69，58)，(168，66)，(71，134)，(193，155)</NodeList>

</object>

</ShapeObject>

<ShapeObject></ShapeObject>内为具体图元对象描述。包含一个基本图形：折线。如果包含多个图形的描述，都放在这里。其余描述为流程图页面整体信息，包括页面尺寸、坐标、背景图等。针对<object></object>对象，依次包含图形对象的名称、尺寸、坐标、图层、边框色、背景色、渐变风格以及最重要的折点坐标集。总之，根据流程图上该图形的属性、特点，以及IE中重绘、重现的要求，将其属性值依次、充分描述出来。

其次对应XML文件，为将其转换为网页文件，采用XSLT文件进行转换。流程图转换涉及四部分内容：静态图形转换——即流程图绘制软件中，绘制的所有静态图形，包括其所有静态风格。这部分工作包括服务器端，在组态期实现；动态数据转换——即针对底层系统/设备进行数据采集，汇总至Web服务器层，通过Web服务器对数据的调度、管理，实时相应IE客户端的数据请求，反映到用户应用层面。这部分工作包括服务器端和客户端，在运行期实现；动态图形转换——即流程图绘制软件中，绘制的所有静态图形，其相应具备的动态变化效果重现。主要工作包括客户端（服务器端仅负责数据传输），在运行期实现；用户交互事件——即针对流程图在监控期间相应操作工所有可能的操作，在IE客户端模拟重现。主要工作包括客户端（服务器端仅负责数据传输），在运行期实现。

数据一览转换：数据一览导出信息存放于统一的XML文件中，通过转换至mdb数据库文件中，运行时，由ASP响应客户端请求，从mdb中读取信息，并通过AJAX实现数据实时刷新。趋势、报警转换：由于VML在IE中绘制动态图形的效率问题，针对趋势、报警这种复杂控件对象的转换，采用Active X控件实现。即IE自动下载、安装、运行Active X控件，控件与IIS通讯，并将结果进行绘制，同时提供用户界面操作。

XSLT版本是目前广泛使用的1.0版。采用微软的MSXML的XSLT扩展元素“msxsl:script”。因为在执行XSL转换时，需要使用XSLT以外的功能，例如处理日期和时间、访问外部文件、查询数据库以及处理负责节点运算等。仅仅使用XSLT1.0，很难甚至无法完成这些任务。这时就要借助XSLT的扩展机制。这里采用微软的MSXML解析器来进行实践，采用VBScript编写了处理函数。分别用于转换XML中的颜色值为VML使用的RGB值，转换节点坐标值，以及显示线条的风格（实线、虚线等）。

至此，完成了针对流程图导出XML文档的XSLT编写后，将进行解析执行、输出工作。这里使用msxsl.exe进行转换操作。msxsl.exe是微软提供的免费XSLT处理器，读者可以自行到微软网站下载该工具。转换时，在命令行下输入“Test.xml Test.xsl -o Test.html -xw –v”，执行成功后，会在同级目录下产生一个Test.html文件，使用IE打开，会看到转换结果（图4）。

使用记事本打开Test.html文件，会看到自动产生的HTML/VML代码，其中<!--[if gte vml 1]> <![endif]，用于判断浏览器是否支持VML。由IE浏览器在解析Test.html时在IE上直接绘制出来，代码具体含义可以参考VML相关帮助文档。

生成网页后，自动发布、部署的操作利用ASP技术创建Web站点即可。同时Web站点提供屏幕像素自适应功能，支持多语言，提供基于口令的用户安全机制。针对JavaScript提供脚本混淆功能，Server操作系统下提供SSL安全机制解决方案。

结语

本文介绍的组态软件流程图网络化技术，为同类技术的研究及开发提供了一种新的思路和方法。通过实践，我们已经实现静态图形的Web化，如果再结合脚本技术，可以做出更加强大的Web化应用和RIA应用。目前中控WebField ECS平台的WebSight软件已经基于这项技术，很好地实现了组态软件流程图等元素的“一键式”Web发布，提供安全、可靠的网络浏览、监视功能，并获得了很好的市场应用。