Graphics in ION Script

ION Script images can be created using either of IDL's graphics systems: Direct Graphics or Object Graphics. The following sections describe how each graphics system is implemented in ION Script.

Direct Graphics

Images created using the IDL Direct Graphics commands are drawn to the IDL Z-Buffer. The Z-Buffer is an 8-bit device that stores intensity values for each pixel. These values are combined with the current color map to produce the final output image. If you change the device in any IDL code that is executed in an <ION_IMAGE> tag, you must make sure to change the device back to the Z-Buffer and TV the final image to it.

Object Graphics

ION Script creates a destination object on which to display Object Graphics trees. It is an RGB-mode IDLgrBuffer object. In any embedded ION Script code, it is referenced as ION_SCRIPT_BUFFER. Only graphics trees rendered to this instance of the object are displayed in the final Web page.

The following example illustrates how to use Object Graphics in ION Script. Note that it is not necessary, nor allowed, to create an IDLgrWindow object. To draw the object, you simply call the Draw method of the ION_SCRIPT_BUFFER object:

<ION_SCRIPT>  
<ION_BODY>  
   <ION_IMAGE TYPE="OBJECT">  
      <IDL>  
         file = FILEPATH('rose.jpg', SUBDIR=['examples', 'data'])  
         READ_JPEG, file, image  
         ;Create the objects:  
         myview = OBJ_NEW('IDLgrView', view=[0,0,227,149])  
         mymodel = OBJ_NEW('IDLgrModel')  
         myimage = OBJ_NEW('IDLgrImage', image)  
         ;Organize the object hierarchy:  
         mymodel -> Add, myimage  
         myview -> Add, mymodel  
         ;Draw the view to the ION_SCRIPT_BUFFER:  
         ION_SCRIPT_BUFFER-> Draw, myview  
      </IDL>  
   </ION_IMAGE>  
</ION_BODY>  
</ION_SCRIPT>

Bandwidth Issues

Because ION Script applications can be image-intensive, their performance depends strongly on network bandwidth. Bandwidth may not be an issue if you are serving your ION Script applications only to the users of your high-speed company intranet, but if your users are likely to be accessing your application over the Internet, through an analog telephone line and low-speed modem, then close consideration must be given to the file size of images generated by ION Script and to the overall design of your application. For example, if your application allows the user to zoom in on a region of interest, then you could provide the smallest, lowest-quality image necessary to give the user the required information at each stage in the drill-down process. If the final image delivered to the user is a 1200 x 1200 image with millions of colors, that does not necessarily mean that the images sent to the user to get to that point must also be so large. Another technique that can speed up your application is to use a page with several thumbnail images that the user can click on to see a more detailed, larger image.

Images can vary widely in file size, depending on the image format, the number of colors in the image, and the image dimensions. Image format and number of colors may or may not be factors that you can change, depending on your data and its intended use. If you can achieve acceptable results with a 256-color image instead of a 16.7-million color image, the price you pay in image detail and quality is rewarded with a smaller file size, and consequently, faster download time for the user. The image dimensions (i.e. the height and width of the image, in pixels), greatly effect file size. Use only as large an image as is necessary for your application.

Output Formats

Direct and Object Graphics images can be output to the Web browser in three different formats: 24-bit JPEG, 8-bit PNG, and 24-bit PNG.

The default format is 8-bit PNG for Direct Graphics images, and 24-bit JPEG for Object Graphics images, but these defaults can be changed via the configuration utility (see Images). The defaults can be overridden on a case-by-case basis by specifying a value for the IMG_TYPE attribute of the ION_IMAGE tag.

PNG uses a lossless compression scheme, whereas JPEG compression is lossy. JPEG compression can result in smaller image files, but the lossy compression may degrade image quality.

Whether you should use JPEG, 8-bit PNG, or 24-bit PNG depends on several factors. Some of these factors include:

Whether your users have a browser that supports PNG. Assuming your user base is using a browser supported by ION Script (Netscape Navigator 4.7 or Internet Explorer 5.5), your users will have a browser that supports PNG.

Whether you are using Direct or Object Graphics.

The number of colors in the image.

The required image quality.

The resulting file size of the image.

The following are general guidelines for selecting the proper image format:

If your image is created using Direct Graphics, use 8-bit PNG. Since all Direct Graphics images created using ION Script are 8-bit, use 8-bit PNG instead of JPEG for Direct Graphics because JPEG compression of 8-bit images can result in degraded image quality. (See image-types.ion in the examples directory for an example of this.)

If your image is created using Object Graphics, the first factor to consider is the number of colors in your image. If your image contains 256 or fewer colors, use 8-bit PNG. If your image contains a large number of colors, use either 24-bit PNG or 24-bit JPEG. The choice comes down to how large the image file will be versus the required image quality. If application performance is of high importance and you can live with the visible artifacts that JPEG's lossy compression can introduce, JPEG might be a better choice because the file size of a JPEG image can be considerably smaller. The amount of degradation from JPEG compression varies depending on the image content, but should be acceptable for most Web applications. If image quality is of utmost importance, use 24-bit PNG.

A good way to determine which image format to use is to create the image in all three formats on the same page. You can then visually compare the images to see which formats give acceptable quality, and weigh the quality against the size of each image. To see the size of the image, right click on the image and select "Save image As" or "Save Picture As" to save the file. The example image-types.ion in the examples directory provides an example of how different image types affect the quality and size of the image. You can access this example by clicking the "Image Type Example" link on the "Basic" examples page, index_howto.ion.

IDL Online Help (March 06, 2007)