Using the Photosynth Javascript API you can embed a Photosynth viewer in your webpage and control the contents of the viewer through the exposed API.
<!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" >
<!-- saved from url=(0014)about:internet -->
<head>
<!-- IMPORTANT: Do not copy these files to your own server, these files are updated regularly and should always be referenced from the Photosynth website. -->
<script type="text/javascript" src="http://photosynth.net/api/Silverlight.js" ></script>
<script type="text/javascript" src="http://photosynth.net/api/Microsoft.Photosynth.js" ></script>
<title>Photosynth API Example</title>
<style type="text/css">
html, body
{
width: 100%;
height:100%;
margin:0;
padding:0;
border:0;
}
</style>
<script type="text/javascript">
var viewer = null;
function bodyLoaded() {
//Get an instance of the viewer, associated with a div tag
viewer = new Microsoft.Photosynth.Viewer("silverlightDiv");
//Populate the load parameters for the synth
var loadParameters = new Microsoft.Photosynth.Viewer.LoadParameters("93a9f00a-8586-4d30-8e92-38752133a696",
"http://mslabs-181.vo.llnwd.net/d8/photosynth/M6/images/5A/A5/3F/5AA53F679866D08C86085F0869E2CFD2_files/thumb.jpg",
true,
true);
//Hook up to the load event of the viewer, this will allow us to set
//the initial starting state of the viewer once it has loaded
viewer.loadCollectionCompleted = viewerLoaded;
//The display mode event lets you know when a user goes from 2D -> 3D or vice versa
viewer.displayModeChanged = displayModeChanged;
viewer.pointCloudModeChanged = pointCloudModeChanged;
//Attempt to load the synth, if Silverlight is not installed, the
//viewer will automatically display some HTML to encourage the user
//to install Silverlight.
viewer.loadCollectionAsync(loadParameters);
}
//Called when the viewer loads successfully
function viewerLoaded(sender) {
alert('viewer loaded');
}
//Called when the viewers display mode changes
function displayModeChanged(sender) {
if(sender.getCurrentDisplayMode() == Microsoft.Photosynth.DisplayMode.TwoD)
{
alert('display mode changed to 2D');
}
else
{
alert('display mode changed to 3D');
}
}
function moveToImageImmediate()
{
//Get the id in the textbox on the page
var tb = document.getElementById("txtBxTargetImage");
//Cause the 3D viewer to navigate to the target projector immediately
viewer.moveToImage(tb.value, Microsoft.Photosynth.NavigationType.Immediate);
}
function moveToImageDirect()
{
var tb = document.getElementById("txtBxTargetImage");
//Cause the 3D viewer to navigate to the target projector via the most direct route
viewer.moveToImage(tb.value, Microsoft.Photosynth.NavigationType.Direct);
}
function moveCamera() {
//Get the current viewport and camera state
var viewport = viewer.viewport3D;
var w = viewport.width;
var h = viewport.height;
var ar = viewport.aspectRatio;
var pos = viewport.camera.position;
var rot = viewport.camera.rotation;
var lookDir = viewport.camera.lookDirection;
alert('vpw=' + w + ', vph=' + h + ', vpar=' + ar + 'pos=[x:' + pos.x + ', y:' + pos.y + ', z:' + pos.z + '], rot=[x:' + rot.x + ', y:' + rot.y + ', z:' + rot.z + ', w:' + rot.w + '], lookDir=[x:' + lookDir.x + ', y:' + lookDir.y + ', z:' + lookDir.z + ']');
alert('The current image id is:' + viewer.getSelectedImageId());
//Update camera position to move along its side vector
var newPos = new Microsoft.Photosynth.Math.Vector3D(pos.x + viewport.camera.sideDirection.x,
pos.y + viewport.camera.sideDirection.y,
pos.z + viewport.camera.sideDirection.z);
viewport.camera.position = newPos;
}
function setFov()
{
try
{
var fov = document.getElementById("txtBxFov").value;
var viewport = viewer.viewport3D;
viewport.camera.fieldOfView = fov;
}
catch(e)
{
alert('Invalid Field Of View value');
}
}
function getPoseState() {
document.getElementById("txtBxPoseString").value = viewer.getPoseState();
}
function setPoseState() {
//Here you can pass in a value that was returned from the getPostState to set the viewer to look at the exact position
//as the viewer was when getPoseState was called.
viewer.setFromPoseState(document.getElementById("txtBxPoseString").value);
}
function toggleSlideshow()
{
if(viewer.isSlideshowRunning())
{
alert('stopping slideshow');
}
else
{
alert('starting slideshow');
}
viewer.toggleSlideshow();
}
function togglePointCloud()
{
var currentState = viewer.getPointCloudMode();
if(currentState == Microsoft.Photosynth.PointCloudMode.ImagesOnly)
{
viewer.setPointCloudMode(Microsoft.Photosynth.PointCloudMode.ImagesAndPointCloud);
}
else if(currentState == Microsoft.Photosynth.PointCloudMode.ImagesAndPointCloud)
{
viewer.setPointCloudMode(Microsoft.Photosynth.PointCloudMode.PointCloudOnly);
}
else if(currentState == Microsoft.Photosynth.PointCloudMode.PointCloudOnly)
{
viewer.setPointCloudMode(Microsoft.Photosynth.PointCloudMode.ImagesOnly);
}
}
function pointCloudModeChanged(viewer)
{
alert('point cloud mode changed');
}
</script>
</head>
<body onload="bodyLoaded();" style="background:#000000;height:100%;width:100%;margin:0;padding:0;">
<div >
<input type="text" value="target" id="txtBxTargetImage" />
<input type="text" value="poseString" id="txtBxPoseString" />
<input type="text" value="fov" id="txtBxFov" />
<input type="button" value="Set FOV" onclick="setFov();" />
<input type="button" value="Move Camera" onclick="moveCamera();" />
<input type="button" value="Get Pose State" onclick="getPoseState();" />
<input type="button" value="Set Pose State" onclick="setPoseState();" />
<input type="button" value="Nav imm" onclick="moveToImageImmediate();" />
<input type="button" value="Nav dir" onclick="moveToImageDirect();" />
<input type="button" value="Toggle Slideshow" onclick="toggleSlideshow();" />
<input type="button" value="Toggle point cloud" onclick="togglePointCloud();" />
</div>
<div id="silverlightDiv" style="width:80%;height:80%;vertical-align:middle;" />
</body>
</html>