经由管道应用的文件访问.pdf

经由管道应用的文件访问
    技术领域 本文档涉及用于访问文件系统信息的系统和技术，其中这样的信息通常由诸如 使用 JavaScript 的 web 浏览器应用所阻拦。
     背景技术 使用如同 AJAX、 JavaScript 的技术以及其它高级编码系统，开发者现今能够创 建具有非常丰富的内容的基于网页的应用。 例如，用户可以将各种参数输入到网页中， 然后该页面上的活动内容可以诸如使用 AJAX 来响应于这样的输入而改变。 改变还可以 包括对诸如在典型的现代地图页面 ( 例如，在其上用户可以到处拖动地图，并且根据需 要从中央服务器取得地图瓦片 ) 中在线内容的捕捉。 然而，构建到 web 浏览器中的某些 安全机制可以限制开发者创建完全的基于 web 的应用的能力。 例如，除其它外，常见浏 览器阻拦网页以及与那些网页相关联的 JavaScript 访问计算机文件系统。
     发明内容 本文档描述了可以用于在不需要专门三维软件的情况下为用户生成三维体验的 系统和技术。 例如，可以在不需要诸如 Flash 插件等的专门软件的情况下允许用户操纵 web 浏览器中的空间中的模型。 可以向用户提供便利机制，通过该便利机制来决定待在 何处存储与这样的成像相关联的文件。 即使在某些基于浏览器的限制会阻止交互的情况 下，这样的机制可以在 web 浏览器内起作用。
     在某些实施方式中，这样的系统和技术可以提供一个或多个优势。 例如，用户 可以在其舒适的情况下保持在 web 浏览器的语境内，但是可以被给予与核心操作系统有 关的高级特征。 例如，可以从 web 浏览器的内部为用户提供如同文件管理器的接口，其 中这样的接口对于这样的交互通常会被阻拦。 还可以实现其它形式的从诸如 web 浏览器 的受保护的应用与操作系统的交互。
     在一个实施方式中，公开了一种计算机实现的数据访问方法。 该方法包括执行 容器应用中的文件管理器应用，其中文件管理器应用不能直接访问计算机文件系统，执 行能够直接访问计算机文件系统的本原应用，以及在文件管理器应用与本原应用之间、 以及在本原应用与计算机文件系统之间通信来模拟通过文件管理器应用的直接文件系统 访问。
     在某些方面中，文件管理器应用包括网页以及容器应用包括商业可用的 web 浏 览器。 该方法还可以包括生成与文件管理器应用对接的用户界面，其中该界面模拟文件 目录对话框。 并且，该界面可以包括文件目录图标，以及对应于计算机文件系统中的目 录的文本目录标签。 可以使用作用于 HTML 和 CSS 标记代码的 JavaScript 来执行文件管 理器应用。 另外，该方法还可以包括接收对目录的选择，将用于所述目录的第一标识符 从文件管理器应用通信到本原应用，利用本原应用确定用于对应于第一标识符的所述目 录的第二标识符，以及将第二标识符与对在所述目录下的一个或多个子目录的列表的请
     求一起递送给文件系统。
     在一些方面中，该方法进一步包括在本原应用处接收用于子目录列表的第一标 识符，利用本原应用确定用于子目录列表的第二标识符，以及将用于子目录列表的第二 标识符递送给文件管理器应用。 该方法还可以包括利用文件管理器应用视觉地在所述目 录下显示子目录列表，以及将与所述目录相关联的图标从关闭状态改变为打开状态。 此 外，该方法可以包括响应于关于文件目录的用户选择，在文件管理器应用与本原应用， 以及在本原应用与文件系统之间重复通信。 以及，该方法还可以包括促使对应于文件管 理器应用的一个或多个文件被保存在文件系统上的经由文件管理器应用选择的目录中。
     在又一个实施方式中，公开了一种计算机实现的文件访问系统。 该系统包括 由计算机操作系统提供的文件存储系统、用于在标准 web 浏览器中操作并且显示文件管 理器界面的被包纳 (contained) 应用，以及被编程为从被包纳应用接收文件相关请求、翻 译请求以及将相应请求提交给文件存储系统的本原应用。 被包纳应用可以被编程为生成 模拟文件管理器用户界面、用于在本原应用执行保存文件的行为时与用户交互的用户界 面。 并且，该用户界面可以包括文件目录图标，以及对应于文件存储系统中的目录的文 本目录标签。 另外，被包纳应用可以被编程为接收对目录的选择以及将用于所述目录的 第一标识符通信到本原应用，以及本原应用被编程为将第一标识符变换为第二标识符以 供递送给文件存储系统，以由被包纳应用的用户所指定的方式与所述目录交互。
     在一些方面中，本原应用被编程为从文件存储系统接收通信并且将该通信变换 为用于被包纳应用的不同通信，以促使被包纳应用显示关于文件存储系统中的目录的信 息。
     在另一个实施方式中，公开了一种文件访问系统。 该系统包括由计算机操作系 统提供的文件存储系统、在对应于文件存储系统的计算机上操作的 web 浏览器、以及用 于管理在运行于 web 浏览器中的应用与文件存储系统之间的交互的装置。
     在附图和下面的描述中阐述了一个或多个实施例的细节。 其它特征和优势从描 述和附图、以及从权利要求将是显而易见的。 附图说明
     图 1 是用于捕捉显示为一系列 2-D 图像的 3-D 模型的过程的概念图。
     图 2 是说明性图像捕捉系统的框图。
     图 3 是用于捕捉 3-D 模型的图像的示例过程的流程图。
     图 4 是示出了用于使用一系列 2-D 图像来显示 3-D 模型的过程的泳道图。
     图 5 是用于捕捉 3-D 模型的图像并且使用管道应用来保存图像的示例过程的流程 图。
     图 6 是示出了用于使用一系列 2-D 图像以及管道应用的帮助来生成并显示 3-D 模型的过程的泳道图。
     图 7 示出了使用 2-D 图像来显示 3-D 模型的移动设备。
     图 8A-8F 示出了用于捕捉并使用 3-D 模型的 2-D 图像的过程的截屏。
     图 8G-8J 示出了用于管理对模型的图像捕捉的对话框的截屏。
     图 9 示出了可以用于实现在此描述的技术的计算机设备和移动计算机设备的示例。
     在各个附图中相同的参考符号指示相同的元素。具体实施方式
     本部分描述了用于生成 3-D 模型的表示的各种系统和技术，其中表示可以以与 模型自身的显示非常相似的方式显示，但是没有与操纵真实 3-D 模型相关联的计算上的 开销。 在此论述的示例中，用于 3-DCADD 系统或相似应用的插件促使系统在捕捉模型 的图像时环绕 (orbiting) 模型，以从围绕模型的大致均匀间隔的有利点创建多个图像。 插 件然后可以自动生成允许从 web 浏览器对 2-D 图像进行容易操纵的标记代码，使得图像 可以被显示，以提供正由用户实时围绕旋转的 3-D 对象的效果。
     在某些情况下，插件可以通过打开操作者可以在设置用于创建模型的图像的参 数时使用的浏览器窗口来操作。 作为一个示例，操作者可以选择与成像过程相关联的文 件待被放置入、使得可以稍后访问所述文件以供查看的文件夹或其它位置。 由于通常网 页不能访问计算机上的文件系统，或访问取决于页面正在其上显示的计算机的类型，所 以这样的方法不是无关紧要的。 然而，在下面描述的技术中，诸如 JavaScript 代码的网页 代码可以与加载在计算机系统上并且用作为用于网页程序的管道的本原应用通信。 网页 代码可以促使本原应用与计算机上的文件管理系统交互，使得网页代码可以间接地访问 计算机上的文件。 图 1 是用于捕捉用于显示为一系列 2-D 图像的 3-D 模型的过程 100 的概念图。 在该表示中，从上面示出了在此为兰博基尼的汽车的模型 102。 然而，应当将该模型理 解为可以在 CADD 系统中呈现并且可以从多个角度查看的 3-D 模型。 在该模型周围示出 了多个照相机 104 以描绘从各个角度生成该模型的图像。 照相机 104 被定位在围绕模型 102 的周界的大致平均分隔处、并且在使得将在照相机 104 拍摄模型 102 的任何虚拟图片 中成像整个模型的位置处。 照相机相对于该模型的高度可以被设置，或者可以由用户选 择，并且在模型 102 周围的不同照相机 104 可以彼此处于不同的高度。
     可以诸如由用户选择照相机 104 的数目来提供 3-D 模型 102 的多个二维图像，使 得从一个图像翻转到下一图像将提供对模型的相对平滑的呈现。 具体地，用户可以通过 相邻照相机以渐进的方式拍摄的图像选择性地循环，以创建模型的虚拟动画。 在以白色 或不可视背景放置模型用于成像的情况下，从图像到图像的这样的翻转将使得对查看者 显现为如同模型在空间中随意旋转一样。 结果，对于查看者而言的视觉效果有点类似于 由旧式翻转图书或由受欢迎的电影 The Matrix 所提供的效果，只是显现为模型在空间中旋 转，而不是显现为照相机关于模型移动。
     在模型 102 下面概念性地示出了网页 106。 从概念上，网页 106 被示出来表示在 发生成像操作后可以向 web 浏览器的用户显示模型 102 的图像的方式。
     网页 106 包括显示区域 108，其中可以向 web 浏览器的查看者显示模型 102 的图 像。 诸如图像 110 的其它相邻图像在图中紧接图像 108 示出。 实际上，其它图像在正显 示图像 108 时对用户而言是不可查看的。 相反，在此以幻灯片的形式概念性地示出其它 图像，以指示在用户操纵图像 108 下的控件时，将按次序显示其它图像。 作为对图像的 这样的渐进显示的结果，用户可以仅通过促使各个相邻图像以适当的次序显示，来生成
     在为图像 108 示出的区域内的空间中旋转模型的视觉效果。 在某些示例中，用户可以在 图像间快速来回翻转，因此对象在用户的面前显现为抓取并且旋转。 然而，实际上，用 户仅在其浏览器上的公共区域中顺次查看单个图像。
     由于网页 106 显示静态图像，而不是实际三维模型或诸如基于 flash 的动画的复 杂动画，所以在某些情况下，用户可以在不需要任何特定的 web 浏览器插件的情况下查 看网页 106。 例如，在此论述的技术可以允许用户在不需要 Flash 的情况下获取 Flash 效 果。 而且，用户可以能够在轻量级客户端上实现这样的似乎真实的三维控制，所述轻量 级客户端诸如具有有限的计算能力的移动设备或其它计算设备。
     图 2 是说明性图像捕捉系统 200 的框图。 系统 200 通常包括计算机系统中的适 于生成文件集合的多个组件，所述文件集合包括 3-D 模型的图像和用于生成对那些图像 的查看、以及用于运行代码并显示图像的代码。 尽管在这个示例中示出为单个计算机， 但是各种组件可以驻存于一个或多个计算机上，并且可以由不同的实体管理。 例如，用 于生成图像的程序和用于查看图像的代码可以由第一实体操作，而用于运行代码和查看 图像的程序可以由不同的实体操作。
     系统 200 包括包含例如 3-D 建模器 208 的成像计算机 202。 3-D 建模器 208 可以 包括允许构造 3-D 对象以及查看这样的对象的多种计算机辅助设计程序中的任何程序。 另外，在某些实施方式中，3-D 建模器 208 可以包括生成由系统呈现的模型的图像的功 能。 这样的功能通常可以包括允许用户置放虚拟照相机的视点和视角、以及还可以诸如 通过选择用于照相机的虚拟镜头来允许定义视场的接口。 控制这样的虚拟照相机和生成 3-D 模型的 2-D 图像可以利用 2-D 呈现器 206 发 生。 2-D 呈现器 206 可以响应于从特定角度的特定点提供模型的图像的命令，创建诸如 JPEG 文件的标准图像文件。 2-D 呈现器 206 还可以接受命令，诸如通过应用编程接口 (API) 接收的命令。 例如，另一个程序可以根据 API 操作来控制 3-D 建模器 208 对虚拟 照相机的置放，以及 2-D 呈现器 206 对图像的生成。
     可以将用于 3-D 建模器 208 的模型存储在模型数据库 210 中。 数据库 210 可以 采用各种形式，并且可以将每一个模型存储在分立文件中。 可以诸如通过为每一个模型 提供特定基点，并且将多个模型打开入单个模型空间中，来将各个模型组合成一个公共 模型。 在靠近彼此打开这样的多个模型时，可以使用 2-D 呈现器 206 来发生对多个模型 的成像。 数据库 210 可以例如如同 GOOGLE SKETCHUP 的模型库组件一样来实现。
     图像生成模块 204 可以诸如通过如上所述的 API 操作来促使通过 3-D 建模器 208 由 2-D 呈现器 206 自动呈现图像。 图像生成模块 204 可以被编程为例如在识别模型周围 的用于放置虚拟照相机的位置、以及模型的待捕捉的不同的图像的数目时与用户或应用 交互。 图像生成模块 204 可以是已安装在计算机 202 上、并且与计算机 202 上的其它程 序独立地运行的本原程序。 在一个示例中，图像生成模块可以以诸如 Ruby 的语言编写。
     在一个实施方式中，图像生成模块 204 可以促使生成对话框以与用户交互。 对 话框可以采用各种形式，以及在一个示例中，可以采用无边框 web 浏览器 212 的形式。 Web 浏览器 212 可以以如多个常见浏览器中的一个的熟悉方式来操作，所述浏览器诸如微 软 INTERNETEXPLORER、 FOXFIRE 浏览器或 APPLE SAFARI 浏览器。 在适当的情况 下，浏览器可以根据在本文档中描述的技术、在不需要额外插件或其它组件的情况下来
     操作。 由于作为 web 浏览器的一部分的安全限制，所以 web 浏览器 212 内的页面可能 对访问计算机 203 上的数据存在困难。 结果，可以在计算机 202 上提供文件系统解释器 213。 在一个示例中，文件系统解释器 213 是图像生成模块 204 的一部分或与图像生成模 块 204 相关联，以及可以是诸如运行于计算机 202 上以 Ruby 编写的应用的本原应用的一 部分。
     文件系统解释器 213 被配置为与运行于 web 浏览器 212 上的程序通信，所述程序 诸如运行于 web 浏览器 212 上的 JavaScript 代码。 JavaScript 和 Ruby 程序可以根据预先安 排的通信协议来通信。 使用这样的协议，运行于 web 浏览器 212 上的 JavaScript 可以向文 件系统解释器 213 发出请求，所述请求可以由文件系统解释器 213 解释。 例如，运行于 web 浏览器 212 上的 JavaScript 代码或其它相似代码可以请求关于计算机 202 上的文件的信 息。 这样的请求可以包括用来确定计算机 202 上的文件夹结构的请求。 文件系统解释器 213 可以通过发出对用于文件系统对话框的数据的标准操作系统请求来对这样的请求作出 响应。 在接收与对话框相关联的数据后，文件系统解释器 213 可以解析这样的数据以确 定计算机 202 上的文件结构，并且可以将这样的信息返回给运行于 web 浏览器 212 上的应 用。 例如，文件系统解释器 213 可以将特定目录中的文件夹列表递送给运行于 web 浏览 器 212 上的应用。
     运行于 web 浏览器 212 上的应用可以获取这样的信息，并且以好像运行于 web 浏览器 212 上的程序访问了实际文件系统一样地向用户显现的方式显示这样的信息。 例 如，程序可以生成具有文件对话框的外观的无边框网页，并且可以访问多个已存储的图 像以示出诸如文件夹和文件系统的其它相似组织的图标。 程序还可以与图标一起显示对 文件夹的文本描述，以使为用户展现看起来如同文件系统对话框的网页。
     如下更详细地描述的，与网页的用户交互可以包括来自用户的命令，诸如将文 件保存在特定文件夹中的请求、创建新的文件夹的请求或在文件夹层级中上下移动的请 求。 这样的请求可以由运行于 web 浏览器 212 上的程序解释，并且根据商定的协议被递 送给文件系统解释器 213。 文件系统解释器 213 可以翻译这样的请求，并且进而作出某些 对计算机 202 的操作系统上的文件系统的调用。 例如，文件系统解释器 213 可以响应于 用户选择在文件夹集中向下钻探，并且可以向运行于 web 浏览器 212 上的程序递送回新的 子文件夹列表或其它适当的信息。 总的来说，每次用户与看起来如同文件系统对话框的 网页交互时，运行于 web 浏览器 212 上的程序可以向文件系统解释器 213 发出请求，文件 系统解释器 213 可以进而访问存储在计算机 202 上的信息。 文件系统解释器 213 然后可 以分析这样的返回信息，并且以可以由运行于 web 浏览器 212 上的程序使用的方式将所述 返回信息递送回这样的程序。
     文件系统解释器 213 最终向运行于 web 浏览器 212 上的程序提供对 web 数据存储 214 中的数据的查看。 Web 数据存储 214 可以包括多个基于因特网的文件，诸如 HTML 文件、图像文件、样式表文件和其它相似文件。 另外，文件系统解释器 213 可以响应于 用户命令，促使 2-D 呈现器 206 生成的某些文件被保存在 web 数据存储 214 中的特定文 件夹中。 具体地， web 数据存储 214 可以包括计算机 202 上的标准盘或闪存结构的一部 分。 当然，可以跨多个计算机和 / 或存储设备散布在此描述的这样的存储和对程序的操
     作。 文件系统解释器 213 通常可以是运行于计算机 202 上的本原应用，以使其能够访 问来自计算机的操作系统的全范围服务，包括文件管理服务和对话。 以这种方式，文件 系统解释器 213 可以允许运行于 web 浏览器 212 上的程序访问计算机 202 上的文件，否则 所述程序无法访问这些文件。
     系统 200 可以响应于与系统 200 的用户交互，生成各种输出。 例如， web 浏览 器 212 可以显示各种网页 216a，诸如在捕捉和保存 3-D 模型的图像时与用户交互所需要 的对话框。 另外，网页 216a 可以包括用于显示图像和与图像交互的网页。 Web 浏览器 212 还可以显示各种动画，诸如如上关于图 1 所论述的从图像到图像翻转的交互式动画、 或网页的用户的其它这样的移动和交互式特征。
     在提供这样的数据和交互时，计算机 202 可以生成多个文件以允许与模拟三维 模型的多个图像的交互。 例如，可以自动生成 HTML 文件 218a，诸如用于展现以下网页 的文件 ：向用户示出图像并且允许用户与图像交互以在彼此后显示各种不同的图像，以 创建类似于与 3-D 模型的充分交互的体验。 另外，计算机 202 可以生成多个图像文件， 诸如 JPEG、 GIF、 TIFF 和其它相似的文件格式图像文件。 计算机 202 还可以生成可以 额外地定义待由系统 200 生成的网页的特定布局和外观的层叠样式表 (CSS) 文件 218c。 最后，计算机 202 可以生成 JavaScript 代码 218d 以及另外可以使用这样的 JavaScript 代码 218d。 例如，这样的代码可以用于生成用于捕捉 2-D 图像的对话框，以及还可以用于稍 后在允许用户与图像的交互的网页上显示这样的图像。
     图 3 是用于捕捉 3-D 模型的图像的示例过程 300 的流程图。 总的来说，过程 300 涉及识别 3-D 模型、通过以虚拟成像装置围绕模型来捕捉多个 2-D 图像、生成代码以供 稍后以便利和交互式方式查看这样的图像、以及稍后运行这样的代码并且接收用户的交 互。
     在框 302，过程 300 首先接收对用于成像的模型的选择。 例如，用户可以最初在 CAD 程序中打开模型，然后可以选择该程序内的诸如图标的控件以开始对模型成像的过 程。 用户选择的控件可以例如表示提供有 CAD 程序的用于对模型的这样的成像的插件。
     在框 304，过程 300 识别与模型相关联的成像位置。 在一个典型的示例中，位置 可以在沿着围绕在对象周围的路径的圆形、椭圆形或其它几何形状的点处。 每一个视图 相对于下一视图的位置可以通过用户指定角度来提供，例如，如果用户指定十度，则每 一个视图将相距十度，并且将有 36 个图像。 替选地，用户可以指定图像的数目。 然而， 不需要均匀分隔成像位置。 在一个示例中，用户诸如通过以在模型周围自动放置的均匀 间隔的照相机的图标开始，然后调整那些图标，可以将成像位置人工拖放到某处。 用户 可以 ( 以如下所述的方式 ) 生成模型周围的结果动画的预览，然后可以调整照相机图标直 到它们实现其期望的效果。
     在一些情况下，可以通过计算模型中的最小 X、Y 和 Z 点以及最大的这样的点， 来计算用于成像的特定位置。 可以生成包含这两个点的虚拟球体，并且可以将其认为是 对模型进行界定。 然后可以选择足够远离球体外部的单个圆形或其它路径，给定利用程 序提供的虚拟照相机的参数 ( 例如，位置和视场 )，照相机在朝内瞄准球体时可以捕捉其 视场内的球体的所有部分。
     照相机的实际路径可以具有各种形式。 在一个简单示例中，路径可以是圆形或 椭圆形，照相机在相对于模型的单一高度处。 在更复杂的示例中，路径可以是正弦曲 线，因此在多维变化，使得随着路径在模型周围移动，照相机也上下移动。 这样的圆形 和正弦曲线路径可以提供在模型的顶部和底部附近的交替视图。 例如，这样的路径可以 允许汽车的图像在适当的情况下示出汽车的顶和车下方 (underbelly) 两者。 在又一个示例 中，围绕模型的路径可以采用球体的形式，用于虚拟照相机的位置被选择在球体周围的 近似等距处。 使用这样的路径或点的集合可以使用户能够与图像交互以围绕多个轴转动 模型、或至少显现为转动模型。
     用户还可以指定待被输出的图像的大小。 可以将这样的大小指定为例如在 X 和 Y 维的像素数。 这样的缩放在待将图像合并入网页的情况下可以尤其便利，其中许多元 素根据像素尺寸来表示。
     在框 306，过程 300 开始以下重复过程 ：将照相机定位在围绕路径中的特定点处 以及如框 308 处所示生成 2-D 图像。 使用如通过来自诸如图 2 的图像生成模块 204 的另 一个应用的 API 导入控制的特定 CAD 包，这样的活动可以自动发生。 随着获得每一个图 像，过程 300 可以对图像执行特定功能。 例如，可以从图像去除背景项，如可以是诸如 来自建模程序的轴的假想线或其它线。
     而且，对于成像过程可以引用某些样式。 例如，用户诸如通过定位在 3-D 空间 中的照明源并且指定用于照明源的参数 ( 例如，颜色和亮度 )，可以为其模型设置优选照 明方案。 用户还可以指定用于模型或用于图像中的其它项的纹理和材料。
     而且，在大部分情况下，可以在圆形或椭圆形上平均分隔沿着围绕路径的位 置。 但是也可以使用其它安排。 例如，可以从模型周围 - 诸如在围绕模型的球体上 - 的 多个位置分析图像，以及可以计算在各个图像之间的差异程度。 可以使用多种已知技术 来执行这样的差异程度，诸如通过比较不同图像中的公共像素之间的距离以及图像中的 各个像素的改变程度。 然后可以自动选择模型周围的位置以提供在大体相等的视觉量上 彼此不同的图像。 例如，成像位置可以更靠近包含重要细节的模型的区域附近，而可以 更远离模型的较少细节部分。 以这种方式，可以诸如以如下所述的方式选择为稍后查看 这样的图像的用户提供更平滑体验的位置。
     图像还可以拍摄自真实对象。 例如，希望将其汽车作为在线拍卖的一部分列出 的个人可以在汽车周围的常见间隔 ( 例如，在每一次拍照之间采用两侧步 ) 处的常见高度 ( 其视平线 ) 处拍摄汽车的多个数字照片。 他们然后可以将图像保存到单个文件夹，以及 如同在此论述的那些应用的应用可以如下所述识别图像文件、( 如果照相机顺序地命名图 像 ) 通过标题数字地安排图像文件、以及生成查看具有 3-D 效果的汽车所需的代码。
     一旦为每一个所计算的成像位置生成图像，并且图像已被保存到确定的位置， 方法 300 就可以在框 310 生成并保存用于支持图像的代码。 例如，这样的代码可以采用 用于以适当的系列和次序显示图像、指向各个图像的 HTML 和 CSS 代码的形式。 具体 地，代码可以生成向前和向后扫描图像的控件，以及可以随用户操纵该控件依次调用每 一个图像用于显示。 可以从将用于待被查看的特定图像的数据添加到其中的模板生成特 定代码。 例如，从一个例示到下一例示，特定图的名称和图的编号可以改变，但是代码 的其它方面可以保持不变。 因此，模板可以被编写为在图像阵列上操作，以及代码生成过程可以仅将特定文件名添加到阵列。 代码还可以保留为模板代码，以及诸如通过 从 JavaScript 代码等引用用于模型的成像的数据文件，该代码可以引用用于特定图像的参 数。
     在框 312，过程的第二阶段，即以使图像看起来如同它们仍然是 3-D 模型的一 部分的方式查看图像开始。 在这个示例中，可以通过将浏览器指向在框 310 中生成的代 码，来发生这样的查看。 可以通过过程 300 促使浏览器启用并指向这样的代码，来发生 这样的行为。 对指向代码的浏览器的启用可以促使浏览器执行代码，所述代码可以进而 促使生成用于查看 3-D 模型的图像的控件，并且可以在框 314 初始显示基础图像。 基础 图像可以是生成的图像中的任何图像，而且可以典型地是模型的在过程 300 中拍摄的第 一图像，诸如模型的正视图。
     在框 316，用户与已利用浏览器由代码生成的网页交互，这可以促使所捕捉的图 像中的各种不同的图像被显示。 例如，用户可以在图像自身上点击，并且向左或向右拉 动以指示他们意欲使代码取得模型的不同图像。 这样的行为然后可以促使其它图像顺次 显示。 如果适当整合，则这样的活动可以向用户显现为涉及向左和向右拉动三模型以从 各种角度查看模型，与可以在更重量级实施方式中与 VRML 模型一起发生的那样非常相 像。 图 4 是示出了用于使用一系列 2-D 图像来显示 3-D 模型的过程的泳道图。 总的 来说，该过程 400 类似于图 3 中示出的过程 300，但是指示了系统内的可以执行该过程中 的各种步骤的特定示例性组件。 在这个示例中，组件包括建模应用，其可以是计算机上 的被配置为促使生成作为 3-D 模型的代表的 2-D 图像的本原应用。 另一个组件是 CAD 程序，其可以是制作来运许以便利方式生成 3-D 模型以及对这样的模型成像的一般商用 设计程序。 第三个组件是标准 web 浏览器，在这个示例中其不需要提供有诸如 VRML 或 FLASH 插件的特定插件。
     过程在框 402 开始，其中建模应用接收成像命令并且请求模型名称。 在那时， CAD 程序可以已经在用户面前显示模型。 这样的命令可以来自于对展现为 CAD 程序的 一部分的图标的用户选择，其中建模应用操作为用于 CAD 程序的插件。 在框 404，CAD 程序返回模型的名称，以使建模应用可以将这样的名称用作为诸如图像的待与模型相关 联地生成的文件集合的默认名称。 另外，CAD 程序可以递送识别默认文件夹的字符串， 其中与模型相关联的文件被存储在所述默认文件夹中。
     此时，建模应用诸如通过在 CAD 程序的显示上生成网页，可以促使对话框显 示。 对话框可以允许系统的用户识别用于存储文件的不同于默认位置的位置，以及还输 入在生成模型的图像时用于照相机位置的参数。 例如，用户可以在水平或垂直围绕模型 的路径之间选择、可以选择路径的形状、以及还可以选择沿着路径待被捕捉的图像的数 目。 替选地，用户可以选择使图像从自球体朝内指向模型的所有方向获得。 建模应用然 后可以与 CAD 程序交互来计算照相机参数，诸如照相机在模型空间中的基础位置和照相 机的每一次拍照的方向。
     在框 408 和 410，建模应用然后逐步通过用于每一个成像位置的位置信息，并且 促使 CAD 程序从特定位置生成模型的 2-D 图像，并且将图像 ( 例如，作为 JPEG 文件 ) 保存到用户选择的文件夹或目录。 图像名称可以由程序诸如通过为图像名称提供作为前
     缀的模型名称，以及作为后缀的连续索引号，例如 car01.jpg、car02.jpg、car03.jpg 等，来 确定。
     在获得所有的图像后，建模应用促使生成支持图像的各种文件。 具体地，生 成 HTML 代码，其中该代码促使响应于来自用户的交互，显示相继取得各个 2-D 图像 的网页，以及促使图像被展示以提供正操纵实际模型的闪现。 还可以生成诸如 CSS 和 JavaScript 文件的其它这样的文件。 还可以将那些文件保存到用户选择的文件夹或目录。
     可以通过建模应用发送所生成的 HTML 代码的 URL( 框 414)，将用户或另一个 用户容易地定向到图。 这样的传送可以以多种方式发生 ( 框 416)，包括通过将 web 浏 览器重定向到 URL，以使代码由 web 浏览器执行，以及显示来自图像的初始图像 ( 框 418)。 用户然后可以以多种方式与所显示的网页交互以使各种图像按顺序显示，以提供 与模型自身共事的效果。 并且通常，图像在没有接缝的情况下围绕模型全程覆盖，以 使经由 2-D 图像显示模型没有包括任何实质的视觉障碍，即图像将从模型周围的连续路 径获得，以使用户可以在不知道第一和最后的图像在何处拍摄的情况下围绕模型全程旋 转。
     图 5 是用于捕捉 3-D 模型的图像并且使用管道应用来保存图像的示例过程 500 的 流程图。 该过程具有与上述那些的相似之处，但是更关注不能直接访问某些操作系统服 务的非本原应用与能够进行这样的访问以及用作为非本原应用到这样的服务的管道的本 原应用的交互。 总的来说，该过程涉及经由程序与用户交互，所述程序诸如运行于网页 上 ( 例如，以 JavaScript) 的、由于其在之中操作的应用放置在程序上的限制而不能开放访 问文件系统的程序。 程序通过与第一应用外的第二应用通信来实现这样的访问，其中第 二应用安装在计算机上并且可以独立运行以及与操作系统直接交互，因此可以被认为是 本原应用。 例如，这样的过程可以通过如在上面和下面的示例中所描述的构建类似于实 际框的文件管理器对话框，在接收关于保存某些文件的位置的用户输入时发生。 大多数 情况下，从运行于网页上的生成用于用户的界面的程序的观点描述在此的过程 500。
     起始于框 502，初始显示用户界面。 界面可以放置在诸如 CAD 应用的应用上， 并且可以允许用户指定用于保存 CAD 应用的图像的位置。 界面可以包括用于与显示界面 的计算机上的文件系统交互的各种元素。 例如，界面可以形成为模拟文件系统对话框的 外观的无边框网页。 对话框可以包括例如用于输入文件名的区域以及示出计算机存储系 统的层级文件夹结构的更大区域。
     如在这个示例中，界面的初始显示可以缺少关于文件系统的特定信息，或与另 一个程序的通信可以初始发生来产生对文件系统信息的开始显示。 例如，可以存储对默 认文件夹的识别，以及过程可以访问定义默认文件夹的数据，以使其被初始显示。 替选 地，可以显示特定存储驱动的根文件夹。 对默认文件夹的这样的显示可以如下所述需要 在生成界面的程序与计算机上的本原应用之间的通信。
     在框 504，接收文件相关命令。例如，用户可以选择保存文件、在对话框中显示 文件或文件夹相关信息、打开文件、在文件系统中创建新的文件夹、删除文件夹或在系 统中执行其它相似功能。 在框 506，打开本原应用。 该应用单独存储在系统上，并且可 以直接访问操作系统特征，因此可以在访问操作系统文件系统时用作为打开界面的初始 应用的管道。 对本原应用的打开可以以多种方式发生，诸如通过生成用户界面的程序进行对这样的本原应用的调用。
     在框 508，从本原应用发出对目录列表的请求。 例如，生成界面的程序可以响 应于来自用户的请求需要显示多个目录。 该程序因此可以识别目录相关信息并且诸如通 过应用编程接口 (API) 以确定的方式将其递送给本原应用。 本原应用可以进而被编程 为接收、识别并且解释这样的请求。 例如，本原应用可以解析从生成界面的程序接收的 消息，并且创建以适合于与计算机上的操作系统相关联的文件系统的方式格式化的其自 身的请求。 来自生成用户界面的程序的请求可以是异步请求，诸如使用 AJAX 方法的请 求，以使这样的程序可以在等待信息从本原应用返回时继续操作。
     在框 510，程序从本原应用接收目录或文件夹列表并且显示该列表。目录列表可 以由本原应用通过格式化对操作系统的文件管理组件的请求并且接收对该请求的响应来 创建。 本原应用然后可以从响应提取信息并且重新格式化该信息以传送到生成用户界面 的程序。 例如，本原应用可以发送以特定方式格式化的字符串列表，其中字符串表示在 特定目录下的文件夹名或子目录名。
     在从本原应用接收这样的名称后，程序可以显示这样的文件夹列表。 这样做， 程序可以访问示出操作系统中的文件夹的图标代表的图像文件，并且可以以列表显示那 些图标以及关于从本原应用接收的文件夹的文本信息。 这样的显示可以在用户界面上对 应于文件管理器界面中的典型文件夹或目录显示区域的框中发生。 结果，可以向用户展 示使之看起来如同原始程序正直接而不是间接地实际访问操作系统的文件管理特征的显 示。 在图 8B 中示出了这样的示例显示。
     在框 512，接收用户命令。例如，用户命令可以是用户在所显示的列表中的特定 文件夹图标上的点击，指示用户意欲查看在所选择的文件夹下的子文件夹。 生成界面的 程序可以解释这样的选择，并且根据 API 将指示本原应用应当从操作系统收集子文件夹 列表的数据提供给本原应用 ( 框 514)。
     本原应用因此可以进而向操作系统发送对子文件夹列表或指示对子文件夹进行 识别的其它数据的请求。 这样的请求可以在生成界面的程序在等待响应时继续其它操作 ( 即，异步操作 ) 期间发生。 随着上述交互，本原应用可以从操作系统接收信息、可以 适当地重新格式化信息并且可以将新的信息递送给生成界面的程序。 该程序然后可以更 新在显示中示出的字符串和文件夹图标，以对用户而言使其看起来如同它们在目录结构 中实际向下钻探 ( 框 516)。 这样的更新可以例如通过以熟悉的方式编辑与显示相关联的 DOM 树来发生。
     直到终止文件操作 ( 框 518)，过程 500 继续等待和接受关于文件系统的用户命 令。 一旦终止文件操作，过程诸如通过保存或打开用户选择的文件来继续 ( 框 520)。
     在一个示例中，文件访问过程可以采取四种不同的状态。 处于第一种状态时， 目标目录为未选择和关闭的。 在目标目录上点击 ( 例如，通过加亮目标目录并更新其标 题栏 ) 选择目标目录并且打开目标目录。 JavaScript 代码或其它这样的代码然后为子目录 对诸如 Ruby 应用的本原应用进行调用，以及本原应用以异步方式报告回孩子或错误 ( 例 如，没有找到目录 )。 JavaScript 然后修改 HTML DOM 以将目录示出为被选择，将目录的 图标示出为打开的文件夹、以及将子目录示出为带有关闭的图标的从目录稍微缩进。 还 可以响应于选择改变所选择的目录标签。处于第二种状态时，目标目录为未选择和打开的 ( 而不是关闭的 )。 在目录上点 击在界面中加亮目录并且更新指示哪个目录被选择的标签。
     处于第三种状态时，目标目录为已选择和关闭的。 在目录上点击促使 JavaScript 向本原应用发出对子目录的请求，然后 JavaScript 以异步方式接收结果并且将子目录展示 为目录的子节点 ( 稍微缩进并且带有关闭的文件夹图标 )。 JavaScript 还以打开的文件夹 图标交换所选择的目录。
     处于第四种状态时，目标目录为已选择和打开的。 在目录上点击促使 JavaScript 编辑 DOM 以将目录示出为关闭的 ( 但是仍然为已选择的 )，并且隐藏子目录。 如果用户 在对话中的 “OK” 按钮上点击，则将所选择的目录递送给调用应用并且关闭对话。
     在其它情况下，用户可以选择控件来创建新的目录，与他们在常见文件管理对 话中的行为非常相像。 这样的选择将带出另一个对话框，其将完全遮蔽原始对话框。 用 户可以输入用于子目录的新的目录名， JavaScript 会将该名称递送给本原应用，本原应用 将进而以异步方式促使该子目录被创建并且将操作成功的指示符递送回程序。 JavaScript 可以通过将新的子目录指示符添加到 DOM 以及通过将其作为所选择的子目录打开来对成 功的消息作出响应。
     图 6 是示出了用于使用一系列 2-D 图像以及管道应用的帮助来生成并显示 3-D 模型的过程 600 的泳道图。 总的来说，过程 600 类似于图 5 中的过程 500，但是除示出了 在这个示例中可以用于执行过程中的某些行为的特定组件外，示出了其它操作和额外细 节。 这些组件包括负责在从 CAD 程序捕捉图像时与用户交互的成像应用，其中在这个示 例中成像应用至少部分使用 JavaScript 编写。 组件还包括其它组件访问以获取已存储的信 息以及保存额外信息的文件系统。 最后，组件包括在此以 Ruby 编写的管道应用，其为与 成像应用在其中运行的任何应用分离的应用并且与操作系统组件直接通信以能够用作为 用于成像应用的管道。
     在框 602，在 CAD 程序中初始接收模型选择。 这样的选择可以采用熟悉的形 式，诸如通过用户选择数据文件 “打开” 图标并且从多个文件的列表选择文件。 选择还 可以以因 GOOGLE SKETCHUP 3-D 库而闻名的方式发生。 文件系统通过将模型数据派 发给 CAD 程序 (604) 来作出响应，以及 CAD 程序在框 606 以典型方式显示模型。
     CAD 程序可以被提供有对应于成像应用的插件程序，并且用于该程序的图标可 以在 CAD 程序的显示上示出。 用户对该图标的选择可以启用成像应用，其可以被编程为 以以下方式捕捉 CAD 程序中的模型的多个连续图像，并且保存图像和生成的标记代码 ： 网页可以显示图像来产生查看者实际操纵模型而不仅是一系列图像的闪现。
     在接收成像选择后，CAD 程序可以促使成像应用启用 ( 框 608)。 在打开后，在 框 610，成像应用可以显示成像窗口。 该窗口可以是例如格式化为类似于文件访问对话 框的无边框浏览器窗口 ( 例如，参见图 8A)。 对话框可以初始示出数个默认值，诸如与 从 CAD 程序获取的模型的名称相匹配的待与图像相关联的名称、模型的待获取的图像数 目以及用于保存基于图像的文件的位置。在框 612，过程接收用于这样的值的各种输入， 以及还从用户接收对查看成像应用和管道应用运行于其上、以及文件系统在其上操作的 计算机系统上的文件结构的请求。 成像应用响应于用户请求将请求发送给用户先前已安 装在计算机上用于允许成像应用与文件系统间接交互的管道应用。在接收请求后，管道应用翻译请求并且将相应请求发送给文件系统以检查文件 结构 ( 框 614)，诸如以获取文件系统的根目录中的文件文件夹列表。 在框 616，文件系 统以熟悉的格式将特定操作系统的文件结构返回给管道应用。 管道应用然后在框 616 生 成用于修改 DOM 以反映界面中的示出从文件系统获取的文件结构的更新的代码。 在框 620，成像应用更新显示。 替选地，成像应用而不是管道应用可以生成用于修改 DOM 的 适当代码。
     然后可以向用户展示示出了可以被选择的多个子目录的对话框，以及在框 622， 用户选择子目录，并且因此请求查看在该子目录内的文件结构。 再次，成像应用将请求 发送给管道应用，管道应用翻译该请求并且从文件系统检查文件结构 ( 框 624)，文件系 统返回文件结构 ( 框 626)，以及管道应用 ( 单独或与成像应用合作 ) 再次生成用于修改 显示的 DOM 结构以反映目录中的变化的代码，例如，以将所选择的目录的图标从关闭图 像转变为打开图像，以及添加从主目录缩进的子目录列表 ( 具有关闭的文件夹图像 )( 框 628)。
     用户然后可以通过在特定控件上点击来选择用于保存文件的特定目录，因此促 使文件夹的路径被保存以及文件对话框消失。 在以这种方式更新显示后，用户可以提供 对下一显示的选择，其可以是用户可以通过其来建立用于模型的成像的某些参数的另一 个对话框 ( 框 630)。 例如，在框 632，用户可以提供关于用于查看模型的照相机的信息， 诸如照相机待创建的图像数目。 在某些实施方式中，成像应用可以将这样的数据递送给 管道应用，其然后可以通过与 CAD 程序来回交互来控制对照相机相对于模型的置放 ( 框 636)，来控制通过 CAD 程序的对图像的创建 ( 框 634)。 在获得每一个图像后，CAD 程 序可以将图像保存在文件系统中 ( 框 638)，以及可以从管道应用获取关于在其中待保存 文件的子目录的信息。 一旦管道应用和 CAD 程序逐步通过成像过程并且保存所有必需的图像，管道应 用可以生成代码以允许用户以便利的方式查看图像。例如，在框 640，管道应用生成用于 网页的 HTML 代码来以如同用户操纵图像的无缝方式显示图像以创建在空间中旋转模型 的闪现。 如上所述，可以从模板生成代码，其中模板定义某些控件元素和显示元素，并 且可以在创建代码期间添加诸如图像数目和图像文件的名称的特定值。
     在创建必需的代码并且将其放置在特定位置后，管道应用然后可以将用于代码 的 URL 递送给成像应用 ( 框 642) 或另一个适当的基于浏览器的应用或其它应用。 在框 644，该 URL 促使浏览器被定向到代码、加载代码、执行代码，以及因此为用户生成图 像中的一个的视觉显示以及用于操纵该图像的控件。在框 646，用户选择旋转该图像以能 够观看图像表示的模型的各面，以及从文件系统取得这样的图像 ( 框 648)。
     图 7 示出了使用 2-D 图像来显示 3-D 模型的移动设备。 在这个示例中，移动设 备意在表示没有添加到其的特定三维成像插件或为其提供的其它通用 3-D 成像的设备。 替选地，设备可以具有这样的能力，但是可以显示网页，所述网页的作者不确信许多消 费者会有这样的能力，因此没有将这样的能力编码入页面。 在设备 700 的显示 710 上所 示为从特定角度汽车的 3-D 模型的图像。 设备 700 可以具有触摸屏，以及用于生成显示 710 的 HTML 代码可以通过取得从汽车的模型生成的渐进相邻图像，对在显示 720 的区域 中跨触摸屏的横向拖动运动作出响应。 在图像中扫描还可以由位于设备的中右部处的跟
     踪球控制。 以这种方式，显示 710 可以为用户提供通常以更复杂的方式提供并且涉及诸 如 Flash 动画系统的系统的交互性。
     图 8A-8F 示出了用于捕捉并使用 3-D 模型的 2-D 图像的过程的截屏。 总的来 说，在一个特定示例中，图示出了用户初始捕捉模型的图像，然后操纵那些图像来使用 2-D 图像实现 3-D 般的体验。
     图 8A 示出了设计或 CAD 应用 802- 在此为 GOOGLE SKETCHUP 应用 - 的显示 800 以及在应用上覆盖的成像对话 804。 用于生成覆盖的程序由用于应用的插件调用，其 中该插件生成用户可选择的图标 806。 在此，用户刚选择了该图标，促使对话 804 在应用 之上生成。 在这个特定示例中，将对话生成为具有格式化为看起来如同由典型应用生成 的对话框的显示内容的无边框网页。
     对话框 804 向用户提供指示以及输入用于成像过程的三个不同参数的能力。 首 先，在名称框 808 中自动输入用于成像的默认名称，以及用户可以改变该名称。 由用户 选择的名称可以影响给予图像文件和稍后在用于显示图像的自动生成的网页上显示的信 息的名称。 在这个示例中，成像参数输入框 812 允许用户选择待为模型拍摄的图像数 目。 更高的图像数目将允许未来更平滑地操纵对象，但是会占用更多空间以存储额外的 图像。 在此，待在模型周围以十度间隔生成 36 个图像。 在其它界面中，可以为用户提供替选或额外的成像选择。 例如，可以允许用户 选择轴，其中在创建模型的图像时虚拟照相机将围绕该轴旋转。 用户还可以识别用于照 相机的路径或路径形状 ( 例如，圆形、椭圆形等 )。 例如，如果用户选择椭圆形路径，则 在用户操纵模型的图像来在空间中旋转模型时，模型将显现为朝向用户以及远离用户移 动。 而且，可以给予用户选项以从围绕模型的球体或其它 3-D 对象上的点获得图像。
     在附录 D 中附上用于生成图 8A 中所示的对话的示例 JavaScript 代码。 在附录 E 中附上由该代码访问的常用功能。
     图 8B 示出了图 8A 的应用 802 以及在对话框 804 之上以灯箱形式生成的文件管 理器 814。文件管理器示出了默认目录路径并且提供多个控件，所述多个控件允许用户选 择显示的目录或子目录、创建新的目录、取消操作、或 ( 利用 “OK” 按钮 ) 确认操作， 因此将当前选择的目录设置为待将文件保存入其中的目录。 可以通过用户选择图 8A 中的 “改变” 按钮来调用图 8B 的显示。
     在附录 A 和 G 中附上用于生成图 8B 中所示的对话的示例 JavaScript 代码。 在附 录 B 和 H 中附上用于该对话的示例 CSS 代码。 在附录 I 中附上 ( 用于生成房屋的模型的 图像的 ) 示例 HTML 代码。
     图 8C 示出了在用户选择了待将文件保存入其中的文件夹并且还选择了模型的待 捕捉的图像数目后的对话框 804。 在该图中，36 个图像的第十个正处于被捕捉的过程。 对话 804 可以将每一个图像示出为其被捕捉并保存。 在完成捕捉后，可以向查看者示出 表达该意思的消息。 在附录 D 中附上用于促使图像被捕捉的示例 JavaScript 代码。
     图 8D 仅是由图 8C 中所描绘的过程保存的文件的文件管理器视图。 如所示， 文件被保存在 c:\program files\Google\Google SketchUp6\Plugins\orbitalimages\Lamborghini sub-directory 中。 文 件 包 括 汽 车 模 型 的 36 个 图 像 文 件 ( 标 记 为 “image00.jpg” 至 “image.35.jpg”) 以及名为 “index.html” 的 HTML 文件。 其后将论述 HTML 文件的内
     容。 图 8E 和 8F 示出了由刚才论述的过程创建的网页的显示，其中每一个图示出了已 捕捉的图像中的一个。 还可以在每一个图像的上方附近看见以双箭头形式的控件。 该控 件在用户将其指针悬停在图像上时出现。 如果用户然后向下点击并且向左或向右拖动， 则这样的行为将促使模型显现为逆时针或顺时针方向旋转，即通过取得模型的各种保存 的图。
     在附录 F 中附上用于生成对话的 HTML 模板代码。 在一个示例中，用于显示图 8E 和 8F 的 HTML 代码 ( 其可以从模板代码形成 ) 可以采用下述形式 ：
    
    
    
    
    
    
    
     LamborghiniiGenerated at 01:59PM
     Wednesday，28November，2007
    
    
    
     还可以利用用于允许用户与已保存的图像中的各种图像交互以及显示已保存的 图像中的各种图像的其它各种技术。
     图 8G-8J 示出了用于管理对模型的图像捕捉的对话框的截屏。 这些截屏类似于 刚才论述的那些，但是示出了用于与这样的系统的用户交互的替选机制。 图 8G 示出了对 话框，该对话框类似于在图 8A 中所示的。 具体地，该对话框示出了正成像的模型的示例 第一图像，并且允许用户输入与这样的成像相关联的三个参数。 第一个参数为在围绕正 成像的模型的圆形上的每一个图像之间的度数。 第二个参数为就在 X 和 Y 方向上的像素 而言的待生成的图像的大小。 第三个参数为待将图像和其它关联文件放置入其中的文件 夹，以及用户可以选择来改变该文件夹的按钮控件。 例如，系统可以初始示出默认文件 夹，诸如用于微软 WINDOWS 计算机的常见的我的文档文件夹，以及用户可以改变为不 同的文件夹。
     图 8H 示出了用户通过其导航计算机上的文件夹结构的对话框，并且该对话框类 似于图 8B。 可以如上所述以制作得看起来如同文件管理器对话框的 web 浏览器窗口形式 生成该对话框，其中生成浏览器窗口的代码与给予其对文件系统信息的访问权的管道应 用通信。
     图 8I 示出了用于导出查看模拟 3-D 模型的动画所需的文件的对话框。 该对话框 示出了模型的一个图像，以及允许用户将光标放置在图像上并且向左和向右拖动以促使 其它图像顺次显示。 以这样的方式，用户可以似乎是绕四周拉动模型以便以看似 3-D 状 态方式观看模型。
     图 8J 示出了用于创建用于保存与模型有关的文件的新的子目录的对话框。 这样 的对话框在图 8H 的对话框之上示出，并且可以在用户选择图 8H 中的对话框的 “创建新 的目录”控件时生成。 对新目录的这样的创建可以由图 8J 的对话框来模拟，并且可以通 过将对话框作为 web 浏览器的一部分生成的程序与管道应用诸如以上述方式进行通信， 来实际实现。
     图 9 示出了可以与在此描述的技术一起使用的通用计算机设备 900 和通用移动计 算机设备 950 的示例。 计算设备 900 意在表示各种形式的数字计算机，诸如膝上型机、台 式机、工作站、个人数字助理、服务器、刀片服务器、大型机以及其它适当的计算机。 计算设备 950 意在表示各种形式的移动设备，诸如个人数字助理、蜂窝电话、智能手机以及其它相似的计算设备。 在此示出的组件、其连接和关系以及其功能意在只是示例性 的，并且并不意在限制在本文档中描述和 / 或主张的本发明的实施方式。
     计算设备 900 包括处理器 902、存储器 904、存储设备 906、连接到存储器 904 和高速扩展端口 910 的高速接口 908 以及连接到低速总线 914 和存储设备 906 的低速接口 912。 组件 902、904、906、908、910 和 912 中的每一个使用各种总线互连，并且可以视 情况被安装在公共主板上或以其它方式安装。 处理器 902 可以处理用于在计算设备 900 内 执行的指令，包括存储在存储器 904 中或存储设备 906 上用来在诸如耦接到高速接口 908 的显示 916 的外部输入 / 输出设备上显示 GUI 的图形信息的指令。 在其它实施方式中， 可以视情况使用多个处理器和 / 或多个总线以及多个存储器和存储器类型。 并且，可以 连接多个计算设备 900，其中每一个设备提供部分必需操作 ( 例如，作为服务器簇、刀片 服务器组或多处理器系统 )。
     存储器 904 存储在计算设备 900 内的信息。 在一个实施方式中，存储器 904 是 易失性存储器单元。 在另一个实施方式中，存储器 904 是非易失性存储器单元。 存储器 904 还可以是另一种形式的计算机可读介质，诸如磁或光盘。
     存储设备 906 能够为计算设备 900 提供海量存储。 在一个实施方式中，存储设 备 906 可以是或包含计算机可读介质，诸如软盘设备、硬盘设备、光盘设备或带设备、 闪存或其它相似的固态存储器设备、或设备阵列，包括在存储区域网络或其它配置中的 设备。 计算机程序产品可以被有形地包含在信息载体中。 计算机程序产品还可以包含在 被执行时执行诸如上述那些方法的一个或多个方法的指令。 信息载体是计算机或机器可 读介质，诸如存储器 904、存储设备 906、在处理器 902 上的存储器或传播信号。 高速控制器 908 管理关于计算设备 900 的带宽密集型操作，而低速控制器 912 管 理较低带宽密集型操作。 职责的这样的分配只是示例性的。 在一个实施方式中，高速控 制器 908( 例如通过图形处理器或加速器 ) 耦接到存储器 904、显示 916，以及耦接到可以 接受各种扩展卡 ( 未示出 ) 的高速扩展端口 910。 在该实施方式中，低速控制器 912 耦接 到存储设备 906 和低速扩展端口 914。 可以包括各种通信端口 ( 例如 USB、蓝牙、以太 网、无线以太网 ) 的低速扩展端口可以耦接到诸如键盘、指示设备、扫描仪的一个或多 个输入 / 输出设备，或例如通过网络适配器耦接到诸如交换机或路由器的联网设备。
     计算设备 900 可以如图中所示以多种不同的形式实现。 例如，计算设备 900 可以 被实现为标准服务器 920 或更多时间被实现在一组这样的服务器中。 计算设备 900 还可 以被实现为机架服务器系统 924 的一部分。 另外，计算设备 900 可以在诸如膝上型计算 机 922 的个人计算机中实现。 替选地，来自计算设备 900 的组件可以与诸如设备 950 的移 动设备 ( 未示出 ) 中的其它组件相结合。 这样的设备中的每一个可以包含计算设备 900、 950 中的一个或多个，以及整个系统可以由相互通信的多个计算设备 900、950 组成。
     除其它组件外，计算设备 950 包括处理器 952、存储器 964、诸如显示 954 的输 入 / 输出设备、通信接口 966 以及收发器 968。 设备 950 还可以提供有诸如微驱动或其它 设备的存储设备以提供额外的存储。 组件 950、952、964、954、966 和 968 中的每一个 使用各种总线互连，以及组件中的数个可以视情况被安装在公共主板上或以其它方式安 装。
     处理器 952 可以执行在计算设备 950 内的指令，包括存储在存储器 964 中的指
     令。 处理器可以被实现为包括独立和多个模拟和数字处理器的芯片的芯片集。 处理器可 以提供例如对设备 950 的其它组件的协调，诸如对用户接口、由设备 950 运行的应用以及 经由设备 950 的无线通信的控制。
     处理器 952 可以通过耦接到显示 954 的控制接口 958 和显示接口 956 与用户通 信。 显示 954 可以是例如 TFT LCD( 薄膜晶体管液晶显示 ) 或 OLED( 有机发光二极管 ) 显示或其它适当的显示技术。 显示接口 956 可以包括用于驱动显示 954 向用户呈现图形和 其它信息的适当的电路。 控制接口 958 可以从用户接收命令并且将命令进行转换以提交 给处理器 952。 另外，可以提供与处理器 952 通信的外部接口 962，以使得设备 950 能够 与其它设备进行近区域通信。 外部接口 962 可以例如在一些实施方式中提供有线通信， 或在其它实施方式中提供无线通信，以及还可以使用多个接口。
     存储器 964 存储在计算设备 950 内的信息。 存储器 964 可以被实现为计算机可 读介质、易失性存储器单元或非易失性存储器单元中的一个或多个。 还可以提供扩展存 储器 974 并且通过可以包括例如 SIMM( 单列直插内存模块 ) 卡接口的扩展接口 972 将其 连接到设备 950。 这样的扩展存储器 974 可以为设备 950 提供额外的存储空间，或还可以 存储用于设备 950 的应用或其它信息。 具体地，扩展存储器 974 可以包括指令来实现或 补充上述过程，以及还可以包括安全信息。 因此，扩展存储器 974 可以例如作为用于设 备 950 的安全模块提供，以及可以被编程有允许安全使用设备 950 的指令。 另外，安全 应用以及额外的信息可以经由 SIMM 卡提供，诸如以不可非法侵入的方式将标识信息放 置在 SIMM 卡上。
     存储器可以如下所述包括例如闪存和 / 或 NVRAM 存储器。在一个实施方式中， 将计算机程序产品有形地包含在信息载体中。 计算机程序产品包含在被执行时执行诸如 上述那些方法的一个或多个方法的指令。 信息载体是计算机或机器可读介质，诸如存储 器 964、扩展存储器 974、在处理器 952 上的存储器或可以例如通过收发器 968 或外部接 口 962 接收的传播信号。
     设备 950 可以在需要的情况下通过可以包括数字信号处理电路的通信接口 966 无 线地通信。 通信接口 966 可以提供在各种模式或协议下的通信，诸如 GSM 语音通话、 SMS、 EMS 或 MMS 消 息、 CDMA、 TDMA、 PDC、 WCDMA、 CDMA2000 或 GPRS 等。 可以例如通过射频收发器 968 来发生这样的通信。 另外，诸如使用蓝牙、 WiFi 或 其它这样的收发器 ( 未示出 )，可以发生短程通信。 另外，GPS( 全球定位系统 ) 接收器 模块 970 可以向设备 950 提供可以由运行在设备 950 上的应用视情况使用的额外的导航和 位置相关的无线数据。
     设备 950 还可以使用音频编解码器 960 可听见地通信，音频编解码器 960 可以从 用户接收口语信息并且将其转换为可使用的数字信息。 同样，音频编解码器 960 可以诸 如通过例如在设备 950 的送受话器中的扬声器，为用户生成可听见的声音。 这样的声音 可以包括来自语音电话呼叫的声音，可以包括已记录的声音 ( 例如，语音消息、音乐文 件等 ) 以及还可以包括由在设备 950 上操作的应用生成的声音。
     计算设备 950 可以如图中所示以多种不同的形式实现。 例如，计算设备 950 可 以被实现为蜂窝电话 980。 计算设备 950 还可以被实现为智能电话 982、个人数字助理或 其它相似的移动设备的部分。可以在数字电子电路、集成电路、专门设计的 ASIC( 专用集成电路 )、计算机硬 件、固件、软件和 / 或以上的组合中实现在此描述的系统和技术的各种实施方式。 这些 各种实施方式可以包括在可编程系统上可执行和 / 或可解释的一个或多个计算机程序中 的实施方式，所述可编程系统包括至少一个可编程处理器，其可以是专用或通用的，被 耦接以从存储系统、至少一个输入设备和至少一个输出设备接收数据和指令以及向存储 系统、至少一个输入设备和至少一个输出设备传送数据和指令。
     这些计算机程序 ( 也被称为程序、软件、软件应用或代码 ) 包括用于可编程处理 器的机器指令，并且可以以高级程序和 / 或面向对象的编程语言、和 / 或汇编 / 机器语言 来实现。 如在此所使用的，术语 “机器可读介质”、 “计算机可读介质” 是指用于向可 编程处理器提供机器指令和 / 或数据的任何计算机程序产品、装置和 / 或设备 ( 例如，磁 盘、光盘、存储器、可编程逻辑设备 (PLD))，包括接收作为机器可读信号的机器指令的 机器可读介质。 术语 “机器可读信号” 是指用于向可编程处理器提供机器指令和 / 或数 据的任何信号。
     为了提供与用户的交互，在此描述的系统和技术可以在具有下述的计算机上实 现 ：用于向用户显示信息的显示设备 ( 例如，CRT( 阴极射线管 ) 或 LCD( 液晶显示 ) 监 视器 )，以及用户通过其可以向计算机提供输入的键盘和指示设备 ( 例如，鼠标或跟踪 球 )。 也可以使用其它类型的设备来提供与用户的交互 ；例如，提供给用户的反馈可以 是任何形式的感知反馈 ( 例如，视觉反馈、听觉反馈或触觉反馈 ) ；以及可以以任何形 式，包括声学的、话音的或触觉的输入，接收来自用户的输入。
     在此描述的系统和技术可以在包括后端组件 ( 例如作为数据服务器 )、或包括 中间件组件 ( 例如应用服务器 )、或包括前端组件 ( 例如具有用户通过其可以与在此描 述的系统和技术的实施方式交互的图形用户界面或 Web 浏览器的客户端计算机 )、或者 这样的后端、中间件或前端组件的任何组合的计算系统中实现。 系统的组件可以通过 任何形式或介质的数字数据通信 ( 例如通信网络 ) 互连。 通信网络的示例包括局域网 (″ LAN″ )、广域网 (″ WAN″ ) 以及因特网。
     计算系统可以包括客户端和服务器。 客户端和服务器通常彼此远离并且典型地 通过通信网络交互。 客户端和服务器的关系依靠在各个计算机上运行并且彼此具有客户 端 - 服务器关系的计算机程序产生。
     已描述了多个实施例。 然而，应当理解的是，可以在不背离本发明的精神和范 围的情况下进行各种修改。 例如，关于电视广告描述了本文档的大部分，但是还可以寄 送诸如广播广告和在线视频广告的其它形式的未来的、基于受众的广告。
     另外，图中所描绘的逻辑流不需要所示的特定次序或相继次序才能获得期望的 结果。 另外，可以提供其它步骤，或可以从所描述的流程除去步骤，以及可以将其它组 件添加到所描述的系统或从所描述的系统移除组件。 因此，其它实施例在权利要求的范 围内。
     附录 A
     //Copyright 2007Google Inc.
     //All Rights Reserved.
     ＊ @fileoverview treeView.js＊ The TreeView holds directory listing in HTML using collapsable DIVs. ＊ It also shows the full path of the selected directory. ＊ You can pass strings like ″ C/A/B/D″ and it will create the subdirs. ＊ ＊ @author rcg@google.com(Rich Gossweiler) ＊ An example call sequence might be: ＊ var treeView ＝ new TreeView(scrollableDivContainer， handleSelected) ＊ treeView.setWorkingDir(″ C:/A/B/D″ ) ； ＊ handleSelected(pathName)is called whenever a directory is selected ＊ and is passed the pathname of the selected directory.Note that the ＊ pathname ends in a″ /″ even if you pass in paths that do not. ＊ The developer can react to selections by adding the subchildren for ＊ the node.For example: ＊ ＊ function handleSelected(pathName){ ＊ children ＝ new Array() ； ＊ if(pathName ＝＝″ C/″ ){ ＊ children[0] ＝″ One Dir″ ； ＊ children[1] ＝″ Two Dir″ ； ＊ children[2] ＝″ Three Dir″ ； ＊ }else if(pathName ＝＝″ C/Two Dir/″ ){ ＊ children[0] ＝″ A″ ； ＊ children[1] ＝″ B″ ； ＊ children[2] ＝″ C″ ； ＊ children[3] ＝″ D″ ； ＊ children[4] ＝″ E″ ； ＊ } ＊ treeView.addArrayToDir(pathName， children) ； ＊} ＊/ //class name for a treeview node var TREEVIEW_NODE ＝″ treeViewNode″ ； //class name for an unselected treeview span node var TREEVIEW_NODE_UNSELECTED ＝″ treeViewNodeUnselected″ ； //class name for a selected treeview span node var TREEVIEW_NODE_SELECTED ＝″ treeViewNodeSelected″ ； //image names for the folder icons var TREEVIEW_OPEN_FOLDER_URL ＝″ openFolder.png″ ； var TREEVIEW_CLOSED_FOLDER_URL ＝″ closedFolder.png″ ；//used as a prefix for each directory′ s icon id and span id var TREEVIEW_ICON ＝″ treeViewIcon/″ ； var TREEVIEW_SPAN ＝″ treeViewSpan/″ ； / ＊＊ ＊ @constructor ＊ @param{Node}parentNode Where to place tree in the webpage′ s HTML ＊ @param {Function}getChildren treeView calls this to get the children ＊ of a node.The function takes the parent as a parameter and ＊ returns an array of children nodes. ＊/ var TreeView ＝ function(parent， callback){ this.currentDir ＝ null ； this.setWorkingDirCallback ＝ callback ； this.container ＝ parent ； }； / ＊＊ ＊ Makes a subdirectory under the parent node.If the pathName has ＊ multiple subnodes， it will make them too.For example: ＊ treeView.makeDir(root， ″ A/B/C/D″ ) ； ＊ treeView.makeDir(root， ″ A1/A2/A3/″ ) ；//ending″ /″ are ok ＊ Making a directory does not change the current directory. ＊ ＊ @param {Element}parentNode Where to make the directory. ＊ @param {String}name The name of the new directory. ＊/ TreeView.prototype.makeDir ＝ function(parentNode， pathName){ if ( ！ pathName ||pathName ＝＝″″ ){return ；} var pathId ＝″″ ； if (parentNode){ pathId ＝ parentNode.id ； }else { parentNode ＝ this.container ； pathId ＝″″ ； } //split the pathName by″ /″ and create the directories var dirList ＝ pathName.split(″ /″ ) ； var dirListLength ＝ dirList.length ； var newNode ＝ null ； var newImage ＝ null ；var newSpan ＝ null ； for (var i ＝ 0 ；i ＜ dirListLength ；i++){ if (dirList[i].length){ //ids must be unique， so store the full path pathId+ ＝ dirList[i]+″ /″ ； //make sure the node does not alreadv exist newNode ＝ document.getElementById(pathId) ； if ( ！ newNode){ newNode ＝ TreeView.createDiv(parentNode) ； newNode.className ＝ TREEVIEW_NODE ； newNode.id ＝ pathId ； //add the icon newImage ＝ TreeView.createImage(newNode) ； newImage.className ＝ TREEVIEW_ICON ； newImage.id ＝ TREEVIEW_ICON+pathId ； newImage.src ＝ TREEVIEW_CLOSED_FOLDER_URL ； //add a span with the name newSpan ＝ TreeView.createSpan(newNode) ； newSpan.className ＝ TREEVIEW_NODE_UNSELECTED ； newSpan.id ＝ TREEVIEW_SPAN+pathId ； newSpan.innerHTML ＝ dirList[i] ； //store a pointer to the javascript treeview object so that //we can reference it when the user clicks on the related html. newNode.treeViewObj ＝ this ； newNode.onclick ＝ TreeView.handleClick ； } //walk down the path so we can make sub-directories parentNode ＝ newNode ； } } }； / ＊＊ ＊ A convenient function to add an array of child directories ＊ @param {Array}dirList ＊/ TreeView.prototype.addArrayToDir ＝ function(pathName， dirList){ if ( ！ dirList||dirList.length ＜ 1){ return ；} var parentNode ＝ null ； if (pathName ＝＝ undefined||pathName ＝＝ null){ parentNode ＝ null ； }else { parentNode ＝ document.getElementById(pathName) ； } var childCount ＝ dirList.length ； for (var i ＝ 0 ；i ＜ childCount ；i++){ this.makeDir(parentNode， dirList[i]) ； } }； / ＊＊ ＊ Return the current directory path as a string.If it has not been ＊ set， then return″″ ； ＊ @return {String}the current directory as a string ＊/ TreeView.prototype.getWorkingDir ＝ function(){ if (this.currentDir){ return this.currentDir.id ； }else { return″″ ； } }； / ＊＊ ＊ Set the current directory path.If the subtree does not exist， ＊ create it as well. ＊ @param {String}pathname Change the current directory to this pathname ＊/ TreeView.prototype.setWorkingDir ＝ function(pathName){ var ele ＝ null ； if (pathName ＝＝ undefined||pathName ＝＝″″ ){ return ； } //deselect the old one if (this.currentDir){ var id ＝ this.currentDir.id ； ele ＝ document.getElementById(TREEVIEW_SPAN+id) ；if (ele){ ele.className ＝ TREEVIEW_NODE_UNSELECTED ； } } //since makeDir will make only new directories， call it to ensure //that the directory exists. this.makeDir(null， pathName) ； //we store pathnames with″ /″ on the end， so if the user //passes in a pathname without it， append it so we can find it. if (pathName.charAt(pathName.length-1) ！＝″ /″ ){ pathName+ ＝″ /″ ； } //now select it this.currentDir ＝ document.getElementById(pathName) ； ele ＝ document.getElementById(TREEVIEW_SPAN+pathName) ； if (ele){ ele.className ＝ TREEVIEW_NODE_SELECTED ； } //run up the tree and open all parent nodes var ele ＝ this.currentDir ； var node ＝ null ； while(ele&&ele.className ＝＝ TREEVIEW_NODE){ var childCount ＝ ele.childNodes.length ； for (var i ＝ 0 ；i ＜ childCount ；i++){ node ＝ ele.childNodes[i] ； if (node.className ＝＝ TREEVIEW_ICON){ node.src ＝ TREEVIEW_OPEN_FOLDER_URL ； break ； } } ele ＝ ele.parentNode ； } if (this.setWorkingDirCallback){ this.setWorkingDirCallback(pathName) ； } }； / ＊＊ ＊ When the user clicks on a folder it can open or close. ＊ Either way that directory is selected， but we need to toggle the＊ folder and all of its children. ＊ ＊ @private ＊ @param {Element}node Close all the nodes under this node ＊/ TreeView.prototype.closeDir_ ＝ function(node){ if ( ！ node){ return ； } var nodeCount ＝ node.childNodes.length ； var children ＝ [] ； for (var i ＝ 0 ；i ＜ nodeCount ；i++){ var subNode ＝ node.childNodes[i] ； if (subNode.className ＝＝ TREEVIEW_NODE){ this.closeDir_(subNode) ； children[children.length] ＝ subNode ； } } for(var i ＝ 0 ；i ＜ children.length ；i++){ node.removeChild(children[i]) ； } }； / ＊＊ ＊ Toggles the icon open or closed ＊ @private ＊/ TreeView.prototype.closeIcon_ ＝ function(node){ if ( ！ node){ return ； } var childCount ＝ node.childNodes.length ； var childNode ＝ null ； for (var i ＝ 0 ；i ＜ childCount ；i++){ childNode ＝ node.childNodes[i] ； if (childNode.className ＝＝ TREEVIEW_ICON){ childNode.src ＝ TREEVIEW_CLOSED_FOLDER_URL ； break ； } }}； / ＊＊ ＊ reports whether the icon is open or closed ＊ returns false on error (e.g.no node) ＊ @private ＊ @return{Boolean} ＊/ TreeView.prototype.isOpen_ ＝ function(node){ if ( ！ node){ return false ； } var childCount ＝ node.childNodes.length ； var childNode ＝ null ； for (var i ＝ 0 ；i ＜ childCount ；i++){ childNode ＝ node.childNodes[i] ； if (childNode.className ＝＝ TREEVIEW_ICON){ //alert(childNode.src.indexOf(TREEVIEW_OPEN_FOLDER_URL)>-1) ； return (childNode.src.indexOf(TREEVIEW_OPEN_FOLDER_URL)>-1) ； } } return false ； }； / ＊＊ ＊ Utility function that returns whether the given node is the selectedone ＊ @private ＊/ TreeView.prototype.isSelected ＝ function(node){ return (node ＝＝ this.currentDir) ； }； / ＊＊ ＊ When the user clicks on a node， toggle the folder closed or open ＊ and set the currentDirectory. ＊ @private ＊ @param{Event}e is a DOM event ＊/ TreeView.handleClick_ ＝ function(e){ e ＝ e ？ e:window.event ； //don′ t bubble the event up through the parent nodes if (e.stopPropagation){e.stopPropagation() ； }else { e.cancelBubble ＝ true ； } var target ＝ TreeView.getEventTarget(e) ； if (target){ //run up the tree to find the treeview node while (target &&target.parentNode && target.className ！＝ TREEVIEW_NODE){ target ＝ target.parentNode ； } if (target){ var treeViewObj ＝ target.treeViewObj ； var alreadySelected ＝ treeViewObj.isSelected(target) ； if ( ！ alreadySelected){ treeViewObj.setWorkingDir(target.id) ； }else { if (treeViewObj.isOpen_(target)){ treeViewObj.closeDir_(target) ； treeViewObj.closeIcon_(target) ； }else { treeViewObj.setWorkingDir(target.id) ； } } } } return false ； }； / ＊＊ ＊ Utility function to get the target HTML from the event ＊ @param {Element}event The event that has the target ＊/ TreeView.getEventTarget ＝ function(event){ var targetElement ＝ null ； if (event.target){ targetElement ＝ event.target ； }else { targetElement ＝ event.srcElement ； }while (targetElement.nodeType ＝＝ 3&&targetElement.parentNode){ targetElement ＝ targetElement.parentNode ； } return targetElement ； }； / ＊＊ ＊ Utility function to create a new DIV ＊ @param {Element}parentNode Where to hang the new DIV ＊ @return {Element}the new DIV ＊/ TreeView.createDiv ＝ function(parentNode){ var element ＝ document.createElement(″ DIV″ ) ； if (parentNode){ parentNode.appendChild(element) ； } return element ； }； / ＊＊ ＊ Utility function to create a new SPAN ＊ @param {Element}parentNode Where to hang the new SPAN ＊ @return {Element}the new SPAN ＊/ TreeView.createSpan ＝ function(parentNode){ var element ＝ document.createElement(″ SPAN″ ) ； if (parentNode){ parentNode.appendChild(element) ； } return element ； }； / ＊＊ ＊ Utility function to create a new IMG ＊ @param {Element}parentNode Where to hang the new image ＊ @return {Element}the new IMG ＊/ TreeView.createImage ＝ function(parentNode){ var element ＝ document.createElement(″ IMG″ ) ； if (parentNode){ parentNode.appendChild(element) ； }return element ； }； / ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ junk //now set the root to the first treeview node var nodeCount ＝ this.container.childNodes.length ； for (var i ＝ 0 ；i ＜ nodeCount ；i++){ var subNode ＝ this.container.childNodes[i] ； if (subNode.className ＝＝ TREEVIEW_NODE){ this.root ＝ subNode ； break ； } } ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ / 附录 B / ＊＊ ＊ Copyright 2007 Google Inc.All Rights Reserved. ＊＊ / / ＊＊ ＊ @fileoverview treeView.css Style Sheet for the TreeView. ＊ @author rcg@google.com(Rich Gossweiler) ＊/ / ＊ The currently selected directory ＊ / #treeViewCurrentDirectorySection{ font:bold 10px arial ； margin-bottom:5px ； } / ＊ The container for a given directory ＊ / .treeViewNode{ font:11px arial ； vertical-align:middle ； cursor:pointer ； cursor:hand ； margin-left:15px ； } .treeViewNodeUnselected{ margin-left:3px ； } .treeViewNodeSelected{/ ＊ font:bold 14pxa rial ；＊ / color:#FFFFFF ； background-color:#335EA8 ； overflow:hidden ； } 附录 C //Copyright 2007 Google Inc.-All Rights Reserved. / ＊＊ ＊ @fileoverview orbitalImagingButtonBase.js A set of common functions. ＊ @author rcg@google.com(Rich Gossweiler) ＊/ function getWindowWidth(){ if (window.innerWidth ！＝ undefined){ return window.innerWidth ； } if (window.document.body.offsetWidth ！＝ undefined){ return document.body.offsetWidth ； } return-1 ； }； function getWindowHeight(){ if (window.innerHeight ！＝ undefined){ return window.innerHeight ； } if (window.document.body.offsetHeight ！＝ undefined){ return document.body.offsetHeight ； } return-1 ； }； function getWidth(node){ var width ＝ 0 ； while (node){ width+ ＝ node.offsetLeft ； node ＝ node.offsetParent ； } return width ； } function px(numPixels){ return Math.round(numPixels)+″ px″ ；}； function show(element){ if(element){ element.style.display ＝″ block″ ； } } function hide(element){ if(element){ element.style.display ＝″ none″ ； } } //Sets the opacity of the given element to the given value(between 0 and 1) function setOpacity(element， opacity){ element.style.filter ＝″ alpha(opacity ＝″ +Math.round(opacity ＊ 100)+ ″ )″ ； element.style.opacity ＝ opacity ； } function createDiv(parent){ var element ＝ document.createElement(″ DIV″ ) ； if (parent ！＝ undefined){ parent.appendChild(element) ； } return element ； } function createSpan(parent){ var element ＝ document.createElement(″ SPAN″ ) ； if (parent ！＝ undefined){ parent.appendChild(element) ； } return element ； } function createImage(parent){ var element ＝ document.createElement(″ IMG″ ) ； if (parent ！＝ undefined){ parent.appendChild(element) ； } return element ； }function createButton(parent， opt_value){ var element ＝ document.createElement(″ INPUT″ ) ； element.type ＝″ button″ ； element.className ＝″ button″ ； if (opt_value){ element.value ＝ opt_value ； } if (parent ！＝ undefined){ parent.appendChild(element) ； } return element ； } function createTextBox(parent， opt_value){ var element ＝ document.createElement(″ INPUT″ ) ； element.type ＝″ text″ ； element.className ＝″ textBox″ ； if (opt_value){ element.value ＝ opt_value ； } if (parent ！＝ undefined){ parent.appendChild(element) ； } return element ； } / ＊＊ ＊ Ellipses the middle of the name ＊/ function ellipseMiddle(path， index){ //cut the string in half， roughly var cut ＝ Math.floor(index/2) ； if (path.length>index){ path ＝ path.substr(0， cut)+″ ...″ +path.substr(path.lengthcut， cut) ； } return path ； } 附录 D //Copyright 2007 Google Inc.-All Rights Reserved. / ＊＊＊ @fileoverview orbitalImagingButton.js ＊ @author rcg@google.com(Rich Gossweiler) ＊ @author brew@google.com(Brian Brewington) ＊ ＊ Permission to use， copy， modify， and distribute this software for ＊ any purpose and without fee is hereby granted， provided that the above ＊ copyright notice appear in all copies. ＊ ＊ THIS SOFTWARE IS PROVIDED″ AS IS″ AND WITHOUT ANY EXPRESS ＊ IMPLIED WARRANTIES， INCLUDING， WITHOUT LIMITATION， THEOR
     IMPLIED ＊ WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.
     ＊/ var getDirectorySection ＝ null ； var getImageCountSection ＝ null ； var imageSection ＝ null ； var statusSection ＝ null ； var spinningImageSection ＝ null ； var statusSection ＝ null ； //imageDirectoryEle is the HTML representation with possible ellipses //imageDirectory is the full string name var imageDirectoryEle ＝ null ； var imageDirectory ＝″″ ； var modelNameEle ＝ null ； var imageCount ＝ null ； var stopped ＝ false ； / ＊＊ ＊ main entry point for the application. ＊/ function init(imageDirectoryIn， modelNameIn， imageCountIn){ var ele ＝ null ； var root ＝ document.body ； //set up the getDirectory section getDirectorySection ＝ createDiv(root) ； getDirectorySection.id ＝″ getDirectory″ ； var logo ＝ createImage(getDirectorySection) ；logo.id ＝″ logo″ ； logo.src ＝″ orbitalImagingButton.png″ ； ele ＝ createSpan(getDirectorySection) ； ele.innerHTML ＝″ Save in:″ ； imageDirectoryEle ＝ createSpan(getDirectorySection) ； imageDirectoryEle.id ＝″ outputDirectory″ ； imageDirectoryEle.innerHTML ＝ ellipseMiddle(imageDirectoryIn，50) ； imageDirectory ＝ imageDirectoryIn ； ele ＝ createButton(getDirectorySection， ″ Change″ ) ； ele.id ＝″ changeDirectoryButton″ ； ele.onclick ＝ pickDirectory ； //set up the model name section var modelNameSection ＝ createDiv(root) ； modelNameSection.id ＝″ modelNameSection″ ； ele ＝ createSpan(modelNameSection) ； ele.innerHTML ＝″ Save model as:″ ； modelNameEle ＝ createTextBox(modelNameSection) ； modelNameEle.id ＝″ modelNameTextBox″ ； modelNameEle.value ＝ modelNameIn ； ele ＝ createSpan(modelNameSection) ； ele.innerHTML ＝′ Images to generate:′ ； imageCount ＝ createTextBox(modelNameSection， imageCountIn) ； imageCount.id ＝″ outputImageCount″ ； imageCount.onkeypress ＝ pickImageCount ； //set up the place where we show the spinning image spinningImageSection ＝ createImage(root) ； spinningImageSection.id ＝″ spinningImage″ ； spinningImageSection.src ＝″ orbitalImagingBackground.png″ ele ＝ createDiv(root) ； ele.id ＝″ splashMessage″ ； ele.innerHTML ＝′ You spin me right round， baby.′ + ′





′ + ′ Press the″ Create ！″ button to generate a set of images that orbit
′ + ′ the selected SketchUp object.This plugin also creates a sample
′ + ′ web page illustrating how to use the images to spin your object.′ ； //set up the status section statusSection ＝ createDiv(root) ；statusSection.id ＝″ status″ ； //statusSection.innerHTML ＝″ status:it is all good.″ ； //set up the cancel button ele ＝ createButton(root， ″ Cancel″ ) ； ele.id ＝″ cancelButton″ ； ele.onclick ＝ handleCancel ； //set up the create button ele ＝ createButton(root， ″ Create ！″ ) ； ele.id ＝″ createButton″ ； ele.onclick ＝ handleCreateButton ； //set up the close button ele ＝ createButton(root， ″ Close″ ) ； ele.id ＝″ closeButton″ ； ele.onclick ＝ handleClose ； hide(ele) ； //Now that the HTML is up， initialize the GetDirectoryDialog GetDirectoryDialog.init() ； } / ＊＊ ＊ ＊/ function pickDirectory(){ GetDirectoryDialog.show(imageDirectory， handlePickDirectoryResults) ； } / ＊＊ ＊ Set the display and persist the results ＊/ function handlePickDirectoryResults(directory){ imageDirectory ＝ directory ； imageDirectoryEle.innerHTML ＝ ellipseMiddle(directory，45) ； } / ＊＊ ＊ When the user changes the number of images to generate， this ＊ validates the entry. ＊/ function pickImageCount(e){ var e ＝ e ？ e :window.event ； //validate that the user typed a number var unicode ＝ e.charCode ？ e.charCode :e.keyCode ；//if the key is not a backspace if (unicode ！＝ 8){ //if the key is not a number disable the key if (unicode ＜ 48||unicode>57){ return false ； } } } / ＊＊ ＊ When the″ cancel″ button is pressed this closes the window. ＊/ function handleCancel(){ stopped ＝ true ； window.location ＝′ skp:cancel′ ； return false ； } / ＊＊ ＊ When the″ cancel″ button is pressed this closes the window. ＊/ function handleClose(){ stopped ＝ true ； window.location ＝′ skp:close′ ； return false ； } / ＊＊ ＊ When the″ create″ button is pressed this starts the process. ＊/ function handleCreateButton(){ //Now validate the number range var imageCount ＝ Math.floor(outputImageCount.value) ； if (imageCount ＜ 3||imageCount>360){ alert(″ Error:Image Count ＝″ +imageCount+″ but it must be between 3 and 360.″ ) ； return false ； } var splashMessage ＝ document.getElementById(″ splashMessage″ ) ； hide(splashMessage) ； //This will make ruby initialize the sketchup state and take the first//image.Then Ruby will call the javascript getNext()so that //j avascript can update its progress bar and tell ruby to getNext() again. var parameter ＝ imageDirectory+″， ″ +modelNameEle.value+″， ″ + imageCount ； window.location ＝″ skp:handleGenerateImagesButtonPress@″ +parameter ； return false ； } / ＊＊ ＊ Makes a call to the ruby orbitalImaging code to move the camera and ＊ take a picture， then advance the counter for the next picture. ＊/ function getNextImage(imageURL， imageIndex){ if(stopped){ window.location ＝′ skp:cancel′ ； return ； } imageIndex++ ； var imageCountNumber ＝ parseInt(imageCount.value) ； //alert(″ js:″ +imageURL) ； spinningImageSection.src ＝ imageURL ； statusSection.innerHTML ＝″ image″ +imageIndex+″ of″ + imageCountNumber ； if (imageIndex ＜ imageCountNumber){ setTimeout(″ callRubyGetNextImage() ； ″，10) ； } } / ＊＊ ＊ ＊/ function showLastImage(imageURL){ var imgCount ＝ parseInt(imageCount.value) ； spinningImageSection.src ＝ imageURL ； statusSection.innerHTML ＝″ done ！ ″ ； //now hide the Create ！ button and show the Close button var ele ＝ document.getElementById(″ createButton″ ) ； hide(ele) ； ele ＝ document.getElementById(″ closeButton″ ) ； show(ele) ；} / ＊＊ ＊ ＊/ function callRubyGetNextImage(){ window.location ＝′ skp:captureNextImage′ ； } 附录 E / ＊＊ ＊ @fileoverviaw orbitalImagingButton.css ＊ @author rcg@google.com(Rich Gossweiler) ＊ @author mlimber@google.com(Mark Limber) ＊ @author brew@google.com(Brian Brewington) ＊/ BODY{ font-family:arial ； font-size:12px ； margin:10px ； } #logo{ vertical-align:middle ； margin-right:5px ； width:24px ； height:24px ； } #getDirectory{ margin-bottom:10px ； font-weight:normal ； } #outputDirectory{ color:#0000FF ； width:204px ； margin-left:5px ； margin-right:5px ； font-weight:bold ； } #changeDirectoryButton{ vertical-align:middle ； margin-left:5px ；} #modelNameSection{ margin-left:30px ； margin-bottom:20px ； font-weight:normal ； } #modelNameTextBox{ margin-left:3px ； width:140px ； margin-right:32px ； font-weight:bold ； color:#0000FF ； } #output ImageCount{ font-size:10px ； font-weight:bold ； width:20px ； margin-left:5px ； margin-right:5px ； color:#0000FF ； border:solid 1px#AAAAAA ； } #spinningImage{ margin-left:29px ； width:400px ； height:290px ； border:solid 1px#AAAAAA ； } #splashMessage{ font-size:12px ； position:absolute ； top:120px ； left:55px ； z-index:2 ； } #status{ font-size:11px ； height:15px ； text-align:center ；margin-top:10px ； margin-bottom:40px ；}

    [1068] #cancelButton{

    [1069] margin-left:30px ；

    [1070] float:left ；

    [1071] }

    [1072] #createButton， #closeButton{

    [1073] margin-right:34px ；

    [1074] float:right ；

    [1075] }

    [1076] .button{

    [1077] font-size:11px ；

    [1078] border:solid lpx#374B6C ；

    [1079] background-image:url(″ buttonBackground.png″ ) ；

    [1080] }

    [1081] .textBox{

    [1082] font-size:10px ；

    [1083] border:sol id 1px#AAAAAA ；

    [1084] }

    [1085] 附录 F

    [1086]

    [1087]

    [1088]

    [1089]

    [1095] $TITLE 附录 G //Copyright 2007Google Inc. //All Rights Reserved. / ＊＊ ＊ @fileoverview getDirectoryDialog.js ＊ @author rcg@google.com(Rich Gossweiler) ＊/ / ＊＊ ＊ @constructor singleton ＊ @param{Element}parentNode Where to place the tree in the webpage′ s HTML ＊ @param{String}name The name of the root ＊/ var Get DirectoryDialog ＝ new function(){ //the lightbox covers the screen with a semi-transparent div //so that the user will only interact with the getDirectory controls. this.lightBox ＝ null ； this.dialog ＝ null ； t his.treeView ＝ null ； //directory/NameEle is the html element and may be ellipsized //directory/Name is a string and is the full directory namethis.d irectoryNameEle ＝ null ； this.directoryName ＝″″ ； this.callback ＝ null ； / ＊＊ ＊ main entry point for the application. ＊/ this.init ＝ function(){ var root ＝ document.body ； //The lightBox is a semi-transparent canvas we use to hide controls GetDirectoryDialog.lightBox ＝ create LightBox(root) ； //Create the GetDirectory dialog GetDirectoryDialog.dialog ＝ createGetDirectoryDialog(root) ； //Create the dialog box that allows you to create a new directory CreateDirectoryDialog.init() ； }； / ＊＊ ＊ Create a semi-transparent lightBox to cover controls so that ＊ the user cannot click on them. ＊ @param{Node}parent ＊/ function createLightBox(parent){ var lightBox ＝ createDiv(parent) ； lightBox.id ＝″ getDirectoryLightBox″ ； hide(lightBox) ； lightBox.style.left ＝ px(0) ； lightBox.style.top ＝ px(0) ； var extension ＝ 20 ； lightBox.style.width ＝ px(getWindowWidth()+extension) ； lightBox.style.height ＝ px(getWindowHeight()+extension) ； setOpacity(lightBox，0.60) ； return lightBox ； } / ＊＊ ＊ ＊ @param{Node}parent ＊/ function createGetDirectoryDialog(parent){ varele ＝ null ； //create a container for the get directory dialogvar dialog ＝ createDiv(parent) ；

    [1298] dialog.id ＝″ getDirectory Dialog″ ；

    [1299] hide(dialog) ；

    [1300] ele ＝ createSpan(dialog) ；

    [1301] ele.id ＝″ getDirectory/Label″ ；

    [1302] ele.innerHTML ＝″ Directory ； ″ ；

    [1303] GetDirectoryDialog.directoryNameEle ＝ createSpan(dialog) ；

    [1304] GetDirectoryDialog.directoryNameEle.id ＝″ getDirectoryDirName″ ；

    [1305] GetDirectoryDialog.directoryNameEle.innerHTML ＝″″ ；

    [1306] ele ＝ createDiv(dialog) ；

    [1307] ele.id ＝″ getDirectoryTreeViewContainer″ ；

    [1308] GetDirectoryDialog.treeView ＝ new TreeView(ele，

    [1309] GetDirectoryDialog.handleGetSubDirectory) ；

    [1310] //set up the cancel button

    [1311] ele ＝ createButton(dialog， ″ Cancel″ ) ；

    [1312] ele.id ＝″ getDirectoryCancelButton″ ；

    [1313] ele.onclick ＝ handleGetDirectoryCancel ；

    [1314] //set up the create button

    [1315] ele ＝ createButton(dialog， ″ Create A New Directory″ ) ；

    [1316] ele.id ＝″ getDirectoryCreateButton″ ；

    [1317] ele.onclick ＝ handleGetDirectoryCreateDirectory ；

    [1318] //set up the ok button

    [1319] ele ＝ createButton(dialog， ″ OK″ ) ；

    [1320] ele.id ＝″ getDirectoryOkButton″ ；

    [1321] ele.onclick ＝ handleGetDirectoryDialogOk ；

    [1322] return dialog ；

    [1323] }

    [1324] this.show ＝ function(imageDirectory， callback){

    [1325] //initialize the directory name and set up the callback

    [1326] //for when the user hits″ ok″

    [1327] GetDirectoryDialog.directortName ＝ imageDirectory ；

    [1328] GetDirectoryDialog.directoryNameEle.innerHTML ＝ ellpseMiddle(imageDirectory，50) ；

    [1329] GetDirectoryDialog.callback ＝ callback ；

    [1330] GetDirectoryDialog.treeView.setWorkingDir(image Directory) ；

    [1331] show(GetDirectoryDialog.lightBox) ；

    [1332] show(GetDirectory Dialog.dialog) ；

    [1333] }；

    [1334] this.handleGetSubDirectory ＝ function(pathName){GetDirectoryDialog.directoryName ＝ pathName ； GetDirectoryDialog.directoryNameEle.innerHTML ＝ ellipseMiddle(pathName， //call ruby to get the children directo ries.When ruby is done it //will call rubyUpdateToDirectory(pathName， stringOfCommaSeparatedDirs) ； window.location ＝′ skp ；getDirectory@′ +pathName ； } / ＊＊ ＊ handleGetSubDirectory()makes a call to Rubyto get the ＊ sub-directo ries.When Ruby is done it will callback to this function ＊ with the results as a comma-separated string of directories. ＊/ this.rubyUpdateToDirectory ＝ function(pathName，stringOfCommaSeparatedDirs){ var children ＝ stringOfCommaSeparatedDirs.split(″， ″ ) ； var childCount ＝ children.length ； if(childCount ＞ 0&&children[0].length ＞ 0){ GetDirectoryDialog.treeView.addArrayToDir(pathName， children) ； } } function handleGetDirectoryCancel(){ hide(GetDirectoryDialog.lightBox) ； hide(GetDirectoryDialog.dialog) ； } function handleGetDirectoryCreateDirectory(){ CreateDirectoryDialog.show(GetDirectoryDialog.directoryName， hand leCreateDirectoryResults) ； } function handleCreateDirectoryResults(newDirectory){ //call ruby to create the new directory.When ruby is done it //will call rubyCreateDirectory(pathName， status) ； var index ＝ new Directory.lastlndexOf(″ /″ ) ； if(index ＜ 0){ return ； } var front ＝ new Directory.substr(0， index) ； var back ＝ newDirectory.slice(index+1) ； window.location ＝′ skp:makeDir@′ +front+′， ′ +back ； } / ＊＊ ＊ ＊/5250) ；

    [1337] CN 102027476 A CN 102027491 A

    [1373] 说明书50/57 页this.rubyCreateDirectory ＝ function(pathName， status){ if(status){ if(pathName&&pathName.length>0){ GetDirectoryDialog.treeView.makeDir(null， pathName) ； Get DirectoryDialog.treeView.setWo rkingDir(pathName) ； } }else{ alert(″ Could not create the directory:″ +pathName) ； } }； function handleGetDirectoryDialogOk(e){ hide(GetDirectoryDialog.lightBox) ； hide(GetDirectoryDialog.dialog) ； GetDirectoryDialog.callback(GetDirectoryDialog.directoryName) ； } } ；//end of GetDirectoryDialog singleton 附录 H / ＊＊ ＊ @fileoverview orbitalImagingButton.css ＊ @author rcg@google.com(Rich Gossweiler) ＊ @author mlimber@google.com(Mark Limber) ＊ @author brew@google.com(Brian Brewington) ＊/ #getDirectoryDialog{ position:absolute ； top:50px ； left:25px ； width:418px ； background-color:#FFFFFF ； border:solid 2px#0000FF ； z-index:3 ； padding:5px ； } #getDirectoryLabel{ } #getDirectoryDirName{ position:absolute ； margin-left:5px ； font-weight:bold ；color:#0000FF ； overflow:hidden ； } #getDirectoryTreeViewContainer{ margin-top:10px ； width:412px ； height:300px ； overflow:auto ； border:solid 1px#AAAAAA ； } #getDirectoryCancelButton{ position:absolute ； margin-top:20px ； } #getDirectoryCreateButton{ position:absolute ； margin-top:20px ； margin-left:150px ； } #getDirectoryOkButton{ width:50px ； margin-top:20px ； margin-right:5px ； float:right ； } #getDirectoryLightBox{ position:absolute ； left:0px ； top:0px ； background-color:#000000 ； z-index:2 ； } / ＊＊＊＊＊＊＊ / #createDirectoryDialog{ position:absolute ； top:200px ； left:10px ； width:450px ； height:75px ；background-color:#FFFFFF ； border:solid 2px#0000FF ； z-index:5 ； padding:5px ； } #createDi rectoryLabel{ font-weight:normal ； } #createDirectoryPathName{ color:#0000FF ； font-weight:bold ； } #createDirectoryTextBox{ color:#0000FF ； font-weight:bold ； margin-left:5px ； width:200px ； } #createDirectoryButtonsContainer{ margin-top:20px ； } #createDirectoryCancelButton{ float:left ； } #createDirectoryOkButton{ width:50px ； float:right ； } #createDirectoryLightBox{ position:absolute ； left:0px ； top:0px ； background-color:#000000 ； z-index:4 ； } .button{ font-size:11px ； border:solid 1px#374B6C ； background-image:url(″ buttonBackground.png″ ) ；}

    [1491] .textBox{

    [1492] font-size:10px ；

    [1493] border:solid 1px#AAAAAA ；

    [1494] }

    [1495] 附录 I

    [1496] < ！ -

    [1497] #Permission to use， copy， modify， and distribute this software for

    [1498] #any purpose and without fee is hereby granted.

    [1499] #THIS SOFTWARE IS PROVIDED ′ AS IS′ AND WITHOUT ANY EXPRESS OR

    [1500] #IMPLIED WARRANTIES ， INCLUDING ， WITHOUT LIMITATION ， THEIMPLIED

    [1501] #WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.

    [1502] -->

    [1503]

    [1504]

    [1505]

    [1506]

    [1516]