View
382
Download
4
Category
Tags:
Preview:
DESCRIPTION
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.
Citation preview
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.
Recommended