CS142 Project #6: Events and Javascript
Problem 1: Photo Tagging (40 points)
In this project you will extend your work on Project #5 by implementing a
tagging mechanism that allows users to identify people in the photos
of your photo-sharing Web site. Here is a rough
sketch of the way this new feature should behave:
- Users can tag a photo by selecting a rectangular
region of the photo and identifying the person in the
selected region.
- The rectangle is selected by dragging the mouse across
the photo. As the user drags out the region there
should be visual feedback on the screen showing the current
rectangle. The user must be able to drag in any
direction, and the feedback must remain visible after the drag
is complete.
- If the user doesn't like the rectangle they have selected,
they can select another to replace it.
- The user is selected using a drop-down menu
(
<select> element) displaying the first and
last names of all the users currently registered.
- The user can submit this information, which causes the
tag to be recorded in the database.
- There can be multiple tags for a single photo, each
with its own rectangle and user names.
- The application must provide a mechanism for
displaying a photo with all of its tags: the rectangle
for each tag should be displayed over the photo, and
when the mouse moves over the rectangle the first and last
names of the user should be displayed on the page.
To get started, copy the directory tree for Project #5 to a new
directory named project6. Do all of your work for this
project in the new directory.
Is up to you to choose how to implement photo tagging in your
application, based on the description above. You can decide
whether to use existing pages or add new ones, how to structure
any forms that are needed, and so on.
However, you must implement and use a Javascript "class" named
Tagger to select the photo region:
- To use the class, invoke the constructor method with six
arguments containing HTML element ids. The first id is for
the element in which dragging will occur (the feedback
rectangle will be displayed over this element). The second
id is for the feedback
<div>, which must
be a child of the first id's element; the Tagger class will
reposition this element during drags, and you can set CSS
for this element to control the appearance of the feedback.
The last four ids are for hidden form elements that will be
filled in by the Tagger class.
- Once you have created a Tagger object, the Tagger class
implements the drag mechanism, displaying and moving
the feedback
<div> in response to mouse
actions, and filling in the four hidden form elements with
the x and y coordinates, width, and height of the selected
region.
- All of the dragging functions must be encapsulated inside
the Tagger methods (functions declared in the Tagger prototype
object): you must not use any global
functions except for the Tagger constructor function and all data
must be stored in the object returned by the Tagger constructor.
- The constructor parameters described above should provide all
the information needed for implementing the Tagger class, but you
may add additional constructor parameters if your implementation
of the Tagger class requires additional information.
- The idea behind these restrictions is for you to create a
reusable dragging mechanism that could potentially be used
for other purposes besides this one. The Tagger implementation
should not depend on information that is specific to the
photo-tagging application; for example, it should not
reference any HTML elements except those passed in explicitly
and/or elements created by the Tagger class (if any).
Additional Requirements, Hints, etc.
- You will need to modify the database schema for this
project, since the schema from Project #5 does not support tags. You
must use the Rails migration mechanism to make your schema changes.
Note: don't use
x and y as
attribute names in your models: y is a predefined
method in ActiveRecord and you will see weird errors if you use
it as an attribute name.
- If you want to position one
<div>
element at particular pixel coordinates inside another
<div>, you must set the position
style attribute in the parent <div> to
"relative", and you must set the position
style attribute in the child <div> to
"absolute". Setting the position of the
parent creates a new "positioning context" in the parent,
so that the child's coordinates are interpreted relative to
the parent. If you don't set the position of
the parent than the coordinates of the child will be interpreted
relative to the page, not the parent <div>;
this will probably be much less convenient.
For more information on positioning contexts and the
position style attribute, see Online Section V of
the book Dynamic HTML, available at
http://cdn.oreilly.com/books/9780596527402/9780596527402_supp.pdf.
- For some HTML elements the browser provides default
event handlers. If you want to disable the default handler
for an event, create your own handler for the event and
return
false from that handler.
- Your forms must contain enough
labels and other text so that an average Stanford student
or professor can understand how to use them.
Deliverables
Use the standard class submission mechanism
to submit the entire project6 directory. As always,
your HTML files should pass XHTML validation.