Permalink
Browse files

Merge new GpsApi into develop.

  • Loading branch information...
2 parents 118d252 + 1917e39 commit db4861004dde13e610cbd5efa7f0feb9cd40d159 @AmcoGit AmcoGit committed Apr 9, 2012
Showing with 185 additions and 98 deletions.
  1. +70 −35 server/public/index.html
  2. +1 −1 server/public/selftest.html
  3. +2 −2 server/public/selftest/selftest.js
  4. +12 −12 server/public/tracker.css
  5. +100 −48 server/public/tracker.js
@@ -1,41 +1,76 @@
<!DOCTYPE html>
<html>
- <head>
- <title>GPS Tracker</title>
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.css" type="text/css" />
- <link rel="stylesheet" href="tracker.css" type="text/css" />
- <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.js"></script>
- <script type="text/javascript" src="tracker.js"></script>
- <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
- <script type="text/javascript">
- 'use strict';
- $(document).ready(function () {
- tracker.setDebugCoordsList($("#coords"));
- tracker.initializeGoogleMaps("map_canvas", 60.186652, 24.82187);
- $('#toggleTracking').click(function () {
- tracker.toggleTracking();
- });
+<head>
+ <title>GPS Tracker</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css"
+ type="text/css" />
+ <link rel="stylesheet" href="tracker.css" type="text/css" />
+ <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
+ <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
+ <script type="text/javascript" src="tracker.js"></script>
+ <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
+ <script type="text/javascript">
+ 'use strict';
+ $(document).ready(function () {
+ tracker.initializeMap("map_canvas", 60.186652, 24.82187, { debugCoordinates: $("#coords") });
+ $('#toggleTracking').click(function () {
+ tracker.toggleTracking();
});
- </script>
- </head>
- <body>
- <div id="main">
- <header>
- <h1>GPS Tracker</h1>
- </header>
- <div class="content">
- <a id="toggleTracking" href="#">Start/Stop tracking</a>
- <div id="map_canvas"></div>
- <div id="coordsBox">
- <h3>Coordinates (debugging purposes)</h3>
- <div id="coords"></div>
+ });
+ </script>
+</head>
+<body>
+ <div id="main" data-role="page" data-theme="b">
+ <header data-role="header">
+ <h1>
+ GPS Tracker
+ </h1>
+ <a href="#settingsDialog" data-role="button" data-rel="dialog" data-icon="gear" class="ui-btn-right">
+ Settings
+ </a>
+ </header>
+ <div class="content" data-role="content">
+ <div class="ui-grid-a">
+ <div class="ui-block-a">
+ <a id="toggleTracking" href="#" data-role="button">Start/Stop</a>
</div>
+ <div class="ui-block-b">
+ <p id="trackingStatus" class="ui-corner-all">
+ Not tracking.
+ </p>
+ </div>
+ </div>
+ <div id="map_canvas">
</div>
- <footer>
- <h6></h6>
- </footer>
+ <div id="coordsBox" data-role="collapsible" data-theme="a">
+ <h3>
+ Coordinates (debugging purposes)</h3>
+ <p id="coords">
+ </p>
+ </div>
+ </div>
+ <footer data-role="footer">
+ <h6>
+ &copy; Team 1
+ </h6>
+ </footer>
+ </div>
+
+ <div id="settingsDialog" data-role="page" data-add-back-btn="true">
+ <header data-role="header">
+ <h1>Settings</h1>
+ </header>
+ <div class="content" data-role="content">
+ <p>
+ TODO: Change settings here
+ </p>
</div>
- </body>
-</html>
+ <footer data-role="footer">
+ <h6>
+ &copy; Team 1
+ </h6>
+ </footer>
+ </div>
+</body>
+</html>
@@ -20,7 +20,7 @@
{"file": "index.html", "jslint": SelfTest.JSLINT_OPTIONS_BROWSER},
{"file": "tracker.js", "jslint": jslintGoogleMaps},
{"file": "api/gps.js", "jslint": {"vars": true, "predef": ["GpsApi", "console"]}},
- {"file": "status.html", "jslint": SelfTest.JSLINT_OPTIONS_BROWSER},
+ // {"file": "status.html", "jslint": SelfTest.JSLINT_OPTIONS_BROWSER},
{"file": "selftest.html", "jslint": jslintSelftest}
// You cannot test the selftest itself: "selftest/selftest.js"
]);
@@ -6,8 +6,8 @@ var SelfTest = {
// JSLint settings for code that is ran in the browser
JSLINT_OPTIONS_BROWSER: {
"browser": true,
- "vars": true,
- "predef": ["$", "tracker", "GpsApi"]
+ "vars": true,
+ "predef": ["$", "tracker", "console", "GpsApi"]
},
// JSLint settings for code that is ran on Node.js
JSLINT_OPTIONS_NODEJS: {
@@ -1,23 +1,23 @@
-#toggleTracking {
- display: block;
- height: 40px;
- border: 1px solid black;
- border-radius: 5px;
+
+#trackingStatus {
+ font-size: 1em;
+ font-weight: bold;
+ color: #666;
+ padding-left: 1em;
}
-
-#coordsBox {
- margin: 0.5em;
- padding: 0.5em;
- border: 2px solid #666;
- border-radius: 1em;
+#coordsBox {
}
#coordsBox h3 {
- margin: 0.3em;
}
+#coords {
+ border: 2px solid #666;
+ border-radius: 1em;
+}
#coords > div {
border-top: 1px solid #888;
+ padding: 0.5em;
}
#coords > div:first-child {
border-top: none;
@@ -1,48 +1,61 @@
(function () {
'use strict';
- var $debugCoordsList = null;
- var maxDebugAmount = 15;
+ var trackerSettings = {
+ // intervalTime: 1000,
+ routeLineDiff: 5000,
+ debugCoordinates: null,
+ debugMaxAmount: 15,
+ followLocation: true
+ }; // Default settings. Changed with changeSettings-function
+
var coordinateStorage = [];
- var trackerInterval = null;
var googleMap = null;
var routeLine = null;
var watcherId = null;
var lastTimeStamp = 0; // not in use yet
- var intervalTime = 1000; // not in use
- var tracker = {
- initializeGoogleMaps: function (domId, centerLat, centerLng) {
+ var tracker = function () {
+
+ function initialize() {
+ if (console) {
+ console.debug("Tracker initialized.");
+ }
+ }
+
+ function initializeGoogleMaps(domId, centerLat, centerLng) {
var myOptions = {
center: new google.maps.LatLng(centerLat, centerLng),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
googleMap = new google.maps.Map(document.getElementById(domId), myOptions);
- },
+ }
- setDebugCoordsList: function (element) {
- $debugCoordsList = element;
- },
+ function changeSettings(settings) {
+ $.extend(trackerSettings, settings); // Merge with current settings
+ }
- coordinatesToList: function (coordinates) {
+ function coordinatesToList(coordinates) {
var i;
var cssClass = 'debugCoord';
if (coordinates && coordinates.coords && coordinates.timestamp) {
- if ($debugCoordsList) {
- var children = $debugCoordsList.children('.' + cssClass);
- for (i = children.length - maxDebugAmount; i > 0; i = i - 1) {
+ if (trackerSettings.debugCoordinates) {
+ var children = trackerSettings.debugCoordinates.children('.' + cssClass);
+ for (i = children.length - trackerSettings.debugMaxAmount; i > 0; i = i - 1) {
children.last().removeClass(cssClass).hide('slow').detach();
children = children.slice(0, children.length - 1);
}
- var $item = $('<div>Lat: ' + coordinates.coords.latitude + ', Lng: ' + coordinates.coords.longitude + ', Accuracy: ' + coordinates.coords.accuracy + ', timestamp: ' + coordinates.timestamp + '</div>');
- $debugCoordsList.prepend($item);
+ var diff = coordinates.timestamp - lastTimeStamp;
+ lastTimeStamp = coordinates.timestamp;
+ var $item = $('<div>Lat: ' + coordinates.coords.latitude + ', Lng: ' + coordinates.coords.longitude + ', Accuracy: ' + coordinates.coords.accuracy + ', timestamp: ' + coordinates.timestamp + ', diffToPrev: ' + diff + '</div>');
+ trackerSettings.debugCoordinates.prepend($item);
$item.addClass(cssClass).hide().show('slow');
}
coordinateStorage.push(coordinates);
}
- },
+ }
- drawRoute: function () {
+ function drawRoute() {
if (googleMap) {
if (!routeLine) {
routeLine = new google.maps.Polyline({
@@ -53,57 +66,96 @@
routeLine.setMap(googleMap);
}
var arr = [];
+ var last = 0;
$.each(coordinateStorage, function (index, item) {
- arr.push(new google.maps.LatLng(item.coords.latitude, item.coords.longitude));
+ if (item.timestamp - last > trackerSettings.routeLineDiff) {
+ // Draw point only if time diff to last point is bigger that routeLineDiff-setting
+ arr.push(new google.maps.LatLng(item.coords.latitude, item.coords.longitude));
+ }
});
routeLine.setPath(arr);
- googleMap.setCenter(arr[arr.length - 1]); // Conditional centering/zooming?
+ if (trackerSettings.followLocation) {
+ googleMap.setCenter(arr[arr.length - 1]); // Conditional centering/zooming?
+ }
}
- },
+ }
- startPolling: function () {
+ function positionCallback(coordinates) {
+ coordinatesToList(coordinates);
+ drawRoute();
+ }
+
+ function positionErrorCallback(error) {
+ if (error && error.code && error.message) {
+ var $errorNote = $("body").children('.errorNote');
+ var errorStr = 'Error (' + error.code + '): ' + error.message;
+ if (!$errorNote) {
+ $errorNote = $('<div>' + errorStr + '</div>');
+ $errorNote.addClass('errorNote');
+ $("body").append($errorNote);
+ }
+ $errorNote.html(errorStr);
+ }
+ }
+
+ function startPolling() {
if (navigator) {
- watcherId = navigator.geolocation.watchPosition(tracker.positionCallback, tracker.positionErrorCallback, {
+ watcherId = navigator.geolocation.watchPosition(positionCallback, positionErrorCallback, {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 1000
});
+ $("#trackingStatus").html('Tracking in progress...');
}
- },
+ }
- stopPolling: function () {
+ function stopPolling() {
if (navigator && watcherId !== null) {
navigator.geolocation.clearWatch(watcherId);
watcherId = null;
}
- },
+ $("#trackingStatus").html('Not tracking.');
+ }
- positionCallback: function (coordinates) {
- tracker.coordinatesToList(coordinates);
- tracker.drawRoute();
- },
+ initialize();
- positionErrorCallback: function (error) {
- if (error && error.code && error.message) {
- var $errorNote = $("body").children('.errorNote');
- var errorStr = 'Error (' + error.code + '): ' + error.message;
- if (!$errorNote) {
- $errorNote = $('<div>' + errorStr + '</div>');
- $errorNote.addClass('errorNote');
- $("body").append($errorNote);
+ return {
+ initializeMap: function (domId, centerLat, centerLng, settings) {
+ initializeGoogleMaps(domId, centerLat, centerLng);
+ if (settings) {
+ changeSettings(settings);
}
- $errorNote.html(errorStr);
- }
- },
+ },
+
+ changeSettings: function (settings) {
+ changeSettings(settings);
+ },
+
+ setDebugCoordsList: function (element) {
+ changeSettings({ debugCoordinates: element });
+ },
- toggleTracking: function () {
- if (watcherId !== null) {
- tracker.stopPolling();
- } else {
- tracker.startPolling();
+ coordinatesToList: function (coordinates) {
+ coordinatesToList(coordinates);
+ },
+
+ startPolling: function () {
+ startPolling();
+ },
+
+ stopPolling: function () {
+ stopPolling();
+ },
+
+ toggleTracking: function () {
+ if (watcherId !== null) {
+ stopPolling();
+ } else {
+ startPolling();
+ }
}
- }
+ };
};
- window.tracker = tracker;
+ window.tracker = tracker();
}());

0 comments on commit db48610

Please sign in to comment.