WebOPI

-Bring BOY OPI to the Web and Mobile

Xihui Chen, Kay Kasemir

chenx1@ornl.gov

Spring 2012 EPICS Meeting

2 Managed by UT-Battelle for the U.S. Department of Energy

We already have good control system

displays in control room

3 Managed by UT-Battelle for the U.S. Department of Energy

Still, Users want Web Access to Ctrl. Sys.

• From Anywhere

• On any device

– and any web browser

4 Managed by UT-Battelle for the U.S. Department of Energy

WebOPI made this to reality

• BOY OPI in Chrome and iPod Touch

5 Managed by UT-Battelle for the U.S. Department of Energy

SNS control room screens in

Web Browser

6 Managed by UT-Battelle for the U.S. Department of Energy

• Mobile devices

– iPhone, iPod, iPad

– Andriod Phone (Opera 9+ or Firefox 2+ browser is required)

– Maybe more…

• No Flash

• No Java Applets

• No browser add-on/plugin

Compatible With…

Safari 3+ Firefox 2+ IE 6+ Chrome 3+ Opera 9+

7 Managed by UT-Battelle for the U.S. Department of Energy

Highly Compatible with BOY

• 98% BOY OPI functions are supported in WebOPI

All widgets, except Data Browser widget (technically possible)

Actions, Macros, Color & Font Macro

Rules, JavaScript and Python Script

• Not supported (minor things)

o No advance graphics

o No clip (fill level property of Ellipse, Polygon)

o No ramp on Gauge, Meter and Knob

o No dash line

o No 3D effect

o No tooltip

o No Console

o No File Dialog

o No Workspace

8 Managed by UT-Battelle for the U.S. Department of Energy

Can anyone tell the difference?

Arc is filled in different way

No fill level on Ellipse and Polygon

No ramp and 3D effect (gradient)

9 Managed by UT-Battelle for the U.S. Department of Energy

No special requirement on OPI file

• Existing BOY OPI can be reused on WebOPI without any modification

• Well, one requirement:

– Don’t rely on the unsupported functions as listed before

10 Managed by UT-Battelle for the U.S. Department of Energy

Technologies behind

• Built on Eclipse RAP (Rich Ajax Platform)

– Bring Eclipse RCP to the Web for Rich Internet Application

– Single Sourcing between RCP and RAP applications

– Using JavaScript and HTML5 in Web Browser

• Supported by all mainstream web browsers

– Standard servlet technology

• Server runs on any JEE servlet container, such as Tomcat, Jetty, Glassfish, JBoss and WebSphere

• Most of BOY code (99%) is single sourced with WebOPI

11 Managed by UT-Battelle for the U.S. Department of Energy

Why can it do single sourcing?

12 Managed by UT-Battelle for the U.S. Department of Energy

• WebOPI is Multi-User

– Server side needs to manage the life cycle of each client

• PV connect/disconnect

• Widget activate/deactivate

• WebOPI has no workspace

However, there are still differences

CSS BOY WebOPI

13 Managed by UT-Battelle for the U.S. Department of Energy

Server and Clients share the load

• Most of the code is executed on server side

– PV connection, read/write

– Script executing

– Clients life cycle management

• Client side

– GUI rendering

Control System

Channel Access

HTTP HTTP

14 Managed by UT-Battelle for the U.S. Department of Energy

Server and Clients share the load

• Pros

– Allow lightweight client devices, such as mobile devices

– No firewall issue

– Simple security management

• Cons

– Heavy loaded OPI could slow down the server

– Potential limits to number of clients because server needs to run the code for every client

15 Managed by UT-Battelle for the U.S. Department of Energy

How does WebOPI get updates?

• Traditional Webpages make updates by

– Refreshing the page periodically

• Slow, waste traffic

– Adobe Flash, Java Applet

• Doesn’t work on iPhone, iPod, iPad…

– Web browser add-on

• Specific to certain web browsers. Won’t work on all your devices.

• WebOPI uses AJAX and long polling approach

– XMLHttpRequest long polling

• A long-standing request that is answered only in case of server-side updates

• Not perfect server side push, but only very little traffic overhead

16 Managed by UT-Battelle for the U.S. Department of Energy

Performance

• Benchmark test – An OPI with 1000 text update widgets updated at 10Hz

• Server: Linux, 4 core, 2.66GHz, 4GB Memory – 18% CPU usage

– <200M memory usage

• Only one Client: Chrome on Windows, 4 Core, 2.66G, 4GB Memory – 20% CPU usage

– 50M memory usage

– 300 kB/s

• Network – 100Mbps Local Area Network

• Limits of client number has not been tested yet

17 Managed by UT-Battelle for the U.S. Department of Energy

To take the best use of it,

• Don’t deploy heavy loaded OPI

– Eg. Hundreds of widgets updated at fast rate

• Split them to small OPIs if possible

• Close the webpage when it is not needed anymore

18 Managed by UT-Battelle for the U.S. Department of Energy

• Support all JEE servlet container

– Tomcat, Jetty, Glassfish, JBoss and WebSphere

• Step 1. Copy webopi.war to the predefined location specified by servlet container

• Step 2. Configure css_rap.ini

• Step 3. Copy opi files to opi_repository

• You are ready to see your opi on web!

Deployment: Step 1, 2, 3

org.csstudio.opibuilder/opi_repository=C:/path/BOY Examples/

org.csstudio.opibuilder/startup_opi=main.opi

org.csstudio.opibuilder/mobile_startup_opi=mobile.opi

org.csstudio.opibuilder/color_file=color.def

org.csstudio.opibuilder/font_file=font.def

19 Managed by UT-Battelle for the U.S. Department of Energy

Could Custom BOY Widgets work?

• Yes, but it needs to follow few rules:

– Don’t use Display.getCurrent()

• There is no “current” because each client has its own Display

– Don’t use static color, font, cursor because they are Display related

– Make sure your code work in RAP

20 Managed by UT-Battelle for the U.S. Department of Energy

The Future

• Add more SWT native widgets to BOY so they can be used for WebOPI

– Much better performance

• Less network traffic

• Native widgets are rendered faster

• Move to RAP Mobile?

– Render widgets using mobile native graphics

– Native Mobile application on iOS and Andriod

• Need your contributions!

21 Managed by UT-Battelle for the U.S. Department of Energy

Thank you!

• WebOPI homepage:

– http://sourceforge.net/apps/trac/cs-studio/wiki/webopi