PanaTour General Info Examples FAQs Tech Info Free Trial Get a Quote Buy Online Java Support GoRound

The PanaTour Viewer User Documentation Author: Jerry Jongerius Modified July 1, 2001

1. What is the PanaTour Viewer 2. Feature Summary 3. The PanaTour Viewer Example 4. Quick Start 5. Creating panoramas 6. Applet Parameters 7. Applet Security Model 8. The <APPLET> Tag 9. JavaScript Control 10. Recommended Directory Layout

11. Download 12. How to register/order 13. License Agreement 14. Awards/Honors 15. Troubleshooting Guide 16. Tech Notes 17. Release History 18. Sites Using the PanaTour Viewer 19. Web Resources

The PanaTour Viewer(PMVR) is a Java applet that
displays panoramic images in a web page.
(Also works great for creating panoramic CD demos)
The PanaTour Viewer was designed as an alternative to Apple's QTVR because QTVR requires a large plug-in to be installed first. QTVR is great if users already have it installed but if not, it is a pain to wait to install the plug-in. Many users will not wait for QTVR to install and will just move on -- your opportunity for impressing the visitor gone forever.

The advantage of the PanaTour Viewer is that it is a very small Java applet (16K, so it loads in just seconds) that will run in any browser that supports Java, on any platform. The PanaTour Viewer only uses the Java 1.02 API (the first version of Java), which allows it to run in older browsers like Internet Explorer 3.02 and Netscape Navigator 3.01. In fact, the PanaTour Viewer compensates for known bugs in older Java VMs that allows it to run in older web browsers. However, using recent browsers is recommended due to the speed improvements they offer (via JIT, Just-In-Time compiler technology, which makes them several times faster). the PanaTour Viewer uses technology that is Patent Pending.

No programming experience is required to use the PanaTour Viewer. All you need to know is how to edit an HTML document in order to use the PanaTour Viewer. Check out the Quick Start guide [§4] to see what I mean.

A unique feature of the PanaTour Viewer is the optional 'FloorPlan' applet, which greatly enhances a viewers ability to walk through a 'mapable' environment and understand 'direction' in the currently displayed panoramic view.

Please visit http://www.thetctraveler.com/ for a web site that uses the pmvr.class and FloorPlan.class applets extensively.

• Easiest way to add panoramas to web pages and CDs -- quick start [§4]
• No plugin needs to be installed first!
• Ability to zoom into images using 'a'/'z' or zoom slider
• Java applet is cross-platform and supports Java-enabled browsers
• Very small (16k) Java applet automatically loads quickly (less than 4 seconds)
• Unique FloorPlan/map support (patent pending)
• Incredibly fast flicker-free and smooth image updates
• Flexible hot spot regions: x-axis section, circle, rectangle, and polygon -- link-spec [§6]
• Hot spots can launch new web pages or call your JavaScript functions for custom programmed actions! -- url-target [§6]
• Fully controllable via JavaScript -- details [§9]
• Actively supported, professional product -- release history [§17]
• Extensively tested for maximum compatibility with all major browsers
• Controls automatically appear/hide -- easy to use and it makes panoramas look great

Here is an example of the PanaTour Viewer in action.

Click and drag within either image to pan left/right. Or click and drag on the slider in the panorama (which appears when your cursor enters the panorama) to zoom in/out (or press 'a' and 'z'). Notice how the floor plan shows you what direction you are looking and stays 'in sync' with the panorama, which greatly helps to gain a sense of 'direction':

For an extensive the PanaTour Viewer virtual tour that uses the FloorPlan applet, visit The Ella Sharp Museum.

Upper Front Porch (360°) Java support is required for panoramic images. Details

The HTML code that created this PanaTour Viewer image and floor plan looks like:

<applet code="pmvr.class" width=500 height=252>   <param name="image" value="images/upperporch360.jpg">   <param name="view" value="360">   <param name="center" value="2222">   <param name="pixdeg" value="0=76,570=354,1680=186,2304=76">   </applet> <applet code="FloorPlan.class" name="FloorPlan" width=205 height=252>   <param name="image" value="images/secondfloor.gif">   <param name="x" value="100">   <param name="y" value="492">   </applet>

Notice how the PanaTour Viewer applet displays the panorama image and how the floorplan applet displays the floor plan image. The two applets communicate with each other to keep the view synchronized (usage of the 'pixdeg' pmvr applet param signals that you want the applets to communicate).

In most virtual tours that use the floor plan applet, a large shared image for the floorplan will be used. For example, 10 panoramas may all use the same floor plan image. The only thing that needs to change from one panorama to the next is the "x" and "y" standing position on the floor plan image. The floorplan applet will automatically shift the image to center the "x" and "y" standing position.

For help in understanding how the <APPLET> tag above works for embedding Java applets in HTML, check out the <APPLET> tag reference [§8].

For many other examples and ideas, check out the selected sites using the PanaTour Viewer [§18] section to see how other PanaTour Viewer customers are using the PanaTour Viewer.

Do you already have a panoramic image to display? If not, the creating panoramas [§5] section below will help you get started. Or use this sample image (saving it to your hard disk drive).

Next, when you have a panoramic image to display, place it into a directory with an HTML file (that you create yourself, or by using an HTML editor) and add the following HTML code into the body of the document:

<applet code="pmvr.class" width=500 height=300>   <param name="image" value="yourpan.jpg">   <param name="view" value="360">   </applet>

Make sure that you change the 'height' listed above in blue to match the height of your panoramic image (not absolutely required, but recommended) and that you change 'yourpan.jpg' listed above in blue to be the name of your saved panoramic (required). If your panoramic image is not a full 360 degree image, you can remove the 'view' param line above.

Finally, place the 'pmvr.class' and 'FloorPlan.class' files (from the freetrial.zip download [§11]) into this same directory and you are done!

View your HTML file in your web browser and you will see your panorama. Simply place your files in a folder on a floppy or CD and mail your panoramas to anyone (all they need is a web browser). Or place your files on a web server for everyone to see.

Want to add a floorplan? If you do not have a floorplan or map image, just use this sample floorplan, saving it to your hard disk drive. Then in the same HTML document that you added the panorama to above, add the following HTML code after the the PanaTour Viewer applet:

<applet code="FloorPlan.class" name="FloorPlan" width=205 height=300>   <param name="image" value="yourplan.gif">   <param name="x" value="100">   <param name="y" value="492">   </applet>

Just make sure to change the FloorPlan applet width (205) and height (300) to a good size and change 'yourplan.gif' to match the name of your floorplan. Next, change the 'x' (100) and 'y' (492) parameters to reflect the location on the floorplan where the panorama was captured. View the HTML until you are happy with the settings -- but the FloorPlan hilight will not appear, just the hilight dot. The final step to adding FloorPlan support is to add a pixdeg param into the above the PanaTour Viewer applet, which will make the FloorPlan hilight appear and work. For example, add the following into the pmvr applet (note: the pmvr applet, not the FloorPlan applet):

<param name="pixdeg" value="0=90,2000=90">

Where you replace 2000 with the pixel width of your panorama. While this is not the pixdeg that you will finally use, you should be able to see a FloorPlan highlight on your floorplan.

One of the quickest ways to start creating panoramas is by using what is called 'image stitching software'. This software works by taking individual images and 'stitching' them together to make a panorama. The web resources [§19] section below contains links to more information about these programs. Specifically, http://www.panoguide.com/ provides a guide that compares many image stitching programs.

A good way to get quality pictures into your computer is by using a digital camera. This avoids having to take pictures with a normal camera and then scanning the prints into your computer (which can take a long time).

TIP: Create a high quality/resolution panorama and save it to your hard disk. Then resize it to an appropriate size and save as a JPG for web site use. That way you still have the original high quality version of the panorama in case you ever need it later. For example, including the image in a brochure, where printing a high quality image really is a lot better than the web site image.

The following tables describe all of the parameters that the pmvr and FloorPlan applets can use. Please do not be overwhelmed by the number of parameters as only a couple are absolutely required. The many optional applet parameters are there to allow you to customize the applet, should you need to. For example, take a quick look at the example above [§3] and how just a couple of parameters were needed.

Parameters are defined within the <APPLET> tag [§8] and each defined parameter looks like:

<param name=name value=value>

Where the possible name/value are described in the tables below.

For the pmvr applet, only the image parameter is required. If the image you are viewing is a 360 make sure that you use the view parameter set to 360. To use the FloorPlan applet, you must use the pixdeg parameter in the pmvr applet--this signals the pmvr applet to look for and use the FloorPlan applet. In the FloorPlan applet, the image, x, and y parameters are required.

Click on an applet parameter name in the following tables for a detailed description of that applet parameter. Note that many applet parameters were added in later versions (specified in brackets). You will be able to use all applet parameters if you are using the latest version.

pmvr.class Java Applet Parameters
name	value	Description
image	URL	The URL to a panoramic image (JPG) to display (sample image)
view	Integer	The panoramic image width, in degrees (1-360).
auto	Integer	Horizontal auto scroll one pixel every specified number of milliseconds
vauto	Integer	Vertical auto scroll one pixel every specified number of milliseconds [2.3a]
center	Integer	Initializes viewing centered (horizontal) at this pixel location
vcenter	Integer	Initializes viewing centered (vertical) at this pixel location [2.1d]
links	URL	The URL to a links file (hot spots), where each line is a link-spec [2.2a]
link#	link-spec	Creates a linkable hot spot (an alternative to the links file)
hover	String	Is hot spot hilight displayed as user hovers [yes/no] (default: no) [3.0a]
ll	ll-spec	Links pmvr hot spots to FloorPlan hot spots [3.0a]
pixdeg	pixdeg-spec	For use with the FloorPlan applet to specify viewing direction
floorplan	String	The FloorPlan applet name (default: FloorPlan)
logo	URL	The URL to a logo image to display at startup [2.2a]
delay	Integer	Delay in milliseconds before auto scrolling restarts (default: 30000) [2.3b]
arrows	String	Are left/right scroll arrows displayed [yes/no] (default: yes) [2.3b]
zoom	String	Is zoom control displayed [yes/no] (default: yes) [2.4a]
showlinks	String	Are all link (hot spot) areas hilighted [yes/no] (default: no) [3.0d]
js	String	JavaScript code to run at applet startup [3.1a]
background	hex-color	Color of applet background (default gray: C0C0C0) [2.1c]
cHelp	hex-color	Color of help boxes (default light yellow: FFFFC0) [2.4a]
cArrow	hex-color	Color of left/right arrows (default yellow: FFFF00) [2.4a]
cZoom	hex-color	Color of zoom circle (default light green: 40FF40) [2.4a]
cHot	hex-color	Color of hot spot hilight (default yellow: FFFF00) [2.5a]
zMax	Integer	Maximum zoom-in as a percentage: 200=x2, 250=x2.5 (default: 400)

FloorPlan.class Java Applet Parameters
name	value	Description
image	URL	The URL to a floor plan image (GIF/JPG/etc) to display (sample image)
x	Integer	The X (horizontal) pixel location on map where hilight arc is centered
y	Integer	The Y (vertical) pixel location on map where hilight arc is centered
links	URL	The URL to a links file (hot spots), where each line is a link-spec
link#	link-spec	Creates a linkable hot spot (an alternative to the links file) [2.1e]
hover	String	Is hot spot hilight displayed as user hovers [yes/no] (default: no) [3.0a]
ll	ll-spec	Links FloorPlan hot spots to pmvr hot spots [3.0a]
spots	URL	The URL to a overlay/spots file, where each line is a spot-spec [3.0a]
spot#	spot-spec	Creates an image overlay/spot (an alternative to the spots file) [3.0a]
gray	Integer	The percentage amount to gray the non-'hilight arc' (default: 20) [3.0b]
showlinks	String	Are all link (hot spot) areas hilighted [yes/no] (default: no) [3.1a]
Js	String	JavaScript code to run at applet startup [3.1a]
background	hex-color	Color of applet background (default gray: C0C0C0) [2.1c]
cHelp	hex-color	Color of help boxes (default light yellow: FFFFC0) [2.4a]
cLine	hex-color	Color of hilight lines (default blue: 0000FF) [2.4a]
cDot	hex-color	Color of hilight dot (default yellow: FFFF00) [2.4a]


image -- <param name="image" value="pano.jpg"> -- The image parameter value is a URL to an image (JPG/GIF/etc) on the web server. It can be an absolute URL (eg: http://www.xyz.com/pano.jpg) or a relative URL (eg: pano.jpg), but is almost always a relative URL (as this allows most web sites to be placed on CD for demonstrations), relative to the HTML document URL. Please note that this URL is subject to the applet security model [§7]. This parameter is mandatory and must be set.

x,y -- <param name="x" value="100"><param name="y" value="492"> -- The x and y FloorPlan parameter values specify the x and y pixel location, on a map image, where the hilight dot is drawn. This x, y position on the map image is where the hilight lines radiate from and say "I was standing here when the panorama was captured". In most cases, the underlying map image is larger than the applet viewable area (because it is shared between many panoramas), so the applet will attempt to center the x,y position within the applet viewable area. These parameters are mandatory and must be set when the FloorPlan applet is used.

view -- <param name="view" value="360"> -- The view parameter value is an integer that specifies the how many degrees the panoramic images covers (1-360). When set to 360, PMVR will allow the image to be scrolled round and round. Otherwise, the image scrolling will stop at the left and right edges of the panorama. This parameter is optional and defaults to a non-360 setting.

auto -- <param name="auto" value="20"> -- The auto parameter value is an integer that specifies how many milliseconds to wait before automatically scrolling the image (horizontal) one pixel. The minimum value of this parameter is 20 (milliseconds). The sign of this parameter controls scroll direction. Positive scrolls right. Negative scrolls left. New to version 2.5c is an optional 'multiplier' value that specifies how many pixels to scroll every interval (the default is 1). Just append an 'x' followed by a pixel count to the value. For example, "20x5" will scroll the image right 5 pixels every 20 milliseconds (or about 1000/20 = 50 times a second). On a non-360 image, scrolling direction will reverse when an image edge is encountered. Setting this parameter to 0 will end scrolling. Please note that user activity within the panorama will temporarily suspend scrolling for delay milliseconds. This parameter is optional and defaults to 0 (no scrolling).

vauto -- <param name="vauto" value="20"> -- The vauto parameter value is an integer that specifies how many milliseconds to wait before automatically scrolling the image (vertical) one pixel. The minimum value of this parameter is 20 (milliseconds). The sign of this parameter controls scroll direction. Positive scrolls down. Negative scrolls up. New to version 2.5c is an optional 'multiplier' value that specifies how many pixels to scroll every interval (the default is 1). Just append an 'x' followed by a pixel count to the value. For example, "20x5" will scroll the image right 5 pixels every 20 milliseconds (or about 1000/20 = 50 times a second). Scrolling direction will reverse when an image edge is encountered. Setting this parameter to 0 will end scrolling. Please note that user activity within the panorama will temporarily suspend scrolling for delay milliseconds. This parameter is optional and defaults to 0 (no scrolling).

center -- <param name="center" value="1500"> -- The center parameter value is an integer that specifies the pixel location on the panorama that should be centered (horizontal) in the display when the panorama is first shown. This allows you to control what part of the panorama the user sees first. Used mainly with horizontal panoramas. This parameter is optional and defaults to pixel 0.

vcenter -- <param name="vcenter" value="150"> -- The vcenter parameter value is an integer that specifies the pixel location on the panorama that should be centered (vertical) in the display when the panorama is first shown. This allows you to control what part of the panorama the user sees first. Used mainly with vertical panoramas. This parameter is optional and defaults to pixel 0.

links -- <param name="links" value="firstfloor.links"> -- The links parameter value is a URL (absolute or relative) to a file, where each line in the file is a link-spec (how hot spots are defined) -- example links file. If the same hot spots will be used over and over (as they usually are on a FloorPlan image), pointing to a file (with hot spot definitions) is much easier to than having to specify them everywhere they are needed through the link# parameter. Please note that this URL is subject to the applet security model [§7] and relative to the HTML document URL. This parameter is optional and defaults to no links specified.

link# -- <param name="link0" value="300,100,50,kitchen.html,Kitchen"> -- The link# parameter value is how a link-spec (hot spot) is added. Just continue to number them for as many links (hot spots) as you need to define, starting at 0. For example, link0, link1, link2, ..., link10, link11, etc. These parameters are optional.

hover -- <param name="hover" value="yes"> -- The hover parameter value controls whether or not a hot spot hilight is displayed as the user hovers (moves the mouse) over a hot spot. Since the hot spot is visually hilighted for the user, you should define the hot spots carefully and accurately. This parameter is optional and defaults to "no" (hot spot hilights off).

ll -- <param name="ll" value="0=2,1=0"> -- The ll (linked links) parameter links hot spots in the current applet (pmvr or FloorPlan) to hot spots in the other applet (FloorPlan or pmvr). Please refer to the ll-spec for a detailed description of this parameter. Often used with the hover parameter. This parameter is optional and defaults to no linked links.

spots -- <param name="spots" value="firstfloor.spots"> -- The spots parameter value is a URL (absolute or relative) to a file, where each line in the file is a spot-spec (how image/spot overlays are defined). Please note that this URL is subject to the applet security model [§7] and relative to the HTML document URL. This parameter is optional and defaults to no spots defined.

spot# -- <param name="spot0" value="10,10,spot1.gif"> -- The spot# parameter value is how a spot-spec (image overlay/spot) is defined. Image overlays can be very useful because they allow you to modifty the look and feel of a FloorPlan image without having to actually modify the FloorPlan image. Just continue to number them for as many spots as you need to define, starting at 0. For example, spot0, spot1, spot2, ..., spot10, spot11, etc. These parameters are optional.

pixdeg -- <param name="pixdeg" value="0=76,570=354,1680=186,2304=76"> -- Please refer to pixdeg-spec for a detailed description and tutorial on how to set this parameter value. This parameter is required only if you use the optional FloorPlan applet along with PMVR.

floorplan -- <param name="floorplan" value="FloorPlan"> -- The floorplan parameter value is the name that you assigned in the HTML to the FloorPlan applet. In most cases, you will name the FloorPlan applet "FloorPlan" as in name="FloorPlan", in which case this parameter does not have to be specified. Use this parameter only if you name the FloorPlan applet to anything other than "FloorPlan". This parameter is optional and defaults to "FloorPlan". This parameter is only typically used if you need more than one FloorPlan applet in a single web page (because each FloorPlan requires a unique name).

logo -- <param name="logo" value="logo.gif"> -- The logo parameter value is a URL (absolute or relative) to an image, usually a GIF, that is displayed centered over the panorama for 5 seconds. This is very useful if you need to display a company logo. Please note that this URL is subject to the applet security model [§7] and relative to the HTML document URL. This parameter is optional and defaults to no logo.

delay -- <param name="delay" value="15000"> -- The delay parameter value specifies how many milliseconds to wait before auto scrolling (if configured by the auto param) resumes. When a person interacts with a panorama, auto and vauto scrolling will temporarily stop to allow the user to interact with the image. When there has been no user activity for the number of milliseconds specified by this parameter, auto scrolling resumes. This parameter is optional and defaults to 30000 (30 seconds).

arrows -- <param name="arrows" value="no"> -- The arrows parameter value controls whether or not the left and right scroll arrows are displayed over the panorama. If turned off (set to "no"), the user can still drag within the panorama to move around. Please note that the arrows already automatically hide if the mouse cursor is not over the panorama. This parameter is optional and defaults "yes" (on).

zoom -- <param name="zoom" value="no"> -- The zoom parameter value controls whether or not the zoom control is displayed over the panorama. If turned off (set to "no"), the user can still use the 'a' and 'z' keys to zoom in/out. Please note that the zoom control already automatically hides if the mouse cursor is not over the panorama. This parameter is optional and defaults to "yes" (on).

showlinks -- <param name="showlinks" value="yes"> -- The showlinks parameter value controls whether or not all link (hot spot) areas are hilighted. The primacy use of this parameter is through JavaScript control to provide a GUI to the user to turn hilights on/off at any time. This parameter is optional and defaults to "no" (hilight off).

Js -- <param name="Js" value="pmvrup()"> -- The Js parameter value is JavaScript code, but is almost always calls a JavaScript function in your HTML web page. The function is called as the applet starts up and allows you to hook into the startup sequence. This parameter is optional and defaults to no JavaScript code to run at startup.

gray -- <param name="gray" value="10"> -- The gray parameter value controls how much the non-hilight arc is grayed. It is a number representing a percentage. For example, a value of 10 would gray the non-hilight arc by 10%. Set this parameter to 0 to eliminate any graying of the non-hilight arc. This parameter is optional and defaults to "20" (20% grayed).

background -- <param name="background" value="C0C0C0"> -- The background parameter value controls the background hex-color of the applet. You see the applet background as an image loads or if the image is smaller than the applet area. This parameter is optional and defaults to "C0C0C0" (light gray).

cHelp -- <param name="cHelp" value="FFFFC0"> -- The cHelp parameter value controls the background hex-color of help boxes. For example, when the mouse is held over a link (hot spot), text that you define is drawn within a help box. This parameter is optional and defaults to "FFFFC0" (light yellow).

cArrow -- <param name="cArrow" value="FFFF00"> -- The cArrow parameter value controls the hex-color of the left/right scroll arrows in PMVR. This parameter is optional and defaults to "FFFF00" (yellow).

cZoom -- <param name="cZoom" value="40FF40"> -- The cZoom parameter value controls the hex-color of the zoom location circle (that moves on the zoom bar) in PMVR. This parameter is optional and defaults to "40FF40" (light green).

cHot -- <param name="cHot" value="FFFF00"> -- The cHot parameter value controls the hex-color of the lines that show all hot spots within a panorama. Pressing the space bar in a panorama (click in the panorama first to make sure it has the focus) will show and hide all hot spots. This parameter is optional and defaults to "FFFF00" (yellow).

cline -- <param name="cline" value="0000FF"> -- The cline parameter value controls the hex-color of the two hilight lines (that radiate from the hilight dot) in FloorPlan. This parameter is optional and defaults to "0000FF" (blue).

cDot -- <param name="cDot" value="FFFF00"> -- The cDot parameter value controls the hex-color of the hilight dot in FloorPlan. This parameter is optional and defaults to "FFFF00" (yellow).

zMax -- <param name="zMax" value="250"> -- The zMax parameter controls how far PMVR can zoom into an image, as a percentage. For example, 250 means 250% or a zoom in of 2.5 times. This parameter is optional and defaults to "400" (zoom in up to 4x).



---

link-spec: is a "num-list,url-target,description" (a hot spot definition), where 'num-list' specifies the type of region (rectangle, circle, etc -- see num-list below), 'url-target' is the URL to launch when the user clicks in the link region (or JavaScript action, see url-target below), and 'description' is the human readable description that is displayed when the user moves the mouse over the region. For example:

Region Type	Sample link-spec (see num-list below for more info)
x-axis section	100,200,greatroom.html in _blank,Great Room
circle	300,100,50,kitchen.html,Kitchen
rectangle	400,100,500,200,http://www.panatour.com,PanaTour
polygon	100,0,200,200,0,200,pergola.html,Pergola

A link-spec is used either by the link# or links applet parameter to define a clickable hot spot in the image.

url-target: A URL (absolute or relative) followed by an optional " in target", where target is a frame name (your own name or _blank, _parent, _self, or _top). Or "javascript:" followed by JavaScript code. However, please note that the JavaScript code must not contain any commas (which are used by the link-spec). This is usually not a problem since you can just call a JavaScript function that you have written within the web page, which can contain commas. Refer to the JavaScript [§9] section for details (especially the section on MAYSCRIPT). A relative URL is relative to the HTML document URL. Sometimes you just want to create a hot spot that annotates the image. In this case, set the url-target to "-" (a comment -- do nothing). For example, here are some url-targets:

Type	Sample url-target
relative	kitchen.html
absolute	http://www.xyz.com
target	http://www.panatour.com in _top
javascript	javascript:alert('Clicked!')
comment	-

num-list: The number list varies in size depending upon what hot spot region you want to create. For a simple x-axis section (all y pixels), use two numbers, as is "left,right". For a circle, use three numbers, as in "x-center,y-center,radius". For a rectangle, use four numbers, as in "left,top,right,bottom". For a polygon, use multiple x,y pairs, as in "x1,y1,x2,y2,....,xn,yn". In summary:

Region Type	num-list specification	Sample num-list	area below
x-axis section	left,right	100,200	X
circle	x-center,y-center,radius	300,100,50	C
rectangle	left,top,right,bottom	400,100,500,200	R
polygon	x1,y1,x2,y2,....,xn,yn	600,50,700,150,600,250, 550,200,600,150,550,100	P

pixdeg-spec: A list of 'pixel=degree' -- that identifies the direction (degree) you are looking at various pixel locations. TIP: At a minimum, the first and last pixel/degree need to be specified. More are needed only if the panoramic is not a perfect panoramic. For example, in the porch image used above (and the 'pixdeg' param above), pixel zero is pointed at 76° (relative to the floor plan image), which is "0=76". And since this image is a 360° panoramic, the last pixel is pointed in the same direction, which yields "2304=76". This results in a full pixdeg-spec of "0=76,2304=76". The other 'pixel,degree' help to correct for imperfections in the image.

Spot-spec: A "x,y,image" that defines an image and location of an image overlay (spot). The "image" is displayed centered at the "x,y" spot. This allows spots to be dynamically added to a FloorPlan image. For example, "100,100,spot1.gif" says to overlay the "spot1.gif" image centered at location "100,100" on the FloorPlan.

ll-spec: A comma separated list of 'spot1=spot2' -- that says 'when the user moves the cursor over spot1 in the current applet, hilight spot2 in the other applet.' For example, "0=2,2=1" says "if the user moves over hot spot 0 in the current applet, hilight hot spot 2 in the other applet" and "if the user moves over hot spot 2 in the current applet, hilight hot spot 1 in the other applet."

hex-color: A color specified in 'RRGGBB' (red/green/blue) hexadecimal format. For example, 'FF0000' is pure red, '00FF00' is pure green, '0000FF' is pure blue, 'FFFFFF' is white, '000000' is black, 'CCCCCC' is light gray, etc. Please refer to http://www.utexas.edu/learn/pub/colors for a list of sample colors along with 'RRGGBB' values.

TIPS: Press d (for debug) in the panoramic above (after clicking on the panorama first to give it the 'focus') to get useful left and right pixel/degree information -- then drag around and watch the numbers change. Very useful for helping to create the pixdeg-spec. Also, press the left/right arrow keys to move the image by one pixel (hold shift down at the same time to move by ten pixels). Press c (for copyright) to display copyright information. Press v (for version) to display version information. Press x (for x marks the spot) to display mouse x,y pixel location.

A Java VM (virtual machine) is what allows Java applets, like PMVR and FloorPlan, to run within web browsers. And all modern web browsers come with a Java VM. Java applets are safe to run on your computer because the Java VM prevents a Java applet from accessing resources (files/network/memory/etc) that it is not authorized to access. Applets can be run in a web browser either from a web server, or from the local file system (disk/CD).

Web Server: When a Java VM runs a Java applet from a web server, the Java applet is authorized to access any file on the web server that the applet came from, but the applet can not access any file on another web server or any file on the local file system (your PC).

Local File System: However, when a Java VM runs a Java applet from a local file system (your hard drive), the Java applet is authorized to access only files in the directory that the applet came from (or any subdirectories). Also, the Java VM prevents an applet from accessing files in the root of any drive/CD, as detailed in the 06/20/2000 tech note [§16], as operating system (OS) configuration files (config.sys, autoexec.bat, etc) are usually located there.

For example, the following table summarizes what an applet, running from an HTML file test.html in the tours directory (with the class files placed in the same tours directory) is allowed to access:

Can an applet in test.html (in tours folder) access...
this image when run from	http://www.xyz.com/tours/	c:/tours/
../pan1.jpg	yes	NO
../images/pan2.jpg	yes	NO
./pan3.jpg	yes	yes
./images/pan4.jpg	yes	yes
http://www.xyz.com/any.jpg	NO	NO

Notice the discrepancy in access to pan1.jpg and pan2.jpg. Depending upon where test.html is accessed from (a web server or the local hard drive), access to the same image can be either allowed or denied. The problem is that running from the local hard drive is more restrictive than running from a web server. Because when running from a local hard drive, only files in the same directory as the applet class files (or subdirectories) can be accessed by the applet.

With proper planning, and by using the Java applet codebase tag, this problem can be avoided. Namely, create all tours within a directory tree and use the codebase attribute within any <APPLET> tags [§8] in HTML to refer back to the one set of Java class files in the root of the directory tree you created. The recommended directory/folder layout [§10] section has complete details.

To embed any Java applet within an HTML web page, you must use the <APPLET> tag. The <APPLET> tag syntax is as follows (grayed options are optional; bold text is used as-is; italic text is information that you must provide):

<applet     code=class-filename     width=pixels     height=pixels     name=instance-name     codebase=url     align=alignment     vspace=pixels     hspace=pixels     MAYSCRIPT     >   <param name=parameter1 value=value1>   <param name=parameter2 value=value2>   . . .   alternateHTML </applet>

code=class-filename -- code="pmvr.class" -- The filename of the applet to load (which always ends in .class). It will load from the directory/folder listed by the codebase attribute listed below.

width=pixels -- width=500 -- The width, in pixels, of the applet. This may also be a percentage, like 20%, but rarely is.

height=pixels -- height=250 -- The height, in pixels, of the applet. This may also be a percentage, like 20%, but rarely is.

name=instance-name -- name="pmvr" -- Your name for the applet, which can be any text that makes sense to you. This allows applets within a web page to find each other and it allows for you to control the applets via JavaScript. This attribute is optional. If you use the FloorPlan applet, you will most likely use a name="FloorPlan" in the FloorPlan applet.

codebase=url -- codebase=".." -- The URL to the directory/folder containing the applet code (class files). An absolute URL can be specified, but almost never is. Instead, a relative URL is used, which allows the applet to work on both web servers and the local file system (refer to the recommended directory/folder layout [§10] for details). The relative URL is relative to the document's base URL defined by the BASE tag. If the document does not define a BASE tag, it is relative to the directory/folder containing the HTML file.

align=alignment -- align="left" -- The alignment of the applet. It behaves (and has the same options) as the IMG tag align attribute. This attribute is optional.

vspace=pixels -- vspace=3 -- The vertical space, in pixels, between the applet and surrounding text. It behaves the same as the IMG tag vspace attribute. This attribute is optional.

hspace=pixels -- hspace=3 -- the horizontal space, in pixels, between the applet and surrounding text. It behaves the same as the IMG tag hspace attribute. This attribute is optional.

MAYSCRIPT -- This attribute allows you to use JavaScript within an applet (for example, in a url-target). If you want to use JavaScript, you must grant the applet access to JavaScript by using the MAYSCRIPT attribute, otherwise the applet is not permitted to use JavaScript. If you use MAYSCRIPT on one applet in a web page, you will need to use MAYSCRIPT on all applets in the web page. Please refer to the 12/30/1999 tech note [§16] for details.

<param name=parameter value=value> -- Applet parameters are used to configure an applet. Just use as many param tags as needed to configure the parameters (the parameters are always specific to the particular applet you are using). Please note that param tags are defined within the APPLET tag. Please refer to the applet parameters section [§6] for details on the available PMVR and FloorPlan parameters.

AlternateHTML -- If the <APPLET> tag is not supported by a web browser, the HTML in this section will be displayed. Otherwise, the applet is shown and the HTML in this section is ignored.

Please take a look at the PMVR example [§3] where the <APPLET> tag and parameters used to create the panorama are listed.

For more information about the <APPLET> tag, visit Sun's Applet tag reference.

Note: Internet Explorer on the Mac does not support scriping. See tech note 02/19/2001 [§16] for details.

Both the PMVR and FloorPlan applets can be controlled via JavaScript. For a technical guide on JavaScript, please refer to the Netscape JavaScript Guide. Using JavaScript is optional and normally only used by web masters, or those who can program in HTML. Both applets have a public function, which can be accessed from JavaScript, that looks like:

public void set( String name, String value )

Just use the same parameter names and values that are described in the applet parameter tables above. In order to access the applets via JavaScript, each applet must be given a unique name in the HTML code. For example, this is how the PMVR applet might be named:

<applet name="pmvr" code="pmvr.class" width=500 height=300>   ...   </applet>

Then JavaScript can be used to change applet parameters at any time (using the name that was given to the applet in HTML). For example:

document.pmvr.set('image','newimage.jpg'); document.pmvr.set('auto','20'); document.pmvr.set('center','1568');


Notes: Setting 'link0' will clear all previous links. Setting 'auto' or 'vauto' will clear the 'user activity' timer (which allows immediate scrolling again).



---

Using JavaScript in a url-target: When a url-target starts with "javascript:", what follows (up until the next comma) is JavaScript code that will be executed in the context of your web page. This is very useful if you want a hot spot to do more than just link to another web page. The best way to use this feature is to write a JavaScript function in your web page (that does whatever you want) and then call the function via the url-target JavaScript code.

Please note that using this feature requires that you add the MAYSCRIPT applet attribute on your applets as follows:

<applet MAYSCRIPT code="pmvr.class" width=500 height=300>   ...   </applet>

Without the MAYSCRIPT applet attribute, the applet will not be allowed to execute JavaScript code in the context of a browser.

NOTE: Please read the 12/30/1999 tech note [§16] for a Netscape/MAYSCRIPT problem that will require that you use MAYSCRIPT on both PMVR and FloorPlan.

How do you organize your web site for hosting one tour or thousands of tours?

Do you want the ability to produce tours that can be hosted on both a web site and a CD?

Is it possible to only use one pmvr.class and FloorPlan.class no matter how many tours you produce?

Without proper planning, you can quickly run into trouble. But hopefully by following the concepts described in this section, you will be well on you way to producing tours that can easily be managed.

The first step is to understand the applet security model [§7]. Please read that section until you gain an understanding of what files an applet is allowed to access on a web server vs the local file system. Next, review the codebase attribute of the <APPLET> tag [§8]. This attribute is crucial to having one set of class files no matter how many tours you host.

It is recommended that you host all of your tours within a directory/folder (or any of its subdirectories). For example, create a tours directory and place the pmvr.class and FloorPlan.class files in this directory. This will be the only class files that all of your tours will reference, no matter if it is one tour or thousands of tours. No matter where you place tours within the tours directory structure, you will use the <APPLET> codebase attribute to refer back to the class files located in the tours directory. This greatly facilitates upgrading your Java class files when a new version of the software is released. Just upgrade one location and all tours automatically use the new class files.

Consider the following directory/folder layout:

/tours   pmvr.class   FloorPlan.class   tour1/     index.html -- applets use codebase=".." to access applet code     kitchen.jpg     bedroom.jpg   east/     tour2/       index.html -- applets use codebase="../.." to access applet code       gulf.jpg       beach.jpg   tour3/   .   .   potentially many more tours

Any HTML files that need to access the pmvr.class and FloorPlan.class applets just have a codebase attribute in the <APPLET> tag that uses a relative URL to point back to the class files. For example, the codebase attribute in <APPLET> tags in /tours/tour1/index.html will look like:

<applet codebase=".." code="pmvr.class" width=400 height=200>   . . .   </applet>

A codebase of ".." is needed within /tours/tour1/ to reference the class files back one directory in /tours/. This works because ".." means 'go back one folder/directory'. As another example, the codebase attribute in the <APPLET> tags in /tours/east/tour2/index.html will look like:

<applet codebase="../.." code="pmvr.class" width=300 height=150>   . . .   </applet>

Where a codebase of "../.." is needed within /tours/east/tour2/ to reference the class files back two directories in /tours/.

TIP: Make sure that you use relative URL's in all of your HTML when accessing images, other HTML files, etc as that will allow your tour to be easily placed onto a CD for demonstration purposes (and easily tested on your local file system before being placed onto a web server). Otherwise your tour will probably only work on a web server, if you use absolute URL's.

The freetrail.zip download file is a small file (only 209k), so it downloads quickly. Use WinZip (or equivalent) to unzip into any directory on your local machine and use your favorite web browser to view the readme.html file, which contains a sample panoramic.

The pmvr.zip download file contains these files:

readme.htm     - view this file first in your web browser pmvr.class      - the pmvr Java applet FloorPlan.class - the FloorPlan Java applet images/*.*      - images directory

Please note that the readme file extension is '.html' and that the java class filename extensions are '.class' (in case you mistakenly extract the files from the ZIP as 8.3 filenames).

PMVR is shareware. Please try it for free. If you like it enough to keep using it, you must pay for this program. "Unregistered Version" will be displayed over panoramas until you purchase a license:

License Type	Price
Personal (non-commercial)	$29.95
Business, 2 Image	$29.95
Business, 10 Image	$99.95
Business, 25 Image	$199.95
Business, 100 Image	$499.95

Limited Image Use - The product may only be used for the specified number of images before the license must be renewed. For the PanaTour Viewer, a single image is defined to be a single displayed panoramic with an optional FloorPlan image. Once an image from the license is used, it can not be reused -- just like film used in a camera.

Personal use - Use of the product is for personal use that is in no way related to a business. You obtain no monetary benefit from the use of the product. Your only benefit of using the product is your personal satisfaction. Use of the product within the context of a home-based or part-time business falls under business use.

Business use - Use of the product is in the context of a business setting (for-profit and non-profit). There does not have to be a direct monetary benefit from using the product -- just the fact that a business is using the product defines its use as business use.

Reselling Services

You can resell services derived from the use of your license as per below (however, you may not resell product licenses). Reselling services is only possible within the context of a business use license. PMVR - You may resell services based upon your business use license provided that the total number of images resold is less than 100 images. Please contact us for a custom license if you need to resell more than a total of 100 images as we offer special discounts. For example, purchasing a 100-image business use license allows you to create 100 panoramic images and resell them. You must obtain a custom license to produce more than 100 panoramic images for resale.

THe PanaTour Viewer is shareware. That means that you may try it for free to see if it works for you. If you like the software enough to keep using it, you must pay for it. If you find anything wrong with the software, let us know and we will try to fix the problem immediately. Our entire liability for your use of this software shall not exceed the amount you paid for the software. You may not reverse engineer or decompile the software. You may not modify the software in any way. The software may not be used on adult sites nor to display adult material. License violations will result in license termination and forfeiture of license fees.

	JavaBoutique - Featured as Applet of the week
	JARS - top 5% of all applets
	ZDNet - 5 out of 5 stars

Are you having trouble getting the PMVR or FloorPlan applets to work?

The first step is to read through the technical notes [§16] to see if the problem you are experiencing is a known technical issue. Otherwise, the problem you are running into may be described below. If not, please contact us for help, Big Water & Associates 231-334-7700..

1) [OBSOLTE] A few Internet Explorer users only see a gray box in the web browser where the PMVR applet is supposed to be, but it works with most IE users -- This is caused by a missing FloorPlan.class file. The 10/14/1999 technical note [§16] has details. NOTE: PMVR 3.0a uses 'tunneling' to work around and fix this browser problem.

2) Hilight arc on FloorPlan does not appear -- This is caused by an HTML coding error. (1) Do you have a pixdeg applet parameter defined for the PMVR applet? Is it properly formatted (a comma separated list of pixel=degree)? (2) Do you have a name="FloorPlan" attribute defined in the HTML for the FloorPlan applet? This is needed in order for the PMVR applet to find the FloorPlan applet. (3) Are you using the MAYSCRIPT attribute? If so, the attribute must be used on both applets (see the 12/30/1999 tech note [§16]). (4) Do you have the x and y FloorPlan parameters defined? (5) Compare your HTML code to the trial readme.html HTML, which has a working FloorPlan.

3) Hilight arc on FloorPlan 'jumps around' -- This is caused by an error in the PMVR pixdeg applet parameter. The most likely cause is that the last 'pixdel=degree' in the pixdeg specification is not the pixel width of your panorama, which it should be.

4) A link (hot spot) is formatted properly, but does not work -- Verify that you have increasing numbers in the link# parameters with no gaps in the numerical sequence, with numbers starting at 0. For example, if you have link0, link1, link2, and link2 defined, you need to change the last link2 (a duplicate) to link3. Or a gap where you have link0, link1, and link3 (a gap) defined, you need to change link3 to link2.

5) "Image not accessible" displayed in applet -- The image you have specified in the PMVR image parameter violates the Java applet security model. Please refer to the java applet security model [§7] for details.

6) "Image Error" displayed in applet -- There was an error reading/locating the image specified in the PMVR image parameter. (1) Verify that the image exists and is readable by the browser that you are using -- by creating a URL that directly points to the image. Can the browser view the image? (2) Check the spelling of the image name. Remember that some web servers treat file names as case sensitive. Does the spelling and case of the image file on the server match what is specified in the applet parameter? The 09/08/2000 technical note [§16] has another possible cause.

TIP: If you are experiencing problems, the first step is to open the 'Java Console' in your browser to check for error messages. In Netscape Communicator, this is under the 'Communicator' menu (and under 'Tools' in newer versions). In Microsoft Internet Explorer, the Java Console must first be enabled in 'Tools / Internet Options / Advanced / Microsoft VM / Java console enabled'. After restarting your browser, the 'Java Console' option will be available under the 'View' menu.

02/19/2001 -- Java Applets Cannot Be Scripted in Mac Internet Explorer -- Microsoft Article ID Q190283 has complete details. Netscape on the Mac does support scripting.

10/30/2000 -- Do not use spaces in filenames -- Do not use spaces in the filenames of images, etc (possible under a Windows server) as it appears that this can cause problems with some browser / server combinations. Namely, using a URL with a space works under IE (the space is automatically converted to %20), but fails under Netscape.

09/08/2000 -- Netscape cannot read some JPEGs -- Some people have reported that a PMVR panorama displays fine in Internet Explorer, but it does not appear when using Netscape Navigator (and that the Netscape java console window reports a "sun.awt.image.ImageFormatException: Image too wide for this implementation" error). This particular problem has been traced to Netscape being unable to read the JPEG at all. To test this, create a URL that points directly to the JPEG image file on the server and test under both Netscape and Internet Explorer. If it does not appear in Netscape but it does within Internet Explorer, then you have run into this problem. The graphics program you are using is producing a JPEG that Netscape is unable to read! Whether this is a problem with the program you are using to write the JPEG (but Internet Explorer works) or with Netscape is unknown. The work-around is to use another graphics program to write the JPEG.

06/24/2000 -- Avoid using transparent GIF images -- Make sure that you are not using transparent GIF images for floorplan images. It appears that many Java VM's take a significant performance hit in order to display transparent GIF images. While transparent GIF images do work, they dramatically slow down scrolling within PMVR (because the Java VM is taking so much time displaying the transparent GIF in FloorPlan) and causes jerky displays.

06/20/2000 -- Files in the root of a drive/CD cause security errors -- If you attempt to locate class or image files into the root directory of a drive or CD, you will experience problems due to the Java applet security model [§7] (that prevents applets from accessing the root of a drive or CD). The work-around is to move your class files and images into a directory/folder.

06/09/2000 -- Netscape color shifting when using ZOOM -- Older Netscape browsers have a color shifting bug (where red/blue are switched around) when zooming into images. This bug appears to be fixed in Netscape 4.5 and later. If you experience color shifting problems when zooming with the Netscape browser, upgrade your browser. Please note that this bug only exists in the Netscape browsers and not in the Microsoft/Sun browsers.

12/30/1999 -- MAYSCRIPT and Netscape -- If you use the MAYSCRIPT applet tag (which is required if you create hot links that refer to "javascript:") you must use MAYSCRIPT on both the pmvr applet and the FloorPlan applets. This is due to a bug in the Netscape web browsers. If you use MAYSCRIPT in only one applet, the two applets can no longer communicate with each other. Please note that this bug only exists in the Netscape browsers and not in the Microsoft browsers.

10/14/1999 -- FloorPlan.class [OBSOLETE] -- When you use PMVR, make sure that you install both pmvr.class and FloorPlan.class. The pmvr.class has been coded not to 'reference' FloorPlan, unless you want it to be used (the 'pixdeg' param is the trigger). However, some older (Microsoft) Java VM's appear to attempt to load FloorPlan.class anyway and if the FloorPlan.class file is not present, PMVR will fail to load properly. To properly support browsers that use this older Java VM, you need to install both pmvr.class and FloorPlan.class. Newer Java VM's will properly only load/use pmvr.class. Older Java VM's will load both class files, but only use pmvr.class. NOTE: PMVR 3.0a uses 'tunneling' to work around and fix this browser problem, so pmvr.class can be used without FloorPlan.class, but only in PMVR version 3.0a or later.

Version/Date    Changes made in release 3.1a - 04/29/2001  · js calls your JavaScript at PMVR startup · FloorPlan graying is now even faster 3.0d - 04/26/2001  · showlinks parameter controls if links (hot spots) are hilighted 3.0c - 02/28/2001  · AOL compressed graphics alert refers people to 'site help' (example) · Work around Netscape browser startup hang bug 3.0b - 01/04/2001  · FloorPlan now uses true graying via the gray parameter · 'xor' FloorPlan param removed, replaced by gray parameter · zMax parameter controls maximum zoom in 3.0a - 11/21/2000 · 'tunneling' eliminates 10/14/1999 [§16] missing FloorPlan issue · hover parameter allows dynamic hot spot hilight · ll (linked links) parameter links PMVR/FloorPlan hot spots together · spots and spot# FloorPlan parameters allow for image (spot) overlays · a url-target that starts with a '-' is a comment (does nothing when clicked) · image security errors displayed as: "Image not accessible" 2.5d - 10/21/2000  · right-click-drag debug line to FloorPlan applet · some messages are now displayed once per server 2.5c - 10/18/2000 · percent image downloaded display · auto/vauto pixel multiplier 2.5b - 09/27/2000 · arrow/zoom controls auto display/hide 2.5a - 07/11/2000 · cHot parameter controls hot spot hilite color · show 'star' while showing hot spots 2.4c - 06/26/2000 · 'a'/'z' keys zoom in/out · space bar shows all hot spots · speed improvements 2.4b - 06/11/2000 · fixed arrow color problem when zooming into non-360° images · zoom control is displayed even on non-scrolling images 2.4a - 06/09/2000 · ZOOM slider ·