A real life example of using SVG in data acquisition and control system domain. The system is currently being used by various airline and engine maintenance companies around the world. The major challenges involve: 1. GUI widget creation using SVG. 2. GUI editor supporting SVG component. 3. Fast SVG rendering with continuously data updating (>20HZ) (not just fast initial loading) 4. Real time enhancement on JFreeChart.

1. SVG in Data Acquisition and
Control Systems
Tao Jiang
Boston Scientific
1

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.
2

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
3

4. Architecture Overview
Client Layer
Excel Reporting Java Applet/Application User Configurable .NET Application
System for standard displays Displays in SVG (DVR)
TV Monitor
HTTP/HTTPS
Video Playback
Web Service Layer
Web Service for Data Retrieved
Web Service for Web Service for Real time test
Engine Test and
Test Report Plot Analysis data Streamer
Calibration
History
UNIX domain socket (aka. Named Pipe)
Multi-chanel DVR
records test process
Data Processing and Control Layer
Test Data Test Control Data and
Limits Calibration
Calculations Logic Event Logging Oracle
Database
Device Driver Layer
External MPI Driver for PSI Driver for DTS Driver for Continuous
Fanuc PLC
Controller Vibration Pressure Temperature Data Logging
Driver
Driver Data Data Data
Transient
Data Logging
4

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.
5

6. SVG based displays using Adobe
SVG Viewer
Browser Based Web Client
SVG GUI
Adobe SVG Viewer SVG based Displays Component
library.
Updating SVG Response
DOM User Interaction
JavaScript
Decoded binary Make SOAP
stream Call
Invisible Java Applet
Web Service for
Real time test
Engine Test and
data Streamer
Calibration
6

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="IDGnDisconnect" text-color="black"/>
<onlabel color="orange" label="IDGnDisconnect" text-color="black"/>
</label_config>
<interlock>lockexp</interlock>
<waitforcondition>waitexp</waitforcondition>
</ui:momentarybutton>
7

8. Data Binding
Display 1
Streaming Data
Local Data
A
Objects
C
B
SOAP Command
Global Data
Data Processing Objects
Display 2
SOAP Command
Local Data
D
Objects
F
E
Streaming Data
• 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.
8

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.
9

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.
10

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.
11

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.
12

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.
13