ARTICLES

Using Virtual Earth to Write a Vista Gadget That Tracks the International Space Station

This is the second part of two articles about writing Vista Gadgets that use Virtual Earth. The first part ("Using Virtual Earth in a Vista Gadget") showed you how to write a Vista Gadget that showed a simple interactive map using Virtual Earth. This second part extends the gadget into something more useful: A Tracker for the International Space Station (ISS).

Download code for this article.

At start up, the gadget automatically downloads the latest orbital parameters from the AmSat website. The map is updated every half second with the ISS’s latest position. The position is tracked with a pushpin shaped like the ISS. The map automatically pans to keep the ISS centered in the map. The user may zoom in or out using "+" and "-" buttons. A "Refresh" button allows the orbital parameters to be refreshed from AmSat. These orbital parameters should only be refreshed every few days -- you do not need to do this if you restart Vista (and hence the gadget) on a daily basis.

Instead of two files, the gadget now contains ten files. One of these is an image: ISS_pin.gif stores the image of the ISS pushpin. The remaining extra files (global.js, graphic_clock.js, math.js, sgp4sdp4.js, time.js, utils.js, view.js ) are all JavaScript files used to calculate the orbit of the ISS. These are based on the orbit calculation routines available from http://www.movingsatellites.com.

This gadget might seem quite a bit more complicated than the previous gadget. In reality it has the same overall structure. For example, here is our new manifest file:

The only change of consequence is that the main HTML source filename has been changed to "ISS_Tracker.html".

In turn, ISS_Tracker.html is based on the HTML file in our previous gadget. However, we need to add code to download the latest orbital data, make calls to the MovingSatellites.com code to calculate new positions, and to automatically update the map.

The gadget uses NORAD "TLE" (Two Line Element) Keplerian orbital parameters. This is a standard way of defining a satellite in Earth orbit in machine readable text form. A typical set of TLE parameters look like this:

ISS
1 25544U 98067A   07055.29853167  .00017324  00000-0  99505-4 0  7052
2 25544 051.6356 327.3797 0020641 244.1596 211.2169 15.78603656472945

The first line specifies the satellite name. The next two lines specify the parameters in a fixed format reminiscent of Fortran. These parameters can be obtained from a number of websites, including NORAD’s, but we shall get ours from the AmSat site. The URL for the file is: http://www.amsat.org/amsat/ftp/keps/current/nasa.all . We fetch this file using the ActiveX Microsoft.XMLHTTP object. Note that this is specific to Microsoft JScript. All Vista gadgets will use Jscript, but the ActiveX control will not necessarily be available in a traditional web browser environment (eg. Mozilla).

So let’s get to ISS_Tracker.html. Here is the beginning. As well as including the Virtual Earth control, we include the orbit calculation JScript files:

Next we get into our main JavaScript code with some global definitions and parameters:

Most of these are probably self explanatory. "map" refers to the Virtual Earth Control. "TLE_Line1" and "TLE_Line2" are used to pass the TLE orbital parameters to the orbit calculation code. "pinSet" is a flag used to monitor whether we already have a pushpin for the ISS. We need to know this when moving the pushpin to a new location.

"UpdatePeriod" is a parameter that defines the time (in milliseconds) between map updates. It is currently set to 500ms (half a second). "url" specifies the URL of the TLE data file. You can change this to a different data provider if you wish. "sSatellite" specifies the name of the required satellite in the TLE data file. Note that the same satellite might have different names in different files. For example, the ISS is still occasionally referred to as "Zarya".

Unfortunately JavaScript has very limited number formatting abilities. Hence we need to define a simple utility to convert floating point numbers into fixed strings with 4 decimal places. This is used when displaying the ISS’s coordinates. Here is the utility:

We fetch the TLE data using the Microsoft.XMLHTTP ActiveX object. This is asynchronous, so we have to define a callback that handles the data when it has been received. This is called stateChange() and is defined as follows:

This function checks to see if the callback represents a successful data fetch. If successful, it then scans through the data looking for a line that matches “sSatellite”. When found, the two lines of the TLE are extracted. The map is then created or refreshed.

The start-up process is controlled by the following two functions:

onPageLoad() is a callback that is called when the gadget is created. Here we simply call getOrbitalElements(). This creates the Microsoft.XMLHTTP ActiveX object to fetch the orbital data. When the data is fetched, the stateChange() callback is called. This then calculates the orbital data and creates the map.

The map is created using the function createMap():

This loads the orbital data into the MovingSatellites.com code, gets the time, and calculates an initial orbital position. The position is stored in m_SatelliteData for convenience. The gadget body tag contains a span tag called “gadgetContent”. This is positioned between the buttons and the map, and displays the ISS’s coordinate position as a line of text. The “gadgetContent.innerText=” performs this display.

We then create a new Virtual Earth Map object (VEMap), and center the map on the ISS’s current position. A pushpin is also created at this position using the ISS_pin.gif image.

The final "setTimeout" line sets a call-back to the ReDisplay() function for a map update. The update interval is set by the UpdatePeriod parameter.

The implementation of ReDisplay() is actually very similar to createMap(). The orbital data does not have to be loaded, and the map does not have to be created. However, the old ISS pushpin does have to be deleted, and the map has to be panned to the new position.

The JavaScript finishes with the three button callbacks. The "+" and "-" zoom buttons are identical in action and implementation as before. However, the new "Refresh" button requires a new call back. This is just as simple, and calls getOrbitalElements() to re-fetch the orbital parameters.

The body section of the gadget is very similar to the previous Virtual Earth example. The body tag itself defines a call-back to onPageLoad(). We also have the two zoom buttons, and an empty div tag to hold the Virtual Earth map. New additions are a third button (“Refresh”) and a span tag to display the ISS’s coordinate position as a line of text.

And that is it! A few simple steps make the Virtual Earth gadget into a useful little tracking tool.

Further Information

The TLE Orbital Parameters: http://en.wikipedia.org/wiki/TLE
AMSAT: http://www.amsat.org/amsat-new/index.php
NASA’s ISS Homepage: http://www.nasa.gov/mission_pages/station/main/index.html
Developing Vista Gadgets: http://microsoftgadgets.com/Sidebar/DevelopmentOverview.aspx

Prior to Winwaed, Richard worked as a software developer working on seismic processing algorithms for the oil exploration industry. He holds geology and geophysics degrees from the University of Cambridge (Churchill College), and the University of Durham; and an interdisciplinary MBA from the University of Dallas.

	MP2Kmag Internet