iSeeMedia ZOOM Plug-in Viewer
Version 3.5
Windows Developer's Guide

The iSeeMedia ZOOM Plug-in Viewer lets your web site visitors view and navigate panoramic images created using iSeeMedia PhotoVista™ image-stitching software, and interactive panoramic environments created using the iSeeMedia Reality Studio™ suite of authoring tools. The iSeeMedia ZOOM Plug-in Viewer is available for Macintosh and Windows.

Contents

Minimum system requirements

Using the iSeeMedia ZOOM Plug-in Viewer

Toolbar buttons and keyboard shortcuts

Placing the plug-in in your web pages

Specifying a remote path for Flashpix images

Tips for optimal viewing

Detecting the browser type

Adding additional parameters

autoSpin

backgroundColor

backGroundImage, leftMargin, topMargin, displayWidth, displayHeight

enableZOOMPastMax

hotSpot

initialView

printSRC

saveSRC

Customizing the IVR file

SetProperty

Getting Updates

Glossary

Minimum system requirements

Make sure you have at least these minimum system requirements.

• 486/DX
• Windows 95 or Windows NT 4.0
• Minimum 16 MB RAM; 32 MB recommended
• 256 color display (thousands highly recommended)
• Netscape® Navigator 3.01 or 4.0, or Microsoft® Internet Explorer® 3.0 or 4.0

Using the iSeeMedia ZOOM Plug-in Viewer

The iSeeMedia ZOOM Plug-in Viewer operates in 2D mode when you're viewing a 2D Flashpix (FPX) image. When viewing a 3D image object (IMOB), a vista, or any combination of images, objects, vistas, and other media (such as audio or video) the viewer automatically presents the content in 3D mode. The mode change occurs automatically, depending on the content you're viewing. The only difference you'll see is that some toolbar buttons will change.

Toolbar buttons and keyboard shortcuts

If the toolbar is turned on, you'll see the logo in the lower left corner of the viewer window. Click the logo to expand the toolbar.

Note: If the toolbar is turned off, you can use the keyboard shortcuts to Zoom in and out, and to locate any hotspots.

The toolbar buttons that appear vary slightly between the view modes, depending on the content you're viewing. The following table describes the functions and keyboard shortcuts for each toolbar button.

Toolbar Button	Function	Keyboard Shortcut
Open/Close Toolbar	Opens and closes the toolbar.
Zoom In	Zooms into the image. Click Zoom In, then click anywhere in the viewer window. To Zoom in continuously, hold down the mouse button. Note: If you try to Zoom past the maximum image resolution, the Maximum Zoom icon appears in the upper left corner of the viewer window.	Shift or Z
Zoom Out	Zooms out of the image. Click Zoom Out, then click anywhere in the viewer window. To Zoom out continuously, hold down the mouse button.	Control or A
Pan Vista	Pans a vista or rotates an IMOB. Click Pan Vista and drag the pointer over the vista or IMOB.
Pan Image (2D mode only)	Pans a 2D Flashpix IMOB. Click Pan Image and drag the pointer horizontally or vertically over a 2D Flashpix IMOB. This button works best after you Zoom in to view a larger portion of the IMOB.
Initial View (appears only for 2D Flashpix images)	Returns a Flashpix image to initial view after you've Zoomed in.
Print (appears only for 2D Flashpix images)	Prints a 2D Flashpix image if enabled by the image provider. Note: To enable this button, you must define the printSRC parameter.
Show Hotspots	Shows any hotspot links. If there are no hotspots, this button appears dimmed.	Spacebar or H
Save (appears only for 2D Flashpix images)	Saves the image to the user's local drive or an FTP site as defined by the image provider. Note: To enable this button, you must define the saveSRC parameter.
Information	Opens an HTML document with user information about the iSeeMedia ZOOM Plug-in Viewer.

Placing the plug-in in your web pages

To embed a Flashpix image (FPX) or a panorama (IVR) in an HTML page for viewing with the iSeeMedia ZOOM Plug-in Viewer, use the <EMBED> tag. The parameters for the <EMBED> tag are similar to those you use for other browser plug-ins.

The parameters in the <EMBED> tag are:

• The required URL to a Flashpix image or IVR file
• The required height and width of the viewer window
• The optional toolbar parameter, which you can use to turn the toolbar off
• Other optional parameters, which are described later in this document

Note: The syntax for the optional toolbar parameter is toolbar="on/off." The default value is "on."

The following example shows the <EMBED> tag with the URL to a Flashpix file, the width and height of the viewer window, and the toolbar turned off.

Note: The width of the viewer window must be at least 240 pixels to display the entire toolbar when the toolbar is turned on.

As you can see in the example above, you identify the image to you want to display using the SRC parameter. For IVR files, enter a simple URL. For example, SRC="mypano.ivr"identifies a file in the current directory; SRC="www.yourdomain.com/mypano.ivr" identifies a file on another server. For Flashpix files, see the next section, "Specifying a remote path for Flashpix images."

Specifying a remote path for Flashpix images

The iSeeMedia ZOOM Plug-in Viewer retrieves the Flashpix images from the iSeeMedia ZOOM Server, so make sure that you specify the correct and complete remote path for each Flashpix image. You must use the entire URL to the document root directory, not just the relative path. The URL is as follows:

http://image_server_host_id:image_server_port/?fif=image

where:

• image_server_host_id is the IP address or host name of the iSeeMedia ZOOM Server.
• image_server_port is the port for the iSeeMedia ZOOM Server, which is configurable. The default port number is 8087.
• ?fif= is a literal string, which identifies the file to display.
• Image is the Flashpix file name you want to display. The file must reside in the root image directory or one below it. If you don't supply a path, the image server assumes the file is in the root image directory.

Tips for optimal viewing

• For Internet use, keep your media files (movies, audio clips, and so on) as small as possible.
• Remember that Flashpix is a streaming format; if the viewable area of a Flashpix image is large, the stream downloading the data will also be large. If the majority of your site visitors will use low-speed network connections, a smaller size viewer window will result in faster downloads. For example, a 200 x 300 viewer window is approximately a 5K download, while a 400 x 400 viewer window is approximately a 20K download, which is four times larger.
• When using Flashpix images, use as much compression as image quality will allow; the smaller the image, the faster the download and the less of a load on the server.

Note: The Flashpix Photoshop® plug-in lets you change compression for Flashpix images and is available for both Windows and Macintosh. On Macintosh, you can also change compression using the Batch Converter. For more information, see the Batch Converter documentation in the Documentation folder on your iSeeMedia ZOOM Server CD-ROM or visit the iSeeMedia Software web site at http://www.iSeeMedia.com/.

Detecting the browser type

The iSeeMedia ZOOM Plug-in Viewer provides the same features as the iSeeMedia ZOOM Control Viewer. Using simple JavaScript™, you can tell the browser to test the criteria for downloading the plug-in or loading the Control viewer. Here's an example of the JavaScript used to detect the browser type:

<script language="JavaScript">
<!--
// Put in the correct object, either plug-in or control viewer
if (navigator.appName == "Microsoft Internet Explorer" &&
navigator.platform == "Win32")
{
     document.writeln("<OBJECT ID=\"viewer\"WIDTH=400 HEIGHT=300 CLASSID="CLSID:3F0EECCE-E138-11D1-8712-0060083D83F5\" CODEBASE="http://www.iSeeMedia.com/ActiveX/LPControl.cab#Version=3,0,0 29"><PARAM NAME=\"url\" VALUE=\"bounce.ivr\">/OBJECT>"
);
}
else
     document.writeln("<embed type=\"i-world/i-vrml\" width=\"400\" height=\"200\" src=\"bounce.ivr\" name=\"viewer\" align=\"middle\">");
{
}
// -->
</script>

Adding additional parameters

Most of the parameters in this section are for 2D Flashpix images. The only parameter that is specifically for panoramas is autoSpin. You add these parameters to the <EMBED> tag.

Note: To set hotspots and the initial view for panoramas, you need to edit the IVR file. For more information, visit the iSeeMedia Software web site at http://www.iSeeMedia.com/.

The parameters in this section include:

• autoSpin lets you set a panorama to rotate automatically.
• backgroundColor lets you set the background color that surrounds a 2D Flashpix image when it is smaller than the viewer window.
• backGroundImage, leftMargin, topMargin, displayWidth, displayHeight lets you set an image as a frame around a 2D Flashpix image when it is smaller than the viewer window.
• enableZOOMPastMax lets you set whether or not to let the user Zoom in past the maximum resolution of a 2D Flashpix image.
• hotSpot lets you create hotspots on 2D Flashpix images, which you can link to other panoramas and events.
• initialView lets you set the view you see when a 2D Flashpix image first appears in the viewer.
• printSRC lets you print a 2D Flashpix image.
• saveSRC lets you save a 2D Flashpix image to your computer.

Note: For best results across platforms, pay attention to case-sensitivity when specifying control parameters.

autoSpin

Function: The autoSpin parameter controls whether a panorama (IVR file) rotates automatically and at what speed.

Syntax: AutoSpin="10">

Values: The value is an integer, which can be zero, positive, or negative. The default value is +5, which causes the panorama to rotate. For best results, use a value between -10 and +10. A positive value causes the panorama to rotate from left to right. A negative value causes the panorama to rotate from right to left. Higher numbers cause the panorama to rotate faster; lower numbers cause it to rotate slower.

Comments: When you specify a value other than zero, the panorama rotates automatically until you interact with it by Zooming in or out, dragging the pointer over it, or activating hotspots. This stops the automatic, continuous rotation. When you reload the HTML page, the panorama rotates automatically again.

backgroundColor

Function: Lets you set the color that surrounds a 2D Flashpix image if it doesn't completely fill the viewer window.

Syntax: backgroundColor="255, 255, 255"

Values: The values are integers between 0 and 255, which represent "r, g, b." For example, "255, 255, 255" is white. The default is"0, 0, 0," which is black.

backGroundImage, leftMargin, topMargin, displayWidth, displayHeight

Function: These parameters let you use your own customized image as a background that surrounds a 2D Flashpix image.

Syntax: backgroundImage="imageURL" leftMargin="pixels" topMargin="pixels" displayWidth="pixels" displayHeight="pixels"
where:

• displayWidth is the width of the Flashpix image
• displayHeight is the height of the Flashpix image
• leftMargin is the amount of space between the left edge of the Flashpix image and the left edge of the background image
• topMargin is the amount of space between the top edge of the Flashpix image and the top edge of the background image

Values: The values are integers that represent pixels. Note that the sum of the displayWidth and leftMargin values should not exceed the width dimension in the <EMBED> tag. Similarly, the sum of the displayHeight and topMargin values should not exceed the height dimension.

Comments: You can use JPEG or GIF images as background images. The image is resized automatically to fit the viewer window (as defined in the <EMBED> tag). To optimize download times, make the part of the background image that is covered by the subwindow a solid color. This achieves better compression ratios.

enableZOOMPastMax

Function: Lets you set whether or not to allow Zooming in past the maximum resolution of a 2D Flashpix image.

Syntax: enableZOOMPastMax="on"

Values: The values are "on" or "off." The default value is "off."

hotSpot

Function: This parameter lets you define hotspots in 2D Flashpix images. Hotspots are areas in the image that, when clicked, cause a new action to happen. You can use hotspots to link Flashpix images together, load a new HTML page, play audio clips, and more.

Syntax: You must put a number after the hotspot name. The number zero is not valid. The syntax includes required and optional parameters. A generic example of this parameter is:

hotSpot1="x1, y1, x2, y2, URL, Description, To_Frame, Visibility, DeActivation"

where the required parameters are:

• "x1, y1, x2, y2"—the upper left and lower right coordinates for the hotspot.
• "URL"—the URL that loads when you click the hotspot.

Defining the coordinates: If you're not sure of the coordinates to use for hotspots, you can use an image-editing application to obtain image size in pixels and pixel coordinates so you can translate them into relative coordinates.

1. In your image editor, take note of the image dimensions (for example, 500 x 300).
2. Drag out the area for the hotspot, noting the pixel coordinates of the upper left and lower right corners of the area. For example, 106, 66 (upper left corner) and 346, 196 (lower right corner).
3. Divide the horizontal pixel coordinates by the image width, and the vertical pixel coordinates by the image height. The results in the following example are rounded to a single decimal point, but you can specify more precise coordinates if you want.

Optional Parameters: The following table describes the optional parameters you can use in the hotspot syntax after you specify the URL.

initialView

Function: This parameter controls the initial viewpoint within a 2D Flashpix image, which is what you first see when the viewer displays the image.

Syntax: initialView="0.2, 0.2, 0.8, 0.8"

Values: The values are floating point and represent "x1, y1, x2, y2," which are the coordinates for the initial view area. The values can be 0 to 1.0.

Comments: x2 > x1 and y2 > y1

printSRC

Function: This specifies a location to get data for a 2D Flashpix image. This parameter must be defined to print a Flashpix image.

Syntax: printSRC="http://192.168.168.43:8087/?fif=cat.fpx"

Values: If you're viewing from the Web, the value is the URL to the Flashpix image on the iSeeMedia ZOOM Server.

saveSRC

Function: This parameter lets you save a 2D Flashpix image to your computer when you click the Save button in the viewer toolbar. The Save button will be disabled unless you set this parameter in your <EMBED> tag.

Syntax: saveSrc="http://192.168.168.43:8087/?fif=cat.fpx"

Values: The value is the URL to the Flashpix image on the iSeeMedia ZOOM Server.

Customizing the IVR file

The iSeeMedia ZOOM Plug-in Viewer provides one method for customizing your IVR files. To use this parameter, you need to know the names of the nodes in the IVR file. The names are all case-sensitive. Just add this parameter to your <EMBED> tag.

SetProperty(propString)

Function: This method lets you set properties for most of the VRML nodes within the IVR file.

Syntax: SetProperty="NodeName NodePropertyName PropertyValue"

Example: The following segment of an IVR file contains a node named BallMaterial with a diffuseColor value.

DEF BallXForm Transform {
        scale 1 1 1
        children [
                 DEF BounceXForm Transform {
                        children [
                              DEF SpinXForm Transform {
                                  children [
                                      DEF Ball Shape { # The bouncing ball
                                          geometry Sphere { radius 1 }
                                          appearance Appearance {
                                          material
DEF BallMaterial Material { diffuseColor 0.7 0.6 0.4 specularColor 1 1 1 }
                                          }
                                       }
                                   ]
                              }
                        ]
                }
        ]
}

The following example of the SetProperty parameter tells the plug-in to change the diffuseColor property of the BallMaterial node to "1 0 0," which happens to be the color red.

SetProperty="BallMaterial diffuseColor 1 0 0"

Getting updates

The iSeeMedia ZOOM Viewer family is updated regularly. For the most current information, visit the iSeeMedia Software web site at http://www.iSeeMedia.com/.

Glossary

Flashpix (FPX)

The Flashpix format is a multi-resolution digital image file format, which offers an ideal way to view and print high-quality, high-resolution images in real time. The Flashpix format is a trademark of the Digital Imaging Group (DIG). Visit the DIG web site at http://www.digitalimaging.org/ for more information.

Image object (IMOB)

A collection of photographic images of a real-world 3D object, taken from various angles around the object. During playback, you can manipulate the IMOB to determine which image to show. This simulates the experience of examining an actual 3D object. IMOBs are created using Object Modeler, which is part of the Reality Studio suite of authoring tools. For more information, visit the iSeeMedia Software web site at http://www.iSeeMedia.com/.

IVR file

A text file with the .ivr extension, which describes the positions and other characteristics of images, 3D image objects, hotspots, and other media in a panoramic environment. The iSeeMedia ZOOM Viewer family reads IVR files to display a panoramic environment. PhotoVista, Object Modeler, and Reality Studio output IVR files. The format of the text file conforms to the guidelines of the VRML 2.0 and Image Worlds specifications. For more information, visit the iSeeMedia Software web site at http://www.iSeeMedia.com/.

Copyright 1999-2000, iSeeMedia Software Corp.
[012c]