Plot objects in WHS

Plots in WHS

Introduction

Plot is a set of JavaScript objects for manipulating simple graphs represented as an SVG image in WHS. This is how it is used in WHS:

The first H_ tag body of the homework assignment includes a script element like:
```
<script type="text"/javascript" src="myHwSet.js"></script>
```
where the .js file contains the Plot library code as well as a function initHw() which will be called by hw.aspx after the page is initialized.
Each problem that is to include a plot should have an AZ_[x] tag where x is a comma separated list of parameters used to initialize the graph. If this is problem y answer part z, then the results of the graph are returned in a hidden input variable with id hwy-z (or hwy in case z = 1). The parameter x of the AZ_[x] tag is passed to the graph as the values of a hidden input variable with id phwy-z.
The actual graph is created by the initHw() routine. One needs to declare a global variable, e.g. gy_z which will be the JavaScript Plot object for the graph. One needs the following:
1. Create a JavaScript object of type Env which will store information about the size of the graph and its coordinates.
2. Create and assign to gy_z the Plot object. The parameters include the string y-z and the numbers of various geometric objects to be placed in the graph at startup.
3. Assign various event handlers with the call:
```
  gy_z.setHandlers('gy_z');
```
  If a second parameter is specified, it should be a string denoting the initial drag type; the string must be one of: '', 'rotate', 'scale', 'translate', 'glideReflect', 'roll', 'function'.

What remains is to give details of the parameters of these calls.

Creating an Env Object

This is done with a call like:

  env = new Env(ident, width, height, ppu, upt, indVarName, depVarName,
      dWidth, dHeight);

where

ident is the problem, answer part identifier string 'y-z'.
width is the width in pixels of the graph, typically width = 1500.
height is the height in pixels of the graph, typically height = 1200.
ppu is the number of pixels per user space unit, for example ppu = 3. The center of the graph will be the origin of user space.
upt is the number of user space units per (numerical) tickmark label on the coordinate axes, for example upt = 10.
indVarName is the name of the x-axis, e.g. indVarName = 'x'.
depVarName is the name of the y-axis, e.g. depVarName = 'y'.
dWidth is the width in pixels of the window into the graph, typically dWidth = width/3.
dHeight is the height in pixels of the window into the graph, typically dHeight = height/3.

Creating the Plot object

The Plot object is typically created with:

  gy_z = new Plot(env, nConPoints, nConSegments, nConLines, nConCircles,
      nConParabolas, nConTriangles, nConPolygons, nConGraphs, nConImages,
      nConTexts, nPoints, nLines, nCircles, nParabolas, nTriangles, nPolygons,
      nGraphs, nImages, Main, mainFlags, tracking);

The parameters starting with the letter n are the numbers of objects of the various standard types which are to be created when the graph is initialized. Each object requires a certain number of initialization parameters, for example a circle requires the coordinates of its center and of another point on the circumerference. The initialization parameters are read out of the comma separated value of the hidden input variable with id phwy-z. The initialization parameters are grouped by object type and appear in the same order as the parameters in the Plot constructor. For example, the first two parameters initialize the first ConPoint and the last parameters initialize the main object.

If Main is other than null then the graph will contain a main object and Main must be the name of its constructor. The main object is created with a call of the form:

  main = new Main(env, initVals, initBase, mainFlags)

where the second and third parameters specify the initialization parameters. Finally, tracking is a boolean parameter (typically tracking=true) which provides additional on-screen status information as the user interacts with the graph.

The standard objects are of two types: those beginning with Con are passive and typically static objects whereas the others are active, i.e. they can be resized, moved, and serve as templates for the creation of passive clones of themselves. Here are the details for each type:

A ConPoint is a point. It is initialized by its x and y coordinates given in user space units. In general, all the locations will be in user space units, and so one will not mention this for each of the types.
A ConSegment is a line segment which is initialized by four numbers: the x and y coordinates of the first endpoint followed by the x and y coordinates of the second endpoint.
A ConLine is a line on which are defined two points. It is initialized by the x and y coordinates of each of these two points.
A ConCircle is a circle with two points. The first point is the center and the second is any point on the circle. The object is initialized with the x and y coordinates of the first point followed by the x and y coordinates of the second point.
A ConParabola is a parabola with vertical axis together with its vertex and any other point on the parabola. It is initialized by the coordinates of the vertex followed by the coordinates of the second point.
A ConTriangle is a triangle with its three vertices. It is initialized by giving the coordinates of the three points.
A ConPolygon is a closed polygonal arc with n vertices. It is initialized by the number n followed by the coordinates of the vertices in an order that defines the line segments of the polygonal arc. This requires 2n + 1 parameters.
A ConGraph is the graph of a function defined by a formula on some specified interval. The initialization parameters are the end points of the interval, the formula for the function (which is written in normal JavaScript syntax including the various functions in the Math library and other elementary functions). These parameters are used to create the path element which represents the graph. The path is then moved by the affine transformation defined by the final six parameters a, b, c, d, e, f where the transformation is (ax + cy + e, bx + dy + f). Note that this is in the image coordinate system and not in user space units.
A ConImage is a raster image. It is initialized by its width and height (in user space units) and the file path relative to the images subdirectory of the directory tree where the homework is installed. The file should be a .png or .jpg file. After the image is loaded, it is transformed the affine transformation defined by six parameters as for ConGraph objects.
A ConText is static text. The first initialization parameter gives the x and y coordinates of the location of the string, the number of textspan elements and the style string for the text -- these are semicolon separated. The style cannot use have any commas in it. Each tspan is defined by another initialization parameter consisting of the dy vertical offset followed by the text (semicolon separated).
A Point, Line, Circle, Parabola, Triangle, Polygon, and Image are active forms of the corresponding Con objects and are initialized with the same types of parameters as the corresponding Con object. The Graph object is the active equivalent of the ConGraph. It is initialized by the x and y coordinates of a point used to move the graph followed by the same initialization parameters as for a ConGraph.
In addition, these active object types can be function dragged and so they allow for additional optional initialization parameters. If present, the first one will be the number of additional parameters (at least 4) to follow this first one prefixed by the string 'drag:'. The second and third parameters will be the left and right endpoint of the interval over which the functions are defined; these are expressed in user units. The remaining parameters will be the various drag functions expressed as expressions in JavaScript in the variable x. There should be an even number of these and any commas in the expressions need to be escaped with a prepended backslash character. The special function who.getPenSum() can also be used; it gives the right Riemann sum of the of the locations of the dragged control point over all mouse movements since the pen for that control point was last enabled. When the results of work on the graph are written out to the hidden input element with id hwy-z, the drag parameters are also written out for all active objects (originally defined in the problem) for which drag parameters are defined. Since the user may have defined drag functions even though they were not initially defined, the parameters may be present in hwy-z even if they are absent from hwy-z.

The Plot object updates the hidden input variable with id hwy-z. The new value records parameters for the active objects defined at startup in the graph. These parameters are such that if the active objects were initialized with these parameters, they would be in the same locations as they were when hwy-z was updated. Plot problems are graded using the value of this hidden input variable as its input.