Screen design and user interface

Before we delve into the details of how a Pascal program can be modified to make it controllable from a WWW client, let us look into what kind of control panel we can present the user with. All the components of the panel have to conform to the HTML syntax and be built with elements that can be displayed by a regular viewer that can handle forms. Now, even text-oriented viewers can handle forms reasonably well, e.g. the Lynx viewer. One can therefore base a WWW tool on the use of forms without reducing by much the generality of the tool.

One of the things we want the user to be able to do is to select, from the source code of an example program, the variables the contents of which should be displayed, and the instructions on which breakpoints should be set. This is best done with a multiple select widget like:

Mosaic viewer: Select/deselect variables to display and place/remove breakpoints in the code with <Control>/Mouse_Button_1. Use the scrollbar to move in the code.

Currently at line ...

Using a multiple select widget, where only part of the code is showing, but all of it is available on the client side, has two main advantages:

For long programs, the user can see both the code and other components of the panel, for instance, the display of the contents of variables and maybe even the drawing of a complex data structure.
The user can look at the rest of the code, and even put breakpoints in it, without having to query the server for it. All the code is at hand, without taking all the screen space, thus saving user's time and network bandwidth.

Note: The Mosaic viewer does not take into account leading spaces for the contents of the multiple selection widget, even when the spaces are surrounded with <code> </code>. We therefore had to replace every two spaces with underscores to keep the indentation of the code as much as possible.

Visual representation of simple data types

Since we want to allow the user to redefine the value of any data object that is displayed, we have to use input type widgets. These widgets allow the user to see the values and change them without having to send a query to the server for each of them. Try clicking on them to see how they "behave". (Note: we are still experimenting with these representations, details may therefore change between what is shown here and the final version)

boolean and enumerated types are represented as single select widgets of size 1, like: Done Color
integer, character and string types are represented as text input widgets, like: CmptrVisite Name
set types of reasonably small size are represented as multiple select widgets, like: Palette
Pointer types are generally not represented as such. It is the pointed object that is displayed, preceded by the name of the pointer object and ^, unless the pointer is nil. Example:
Current: nil IntPtr^:

Visual representation of data structures

record types are represented as a sequence of their fields between square brackets, and are preceded by the name of the record object, e.g.:
Courant^:[.v:, .Next^:[.v:, .Next: nil]]
array types can potentially have numerous elements, which are not all necessarily of interest to the user. Display of array types is therefore done in two steps. First, when the user selects an array object, the indices of the array are displayed as a multiple select widget, with no preselected item:
NumDOrdre[] (click on the up and down arrows of the scrollbar)
The user can then select the indices for which the value should be displayed, and gets:
NumDOrdre[] NumDOrdre[1]:, NumDOrdre[2]:, NumDOrdre[3]:, NumDOrdre[4]:, NumDOrdre[5]:, NumDOrdre[6]:

Graphical representation of complex data structures

For complex data structures such as lists, trees or graphs, a bitmap image can be prepared, like:

to allow the user to point directly to an element of the structure that should be displayed.

A typical screen could look like this (no action is associated yet with the top row of buttons).

Preparing a program for WWW

This is a section of a copy of the paper World-Wide algorithm animation
by Bertrand Ibrahim, Computer Science Department, University of Geneva, Switzerland.

01 const MaxNbSommets = 10;
02
03 type Lien = ^Sommet;
04 _ _ _Sommet = record
05 _ _ _ _ v: integer; _ {v=numéro du sommet}
06 _ _ _ _ Next: Lien; _ { _par hash-coding}
07 _ _ _ _ end; { Sommet }
08
09 var PremierVoisin:array[1..MaxNbSommets] of Lien;
10 _ _ CmptrVisite : 0..MaxNbSommets; {Nb. sommets déjà visités}
11 _ _ NumDOrdre : array[1..MaxNbSommets] of integer;
12 _ _ Nom : array[1..MaxNbSommets] of char; {noms des sommets}
13 _ _ Pile : array[1..MaxNbSommets] of 1..MaxNbSommets;
14 _ _ SommetDePile : integer;
15 _ _ NbSommets : 0..MaxNbSommets; {nombre de sommets}
16
17 function Visite(IndexSommet:integer) : integer;
18 {retourne le numéro d'ordre du sommet le
19 _plus ancien rencontré dans le cadre du
20 _parcours récursif des successeurs du
21 _sommet dont l'index est passé en param.}
22
23 var Courant: Lien;
24 _ _ Anciennete,LePlusAncien : integer;
25
26 begin { Visite }
27 _ CmptrVisite := CmptrVisite+1;
28 _ NumDOrdre[IndexSommet] := CmptrVisite;
29 _ LePlusAncien := CmptrVisite;
30 _ Pile [SommetDePile] := IndexSommet;
31 _ SommetDePile := SommetDePile+1;
32 _ Courant:= PremierVoisin[IndexSommet];
33
34 _ while Courant <> nil do begin
35
36 _ _ if NumDOrdre[Courant^.v]=0 then begin
37 _ _ _ Anciennete := Visite (Courant^.v);
38 _ _ _ if Anciennete < LePlusAncien then
39 _ _ _ _ LePlusAncien := Anciennete;
40 _ _ _ end { then }
41 _ _ else if NumDOrdre[Courant^.v] < LePlusAncien then
42 _ _ _ LePlusAncien:=NumDOrdre[Courant^.v];
43 _ _ Courant := Courant^.Next;
44 _ _ end; { while }
45
46 _ if LePlusAncien = NumDOrdre[IndexSommet] then begin
47
48 _ _ { on arrive ici s'il n'y a pas eu de
49 _ _ _ changement dans la boucle while, ou
50 _ _ _ si l'on est revenu du traitement
51 _ _ _ récursif des suivants vers le plus
52 _ _ _ ancien }
53
54 _ _ repeat
55 _ _ _ SommetDePile := SommetDePile-1;
56 _ _ _ write (Nom[Pile[SommetDePile]]);
57 _ _ _ NumDOrdre[Pile[SommetDePile]] :=NbSommets+1;
58 _ _ until Pile[SommetDePile]=IndexSommet;
59
60 _ _ writeln;
61 _ _ end; { if }
62
63 _ Visite := LePlusAncien;
64
65 end; { Visite }