From 01ae2e35c7e734e36ece2088f630553842b44539 Mon Sep 17 00:00:00 2001 From: sean wills Date: Tue, 17 Jul 2018 18:30:20 +0100 Subject: [PATCH] Falied smooth movements --- includes/images/c4.png | Bin 16990 -> 0 bytes includes/images/car.png | Bin 0 -> 1352 bytes includes/images/car.svg | 10 ++++++++++ index.html | 16 +++++++++++++++- src/js/app.js | 315 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- src/js/directives/address-search/directive.js | 10 ---------- src/js/directives/address-search/partial.html | 2 -- src/less/styles.less | 3 +-- unused | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 240 insertions(+), 196 deletions(-) delete mode 100644 includes/images/c4.png create mode 100644 includes/images/car.png create mode 100644 includes/images/car.svg create mode 100644 unused diff --git a/includes/images/c4.png b/includes/images/c4.png deleted file mode 100644 index 9e56a00..0000000 Binary files a/includes/images/c4.png and /dev/null differ diff --git a/includes/images/car.png b/includes/images/car.png new file mode 100644 index 0000000..c248d7d Binary files /dev/null and b/includes/images/car.png differ diff --git a/includes/images/car.svg b/includes/images/car.svg new file mode 100644 index 0000000..ef5f995 --- /dev/null +++ b/includes/images/car.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index f200987..fbe76d9 100644 --- a/index.html +++ b/index.html @@ -11,9 +11,13 @@
+
-
+ +
@@ -25,8 +29,18 @@ + + + + + + + + diff --git a/src/js/app.js b/src/js/app.js index 8b07aab..91f56a6 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -1,167 +1,37 @@ //AIzaSyAPYatPrCcmNcVdAO_MF0YhO3c1mgdLvuQ var app = angular.module('batmanDelivers', ['ngSanitize', 'ui.select']); -/////////// -//Controller -/////////// - -app.controller('myCtrl', function($scope, $http, $timeout, $rootScope) { - - var initializing = true; - - - var map = null; - var waypoints = []; - var markers = []; - var route = null; - var map = null; - var marker = null; - - var myLatLng = { lat: 0, lng: 0 }; - var directionsService = new google.maps.DirectionsService; - var directionsDisplay = new google.maps.DirectionsRenderer({ - polylineOptions: { - strokeColor: "#d8d8d8" - } - }); - - - var end; - var marked; - var valid = true; - initMap(); - +app.controller('myCtrl', function($scope, $http, $timeout, $rootScope, $interval) { + + var map; $scope.stops = [{ "Description": "Start typing to search...", - "changed": false, valid: false, id: 1 }, { "Description": "Start typing to search...", - "changed": false, valid: false, id: 2 }] + + var directionsService = new google.maps.DirectionsService; + var directionsDisplay = new google.maps.DirectionsRenderer(); + - $scope.$on('StopChanged', function () { - var validstops = $scope.stops.filter(function (x) { return x.valid; }); - - if (validstops.length == 1) { - map.panTo(validstops[0].$marker.getPosition()); - } else if (validstops.length > 1) { - var bounds = new google.maps.LatLngBounds(); - - for (var i = 0; i < validstops.length; i++) { - bounds.extend(validstops[i].$marker.getPosition()); - } - - map.fitBounds(bounds, 100); - } - - - if (validstops.length == $scope.stops.length) { - var waypoints = []; - if ($scope.stops.length > 2) { - waypoints = $scope.stops.slice(1, $scope.stops.length - 2); - } - calculateAndDisplayRoute($scope.stops[0], $scope.stops[$scope.stops.length - 1], waypoints); - } - }); - - - //$scope.$watch('stops', function () { - // if (initializing) { - // $timeout(function() { initializing = false; }); - // } else { - // if ($scope.stops[$scope.stops.length -1].Description != "Start typing to search...") { - // $scope.stops.forEach(function(stop, i){ - // if (stop.Description != "Start typing to search...") { - // valid = true; - // } else { - // valid = false; - // } - // }) - // } else { - // valid = false; - // } - - // $scope.stops.forEach(function(stop, i){ - // if (stop.Description != "Start typing to search..." && stop.changed == false) { - // if (i != 0 && i != $scope.stops.length-1) { - // drawMarker(stop.Latitude, stop.Longitude); - // waypoints.push({ - // location: stop.Description, - // stopover: true - // }); - // } else { - // drawMarker(stop.Latitude, stop.Longitude); - // } - // } - // }) - - // if (valid == true) { - // calculateAndDisplayRoute($scope.stops[0].Description, $scope.stops[$scope.stops.length - 1].Description); - // } - // } - - //}, true); - - function calculateAndDisplayRoute(start, end, waypoints) { - directionsService.route({ - origin: start.$marker.getPosition(), - destination: end.$marker.getPosition(), - waypoints: waypoints.map(function (x) { return x.$marker.getPosition(); }), - travelMode: 'DRIVING', - provideRouteAlternatives: false - }, function(response, status) { - if (status === 'OK') { - directionsDisplay.setDirections(response); - directionsDisplay.setOptions({ suppressMarkers: true }); - - var arrayOfPoints = response.routes[0].overview_path; - var marker = new google.maps.Marker({ - map: map, - position: arrayOfPoints[0] - }); - - var counter = 1; - setInterval(function () { - marker.setPosition(arrayOfPoints[counter]); - counter++; - }, 500); - } else { - console.log("Need more Stops", start, end, waypoints) - } - }); - } - - function clearMarkers() { - markers = []; - } - - function setMapOnAll(map) { - for (var i = 0; i < markers.length; i++) { - markers[i].setMap(map); - } - } - - function drawMarker(lat, lng) { - return; - var marker = new google.maps.Marker({ - position: {lat: lat, lng: lng}, - icon: '.././includes/images/c1.png', - map: map, - }); - markers.push(marker); - } + initMap(); + $scope.timer = 0; + $scope.timeTaken = 0; function initMap() { - map = new google.maps.Map(document.getElementById('map-div'), { - center: { lat: 51.491903, lng: -0.024640 }, - zoom: 10, + center: { + lat: 51.491903, + lng: -0.024640 + }, + mapTypeId: 'roadmap', + zoom: 11, mapTypeControl: false, styles: [{ "featureType": "all", @@ -314,44 +184,127 @@ app.controller('myCtrl', function($scope, $http, $timeout, $rootScope) { } ] } - ] + ] }); - directionsDisplay.setMap(map); $rootScope.map = map; } + $scope.addStop = function () { + $scope.stops.push({ + Description: "Start typing to search..." + }) + } + $scope.$on('StopChanged', function() { + var validstops = $scope.stops.filter(function(x) { + return x.valid; + }); + + if (validstops.length == 1) { + + map.panTo(validstops[0].$marker.getPosition()); + } else if (validstops.length > 1) { + var bounds = new google.maps.LatLngBounds(); + console.log(validstops) + for (var i = 0; i < validstops.length; i++) { + bounds.extend(validstops[i].$marker.getPosition()); + } + + map.fitBounds(bounds, 100); + } + + + if (validstops.length == $scope.stops.length) { + var waypoints = []; + if ($scope.stops.length > 2) { + waypoints = $scope.stops.slice(1, $scope.stops.length - 1); + } + calcRoute($scope.stops[0], $scope.stops[$scope.stops.length - 1], waypoints); + + } }); + function calcRoute(start, end, waypoints) { + console.log(waypoints) + directionsService.route({ + origin: start.$marker.getPosition(), + destination: end.$marker.getPosition(), + waypoints: waypoints.map(function(x){ + return { + location: x.Description, + stopover: true + }; + }), + travelMode: 'DRIVING', + provideRouteAlternatives: false + }, function(response, status) { + if (status === 'OK') { + directionsDisplay.setMap(map); + directionsDisplay.setDirections(response); + directionsDisplay.setOptions({ + suppressMarkers: true + }); + $scope.timer = response.routes[0].overview_path.length; + follow(response.routes[0].overview_path, start, end); + } else { + console.log("Need more Stops", start, end, waypoints) + } + }); + } + function follow(overview_path, start, end) { + + var marker = new google.maps.Marker({ + position: overview_path[0], + icon: { + url: "../includes/images/car.svg", + rotation: 0 + }, + map: map, + optimized: false + }); + var from; + var to; + var heading; + var arrOfRots = []; + var pre = [0]; + var turn; + var c = 0; + var i = c; + + //Rotating marker/icon + // $('img[src="../includes/images/car.svg"]').css({ + // 'transform': 'rotate(' + heading + 'deg)' + // }); + + $interval(function(){ + //Smooth Movements from turn to turn + for(i ; i < overview_path.length; ){ + i++; + from = new google.maps.LatLng(overview_path[c].lat(), overview_path[c].lng()); + to = new google.maps.LatLng(overview_path[c + i].lat(), overview_path[c + i].lng()); + heading = Math.round(google.maps.geometry.spherical.computeHeading(from, to)); + pre.push(heading); //Pushing the heading so the next index can compare to it. + //arrOfRots.push(heading) These will be used to create the curved polyline. + turn = Math.abs(pre[0] - heading); + if(turn > 45 && turn < 135) { + c += i; + console.log(turn); + break; + } else { + pre.splice(0, 1); //Removes the current previous heading, so a new one can be added. + } + c += i; + } + marker.setPosition(overview_path[c]); + //Instead of setPosition draw a curved polyline using the array of rotations; + }, 1000) + //arrOfRots.push(heading); + //$scope.timeTaken++; + + } + + + +}); + + -// if (initializing) { -// $timeout(function() { initializing = false; }); -// } else { -// $scope.stops.forEach(function(stop, i){ -// if (i != 0 && i != $scope.stops.length-1) { -// directionsDisplay.set('directions', null); -// if (stop.Description == "Start typing to search...") { -// console.log("Typing not complete"); -// } else { -// waypoints.push({ -// location: stop.Description, -// stopover: true -// }); -// calculateAndDisplayRoute($scope.stops[0].Description, $scope.stops[$scope.stops.length - 1].Description); -// } -// -// -// -// } else { -// if (stop.Latitude != undefined && stop.Longitude != undefined) { -// console.log(stop.Longitude); -// console.log("Typing not complete"); -// -// drawMarker(stop.Latitude, stop.Longitude); -// -// directionsDisplay.set('directions', null); -// -// calculateAndDisplayRoute($scope.stops[0].Description, $scope.stops[$scope.stops.length - 1].Description); -// -// } -// } -// }) -// } + diff --git a/src/js/directives/address-search/directive.js b/src/js/directives/address-search/directive.js index d647dc3..ed84c57 100644 --- a/src/js/directives/address-search/directive.js +++ b/src/js/directives/address-search/directive.js @@ -45,7 +45,6 @@ scope.address.Latitude = scope.result.geometry.location.lat(); scope.address.Longitude = scope.result.geometry.location.lng(); scope.address.Description = newvalue.description; - scope.address.changed = false; scope.address.valid = true; @@ -63,15 +62,6 @@ }); } }); - - scope.addStop = function () { - scope.stops.push({ - Description: "Start typing to search..." - }) - } - scope.removeStop = function (index) { - scope.stops.splice(index, 1); - } } } } diff --git a/src/js/directives/address-search/partial.html b/src/js/directives/address-search/partial.html index c92ef2f..f9ca848 100644 --- a/src/js/directives/address-search/partial.html +++ b/src/js/directives/address-search/partial.html @@ -9,7 +9,5 @@ {{a.description}} - add - remove
diff --git a/src/less/styles.less b/src/less/styles.less index 672c06a..bc25f0f 100644 --- a/src/less/styles.less +++ b/src/less/styles.less @@ -58,12 +58,11 @@ html { #map-div { position: unset !important; width: 100%; - height: 100%; + height: 100%; } } } - //Placeholder ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ diff --git a/unused b/unused new file mode 100644 index 0000000..aa8f311 --- /dev/null +++ b/unused @@ -0,0 +1,80 @@ +THIS IS CODE THAT HAS BEEN REMOVED + + + + var line = new google.maps.Polyline({ + 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()}], + icons: [{ + icon: lineSymbol, + offset: '100%' + }], + map: map + }); + response.routes[0].overview_path.forEach(function(x, i){ + if (i % 2 == 0){ + 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()}) + } + var line = new google.maps.Polyline({ + 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()}], + map: map + }); + }) + function animateCircle(line) { + var count = 0; + window.setInterval(function() { + count = (count + 1) % 200; + + var icons = line.get('icons'); + console.log(icons); + icons[0].offset = (count / 2) + '%'; + line.set('icons', icons); + }, 20); + } + animateCircle(line); + + $scope.stops.forEach(function(x) { + try{ + //Car Sensors in concept + 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)){ + var m = x.$marker; + m.setMap(null); + } + } + catch(e){ + console.log(e); + var m = x.$marker; + m.setMap(null); + clearInterval($scope.drive); + } + finally{ + console.log('I am alerted regardless of the outcome above') + } + }); + + + function calcDistance(p1, p2) { + return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2) / 1000).toFixed(2); + } + + var p1 = new google.maps.LatLng(overview_path[counter].lat(), overview_path[counter].lng()); + var p2 = new google.maps.LatLng(overview_path[counter + 1].lat(), overview_path[counter + 1].lng()); + var difference = calcDistance(p1, p2); + + + p1 = new google.maps.LatLng(overview_path[counter].lat(), overview_path[counter].lng()); + p2 = new google.maps.LatLng(overview_path[counter + 1].lat(), overview_path[counter + 1].lng()); + + + + + if (difference < 0.09){ + setTimeout(function(){ + + }, 500) + } else { + setTimeout(function(){ + marker.setPosition(overview_path[counter]); + map.panTo(marker.getPosition()); + counter++; + }, 1000) + } \ No newline at end of file -- libgit2 0.21.0