Using DHTML for a Simple Web-based Image Analysis Application Scripting Techniques

advertisement

Using DHTML for a Simple Web-based Image

Analysis Application

James Hays and Christopher D. Wentworth

Department of Physics

Doane College

Crete, Nebraska 68333 jhays@doane.edu or cwentworth@doane.edu

Need For A Simple Image Analysis Tool

We use a web-based homework assignment system.

• Allows implementing a Just-In-Time teaching environment.

• Can give students immediate feedback on practice assignments

• Homework questions can use multimedia resources. Research suggests that the greater the integration of video analysis into a curriculum, the greater the educational impact

(Beichner, R.J., Am J Phys 64 (10), 1272 (1996)). Some of these questions require students to obtain position and time data from images. A simple image analysis tool can be used with these questions.

Using The Image Tool Web Page

A link to the image analysis tool page is provided in the homework question.

Screen shots to the right show how a scale is set and position-time data for an object is taken.

Scripting Techniques

• To obtain mouse position data from an image you must associate an onClick event handler with the image. This can be done by turning the image into an anchor:

<SPAN ID = "PicPos">

<A HREF="#" ONCLICK="locate(event);return false;" ONMOUSEOVER="window.status='If you need help getting started, please click the help button.';return true">

<IMG SRC="images/1/ballDrop.gif" BORDER=0 ALIGN=bottom name="picture">

</A></SPAN>

• Mouse coordinates are obtained as properties of the mouse click event in the programmer defined function “locate(event)”. The method differs between browsers:

• Netscape: pixelCoordinateFromTop = eval(event.pageY); pixelCoordinateFromLeft = eval(event.pageX);

• Internet Explorer: pixelCoordinateFromTop = eval(event.y); pixelCoordinateFromLeft = eval(event.x);

Note that Internet Explorer does not actually pass event objects through the parameter list. You must access properties of the event using the object name “event”. Netscape does pass event object names.

• Scaled data can be placed by the script in a <textarea> form element.

Benefits of DHTML Techniques

A Java port of NIH Image is available and can be run as an applet (go to http://rsb.info.nih.gov/ij/)

, however, the functionality and complexity of NIH Image may be greater than is desirable for use in an introductory physics course. Using DHTML scripting techniques allows the instructor to offer the student a small set of easy to use tools.

Adapting the DHTML scripts is easier than adapting Java programs, at least for nonprofessional programmers.

HTML files download faster than the Java applet files.

Problems With DHTML Techniques

There are still differences in the document object model used by Netscape and Internet

Explorer. This increases the complexity of script programming.

The scripts developed in this project require all frames in a video clip to be split into separate image files with sequential filenames.

Additional Information

Go to http://www.doane.edu/nova

Select “Teacher Resources”

Download