Using DHTML for a Simple Web-based Image Analysis Application

1. Scripting Techniques Using DHTML for a Simple Web-based Image Analysis Application • 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. 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. 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 non-professional programmers. HTML files download faster than the Java applet files. 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. 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”