Writing Widgets & Custom Script API for BOY Xihui Chen

2Managed by UT-Battelle for the U.S. Department of Energy BOY Architecture Abstract Widget Macro GEF Properties Utility PV Eclipse OPI Editor PaletteNavigator Outline Console Toolbar Properties Sheet Context Menu Script Engine Actions OPI Runtime Toolbar Context Menu Console XML Reader & Writer Color & Font Macro BOY Framework CSS Platform

3Managed by UT-Battelle for the U.S. Department of Energy MVC Pattern All BOY widgets should follow Model-View-Controller Pattern – Separate responsibilities – Decouple complexity – Increase flexibility – Code reuse

4Managed by UT-Battelle for the U.S. Department of Energy Widget Model Definition – Defines the set of properties – Stores the according values – Only properties in model will be persisted to.opi file Implementation – All widgets model must subclass org.csstudio.opibuilder.model.AbstractWidgetModel – All PV widgets should subclass org.csstudio.opibuilder.model.AbstractPVWidgetModel – All Container Widgets must subclass org.csstudio.opibuilder.model.AbstractContainerModel

5Managed by UT-Battelle for the U.S. Department of Energy Widget Model Example public class SimpleBarGraphModel extends AbstractPVWidgetModel{ /** Lower limit of the widget. */ public static final String PROP_MIN = "max"; //$NON-NLS-1$ /** Higher limit of the widget. */ public static final String PROP_MAX = "min"; //$NON-NLS-1$ public final String ID = "org.csstudio.opibuilder.widgetExample.SimpleBarGraph"; //$NON-NLS-1$ /** * Initialize the properties when the widget is first created. */ public SimpleBarGraphModel() { setForegroundColor(new RGB(255, 0, 0)); setBackgroundColor(new RGB(0,0,255)); setSize(50, 100); protected void configureProperties() { addProperty(new DoubleProperty(PROP_MIN, "Min", WidgetPropertyCategory.Behavior, 0)); addProperty(new DoubleProperty(PROP_MAX, "Max", WidgetPropertyCategory.Behavior, 100)); public String getTypeID() { return ID; }... }

6Managed by UT-Battelle for the U.S. Department of Energy Widget Properties Currently supported property types: Create your own property type by extending org.csstudio.opibuilder.properties.AbstractWidgetProperty Property TypeExample Properties Boolean PropertyEnabled, Visible Integer PropertyHeight, Width, X, Y Double PropertyMeter.Level HIHI, Meter.Maximum Combo PropertyBorder Style String PropertyName, PV Name, Text Color PropertyBackground Color, Foreground Color Font PropertyFont File Path PropertyImage.Image File, Linking Container.OPI File PointList PropertyPolyline.Points, Polygon.Points Macros PropertyMacros ColorMap PropertyIntensityGraph.Color Map String List PropertyItems Rules PropertyRules Actions PropertyActions Scripts PropertyScripts

7Managed by UT-Battelle for the U.S. Department of Energy Widget Figure (View) Definition – The graphical representation of the widget – No dependency on model and controller. – It should be autonomous, which means it should have its own behavior independent from model and controller Implementation – All widgets figure must be an instance of org.eclipse.draw2d.IFigure – In most cases, just subclass org.eclipse.draw2d.Figure or other existing figures will make it easier

8Managed by UT-Battelle for the U.S. Department of Energy Widget Figure(cont’d) To use SWT widgets, subclass org.csstudio.opibuilder.widgets.figures.AbstractSWTWidgetFigure – Example: combo, web browser, table widget in BOY You may use SWT_AWT bridge to use Swing widget in BOY

9Managed by UT-Battelle for the U.S. Department of Energy Available Figure Resources A widget figure can be assembled from several other figures, so you can reuse exist figures: – org.csstudio.swt.xygraph Linear Scale SWT XYGraph – org.csstudio.swt.widgets Round Scale Existing Widgets

10Managed by UT-Battelle for the U.S. Department of Energy Widget Figure Example public class SimpleBarGraphFigure extends Figure { private double min =0; private double max = 100; private double value = protected void paintClientArea(Graphics graphics) { super.paintClientArea(graphics); //fill background rectangle graphics.setBackgroundColor(getBackgroundColor()); graphics.fillRectangle(getClientArea()); //fill foreground rectangle which show the value's position graphics.setBackgroundColor(getForegroundColor()); //coerce drawing value in range double coercedValue = value; if(value < min) coercedValue = min; else if (value > max) coercedValue = max; int valueLength = (int) ((coercedValue-min)*getClientArea().height/(max-min)); graphics.fillRectangle(getClientArea().x, getClientArea().y + getClientArea().height -valueLength, getClientArea().width, valueLength); } public void setValue(double value) { this.value = value; repaint(); } public double getValue() { return value; }... }

11Managed by UT-Battelle for the U.S. Department of Energy Widget Editpart (Controller) Definition – The coordinator between model and view – Responsible for the behavior of the widget when properties value changed Implementation – All widgets editpart must subclass org.csstudio.opibuilder.editparts.AbstractWidgetEditPart – All PV widgets should subclass org.csstudio.opibuilder.editparts.AbstractPVWidgetEditPart – All Container Widgets must subclass org.csstudio.opibuilder.editparts.AbstractContainerEditpart

12Managed by UT-Battelle for the U.S. Department of Energy Widget Editpart Example public class SimpleBarGraphEditpart extends AbstractPVWidgetEditPart { /** * Create and initialize figure. protected IFigure doCreateFigure() { SimpleBarGraphFigure figure = new SimpleBarGraphFigure(); figure.setMin(getWidgetModel().getMin()); figure.setMax(getWidgetModel().getMax()); return figure; protected void registerPropertyChangeHandlers() { // The handler when PV value changed. IWidgetPropertyChangeHandler valueHandler = new IWidgetPropertyChangeHandler() { public boolean handleChange(final Object oldValue, final Object newValue, final IFigure figure) { if(newValue == null) return false; ((SimpleBarGraphFigure) figure).setValue(ValueUtil.getDouble((IValue)newValue)); return false; } }; setPropertyChangeHandler(AbstractPVWidgetModel.PROP_PVVALUE, valueHandler); //The handler when max property value changed. IWidgetPropertyChangeHandler maxHandler = new IWidgetPropertyChangeHandler() { public boolean handleChange(Object oldValue, Object newValue, IFigure figure) { ((SimpleBarGraphFigure) figure).setMax((Double)newValue); return false; } }; setPropertyChangeHandler(SimpleBarGraphModel.PROP_MAX, maxHandler); … } … }

13Managed by UT-Battelle for the U.S. Department of Energy Register the widget with BOY Use the standard Eclipse extension point mechanism Extension point: org.csstudio.opibuilder.widget

14Managed by UT-Battelle for the U.S. Department of Energy Integrate the widget with CSS CSS Developer – Include the widget plugin into your build CSS User – Export it to a deployable Plugin JAR file and copy it to your CSS dropins folder

15Managed by UT-Battelle for the U.S. Department of Energy Example Follow steps on – BOY online help->Creating Customized Widget

16Managed by UT-Battelle for the U.S. Department of Energy Create Custom Script API Purpose: call your own Java API from BOY scripts – For example, retrieve data from MySQL database and display the data on BOY widgets. Technology: Eclipse Fragment – A fragment on host of org.csstudio.opibuilder plugin will be recognized as part of the host – It allows adding third party libraries or plugins – Add static method to your utility class – Export the package from MANIFEST.MF/Runtime page

17Managed by UT-Battelle for the U.S. Department of Energy Example Follow steps on – BOY online help-> Script->Creating Custom ScriptUtil

18Managed by UT-Battelle for the U.S. Department of Energy Summary BOY Widgets – All BOY widgets must follow the MVC pattern – Each widget should have at least three classes: Model, Editpart and Figure – Using Eclipse extension point to register widgets with BOY – Glad to have your widgets included in BOY as standard widgets contact Custom Script API – Use Fragment on host of org.csstudio.opibuilder Thank you!