A virtual tour to guide new students

While working at the Engineering and Water Sciences of the Universidad Nacional del Litoral (FICH-UNL), I had to devise a way of letting first-year students find their way around the different areas of the Faculty. Since they don’t really like to read long guides (let’s face it, they don’t) but they like to “play” with, the development team thought it would be a good idea to make an interactive virtual tour, something that would literally show them where to find each office and anything they might actually need.

How the virtual tour was created

The first step was to create the virtual tour “movies” that would show students how to get around each floor. This was done with a cellphone and walking. No mystery there.

We then converted each MP4 file to an image sequence, using Avidemux, free video editor designed for simple cutting, filtering and encoding tasks. After this, repeated this for each MP4 file and stored each sequence into a separate folder.

After that, the team used ProgressiveImageSequence Javascript library, created by Hinderling Volkart AG quite some time ago. Based on this, a customized scroll handler was created, where “hotspots” (boxes with information on each office or important location) are displayed on screen.

In order to determine when each hotspot should be displayed, a percentage-based calculation was devised. Each hotspot was assigned a data-position, a value between 0 and 1, corresponding to how far down the movie it should become visible.

For instance, if the value was 0.35, it means that it would show up when the user scrolled until reaching 35% of the image sequence (movie). A rather complex calculation was used to determine the y-position of the box while it was visible.

360° views

After each floor had its own movie, 360° views of some areas were captured. Using a cellphone capable of capturing images in Google Photosphere format (the one used for displaying Streetview pictures), they were added as modal dialogs (using JQueryUI‘s Dialog widget). This way, when someone clicked on the links (displayed on the “hotspot” boxes), a dialog shows up with the Photosphere and the pan/zoom controls.

The result.

After working on the project for a few days, we managed it to make the virtual tour work.