Transcript No Slide Title

Using DHTML for a Simple Web-based Image
Analysis Application
James Hays and Christopher D. Wentworth
Department of Physics
Doane College
Crete, Nebraska 68333
[email protected] or [email protected]
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”