Photosynth Javascript API Documentation - How To

Version 0.1 - Back to Photosynth Javascript API Documentation

Overview

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>