CPSC 120, Fall 2014
Lab 9: Basic Form Elements

In this lab, you will add some basic form elements to a web page, and use them to control features of a simple sketch program. The program allows the user to sketch curves on a canvas using the mouse. You will use <select> menus and radio buttons to control color and line width. You will use a checkbox to turn a "symmetry" feature on and off.

To begin the lab, copy the folder /classes/cs120/lab9 into your cs120 folder. The file sketch.html already lets the user sketch curves using thin black lines. You will add features to your copy of that file. All of the work that you do for this lab will be in sketch.html.

This lab is due, as usual, at 10:00 AM next Friday, November 7.

Part 1: Add the Form Elements

Open the file sketch.html for editing. Find the div that contains the headline <h3>Controls</h3>. You should add the form elements to that div, after the headline. Use <p> and <br> to space the elements out nicely, and add labels to make the meaning of each element clear. The picture below shows what the page will look like with the controls. You should follow this model pretty closely. For this lab, you should not be creative.

Here is what you need to add:

The selection of colors and line widths is up to you. Here are some things to keep in mind.

Part 2: Apply Color and Line Width

Once you have the controls on the page, you want to apply them to the user's drawing. First, you can set the drawing color and line width. Note that changing the setting of one of the <select> items has no immediate visible effect in this program. The changed setting won't be used until the user draws something.

The place to set the color and line width is in doMouseDown, just as the user starts drawing a curve. You just have to assign values to the variables graphics.strokeStyle and graphics.lineWidth. The values that you need come from the <select> elements.

Part 3: Clearing the Canvas

When the user clicks the Clear button, you should draw a rectangle to fill the canvas with the selected clear color. You will need to define a function to do that. Recall that you can test whether a radio button is selected by checking whether the value of its checked property is true.

Part 4: Implement Symmetry

Finally, you should implement the symmetry feature. Symmetry is attractive, and the ability to make perfectly symmetric pictures adds some interest to the program. Furthermore, it's not hard to do. To get symmetry, each time you stroke a line, you should also stroke the three "symmetric" lines that are obtained by reflecting the original line horizontally and vertically. This picture shows how to get the coordinates that you need for the reflected lines. If (x,y) are the coordinates for the original point, then the coordinates for the three reflected points are as shown, assuming that the canvas is 600-by-600.

You should draw the extra, symmetric lines only when the symmetry checkbox is checked. When the box is not checked, you should just draw the original line. As with radio buttons, you can test whether a checkbox is checked by looking at the value of its checked property.