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 @@
  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 11 \ No newline at end of file
... ...
index.html
  Diff comments   View file @01ae2e3
... ... @@ -11,9 +11,13 @@
11 11 <body ng-controller="myCtrl">
12 12 <div class="container-fluid">
13 13 <div class="left">
  14 + <!-- <span>{{timer}}</span>
  15 + <span>{{timeTaken}}</span>
  16 + <span class="add-stop" ng-click="addStop()">add</span> -->
14 17 <form>
15 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 21 </div>
18 22 </form>
19 23  
... ... @@ -25,8 +29,18 @@
25 29 <script src="./bower_components/angular/angular.js" charset="utf-8"></script>
26 30 <script src="./bower_components/angular-sanitize/angular-sanitize.js" charset="utf-8"></script>
27 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 33 <script src="./src/js/app.js" charset="utf-8"></script>
29 34 <script src="./src/js/directives/address-search/directive.js" charset="utf-8"></script>
30 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 45 </body>
32 46 </html>
... ...
src/js/app.js
  Diff comments   View file @01ae2e3
1 1 //AIzaSyAPYatPrCcmNcVdAO_MF0YhO3c1mgdLvuQ
2 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 7 $scope.stops = [{
35 8 "Description": "Start typing to search...",
36   - "changed": false,
37 9 valid: false,
38 10 id: 1
39 11  
40 12 }, {
41 13 "Description": "Start typing to search...",
42   - "changed": false,
43 14 valid: false,
44 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 27 function initMap() {
161   -
162 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 35 mapTypeControl: false,
166 36 styles: [{
167 37 "featureType": "all",
... ... @@ -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 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 45 scope.address.Latitude = scope.result.geometry.location.lat();
46 46 scope.address.Longitude = scope.result.geometry.location.lng();
47 47 scope.address.Description = newvalue.description;
48   - scope.address.changed = false;
49 48 scope.address.valid = true;
50 49  
51 50  
... ... @@ -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 9 {{a.description}}
10 10 </ui-select-choices>
11 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 12 </div>
15 13 </div>
... ...
src/less/styles.less
  Diff comments   View file @01ae2e3
... ... @@ -58,12 +58,11 @@ html {
58 58 #map-div {
59 59 position: unset !important;
60 60 width: 100%;
61   - height: 100%;
  61 + height: 100%;
62 62 }
63 63 }
64 64 }
65 65  
66   -
67 66 //Placeholder
68 67 ::-webkit-input-placeholder {
69 68 /* Chrome/Opera/Safari */
... ...
unused 0 → 100644
  Diff comments   View file @01ae2e3
... ... @@ -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 81 \ No newline at end of file
... ...