In this article I will show you how to use a combination of free tools and services to produce and host a high quality panorama. You will render this using Silverlight2 and display it geo-referenced on Virtual Earth. The combination of hosted storage and services from Windows Live gives us a powerful Rich Internet Application from a basic HTML page. The tools and services you will use are:
The final result below is made from eight photos taken of the Story Bridge in Brisbane, Australia at 6am.
Step 1 - Find a good Subject
Take you time to find a great landscape, cityscape or landmark. Choose a good time of day, dawn or dust offers better light then during the middle of the day.
You will need to take a set of overlapping photos to allow the stitching software to compose the final image. For my panorama I used a 17mm wide angled 'L' lenses on a Canon 350d DSLR, each image is 8MP. The more level the set of photos the better the final composition will be. I used a tripod with a special panorama head to eliminate parallax effects but you can still get great results from handheld shots. The images should be taken from the same spot and in rapid succession to reduce inconsistencies between shots. At dawn the light can change very rapidly.
This shows the shots overlapping, you don't have to do anything manual here, you will use an automated stitching tool.
Step 2 - Windows Live Photo Gallery
Windows Live Photo Gallery is the consumer level photo tool for Windows. It offers a great importer, tagging, rating and publishing system for your photos. You download it as part of the Windows Live suit from http://get.live.com
Within the interface creating a panorama couldn't be easier. You simply select the set of images, right click and choose "Create panoramic photo"
The output is a 9745 x 3775 pixel stitch, colour corrected and aligned. The image file is 4.5MB so how can we effectively show this on the web with all of it resolution? For example this shows a full resolution section of the completed stitch:
Step 3 - Deep Zoom Composer
The solution is to use the new Deep Zoom technology from Silverlight2. The new control, multiscaleimage, streams in the best resolution sections of the image as the user needs it based on their interactivity and their screen resolution. And with the newly updated Deep Zoom Composer this is as simple to create as a few clicks. Download the composer from here.
Create a new project. Import the stitched image and drag it onto the compose area. The composer allows you to show many images, arrange and resize them on the canvas using a set of helpful align tools. You will drop on the one image.
For this project we need to simply export the image as a composition, that is a single image. The other option, a collection, allows you to export a set of composed images that can be rearranged programmatically at runtime. You may have seen something like this at http://memorabilia.hardrock.com
For output type you want "Export Image and Silverlight Project". This will produces the visual assets as well as a ready to use silverlight2 project. This project contains all the functionality needed for this application, you don't need to write any .net Silverlight code.
When the export completes, you can preview the Silverlight application in a browser.
Step 4 - Silverlight Streaming
The application is about 10MB. To serve this on the web we would need a web server configured to serve Silverlight XAP files and you would need to consider the performance requirements and the bandwidth. The Silverlight Streaming service from Windows Live solves these problems allowing you to rapidly deploy your Silverlight application using hosting provided by Microsoft to facilitate the growth of Silverlight. Sign up for a free 10GB account at http://silverlight.live.com
- Sign into your newly created account
- Goto Manage Applications
- Click Upload an Application
- Name the Application
- Create a Manifest file
- Zip the application
- Upload
- Get the Iframe snippet
Give your application a Name.
In order to upload the application you need to add an XML file called a Manifest. It specifies the application properties so the Silverlight service knows what to do with the application. Here is one for the default output from Deep Zoom Composer that you can reuse:
<SilverlightApp>
<version>2.0</version>
<source>DeepZoomOutput.xap</source>
<width>800</width>
<height>600</height>
<background>gray</background>
<isWindowless>false</isWindowless>
</SilverlightApp>
This file needs to be put in the generated "C:\Users\john\Documents\Expression\Deep Zoom Composer Projects\LiveSideArticle\source images\OutputSdi\livesidearticle\DeepZoomOutput_Web\ClientBin" folder next to the DeepZoomOutput.xap and GeneratedImages folder. Compress these three items into a zip file. In Windows Vista you can do this off the right click context menu - Send to -> Commpressed (zipped) folder.
Upload the single compressed file to Silverlight Streaming. When it is uploaded you will get the snippets page with two options for how you can display this new application in your web pages.
For this project you will use the simple Iframe, this is a perfect snippet for including in an article or blog. Do note Method 2, the three snippets, allow your Silverlight application to be embedded into the page without the use of an Iframe. Also note that for Video there is a specific Upload Video section that will encode your video and produce the video application for you.
You can preview your application by clicking on "Launch Application Test Page"
Step 5 - Virtual Earth
The final step for your project is to show the Deep Zoom image at the actual location you took the photo on a Virtual Earth map. This requires a simple HTML page with a little bit of Virtual Earth JavaScript. The concept is to the load the map in Aerial mode, add a pushpin and show it infobox (little popup) housing the Iframe with our newly created Silverlight application.
The complete HTML follows, for your project simple replace the Iframe and the Latitude/Longitude position. It can be handy to have a GPS with you to record the exact location when you take the photo. Or using http://maps.live.com later you can choose the location manually.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Silverlight Streaming Panoramas on Virtual Earth</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<script type="text/javascript"
src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1">
</script>
<style type="text/css">
body
{
margin: 0px;
}
.customInfoBox-body
{
width: 420px;
height: 260px;
overflow: hidden;
padding: 0px !important;
top: 0 !important;
}
.customInfoBox-shadow
{
width: 420px;
height: 260px;
}
.customInfoBox-with-leftBeak
{
width: 0 !important;
height: 0 !important;
}
.VE_Pushpin_Popup_Title
{
padding: 5px;
}
.VE_Pushpin_Popup_Body
{
text-align: left;
margin-left: 0px;
}
</style>
<script type="text/javascript">
var map = null;
function GetMap()
{
map = new VEMap("myMap");
map.onLoadMap = onLoadMap;
map.LoadMap(new VELatLong(-27.46212,153.03705)
, 16
, VEMapStyle.Aerial
, false
, VEMapMode.Mode2D
, false);
}
function onLoadMap() {
map.ClearInfoBoxStyles();
var shape = new VEShape(VEShapeType.Pushpin
, new VELatLong(-27.46212,153.03705));
shape.SetTitle('The Story Bridge, Brisbane, Australia');
var desc = '<iframe src="' +
'http://silverlight.services.live.com/invoke/31868/LiveSideArticlePanorama/iframe.html"' +
' scrolling="no" frameborder="0" style='width:400px; height:200px'></iframe>'
shape.SetDescription(desc);
shape.SetCustomIcon('pin.png');
map.AddShape(shape);
map.Pan(200,0);
//The pan causes our infobox to close so we have to wait 2 secs
setTimeout(function(){ if (shape) map.ShowInfoBox(shape)},2000);
}
</script>
</head>
<body onload="GetMap();">
<div id="myMap"
style="position:relative; width:600px; height:600px;"></div>
</body>
</html>
Conclusion
So in 5 easy steps and very little code we have a full interactive map with a pin that pops up a deep zoom Silverlight2 panorama allowing you explore your image at full resolution on demand. We only used free tools, it was pretty straightforward (I hope!) and all we need to host the Rich Application is a simple HTML page. I can even embed it in my blog as an Iframe. How cool is that?
With a little more effort you could personalise the HTML page and add more panoramas from all your travels.
I hope you have enjoyed this article and please post up links to your creations using these cool services.