Installation Guide for the Panorama 3 Applet

Running the demonstration applet

Click on the file pan.htm and the applet will appear in your browser in a few seconds. If the applet fails to load, first open your browser to full size, select "File", "Open Page", "Browse" and load the applet from the Dialog box. Precise menu titles may vary with brand of browser. The applet control buttons should be self explanatory.

Applet dimensions

The dimensions of the applet in the demonstration are a WIDTH of 700 and a HEIGHT of 250. These values are set solely to fit the demonstration web page and can be adjusted to any size up to size of your monitor, typically 800x600 on a PC. The applet width should not be greater than that of any one image. If you intend to use the preset Java control buttons you should increase the HEIGHT of the applet by 40 pixels to allow for the size of these buttons.

The dimensions of your image files

There are really no restictions on the dimensions of your images. Larger images will require more processing power and increased loading times, especially when downloaded from a website, so these are factors you may wish to consider. Panoramas 1 and 2 required some stiching to be performed on images before they could be displayed in true panoramic form. This is not necessary in Panorama 3. If you have a 360 degree image stiched seamlessly you can load it without modification and it will pan seamlessly in the applet window. You can of course enter any JPG or GIF image, 360 degrees or not, and they will all be displayed in a rotating fashion.

Creating panoramic images

By the time you have downloaded this you will no doubt have some knowledge of how to create panoramas. However I can recommend some useful software:

An image editor will be required for cropping and resizing. Irfan View is an excellent freeware program which allows resizing to within a resolution of one pixel. It uses minimal space on a desktop so multiple copies can be run concurrently allowing inspection of several images at the same time.

An easy to use stitching facility is available in iPhoto Express. This allows you to join up your images seamlessly. This program is available from Ulead Systems.

Image compression

If you are uploading the applet to a web page it is important to keep the image byte sizes as small as possible. If they exceed, say, 100Kb in total your visitor may have to wait several minutes for them to download and may decide to leave your page. Image compression programs are widely available, many of them free. JPEG Imager is an excellent product and a free version is available from the following URL: http://www.geocities.com/vas_b/ji1rc.zip

Setting up the applet PARAMETERS

The VALUEs for the images are the names of your image files. They do not have to be named "image0.jpg" etc. as shown here. Acceptable image formats are JPG and GIF. The other basic PARAMETERS are:
  • speed - An unfortunate name! The higher the value the slower the scrolling will be. It actually refers to the wait interval in milliseconds between repaints of the image.
  • backgroundcolor - This uses the R(ed) G(reen) B(lue) hexidecimal coding for colours as used in HTML. ColorCode makes chosing colours for your web pages easy and may be downloaded from this site.

<APPLET ARCHIVE="pan.jar" CODE="pan.class" WIDTH=700 HEIGHT=250>
<PARAM NAME="image0" VALUE="image0.jpg">
<PARAM NAME="image1" VALUE="image1.jpg">
<PARAM NAME="image2" VALUE="image2.jpg">
<PARAM NAME="image3" VALUE="image3.jpg">
<PARAM NAME="speed" VALUE="50">
<PARAM NAME="backgroundcolor" VALUE="#FFFFFF">
</APPLET>

PARAMETERS for URL links

You can select one or more areas on each of the four scenes which when clicked with the mouse will attempt to connect your computer to the URL (web page) associated with that area. A section of an image the "imagearea" is defined by 6 arguments in the VALUE tag:

VALUEDescription
1The number of the scene accessed from button 1
0The X1 co-ordinate or leftmost value of the region
230The X2 co-ordinate or rightmost value of the region
0The Y1 co-ordinate or top value of the region
149The Y2 co-ordinate or bottom value of the region
http://...The URL associated with this region

It should be note that the values for the X co-ordinates refer to the area off the total panoramic image and NOT to the co-ordinates of the applet window. The Y co-ordinates of the image and applet window will in general be the same.

Each "imagearea" can have a message, "imageareamessage", which will appear in the center of the applet window when the mouse is over that region. The suffix of the "imagearea" must match the suffix of its "imageareamessage". That is, "imageareamessage0" will appear when the mouse is over "imagearea0".

<PARAM NAME="imagearea0" VALUE="1,0,230,0,149,http://www.mydomain.co.uk/">
<PARAM NAME="imagearea1" VALUE="1,230,460,0,149,http://www.mydomain.co.uk/">
<PARAM NAME="imagearea2" VALUE="1,460,690,0,149,http://www.mydomain.co.uk/">
<PARAM NAME="imageareamessage0" VALUE="Description">
<PARAM NAME="imageareamessage1" VALUE="Description">
<PARAM NAME="imageareamessage2" VALUE="Description">
<PARAM NAME="imagearea3" VALUE="2,0,230,0,149,http://www.mydomain.co.uk/">
<PARAM NAME="imagearea4" VALUE="2,230,460,0,149,http://www.mydomain.co.uk/">
<PARAM NAME="imagearea5" VALUE="2,460,690,0,149,http://www.mydomain.co.uk/">
<PARAM NAME="imageareamessage3" VALUE="Description">
<PARAM NAME="imageareamessage4" VALUE="Description">
<PARAM NAME="imageareamessage5" VALUE="Description">

PARAMETERS for "mouseover" messages

You can select the font face, size and type for the mouse over message. The text colour is specified by "messageforeground" and the background by "messagebackground".

<PARAM NAME="fontface" VALUE="Serif">
<PARAM NAME="fontsize" VALUE="18">
<PARAM NAME="fonttype" VALUE="Font.PLAIN">
<PARAM NAME="messagebackground" VALUE="#CCFFFF">
<PARAM NAME="messageforeground" VALUE="#0000FF">

Font faces available on all platforms are Serif, SansSerif and Monospaced. These are generally equivalent to "Times Roman", "Helvitica" and "Courier" respectively. The font types are PLAIN, BOLD and ITALIC.

Additonal PARAMETERS

The following PARAMETERS allow you to turn off selected buttons in the control bar. Setting "showbuttons" to "no" will turn all the buttons off. If "numberbuttons" is set to "no" the buttons "1", "2", "3", and "4" are turned off. The remaining parameters refer to individual buttons and some colour options.

<PARAM NAME="showbuttons" VALUE="on">
<PARAM NAME="numberbuttons" VALUE="no">
<PARAM NAME="firstbutton" VALUE="no">
<PARAM NAME="secondbutton" VALUE="no">
<PARAM NAME="thirdbutton" VALUE="no">
<PARAM NAME="forthbutton" VALUE="no">
<PARAM NAME="pausebutton" VALUE="no">
<PARAM NAME="slowbutton" VALUE="no">
<PARAM NAME="directionbutton" VALUE="no">
<PARAM NAME="fastbutton" VALUE="no">
<PARAM NAME="backgroundcolor" VALUE="#66FFCC"> Image Background
<PARAM NAME="loadmessagebgcolor" VALUE ="#CCFFFF"> Load Message Background
<PARAM NAME="loadmessagefgcolor" VALUE ="blue"> Load Message Text Colour

Controlling Panorama from JavaScript

A control bar is hardcoded in Java in the applet. It is possible to turn these buttons off with the PARAMETER "showbuttons" set to "no". In the Panorama 3 demonstration this has in fact been done and what you see are JavaScript buttons. Using the following or similar code the buttons can be positioned any where on your web page. You can of course chose to display a subset of the buttons:

<FORM>
<INPUT TYPE = BUTTON VALUE ="Pause" onclick="actionPerformed('Pause')">
<INPUT TYPE = BUTTON VALUE ="Slow" onclick="actionPerformed('Slow')">
<INPUT TYPE = BUTTON VALUE ="<-|->" onclick="actionPerformed('<-|->')">
<INPUT TYPE = BUTTON VALUE ="Fast" onclick="actionPerformed('Fast')">

<INPUT TYPE = BUTTON VALUE ="1" onclick="actionPerformed('1')">
<INPUT TYPE = BUTTON VALUE ="2" onclick="actionPerformed('2')">
<INPUT TYPE = BUTTON VALUE ="3" onclick="actionPerformed('3')">
<INPUT TYPE = BUTTON VALUE ="4" onclick="actionPerformed('4')">
</FORM>

Using this script when a JavaScript (not Java) button is "clicked", the function "actionPerformed()" is called which passes the relevant argument to the Java applet. The effect will be just as if a Java button had been pressed. The code for this function is as follows:

<SCRIPT Language="JavaScript">
function actionPerformed(str)
{
document.applets[0].javaScript(str)
}
</SCRIPT>

If you would rather have a textual description of the control buttons, that is, do not use a control bar, a script similar to the following could be used:

<A HREF="#" onclick="actionPerformed('1')">Garden</A>
<A HREF="#" onclick="actionPerformed('2')">Kitchen</A>
<A HREF="#" onclick="actionPerformed('3')">Lounge</A>
<A HREF="#" onclick="actionPerformed('4')">Bedroom</A>

<A HREF="#" onclick="actionPerformed('Pause')">Pause</A>
<A HREF="#" onclick="actionPerformed('Fast')">Fast</A>
<A HREF="#" onclick="actionPerformed('<-|->')"><-|-></A>
<A HREF="#" onclick="actionPerformed('Slow')">Slow</A>

Instead of the textual description you could insert your own icon with, for example, <IMG SRC="myicon.gif">.

Example Upload to a website

You will need an FTP program such as WS-FTP or Cute FTP. Trial or free versions of these programs can often be found on CDs provided with Internet monthlies. Windows 95/98 has an upload wizard which is quite easy to use. Upload the file pan.jar, pan.htm and your image files to same directory on your website. Note that in this version there are no "class" files to upload. The class file is packaged in the "jar" file. In your homepage enter the following (or similar):

<A HREF="/directory_name/pan.htm">My Panorama Page</A>

Troubleshooting

When loading the applet it is recommended not to resize your browser until the applet and all images are loaded. Previous editions of Panorama produced unpredictable results when resizing Netscape 4.7. Users whose default browser was Netscape sometimes found double clicking on the applet html file failed to load the applet.

Extra code exists in Panorama 3 to start a new thread should Netscape partake in in this bizarre behaviour of killing applets every time it resizes. This has been tested extensively with success on a PC. If you have any problems with the Panorama applet email: support@imageviewer.co.uk and we will do our best to help.

Registration

Thank you for downloading the Panorama applet. The Panorama demonstration applet is fully functional and has no expiry date. There are no limits on the dimensions of the image files. A registration code is required to run the applet from a website. These can be obtained from:

http://www.imageviewer.co.uk
sales@imageviewer.co.uk

or you can go directly to the Registration form.

Last Updated: