What Is ION Script?

ION Script is a language for creating Web-based IDL visualization and analysis applications. It contains tags, similar to HTML tags, for embedding IDL visualizations and data in a Web page. It has a rich set of variable, event, and flow control tags that allow you to create powerful, interactive Web applications.

ION Script is lightweight, easy to learn and implement, can capable of creating applications that range in complexity from simple Web-based visualizations to interactive data-picking applications, including Region-Of-Interest selection (to drill down through a data set or zoom in on an image, for example). ION Script provides a mechanism for the developer to track the client's state across multiple Web pages.

ION Script can be easily integrated with other Web-based technologies such as JavaScript, ActiveX, and database applications, and can be easily incorporated into existing Web pages.

If you require the ability to expose your IDL data and visualizations to Internet or intranet users, ION Script is the perfect tool. For cases in which the Web browser is a suitable container for your application, ION Script provides the necessary functionality without burdening you with the complexity of Java programming, or burdening the users of your application with the overhead required to run a Java application.

This brief overview of ION Script will introduce you to some of the main elements of the ION Script language before we get into the more specific details of writing ION Script applications. After reading this section, you'll have a general idea of what an ION Script page looks like and the kinds of applications for which ION Script can be used. For details on the syntax and usage of each ION Script tag, refer to ION Script Tag Reference.

ION Script Pages

An ION Script page is similar in organization to an HTML page. In fact, ION Script pages can contain HTML. Consider the following HTML page:

<HTML>  
<HEAD>  
   <TITLE>My HTML Page</TITLE>  
</HEAD>  
<BODY>  
   <H1>My HTML Page</H1>   
   This is a simple HTML page    
</BODY>  
</HTML>

<ION_SCRIPT>  
  
<ION_HEADER>  
   <TITLE>My ION Script Page</TITLE>  
</ION_HEADER>  
  
<ION_BODY>  
   <H1>My ION Script Page</H1>  
   This is a simple ION Script page  
</ION_BODY>  
  
</ION_SCRIPT>

Every ION Script page must have the ION_SCRIPT and ION_BODY tags. The ION_SCRIPT tag is a container for everything in the ION Script page. All content on the page must reside inside the ION_SCRIPT block. Everything inside the ION_BODY tag is converted to HTML to create the Web page delivered to the user. Optionally, an ION Script page can contain an ION_HEADER block, used to define document attributes such as the title, to declare ION Script variables and events, and to include any HTML tags you would use inside the HEAD element of an HTML page, such as <META>, <SCRIPT>, and <STYLE>.

This ION Script page is parsed by the ION Script parser to create the following HTML page:

Creating the above page with ION Script wouldn't make much sense because the same page could be created with pure HTML. But pure HTML doesn't provide the means to, for example, embed a dynamically-generated IDL image in a Web page. By adding a couple of simple tags, ION_IMAGE and IDL, we can easily accomplish this with ION Script:

<ION_SCRIPT>  
  
<ION_HEADER>  
   <TITLE>My ION Script Page</TITLE>  
</ION_HEADER>  
  
<ION_BODY>  
   <H1>My ION Script Page</H1>  
   This is a simple ION Script page<BR><BR>  
   <ION_IMAGE TYPE="DIRECT">  
      <IDL>  
         shade_surf, dist(30)  
      </IDL>  
   </ION_IMAGE>  
</ION_BODY>  
  
</ION_SCRIPT>

The header section of an ION Script page is also where we define variables and events, using the VARIABLES, VARIABLE_DECL, EVENTS, and EVENT_DECL tags. The following example creates a button that triggers the PLOT event, which executes the page plot.ion:

<ION_SCRIPT>  
<ION_HEADER>  
   <TITLE>My ION Script Page</TITLE>  
  
   <VARIABLES>  
      <VARIABLE_DECL NAME="A" VALUE="5" TYPE="INT"/>  
   </VARIABLES>  
  
   <EVENTS>  
      <EVENT_DECL NAME="PLOT" ACTION="ion://plot.ion"/>  
   </EVENTS>  
</ION_HEADER>  
  
<ION_BODY>  
   <ION_FORM>  
      <ION_BUTTON EVENT="PLOT" TYPE="BUTTON" LABEL="Draw Plot"/>  
   </ION_FORM>  
</ION_BODY>  
</ION_SCRIPT>

Variables and events allow you to create interactive applications in which the user can control the behavior of the application and the appearance of generated images and data.

Also important in creating interactive applications are ION Script's flow control tags, ION_IF, ION_ELSE, and ION_ELSEIF. These tags allow you to perform certain actions depending on the actions of the user, such as reporting invalid entries:

<ION_IF EXPR="$USERENTRY EQ 0">  
   You can't enter 0!  
<ION_ELSE/>  
   You entered <ION_VARIABLE NAME="$USERENTRY"/>  
</ION_IF>

As with HTML tags, some ION Script tags are called tag pairs, meaning that they must contain an opening and closing tag, such as ION_BODY:

<ION_BODY>  
</ION_BODY>

Other ION Script tags are called single tags, which do not contain a closing tag. Unlike single HTML tags, such as <BR> and <INPUT>, single ION Script tags such as VARIABLE_DECL use XML syntax and are therefore closed with "/>" instead of just ">":

<VARIABLE_DECL NAME="A" VALUE="5" TYPE="INT"/>

ION Script Applications

An ION Script application is composed of one or more ION Script pages that contain ION Script and HTML tags. An ION Script application can also contain pure HTML pages that can link to other ION Script pages. Unlike an HTML page, which is passed directly from the Web server to the client, an ION Script page is first parsed by the ION Script parser, which converts any ION Script content to HTML before returning the page to the client. The ION Script content can consist of tags that embed IDL data or visualizations, and tags that add "brains" to your application, allowing you to generate Web pages dynamically depending on the user's actions. For example, you can allow your users to click on an IDL-generated image to zoom in on a certain part of the image, or provide users with a choice of image processing algorithms to apply to the image.

Anatomy of an ION Script Application

Before you learn the details of writing an ION Script application, it helps to understand what ION Script does under the hood when a client requests an ION Script page. ION Script tags are processed by the ION Script parser and converted to HTML. As illustrated in the following figure, the output of every ION Script application is an HTML page:

Figure 2-4: ION Script Application Architecture

Figure 2-4: ION Script Application Architecture

The following sequence of events occurs when a request is made for an ION Script page:

The client requests an ION Script page by requesting a URL of the form
http://myserver/cgi-bin/ion-p?page=mypage.ion, by clicking a link pointing to such a URL, or by submitting an HTML form with an action that points to the ION Script parser.

The Web server passes the request to the parser (the CGI program ion-p).

The parser converts ION Script content to HTML:

The content of ION_DATA_OUT tags is sent to the Data Server, which passes the IDL content to IDL for processing, and the Data Server returns the IDL output to the Web page.

Any other ION Script content, such as ION_EVALUATE and ION_VARIABLE, is evaluated by the parser and converted to HTML.

HTML tags are passed as is to the outputted HTML page.

ION_IMAGE tags are converted to HTML <IMG> tags. These <IMG> tags are then processed by the Image Server, which passes the IDL content to IDL for processing, and the Image Server returns the IDL-generated image to the Web page as a PNG or JPEG image.

Any attribute used inside an ION Script tag that is not recognized by the ION Script Parser as an ION Script attribute is passed unchanged to the browser. This allows you to use in an ION Script tag any valid attribute of the HTML tag to which the ION Script tag is converted. For each ION Script tag listed in ION Script Tag Reference, there is a section called "HTML Mapping" that tells you what HTML, if any, is produced by that tag.

Example

Suppose you have the following ION Script page, mypage.ion, on your Web server:

<ION_SCRIPT>  
<ION_BODY>  
   <H1>Below is an IDL-Generated Image</H1>  
   <ION_IMAGE IMG_TYPE="PNG8" TYPE="DIRECT">  
      <IDL>  
         LOADCT, 5  
         SHOW3, DIST(30)  
      </IDL>  
   </ION_IMAGE><BR>  
   <H1>Below is IDL-Generated Data</H1>  
   <ION_DATA_OUT>  
      <IDL>  
         Array=INDGEN(5)  
         Print, Array  
      </IDL>  
   </ION_DATA_OUT>  
</ION_BODY>  
</ION_SCRIPT>

If you're familiar with HTML, you'll notice a couple plain HTML tags in this page: the <H1> and <BR> tags. These HTML tags are sent directly to the HTML page that the parser creates as soon as they are encountered. The other tags are ION Script tags, which, with the help of the Image Server and IDL, are converted to HTML. When the client requests mypage.ion, the following page is returned:

Figure 2-5: Sample Output

Figure 2-5: Sample Output

If you view the source code returned to the client, you'll see that it looks very different from the original ION Script page that was requested:

<HTML>  
<BODY>  
<H1>Below is an IDL-Generated Image</H1>  
<IMG NAME="IMG" ALT="ION Image" WIDTH="320" HEIGHT="256" 
BORDER="1" SRC="http://www.myserver.com/cgi-bin/ion-
i?DATA=DB1AA6B14FAC62CBF4BDA47CBDE4C4C5E2649F910E046ACB07A2B910FA4
FA4FA9E27B062466F914D567636B09190499CBC3871A0A7028F8DDC19643548CC9
5233B8B5DDF22128893F798DAC895C51530E412C60F77F58162F0">  
<BR>  
<H1>Below is IDL-Generated Data</H1>  
<PRE>       0       1       2       3       4  
</PRE>  
</BODY>  
</HTML>

Note the following with regard to this HTML code:

The <HTML> and <BODY> tags are automatically added by ION Script.

The <H1> and <BR> tags are included as is.

The ION_IMAGE tag becomes an HTML <IMG> tag with a SRC attribute that points to the ION Script Image Server. The URL specified for the SRC attribute contains encrypted information used to generate the image.

The ION_DATA_OUT tag becomes plain text, surrounded in this case by the HTML <PRE> tag by default.

IDL Online Help (March 06, 2007)