Tarpit Grover / Batman Delivers

Download as
Browse Code »

Commit 26ced8676b8b0d02793f15a64239e550f41f62de

Authored by Sean Wills
1 parent 5b416886
Exists in master and in 1 other branch template

New commit

Showing 4 changed files with 35 additions and 120 deletions   Show diff stats
includes/images/batmobile.png 0 → 100644
View file @26ced86

2.64 KB
index.html
  Diff comments   View file @26ced86
... ... @@ -12,8 +12,8 @@
12 12 <div class="container-fluid">
13 13 <div class="left">
14 14 <!-- <span>{{timer}}</span>
15   - <span>{{timeTaken}}</span>
16   - <span class="add-stop" ng-click="addStop()">add</span> -->
  15 + <span>{{timeTaken}}</span> -->
  16 + <span class="add-stop" ng-click="addStop()">add</span>
17 17 <form>
18 18 <div class="" ng-repeat="stop in stops">
19 19 <!-- lbl="($first)? 'Pickup':($last)?'Drop':'Via'" -->
... ...
src/js/app.js
  Diff comments   View file @26ced86
... ... @@ -18,8 +18,6 @@ app.controller(&#39;myCtrl&#39;, function($scope, $http, $timeout, $rootScope, $interval
18 18 var directionsService = new google.maps.DirectionsService;
19 19 var directionsDisplay = new google.maps.DirectionsRenderer();
20 20  
21   -
22   -
23 21 initMap();
24 22 $scope.timer = 0;
25 23 $scope.timeTaken = 0;
... ... @@ -213,6 +211,7 @@ app.controller(&#39;myCtrl&#39;, function($scope, $http, $timeout, $rootScope, $interval
213 211  
214 212  
215 213 if (validstops.length == $scope.stops.length) {
  214 + //Set Markers as null ****
216 215 var waypoints = [];
217 216 if ($scope.stops.length > 2) {
218 217 waypoints = $scope.stops.slice(1, $scope.stops.length - 1);
... ... @@ -242,16 +241,15 @@ app.controller(&#39;myCtrl&#39;, function($scope, $http, $timeout, $rootScope, $interval
242 241 directionsDisplay.setOptions({
243 242 suppressMarkers: true
244 243 });
245   - $scope.timer = response.routes[0].overview_path.length;
246   - follow(response.routes[0].overview_path, start, end);
  244 + //$scope.timer = response.routes[0].overview_path.length;
  245 + follow(response.routes[0].overview_path);
247 246 } else {
248 247 console.log("Need more Stops", start, end, waypoints)
249 248 }
250 249 });
251 250 }
252 251  
253   - function follow(overview_path, start, end) {
254   -
  252 + function follow(overview_path) {
255 253 var marker = new SlidingMarker({
256 254 position: overview_path[0],
257 255 icon: {
... ... @@ -264,45 +262,42 @@ app.controller(&#39;myCtrl&#39;, function($scope, $http, $timeout, $rootScope, $interval
264 262 duration: 0,
265 263 easing: "linear"
266 264 });
267   - // var from;
268   - // var to;
269   - // var heading;
270   - // var arrOfRots = [];
271   - // var pre = [0];
272   - // var turn;
273   - var j = 0;
274   -
275 265 //Distances and Measurements
276   - var from;
277   - var to;
  266 + var j = 0;
278 267 var MPH = 50; //Or x miles per 60 minutes
279   -
  268 + var rotateTime;
280 269 function moveDriver() {
281   -
282   - from = new google.maps.LatLng(overview_path[j].lat(), overview_path[j].lng());
283   - to = new google.maps.LatLng(overview_path[j + 1].lat(), overview_path[j + 1].lng());
284   -
  270 +
  271 + map.setZoom(15);
  272 + map.panTo(marker.getPosition());
  273 +
  274 + var from = new google.maps.LatLng(overview_path[j].lat(), overview_path[j].lng());
  275 + var to = new google.maps.LatLng(overview_path[j + 1].lat(), overview_path[j + 1].lng());
285 276 var heading = Math.round(google.maps.geometry.spherical.computeHeading(from, to));
286   - //if (Math.abs(heading) > 0) {
287   - $('img[src="../includes/images/car3x.png"]').css({ 'transform': 'rotate(' + heading + 'deg)' });
288   - //}
289 277  
290   - //Getting Distance to milliseconds
291   - var a = google.maps.geometry.spherical.computeDistanceBetween( from, to );//Metres
292   - var b = a * 0.000621371; //Miles
293   - var c = MPH / b; //Difference
294   - var d = 60 / c; //Work out the minutes based on the difference
295   - var e = d * 60000; // Convert to milliseconds
  278 + if (Math.abs(heading) > 75 && Math.abs(heading) < 105) {
  279 + console.log('yes', heading);
  280 + $('img[src="../includes/images/car3x.png"]').css({ 'transition-duration': '3s' });
  281 + }
  282 +
  283 + $('img[src="../includes/images/car3x.png"]').css({ 'transform': 'rotate(' + heading + 'deg)' });
  284 + //Getting Distance to milliseconds
  285 + var metres = google.maps.geometry.spherical.computeDistanceBetween( from, to );//Metres
  286 + var miles = metres * 0.000621371; //Miles
  287 + var speed = MPH / miles; //Difference
  288 + var speedPerHour = 60 / speed; //Work out the minutes based on the difference
  289 + var speedPerMilli = speedPerHour * 60000; // Convert to milliseconds
296 290  
297   - j++;
  291 + j++;
298 292  
299   - marker.duration = e;
300   - marker.setPosition(overview_path[j]);
301   - if (j < overview_path.length) {
302   - setTimeout(function(){
303   - moveDriver();
304   - }, e)
305   - }
  293 + marker.duration = speedPerMilli;
  294 + marker.setPosition(overview_path[j]);
  295 + if (j < overview_path.length) {
  296 + setTimeout(function(){
  297 + moveDriver();
  298 + }, speedPerMilli)
  299 + }
  300 +
306 301 }
307 302 moveDriver();
308 303  
... ...
... ... @@ -1,80 +0,0 @@
1   -THIS IS CODE THAT HAS BEEN REMOVED
2   -
3   -
4   -
5   - var line = new google.maps.Polyline({
6   - path: [{lat: response.routes[0].overview_path[0].lat(), lng: response.routes[0].overview_path[0].lng()}, {lat: response.routes[0].overview_path[1].lat(), lng: response.routes[0].overview_path[1].lng()}],
7   - icons: [{
8   - icon: lineSymbol,
9   - offset: '100%'
10   - }],
11   - map: map
12   - });
13   - response.routes[0].overview_path.forEach(function(x, i){
14   - if (i % 2 == 0){
15   - curvedLine({LatStart: x.lat(), LngStart: x.lng(), LatEnd: response.routes[0].overview_path[i + 2].lat(), LngEnd: response.routes[0].overview_path[i + 2].lng()})
16   - }
17   - var line = new google.maps.Polyline({
18   - path: [{lat: x.lat(), lng: x.lng()}, {lat: response.routes[0].overview_path[i + 1].lat(), lng: response.routes[0].overview_path[i + 1].lng()}],
19   - map: map
20   - });
21   - })
22   - function animateCircle(line) {
23   - var count = 0;
24   - window.setInterval(function() {
25   - count = (count + 1) % 200;
26   -
27   - var icons = line.get('icons');
28   - console.log(icons);
29   - icons[0].offset = (count / 2) + '%';
30   - line.set('icons', icons);
31   - }, 20);
32   - }
33   - animateCircle(line);
34   -
35   - $scope.stops.forEach(function(x) {
36   - try{
37   - //Car Sensors in concept
38   - if(x.Latitude.toFixed(3) == overview_path[overview_path.length - 1].lat().toFixed(3) && x.Longitude.toFixed(3) == overview_path[overview_path.length - 1].lng().toFixed(3)){
39   - var m = x.$marker;
40   - m.setMap(null);
41   - }
42   - }
43   - catch(e){
44   - console.log(e);
45   - var m = x.$marker;
46   - m.setMap(null);
47   - clearInterval($scope.drive);
48   - }
49   - finally{
50   - console.log('I am alerted regardless of the outcome above')
51   - }
52   - });
53   -
54   -
55   - function calcDistance(p1, p2) {
56   - return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2);
57   - }
58   -
59   - var p1 = new google.maps.LatLng(overview_path[counter].lat(), overview_path[counter].lng());
60   - var p2 = new google.maps.LatLng(overview_path[counter + 1].lat(), overview_path[counter + 1].lng());
61   - var difference = calcDistance(p1, p2);
62   -
63   -
64   - p1 = new google.maps.LatLng(overview_path[counter].lat(), overview_path[counter].lng());
65   - p2 = new google.maps.LatLng(overview_path[counter + 1].lat(), overview_path[counter + 1].lng());
66   -
67   - <script src="https://gist.github.com/glebcha/e16abf1fa73d835e9422.js"></script>
68   -
69   -
70   - if (difference < 0.09){
71   - setTimeout(function(){
72   -
73   - }, 500)
74   - } else {
75   - setTimeout(function(){
76   - marker.setPosition(overview_path[counter]);
77   - map.panTo(marker.getPosition());
78   - counter++;
79   - }, 1000)
80   - }
81 0 \ No newline at end of file