Whiteboard and Image Display Applet

CSE Home

About Us

Search

Contact Info

Overview:

We use a variety of tools during lectures, demos and events to capture timed supporting multimedia from various sources.  These sources typically include PowerPoint slideshows, interactions with a SmartBoard (tm) electronic whiteboard, and arbitrary interactions with computer software. Once we have collected and processed this data, and prepared the archived stream file (WMV file), the next step is to build a web interface that integrates and synchronizes the media. 

This interface consists of a piece of CGI-generated html which embeds the Windows Media Player and a Java applet, and includes some simple Javascript "glue" to tie the Media Player and the applet together.  The job of the applet is to manage and update a graphical display area so that it always contains the supporting multimedia which is appropriate, given the user's current position in the archived stream.  This whiteboard and image display applet is the subject of this page.  See the Whiteboard "Hello World"  page for a sample of the applet in action. 

 

Download Runtime

Download Source

Basic Operation:

The applet consists of four classes packaged in a Java archive (jar) file.  The applet class is "WBClient.class", and the archive is named "WBClient.jar".   The html required to embed the applet in a web page looks like:

   <APPLET CODE=WBClient.class
        ARCHIVE=WBClient.jar
        CODEBASE=/path/to/jar/file/
        NAME=WBClient
        ID=WBClient
        WIDTH  = 640
        HEIGHT = 480>
  <PARAM NAME=WBDataURL VALUE="http://your.web.server/path/to/whiteboard/data/">
  <PARAM NAME=InitialSlideURL VALUE="http://your.web.server/path/to/initial/image.jpg">
  </APPLET>

Parameters:  Both parameters are optional.  WBDataURL indicates a URL path to the directory containing the data record of a whiteboard interaction as described below.  This data would typically be collected and produced using the whiteboard logging application and related tools . InitialSlideURL is the image to be displayed right away when the applet loads.  The URLs may be specified as absolute or relative.  If relative, the URL should be relative to the html file that embeds the applet, not necessarily to the applet code itself.  Due to various constraints imposed by the java security model, running the applet on the local machine is problematic, so local file URLs are currently not supported.

Public Methods: To allow the applet to keep its display in sync with a Windows Media stream, there are a few methods that should be called from JavaScript in the embedding html.  See the sample in the Runtime download for more details.  Review the Windows Media Player SDK for full documentation about the Windows Media Player events.  The SDK can be downloaded from the Microsoft Windows Media website.  The public methods supported by the applet are:

• void WMPPosChange(int newPosition, String newURL).  This should be called whenever the Windows Media Player triggers a position change event.  The method causes the applet to rebuild its display area appropriately for the new position.
• void WMPPlayStateChange(int oldstate, int newstate, int newpos, String newurl).  This should be called when the Windows Media Player triggers a playstate change event.  The only changes the applet cares about are changes from fast forward or rewind to play or stop, but it doesn't hurt anything to call for all playstate change events.
• void WMPPositionTrack(int newpos). This should be called with a timer every few seconds or so to tell the applet the current Windows Media Player position.  If there is whiteboard data associated with the program, calling this method causes the applet to update the whiteboard display at your preferred frequency.  (If there is no whiteboard data, then it's not necessary to call this method, but the overhead is low in any case).
• void WMPScriptCommand(String newslide).  This should be called when the Windows Media Player triggers a script command event where the script command type is "URL".  It will cause the applet to update its display with the new URL.

Images sent via ScriptCommands: If script commands referring to images are embedded in the media, they can be caught by JavaScript handlers, rewritten as necessary and passed on to the applet for display.  See the sample in the runtime download for details.  Note that the Java security model does not permit the display of images that are not stored on the same web server as the applet itself.

Whiteboard data:  The whiteboard data can be conveniently collected from a SmartBoard (tm), and prepared using the Whiteboard Logging and Post-Production tools .  See that section for more details about the data format.  When the applet loads, it looks for a file called "WBIndex.txt" located at the url specified by the parameter "WBDataURL."    If the file is not found, or if the WBDataURL parameter is not specified, the applet carries on, assuming it will only display images. 

The format of the WBIndex.txt file is very simple.  Each line represents a comment, a whiteboard stroke, a clear screen event, a gained focus, or a lost focus event.  Comments begin with the '#' symbol.  They are ignored by the applet.  Likewise, malformed or blank lines are ignored.  The four meaningful types of lines each consist of two tokens.  The first token may be an integer representing a stroke ID, or a keyword {clearscreen, gotfocus, lostfocus} (case insensitive).  The second token represents a timepoint in the archived stream at which that event should be carried out.  The lines are assumed to be ordered chronologically.

For each stroke ID found in WBIndex.txt, there should be another file, also in the directory indicated by WBDataURL, called 'N.txt' (where N is the integer stroke ID).   These files contain the details which permit the applet to draw a stroke.  Information included in stroke files includes whether the stroke is a pen or eraser, what color the stroke is, how thick the pen is, what are the dimensions of the eraser, and what are the coordinates of the stroke.

All stroke data is assumed to have coordinates scaled for 640x480.  If the applet is scaled differently, coordinate data will be modified as necessary.

Return to Tools Index

	Department of Computer Science & Engineering University of Washington Box 352350 Seattle, WA  98195-2350 (206) 543-1695 voice, (206) 543-2969 FAX [comments to E-mail the page owner]