White Star Static Tracking Page.
We stand on the shoulders of giants with this project. We use the following libraries:
- Jquery (http://jquery.com/)
- HighCharts (http://www.highcharts.com/)
- JSGauge (http://code.google.com/p/jsgauge/)
- OpenLayers (https://github.com/openlayers/openlayers)
- PubNub (http://www.pubnub.com/)
This tracker operates by parsing data from GPX files with proprietary extensions. GPX data contains tracks, elevations, and GPS data from the balloon. Inside each GPX point, there is a WSBML data section containing sensor and status values. WSBML looks like this:
<wsbml:data> <wsbml:sensor type="vspeed" name="vspeed">-2.87783159594</wsbml:sensor> <wsbml:sensor type="temperature" name="internal">-27.6427162671</wsbml:sensor> <wsbml:sensor type="temperature" name="external">-33.8784654118</wsbml:sensor> <wsbml:sensor type="temperature" name="battery">-2.30392671783</wsbml:sensor> <wsbml:sensor type="temperature" name="helium">-29.9931765217</wsbml:sensor> <wsbml:sensor type="humidity" name="humidity">60.7123865001</wsbml:sensor> <wsbml:sensor type="pressure" name="pressure">198.002937666</wsbml:sensor> <wsbml:sensor type="speed" name="speed">42.1712299325</wsbml:sensor> <wsbml:sensor type="cloud" name="cloud">0.430903196869</wsbml:sensor> <wsbml:status name="gps">0</wsbml:status> <wsbml:status name="error">0</wsbml:status> </wsbml:data>
On initial page load, the tracker requests the init.xml file specified in js/wsbdata.js, parsing all of the points into a master list of OpenLayers Geometry Points, and adding sensor data properties to these points. Sensor data is also pushed to each chart, at which point the HighCharts API provides data caching.
The page listens for an incoming message on a PubNub channel, directing the client to retreive an additional GPX file, and parse it in the same way.
This file defines our wsbdata gauge objects, as well as a list of gauges for initialization. Type must match exactly a type in the XML, and trace must match exactly a name in the XML.
This file contains the code for rendering a graph. All the graphs are rendered the same, with floating Y axes and identical styling. Please references the HighCharts Stock API for detail on how to style these objects.
OpenLayers definitions and initialization, this is mostly for namespace cleanup.
Functions for parsing in new data. Generate sensor object generates an object suitable for pushing into graphs. Generate features parses XML into an array of OpenLayers Points. ParseGPXString accepts a GPX DOM object or String Literal, extracts sensor values, updates the map, and pushes values into graphs and gauges.