iSeeMedia ZOOM Plug-in Viewer Version 3.3
Macintosh 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 Photivista Virtual Tour™ suite of authoring tools. The iSeeMedia ZOOM Plug-in Viewer for Macintosh works in web pages and as a stand-alone application. When you access a web page that uses the plug-in, the stand-alone viewer launches automatically to display the Flashpix™ image or panoramic scene.

Contents

Minimum system requirements

Using the iSeeMedia ZOOM Plug-in Viewer

Using the toolbar
Using the File menu
Saving EMB files
Setting preferences

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.

  • Macintosh PowerPC with OS 8.5 or higher
  • 16 MB RAM (32 MB recommended)
  • 65,000 colors minimum (24-bit true color recommended)
  • Internet Explorer® 4.5 or higher or Netscape Communicator 4.05 or higher

Using the iSeeMedia ZOOM Plug-in Viewer

The iSeeMedia ZOOM Plug-in Viewer works in 2D and 3D modes. 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.

The iSeeMedia ZOOM Plug-in Viewer operates in 2D mode when you're viewing a 2D Flashpix 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.

Using the toolbar

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 A
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. Command or Z
Pan Vista
Pans a vista or rotates an image object. Click Pan Vista and drag the pointer over the vista or image object.  
Pan Image (2D mode only)
Pans a 2D Flashpix image object. Click Pan Image and drag the pointer horizontally or vertically over a 2D Flashpix image object. This button works best after you Zoom in to view a larger portion of the image object.  
Initial View (2D mode only)

Returns a Flashpix image to initial view after you have zoomed in.  
Print (2D mode only)
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. Click the hotspot to activate the link. Spacebar or H
Save (2D mode only)
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 this document in a new browser window.  

For more information about the iSeeMedia ZOOM Plug-in Viewer, visit the iSeeMedia Software web site at www.iSeeMedia.com

Using the File menu

This section describes how to use the File menu commands for the stand-alone iSeeMedia ZOOM Viewer, which launches when you access a web page that uses the iSeeMedia ZOOM Plug-in Viewer.

The following table describes the File menu commands and keyboard shortcuts.

Menu Command Description Keyboard Shortcut
New Opens a new viewer window. Command + N
Open Lets you chose a file to open on a local hard drive. Command + O
Load URL Lets you specify the URL to a remote file. Command + L
Reload Reloads the file in the viewer window. Command + R
Save Location Lets you save an EMB file that contains plug-in parameters and the URL to the file you are viewing. Command + S
Prefs Lets you set preferences Command + F
Print Lets you print the Flashpix image you're viewing, if enabled by the image provider. Command + P
Close Closes the current viewer window. Command + W
Quit Quits the iSeeMedia ZOOM Viewer Command + Q

Saving a location (EMB file)

The iSeeMedia ZOOM Viewer lets you save a file that works as a link to the Flashpix or IVR file you're viewing. When you choose Save Location from the File menu, a standard dialog box appears for you to choose the location to save the file. The saved file has an .emb file extension and contains the plug-in parameters and the URL to the file you are viewing.

Note: The .emb file extension lets the iSeeMedia ZOOM Viewer read the file; make sure you do not remove this file extension, or the viewer will not be able to open the file.

To view the contents of an EMB file, open it using any text editor. To view a file you've saved, simply double-click the EMB file. The iSeeMedia ZOOM Viewer reads the URL in the file and displays the Flashpix or IVR file.

Setting preferences

When you choose Prefs from the File menu, a dialog box appears for you to set your preferences for the iSeeMedia ZOOM Viewer. The preferences let you:

  • Set the maximum cache size for the iSeeMedia ZOOM Viewer
  • Clear the cache using the Clear Cache button
  • Specify a URL as a default Flashpix or IVR file to show when the plug-in/viewer launches
  • Set the name and port number for a proxy server; for details, see your system administrator or contact your Internet service provider (ISP)

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.

<EMBED SRC="http://209.148.14.246:8087/?fif=cqa/road.fpx" WIDTH=400 HEIGHT=300 toolbar="off"></EMBED>

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

As you can see in the example above, you identify the image that 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 iSeeMedia Flashpix Photoshop® Plug-in lets you set compression when you save Flashpix images, and is available for both Windows and Macintosh.

Detecting the browser type

Since the iSeeMedia ZOOM Plug-in Viewer provides the same features as the iSeeMedia ZOOM Control Viewer, you can use simple JavaScript™ to 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. You can use iSeeMedia Reality Studio to create content combining panoramas, hotspots, and other media. For more information visit the Products section of the iSeeMedia Software web site.

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.
Example  
106 (x1) ÷ 500 = .2, 66 (y1) ÷ 300 = .2 The relative values for this upper left coordinate are 0.2, 0.2
346 (x2) ÷ 500 = .7, 196 (y2) ÷ 300 = .7 The relative values for this lower right coordinate are 0.7, 0.7

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

Optional Paramter Description
description This parameter lets you display text in the browser status bar when the pointer passes over a hotspot. If you omit this parameter, the URL appears in the status bar.
to_frame This parameter lets you specify the frame into which the URL should be loaded. If you use this parameter, you must also specify the description parameter. Otherwise, the viewer interprets the syntax of the to_frame parameter as the text to appear in the status bar.
visibility This parameter defines when a hotspot is activated and is measured in pixels. A visibility of 25, which is the default value, means that the hotspot has to be more than 25 pixels (5 X 5 square) on the screen to be active.
deactivation This parameter indicates when a hotspot is no longer active. The floating point values can range from 0 to +1. The default value is 0.5. If the hotspot is bigger than the number value for the percentage of the screen area, the hotspot will not appear.

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 floating point values 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

pictPreview

Function: This specifies a PICT image that appears in the viewer window on the web page.

pictPreview="http://192.168.168.43/Enterprise/enterprise.pic"

Values: The value is the URL to the PICT image.

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 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 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 the Object Modeler, which is part of the Reality Studio suite of authoring tools. For more information, visit the iSeeMedia Software web site at 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 www.iSeeMedia.com.

Copyright 1999-2000, iSeeMedia Software Corp.
[036b]