Tutorial on Creating Overlays in VISITview

Tutorial on Creating Overlays in VISITview

written by Bard Zajac
updated 20 August 2001

Summary

This tutorial provides instructions on how to create overlays in VISITview and provides one example of a radar-lightning overlay. Using the instructions and example, the user should be able to create multiple overlays with a variety of meteorological fields, maps, etc. It is assumed that the user knows how to construct a VISITview lesson using the VISITview Lesson Builder.

To view an example of a radar-lightning overlay in VISITview, click on OVERLAY session and go to Slide 6.

To go through this tutorial, the user must unzip NO_OVERLAY.EXE and OVERLAY.EXE into directories of the same name. These two files are VISITview lessons and represent the before and after of the overlay process.

The tutorial is organized into four steps:
Step 1: Organizing the images
Step 2: Building the lesson
Step 3: Editing the VIEWMASTER.HTML and VIEWSTUDENT.HTML files
Step 4: Coverting the modified lesson into an executable

Technical details about the actual creation of overlays are discussed at the bottom of this page.

Step 1: Organizing the images

General instructions: The user organizes a sequence of images that will be put in the VISITview lesson using the Lesson Builder. Overlays consists of equal numbers of background and foreground images (overlays can be used with a still frame or a loop). The background images show all meteorological fields, maps, etc. to be viewed at all times. The foreground images show only the field, map, etc. to be overlaid. The background and foreground images must have the exact same map projection and domain for a proper overlay (see specific instructions for AWIPS below).

Specific instructions for AWIPS: The user creates a still frame or loop with all fields and maps displayed. Assuming a loop is to be created, background images are grabbed first by "turning off" the overlay field and then using D2D2GIF or a graphics application like XV to grab the AWIPS display. Once background images are acquired, "turn off" all fields and maps and "turn on" the overlay field. Repeat the process of grabbing to acquire the foreground images. It is hopefully evident that overlays can be added to frames or loops that were created previously. All the user needs to do is duplicate the exact map projection and domain in the original images. Once this is done, foreground images can be acquired as described above.

Example: The user should examine the NO_OVERLAY directories and find a series of files starting with MLB_rad_* and MLB_cg_*. The background and foreground images are the MLB_rad_* files and MLB_cg_* files, respectively. The MLB_rad_* images show low-level radar reflectivity, county borders, and WSR-88D locations and names. The MLB_cg_* images show lightning only. Both sets of images have the exact same map projection and domain.

Step 2: Building the lesson

General instructions: The user builds the lesson in a normal manner. The background images are organized into a loop and placed at the appropriate location within the lesson. The foreground images are organized into a loop and placed at the end of the lesson for easy identification and editing in upcoming steps. Loops are created using the "View Page Frames" toggle in the Lesson Builder.

Example: The user should run the NO_OVERLAY session and see how the background/radar loop appears as Slide 6 and how the foreground/lightning loop appears at the end of the session as Slide 8.

Step 3: Editing the VIEWMASTER.HTML and VIEWSTUDENT.HTML files

General instructions: The user edits the VIEWMASTER.HTML file, first removing the foreground loop (the last slide) and then adding HTML code to allow for the overlay. Since the VIEWMASTER.HTML and VIEWSTUDENT.HTML files are the same except for one parameter, the VIEWSTUDENT.HTML file can be easily updated.

Example: The user should open the VIEWMASTER.HTML file from the NO_OVERLAY directory. The file is shown below. Line numbers have been added for easy reference. It is recommended that a backup of the original VIEWMASTER.HTML be made before performing the modifications described below.

1.   <html>  <title>VisitView Lesson </title> <body>
2.   <APPLET code="ViewClient.class" width=759 height=586>
3.   <PARAM name="cursor_position" value="x,x,x,x,x,x,x,x">
4.   <PARAM name="althost" value="cira@visit.cira.colostate.edu">
5.   <PARAM name="pause_on_first" value="200">
6.   <PARAM name="pause" value="600">
7.   <PARAM name="URL_list" value="x,x,x,x,x,x,x,x">
8.   <PARAM name="font_size" value="24">
9.   <PARAM name="group" value="no_overlay">
10.  <PARAM name="Master" value="true">
11.  <PARAM name="number_frames" value="1,1,1,1,1,10,3,10">
12.  <PARAM name="start_looping" value="f,f,f,f,f,t,f,t">
13.  <PARAM name="can_fade" value="f,f,f,f,f,f,f,f">
14.  <PARAM name="tearoff" value="always">
15.  <PARAM name="portal_width" value="x,x,x,x,x,x,x,x">
16.  <PARAM name="portal_height" value="x,x,x,x,x,x,x,x">
17.  <PARAM name="portal_y" value="x,x,x,x,x,x,x,x">
18.  <PARAM name="portal_x" value="x,x,x,x,x,x,x,x">
19.  <PARAM name="labels" value="1. Title,2. Teletraining tips,3. Introduction,4. Objectives,5. Overview,6. MLB - radar (10),7. MLB summary (3),8. MLB - CGs (10)">
20.  <PARAM name="filenames" value="Slide1V001,Slide2V002,Slide3V003,Slide4V004,Slide5V005,MLB_rad_01V006,Slide89V007,MLB_ltg_01V008">
21.  <PARAM name="enhance" value="enh.tab">
22.  <PARAM name="portals" value="x,x,x,x,x,x,x,x">
23.  <PARAM name="portalLinks" value="x,x,x,x,x,x,x,x">
24.  </APPLET> </body> </html>

To remove the last slide, Slide 8, the "tags" associated with Slide 8 must be deleted. Perform the following: delete the last "x" from lines 3, 7, 15, 16, 17, 18, 22 and 23. Also delete the last "10" from line 11, the last "t" from line 12, the last "f" from line 13, "8. MLB - CGs (10)" from line 19, and "MLB_ltg_01V008" from line 20. Make sure to delete the associated comma (,) in all lines to maintain the original formatting.

Now add the HTML code between lines 23 and 24 to allow for the overlay. Letters have been added for easy reference.

A.   <PARAM name="overlays" value="x,x,x,x,x,MLB_ltg_01V008,x">
B.   <PARAM name="overlay_labels" value=" x,x,x,x,x,CG lightning,x">
C.   <PARAM name="overlay_transparent" value="x00000000">

In line A, "MLB_ltg_01V008" replaces the sixth "x" to put the foreground/lightning images in the same slide location as the background/radar images (i.e., Slide 6). In line B, "CG lightning" replaces the sixth "x" to give the overlay an appropriate label.

The only other modification recommended is to change "6. MLB - radar (10)" to "6. MLB - radar and CGs (1)" in line 19 to reflect the addition of lightning overlay.

The VIEWMASTER.HTML file now looks like the following:

1.   <html>  <title>VisitView Lesson </title> <body>
2.   <APPLET code="ViewClient.class" width=759 height=586>
3.   <PARAM name="cursor_position" value="x,x,x,x,x,x,x">
4.   <PARAM name="althost" value="cira@visit.cira.colostate.edu">
5.   <PARAM name="pause_on_first" value="200">
6.   <PARAM name="pause" value="600">
7.   <PARAM name="URL_list" value="x,x,x,x,x,x,x">
8.   <PARAM name="font_size" value="24">
9.   <PARAM name="group" value="no_overlay">
10.  <PARAM name="Master" value="true">
11.  <PARAM name="number_frames" value="1,1,1,1,1,10,3">
12.  <PARAM name="start_looping" value="f,f,f,f,f,t,f">
13.  <PARAM name="can_fade" value="f,f,f,f,f,f,f">
14.  <PARAM name="tearoff" value="always">
15.  <PARAM name="portal_width" value="x,x,x,x,x,x,x">
16.  <PARAM name="portal_height" value="x,x,x,x,x,x,x">
17.  <PARAM name="portal_y" value="x,x,x,x,x,x,x">
18.  <PARAM name="portal_x" value="x,x,x,x,x,x,x">
19.  <PARAM name="labels" value="1. Title,2. Teletraining tips,3. Introduction,4. Objectives,5. Overview,6. MLB - radar and CGs (10),7. MLB summary (3)">
20.  <PARAM name="filenames" value="Slide1V001,Slide2V002,Slide3V003,Slide4V004,Slide5V005,MLB_rad_01V006,Slide89V007">
21.  <PARAM name="enhance" value="enh.tab">
22.  <PARAM name="portals" value="x,x,x,x,x,x,x">
23.  <PARAM name="portalLinks" value="x,x,x,x,x,x,x">

A.   <PARAM name="overlays" value="x,x,x,x,x,MLB_ltg_01V008,x">
B.   <PARAM name="overlay_labels" value="x,x,x,x,x,CG lightning,x">
C.   <PARAM name="overlay_transparent" value="x00000000">

24.  </APPLET> </body> </html>

The user should now update the VIEWSTUDENT.HTML file in the NO_OVERLAY directory. Change "Master" to "Student" in line 10 of the VIEWMASTER.HTML file and then save the file as VIEWSTUDENT.HTML

The VIEWMASTER.HTML and VIEWSTUDENT.HTML files in the NO_OVERLAY directory are now the same as those files found in the OVERLAY directory. The NO_OVERLAY session can be started and should comprise seven slides with a radar-lightning overlay appearing in Slide 6, as is found in the OVERLAY session.

The "overlay_transparent" value for this example is set to "x00000000," which corresponds to black. Black was selected since it is the background color in the lightning images. More information can be found at the bottom of this page under the heading "technical details on overlays."

Step 4: Converting the modified lesson into an executable

General instructions: The user must convert the modified lesson back into an executable since VISIT teletraining lessons are downloaded in this form. The process requires two steps. First the lesson files must be zipped into a ZIP file. Then the ZIP file must be converted into an EXE file. Both steps are performed using an MS-DOS window.

Specific instructions: To zip the suite of lesson files, the user opens an MS-DOS window and changes directory into the NO_OVERLAY directory. The following command line should then be executed:

visitpack_path\infozip\zip -R lesson_name.zip *.*

where "visitpack_path" is the full MS-DOS path to the VISITpack directory, which contains the Lesson Builder and other applications such as ZIP, and "lesson_name.zip" is the name of the ZIP file. Once this command line has been executed, the user should find LESSON_NAME.ZIP within the NO_OVERLAY directory.

To convert the ZIP file into an EXE file, the following command line should be executed from the VISITpack directory:

makeexe NO_OVERLAY_path\lesson_name.zip NO_OVERLAY_path\lesson_name.exe

where "NO_OVERLAY_path" is the full MS-DOS path to the NO_OVERLAY directory. The user should now find the file, LESSON_NAME.EXE, in the NO_OVERLAY directory. The file, LESSON_NAME.ZIP, is not removed in this process.

Your work is complete. The VISIT lesson complete with overlay is now ready for download!

Technical details on overlays

The "background" images are opaque images such as satellite data or fill-contours. The "overlay" images are usually line graphics (data plots, contours, etc.) which have a single color background which is specified as the "overlay_transparent" color. VISITview will reprocess these overlay images after reading them, and makes tranparent the color specified. Thus, when an overlay image is displayed "on top" of a background image, the latter shows through the transparent pixels.

It is important NOT to specify a GIF image with a "transparency value" when you save the original images for your pages. This is _always_ true. The user should, however, note the color levels (RGB) of the "transparent level" that you want to use for the overlay iamge(s). Color levels can be determine using a standard graphics application and use the "magic wand" to find out the 'background' color level.

Return to VISIT Links and Tutorials