Tarpit Grover / Batman Delivers

Download as
Browse Code »

Commit 01ae2e35c7e734e36ece2088f630553842b44539

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

Falied smooth movements

Showing 9 changed files with 240 additions and 196 deletions   Show diff stats
includes/images/c4.png
View file @a0fba7c

16.6 KB
includes/images/car.png 0 → 100644
View file @01ae2e3

1.32 KB
includes/images/car.svg 0 → 100644
  Diff comments   View file @01ae2e3
@@ -0,0 +1,10 @@ @@ -0,0 +1,10 @@
  1 +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
  2 +<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="50px" height="25px" viewBox="0 0 500 250" preserveAspectRatio="xMidYMid meet">
  3 +<g id="layer101" fill="#1e1e30" stroke="none">
  4 + <path d="M267 244 c-2 -3 -58 -6 -123 -7 -66 -1 -125 -6 -132 -10 -17 -11 -17 -193 1 -204 6 -4 65 -9 130 -10 65 -1 121 -4 125 -7 4 -2 50 -1 101 3 117 10 131 22 131 115 0 73 -17 103 -63 110 -58 9 -165 15 -170 10z"/>
  5 + </g>
  6 +<g id="layer102" fill="#030374" stroke="none">
  7 + <path d="M290 233 c0 -9 -35 -11 -129 -10 -95 1 -133 -1 -143 -11 -14 -14 -19 -154 -6 -167 17 -17 91 -25 181 -19 79 5 97 4 97 -7 0 -12 2 -12 9 0 7 10 21 12 55 7 57 -9 106 1 106 20 0 8 7 17 15 20 11 4 15 21 15 59 0 38 -4 55 -15 59 -8 3 -15 12 -15 20 0 19 -49 29 -106 20 -34 -5 -48 -3 -55 7 -6 9 -9 10 -9 2z m68 -47 c20 -20 20 -102 0 -122 -21 -21 -211 -33 -223 -14 -7 11 8 12 71 7 l79 -6 0 74 0 74 -79 -6 c-63 -5 -78 -4 -71 7 12 19 202 7 223 -14z m-238 -59 c0 -55 -14 -90 -27 -71 -5 6 -16 13 -25 17 -41 15 -30 102 14 109 35 6 38 1 38 -55z"/>
  8 + </g>
  9 +
  10 +</svg>
0 \ No newline at end of file 11 \ No newline at end of file
@@ -11,9 +11,13 @@ @@ -11,9 +11,13 @@
11 <body ng-controller="myCtrl"> 11 <body ng-controller="myCtrl">
12 <div class="container-fluid"> 12 <div class="container-fluid">
13 <div class="left"> 13 <div class="left">
  14 + <!-- <span>{{timer}}</span>
  15 + <span>{{timeTaken}}</span>
  16 + <span class="add-stop" ng-click="addStop()">add</span> -->
14 <form> 17 <form>
15 <div class="" ng-repeat="stop in stops"> 18 <div class="" ng-repeat="stop in stops">
16 - <div address-search placeholder="Enter Pickup" model="stop" order="{{$index}}" lbl="($first)? 'Pickup':($last)?'Drop':'Via'"></div> 19 + <!-- lbl="($first)? 'Pickup':($last)?'Drop':'Via'" -->
  20 + <div address-search placeholder="Enter Pickup" model="stop" order="{{$index}}" ></div>
17 </div> 21 </div>
18 </form> 22 </form>
19 23
@@ -25,8 +29,18 @@ @@ -25,8 +29,18 @@
25 <script src="./bower_components/angular/angular.js" charset="utf-8"></script> 29 <script src="./bower_components/angular/angular.js" charset="utf-8"></script>
26 <script src="./bower_components/angular-sanitize/angular-sanitize.js" charset="utf-8"></script> 30 <script src="./bower_components/angular-sanitize/angular-sanitize.js" charset="utf-8"></script>
27 <script src="./bower_components/angular-ui-select/dist/select.js" charset="utf-8"></script> 31 <script src="./bower_components/angular-ui-select/dist/select.js" charset="utf-8"></script>
  32 + <script src="./bower_components/jquery/dist/jquery.js" charset="utf-8"></script>
28 <script src="./src/js/app.js" charset="utf-8"></script> 33 <script src="./src/js/app.js" charset="utf-8"></script>
29 <script src="./src/js/directives/address-search/directive.js" charset="utf-8"></script> 34 <script src="./src/js/directives/address-search/directive.js" charset="utf-8"></script>
30 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4fiyAw8BEs35uf2U48jEicFrRtqgD5aQ&libraries=weather,visualization,places,drawing,geometry&sensor=false&language=en&v=3.13"></script> 35 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB4fiyAw8BEs35uf2U48jEicFrRtqgD5aQ&libraries=weather,visualization,places,drawing,geometry&sensor=false&language=en&v=3.13"></script>
  36 +
  37 + <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.compatibility.js"></script>
  38 + <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
  39 + <script src="https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/vendor/markerAnimate.js"></script>
  40 + <script src="https://cdnjs.cloudflare.com/ajax/libs/marker-animate-unobtrusive/0.2.8/SlidingMarker.min.js"></script>
  41 + <script>
  42 + SlidingMarker.initializeGlobally();
  43 + </script>
  44 +
31 </body> 45 </body>
32 </html> 46 </html>
1 //AIzaSyAPYatPrCcmNcVdAO_MF0YhO3c1mgdLvuQ 1 //AIzaSyAPYatPrCcmNcVdAO_MF0YhO3c1mgdLvuQ
2 var app = angular.module('batmanDelivers', ['ngSanitize', 'ui.select']); 2 var app = angular.module('batmanDelivers', ['ngSanitize', 'ui.select']);
3 3
4 -///////////  
5 -//Controller  
6 -///////////  
7 -  
8 -app.controller('myCtrl', function($scope, $http, $timeout, $rootScope) {  
9 -  
10 - var initializing = true;  
11 -  
12 -  
13 - var map = null;  
14 - var waypoints = [];  
15 - var markers = [];  
16 - var route = null;  
17 - var map = null;  
18 - var marker = null;  
19 -  
20 - var myLatLng = { lat: 0, lng: 0 };  
21 - var directionsService = new google.maps.DirectionsService;  
22 - var directionsDisplay = new google.maps.DirectionsRenderer({  
23 - polylineOptions: {  
24 - strokeColor: "#d8d8d8"  
25 - }  
26 - });  
27 -  
28 -  
29 - var end;  
30 - var marked;  
31 - var valid = true;  
32 - initMap();  
33 - 4 +app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval) {
  5 +
  6 + var map;
34 $scope.stops = [{ 7 $scope.stops = [{
35 "Description": "Start typing to search...", 8 "Description": "Start typing to search...",
36 - "changed": false,  
37 valid: false, 9 valid: false,
38 id: 1 10 id: 1
39 11
40 }, { 12 }, {
41 "Description": "Start typing to search...", 13 "Description": "Start typing to search...",
42 - "changed": false,  
43 valid: false, 14 valid: false,
44 id: 2 15 id: 2
45 }] 16 }]
  17 +
  18 + var directionsService = new google.maps.DirectionsService;
  19 + var directionsDisplay = new google.maps.DirectionsRenderer();
46 20
  21 +
47 22
48 - $scope.$on('StopChanged', function () {  
49 - var validstops = $scope.stops.filter(function (x) { return x.valid; });  
50 -  
51 - if (validstops.length == 1) {  
52 - map.panTo(validstops[0].$marker.getPosition());  
53 - } else if (validstops.length > 1) {  
54 - var bounds = new google.maps.LatLngBounds();  
55 -  
56 - for (var i = 0; i < validstops.length; i++) {  
57 - bounds.extend(validstops[i].$marker.getPosition());  
58 - }  
59 -  
60 - map.fitBounds(bounds, 100);  
61 - }  
62 -  
63 -  
64 - if (validstops.length == $scope.stops.length) {  
65 - var waypoints = [];  
66 - if ($scope.stops.length > 2) {  
67 - waypoints = $scope.stops.slice(1, $scope.stops.length - 2);  
68 - }  
69 - calculateAndDisplayRoute($scope.stops[0], $scope.stops[$scope.stops.length - 1], waypoints);  
70 - }  
71 - });  
72 -  
73 -  
74 - //$scope.$watch('stops', function () {  
75 - // if (initializing) {  
76 - // $timeout(function() { initializing = false; });  
77 - // } else {  
78 - // if ($scope.stops[$scope.stops.length -1].Description != "Start typing to search...") {  
79 - // $scope.stops.forEach(function(stop, i){  
80 - // if (stop.Description != "Start typing to search...") {  
81 - // valid = true;  
82 - // } else {  
83 - // valid = false;  
84 - // }  
85 - // })  
86 - // } else {  
87 - // valid = false;  
88 - // }  
89 -  
90 - // $scope.stops.forEach(function(stop, i){  
91 - // if (stop.Description != "Start typing to search..." && stop.changed == false) {  
92 - // if (i != 0 && i != $scope.stops.length-1) {  
93 - // drawMarker(stop.Latitude, stop.Longitude);  
94 - // waypoints.push({  
95 - // location: stop.Description,  
96 - // stopover: true  
97 - // });  
98 - // } else {  
99 - // drawMarker(stop.Latitude, stop.Longitude);  
100 - // }  
101 - // }  
102 - // })  
103 -  
104 - // if (valid == true) {  
105 - // calculateAndDisplayRoute($scope.stops[0].Description, $scope.stops[$scope.stops.length - 1].Description);  
106 - // }  
107 - // }  
108 -  
109 - //}, true);  
110 -  
111 - function calculateAndDisplayRoute(start, end, waypoints) {  
112 - directionsService.route({  
113 - origin: start.$marker.getPosition(),  
114 - destination: end.$marker.getPosition(),  
115 - waypoints: waypoints.map(function (x) { return x.$marker.getPosition(); }),  
116 - travelMode: 'DRIVING',  
117 - provideRouteAlternatives: false  
118 - }, function(response, status) {  
119 - if (status === 'OK') {  
120 - directionsDisplay.setDirections(response);  
121 - directionsDisplay.setOptions({ suppressMarkers: true });  
122 -  
123 - var arrayOfPoints = response.routes[0].overview_path;  
124 - var marker = new google.maps.Marker({  
125 - map: map,  
126 - position: arrayOfPoints[0]  
127 - });  
128 -  
129 - var counter = 1;  
130 - setInterval(function () {  
131 - marker.setPosition(arrayOfPoints[counter]);  
132 - counter++;  
133 - }, 500);  
134 - } else {  
135 - console.log("Need more Stops", start, end, waypoints)  
136 - }  
137 - });  
138 - }  
139 -  
140 - function clearMarkers() {  
141 - markers = [];  
142 - }  
143 -  
144 - function setMapOnAll(map) {  
145 - for (var i = 0; i < markers.length; i++) {  
146 - markers[i].setMap(map);  
147 - }  
148 - }  
149 -  
150 - function drawMarker(lat, lng) {  
151 - return;  
152 - var marker = new google.maps.Marker({  
153 - position: {lat: lat, lng: lng},  
154 - icon: '.././includes/images/c1.png',  
155 - map: map,  
156 - });  
157 - markers.push(marker);  
158 - } 23 + initMap();
  24 + $scope.timer = 0;
  25 + $scope.timeTaken = 0;
159 26
160 function initMap() { 27 function initMap() {
161 -  
162 map = new google.maps.Map(document.getElementById('map-div'), { 28 map = new google.maps.Map(document.getElementById('map-div'), {
163 - center: { lat: 51.491903, lng: -0.024640 },  
164 - zoom: 10, 29 + center: {
  30 + lat: 51.491903,
  31 + lng: -0.024640
  32 + },
  33 + mapTypeId: 'roadmap',
  34 + zoom: 11,
165 mapTypeControl: false, 35 mapTypeControl: false,
166 styles: [{ 36 styles: [{
167 "featureType": "all", 37 "featureType": "all",
@@ -314,44 +184,127 @@ app.controller(&#39;myCtrl&#39;, function($scope, $http, $timeout, $rootScope) { @@ -314,44 +184,127 @@ app.controller(&#39;myCtrl&#39;, function($scope, $http, $timeout, $rootScope) {
314 } 184 }
315 ] 185 ]
316 } 186 }
317 - ] 187 + ]
318 }); 188 });
319 - directionsDisplay.setMap(map);  
320 $rootScope.map = map; 189 $rootScope.map = map;
321 } 190 }
  191 + $scope.addStop = function () {
  192 + $scope.stops.push({
  193 + Description: "Start typing to search..."
  194 + })
  195 + }
  196 + $scope.$on('StopChanged', function() {
  197 + var validstops = $scope.stops.filter(function(x) {
  198 + return x.valid;
  199 + });
  200 +
  201 + if (validstops.length == 1) {
  202 +
  203 + map.panTo(validstops[0].$marker.getPosition());
  204 + } else if (validstops.length > 1) {
  205 + var bounds = new google.maps.LatLngBounds();
  206 + console.log(validstops)
  207 + for (var i = 0; i < validstops.length; i++) {
  208 + bounds.extend(validstops[i].$marker.getPosition());
  209 + }
  210 +
  211 + map.fitBounds(bounds, 100);
  212 + }
  213 +
  214 +
  215 + if (validstops.length == $scope.stops.length) {
  216 + var waypoints = [];
  217 + if ($scope.stops.length > 2) {
  218 + waypoints = $scope.stops.slice(1, $scope.stops.length - 1);
  219 + }
  220 + calcRoute($scope.stops[0], $scope.stops[$scope.stops.length - 1], waypoints);
  221 +
  222 + }
322 }); 223 });
  224 + function calcRoute(start, end, waypoints) {
  225 + console.log(waypoints)
  226 + directionsService.route({
  227 + origin: start.$marker.getPosition(),
  228 + destination: end.$marker.getPosition(),
  229 + waypoints: waypoints.map(function(x){
  230 + return {
  231 + location: x.Description,
  232 + stopover: true
  233 + };
  234 + }),
  235 + travelMode: 'DRIVING',
  236 + provideRouteAlternatives: false
  237 + }, function(response, status) {
  238 + if (status === 'OK') {
  239 + directionsDisplay.setMap(map);
  240 + directionsDisplay.setDirections(response);
  241 + directionsDisplay.setOptions({
  242 + suppressMarkers: true
  243 + });
  244 + $scope.timer = response.routes[0].overview_path.length;
  245 + follow(response.routes[0].overview_path, start, end);
  246 + } else {
  247 + console.log("Need more Stops", start, end, waypoints)
  248 + }
  249 + });
  250 + }
  251 + function follow(overview_path, start, end) {
  252 +
  253 + var marker = new google.maps.Marker({
  254 + position: overview_path[0],
  255 + icon: {
  256 + url: "../includes/images/car.svg",
  257 + rotation: 0
  258 + },
  259 + map: map,
  260 + optimized: false
  261 + });
  262 + var from;
  263 + var to;
  264 + var heading;
  265 + var arrOfRots = [];
  266 + var pre = [0];
  267 + var turn;
  268 + var c = 0;
  269 + var i = c;
  270 +
  271 + //Rotating marker/icon
  272 + // $('img[src="../includes/images/car.svg"]').css({
  273 + // 'transform': 'rotate(' + heading + 'deg)'
  274 + // });
  275 +
  276 + $interval(function(){
  277 + //Smooth Movements from turn to turn
  278 + for(i ; i < overview_path.length; ){
  279 + i++;
  280 + from = new google.maps.LatLng(overview_path[c].lat(), overview_path[c].lng());
  281 + to = new google.maps.LatLng(overview_path[c + i].lat(), overview_path[c + i].lng());
  282 + heading = Math.round(google.maps.geometry.spherical.computeHeading(from, to));
  283 + pre.push(heading); //Pushing the heading so the next index can compare to it.
  284 + //arrOfRots.push(heading) These will be used to create the curved polyline.
  285 + turn = Math.abs(pre[0] - heading);
  286 + if(turn > 45 && turn < 135) {
  287 + c += i;
  288 + console.log(turn);
  289 + break;
  290 + } else {
  291 + pre.splice(0, 1); //Removes the current previous heading, so a new one can be added.
  292 + }
  293 + c += i;
  294 + }
  295 + marker.setPosition(overview_path[c]);
  296 + //Instead of setPosition draw a curved polyline using the array of rotations;
  297 + }, 1000)
  298 + //arrOfRots.push(heading);
  299 + //$scope.timeTaken++;
  300 +
  301 + }
  302 +
  303 +
  304 +
  305 +});
  306 +
323 307
  308 +
324 309
325 -// if (initializing) {  
326 -// $timeout(function() { initializing = false; });  
327 -// } else {  
328 -// $scope.stops.forEach(function(stop, i){  
329 -// if (i != 0 && i != $scope.stops.length-1) {  
330 -// directionsDisplay.set('directions', null);  
331 -// if (stop.Description == "Start typing to search...") {  
332 -// console.log("Typing not complete");  
333 -// } else {  
334 -// waypoints.push({  
335 -// location: stop.Description,  
336 -// stopover: true  
337 -// });  
338 -// calculateAndDisplayRoute($scope.stops[0].Description, $scope.stops[$scope.stops.length - 1].Description);  
339 -// }  
340 -//  
341 -//  
342 -//  
343 -// } else {  
344 -// if (stop.Latitude != undefined && stop.Longitude != undefined) {  
345 -// console.log(stop.Longitude);  
346 -// console.log("Typing not complete");  
347 -//  
348 -// drawMarker(stop.Latitude, stop.Longitude);  
349 -//  
350 -// directionsDisplay.set('directions', null);  
351 -//  
352 -// calculateAndDisplayRoute($scope.stops[0].Description, $scope.stops[$scope.stops.length - 1].Description);  
353 -//  
354 -// }  
355 -// }  
356 -// })  
357 -// } 310 +
src/js/directives/address-search/directive.js
  Diff comments   View file @01ae2e3
@@ -45,7 +45,6 @@ @@ -45,7 +45,6 @@
45 scope.address.Latitude = scope.result.geometry.location.lat(); 45 scope.address.Latitude = scope.result.geometry.location.lat();
46 scope.address.Longitude = scope.result.geometry.location.lng(); 46 scope.address.Longitude = scope.result.geometry.location.lng();
47 scope.address.Description = newvalue.description; 47 scope.address.Description = newvalue.description;
48 - scope.address.changed = false;  
49 scope.address.valid = true; 48 scope.address.valid = true;
50 49
51 50
@@ -63,15 +62,6 @@ @@ -63,15 +62,6 @@
63 }); 62 });
64 } 63 }
65 }); 64 });
66 -  
67 - scope.addStop = function () {  
68 - scope.stops.push({  
69 - Description: "Start typing to search..."  
70 - })  
71 - }  
72 - scope.removeStop = function (index) {  
73 - scope.stops.splice(index, 1);  
74 - }  
75 } 65 }
76 } 66 }
77 } 67 }
src/js/directives/address-search/partial.html
  Diff comments   View file @01ae2e3
@@ -9,7 +9,5 @@ @@ -9,7 +9,5 @@
9 {{a.description}} 9 {{a.description}}
10 </ui-select-choices> 10 </ui-select-choices>
11 </ui-select> 11 </ui-select>
12 - <span class="add-stop" ng-click="addStop()">add</span>  
13 - <span class="remove-stop" ng-click="removeStop($index)">remove</span>  
14 </div> 12 </div>
15 </div> 13 </div>
src/less/styles.less
  Diff comments   View file @01ae2e3
@@ -58,12 +58,11 @@ html { @@ -58,12 +58,11 @@ html {
58 #map-div { 58 #map-div {
59 position: unset !important; 59 position: unset !important;
60 width: 100%; 60 width: 100%;
61 - height: 100%; 61 + height: 100%;
62 } 62 }
63 } 63 }
64 } 64 }
65 65
66 -  
67 //Placeholder 66 //Placeholder
68 ::-webkit-input-placeholder { 67 ::-webkit-input-placeholder {
69 /* Chrome/Opera/Safari */ 68 /* Chrome/Opera/Safari */
unused 0 → 100644
  Diff comments   View file @01ae2e3
@@ -0,0 +1,80 @@ @@ -0,0 +1,80 @@
  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 + }
0 \ No newline at end of file 81 \ No newline at end of file