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.

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:

<PARAM name="group" value="test">

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:

<PARAM name="group_suffix" value="(name)">

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:

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

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:

<PARAM name="phrases" value="thunderstorm ,hail ,front,max top">

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:

<PARAM name="font_size" value="18">

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:

<PARAM name="pause" value="200">

<PARAM name="pause_on_first" value="50">

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:

<PARAM name="loop_speed" value="50">

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:

<PARAM name="initial_loop_speeds" value="50, 220, 400, 30...">

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:

<PARAM name="can_fade" value="f,f,f,f,t,f,t,f,f">

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:

<PARAM name="start_looping" value="f,f,t,f,t,t,t,f">

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:

<PARAM name="cursor_position" value="x,x,200&155,x,x">

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:

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

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:

<PARAM name="tearoff" value="always">

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

The applet tag:

<PARAM name="tearoff" value="false">

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:

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:

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:

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:

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:

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.