Track spatial objects with an Ajax-driven radar screen

Level: Intermediate

Nicholas Chase (ibmquestions@nicholaschase.com), Freelance Writer

17 Jun 2008

	Register now or sign in using your IBM ID and password.

Maybe you're trying to keep track of the traffic waiting for you on the commute home, or perhaps you're tracking the objects and people floating around Second Life or another virtual world. Wouldn't it be nice if you could track that kind of thing right from your browser? This tutorial shows you how to use Ajax to create an animated, self-updating radar screen.

Objectives

• Send Second Life tracking data to an external source via HTTP
  
  
• Track semi-persistent data using a Java servlet
  
  
• Specify objects using JavaScript Object Notation (JSON)
  
  
• Create positioned objects using JavaScript
  
  
• Use the Prototype library to handle Ajax requests
  
  
• Use the Prototype library to create repeating animations
  
  
• Detect proximity
  
  
• Use JavaScript to play sounds in the browser
  
  
• Dynamically display textual information on the page
  

Prerequisites

System requirements

To follow along with this tutorial, you need to have the following applications downloaded and installed:

• A JavaScript-capable browser, such as Mozilla Firefox: The code in this tutorial has been tested with Firefox 2.0.0.11 and Microsoft® Internet Explorer 7. (Though it looks much nicer in Firefox.)
• The Prototype JavaScript library: The Prototype library makes many JavaScript-based tasks easier.
• Soundmanager 2: Playing sound in the browser can be a tricky, platform-dependent affair, but Soundmanager makes it simple by encapsulating the functionality into a JavaScript-accessible Flash movie.
• The Macromedia Flash plug-in: Sound is optional for this tutorial, but if you want to actually hear it, you'll need to have Flash enabled in your browser.
• An MP3 file for your sound: If you don't have one handy, you can use the beep.mp3 file in the source code for this tutorial.
• An HTTP-accessible data server: In this case, we're using servlets with the Apache Tomcat servlet engine. You can just as easily use a PHP file or some other method of saving and serving the data, but you must be able to host your HTML file on the same server, for security reasons.
• A data source: I'm using a Second Life script, which you can find in the source code for this tutorial. You can use any data source, however.

Duration

1 hour

Formats

Share this.... Digg this story del.icio.us Slashdot it!

Back to top