Program Code Visualisation

In teaching programming classes, it is often useful to illustrate the operation of program examples using diagrams representing data structures and variable values. This applet permits such diagrams to be inserted in web pages. The student can step backward and forward through the code, and run it as an animation, observing the variables change as the program proceeds.

Example

A particular problem in teaching the C language is in explaining pointer variables. Students easily become confused when coming across the idea of a pointer for the first time, and especially in the C, it is difficult to recover from falling behind at this stage when the course proceeds to more complex data structures.

It is also particularly difficult to explain how programs using pointers run without resort to particularly inventive use of classroom media. This is an ideal application for the CodeVisualiser.

The example above presents a non-optimised version of the standard library string copy routine. It illustrates the following properties of the applet:

The program proceeds through the code in a non-sequential manner;
The panel on the left displays the program listing which scrolls automatically to keep the current line in view;
For each state in the program run, the panel on the bottom right displays a comment, and the panel on the top right displays the relevant variables.
The student can step backward or forward through the program one state at a time, at their own pace, or run the program from beginning to end using the run/pause button.

To get the above applet to display you need three components: the HTML in the web file itself; the listing file; and the trace file.

The HTML file

Although the applet tag is deprecated in the HTML4 standard, nevertheless, at the time of writing, most browsers seem not properly to support the replacement using the object tag. An example applet inclusion is as follows:


		<applet code=CodeVisualiser.class width=600 height=300>

		    <param name=archive value=visualiser.jar>

		    <param name=program value="strcpy.pgm">

		    <param name=trace value="strcpy.trace">

		    <param name=tick value=300>

		    <param name=state value=13>

		</applet>

The Listing File

The listing file, default extension .pgm, contains the text displayed in the listing panel (without the line numbers). Its name is passed to the applet using the program parameter.

The Trace File

The trace file, default extension .trace, contains information about how the program runs. It consists of several blocks of information each containing the line number in the listing, a comment, and zero or more variables to be displayed in the variable watch window. The name of the file can be specified in the trace parameter passed to the applet; if this is omitted the listing file name with any trailing .pgm removed is used as the base-name, to which the extension .trace is added.

An example block is shown below:


		9

		So the loop terminates.

		source:50,50,h:n,from:d,'H':d,'i':d,'\0'

		to:0,5,h,source,0,SE,0,NE:n,to:d,'H':d,'i':d,'\0'

		ptr1:0,15,h,to,3,S,1,N:n,s1:d,to,3,S

		ptr2:0,-15,h,source,3,N,1,S:n,s2:d,source,3,N


	
	  This block indicates that line 9 of the listing should be
	  emphasised. The comment on the next line is displayed in the
	  box of the bottom-right of the applet.
	
	
	  Four variables are displayed in the watch-box. Take the variable
	  called ptr2 as an example. It is positioned at offset 0,-15
	  relative to the variable called source, and it is displayed
	  horizontally. The position is relative to source's third cell,
	  the middle of the top side (North). This is positioned at the
	  given offset from cell 1, middle of the bottom side (South).
	
	
	  There follows a description of two cells. The first is a "name"
	  cell (displayed with light grey background) and has the text
	  "s2" as its contents. The second is a data cell (white
	  background) and has an arrow pointing at the North side of the
	  third cell of the variable source.
	
	
	  Full documentation of the syntax of this file is to be found in
	  the supplied example.