--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/main/resources/scripts/map.js Thu Aug 25 13:13:58 2011 -0400
@@ -0,0 +1,105 @@
+var OLMap = {
+ map : null,
+ createMap : function() {
+ OLMap.map = new OpenLayers.Map ({
+ div : "map",
+ controls:[
+ new OpenLayers.Control.Navigation(),
+ new OpenLayers.Control.PanZoom(),
+ ],
+ //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"),
+ //baseLayer: new OpenLayers.Layer.OSM()
+ });
+ var baseLayer = new OpenLayers.Layer.OSM();
+ OLMap.map.addLayer(baseLayer);
+ OLMap.map.setBaseLayer(baseLayer);
+ },
+ addTrail : function(uri, color) {
+ var layer = new OpenLayers.Layer.GML(uri, uri, {
+ format: OpenLayers.Format.GPX,
+ style: {strokeColor: color, strokeWidth: 5, strokeOpacity: 0.5},
+ projection: new OpenLayers.Projection("EPSG:4326")
+ });
+ OLMap.map.addLayer(layer);
+ },
+ centerMap : function(events) {
+ var bounds = OLMap.getBounds(events);
+ var lonLat = bounds.getCenterLonLat().transform(new OpenLayers.Projection("EPSG:4326"), OLMap.map.getProjectionObject());
+ OLMap.map.setCenter(lonLat, OLMap.map.getZoomForExtent(bounds.transform(new OpenLayers.Projection("EPSG:4326"), OLMap.map.getProjectionObject())));
+ },
+ getBounds : function(events) {
+ var minLat = events[0].c[0];
+ var maxLat = minLat;
+ var minLong = events[0].c[1];
+ var maxLong = minLong;
+ for (i=1; i < events.length; i++) {
+ if ((lat = events[i].c[0]) < minLat) {
+ minLat = lat;
+ continue;
+ } if ((lat = events[i].c[0]) > maxLat) {
+ maxLat = lat;
+ continue;
+ } if ((longi = events[i].c[1]) < minLong) {
+ minLong = longi;
+ continue;
+ } if ((longi = events[i].c[1]) > maxLong) {
+ maxLong = longi;
+ continue;
+ }
+ }
+ bounds = new OpenLayers.Bounds();
+ bounds.extend(new OpenLayers.LonLat(minLong,minLat));
+ bounds.extend(new OpenLayers.LonLat(maxLong,maxLat));
+ return bounds;
+ },
+ clearMap : function() {
+ var gmlLayers = OLMap.map.getLayersByClass('OpenLayers.Layer.GML');
+ for (var i=0; i < gmlLayers.length; i++) {
+ gmlLayers[i].destroy();
+ };
+ },
+
+}
+
+function getWorkouts() {
+ return [{"activity": "http://dbpedia.org/resource/Running", "time": 123456789, "duration": 3600000, "distance": 12.000000, "json": "http://localhost:2719/user/jdoe/workout/4e5551a8b7607d33c418ce32.json", "gpx": "http://localhost:2719/user/jdoe/workout/4e5551a8b7607d33c418ce32.gpx" }, { "activity": "http://dbpedia.org/resource/Running", "time": 123456789, "duration": 3600000, "distance": 12.000000, "json": "http:localhost:2719/user/jdoe/workout/4e556fd5b7604c3c65eaed29.json", "gpx": "http://localhost:2719/user/jdoe/workout/4e556fd5b7604c3c65eaed29.gpx" }];
+}
+
+function getWorkout(uri) {
+ return Util.requestJSON('Jun-26-11.json');
+ //return Util.requestJSON(uri);
+}
+
+function toggleLoader() {
+
+}
+
+function updateHistory(workouts) {
+ var parent = document.getElementById('history');
+ var list = parent.getElementsByTagName('ul')[0];
+ var newList = document.createElement('ul');
+ for (var i=0; i < workouts.length; i++) {
+ var workout = document.createElement('li');
+ workout.innerHTML = workouts[i].activity + " " + workouts[i].json;
+ newList.appendChild(workout);
+ };
+ parent.replaceChild(newList, list);
+}
+
+function updateStats(workout) {
+ var list = document.getElementById('stats').getElementsByTagName('ul')[0];
+ list.getElementsByClassName('date').getElementsByTagName('span').innerHTML = workout.date;
+ list.getElementsByClassName('start').getElementsByTagName('span').innerHTML = workout.date;
+ list.getElementsByClassName('duration').getElementsByTagName('span').innerHTML = workout.duration;
+ list.getElementsByClassName('distance').getElementsByTagName('span').innerHTML = workout.distance;
+ list.getElementsByClassName('pace').getElementsByTagName('span').innerHTML = workout.distance;
+ list.getElementsByClassName('speed').getElementsByTagName('span').innerHTML = workout.distance;
+ list.getElementsByClassName('climb').getElementsByTagName('span').innerHTML = workout.climb;
+}
\ No newline at end of file
--- a/src/main/resources/templates/index.html Thu Aug 25 12:56:24 2011 -0400
+++ b/src/main/resources/templates/index.html Thu Aug 25 13:13:58 2011 -0400
@@ -4,104 +4,17 @@
<meta charset="utf-8">
<title>Virtual Trainer</title>
- <style type="text/css">
+ <style>
#stats li h2 { display: inline }
</style>
<script src="../scripts/Utils.js"></script>
<script src="../scripts/json2.js"></script>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
- <!--<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>-->
<script src="../scripts/graph.js"></script>
+ <script src="../scripts/map.js"></script>
<script type="text/javascript">
- var OLMap = {
- map : null,
- createMap : function() {
- OLMap.map = new OpenLayers.Map ({
- div : "map",
- controls:[
- new OpenLayers.Control.Navigation(),
- new OpenLayers.Control.PanZoom(),
- ],
- //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"),
- //baseLayer: new OpenLayers.Layer.OSM()
- });
- var baseLayer = new OpenLayers.Layer.OSM();
- OLMap.map.addLayer(baseLayer);
- OLMap.map.setBaseLayer(baseLayer);
- },
- addTrail : function(uri, color) {
- var layer = new OpenLayers.Layer.GML(uri, uri, {
- format: OpenLayers.Format.GPX,
- style: {strokeColor: color, strokeWidth: 5, strokeOpacity: 0.5},
- projection: new OpenLayers.Projection("EPSG:4326")
- });
- OLMap.map.addLayer(layer);
- },
- centerMap : function(events) {
- var bounds = OLMap.getBounds(events);
- var lonLat = bounds.getCenterLonLat().transform(new OpenLayers.Projection("EPSG:4326"), OLMap.map.getProjectionObject());
- OLMap.map.setCenter(lonLat, OLMap.map.getZoomForExtent(bounds.transform(new OpenLayers.Projection("EPSG:4326"), OLMap.map.getProjectionObject())));
- },
- getBounds : function(events) {
- var minLat = events[0].c[0];
- var maxLat = minLat;
- var minLong = events[0].c[1];
- var maxLong = minLong;
- for (i=1; i < events.length; i++) {
- if ((lat = events[i].c[0]) < minLat) {
- minLat = lat;
- continue;
- } if ((lat = events[i].c[0]) > maxLat) {
- maxLat = lat;
- continue;
- } if ((longi = events[i].c[1]) < minLong) {
- minLong = longi;
- continue;
- } if ((longi = events[i].c[1]) > maxLong) {
- maxLong = longi;
- continue;
- }
- }
- bounds = new OpenLayers.Bounds();
- bounds.extend(new OpenLayers.LonLat(minLong,minLat));
- bounds.extend(new OpenLayers.LonLat(maxLong,maxLat));
- return bounds;
- },
- clearMap : function() {
- var gmlLayers = OLMap.map.getLayersByClass('OpenLayers.Layer.GML');
- for (var i=0; i < gmlLayers.length; i++) {
- gmlLayers[i].destroy();
- };
- },
-
- }
-
- function getWorkouts() {
- return [{date: "", activity: "running", json: "json_uri", gpx: "gpx_uri", distance: "76", duration: "10"},
- {date: "", activity: "running", json: "json_uri", gpx: "gpx_uri", distance: "75", duration: "10"}];
- }
-
- function getWorkout(uri) {
-
- }
-
- function toggleLoader() {
-
- }
-
- function updateHistory(workouts) {
-
- }
-
function init() {
// get list of workouts
var workouts = getWorkouts();
@@ -119,7 +32,6 @@
// update stats
- //var workoutJson = eval('(' + Util.request('Jun-26-11.json') + ')');
var workoutJson = Util.requestJSON('Jun-26-11.json');
@@ -127,7 +39,7 @@
OLMap.addTrail("Jun-26-11.gpx","blue");
OLMap.addTrail("Aug-10-11.gpx","red");
- console.log(OLMap.map.layers);
+ //console.log(OLMap.map.layers);
OLMap.centerMap(workoutJson.events);
@@ -153,31 +65,31 @@
<div id="stats">
<h1>Stats</h1>
<ul>
- <li>
+ <li class="date">
<h2>Date</h2>
<span>Aug 10 11</span>
</li>
- <li>
+ <li class="start">
<h2>Start Time</h2>
<span>06:13:35</span>
</li>
- <li>
+ <li class="duration">
<h2>Elapsed Time</h2>
<span>36'16"</span>
</li>
- <li>
+ <li class="distance">
<h2>Distance</h2>
<span>4.13 mile</span>
</li>
- <li>
+ <li class="pace">
<h2>Avg Pace</h2>
<span>8'46" min/mile</span>
</li>
- <li>
+ <li class="speed">
<h2>Avg Speed</h2>
<span>6.84 mph</span>
</li>
- <li>
+ <li class="climb">
<h2>Ascent/Climb</h2>
<span>698 ft</span>
</li>