!!! This page is still under construction !!!

How can I program Visualizer ?

You can download a Postscript version of this manual here.

Table of contents

Introduction

You have to describe the tutorial in a description file. This description file must not be called tutorialdescription.dat.

Then you have to use tutorialchecker to generates the file tutorialdescription.dat. The command to type is given below.

tutorialchecker name_of_the_description_file

For Visualizer, the description of a tutorial is composed of three different parts:

Now we will look each of these part in more details.

The anatomy of windows

Before going further it is important to describe a standard Visualizer's window. Such a window is represented below. ++++++++ Every window has a title and a name. The name is used as the id of the window.

The section setting default parameters

This section is called DEFAULTVALUES. Its aim is to declares several parameters that are used by Visualizer to display windows. Parameters modified in this section will be used as default values by Visualizer.

Here is a model for the declaration of this section.

defaultvalues
parameter1 argument1 argument2 ...
parameter2 argument1 argument2 ...
.
.
.
enddefaultvalues

You are not obliged to set all parameters in this section. If you do not declare a parameter Visualizer will take its own default value. Moreover, this section is optional. But if you declare it it must be the first one declared.

The list of the parameters available is given below.

Colors

Colors are defined thanks to their levels of red, green and blue. As a result, a color need exactly three arguments which are all positive integers lower than 256.

The syntax to declare a color is the following:

color red green blue

For example, if you want to set a color to blue, you just have to type:

color 0 0 255

There are numerous colors that can be declared in the DEFAULTVALUES section. Here is the list of these colors:

Dimensions

To be set a dimension needs a singe integer. The syntax is given below.

dimension value

For example, if you want to set a dimension to 10, you just have to type:

dimension 10

In the DEFAULTVALUES section the following dimension can be set:

The main menu

At the beginning of the applet, there is a main menu displayed in the web browser. The main menu is composed of a set of buttons on which the user clicks to navigate in the tutorial. This main menu can be modified. The main menu's section is MAINMENU. You are obliged to declare a main menu. Moreover it must be the first section (if there is no DEFAULTVALUES section) or the second section (if there is a DEFAULTVALUES section).

The simpliest main menu only contains buttons. To declare such a main menu, type:

mainmenu
{ Button's Label 1 & Window's_Name_1 }
{ Button's Label 2 & Window's_Name_2 }
.
.
.
endmainmenu

This example shows how to declare buttons in general. First, the declaration must begins with a '{' and ends with '}'. Each button must be declared on a single line. There are two terms seperated by a '&':

For example, the script written below creates a main menu containing a single button. The label of the button is 'Go to window' and the name of the associated window is 'Window'.

mainmenu
{ Go to window & Window }
endmainmenu

It is also possible to give a title to the main menu. The way to do it is decribed below.

mainmenu
title
body of title's declaration
endtitle
{ Button's Label 1 & Window's_Name_1 }
{ Button's Label 2 & Window's_Name_2 }
.
.
.
endmainmenu

The description of a title will be explained later (see Titles).

Moreover three parameters can be declared to specify the colors of the main menu:

These optional parameters are explained in the section concerning default values.

Windows

Menu

Visualizer has a type of window used to displayed menus. An example of menu is given below. As you can see, a menu looks like the main menu. As a consequence, its declaration is similar to the declaration of the main menu. The name of the section for creating a menu is MENU.

Here is the way to define a simple menu.

menu
name name_of_the_menu
windowtitle Menu 1
{ Button's Label 1 & Window's_Name_1 }
{ Button's Label 2 & Window's_Name_2 }
.
.
.
menu

The only difference with the declaration of the main menu is the presence of two new parameters:

These two parameters must be set. The name of a window is a single word. The title of the window can contain several words.

You can also set parameters' values. The name of the parameters available in this section are:

These optional parameters are explained in the section concerning default values.

Plotting systems

For Visualizer, a plotting system is a set of three windows:

The simpliest declaration for a plotting system is given below.

plottingsystem
name name_of_the_plotting_system
windowtitle Plotting System
xvariable x_variable
yvariable y_variable
equations
declaration of equations
endequations
parameters
declaration of parameters
endparameters

There are two new parameters here:

The name of variable must be a single word.

Moreover, there are two new subsections:

The subsection describing equations must be defined before the subsection describing parameters.

The way to declare equations is simple:

equations
{ equation 1 }
{ equation 2 }
.
.
.
endequations

It is important to know that equation are not checked by tutorialchecker. Consequently, you have to take care of the form of these equations.

The syntax to declare parameters is similar to the syntax used to declare buttons.

parameters
{ name_parameter_1 & unit_parameter_1 }
{ name_parameter_2 & unit_parameter_2 }
.
.
.
endparameters

The name of the parameter and its unit must be single word.

Twelve optional parameters can be set in this section:

These optional parameters are explained in the section concerning default values.

Customizable windows

This type of window is used to design the content of the tutorial. You can put all the elements you want to display. Visualizer has four standard elements:

To declare a customizable window, you just have to type:

window
name name_of_the_window
windowtitle Window 1
decaration of the first element
declaration of the second element
.
.
.
endwindow

The declaration of elements will be explained later.

Five optional parameters can be set here:

These optional parameters are explained in the section concerning default values.

Elements

Titles

The declaration of a title is very simple:

title
{ text of the title }
endtitle

It is possible to define some title's attributes in this section: The default alignement is not centered. The keyword center allows you to center the title.

Visualizer has three titles:

Texts

The model for the declaration of a text is given below:

text
{ line 1 $ }
{ line 2 $ }
.
.
.
endtext

A text line must ends with a '$'.

It is possible to indent a line. To do so, just type the following line:

{ _ 5 content of the line }

An indented line must begin with a '_'. The number following the '_' represents the number of spaces necessary to indent the line. In our example, 5 spaces will be put before the beginning of the line.

It is also possible to declare items. The declaration procedure is given below.

{ @ 5 content of the line }

An item must begin with a '@'. The number following the '@' represents the number of spaces necessary to indent the item. If the line cannot be displayed on a single line, spaces will be put at the beginning of each line. In our example, the numbre of spaces is 5.

Two text's attributes can be set in this section:

Navigators

A navigator is a set of buttons which allows the user to navigate in the tutorial. To declare a navigator, you just have to type:

navigator
{ Button 1 & name_of_the_window_1 }
{ Button 2 & name_of_the_window_2 }
.
.
.
endnavigator

The syntax is the same as the syntax used to define main menu's buttons.

Two optional parameters can be set in this section:

Pictures

The declaration of a picture is given below.

picture
imagename name_of_the_image
imagewidth width
imageheight height
endpicture

The image must be a GIF image. The name of the image must be a single word and have a GIF extension (.gif).

It is possible to give a number and a caption to the image. If you want to add a caption and a number in our previous example, you just have to type:

picture
imagename name_of_the_image
imagewidth width
imageheight height
figurenumber Figure 1
{ Caption }
endpicture

The keyword figurenumber sets the number of the image. The caption and the number of the image must be declared on a single line.

Example

Here is the complete tutorial description for my example.

Last Revision July 10, 1996
http://www.jwave.vt.edu/javaprj/viscprj/visualizer/documentation/language.html