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

Transcription

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

2 2

3 3

4 4

5 5

6 Inside Data Acquisition and Control Systems The system is used by engine test operators and engine performance engineer. No special computer knowledge is required. User interface and system control logic are greatly affected by the hardware selection and test cell design itself. Different customer might have quite different look-n- feel for their systems even though they are designed to test the same type of engine. Need to be field-programmable during system installation even during engine run. 6

7 New Data Acquisition and Control System In late 2003, Cenco started a project to build its next generation engine test system. The first goal is to replace aging X window based UI with browser based user interface to stand out from competition. Remotely monitoring and controlling capability Live real-time test data updating at least 10 frames/second Improve Test Data Reporting Capability Easy Configuration 7

8 The New Engine Control Display 8

9 Implementation Strategy Make best use of existing system (over 1M LOC) and replace those matter the most to customers Creating a web service layer to turn traditional data acquisition and control system into an open platform Give user interface developer freedom to plug-in any presentation unit using the latest technologies. Create a component-based application framework for producing massive amount of user configurable displays at very low cost. On average, over 20 custom displays for any single engine type. The development and testing effort would be enormous if coding directly in Java or C#. SVG is used to build UI components and glue them together. 9

10 Why SVG? SVG is a royalty-free vendor-neutral neutral open standard. Excellent graphical results: each of UI component even the whole user interface could be developed using professional grade tool, such as: Adobe Illustrator. No need to compile and build applications. SVG player can directly render SVG files to have rich graphical results. Resolution Independent: SVG content can be viewed on monitors with different resolutions or enlarged/shrunk without losing quality. No need for UI layout manager: all components are absolutely positioned and proportionally resized. Minimal coding effort: coding effort only involves in wiring events and data to SVG elements but it can be simpler. 10

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

12 Client 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 customers and they can be changed in the field or even during the engine test in progress. 12

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

14 Different Approaches in creating SVG GUI component library UI components can be defined as symbol elements and put together inside a component library. (Jay Nick: SVG use element can refer to external symbol element as template and this is how SVG component gets reused. However, event handler cannot be encapsulated into symbol. JavaScript library. Limited functionality at the time. (Kevin( Lindsey JavaScript was hard to debug. Kevin Lindsey: Define new SVG tag (SVG 1.2) for reusable component. 14

15 Risks: Risks Analysis for SVG 1.2 Approach SVG 1.2 specification was still at draft stage. ASV6 was only a pre-release. release. No SVG authoring tool for SVG 1.2. Rewards: Go SVG 1.2 costs only a fraction of other alternative approaches. Bottom Lines: ASV6 has by far the greatest functionalities and the best graphic quality at that time. RENESIS player promised to support full SVG 1.2 Develop a SVG viewer with limited SVG 1.2 support. 15

16 Custom UI Components Create custom UI components in SVG. Define new SVG tags for UI components. There is no need to do JavaScript programming because each UI component's behavior is controlled through its parameter's value. <ui:momentarybutton enabled="1" height="70" icon="" id="ui:momentarybutton315" tooltiptext="momentary Push Button" transform="matrix( )" value="0" visible="1 ="1 width="75" x="174" y="583" buttonstyle="3"> <parameter name="idgdisc_mb IDGDisc_MB" " value="0"/> "/> <text_style font="arial" fontstyle="bold" font-size="14"/> <label_config> <offlabel color="green" label="idg\ndisconnect ndisconnect" " text-color="black"/> <onlabel color="orange" label="idg\ndisconnect ndisconnect" " text-color="black"/> </label_config label_config> <interlock>lockexp</interlock> <waitforcondition>waitexp</ </waitforcondition> </ui:momentarybutton ui:momentarybutton> 16

17 Data Binding Streaming Data SOAP Command Local Data Objects Display 1 A C B Data Processing Global Data Objects Display 2 SOAP Command Local Data Objects E D F Streaming Data Each UI component has one or multiple data objects (e.g. plot parameters), representing the component data value, attributes, etc. The application framework takes care of issuing SOAP command to server side and distributing streaming data back to UI components. The client side developer only needs to take care of assembling UI component and parameter mapping. No Java or JavaScript coding. The data processing engine is configured similar to PLC's ladder logic using VB like language without looping statement. 17

18 Display Editor Java Script 18

19 System Performance on SVG Approach Browser based solution (native or plug-in) gets UI elements updated by updating SVG DOM. Jet engine testing has lots of parameters (20+ per display) and they need to be updated at least 10 frames/second. Our test result showed the maximum refreshing rate can only achieve 5 frames/second with only one display page opened. The bigger screen/higher resolution, the lower the refreshing rate. Unfortunately, Adobe abandoned the development on SVG but it didn't open source its SVG Viewer. The release of RENESIS player had been delayed many times and we never got chance to use it. We decided to render SVG ourselves. 19

20 Using Batik SVG Toolkit Batik is a Java-based SVG toolkit. Using Batik Swing components (core) module, each custom SVG component definition is used as a resource file to create JSVGCanvas object and then inserted into JPanel. However, JSVGCanvas takes long time to load SVG component and uses lots of memory. Later, we developed a simple yet efficient SVG rendering library by simplifying Batik s s low level modules. JSVGCanvas is still used for some special and complex components, such as: gauges, stopwatches. 20

21 Render Custom Component Any custom component can be created by sub-classing JComponent.. Basically, do everything from scratch. The simpler alternative is to use custom UI delegate. Most custom UI components could find surrogate hosts in Java Swing components for managing state and event handling. Creating a custom UI delegate and using SVG rendering engine to render the UI. SVG definition in UI component library is used as resource to define look and feel. Other custom components, such as: Plot, has to be handled differently because it is hard to implement direct in either Java or SVG. 21

22 Plots in JFreeChart Plots used in Jet engine testing, including: performance plot, real-time plot and real-time scrolling plot. They are implemented using JFreeChart package directly without corresponding SVG implementation in the component library. A new custom SVG tag for plots is created to configure the chart behavior without coding in Java for end user. 22

23 Real-Time Enhancement on JFreeChart JFreeChart is excellent in creating large variety of high quality chart. But, It doesn t t support real-time charting. Jet engine testing requires real-time charting at 10Hz. The idea of real-time enhancement is very simple: Let JFreeChart use chart buffer. Draw only two points at a time instead of all points in its data set. Redraw all points only when chart is resized. The updated JFreeChart can do real-time charting over 30Hz. For more detail, please see my post on JFreeChart Forum at: 23

24 Project Time Line: Project Update The project was started in late First working prototype debut on Paris Air Show First sales contract (N3 engine overhaul service in Germany) was awarded at the end of First system (N3) in production service and a formal grand open ceremony on Sep. 14, Until now, Cenco's new data acquisition and control system has been installed and in production use in Germany, India, Saudi Arabia, Egypt, US, China and growing. 24

25 Conclusion SVG helps closing gap between UI designer and developer. UI designers have total freedom to design whatever they want. SVG makes easy to develop custom UI components. Application framework makes possible to develop a full fledged application by simply assembling components and parameter mapping. Cost of building and testing are low. At Cento, many customers can make displays themselves. Future Application: Current implementation in Java takes relatively long time to load initially. It is easy to port to other implementations, such as: WPF Using Flash to host SVG. Pure browser solution using JavaScript library for SVG. 25

26 Questions? 26