--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/resources/templates/index.html Tue Aug 23 15:43:48 2011 -0400
@@ -0,0 +1,130 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Virtual Trainer</title>
+
+ <style type="text/css">
+ #stats li h2 { display: inline }
+ </style>
+
+ <script src="http://www.openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
+ <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js" type="text/javascript"></script>
+
+ <script type="text/javascript">
+ var lat=42.412704
+ var lon=-71.140267
+ var zoom=13
+ var map;
+ function init() {
+ map = new OpenLayers.Map ("map", {
+ controls:[
+ new OpenLayers.Control.Navigation(),
+ new OpenLayers.Control.PanZoomBar(),
+ //new OpenLayers.Control.LayerSwitcher(),
+ //new OpenLayers.Control.Attribution()
+ ],
+ //maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
+ //maxResolution: 156543.0399,
+ //zoom: 2,
+ numZoomLevels: 5,
+ minZoomLevel: 5,
+ //units: 'm',
+ projection: new OpenLayers.Projection("EPSG:900913"),
+ displayProjection: new OpenLayers.Projection("EPSG:4326")
+ } );
+
+ map.addLayer(new OpenLayers.Layer.OSM());
+ // Add the Layer with the GPX Track
+ var lgpx = new OpenLayers.Layer.GML("Aug-10-11.gpx", "Aug-10-11.gpx", {
+ format: OpenLayers.Format.GPX,
+ style: {strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5},
+ projection: new OpenLayers.Projection("EPSG:4326")
+ });
+ map.addLayer(lgpx);
+ var lgpx2 = new OpenLayers.Layer.GML("Jun-26-11.gpx", "Jun-26-11.gpx", {
+ format: OpenLayers.Format.GPX,
+ style: {strokeColor: "blue", strokeWidth: 5, strokeOpacity: 0.5},
+ projection: new OpenLayers.Projection("EPSG:4326")
+ });
+ map.addLayer(lgpx2);
+
+ var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
+ map.setCenter(lonLat, zoom);
+
+ //map.setCenter(new OpenLayers.LonLat(0, 0), 5);
+ //map.zoomToMaxExtent();
+ //var size = new OpenLayers.Size(21, 25);
+ //var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
+ //var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
+ //layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
+ }
+
+ var jsonData;
+ var http = new XMLHttpRequest();
+ http.open('GET','Aug-10-11.json',false);
+ http.onreadystatechange = function () {
+ console.log("state: " + http.readyState);
+ if(http.readyState == 4){
+ //console.log(http.responseText);
+ jsonData = eval('(' + http.responseText + ')');
+ }
+ };
+ http.send(null);
+ console.log(jsonData.events[0].c[0]);
+
+ getBounds(jsonData);
+
+ function getBounds(json) {
+ for (i=0; i < json.events.length; i++) {
+ console.log(json.events[i]);
+ }
+ }
+ </script>
+
+</head>
+<body onload="init();" >
+
+ <div id="history">
+ <h1>History</h1>
+ <ul>
+ <li><a href="#">Workout1</a></li>
+ <li><a href="#">Workout2</a></li>
+ </ul>
+ </div>
+ <div id="stats">
+ <h1>Stats</h1>
+ <ul>
+ <li>
+ <h2>Date</h2>
+ <span>Aug 10 11</span>
+ </li>
+ <li>
+ <h2>Start Time</h2>
+ <span>06:13:35</span>
+ </li>
+ <li>
+ <h2>Elapsed Time</h2>
+ <span>36'16"</span>
+ </li>
+ <li>
+ <h2>Distance</h2>
+ <span>4.13 mile</span>
+ </li>
+ <li>
+ <h2>Avg Pace</h2>
+ <span>8'46" min/mile</span>
+ </li>
+ <li>
+ <h2>Avg Speed</h2>
+ <span>6.84 mph</span>
+ </li>
+ <li>
+ <h2>Ascent/Climb</h2>
+ <span>698 ft</span>
+ </li>
+ </ul>
+ </div>
+ <div id="map" style="width:500px; height:300px"></div>
+</body>
+</html>
\ No newline at end of file