Three more 200k rides and I have another R12 medal, yay!
I want to finish up the software part of my current project. Starting from where we left off in the last blog entry, add the following line at the end of the initialize function...
panorama = new google.maps.StreetViewPanorama(street_canvas, {});
walkRoute();
Remove the alert from the end of the initialize() function.
Now change the <body></body> section to look like this...
<body style="height:98%" onload="initialize()" onmousedown="walkRoute();"> <div id="street_canvas" style="height:98%; width:100%"></div> </body>
Everytime the left or right mouse button is pressed we will call a function called WalkRoute. This will display a Google Streetlevel image in the new street_canvas div. Add the following global variable declarations after the line that says 'var R = 6371;'
var panorama; var waypoint = 0; var distanceThisLeg = 0; // km var rideDistancekm = 0; // Distance ridden - controls start point var courseLengthkm = 0; // course length var stepDistancekm = .015; // km - controls distance between frames var rpf = 4 // revolutions per frame - controls speed var rslf = rpf; // revolutions since last frame
Now let's write WalkRoute(). Insert this code after the initialize() functions.
function walkRoute()
{ if (rslf < rpf)
{ rslf++;
return;
}
try
{ rideDistancekm += stepDistancekm;
while (rideDistancekm >= route[waypoint].totalAtStartkm + route[waypoint].distancem / 1000) // Start next leg
{ waypoint += 1;
if (waypoint >= route.length)
{ alert("Done");
return;
}
}
var legDistancekm = rideDistancekm - route[waypoint].totalAtStartkm;
var point = getNextLatLong(route[waypoint].latitude, route[waypoint].longitude, legDistancekm, route[waypoint].bearing);
}
catch (ex)
{ alert("Stepping: " + ex.message);
}
try
{ var povOptions = { heading: route[waypoint].bearing, pitch: 0, zoom: 1 };
panorama.setPov(povOptions);
panorama.setPosition(point);
panorama.setVisible(true);
}
catch (ex)
{ alert("Rendering:" + ex.message);
}
rslf = 1;
}
function getNextLatLong(oldLat, oldLong, distance, bearing)
{ var latRad = toRad(oldLat);
var lngRad = toRad(oldLong);
var Rdistance = distance / R; // km
var dirRad = toRad(bearing);
var newLatRad = Math.asin(Math.sin(latRad) * Math.cos(Rdistance) + Math.cos(latRad) * Math.sin(Rdistance) * Math.cos(dirRad));
var newLngRad = lngRad + Math.atan2(Math.sin(dirRad) * Math.sin(Rdistance) * Math.cos(latRad), Math.cos(Rdistance) - Math.sin(latRad) * Math.sin(latRad));
newLngRad = ((newLngRad + (3 * Math.PI)) % (2 * Math.PI)) - Math.PI;
var point = new google.maps.LatLng(toDeg(newLatRad),toDeg(newLngRad));
return point;
}
function toRad(d) {
return d * Math.PI / 180;
}
function toDeg(r) {
return r * 180 / Math.PI;
}
Although this works, there's several things that could be improved.
- Add some information such as distance, elevation, speed, rate of climb.
- There are small pans left and right on several frames that I would like to remove.
- When you get to an intersection it's difficult to tell which way you are turning.
- Magnetic switches tend to bounce. We can detect and ignore bounces.
No comments:
Post a Comment