Page HTML: The Data

<img id=background src='stars.png' class=invisible></img>
<span id="limit" xmax='7.5' ymax='7.5' xmin='-7.5' ymin='-7.5'></span>
<span id=data type=circle r='7.5' x=0 y=0 color="#00ff00"></span>
<img id=water src='water.png' class=invisible></img>
<span id=data type=circle r='4' rx='1.5' x=0 y=0 name=Lake display=true graph="water"></span>
<span id=data type=point x=0 y='-7.5' xoff=0 yoff='5' display=true name=Entrance></span>
<span id=data type=point x='-.1' y='-7.45' xoff=5 yoff='-15' display=true name="Paul's cabin"></span>
<span id=data type=point x='-.15' y='-7.45' xoff=10 yoff=0 display=true name="Observation Room"></span>

img.invisible { display: none }

These elements are placed at the beginning of the body element. There are two images used, stars.png and water.png. These are loaded into the data set with the img element. Since I didn't want them to display at the position they were loaded into, they are loaded as invisible, and id's are given. These will be referenced later when the canvas is drawn.

There is one span element which has an id "limit." This specifies the minimum and maximum values for the x and y parameters. Note that I use some world coordinates to specify distances and position. For this data, the world coordinates are in kilometers, so all distances are given in kilometers. The values are given as made up attributes to the span. (Since HTML specifies that any unknown element is ignored, this shouldn't make any difference to the displayed page.)

Similarly, data is required to describe the image. Each span is marked by the id "data" so that I can scan through it easily later. The "type" attribute is used to tell what will be drawn. I have implemented only two types: "circle" and "point." The rest of the attributes depend on the type of data.

For circle, the attributes are the radius, the center point, and either an image id or a color. It is possible to specify an x and a y radius independent of each other (as in the "lake"). I added a "display" attribute which would allow me to turn parts of the image, but currently that is not implemented. The name gives the name of the circle.

For the point, the attributes are the coordinates of the point, an offset value (this is given in pixels – not world coordinates), the unused display, and the name. The coordinates are the point that is marked. The offset it the offset from the point to the display of the name. A line will be drawn between the name and the point.

This data describes the image exactly, and is interpreted by the javascript code.