使用DeeepZoom Composer进行富图像应用的开发(翻译--完)

建立Photosynth网络应用程序

   微软提供的Javascript库允许你使用Silverlight接口与Photosynth呈现器进行交互。你可以从http://photosynth.net/api/docs/default.html 找到这个Javascipt库的API。

   提示:这本书是写针对 Photosynth JavaScript API 库的版本 0.1。如果你需要使用更新的版本,则需要重构你的应用程序。

本节说明如何对您自己的网页如何操纵Photosynth 查看器(没有IFrame),并提供了一个简单的示例使用 JavaScript Photosynth API 来检索您合成器中的图像中的一些详细信息。这里也使用了和祖明的Stargate Universe Photosynth相同的技术。你可以从http://stargate.mgm.com/photosynth/index.html.看到他的详细使用。

使用API建立一个网络应用程序

 1.打开Visual Web Developer并选择文件菜单下的“新的Web站点”命令。

 2.在“新的站点”对话框中选择“空的恶Web站点”模板。

 3.键入一个新的“SbSPSDemo”的新的应用程序。

 4. Visual Web Developer将会创建一个新的工程。现在你可以添加一个命名为“index.htm”的HTML文件。

 5.在这个新的“index.htm”文件中,编辑“head”标签,在里面添加一个Photosynth Javascript库的引用。如下所示:

  <head>

    <title>Photosynth Test</title>

      <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>

 </head>

 6.编辑“body”标签创建两个“div”层:一个放置你的synth,另一个则放在关于你的synth的其他信息。

  提示:“body”标签的“onload”属性设置为”bodyLoaded”方法。

 <body onload="bodyLoaded();">

  <div id="pslayer" style="position: absolute; width: 742px; height: 501px; left:

   13px; top: 56px"></div>

   <div id="detailslayer" style="position: absolute; width: 273px; height: 496px;

      left: 766px; top: 52px">TEST</div>

  </body>

 7.现在“bodyLoaded”方法将会在你的页面载入时执行。他会使用Javascript API 载入你的synth.要这样做,你需要做以下的三个步骤:

  a.在页面的第一个“div”标签中初始化一个新的“Microsoft.Photosynth.Viewer”对象。

  b.设置玩家的载入参数,包括您的synth的 GUID。如果您还没有 GUID,请查看上一节申请一个。这样,它会帮助你和Photosynth.net上的成千上万的synth区别开来。

   c.用这个GUID初始化呈现器的参数。

 8.下面的事“bodyLoaded”方法的代码。记得放在你的HTML标记的“head”标签中。

<script type="text/javascript">

  function bodyLoaded() {

   var SYNTH = "d7de4242-db75-4cbe-ae09-100908205b0d";

   viewer = new Microsoft.Photosynth.Viewer("pslayer");

   varloadParameters = new

   Microsoft.Photosynth.Viewer.LoadParameters(SYNTH,"",false,false);

   viewer.loadCollectionAsync(loadParameters);

}

</script>

 9.按F5运行,你会看到你的命名为“Test”的synth页面。这是因为还有一个命名为“detaillayer”的“div”标签初始化了这个文本。

image

 

   这是值得花费一些时间试试这个 API。一个非常有用的功能是, Photosynth API 可以提供当前正在查看的图像的 ID。该 ID 对某些应用程序是很有用的,因为它可用于获取有关该synth的上下文相关数据。例如如果你在使用 Stargate synths 就会注意页面是基于您正在查看的图像在更新。

synths也经常包含复活节彩蛋synths。下一个示例将引导您完成这个项目,并发现它们是如何工作的。

添加复活节彩蛋

 1.每当用户移动到新图像,Photosynth 触发 moveToImageCompleted事件。您需要做的第一件事来处理该事件,编辑bodyLoaded处理程序函数,将它命名为ImageMoved。现在,添加以下bodyLoaded 函数:

viewer.moveToImageCompleted = ImageMoved;

  2.接下来,您需要写的是相当简单的事件处理程序。下面的事件处理程序将呈现当前正在查看详细信息中的图像的 ID:

functionImageMoved(sender) {

id = viewer.getSelectedImageId();

document.getElementById("detailslayer").innerHTML = id;

}

 3. F5 运行该应用程序并浏览synth。你从一个图像移动到另一个图像,您将看到当前图像的ID显示在 detailslayer中。

  4. 要使你显示的信息更有意义,您需要编写代码来检查HTML 分配给图像的 ID。因为可能你会有很多图像,您通过一个大的 case 语句为HTML创建不同 id 的代码段。另外,如果你想要能够处理庞大的图像 id列, 您可能会建立一个服务调用一个的数据库发送 ID,而后将它呈现在 HTML 相应的图层中— — 这个快速教程简单地说明了一些基础知识。更高级的知识您可以在其余时间浏览 http:photosynth.netapidocsdefault.html 的示例。以下是完整地 HTML

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

<title>Photosynth Test</title>

<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>

<script type="text/javascript">

function bodyLoaded() {

var SYNTH = "d7de4242-db75-4cbe-ae09-100908205b0d";

viewer = new Microsoft.Photosynth.Viewer("pslayer");

varloadParameters = new Microsoft.Photosynth.Viewer.LoadParameters(

SYNTH, "", false, false);

viewer.moveToImageCompleted = ImageMoved;

viewer.loadCollectionAsync(loadParameters);

}

function ImageMoved(sender) {

id = viewer.getSelectedImageId();

document.getElementById("detailslayer").innerHTML = id;

}

</script>

</head>

<body onload="bodyLoaded();">

<div id="pslayer" style="position: absolute;

width: 742px; height: 501px; left: 13px; top: 56px">

</div>

<div id="detailslayer" style="position: absolute;

width: 273px; height: 496px; left: 766px; top: 52px">

Test

</div>

</html>

posted @ 2010-09-29 16:05  suyan010203  Views(634)  Comments(1Edit  收藏