lovettbarron/Multipoint Hyperlapse

## Multipoint Hyperlapse
<!DOCTYPE html>
<html>
<head>
	<title>Simple Example</title>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
	<script src="js/canvas-toBlob.js"></script>
	<script src="js/FileSaver.js"></script>
	<script src="js/three.min.js"></script>
	<script src="js/GSVPano.js"></script>
	<script src="../src/Hyperlapse.js"></script>
	<style>
		div,body {
			padding: 0;
			margin: 0;
		}
		#pano {
			width: 100%;
			height: auto;
			padding: 0;
		}
	</style>
	<script>
		var hyperlapse;
		function init() {

			var path = [

					{
						"lat": 42.359812,
						"lng": -71.093606
					},

					{
						"lat": 42.36292,
						"lng": -71.089486
					},

					{
						"lat": 42.362777,
						"lng": -71.087276
					},

					{
						"lat": 42.373114,
						"lng": -71.095172
					},

					{
						"lat": 42.376443,
						"lng": -71.10427
					},

					{
						"lat": 42.368342,
						"lng": -71.108647
					}


			];
			var iter = 0;
			var frameNum = 0;
			var canvas, ctx;

			function setNewPosition() {
				iter = iter < path.length ? iter + 1 : 0;

				directions_service.route(
					{
						origin: new google.maps.LatLng(path[iter].lat,path[iter].lng),
						destination: new google.maps.LatLng(path[iter+1].lat,path[iter+1].lng),
						travelMode: google.maps.DirectionsTravelMode.DRIVING
					},
					function(response, status) {
					if (status == google.maps.DirectionsStatus.OK) {
						hyperlapse.generate( {route:response} );

					} else {
						console.log(status);
					}
				});

			};

			hyperlapse = new Hyperlapse(document.getElementById('pano'), {
				lookat: new google.maps.LatLng(path[iter+1].lat,path[iter+1].lng),
				width: 1280,
				height: 800,
				distance_between_points: 2,
				max_points: 200,
				zoom: 3,
				//use_lookat: true,
				elevation: 50
			});

			hyperlapse.onError = function(e) {
				console.log(e);
			};

			hyperlapse.onRouteComplete = function(e) {
				console.log('onRouteComplete called', e)
				hyperlapse.load();
			//	setNewPosition()

			};

			hyperlapse.onLoadComplete = function(e) {

				canvas = $('canvas')[0], ctx = canvas.getContext("2d");

				console.log('onLoadComplete called', e)
				hyperlapse.setLookat(new google.maps.LatLng(path[iter+1].lat,path[iter+1].lng), true, function() {
					//hyperlapse.play();
				})


			};

			hyperlapse.onFrame = function(e) {
				console.log("frame", e.position);
				console.log("length", hyperlapse.length());

				// canvas.toBlob(function(blob) {
				//     saveAs(blob, frameNum + ".png");
				//     frameNum+=1;
				// });

				if(e.position == hyperlapse.length()-1) {
					console.log("HOLY FUCK HERE WE GO");
					hyperlapse.pause();
					setNewPosition();
				}
			};

			// Google Maps API stuff here...
			var directions_service = new google.maps.DirectionsService();

			var route = {
				request:{
					origin: new google.maps.LatLng(path[iter].lat,path[iter].lng),
					destination: new google.maps.LatLng(path[iter+1].lat,path[iter+1].lng),
					travelMode: google.maps.DirectionsTravelMode.DRIVING
				}
			};

			directions_service.route(route.request, function(response, status) {
				if (status == google.maps.DirectionsStatus.OK) {
					hyperlapse.generate( {route:response} );
				} else {
					console.log(status);
				}
			});

		}


		$().ready(function() {
			$("body").keydown(function(e) {
			  if(e.keyCode == 37) { // left
			    hyperlapse.next();
			  }
			  else if(e.keyCode == 39) { // right
			    hyperlapse.prev();
			  }
			});

		});

		window.onload = init;

	</script>
</head>
<body>
	<div id="pano"></div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple Example</title>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
	<script src="js/canvas-toBlob.js"></script>
	<script src="js/FileSaver.js"></script>
	<script src="js/three.min.js"></script>
	<script src="js/GSVPano.js"></script>
	<script src="../src/Hyperlapse.js"></script>
	<style>
	div,body {
	padding: 0;
	margin: 0;
	}
	#pano {
	width: 100%;
	height: auto;
	padding: 0;
	}
	</style>
	<script>
	var hyperlapse;
	function init() {

	var path = [

	{
	"lat": 42.359812,
	"lng": -71.093606
	},

	{
	"lat": 42.36292,
	"lng": -71.089486
	},

	{
	"lat": 42.362777,
	"lng": -71.087276
	},

	{
	"lat": 42.373114,
	"lng": -71.095172
	},

	{
	"lat": 42.376443,
	"lng": -71.10427
	},

	{
	"lat": 42.368342,
	"lng": -71.108647
	}


	];
	var iter = 0;
	var frameNum = 0;
	var canvas, ctx;

	function setNewPosition() {
	iter = iter < path.length ? iter + 1 : 0;

	directions_service.route(
	{
	origin: new google.maps.LatLng(path[iter].lat,path[iter].lng),
	destination: new google.maps.LatLng(path[iter+1].lat,path[iter+1].lng),
	travelMode: google.maps.DirectionsTravelMode.DRIVING
	},
	function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	hyperlapse.generate( {route:response} );

	} else {
	console.log(status);
	}
	});

	};

	hyperlapse = new Hyperlapse(document.getElementById('pano'), {
	lookat: new google.maps.LatLng(path[iter+1].lat,path[iter+1].lng),
	width: 1280,
	height: 800,
	distance_between_points: 2,
	max_points: 200,
	zoom: 3,
	//use_lookat: true,
	elevation: 50
	});

	hyperlapse.onError = function(e) {
	console.log(e);
	};

	hyperlapse.onRouteComplete = function(e) {
	console.log('onRouteComplete called', e)
	hyperlapse.load();
	// setNewPosition()

	};

	hyperlapse.onLoadComplete = function(e) {

	canvas = $('canvas')[0], ctx = canvas.getContext("2d");

	console.log('onLoadComplete called', e)
	hyperlapse.setLookat(new google.maps.LatLng(path[iter+1].lat,path[iter+1].lng), true, function() {
	//hyperlapse.play();
	})


	};

	hyperlapse.onFrame = function(e) {
	console.log("frame", e.position);
	console.log("length", hyperlapse.length());

	// canvas.toBlob(function(blob) {
	// saveAs(blob, frameNum + ".png");
	// frameNum+=1;
	// });

	if(e.position == hyperlapse.length()-1) {
	console.log("HOLY FUCK HERE WE GO");
	hyperlapse.pause();
	setNewPosition();
	}
	};

	// Google Maps API stuff here...
	var directions_service = new google.maps.DirectionsService();

	var route = {
	request:{
	origin: new google.maps.LatLng(path[iter].lat,path[iter].lng),
	destination: new google.maps.LatLng(path[iter+1].lat,path[iter+1].lng),
	travelMode: google.maps.DirectionsTravelMode.DRIVING
	}
	};

	directions_service.route(route.request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
	hyperlapse.generate( {route:response} );
	} else {
	console.log(status);
	}
	});

	}


	$().ready(function() {
	$("body").keydown(function(e) {
	if(e.keyCode == 37) { // left
	hyperlapse.next();
	}
	else if(e.keyCode == 39) { // right
	hyperlapse.prev();
	}
	});

	});

	window.onload = init;

	</script>
	</head>
	<body>
	<div id="pano"></div>
	</body>
	</html>