CN102027476A - 经由管道应用的文件访问 - Google Patents

Abstract

一种计算机实现的数据访问方法包括执行容器应用中的文件管理器应用，其中文件管理器应用不能直接访问计算机文件系统，执行能够直接访问计算机文件系统的本原应用，以及在文件管理器应用与本原应用之间、以及在本原应用与计算机文件系统之间通信来模拟通过文件管理器应用的直接文件系统访问。

Description

经由管道应用的文件访问

技术领域

本文档涉及用于访问文件系统信息的系统和技术，其中这样的信息通常由诸如使用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代码(其可以从模板代码形成)可以采用下述形式：

<HTML>

   <HEAD>

   <TITLE>SketchUp Orbital Imaging</TITLE>

   <STYLE>

       #title{text-align:center；font:bold 1.4em arial；margin-bottom:3em；}

       #date{margin-top:3px；font:normal 0.5em arial；}

               #sketchUpObj{text-align:center；width:400px；z-index:2；border:solid 1

px#676767；}

               #sheet{position:absolute；z-index:3；background-color:#FF00FF；cursor:

w-resize；}

            </STYLE>

            <SCRIPT>

            //列出图像文件名

                var imageFileNameArray＝new Array(′image0.jpg′，′image1.jpg′，

               ′image2.jpg′，′image3.jpg′，′image4.jpg′，′image5.jpg′，′image6.jpg′，

               ′image7.jpg′，′image8.jpg′，′image9.jpg′，′image10.jpg′，′image11.jpg′，

               ′image12.jpg′，′image13.jpg′，′image14.jpg′，′image15.jpg′，′image16.jpg′，

               ′image17.jpg′，′image18.jpg′，′image19.jpg′，′image20.jpg′，′image21.jpg′，

               ′image22.jpg′，′image23.jpg′，′image24.jpg′，′image25.jpg′，′image26.jpg′，

               ′image27.jpg′，′image28.jpg′，′image29.jpg′，′image30.jpg′，′image31.jpg′，

               ′image32.jpg′，′image33.jpg′，′image34.jpg′，′image35.jpg′，′image35.jpg′)；

          //列出html图像元素

               var sketchUpImageArray＝new Array()；var currentPos＝0；

               var addToPos＝0；var imageCount＝0；var sketchUpObj＝null；var

               mouseXOrig；var mouseX＝0；var mouseY＝0；var mouseIlsDown＝false；

               vartitle＝null；

           function init(){

               title＝document.getElementById(′title′)；

               sketchUpObj＝document.getElementById(′sketchUpObj′)；

               imageCount＝imageFileNameArray.length；

           //加载具有sketchUp images的imageArray

           for(i＝0；i＜imageCount；i++){

                sketchUplmageArray[i]＝new Image()；

                sketchUpImageArray[i].src＝imageFileNameArray[i]；

                sketchUpImageArray[i].className＝′sketchUpImage′；

                hide(sketchUpImageArray[i])；

                sketchUpObj.appendChild(sketchUpImageArray[i])；

                }

            //在图像上创建透明片材使得鼠标事件定位

               var sheet＝document.createElement(″DIV″)；

               document.body.appendChild(sheet)；

  sheet.id＝″sheet″；

  sheet.style.left＝sketchUpObj.offsetLeft+″px″；

  sheet.style.top＝sketchUpObj.offsetTop+″px″；

  sheet.style.width＝sketchUpObj.offsetWidth+″px″；

  sheet.style.height＝sketchUpImageArray[0].height+″px″；

  sheet.onmousemove＝handleRotate；

  sheet.onmousedown＝handleMouseDown；

  sheet.onmouseup＝handleMouseUp；

  sheet.onmouseout＝handleMouseUp；

  setOpacity(sheet，0.0)；

  show(sketchUpImageArray[0])；

  }

  /**

  *当鼠标向下时，开始旋转图像

  *

  *@参数{Event}鼠标向下事件

  */

  function handleMouseDown(e){

      if(！e){e＝window.event；}

      getMouseXY(e)；

      mouseXOrig＝mouseX；

      addToPos＝0；

      mouseIsDown＝true；

      }

  /**

  *当鼠标向上时，停止旋转图像

  *

  *@参数{Event}鼠标向上事件

  */

  function handleMouseUp(e){

     mouselsDown＝false；

     currentPos+＝addToPos；

     }

/**

*将html对象的宽度除以图像的数目

*随着鼠标在html上移动，示出适当的图像

*给出用户旋转对象的图示

*

*@参数{Event}鼠标移动事件

*/

function handleRotate(e){

    if(！e){e＝window.event；}

    if(！mouseIsDown){

    return；

    }

    getMouseXY(e)；

//STEP是多少像素等于图像交换

    var STEP＝10；

    var width＝sketchUpObj.offsetWidth；

    var delta＝mouseX-mouseXOrig；

    addToPos＝Math.floor(delta/STEP)；

//title.innerHTML＝mouseX；

//handle wrap around

    var wrap＝(currentPos+addToPos)％imageCount；

    var newPos＝(wrap＜O)？imageCount+wrap:

    Math.abs(wrap)；

//隐藏除了我们正在之上的图像之外的每一个图像

    for(var i＝0；i＜imageCount；i++){

           hide(sketchUpImageArray[i])；

        }

    show(sketchUplmageArray[newPos])；

    return false；

     }

/**

*从事件e获得鼠标位置

*@参数{Event}e鼠标移动事件

*/

function getMouseXY(e){

    if(e.pageX){

         mouseX＝e.pageX；

               mouseY＝e.pageY；

           }else{

               mouseX＝event.clientX+

            document.body.scrollLeft；

               mouseY＝event.clientY+

            document.body.scrollTop；

            }

             if(mouseX＜0){mouseX＝0；}

            if(mouseY＜0){mouseY＝0；}

        }

        /**

        *获得元素的左坐标

        */

        function getLeft(element){

              var x＝0；

              while(element){

                  x+＝element.offsetLeft；

                  element＝element.offsetParent；

              }

              return x；

         }；

        function setOpacity(element，opacity){

               element.style.filter＝″alpha(opacity＝″+Math.round(opacity*100)+

″)″；

               element.style.opacity＝opacity；

        }

        /**

        *隐藏html元素

        *@参数元素HTMLEIement我们隐藏的元素

        */

        function hide(element){

              element.style.display＝′none′；

        }

        /**

        *示出HTML元素

*@参数元素HTMLEIement我们想看到的元素

*/

function show(element){

    element.style.display＝′block′；

}

</SCRIPT>

</HEAD>

    <BODY onload＝init()>

    <DIV id＝′title′>Lamborghinii<DIV id＝date>Generated at 01:59PM

Wednesday，28November，2007</DIV></DIV>

    <CENTER><DIV id＝′sketchUpObj′></DIV></CENTER>

    </BODY>

    </HTML>

还可以利用用于允许用户与已保存的图像中的各种图像交互以及显示已保存的图像中的各种图像的其它各种技术。

图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.length-

cut，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 OR

 ＊IMPLIED WARRANTIES，INCLUDING，WITHOUT LIMITATION，THE 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＝′<CENTER>You spin me right round，baby.</CENTER>′+

    ′<BR><BR><BR><BR><BR><BR>′+

    ′Press the″Create！″button to generate a set of images that

orbit<BR>′+

    ′the selected SketchUp object.This plugin also creates a

sample<BR>′+

    ′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＝″<B>done！</B>″；

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

}

#cancelButton{

  margin-left:30px；

  float:left；

}

#createButton，#closeButton{

  margin-right:34px；

  float:right；

}

.button{

  font-size:11px；

  border:solid lpx#374B6C；

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

}

.textBox{

  font-size:10px；

  border:sol id 1px#AAAAAA；

}

附录F

<HTML>

<HEAD>

<TITLE>SketchUp Orbital Imaging</TITLE>

<STYLE>

#title{text-align:center；font:bold 1.4em arial；margin-bottom:3em；}

#date{margin-top:3px；font:normal 0.5em arial；}

#sketchUpObj{text-align:center；width:400px；z-index:2；border:solid 1px#676767；}

#sheet{position:absolute；z-index:3；background-color:#FF00FF；cursor:w-resize；}

</STYLE>

<SCRIPT>

//list of image folenames

$IMAGE_ARRAY

//list of html image elements

var sketchU plmageArray＝new Array()；

var currentPos＝0；

var addToPos＝0；

var imageCount＝0；

var sketchUpObj＝null；

var mouseXOrig；

var mouseX＝0；

var mouseY＝0；

var mouselsDown＝false；

var title＝null；

function init(){

 title＝document.getElementByld(′title′)；

 sketchUpObj＝document.getElementByld(′sketchUpObj′)；

 imageCount＝image FileNameArray.length；

 //load up the imageArray with the sketchUp images

 for(i＝0；i＜imageCount；i++){

  sketchUplmageArray[i]＝new Image()；

  sketchUplmageArray[i].src＝imageFileNameArray[i]；

  sketchUplmageArray[i].className＝′sketchUplmage′；

  hide(sketchUplmageArray[i])；

  sketchUpObj.appendChild(sketchUplmageArray[i])；

 }

 //create a transparent sheet over the images so that the mouse

 //events go it

 var sheet＝document.createElement(″DIV″)；

 document.body.appendChild(sheet)；

 sheet.id＝″sheet″；

 sheet.style.left＝sketchUpObj.offsetLeft+″px″；

 sheet.style.top＝sketchUpObj.offsetTop+″px″；

 sheet.style.width＝sketchUpObj.offsetWidth+″px″；

 sheet.style.height＝sketchUplmageArray[0].height+″px″；

 sheet.onmousemove＝handleRotate；

 sheet.onmousedown＝handleMouseDown；

 sheet.onmouseup＝handleMouseUp；

 sheet.onmouseout＝handleMouseUp；

 setOpacity(sheet，0.0)；

 show(sketchUplmageArray[0])；

}

/＊＊

 ＊When the mouse goes down，start rotating the image

 ＊

 ＊@param{Event}mousedown event

 ＊/

function handleMouseDown(e){

 if(！e){e＝window.event；}

 getMouseXY(e)；

 mouseXOrig＝mouseX；

 addToPos＝0；

 mouselsDown＝true；

}

/＊＊

 ＊When the mouse goes up，stop rotating the image

 ＊

 ＊@param{Event}mouseup event

 ＊/

function handleMouseUp(e){

 mouselsDown＝false；

 currentPos +＝addToPos；

}

/＊＊

 ＊Divide the width of the html object by the number of images.

 ＊As the mouse moves over the html object，show the appropriate image

 ＊giving the illusion that the user is spinning the object.

 ＊

 ＊@param{Event}mousemove event

 ＊/

function handleRotate(e){

 if(！e){e＝window.event；}

 if(！mouselsDown){

 return；

 }

 getMouseXY(e)；

 //STEP is how many pixels equals an image swap

 varSTEP＝10；

 var width＝sketchUpObj.offsetWidth；

 var delta＝mouseX-mouseXOrig；

 addToPos＝Math.floor(delta/STEP)；

//title.innerHTML＝mouseX；

 //handle wrap around

 var wrap＝(currentPos+addToPos)％imageCount；

 var newPos＝(wrap＜0)？imageCount+wrap:Math.abs(wrap)；

 //hide everyone except the image we are over

 for(vari＝0；i＜imageCount；i++){

  hide(sketchUplmageArray[i])；

 }

 show(sketchUplmageArray[newPos])；

 return false；

}

/＊＊

＊Get the mouse position from the event e

＊@param{Event} e mouse move event

＊/

function getMouseXY(e){

 if(e.pageX){

  mouseX＝e.pageX；

  mouseY＝e.pageY；

 }else{

  mouseX＝event.clientX+document.bod y.scrollLeft；

  mouseY＝event.clientY+document.body.scrollTop；

 }

 if(mouseX＜0){mouseX＝0；}

 if(mouseY＜0){mouseY＝0；}

}

/＊＊

 ＊Get the left coordinate of the element

 ＊/

function getLeft(element){

 varx＝0；

 while(element){

  x+＝element.offsetLeft；

  element＝element.offsetParent；

 }

 return x；

}；

function setOpacity(element，opacity){

 element.style.filter＝″alpha(opacity＝″+Math.round(opacity＊100)+″)″；

 element.style.opacity＝opacity；

}

/＊＊

 ＊Hides the HTML element.

 ＊@param element HTMLElement the element we hide

 ＊/

function hide(element){

 element.style.display＝′none′；

}

/＊＊

 ＊show the HTML element.

 ＊@param element HTMLElement the element we want to see.

 ＊/

function show(element){

 element.style.display＝′block′；

}

</SCRIPT>

</HEAD>

<BODY onload＝init()>

<DIV id＝′title′>$TITLE</DIV>

<CENTER><DIV id＝′sketchUpObj′></DIV></CENTER>

</BODY>

</HTML>

附录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 name

this.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 dialog

         var dialog＝createDiv(parent)；

         dialog.id＝″getDirectory Dialog″；

         hide(dialog)；

         ele＝createSpan(dialog)；

         ele.id＝″getDirectory/Label″；

         ele.innerHTML＝″Directory；″；

         GetDirectoryDialog.directoryNameEle＝createSpan(dialog)；

         GetDirectoryDialog.directoryNameEle.id＝″getDirectoryDirName″；

         GetDirectoryDialog.directoryNameEle.innerHTML＝″″；

         ele＝createDiv(dialog)；

         ele.id＝″getDirectoryTreeViewContainer″；

         GetDirectoryDialog.treeView＝new TreeView(ele，

GetDirectoryDialog.handleGetSubDirectory)；

         //set up the cancel button

         ele＝createButton(dialog，″Cancel″)；

         ele.id＝″getDirectoryCancelButton″；

         ele.onclick＝handleGetDirectoryCancel；

         //set up the create button

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

         ele.id＝″getDirectoryCreateButton″；

         ele.onclick＝handleGetDirectoryCreateDirectory；

         //set up the ok button

         ele＝createButton(dialog，″OK″)；

 ele.id＝″getDirectoryOkButton″；

 ele.onclick＝handleGetDirectoryDialogOk；

 return dialog；

}

this.show＝function(imageDirectory，callback){

 //initialize the directory name and set up the callback

 //for when the user hits″ok″

 GetDirectoryDialog.directortName＝imageDirectory；

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

 GetDirectoryDialog.callback＝callback；

 GetDirectoryDialog.treeView.setWorkingDir(image Directory)；

 show(GetDirectoryDialog.lightBox)；

 show(GetDirectory Dialog.dialog)；

}；

this.handleGetSubDirectory＝function(pathName){

 GetDirectoryDialog.directoryName＝pathName；

 GetDirectoryDialog.directoryNameEle.innerHTML＝ellipseMiddle(pathName，50)；

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

}

/＊＊      ＊      ＊/

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″)；

}

.textBox{

  font-size:10px；

  border:solid 1px#AAAAAA；

}

附录I

<！--

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

#any purpose and without fee is hereby granted.

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

#IMPLIED WARRANTIES，INCLUDING，WITHOUT LIMITATION，THEIMPLIED

#WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.

-->

<HTML>

<HEAD>

<TITLE>SketchUp</TITLE>

<STYLE>

BODY{margin-top:0px；}

#title{text-align:center；font:bold 14px arial；margin-bottom:0px；}

#date{margin-top:3px；font:normal 10px arial；}

#sketchUpObj{width:0px；}

#sheet{position:absolute；width:400px；height:400px；z-index:3；

background-color:#FF00FF；cursor:w-resize；border:solid 1px#676767；}

.sketchUpImage{position:absolute；width:400px；height:400px；z-

index:2；border:solid 1px#676767；}

</STYLE>

<SCRIPT>

//list of image filenames

var imageFileNameArray＝new Array(

′kitchen2_image0.jpg′，′kitchen2_image1.jpg′，′kitchen2_image2.jpg′，′kitc

hen2_image3.jpg′，′kitchen2_image4.jpg′，′kitchen2_image5.jpg′，′kitchen2_

image6.jpg′，′kitchen2_image7.jpg′，′kitchen2_image8.jpg′，′kitchen2_image

9.jpg′，′kitchen2_image10.jpg′，′kitchen2_image11.jpg′，′kitchen2_image12.

jpg′，′kitchen2_image13.jpg′，′kitchen2_image14.jpg′，′kitchen2_image15.jp

g′，′kitchen2_image16.jpg′，′kitchen2_image17.jpg′，′kitchen2_image18.jpg′

，′kitchen2_image19.jpg′，′kitchen2_image20.jpg′，′kitcheR2_image21.jpg′，′

kitchen2_image22.jpg′，′kitchen2_image23.jpg′，′kitchen2_image24.jpg′，′ki

tchen2_image25.jpg′，′kitchen2_image26.jpg′，′kitchen2_image27.jpg′，′kitc

hen2_image28.jpg′，′kitchen2_image29.jpg′，′kitchen2_image30.jpg′，′kitche

n2_image31.j pg′，′kitchen2_image32.jpg′，′kitchen2_image33.j pg′，′kitcheR2

_image34.jpg′，′kitchen2_image35.jpg′，′kitchen2_image35.jpg′)；

//list of html  image elements

var sketchUpImageArray＝new Array()；

var currentPos＝0；

var addToPos＝0；

var imageCount＝0；

var sketchUpObj  ＝null ；

var mouseXOrig；

var mouseX＝0；

var mouseY＝0；

var mouseIsDown＝false；

var title＝null；

function init(){

  title＝document.getElementById(′title′)；

  sketchUpObj＝document.getElementById(′sketchUpObj′)；

  imageCount＝imageFileNameArray.length；

  //load up the imageArray with the sketchUp images

  var left＝sketchUpObj.offsetLeft-400/21；

  var top＝sketchUpObj.offsetTop；

  for (i＝0；i＜imageCount；i++){

    sketchUpImageArray[i]＝newImage()；

    sketchUpImageArray[i].src＝imageFileNameArray[i]；

    sketchUpImageArray[i].className＝′sketchUpImage′；

    sketchUpImageArray[i].style.left＝left+″px″；

    sketchUpImageArray[i].style.top＝top+″px″；

    hide(sketchUpImageArray[i])；

    document.body.appendChild(sketchUpImageArray[i])；

  }

  //create a transparent sheet over the images so that the mouse

  //events go it

  var sheet＝document.createElement(″DIV″)；

  document.body.appendChild(sheet)；

  sheet.id＝″sheet″；

  sheet.style.left＝left+″px″；

  sheet.style.top＝top+″px″；

  sheet.onmousemove＝handleRotate；

  sheet.onmousedown＝handleMouseDown；

  sheet.onmouseup＝handleMouseUp；

  sheet.onmouseout＝handleMouseUp；

  setopacity(sheet，0.0)；

  currentPos＝imageCount-1

  show(sketchUpImageArray[currentPos])；

}

/＊＊

 ＊When the mouse goes down，start rotating the image

 ＊

 ＊@param{Event}mousedown event

 ＊/

function handleMouseDown(e){

  if (！e){e＝window.event；}

  getMouseXY(e)；mouseXOrig＝mouseX；addToPos＝0；mouseIsDown＝true；

}

/＊＊

 ＊When the mouse goes up，stop rotating the image

 ＊

 ＊@param{Event}mouseup event

 ＊/

function handleMouseUp(e){mouseIsDown＝false；currentPos+＝addToPos；}

/＊＊

 ＊Divide the width of the html object by the number of images.

 ＊As the mouse moves over the html object，show the appropriate image

 ＊giving the illusion that the user is spinning the object.

 ＊

 ＊@param{Event}mousemove event

 ＊/

function handleRotate(e){

  if (！e){e＝window.event；}

  if (！mouseIsDown){return；}

  getMouseXY(e)；

  //STEP is how many pixels equals an image swap

  var STEP＝10；

  var width＝sketchUpObj.offsetWidth；

  var delta＝mouseX-mouseXOrig；

  addToPos＝Math.floor(delta/STEP)；

  //handle wrap around

  var wrap＝(currentPos+addToPos)％imageCount；

  var newPos＝(wrap＜0)？imageCount+wrap:Math.abs(wrap)；

  //hide everyone except the image we are over

  for(var i＝0；i＜imageCount；i++){

    hide(sketchUpImageArray[i])；

  }

  show(sketchUpImageArray[newPos])；

  return false；

}

/＊＊

 ＊Get the mouse position from the event e

 ＊@param{Event}e mouse move event

 ＊/

function getMouseXY(e){

  if(e.pageX){

    mouseX＝e.pageX；

    mouseY＝e.pageY；

  }else{

    mouseX＝event.clientX+document.body.scrollLeft；

    mouseY＝event.clientY+document.body.scrollTop；

  }

  if(mouseX＜0){mouseX＝0；}

  if(mouseY＜0){mouseY＝0；}

}

/＊＊Get the left coordinate of the element＊＊/

function getLeft(element){

var x＝0；

while (element){x+＝element.offsetLeft；element＝

element.offsetParent；}

return x；

}；

function setOpacity(element，opacity){

element.style.filter＝″alpha(opacity＝″+Math.round(opacity＊100)+

″)″；

element.style.opacity＝opacity；

}

/＊＊Hides the HTML element.@param element HTMLElement the element we

hide＊/

function hide(element){element.style.display＝′none′；}

/＊＊show the HTML element.@param element HTMLElement the element we

want to see.＊/

function show(element){element.style.display＝′block′；}

</SCRIPT>

</HEAD>

<BODY onload＝init()>

<CENTER><DIV id＝′sketchUpObj′></DIV></CENTER>

</BODY>

</HTML>

Claims (20)

1.一种计算机实现的数据访问方法，包括：

执行容器应用中的文件管理器应用，其中所述文件管理器应用不能直接访问计算机文件系统；

执行能够直接访问所述计算机文件系统的本原应用；以及

在所述文件管理器应用与所述本原应用之间、以及在所述本原应用与所述计算机文件系统之间通信来模拟通过所述文件管理器应用的直接文件系统访问。

2.如权利要求1所述的方法，其中所述文件管理器应用包括网页以及所述容器应用包括商业可获得的web浏览器。

3.如权利要求1所述的方法，进一步包括：生成与所述文件管理器应用对接的用户界面，其中所述界面模拟文件目录对话框。

4.如权利要求3所述的方法，其中所述界面包括文件目录图标以及对应于所述计算机文件系统中的目录的文本目录标签。

5.如权利要求1所述的方法，其中所述文件管理器应用使用作用于HTML和CSS标记代码的JavaScript来执行。

6.如权利要求1所述的方法，进一步包括：接收对目录的选择，将用于所述目录的第一标识符从所述文件管理器应用通信到所述本原应用，利用所述本原应用确定用于对应于所述第一标识符的所述目录的第二标识符，以及将所述第二标识符与对在所述目录下的一个或多个子目录的列表的请求一起递送给所述文件系统。

7.如权利要求6所述的方法，进一步包括：在所述本原应用处接收用于所述子目录的列表的第一标识符，利用所述本原应用确定用于所述子目录的列表的第二标识符，以及将用于所述子目录的列表的所述第二标识符递送给所述文件管理器应用。

8.如权利要求7所述的方法，进一步包括：利用所述文件管理器应用视觉地在所述目录下显示所述子目录的列表，以及将与所述目录相关联的图标从关闭状态改变为打开状态。

9.如权利要求1所述的方法，进一步包括：响应于关于文件目录的用户选择，在所述文件管理器应用与所述本原应用，以及在所述本原应用与所述文件系统之间重复通信。

10.如权利要求1所述的方法，进一步包括：促使对应于所述文件管理器应用的一个或多个文件被保存在所述文件系统上的经由所述文件管理器应用选择的目录中。

11.一种包括一个或多个有形的计算机可读数据存储介质的物品，所述一个或多个有形的计算机可读数据存储介质包含可操作来促使一个或多个机器执行操作的程序代码，所述操作包括：

执行容器应用中的文件管理器应用，其中所述文件管理器应用不能直接访问计算机文件系统；

执行能够直接访问所述计算机文件系统的本原应用；以及

在所述文件管理器应用与所述本原应用之间、以及在所述本原应用与所述计算机文件系统之间通信来模拟通过所述文件管理器应用的直接文件系统访问。

12.如权利要求11所述的物品，其中所述文件管理器应用包括网页以及所述容器应用包括商业可获得的web浏览器。

13.如权利要求11所述的物品，其中所述操作进一步包括：生成与所述文件管理器应用对接的用户界面，其中所述界面模拟文件目录对话框。

14.如权利要求11所述的物品，其中所述操作进一步包括：

接收对目录的选择，将用于所述目录的第一标识符从所述文件管理器应用通信到所述本原应用，利用所述本原应用确定用于对应于所述第一标识符的所述目录的第二标识符，以及将所述第二标识符与对在所述目录下的一个或多个子目录的列表的请求一起递送给所述文件系统；

在所述本原应用处接收用于所述子目录的列表的第一标识符，利用所述本原应用确定用于所述子目录的列表的第二标识符，以及将用于所述子目录的列表的所述第二标识符递送给所述文件管理器应用；以及

利用所述文件管理器应用视觉地在所述目录下显示所述子目录的列表，以及将与所述目录相关联的图标从关闭状态改变为打开状态。

15.一种计算机实现的文件访问系统，包括：

文件存储系统，所述文件存储系统由计算机操作系统提供；

被包纳应用，所述被包纳应用用于在标准web浏览器中操作并且显示文件管理器界面；以及

本原应用，所述本原应用被编程为从所述被包纳应用接收文件相关请求、翻译所述请求以及将相应请求提交给所述文件存储系统。

16.如权利要求15所述的系统，其中所述被包纳应用被编程为生成模拟文件管理器用户界面的用户界面，所述用户界面用于在由所述本原应用执行保存文件的行为时与用户交互。

17.如权利要求16所述的系统，其中所述用户界面包括文件目录图标以及对应于所述文件存储系统中的目录的文本目录标签。

18.如权利要求15所述的系统，其中所述被包纳应用被编程为接收对目录的选择以及将用于所述目录的第一标识符通信到所述本原应用，以及所述本原应用被编程为将所述第一标识符变换为第二标识符以递送给所述文件存储系统，以由所述被包纳应用的用户所指定的方式与所述目录交互。

19.如权利要求15所述的系统，其中所述本原应用被编程为从所述文件存储系统接收通信并且将所述通信变换为用于所述被包纳应用的不同通信，以促使所述被包纳应用显示关于所述文件存储系统中的目录的信息。

20.一种文件访问系统，包括：

文件存储系统，所述文件存储系统由计算机操作系统提供；

Web浏览器，所述web浏览器在对应于所述文件存储系统的计算机上操作；以及

装置，所述装置用于管理在运行于所述web浏览器上的应用与所述文件存储系统之间的交互。

Images