1

SVG in Data Acquisition and Control Systems

Tao JiangBoston Scientific

2

Jet Engine Test Cells and Data Acquisition System

• Most software are custom made just like a web site.• Highly configurable on hardware configuration, control

logic, calculating engine test data and user interface. • Need to be field-programmable during system

installation.

3

New Data Acquisition and Control System

• Browser based interface• Remotely monitoring and controlling Capability• Live real-time test data updating at least 10

frames/second• Easily Configured

4

Architecture Overview

History

Oracle Database

Device Driver Layer

Data Processing and Control Layer

Fanuc PLCDriver

External Controller

Driver

MPI Driver for Vibration

Data

PSI Driver for Pressure

Data

DTS Driver for Temperature

Data

Test Data Calculations Limits Test Control

Logic Calibration Data and Event Logging

Continuous Data Logging

Transient Data Logging

Web Service Layer

Client Layer

Web Service for Engine Test and

Calibration

Web Service for Plot Analysis

Web Service for Test Report

Real time test data Streamer

Data Retrieved

Excel Reporting System

UNIX domain socket (aka. Named Pipe)

HTTP/HTTPS

.NET Application(DVR)

Java Applet/Applicationfor standard displays

User Configurable Displays in SVG

Multi-chanel DVR records test process

Video Playback

TV Monitor

5

Presentation Layer• Excel reporting system: is a test report design

and generation system built on the top of Microsoft Excel.

• .NET application for DVR playback: is used to playback test data in-sync with multi-channel video recording on the engine test process.

• User configurable displays in SVG: are displays specially ordered by customer and they can be changed in the field or even during the engine test in progress.

6

SVG based displays using Adobe SVG Viewer

Browser Based Web Client

Ado

be S

VG V

iew

er SVG based Displays

Decoded binary stream

Updating SVG DOM

Response User Interaction

Make SOAPCall

SVG GUI Component

library.

Invisible Java Applet

JavaScript

Real time test data Streamer

Web Service for Engine Test and

Calibration

7

Custom GUI Components• Create reusable user interface component in SVG.• Define new SVG tag for reusable component.• There is no need to do JavaScript programming because GUI

component's behavior is controlled through its parameter's value. • All components are absolutely positioned and No need to do layout.

Resizing the page will resize each components proportionally.

<ui:momentarybutton enabled="1" height="70" icon="" id="ui:momentarybutton315" set_value="1“tooltiptext="Momentary Push Button" transform="matrix(1 0 0 1 472.52470204846236 -9)" value="0" visible="1“width="75" x="174" y="583" buttonStyle="3"><parameter name="IDGDisc_MB" value="0"/> <text_style font="Arial" fontstyle="bold" font-size="14"/><label_config>

<offlabel color="green" label="IDG\nDisconnect" text-color="black"/> <onlabel color="orange" label="IDG\nDisconnect" text-color="black"/>

</label_config> <interlock>lockexp</interlock> <waitforcondition>waitexp</waitforcondition>

</ui:momentarybutton>

8

Data BindingDisplay 1

Display 2

Global Data Objects

SOAP Command

SOAP Command

Streaming Data

Streaming Data

Loca

l Dat

aO

bjec

ts A

B

Data Processing

Loca

l Dat

aO

bjec

ts

C

D

EF

• Each GUI component has one or more data objects (parameters), representing the component data value, attributes, etc.

• The application framework takes care of issuing SOAP command and distributing streaming data to GUI components. The client side developer only needs to take care of assembling GUI component and parameter mapping.

9

GUI editor supporting custom GUI Components• Works similar to using

Microsoft Visio.• Select widget from the

library listed on left hand side. Click the tab to choose different group of library.

• Click on drawing board to put widget.

• Click on the widget to select it. A rectangle toolbox will surround it. Use tools to spin, resize, and move.

• Once widget is selected. It can be deleted as well.

10

Create Displays• Add background

image can make better looking displays.

• Add a half transparent rectangle to shade the background image in order to make the front widgets stand out.

• Widgets can be tilted or skewed to have special effect.

11

Customize Widget• Select the widget first.• Press Edit Widget

button on toolbar.• Item Properties dialog

(XML Editor) pops up.• Widget’s properties

are stored in a XML structure. It can be customized by setup node and attribute values accordingly.

• Navigate the tree structure of the selected item properties and choose attributes to configure.

12

System Performance on SVG Approach

• Pure browser based solution cannot achieve the desirable performance for Jet engine testing.

• Batik SVG Toolkit isn’t fast enough.• Finally, a simple special purpose SVG rendering

engine is created.• Most custom GUI components are implemented

by creating a custom UI delegate for a surrogate host in Java Swing component. SVG rendering engine is used to paint each state.

13

Conclusion• Turn a traditional data acquisition and

control system into an open platform and building a presentation framework based on SVG has been proven to be successful.

• Until now, Cenco's new data acquisition and control system has been installed and in production use in Germany, India, Saudi Arabia, Egypt, China and growing.