Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //6p1
- //added two new public variables that ill be using for the smoothing function
- //have began to do math for collinear points but i dont think its quite there yet.
- //Jake
- //6p2
- //finished step 6, took hours.. but did go to consultation on the last day which helped
- //But having a problem veiwing the actual simplified route, i know code works and i can see changes
- //in route but very very small changes
- //Jake
- // This file contains some delegate classes for you to extend.
- function NewRoutePageControllerDelegate()
- {
- // Save 'this' so we can refer to public attributes and methods.
- var self = this;
- self.latitude = null;
- self.longitude = null;
- self.accuracy = null;
- self.x = null;
- self.y = null;
- self.locations = [];
- self.lastUpdate = 0;
- var newRoutePageController = null;
- self.Route= null;
- self.plotRoute= null;
- //Created a new variable called mode, we use this as a marker for functions to either stop or go when pushing locations into our array
- var mode = "notRecording";
- // The MapPageController class controls the 'New Route' page.
- // This class provides a couple of useful methods:
- // displayMessage(message):
- // Causes a short message string to be displayed on the
- // page for a brief period. Useful for showing quick
- // notifications to the user.
- // panToLocation(latitude, longitude):
- // Pans the map to the given latitude and longitude.
- // repaintOverlay():
- // Causes the map overlay to be redrawn, triggering a
- // call to our mapPageDrawOverlay() method. You might
- // wish to call this when you update information that
- // is displayed on the canvas overlay.
- // canvasPointFromLocation(latitude, longitude):
- // Given a latitude and longitude, returns the
- // corresponding point on the canvas overlay.
- // The return value is an object with an 'x' and a 'y'
- // property.
- var newRoutePageController = null;
- // NOTE: You should not remove any of the five public methods below.
- // This method is called by the MapPageController when the user
- // has switched to the page and it has been intialised.
- this.mapPageInitialisedWithOptions = function(controller, options)
- {
- console.log("Record Route - mapPageInitialisedWithOptions");
- newRoutePageController = controller;
- function geoSuccess(position)
- {
- self.latitude = position.coords.latitude;
- self.longitude = position.coords.longitude;
- self.accuracy = position.coords.accuracy;
- self.Route =
- {
- Longitude:self.longitude,
- Latitude:self.latitude,
- Accuracy:self.accuracy,
- time: new Date().getTime()
- };
- if ((new Date()).getTime() - self.lastUpdate >= 1000) {
- newRoutePageController.panToLocation(position.coords.latitude, position.coords.longitude);
- self.lastUpdate = (new Date()).getTime();
- if (mode == "recording") {
- self.locations.push(self.Route);
- }
- }
- }
- function geoError()
- {
- alert("Sorry, no position available.");
- }
- var geoOptions =
- {
- enableHighAccuracy: true,
- };
- navigator.geolocation.watchPosition(geoSuccess, geoError, geoOptions);
- newRoutePageController.repaintOverlay();
- };
- // The MapPageController calls this when loading its page.
- // You should return an array of objects specifying buttons you
- // would like to display at the bottom of the map, e.g.,
- // {
- // title: "Start",
- // id: "startButton", (optional)
- // }
- // Note: This doesn't support an "onClick" property like in
- // Assignment 1.
- this.mapPageButtonControls = function()
- {
- console.log("Record Route - mapPageButtonControls");
- var find = {
- title: "Locate current position"
- //CurrentPos
- };
- var startRecording = {
- title: "Start"
- //RECORD
- };
- var stopRecording = {
- title: "Save"
- //END
- };
- var reset = {
- title: "Reset"
- //RESET
- };
- return [find, startRecording, stopRecording, reset];
- };
- // The MapPageController calls this when user taps on a button
- // specified by mapPageButtonControls(). The buttonIndex will
- // be the index of the button in the aray you returned.
- this.mapPageButtonTapped = function(buttonIndex)
- {
- if (buttonIndex== 0)
- {
- newRoutePageController.panToLocation(self.latitude, self.longitude);
- newRoutePageController.displayMessage("Latitude " + self.latitude.toFixed(2) + " Longitude " +self.longitude.toFixed(2) + " Accuracy " + self.accuracy.toFixed(2)
- +"m");
- }
- else if (buttonIndex == 1)
- {
- console.log("accuracy: " + self.accuracy);
- if(self.accuracy >= 25)
- {
- newRoutePageController.displayMessage("Your location is not accurate enough, please wait for a better location")
- }
- mode = "recording";
- console.log(mode);
- }
- else if (buttonIndex == 2)
- {
- mode = "notRecording";
- console.log(mode);
- var newRoute = {
- locations: self.locations,
- dateCreated: self.locations[0].time
- }
- var json = JSON.stringify(newRoute)
- localStorage.setItem("route-" + Date.now(), json);
- }
- else if (buttonIndex == 3)
- {
- self.locations = [];
- newRoutePageController.displayMessage( " Location Array Cleared " );
- console.log(self.locations);
- }
- console.log("Record Route - mapPageButtonTapped(" + buttonIndex + ")");
- }
- // The MapPageController calls this when the canvas needs to be
- // redrawn, such as due to the user panning or zooming the map.
- // It clears the canvas before calling this method.
- // 'context' is an HTML canvas element context. This is a
- // transparent layer that sits above the map and is redrawn
- // whenever the map is panned or zoomed. It can be used to
- // draw annotations on the map or display other information.
- this.mapPageDrawOverlay = function(context)
- {
- var startingPoint = newRoutePageController.canvasPointFromLocation(self.latitude, self.longitude)
- context.beginPath();
- context.arc(startingPoint.x, startingPoint.y ,10 ,0 ,2*Math.PI, false);
- context.fillStyle = 'pink';
- context.fill();
- context.lineWidth = 5;
- //http://www.w3schools.com/tags/ref_colorpicker.asp
- context.strokeStyle = '#8A00B8';
- context.stroke();
- self.plotRoute = function(LocationArray)
- {
- for(var i=0; i +1 <LocationArray.length; i++)
- {
- //Routes[i][0] //latitude values
- //Routes[i][1] //longitude values
- var point = newRoutePageController.canvasPointFromLocation(LocationArray[i].Latitude, LocationArray[i].Longitude);
- //Draws a circle for every updated point
- context.beginPath();
- context.arc(point.x,point.y,1,0,2*Math.PI);
- context.strokeStyle = '#8A00B8';
- context.stroke();
- //basically just draws a line a new point and its preceeding point
- context.beginPath();
- context.moveTo(point.x, point.y);
- point = newRoutePageController.canvasPointFromLocation(LocationArray[i + 1].Latitude, LocationArray[i + 1].Longitude);
- context.lineTo(point.x, point.y);
- context.strokeStyle = '#8A00B8';
- context.stroke();
- }
- }
- self.plotRoute(self.locations);
- console.log("Record Route - mapPageDrawOverlay");
- }
- // The MapPageController calls this to ask if it should return
- // back to the start screen of the app when the user taps the
- // done button. If you are not letting the user return, you
- // should probably call displayMessage() to inform them why.
- this.mapPageShouldReturnFromDoneButtonTap = function()
- {
- console.log("Record Route - mapPageShouldReturnFromDoneButtonTap");
- // Let the user return.
- return true;
- }
- }
- function ViewRoutePageControllerDelegate()
- {
- // Save 'this' so we can refer to public attributes and methods.
- var self = this;
- self.TotalDistance= null;
- self.distanceBetweenTwoPoints = null;
- self.totalTime = null;
- self.simplifiedRoute = null;
- this.simplifyRoute = null;
- self.angleBetweenLines = null;
- var secondMode = "oRoute";
- var decoyRoute = null;
- // The MapPageController class controls the 'View Route' page.
- // This class provides a couple of useful methods:
- // displayMessage(message):
- // Causes a short message string to be displayed on the
- // page for a brief period. Useful for showing quick
- // notifications to the user.
- // panToLocation(latitude, longitude):
- // Pans the map to the given latitude and longitude.
- // repaintOverlay():
- // Causes the map overlay to be redrawn, triggering a
- // call to our mapPageDrawOverlay() method. You might
- // wish to call this when you update information that
- // is displayed on the canvas overlay.
- // canvasPointFromLocation(latitude, longitude):
- // Given a latitude and longitude, returns the
- // corresponding point on the canvas overlay.
- // The return value is an object with an 'x' and a 'y'
- // property.
- self.distanceBetweenTwoPoints = function(point1, point2)
- {
- //got from http://www.movable-type.co.uk/scripts/latlong.html
- var lat1 = point1.Latitude;
- var lat2 = point2.Latitude;
- var lon1 = point1.Longitude;
- var lon2 = point2.Longitude;
- var R = 6371000; // metres
- var φ1 = lat1*Math.PI/180;
- var φ2 = lat2*Math.PI/180;
- var Δφ = (lat2-lat1)*Math.PI/180;
- var Δλ = (lon2-lon1)*Math.PI/180;
- var a = Math.sin(Δφ/2) * Math.sin(Δφ/2) +
- Math.cos(φ1) * Math.cos(φ2) *
- Math.sin(Δλ/2) * Math.sin(Δλ/2);
- var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
- var d = R * c;
- return d;
- };
- self.TotalDistance = function(LocationArray)
- {
- var totalD = 0;
- for(var i = 0; i<LocationArray.length-1;i++)
- {
- totalD += self.distanceBetweenTwoPoints(LocationArray[i],LocationArray[i+1]);
- }
- return Math.round(totalD);
- }
- self.timeBetweenTwoPoints = function(point1,point2)
- {
- var start = point1.time;
- var end = point2.time;
- return end - start;
- };
- self.totalTime = function(LocationArray)
- {
- var totalT = 0;
- for(var i = 0; i<LocationArray.length-1;i++)
- {
- totalT += self.timeBetweenTwoPoints(LocationArray[i],LocationArray[i+1]);
- }
- return Math.round(totalT)/1000;
- }
- this.simplifyRoute = function(LocationArray)
- {
- decoyRoute = originalRoute.locations.slice();
- if(LocationArray.length > 3)
- {
- for(var i = 0; i < LocationArray.length-3;i++)
- {
- var Point1 = viewRoutePageController.canvasPointFromLocation(LocationArray[i].Latitude, LocationArray[i].Longitude);
- var Point2 = viewRoutePageController.canvasPointFromLocation(LocationArray[i+1].Latitude, LocationArray[i+1].Longitude);
- var Point3 = viewRoutePageController.canvasPointFromLocation(LocationArray[i+2].Latitude, LocationArray[i+2].Longitude);
- var m1 = (Point2.y-Point1.y)/(Point2.x-Point1.x);
- var m2 = (Point3.y- Point2.y)/(Point3.x-Point2.x);
- var angle1 = Math.atan(m1)
- var angle2 = Math.atan(m2)
- var refAngle1 = Math.atan(m1)
- var refAngle2 = Math.atan(m2)
- if(angle1<0)
- {
- angle1 = Math.PI- Math.abs(refAngle1);
- }
- if(angle2<0)
- {
- angle2 = Math.PI- Math.abs(refAngle2);
- }
- if(Math.abs(angle2 - angle1)<= 5*Math.PI/2)
- {
- LocationArray.splice(i+1 , 1)
- return self.simplifyRoute(LocationArray);
- }
- }
- return LocationArray;
- }
- }
- var viewRoutePageController = null;
- // The originally recorded route being displayed by the viewRoute page.
- var originalRoute;
- // NOTE: You should not remove any of the five public methods below.
- // This method is called by the MapPageController when the user
- // has switched to the page and it has been intialised. If the
- // MapPageController is displaying an existing route, then options
- // will contain a 'routeIndex' property which gives the index of
- // the selected route in the Routes array.
- this.mapPageInitialisedWithOptions = function(controller, options)
- {
- console.log("View Route - mapPageInitialisedWithOptions");
- viewRoutePageController = controller;
- originalRoute = Routes[options.routeIndex];
- }
- // The MapPageController calls this when loading its page.
- // You should return an array of objects specifying buttons you
- // would like to display at the bottom of the map, e.g.,
- // {
- // title: "Start",
- // id: "startButton", (optional)
- // }
- // Note: This doesn't support an "onClick" property like in
- // Assignment 1.
- this.mapPageButtonControls = function()
- {
- var panToRoute =
- {
- title: "Find Route",
- };
- var routeStats =
- {
- title: "Route Stats",
- };
- var simplified =
- {
- title: "Simplified Route"
- };
- console.log("View Route - mapPageButtonControls");
- return [panToRoute, routeStats, simplified];
- }
- // The MapPageController calls this when user taps on a button
- // specified by mapPageButtonControls(). The buttonIndex will
- // be the index of the button in the aray you returned.
- this.mapPageButtonTapped = function(buttonIndex)
- {
- if (buttonIndex == 0)
- {
- viewRoutePageController.panToLocation(originalRoute.locations[0].Latitude, originalRoute.locations[0].Longitude)
- secondMode = "oRoute";
- }
- else if (buttonIndex == 1)
- {
- viewRoutePageController.displayMessage("You've embarked on such a journey for " + self.TotalDistance(originalRoute.locations) + " metres." + "<br/ >" + "The average speed was " + (self.TotalDistance(originalRoute.locations)/self.totalTime(originalRoute.locations)).toFixed(1) + "m/s");
- }
- else if(buttonIndex == 2)
- {
- if(secondMode == "oRoute")
- {
- secondMode = "sRoute";
- console.log("sRoute");
- viewRoutePageController.displayMessage("Simplified route");
- self.simplifiedRoute = this.simplifyRoute(originalRoute.locations.slice());
- viewRoutePageController.repaintOverlay();
- }
- else if(secondMode == "sRoute")
- {
- secondMode = "oRoute";
- console.log("oRoute");
- viewRoutePageController.displayMessage("Original route");
- viewRoutePageController.repaintOverlay();
- }
- }
- console.log("View Route - mapPageButtonTapped(" + buttonIndex + ")");
- }
- // The MapPageController calls this when the canvas needs to be
- // redrawn, such as due to the user panning or zooming the map.
- // It clears the canvas before calling this method.
- // 'context' is an HTML canvas element context. This is a
- // transparent layer that sits above the map and is redrawn
- // whenever the map is panned or zoomed. It can be used to
- // draw annotations on the map or display other information.
- this.mapPageDrawOverlay = function(context)
- {
- //Drawing the line of the route without the dots
- if(secondMode== "oRoute")
- {
- loc = originalRoute.locations.slice(0);
- } else {
- loc = self.simplifiedRoute.slice(0);
- }
- for(var i=0; i +1 <loc.length; i++)
- {
- var pointFrom = loc[i];
- var pointTo = loc[i+1];
- var posFrom = viewRoutePageController.canvasPointFromLocation(pointFrom.Latitude,pointFrom.Longitude);
- var posTo= viewRoutePageController.canvasPointFromLocation(pointTo.Latitude,pointTo.Longitude);
- context.beginPath();
- context.moveTo(posFrom.x,posFrom.y);
- context.lineTo(posTo.x,posTo.y);
- context.strokeStyle = '#8A00B8';
- context.stroke();
- }
- //Takes the first point (of index 0) and draws that as a dot
- for (var p = 0; p < loc.length; p++) {
- firstPoint = viewRoutePageController.canvasPointFromLocation(loc[p].Latitude,loc[p].Longitude)
- context.beginPath();
- context.arc(firstPoint.x , firstPoint.y , 10, 0, 2 * Math.PI, false);
- context.fillStyle = 'pink';
- context.fill();
- context.lineWidth = 5;
- context.strokeStyle = '#8A00B8';
- context.stroke();
- }
- console.log("View Route - mapPageDrawOverlay");
- }
- // The MapPageController calls this to ask if it should return
- // back to the start screen of the app when the user taps the
- // done button. If you are not letting the user return, you
- // should probably call displayMessage() to inform them why.
- this.mapPageShouldReturnFromDoneButtonTap = function()
- {
- console.log("viewPage mapShouldReturnFromDoneButtonTap");
- return true;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement