VISITview HTML Details

updated: 2/8/99

The HTML used for VISITview defines the lesson. In remotely-accessed lessons, the students' Web browser reads this HTML and then downloads and starts a Java applet. In locally-accessed lessons, the students start a Java application right on their desktop which reads the same HTML file to define the information needed to connect everyone together.

Recall that VISITview clients have one of three possible configurations: master, student, or listener. The master configuration is the most complex, the student and listener can easily be created directly from the master HTML, so I recommend starting there.

Here's what the master HTML looks like:

  <HTML> <HEAD> <TITLE>Test of VISITView </TITLE> </HEAD>
  <BODY BGCOLOR=#F0F0F0>
  <center>
  Put any text you want to show up before the applet region here.
  <p>
  <APPLET code="ViewClient.class" width=660 height=560 >
  <PARAM name="Master" value="true">
  <PARAM name="labels" value="(100) National IR/radar Composite,1KM Wisconsin,National Vis,National IR, National Water Vapor, 31 May case">
  <PARAM name="filenames" value="radar,local,vis,ir,wat,kan_4_">
  <PARAM name="number_frames" value="3,4,3,3,3,5">
  <PARAM name="group" value="test">
  </APPLET>
  <p>
  You are connected as a "Master".  This is the 5/13 update.
  <p>
  </center>
  </BODY>
  </HTML>

Here's what it means:

The APPLET tag identifies the Java code to run. The width and height values must provide sufficient space for the images plus the controls. The width should be at least 640; the height should be at least 80 more than the height of the images.

Each of the PARAM statements that follow define values for the various parameters that can be controlled within the applet.

Master and it's value true indicate this is the "master" session; for the "students", use a parameter Student with a value of true. If neither one of these is present, the "viewer" mode is invoked.

labels contains the list of labels (comma separated) for each dataset or page in this lesson. I recommend no more that about 15 characters for each label, as the number of characters impacts the width of the menu selector widget. You may use letters, numbers or parentheses. Do not use commas! Leading or trailing spaces don't matter, so you may (for example, put one label per line to make the file easier to read. Do not use quote marks as part of a label.

filenames contains the "base" filenames for each dataset or page. These "base" filenames are used to construct the actual filenames stored on disk. VISITview generally assumes that a sequence of images is to be used on each page, so it builds the actual disk filename by taking the "base" filename and appending a numeric value starting at zero and increasing by one; alternatively, if you put an asterisk in the "base" filename, VISITview will replace it with the numeric values.

You must name your files accordingly. Even if the page contains only one single file, the naming convention is used.

For example:

PARAM "filenames"	number_frames	Actual name(s) of disk files
`radar`	`4`	`radar0 radar1 radar2 radar3`
`title`	`1`	`title0`
`vis.gif`	`3`	`vis.gif0 vis.gif1 vis.gif2`
`local*.gif`	`3`	`local0.gif local1,gif local2.gif`
`wat*`	`5`	`wat0 wat1 wat2 wat3 wat4`
`myfile.*`	`2`	`myfile.0 myfile.1`

number_frames lists the number of image frames in each dataset or page.

Although the student HTML may be a lot simpler, since the filenames, labels, etc., are not required, it is much easier to just copy the Master HTML file into one with a different name for the students to use and change just one line:

  <PARAM name="Master" value="true">

should be changed to:

  <PARAM name="Student" value="true">

Groups

The applet tag:

specifies that anyone using this .html file will be connected to a VISITview group named "test". If this PARAMeter is omitted from the .html file, then a dialog box will pop up when the master or student starts up the applet. This dialog will ask the user to select an existing group (if any) to join, or to enter the name of a completely new group to start.

Portals (aka Looking Glass)

If you want to imbed a smaller image with the larger one, that will be scrolled around as the pointer is repositioned (the usual application for this is to show a different spectral band), then you may add the following type of HTML to the Master session HTML:

  <PARAM name="portals" value="x,x,wat,x,vis,x">
  <PARAM name="portal_x" value="x,x,0,x,100,x">
  <PARAM name="portal_y" value="x,x,100,x,200,x">
  <PARAM name="portal_height" value="x,x,200,x,200,x">
  <PARAM name="portal_width" value="x,x,200,x,100,x">

Here's what the extra PARAMs mean:

portals identifies the base filename of any image that is to appear as a portal with the corresponding dataset. In this list, as in all others for the portal data, an "x" implies that no portal will appear with the corresponding dataset. The actual filenames on disk will be this base filename followed by digit(s) starting with zero (see rule above for filename formation).
portal_x gives the x-coordinate on the base image of the upper left corner of the portal image. Again, a lower case "x" is used as a place-holder when a page of the lesson does not use portals.
portal_y gives the y-coordinate on the base image of the upper left corner of the portal image.
portal_height gives the height of the portal window. This should always be less than the height of the main window.
portal_width gives the width of the portal window. This should always be less than the width of the main window.

You may have more than one portal per page by using an ampersand (&) to separate the information for each one. For example, to add a second portal to the 3rd lesson page, the HTML from above might then look like:

<PARAM name="portals" value="x,x,wat & radar,x,vis,x">
<PARAM name="portal_x" value="x,x,0 & 300,x,100,x">
<PARAM name="portal_y" value="x,x,100&100,x,200,x">
<PARAM name="portal_height" value="x,x,200&200,x,200,x">
<PARAM name="portal_width" value="x,x,200&200,x,100,x">

This would then add a second portal to the right of the first one, showing images from files beginning with the name "radar". Note that spaces may be used around the individual elements to help with readability. You may define as many portals as desired, but keep in mind that each portal defines a complete set of images, so there may be considerations of download time, as well as real estate.

Finally, please note that all images used in one of these types of displays must be the same size and have the same navigation in order for this portal/scrolling to work properly.

Enhancements

If you want to be able to color enhance images during the lesson, you must define a text file with the conversion information in it. There is a sample file, enh.tab supplied with VISITview that you can model your file after. The numeric entries for each line are:

in-low  in-hi  lo-red  hi-red   lo-green  hi-green   lo-blue  hi-blue

where in- give the source brightness value range (from 0-255) and the lo-/hi- for each color specify the range (from 0-255) for each color to use in the display. After you've created the file you must add one more line to the HTML (this must appear in both the Master and Student HTML files:

  <PARAM name="enhance" value="enh.tab">

(substitute for "enh.tab" the name of the file you created).

Linking to a browser for more information

If you want to have a link from a page within a VISITview lesson to a URL on the Web, and if the participants are all using Windows or Unix, you may employ the URL_list parameter to enumerate complete URL's. For example:

<PARAM name="URL_list" value="x,x,http://www.ssec.wisc.edu/localweather/.weather.html,x,x,x,x,x,x">

The presence of this will cause a new button, labelled Show Text to appear just below the buttons for erasing the graphics. When the student clicks on this button, the default browser (in Windows) or Netscape (in Unix) will either be launched or aimed at the URL named herein.

Transparent level

When setting up images for fading, it is sometimes desirable to tag one level as "transparent". When this is done, any pixels in the image with that level will never appear; instead, they will alway be replaced by the level of the image "behind". During fading, images are always dealt with in pairs. The first image is always faded into the second. The transparent level only refers to pixel values in the first image.

To specify a transparent level, you would use:

<PARAM name="transparent" value="#rrggbb">

where the "rrggbb" value refers to intensity of Red, Green, and Blue. The intensity is given as a hexidecimal value from 00 to FF (the same way it is given for colors in the HTML). Once you specify this value, it is used for the entire lesson whenever a page is faded. By default, transparency is turned off.

TCP/IP Port numbers

The VISITview server will handle multiple independent groups. It uses an assigned TCP/IP port number (1631), but you may change this if for some reason you need to have the server listening on a different port. If you start the server on a non-default port, then you must include a PARAMeter to indicate that in the master and student HTML.

For example:

A word about directories

It seems easiest to keep the gif or jpeg image files for one lesson in a single directory. It is not necessary to have the HTML and class files in that directory; they can be in some parent directory. If that is the case, then the filenames given in the HTML must contain the relative path to the files.

For example, if some of the files in the above example were in the subdirectory lesson3 off the home directory, and others were in the lesson3a directory, the HTML for this PARAM might look like:

  <PARAM name="filenames" value="lesson3/radar,lesson3/local,lesson3a/vis,lesson3/ir,lesson3/wat,lesson3/kan_4_">

However. . . . . if your lesson is to be packaged and distributed to students to use in a local mode, then you should put everything in the same directory.

Return to VISITview home page.