Trailview 360° Camera Panorama Viewer

Here’s a screen shot from the proof-of-concept demonstration of my trailview camera javascript viewer:

The actual viewer is located here:

Panoramic Trail Viewer – Mill Creek Link

Be patient. Images are rendered using HTML5 canvases and each panorama is an eight-megapixel, 2MB file. It can take a few seconds to download an image from the server and another 5 to 10 seconds to decompress the image. Once the image is loaded, panning and zooming are actually quite smooth. I’ve tested this with Firefox, Safari, and Chrome on a Mac. Tablets and phones don’t have enough horsepower for the large images. IE on Windows is known not to work. Like I said, it’s a proof of concept.

The upper left corner is the panoramic image which can be scrolled a full 360 degrees by 180 degrees by clicking and dragging the mouse. My camera only captures 360 by 90 degrees so the ground and sky appear as dark grey regions. The image can be zoomed in and out using the mouse wheel.

The upper right corner is the status display. The status display displays the user’s compass heading as well as the trail relative heading with 0° representing the down trail direction (walking from the green start flag to the red end flag) and 180° representing the up trail direction (walking from the red end flag to the green start flag). Camera angles and panorama numbers are displayed here too.

The lower left corner is a map displaying the user’s current position on the trail. The green flag is the start of the trail, the red flag is the end of the trail, the blue line is the trail, and the green dot is the user’s current position. The user’s current position can be moved by clicking on the trail.

The lower right corner is an elevation profile of the trail. The green dot represents the user’s current position. The user’s current position can be moved by clicking on the profile.

For more information on the DIY 360 degree panoramic camera rig I used to take the panoramas, please watch my youtube video:

360 Panorama Camera Built with GoPro Hero 2 Cameras

It’s constructed from an aluminum housing, four GoPro Hero 2 cameras, a control board I built, and a tilt-compensated electronic compass. It’s controlled over Bluetooth from my Android phone.

A final note: Google Maps has a Streetview API that would permit these same panoramas to be displayed very quickly using their Streetview software. I may move to that in the future but I wanted the first version to be completely self-contained and work without a continuous connection to the Internet.

This entry was posted in Trailview, Trailview Software. Bookmark the permalink.

Comments are closed.