SVG in Data Acquisition and
     Control Systems

          Tao Jiang
       Boston Scientific


                              1
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
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
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
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
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
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
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
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
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
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
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
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

SVG in Data Acquisition and Control Systems

  • 1.
    SVG in DataAcquisition and Control Systems Tao Jiang Boston Scientific 1
  • 2.
    Jet Engine TestCells 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 Acquisitionand 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 • Excelreporting 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 displaysusing 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 supportingcustom 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 onSVG 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 atraditional 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