This is the second part of two articles about writing Vista Gadgets that use Virtual Earth. The first part showed you how to write a Windows Vista Gadget that showed a simple interactive map using Virtual Earth. This second part extends the gadget into something more useful: A real time tracker for the International Space Station (ISS). It is based on an earlier article published at the MP2K Magazine, but has been updated for Virtual Earth v6.2 and Julian Date Epoch 9. The orbital data source has also been changed to use Celestrak, which is updated daily.

At start up, the gadget automatically downloads the latest orbital parameters from Celestrak. 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.

Writing the Vista Gadget

The gadget source code has been expanded and now includes 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, but some bug fixes have been applied.

This gadget may seem as if it is considerably more complicated that the previous gadget. In reality it has the same overall structure. For example, here is our new manifest file:

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2009/ISS/gadget_ISS.xml)

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 orbital data is specified using NORAD "TLE" (Two Line Element) Keplerian orbital parameters. This is a standard way of defining a satellite in Earth orbit in a machine-readable text form. A typical set of TLE parameters look like this:

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2009/ISS/tle.txt)

The first line specifies the satellite name. The next two lines specify the actual parameters in a fixed format reminiscent of Fortran. These parameters can be obtained from a number of websites, including NORAD, Amsat, and Celestrak. The Celestrak ISS URL is: http://celestrak.com/NORAD/elements/stations.txt. We fetch this file using the ActiveX MSXML2.XMLHTTP.6.0 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). This object calls the stateChange() function to process the file after it has been read. This searches for the required TLE definition and starts the orbit calculation.

So let's get to the main ISS_Tracker.html gadget file:

ERROR [include_code_listing plugin]: File Not Found (/usr/www/users/winwaed/geowebguru/img/2009/ISS/ISS_Tracker.html)

This starts by including the Virtual Earth control and the orbit calculation JScript files, followed by some global definitions an parameters.

JavaScript has poor support for formatting numbers as strings, so we define FloatToString() to convert numbers (eg. coordinates) to strings with a maximum of four decimal places.

The actual map is created and calculated with 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 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 have made the Virtual Earth gadget into a useful little tracking tool.

The complete gadget including source code can be download here (31KB).