FishEye2 applet




Description:
FishEye2 is designed to display a 3D panoramic picture of real estate.
With the select box you can display the room.
There are three buttons on the lower left side of the applet to control the picture movement.
There is an info button on the lower right corner of the applet.
This button pops up a dialog to display an advertisement or a an instruction.
The content of this dialog can be changed by editing the message.gif picture.
You can drag the picture with the mouse this also controls the scrolling speed.

3D methods supported:
1: parabolic bent on y axis
2: parabolic bent on x axis
3: parabolic bent on x and y axis
4: sinus bent no1
This method makes some lines straight but the horizon is bent.
5: sinus bent no2
This method uses a part of a sinus wave the effect is almost the same as a parabolic y bent
6: lens

Other features:
1: The applet measures the speed of the computer at startup.
So on faster/slower computer there is a speed correction for the scrolling.
Default is a Pentium III 667 Mhz with Ms Explorer 5.5
2: A mask can be set for pixels that map outside the applet and or picture or mapping method.
3: Posterize effect.
Posterize is reducing the number of colors in a picture.
4: An and color filter
Not very useful but it was simple to implement
This filter makes it possible to filter some colors out.
For example if you only want to display all red colors.
5: You can costumise your buttons simply by changing editing the button image files.
6: You can set maximum speed, initial speed and direction,
startup image and background color of the applet.

The applet tags:
<APPLET code="FishEye2" width="400" height="236">
<PARAM  name="loadmessage"   value="Loading please wait.">
<PARAM  name="repaint_interval" value="65">
<PARAM  name="x_steps"       value="-1">
<PARAM  name="max_step"      value="5">
<PARAM  name="bgcolor"       value="#00CCFF">
<PARAM  name="splash"        value="splash.gif|100000">
<PARAM  name="image_1"       value="Bedroom.jpg,bedroom|parabolic_xy|800000|100000">
<PARAM  name="image_2"       value="Kitchen.jpg,Kitchen|parabolic_xy|800000|130000">
<PARAM  name="image_3"       value="Lounge.jpg,Lounge|parabolic_xy|800000|100000">
<PARAM  name="image_4"       value="Outside.jpg,Outside|parabolic_xy|800000|100000">
<PARAM  name="image_5"       value="meeting.jpg|meeting room|parabolic_xy|800000|100000">
<PARAM  name="image_6"       value="Kitchen.jpg,Kitchen|lens|80|2|mask_color=#FF0000">
<PARAM  name="image_7"       value="Lounge.jpg,Lounge posterized|lens|60|1.7|or_color_mask=#222222">
<PARAM  name="image_8"       value="Lounge.jpg,lounge sinus2|graph_2y|-480|mask_color=#00CCFF">
<PARAM  name="image_9"       value="Market2.JPG,Market sinus1|graph_y|480|mask_color=#FFFFFF">
<PARAM  name="start_image"   value="1">
</APPLET>


General applet tags:
<APPLET code="FishEye2" width="400" height="236" archive="FishEye2.jar">
<param  name="cabbase"  value="FishEye2.cab">
</APPLET>

This should be simple the first tag declares the applet.
Width and height are the dimensions of the applet.
code tells the browser what the name of the applets main class file is.
Note you only should fill in the name without any trailing path.
The archive attribute is optional, it tells the browser the name of an archive file.
This archive file contains all the applet resource files in a compressed form this way it will take less time to load the applet.
Netscape and Microsoft Explorer both support jar files.
Microsoft browsers also support another archive format: the cab files.
Microsoft prefers cab files so if there is a cab file defined then it will ignore the jar file.
A cab file must be defined with a sperate parameter tag also shown above.
Cab files make it possible to write Microsoft specific applets

loading message:
<PARAM  name="loadmessage"   value="Loading please wait.">
Think this is simple
The advantage is when you want to have a sentence in another language.

Splash image
<PARAM  name="splash"        value="splash.gif|100000">
This option will show a splash image when the first image is loading.
The first value is the name of the splash image.
The second value is the time it should maximal be shown.
The splash image will disappear earlier when the first image is loaded.
The units of the second value are milliseconds.

Start up settings:
<PARAM  name="repaint_interval" value="65">
<PARAM  name="x_steps"       value="-1">
<PARAM  name="max_step"      value="5">

<PARAM  name="start_image"   value="1">
Parameter "repaint_interval" determines how long each movement cycle in milliseconds should take.
The next parameter "x_steps" determines how many pixels the image should move each cycle.
There should be a maximum step rate which is set with parameter "max_step" The last parameter isn't very useful it determines which picture should be shown when the applet starts.

The picture parameters:
<PARAM  name="image_1"       value="Bedroom.jpg,bedroom|parabolic_xy|800000|100000">
<PARAM  name="image_2"       value="Kitchen.jpg,Kitchen|parabolic_xy|800000|130000">
<PARAM  name="image_3"       value="Lounge.jpg,Lounge|parabolic_xy|800000|100000">
<PARAM  name="image_4"       value="Outside.jpg,Outside|parabolic_xy|800000|100000">
<PARAM  name="image_5"       value="meeting.jpg|meeting room|parabolic_xy|800000|100000">
<PARAM  name="image_6"       value="Kitchen.jpg,Kitchen|lens|80|2|mask_color=#FF0000">
<PARAM  name="image_7"       value="Lounge.jpg,Lounge posterized|lens|60|1.7|or_color_mask=#222222">
<PARAM  name="image_8"       value="Lounge.jpg,lounge sinus2|graph_2y|-480|mask_color=#00CCFF">
<PARAM  name="image_9"       value="Market2.JPG,Market sinus1|graph_y|480|mask_color=#FFFFFF">

You can add as many pictures as you want.
The maximum is only determined by the memory installed and available for the browser on the visitors computer.
The picture parameters all start with image_ followed by the number of the picture.
The first picture should be 1 and all other in ascending order.
The value of the parameter is examined by the applet.
It contains several other values all separated by a | (pipe) or , (comma).
The first value is always the filename, the second the description.
The third value is the bending algorithm used followed by a number of values used by this bending algorithm.
Then at the and of the parameter string you can add some mask.
For example a mask used for a posterize effect.
  There are three masks that you can add all are optional.
the mask value name is followed by an equal sign and then by a hexadecimal color representation.
If you don't know what a hexadecimal color representation is then I suggest reading a good html book.
Mostly you will use the "color_mask".
When the applet can't calculate a color for a pixel it will use the color given by the mask.
There are several reasons why no pixel color can be calculated.
One of them is that the pixel coordinate calculated by the algorithm is out of the range.
With the lens algorithm the color_mask is used slightly different, more on this later.
The "or_color_mask" creates a posterize effect.
And the "and_color_mask" removes colors.
For example an and_color_mask of #0000FF only displays the blue color component of that picture.

parabolic_y
This algorithm bends the picture parabolically
It requires one integer value. The value you should use depends on the picture.
Often the value will be around 100.000 note the higher the value the less the picture is bent.

parabolic_x
This is the same as parabolic_y however the bending is done vertically.
Most picture don't have to be bent much vertically so this algorithm itself isn't very useful
This algorithm requires one value.

parabolic_xy
This is a combination of the above parameters.
As you should suspect it requires two integer values.
This bending algorithm is often used.

graph_y
One of the problems with panoramic applets is how do I get all lines straight.
However the bending of a line is (probably) determined by the focus of the lens and how close the object is related to the lens.
The closer the object the more perspective, probably the more bending.
However experimenting with some algorithm I discovered that its possible to straighten out the lines but that will cause the horizon to be bent.
I wonder if I could straighten all lines by adding a second algorithm.
But I think when all straight lines there will be no perspective.
This algorithm requires one variable.

graph_2y
This algorithm does give nearly the same effect as a parabolic_y.
But here a part of a sinus wave is used for the bending.
This algorithm requires one integer (negative) value.

lens
I always wondered how they did make the lens effect.
It was more simpler as expected.
Pixels are transposed with a vector determined by
int newX=(int)(Math.round(r*Math.sin((double)(x)/r)/magnify));
The same for the y coordinate.
This algorithm requires two values.
The first one is the radius (r) a integer value.
The second one is the magnification which can be a negative or positive floating point value.
Both are required.
The "color_mask=" works a little different here.
It will mask all pixels outside the lens.


© RJHM van den Bergh/comweb.nl, All Rights Reserved, rvdb@comweb.nl, http://www.comweb.nl