fieldOfView | SPi-V devEmbedding the SPi-V movie in a HTML page
To embed the SPi-V engine in a webpage, you need to invoke the shockwave player and let it 'play' the SPi-V engine dcr file. The SPi-V dcr file needs a couple of specific parameters set, which are outlined below.
A basic html snippet invoking the SPi-V engine (The interesting parameters are highlighted):
<object id="SPi-V_object" classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000" codebase= "http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=8,5,1,0" width="100%" height="100%" > <param name="src" value="SPi-V.dcr"> <param name="swURL" value="yourFile.xml"> <param name="swStretchStyle" value="stage"> <param name="swRemote" value="swContextMenu='FALSE'"> <param name="progress" value="true"> <param name="logo" value="false"> <param name="bgColor" value="#000000"> <embed name="SPi-V_object" width="100%" height="100%" type="application/x-director" pluginspage="http://www.macromedia.com/shockwave/download/" src="SPi-V.dcr" swURL="yourFile.xml" swStretchStyle="stage" swRemote="swContextMenu='FALSE'" progress="true" logo="false" bgColor="#000000"> </embed> </object>
In the code snippet above, both an object and an embed tag are used to ensure support in a wide range of browsers. Because of this, each parameter is specified twice. The interesting parameters are outlined below, in order of their appearance:
-
id/name
Specifying an id in the object tag and a name in the embed tag is required if you want to use browser-based scripting with the embedded SPi-V engine. -
codebase
Note that version 8.5.1 is specified as the minimal version. Though some features are implemented more efficiently using Shockwave 10, SPi-V will run with Shockwave 8.5.1 as well. -
width & height
The width and height you want the SPi-V viewer to have, specified just as you would specify eg an image or java applet width and height. Width and height can be specified in pixels or in percentages. See the note for swStretchStyle below. -
src
Points to the location of the SPi-V.dcr file, relative to the html file. -
swURL
Points to the location of your panoramic content, relative to the SPi-V.dcr file. Can point to an XML file or directly to an image file. In the latter case, the viewer will try to open the file in simple mode.
In the swURL parameter, you can optionally specify an initial scene, pan, tilt and fov, eg:tour.xml#scene2,0,0,90 panorama.jpg#,10,,70
The latter example omits the scene id (since there is only one scene in simple mode) and tilt, and specifies only pan and fov. -
swStretchStyle
Setting this parameter to a value of "stage" is required to ensure the viewer can stretch to the size you set using width and height. Without this parameter, the movie is constrained to it's native size of 480 * 360 pixels. -
swRemote
This parameter lets you modify a number of settings related to the context menu (right mousebutton menu) of the Shockwave viewer. In this case we need to disable the context menu since it interferes with the right mouse zoom functionality in SPi-V 1.3 and newer
If the webserver you are using has PHP capabilities or similar(*) you can save yourself from having to include the above html in many pages by referencing a single wrapper from your webpages. Create a file called "showSPi-V.php" and save it to the same directory as the SPi-V.dcr file:
<? $panoFile = (array_key_exists("pano", $_GET)) ? $_GET["pano"] : "";
$bgColor = (array_key_exists("bgColor", $_GET)) ? $_GET["bgColor"] : "#000000"; ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SPi-V panorama</title>
</head>
<body bgcolor="<? echo $bgColor ?>" style="margin:0px; overflow:hidden">
<object width=100% height=100% classid="clsid:166B1BCA-3F9C-11CF-8075-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=8,5,1,0">
<param name=src value="SPi-V.dcr">
<param name=swURL value="<? echo $panoFile ?>">
<param name=swStretchStyle value="stage">
<param name=swRemote value="swContextMenu='FALSE'">
<param name=progress value="true">
<param name=logo value="false">
<param name=bgColor value="<? echo $bgColor ?>">
<embed width=100% height=100% type="application/x-director"
pluginspage="http://www.macromedia.com/shockwave/download/"
src="SPi-V.dcr" swURL="<? echo $panoFile ?>" swStretchStyle="stage" swRemote="swContextMenu='FALSE'"
progress="true" logo="false" bgColor="<? echo $bgColor ?>">
</embed>
</object>
</body></html>
To show a panorama in a full browser window, you can now simply link to this page:
<a href="showSPi-V.php?pano=yourfile.xml&bgColor=#ffffff">(note that specifying the bgColor parameter is optional)
This method is used extensively on our fullscreen panorama page, which includes links to for example this panorama.
If you want to include the panorama in a webpage instead of showing the panorama in a full webpage, or if you want to set the viewer dimensions to something other than the full with and height, you can use an IFRAME, eg:
<iframe width="520" height="300" src="showSPi-V.php?pano=yourfile.xml"></iframe>
*: Though the provided sample requires PHP capabilities on the server, a similar file using ASP or Perl should be easily fabricated. Alternatively, as similar file using clientside javascript to write the document could be made.
Important note about Shockwave file restrictions: 'dswmedia' folder
Like java, which imposes certain limitations to what files can be read locally, the Shockwave plugin can not read just any file off a local disk. This is strictly for security meassures (you wouldn't want a Shockwave movie to upload your private files to a webserver without you knowing it).
Online resources
The SPi-V engine can open resources from anywhere on the same server where the engine itself resides without a problem. If the engine tries to open a file on another server, a security dialog will pop up, asking the user for permission to communicate with this server. This prevents (some) spyware type of communication, which could otherwise impare your privacy online. As long as your SPi-V files are all on one server, there is nothing to worry about.
Running the engine locally
When running the engine locally inside a browser, the following restriction applies: Shockwave can only read files locally that are contained in a folder named 'dswmedia'. It does not matter if the engine movie ('SPi-V.dcr') is in the dswmedia folder itself, both of the following arrangements are correct:
SPi-V.html SPi-V.dcr dswmedia tour.xml pano1.jpg pano2.jpg ...In SPi-V.html, the src param would be "SPi-V.dcr", and the swURL param would be "dswmedia/tour.xml".
SPi-V.html dswmedia SPi-V.dcr tour.xml pano1.jpg pano2.jpg ...In SPi-V.html, the src param would be "dswmedia/SPi-V.dcr", and the swURL param would be "tour.xml".
These restrictions only apply to content played back through Shockwave (in a browser). When using the executable viewer, no restrictions on local files apply.