CardioPan3 Installation instructions:

What it is:
CardioPan3 is an applet designed to display a scrolling panoramic picture on a web page.
Its main use is to display real estate.

What changed compared to CardioPan2:
CardioPan3 is allmost the same as CardioPan2.
The main difference is the internal event handling model.
CardioPan3 uses the new Java 1.1.x event handling model.
Also a left click causes the panoramic picture to pan to the left.
A right click causes the applet to pan to the right.
You must click without dragging the picture.

Some of the features it supports:

How to install:
The easiest way is to put all the files into the same directory.
The files needed are:

Please note that the file names are case sensitive if placed on the Internet.

For the technical people:
All paths used by the applet are relative to codebase (the applet class files) and not to your html file (documentbase)
So if you use the applets codebase attribute at the applet tags also move all other files.
The reason for this is to solve some problems with some proxy based firewalls

The applet tags:
You will need to add some applet tags on your web page to display the applet.
Normally that should be somewhere between the <BODY> and </BODY> tag.

The first tag you need to add is
<APPLET CODE="CardioPan3.class" WIDTH="300" HEIGHT="158">
CardioPan3.class is the name of the main Java applet program.
Do not add a path name n front of it that will not work.
Width and height should be obviously.

The second tag you may want to add
<PARAM NAME="CABBASE" VALUE="CardioPan3.cab">
This is an optional tag.
It causes Microsoft Explorer browsers to load the cab file.
This cab file contains all the files needed in a compressed form.
The cab file off course does not contain your panoramic files.
Netsape browsers will ignore this tag and load the other files individually

The last tag you need to add is the applet ending tag
</APPLET>

But now we are not finished yet.
The applet needs to be told some things like which panoramic pictures to display.
Where the click able hotspots are etceteras.
For this you need to add some applet parameter tags.
The generally look like this
<PARAM NAME="xxxxx" VALUE="xxxxx">
They need to be inserted between the applet starting and ending tag.
Between <APPLET CODE=" ..> and </APPLET>

Lets add the pictures.
Please not for the best effect all panoramic pictures should be of same height.
Adjust the applet height to the picture height +28.
Lets say we have a picture Pool.JPG and its height is 197 pixels.
197+28 = 225
<APPLET CODE="CardioPan3.class" WIDTH="300" HEIGHT="225">
Lets tell the browser to use this picture.
<PARAM NAME="picture_1" VALUE="Pool.JPG">

Now your html file should already be working!
The complete tags are now:
<APPLET CODE="CardioPan3.class" WIDTH="400" HEIGHT="225">
<PARAM NAME="CABBASE" VALUE="CardioPan3.cab">
<PARAM NAME="picture_1" VALUE="Pool.JPG">
</APPLET>

Ok lets add some more pictures.
<APPLET CODE="CardioPan3.class" WIDTH="400" HEIGHT="225">
<PARAM NAME="CABBASE" VALUE="CardioPan3.cab">
<PARAM NAME="picture_1" VALUE="Pool2.JPG">
<PARAM NAME="picture_2" VALUE="Harbour2.JPG">
<PARAM NAME="picture_3" VALUE="Beach2.JPG">
<PARAM NAME="picture_4" VALUE="Market2.JPG">
</APPLET>

Changing the choice component
Well I don't like the names of the files at the choice component so lets change that.
Lets add these:
<PARAM NAME="picture_1_name" VALUE="Swimming pool">
<PARAM NAME="picture_2_name" VALUE="Harbour">
<PARAM NAME="picture_3_name" VALUE="A nice beach">
<PARAM NAME="picture_4_name" VALUE="The market square">

Add some hotspots
Well this is the basic setup but the applet is capable of a lot more.
You can use add several hotspots on each picture.
When you click on such hotspot another picture is displayed.
When the mouse is over such hotspot then a description is displayed.
To demonstrate lets add a picture of a shark.
So I added these tags:
<PARAM NAME="picture_5" VALUE="sharky.jpg">
<PARAM NAME="picture_5_name" VALUE="Test picture">
Now lets create a hotspot at the swimming pool that loads this sharky.jpg
Hotspots are rectangles the upper left corner of each picture is coordinate (0,0)
To define a hotspot we give the x,y,width,height to the applet and the link.
<PARAM NAME="picture_1_spot1" VALUE="190|145|70|52|CardioPan3:picture_5">
When you now click on this hotspot picture 5 will be displayed.

Adding a description to each hotspot.
To add a description would be nice on mouse over.
So now let add this one.
<PARAM NAME="picture_1_spot1" VALUE="190|145|70|52|CardioPan3:picture_5">

Now lets display all the current applet tags
<APPLET CODE="CardioPan3.class" WIDTH="400" HEIGHT="225">
<PARAM NAME="CABBASE" VALUE="CardioPan3.cab">
<PARAM NAME="picture_1" VALUE="Pool2.JPG">
<PARAM NAME="picture_1_name" VALUE="Swimming pool">
<PARAM NAME="picture_1_spot1" VALUE="190|145|70|52|CardioPan3:picture_5">
<PARAM NAME="picture_1_spot1_description" VALUE="Hello jaws">
<PARAM NAME="picture_2" VALUE="Harbour2.JPG">
<PARAM NAME="picture_2_name" VALUE="Harbour">
<PARAM NAME="picture_3" VALUE="Beach2.JPG">
<PARAM NAME="picture_3_name" VALUE="A nice beach">
<PARAM NAME="picture_4" VALUE="Market2.JPG">
<PARAM NAME="picture_4_name" VALUE="The market square">
<PARAM NAME="picture_5" VALUE="sharky.jpg">
<PARAM NAME="picture_5_name" VALUE="Test picture">
</APPLET>

Loading an url instead of another picture
There are still a lot more things you could do.
For example
You could change
<PARAM NAME="picture_1_spot1" VALUE="190|145|70|52|CardioPan3:picture_5">
to
<PARAM NAME="picture_1_spot1" VALUE="190|145|70|52|http://www.Comweb.nl">
To work with html frames use this tag.
<PARAM NAME="picture_1_spot1_target" VALUE="_blanc">
In that case the applet will load the Comweb.nl site in a new browser window.

Speed control with the applet tags
Well there is even more to it.
But first lets add some hotspots on the sharky.jpg picture.
<PARAM NAME="picture_5_spot1" VALUE="1|2|57|20|CardioPan3:picture_3">
<PARAM NAME="picture_5_spot2" VALUE="4|52|56|38|CardioPan3:picture_4">
<PARAM NAME="picture_5_spot3" VALUE="336|2|19|84|CardioPan3:picture_2">
<PARAM NAME="picture_5_spot4" VALUE="339|95|49|20|CardioPan3:picture_1">
It's a little hard to click on the hotspots of sharky when its moving.
So lets set the speed to 0.
<PARAM NAME="picture_5_speed" VALUE=""0">
As you move to the sharky picture you will see its not moving anymore.
The maximum speed is set to zero and the picture is aligned to the upper left corner of the applet.
You are still able to drag the picture.

Disabling mouse drag.
Well sometimes you want to disable mouse dragging for a picture.
<PARAM NAME="picture_5_mousedrag_allowed" VALUE="false">
If you omit this tag then the value will be set true.

Well the current setup is an already very useful one.
Here are the current tags.
<APPLET CODE="CardioPan3.class" WIDTH="400" HEIGHT="225">
<PARAM NAME="CABBASE" VALUE="CardioPan3.cab">
<PARAM NAME="picture_1" VALUE="Pool2.JPG">
<PARAM NAME="picture_1_name" VALUE="Swimming pool">
<PARAM NAME="picture_1_spot1" VALUE="190|145|70|52|CardioPan3:picture_5">
<PARAM NAME="picture_1_spot1_description" VALUE="Hello jaws">
<PARAM NAME="picture_2" VALUE="Harbour2.JPG">
<PARAM NAME="picture_2_name" VALUE="Harbour">
<PARAM NAME="picture_3" VALUE="Beach2.JPG">
<PARAM NAME="picture_3_name" VALUE="A nice beach">
<PARAM NAME="picture_4" VALUE="Market2.JPG">
<PARAM NAME="picture_4_name" VALUE="The market square">
<PARAM NAME="picture_5" VALUE="sharky.jpg">
<PARAM NAME="picture_5_name" VALUE="Test picture">
<PARAM NAME="picture_5_spot1" VALUE="1|2|57|20|CardioPan3:picture_3">
<PARAM NAME="picture_5_spot2" VALUE="4|52|56|38|CardioPan3:picture_4">
<PARAM NAME="picture_5_spot3" VALUE="336|2|19|84|CardioPan3:picture_2">
<PARAM NAME="picture_5_spot4" VALUE="339|95|49|20|CardioPan3:picture_1">
<PARAM NAME="picture_5_speed" VALUE="0">
<PARAM NAME="picture_5_mousedrag_allowed" VALUE="false">
</APPLET>

Bouncing the picture
Well there is even more.
Sometimes people don't seem to have a 360 degrees panoramic picture.
The applet can also bounce the picture.
Although I don't find this a nice sight.
Its better to display a static non-bouncing picture.
So lets add a bouncing picture.
Ok here are the tags I added.
<PARAM NAME="picture_6" VALUE="person.JPG">
<PARAM NAME="picture_6_name" VALUE="Bouncing picture">
<PARAM NAME="picture_6_bounce" VALUE="true">
Note that the picture width must be larger than the applet width!!

Technical note:
Note that applets (and browsers) can react erratically on strange gif formats.
Some people tend to use optimizers that reduce the color table of the gif.
My advice stick to the old gif87a format for applets
Gif 87a is bon transparent and not animated.

Adding a splash picture
The applet will try to display an image splash.gif
Its set to display at least one second.
Currenlty the cab file does not contains a splash image.
I did choose for a gif image.
Omiting the image from the cab file will give a special effect.
You then will see the loading process of the image.
The image is then build from top to bottom while loading
.

Setting colors:
You can set a background color with this tag.
<PARAM NAME="bgcolor" VALUE="#FFFFFF">
And a forground color(mostly text) with this one.
<PARAM NAME="text" VALUE="#000000">
Please not the applet doesn't understand color names
It does understand the hexadecimal RGB color representation.
This reprecentation is also used at the bgcolor attribute of the body tag.
This representation always starts with an #.
The first two digits are the amount of red color.
The middle two are the green and the two rightmost are the blue color amount.

There are some more colors that you can set. The description colors can be set. With description I mean the text that appears when the mouse is over a hot spot.
Here are the tags:
<PARAM NAME="description_text_color" VALUE="#FF0000">
<PARAM NAME="description_border_color" VALUE="#000000">
<PARAM NAME="description_bg_color" VALUE="#FFFF00">
With description_bg_color is meant the background color of the description block.

Displaying the description at the bottom:
<PARAM NAME="description_at_bottom" VALUE="true">
By default this value is set false

Well this is all.
Suggestions and comments are welcome
In case a bug should appear please use the bug form
http://www.comweb.nl/others/debugForm.html

Rob,
rvdb@comweb.nl
All Rights Reserved