VISITview HTML Details

updated: 11/14/2005

Please note: normally there is no need to edit the HTML files (viewmaster.html, viewstudent.html, viewlesson.html) for lessons created with the VISITview Lesson Builder.

It is important that you know that lesson files created by the VISITview Lesson Builder contain several additional HTML tags. These tags are used to help the Builder maintain the links between the image files and pages, overlays and portals. Do NOT alter the information in these tags!

If a tag is not listed on this page as

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. For auto-playback files through web browsers, use a parameter Player. If none 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 or quote marks! 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.

There is a variant of this that is permitted when using the VisitRemote or pre-loaded (that is, non-browser) client -- you may specify the image filename as URL, complete with a list of string substiutions. Please refer to this document for details.

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 viewstudent.html file may be a lot simpler, since the filenames, labels, etc., are not required, it is usually 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.

The applet tag:

specifies that whenever a group name is typed in (see above), the suffix '(name)' will be appended to the group name. This parameter can be used to keep collaboration groups more clearly separated.

User Identification

The applet tag:

specifies that when the VISITview client starts up, it will open a small window to require the student to enter a name or some other identification. (This same window would appear if this student requested a "chat" and had not previously registered.) The advantage to this is that it makes identifying students easier when the "stat" button or "page quiz" are used.

Pre-defined phrases

The applet tag:

specifies a pre-defined list of phrases that can be used to seed the ALT+T (write text on screen) mode during a lesson. This is a comma-separated list (no other punctuation allowed). Using the ALT+O (letter oh) during the lesson will pop-up a window with the list of phrases in it; clicking on one of them will select it and then start the ALT+T mode.

Setting a different font size for text annotations

The applet tag:

specifies that an 18 point font will be used for the annotation text (ALT+T) for all pages during the lesson.

Alternatively, you may specify individual sizes either in the phrases (above) or as you are typing, by preceding the text with the font size in brackets. For example: [30]Hail would cause this text to be rendered in 30pt font when it is displayed on everyone's screens (it will show up in the default font size as you are typing, however).

Pausing animations on first and/or last frames

The applet tags:

specify that all animations will have a 200ms delay added to the dwell rate of the last frame, and a 50ms delay added to the dwell of the first frame. The default for both of these is zero.

Default initial looping speed(s)

The applet tag:

will cause the initial animation rate of any page with a loop to be set to 50. The actual dwell rate is (430 - value) in ms. (So, 380ms dwell on each frame, in this case.) The default value is 200 (that is, a 230ms dwell on each frame).

As an alternative, you may also specify the initial looping speeds to be different for each page. The applet tag:

will cause the initial looping speed on page 1 to be 50, on the second page to be 220, etc. The units of these values is the same as for the loop_speed parameter, above.

Only one of the above loop-speed-setting tags should be used!

Making the page(s) "fadable"

The applet tag:

specifies whether each page can be 'faded' or not. Caution: when a 'fade' is done, 10 images are generated between each frame of the page. Thus, if you have 4 frames on a page, 30 images are generated to accomplish the fading. If this tag is omitted, the default is that only pages with fewer than 4 frames may be faded. A value of 'f' means cannot be faded, whereas a value of 't' means can be faded.

Initial looping state

The applet tag:

specifies for each page in the lesson whether a multi-framed page should start animating automatically or not. A value of 'f' means not initially looping, while a value of 't' means initially looping.

Initial position of Big Red Pointer

The applet tag:

specifies that when the 3rd page of this lesson is loaded for the first time, the Big Red Pointer should be positioned at x=200 and y=155 (or 200 pixels from the left and 155 lines from the top of the image). You must have one comma-separated item per page to use this function. The default value of "x" means do not change th position of the BRP when loading this page. If you do not need this feature, simply omit the "cursor_position" parameter altogether.

Instead of an (x,y) coordinate, you may also use the keyword "OFF" to indicate that when this page is loaded, the BRP should be turned off. The BRP is turned back on again automatically whenever someone repositions it by clicking the mouse button within the image.

Tear-off control panel

The applet tag:

specifies that the control panel may be torn off by the user by clicking on the green bar. A separate window will pop-up with the controls. If this window is closed, the controls will be re-attached to the main display.

The applet tag:

specifies that the control panel will always be in a separate window.

The applet tag:

specifies that the control panel will always be in attached to the main window.

Note that whenever the controls are in a separate window, a right mouse button click or pressing ALT+M will bring the control panel to the top.

Page Quiz (aka responder)

This function is activated by the presence of a quiz.txt file. Details are presented on this page.

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.

Note: if the portal_height and the portal_width values are identical to the size of the image(s) you specified, then these portals will not be "roamable", that is when you move the Big Red Pointer around, the portal image(s) will not be repositioned as they normally would. This is a special case. 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.

Extra portal-related parameters

<PARAM name="roam_portal" value="true">
The 'true' value of this tag requires that portal roaming can only take place by the user doing the Shift + drag operation. Simple point-and-click of the Big Red Pointer will not re-located the portal image position.

<PARAM name="zoom_portal" value="true">
The 'true' value of this tag will enable portal zooming along with the normal zooming of the main image.

<PARAM name="supress_portal_cursor" value="true">
The 'true' value of this tag will supress the display of the "little" Red Pointer in the portal(s). The keyboard Alt + K can always be used to toggle this value, however.

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,desc.au,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.

On page 3, in the above example, the URL at www.ssec.wisc.edu will pop up in a browser window if the user clicks the Show Text button. On page 6, however, if they click on the button the audio clip in the file "desc.au" will be played. Audio clips must be in .AU format and the file(s) should reside in the same directory as images (or include a subdirectory name).

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:

<PARAM name="port" value="1631">

Note that port 1631 has been registered for use by VISITview.

Stand-alone audio playback through a browser

The applet tag:

 <PARAM name="do_local_server" value="yes">

specifies that the VISITview client (ViewClient) shall start up, and link to, a local VISITview server. This mode should only be used for stand-alone audio playback through a web browser! You must also use the parameter "Player" (see above) in place of "Master" in the viewmaster.html file (or, preferably, a copy of that file).

You should also remove the <param name="register"...> tag in the HTML if it is specified. Finally, if this is to be used only for web browser-based playback you can also remove the jre sub-directory to save space.

(Note: This capability was introduced in the April, 2002 release of VISITview and can only be used with lessons packaged with the VISITview code after that release. Otherwise, you will need to update the VISITview code using the visitlessoncode.zip file.)

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.

The convenience batch files

When VISITview clients are run in the application mode, that is when all the lesson files have been downloaded to the client machine and the server is used only for control communication, the Lesson Builder provides for DOS batch files that may be used to start up the client session.

The visitpack.zip file comes with one such as a template for you to use for manual editting, if needed. The form of the command to start up the client session is:

.\jre\bin\java -Xmx256m -cp .\ VisitFrame viewmaster.html www.ssec.wisc.edu

where 'viewmaster.html' is the name of the file containing the appropriate HTML, and 'www.ssec.wisc.edu' is the hostname of the server to attach to. If you use the Lesson Builder, you will find a few of these batch files generated -- pairs for instructor/master and students for each of the servers you disignate, plus the visitlocal.bat which is used for stand-alone lessons. In this latter file, there is also a DOS start command that invokes the VISITview server running in local mode. You may also note that in this case, an extra paramter is appended to the client start-up ("44444") -- this is the local TCP/IP port number to use for communication between the client and server on the local machine.

Return to VISITview home page.