Skip to content

Commit

Permalink
Images transition should be smoothier
Browse files Browse the repository at this point in the history
  • Loading branch information
osingla committed Jan 7, 2017
1 parent 257de62 commit 5e420f2
Show file tree
Hide file tree
Showing 3 changed files with 152 additions and 23 deletions.
1 change: 1 addition & 0 deletions RouteView.html
Expand Up @@ -871,6 +871,7 @@
<div id="id_panorama" style="display:None; width: 0%; height: 0%"> </div>
<div id="id_panorama2" style="position:absolute; width: 100%; height: 100%; top: 0; xleft: 0" > </div>
<div id="id_panorama3" style="position:absolute; width: 100%; height: 100%; top: 0; xleft: 0" > </div>
<div id="id_panorama4" style="position:absolute; width: 100%; height: 100%; top: 0; xleft: 0" > </div>
</td>

</tr>
Expand Down
98 changes: 75 additions & 23 deletions RouteView.js
Expand Up @@ -14,7 +14,8 @@ define( function( m ) {
var autocompletes = [];
var map;
var service;
var panorama, panorama2, panorama3;
var panorama, panorama2, panorama3, panorama4;
var pano_pos = [];
var map_or_panorama_full_screen;
var panorama_full_screen;
var curr_route = undefined;
Expand Down Expand Up @@ -95,13 +96,13 @@ define( function( m ) {

}

function restart_animate_timer( route_index ) {
function restart_animate_timer( route_index, fast ) {

if ( timer_animate != undefined )
clearTimeout( timer_animate );
timer_animate = setTimeout( (function(route_index) { return function() {
cb_animate( route_index, curr_dist+step );
}})(route_index), interval );
}})(route_index), (fast) ? 125 : interval );
}

function cb_animate( route_index, d ) {
Expand All @@ -127,13 +128,13 @@ define( function( m ) {
map.panTo( p );

street_view_check[(route_index == -1) ? 0 : route_index].getPanoramaByLocation(p, 50, (function(route_index) { return function(result, status) {
// console.log(result);
// console.log(result);
if (status == google.maps.StreetViewStatus.ZERO_RESULTS) {
console.log( "No street view available - route=" + route_index );
marker_small_street_view.setPosition( null );
marker_no_street_view.setPosition( p );
if ( step > 0 )
restart_animate_timer( route_index );
restart_animate_timer( route_index, false );
}
else {
marker_no_street_view.setPosition( null );
Expand All @@ -146,30 +147,55 @@ define( function( m ) {
panorama.addListener('pano_changed', function() {
var pano_id = panorama.getPano();
if (pano_id != prev_pano_id) {
if ((++pano_cnt % 2) == 0) {
document.getElementById("id_panorama3").style.zIndex = "1"
document.getElementById("id_panorama2").style.zIndex = "0";
panorama2.setPano( prev_pano_id );
if ( prev_bearing != undefined )
panorama2.setPov( { heading: prev_bearing, pitch: 1 } );
}
else {
document.getElementById("id_panorama2").style.zIndex = "1"
document.getElementById("id_panorama3").style.zIndex = "0";
panorama3.setPano( prev_pano_id );
if ( prev_bearing != undefined )
panorama3.setPov( { heading: prev_bearing, pitch: 1 } );
// marker_small_street_view.setMap( map );
var index = 0;
switch (pano_cnt++ % 3) {
case 0 :
pano_pos[4] = panorama.getPosition();
document.getElementById("id_panorama2").style.zIndex = "1";
document.getElementById("id_panorama3").style.zIndex = "0"
document.getElementById("id_panorama4").style.zIndex = "0"
panorama4.setPano( prev_pano_id );
if ( prev_bearing != undefined )
panorama4.setPov( { heading: prev_bearing, pitch: 1 } );
// console.log( pano_cnt + " --> 2" );
if ( pano_cnt >= 4 )
marker_small_street_view.setPosition( pano_pos[2] );
break;
case 1 :
pano_pos[2] = panorama.getPosition();
document.getElementById("id_panorama3").style.zIndex = "1";
document.getElementById("id_panorama2").style.zIndex = "0"
document.getElementById("id_panorama4").style.zIndex = "0";
panorama2.setPano( prev_pano_id );
if ( prev_bearing != undefined )
panorama2.setPov( { heading: prev_bearing, pitch: 1 } );
// console.log( pano_cnt + " --> 3" );
if ( pano_cnt >= 4 )
marker_small_street_view.setPosition( pano_pos[3] );
break;
case 2 :
pano_pos[3] = panorama.getPosition();
document.getElementById("id_panorama4").style.zIndex = "1"
document.getElementById("id_panorama3").style.zIndex = "0";
document.getElementById("id_panorama2").style.zIndex = "0";
panorama3.setPano( prev_pano_id );
if ( prev_bearing != undefined )
panorama3.setPov( { heading: prev_bearing, pitch: 1 } );
// console.log( pano_cnt + " --> 4" );
if ( pano_cnt >= 4 )
marker_small_street_view.setPosition( pano_pos[4] );
break;
}
prev_pano_id = pano_id;
if ( step > 0 )
restart_animate_timer( route_index );
restart_animate_timer( route_index, (pano_cnt <= 3) );
}
});
map.setStreetView( panorama );
// map.setStreetView( panorama );
panorama.setPosition( p );
if ( prev_bearing != undefined )
panorama.setPov( { heading: prev_bearing, pitch: 1 } );
marker_small_street_view.setPosition( p );
// if ( prev_bearing != undefined )
// panorama.setPov( { heading: prev_bearing, pitch: 1 } );
prev_bearing = bearing;
}
}
Expand Down Expand Up @@ -204,8 +230,10 @@ define( function( m ) {
panorama_resize( );
document.getElementById("id_panorama2").style.display = "";
document.getElementById("id_panorama3").style.display = "";
document.getElementById("id_panorama4").style.display = "";
panorama2.setVisible( true );
panorama3.setVisible( true );
panorama4.setVisible( true );

}

Expand Down Expand Up @@ -649,6 +677,7 @@ function calculateDistance(lat1, long1, lat2, long2)

dijit.byId('id_input_route').set( 'disabled', true );

console.log( "1 - DISABLED" );
dijit.byId('id_btn_pause').set( 'disabled', true );
dijit.byId('id_btn_stop').set( 'disabled', true );

Expand Down Expand Up @@ -757,6 +786,17 @@ function calculateDistance(lat1, long1, lat2, long2)
}
else if ( dijit.byId('id_btn_pause').get( 'label' ) == "Continue" ) {
dijit.byId('id_btn_pause').set( 'label', "Pause" );
switch ((pano_cnt-1) % 3) {
case 0 :
panorama.setPosition( pano_pos[2] );
break;
case 1 :
panorama.setPosition( pano_pos[3] );
break;
case 2 :
panorama.setPosition( pano_pos[4] );
break;
}
if ( timer_animate != undefined )
clearTimeout( timer_animate );
timer_animate = setTimeout( function() { cb_animate(curr_route, curr_dist); }, 250 );
Expand All @@ -770,6 +810,7 @@ function calculateDistance(lat1, long1, lat2, long2)

document.getElementById("id_panorama2").style.display = "none";
document.getElementById("id_panorama3").style.display = "none";
document.getElementById("id_panorama4").style.display = "none";

if ( timer_animate != undefined ) {
clearTimeout( timer_animate );
Expand All @@ -796,9 +837,11 @@ function calculateDistance(lat1, long1, lat2, long2)

panorama2.setVisible( false );
panorama3.setVisible( false );
panorama4.setVisible( false );

var route_index = curr_route;

console.log( "STOP - DISABLED" );
dijit.byId('id_btn_pause').set( 'disabled', true );
dijit.byId('id_btn_pause').set( 'label', "Pause" );
dijit.byId('id_btn_stop').set( 'disabled', true );
Expand Down Expand Up @@ -1249,6 +1292,11 @@ function calculateDistance(lat1, long1, lat2, long2)
var computedStyle = domStyle.getComputedStyle(node);
domGeom.setContentSize(node, box, computedStyle);

var box = { w: output.w, h: output.h };
var node = dom.byId( "id_panorama4" );
var computedStyle = domStyle.getComputedStyle(node);
domGeom.setContentSize(node, box, computedStyle);

});
}

Expand Down Expand Up @@ -1399,6 +1447,8 @@ function calculateDistance(lat1, long1, lat2, long2)
map.setStreetView( panorama2 );
panorama3 = new google.maps.StreetViewPanorama( document.getElementById('id_panorama3'), panorama_options );
map.setStreetView( panorama3 );
panorama4 = new google.maps.StreetViewPanorama( document.getElementById('id_panorama4'), panorama_options );
map.setStreetView( panorama4 );

window.onresize = function(event) {
panorama_resize( );
Expand Down Expand Up @@ -1787,6 +1837,7 @@ function calculateDistance(lat1, long1, lat2, long2)

document.getElementById("id_panorama2").style.display = "None";
document.getElementById("id_panorama3").style.display = "None";
document.getElementById("id_panorama4").style.display = "None";
});

});
Expand Down Expand Up @@ -2371,6 +2422,7 @@ console.log( places );
google.maps.event.trigger( panorama, 'resize' );
});

console.log( "DRIVE - ENABLED" );
dijit.byId('id_btn_pause').set( 'disabled', false );
dijit.byId('id_btn_stop').set( 'disabled', false );

Expand Down
76 changes: 76 additions & 0 deletions test.html
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="utf-8">
<title>Test Google StreetView NightMode issue</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.26"></script>
<style>
#map, #pano {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body onload="initMap();">
<table border="1" cellpadding="2" cellspacing="2" width="100%" height="100%">
<tr style="height:1%">
<td valign="middle" align="center" >
<button type="button" onclick="showPtA()">First point<br>(day)</button>
</td>
<td valign="middle" align="center" >
<button type="button" onclick="showPtB()">Second point<br>(night)</button>
</td>
</tr>
<tr>
<td>
<div id="map">
</div>
</td>
<td>
<div id="pano" style="visibility:hidden"></div>
</td>
</tr>
</table>
<script>
var map;
var panorama;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 35.720149, lng: -79.172462},
zoom: 8
});
panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), {
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
}
function showPtA() {
var p = {lat:35.720691, lng:-79.186840};
map.setCenter(p);
map.setZoom(16);
document.getElementById("pano").style.visibility = "";
panorama.setPosition(p);
console.log( document.getElementById('pano') );
document.getElementById('pano').onloadeddata = function() { console.log(1); }
}
function showPtB() {
console.log( document.getElementById('pano').innerHTML );
var p = {lat:35.720624, lng:-79.186843};
map.setCenter(p);
map.setZoom(16);
document.getElementById("pano").style.visibility = "";
panorama.setPosition(p);
}
</script>
</body>
</html>

0 comments on commit 5e420f2

Please sign in to comment.