JAS3 HTML Extensions Help Page

SLAC	PEP-II
BABAR
SLAC<->RAL

HEPIC	E,S & H	Databases	PDG	HEP preprints
Organization	Detector	Computing	Physics	Documentation
Personnel	Glossary	Sitemap	Search	Hypernews

Introduction

HTMLExtensions Plugin contains definitions and implementations of HTML-like tags that allow JAS3 to include live plots into HTML pages. Java implementation of AIDA IPlotter is used to display plots, so corresponding tags were designed to mimic the structure of IPlotter. Look here for more information on IPlotter, IPlotterRegion, IPlotterStyle, and AIDA interfaces in general.

Simple Example

Here is simple example of HTML code that displays two histograms from a Root file rootdemo.root. If you want to see exact same pictures, you need to:

Download file rootdemo.root
In JAS3 main menu go to File -> Open Data Source, select Root File (.root) and follow through
rootdemo.root node should appear in the JAS3 Tree window (left top)

Please note that "plotData" attribute of <aidaplot> tag specifies the full path to a particular histogram in JAS3 Tree (tree in JAS3 left frame).

<HTML>
    <HEAD>
        <TITLE>Test of JAS3 HTML Plots</TITLE>
    </HEAD>
    <BODY>

Using Styles

AIDA standard introduced IPlotterStyle to give user control over the way the plot is drawn. Styles may contain other styles as well as parameters (attributes). For example, top level IPlotterStyle contains IDataStyle, that in turn contains IMarkerStyle. So all properties of a marker - size, color, shape, etc. are defined in IMarkerStyle.

If you have AIDAStyleEditorPlugin installed, you can create, edit, and save IPlotterStyle by going to "AIDA Style Editor" menu (under Tools), or by right-clicking on a particular histogram in JAS3 Tree and selecting "Create AIDA Style". Such exercise can be also useful for understanding hierarchy and structure of AIDA IPlotterStyle .

Top level IPlotterStyle is represented by aidaplotterstyle tag. All lower level styles are represented by aidastyle tag with appropriate type attribute:

IDataStyle :: <aidastyle type="dataStyle">
IMarkerStyle :: <aidastyle type="markerStyle">

There are two ways to define aidaplotterstyle:

Using "styleRef" attribute to specify location of XML file with style definition.
Define particular style parameters directly in HTML, using aidastyle and aidastyleattribute tags.

You can also combine both ways in one tag. In this case HTML definition overwrites any parameters defined in XML file. In the example below style is read from MyPlotterStyle.xml file, then color, shape, and size of the marker are modified by the HTML tags.

<aidaplotterstyle styleRef="./xml/MyPlotterStyle.xml>
    <aidastyle type="dataStyle">
        <aidastyle type="markerStyle">
            <aidastyleattribute attributeName="color" attributeValue="red">
            <aidastyleattribute attributeName="shape" attributeValue="dot">
            <aidastyleattribute attributeName="size"    attributeValue="6">
        </aidastyle>
    </aidastyle>
</aidaplotterstyle>

All three tags: aidaplotter, aidaregion, and aidaplot can contain aidaplotterstyle definition. It is also possible to set the global style for the whole HTML page by providing aidaplotterstyle tag outside the scope of aidaplotter.

To understand the way styles work it is important to understand the hierarchical structure of the AIDA styles. When plot is created, a cascade of styles is taken into account: the style for a particular HTML page (if any), the style associated with the aidaplotter, the style associated with the aidaregion, the default style for a given type of data, and the style associated with aidaplot. When retrieving the value of a give style parameter we first start from the aidaplot styles (if any) and navigate down through all the above styles until we find a style for which the given style parameter has been set. This means that the style parameters set in a aidaplot will always overwrite the parameter set in aidaregion, aidaplotter, and HTML page.

More Complex Example

In the example below we define global style for the whole page and define style for plotter.

First region in the plotter does not specify any additional styles, so it is just using plotter and page styles exactly as they are defined in XML files.

Second region also uses plotter and page styles, but in addition it defines several extra parameters, in particular it makes marker visible.

<HTML>
    <HEAD>
        <TITLE>Test of JAS3 HTML Plots with STYLES</TITLE>
    </HEAD>
    <BODY>

<aidaplotterstyle styleRef="./xml/MyPageStyle.xml>
    </aidaplotterstyle>

Compare MC (left) and DATA (right) : <BR>

<aidaplotter width="600" height="300">

<aidaplotterstyle styleRef="./xml/MyMonteCarloStyle.xml>
        </aidaplotterstyle>

<aidaregion>
        <aidaplot plotData="/MC/h10-mc">
        </aidaplot>
</aidaregion>


<aidaregion>

    <aidaplotterstyle>
        <aidastyle type="dataStyle">
            <aidastyle type="markerStyle">
                <aidastyleattribute attributeName="isVisible" attributeValue="true">
                <aidastyleattribute attributeName="color"      attributeValue="red">
                <aidastyleattribute attributeName="shape"     attributeValue="dot">
                <aidastyleattribute attributeName="size"        attributeValue="6">
            </aidastyle>
            <aidastyle type="fillStyle">
                <aidastyleattribute attributeName="isVisible" attributeValue="false">
            </aidastyle>
        </aidastyle>
    </aidaplotterstyle>

     <aidaplot plotData="/DATA/h10-data">
     </aidaplot>

</aidaregion>

</aidaplotter>

</BODY>
</HTML>

Tags and Attributes

This section contains list of all extra HTML tags and attributes that are used to display plots.

<aidaplotter>
- Possible attributes:
  - height
  - width
  - regionX
  - regionY
- May include:
  - aidaregion
  - aidaplotterstyle

<aidaregion>
- Possible attributes:
  - none
- May include:
  - aidaplot
  - aidaplotterstyle
<aidaplot>
- Possible attributes:
  - plotName
  - plotData
  - plotOptions
- May include:
  - aidaplotterstyle
<aidaplotterstyle>
- Possible attributes:
  - styleName
  - styleRef
- May include:
  - aidastyle
  - aidastyleattribute

<aidastyle>
- Possible attributes:
  - type
- May include:
  - aidastyle
  - aidastyleattribute

<aidastyleattribute>
- Possible attributes:
  - attributeName
  - attributeValue
- May include:
  - none