PhotoAlbum

PhotoAlbum is a Java(tm) applet that is used for displaying images with nice transition
effects.

These are some of the features:
If you have knowledge in the Java programming language, you can easily extend
PhotoAlbum with your own transition effects and user interfaces
- The images and transition effect files are not downloaded until they are needed,
resulting in a quick start of the applet
- The standard user interface has a pause/play button
- The main color and width of the standard user interface can be specified by the user, and the
shadowing effects will be automatically created to match the specified color


1.1 *** HOW TO INSTALL A GENERAL APPLET INTO A HOMEPAGE ***

When inserting a Java applet into a HTML-file, the <APPLET> tag is used. Here is how it
might look for a general applet:

<APPLET  CODE="appletfile.class" WIDTH=400 HEIGHT=300>
<PARAM name="parameter1" value="value1">
<PARAM name="parameter2" value="value2">
</APPLET>


The CODE parameter specifies the filename of the main applet file. In this case the main
applet file has the name "appletfile.class"

WIDTH and HEIGHT specifies the area the applet will occupy on the HomePage.

The parameters following the first line are used by the applet and their names and values
depends on the applet you are using.

The last line ends the <APPLET> tag.
******************************************************************************************************************************
Note: You do not need to upload the *.java files, (included in this .zip file), to your web server. The applet will work perfectly well without them. These files, (usually known as source), are only for those interested in creating their own User interfaces and custom transitions. If this doesn't apply to you, just ignore the *.java files.
**********************************************************

1.2 *** HOW TO INSTALL AND CONFIGURE THE PhotoAlbum APPLET ***

<applet CODE="photoalbum.class" WIDTH="330" HEIGHT="258" align="center">
<param name="userinterface" value="standardui">
<param name="standardui.maincolor" value="3080C0">
<param name="standardui.usepausebutton" value="no">
<param name="standardui.width" value="22">
<param name="transtime" value="8000">
<param name="timeout" value="120000">
<param name="pause" value="7000">
<param name="minframenr" value="150">
<param name="bgcolor" value="000000">
<param name="fxmod0" value="burnfxmod">
<param name="fxmod1" value="hbombfxmod">
<param name="fxmod2" value="pixel3fxmod">
<param name="fxmod3" value="fadefxmod">
<param name="fxmod4" value="pixel2fxmod">
<param name="fxmod5" value="pixelfxmod">
<param name="fxmod6" value="slidefxmod">
<param name="fxmod7" value="rotatefxmod">
<param name="fxmod8" value="shatterfxmod">
<param name="image0" value="welcome.jpg">
<param name="image1" value="tropicsun.jpg">
<param name="image2" value="enterprise_2.jpg">
<param name="image3" value="dalek.jpg">
<param name="image4" value="g_tropicsun.jpg">
<param name="image5" value="mystic.jpg">
<param name="image6" value="cybercity.jpg">
<param name="image7" value="enterprise_1.jpg">
<param name="image8" value="cyberchess.jpg">
</applet>


NOTE: The WIDTH should be at least 90 and the HEIGHT at least 65 or the applet won't work
properly.

A list of the possible PhotoAlbum specific parameters, along with a description of the
values they can have and what effect they will have on the applet follows:


>> userinterface <<
The userinterface parameter should most likely be "standardui". If you have made or found
a user interface plugin for PhotoAlbum, then this value should be the name of this plugin
file, (.class excluded). You can read more about the standardui user interface in section
1.3.

>> standardui.maincolor <<
see section 1.3

>> standardui.usepausebutton <<
see section 1.3

>>standardui.width<<
see section 1.3

>> transtime <<
With this parameter, you can specify the duration time of each transition. It should
be specified in milliseconds. If you for example want a duration of 8 seconds for
each transition, then a value of 8000 (milliseconds) should be used.

>> timeout <<
Specifies in milliseconds how long a pause should be.

>> minframenr <<
If the applet is used on a slow computer, it might happen that only a few frames will
have time to be shown during the specified transition time. You can use this parameter
to specify a minimum number of frames each transition should have. If the computer is
too slow to show this number of frames, the "transtime" value will be overridden so that
the transition time will be long enough to display approximately "minframenr" of frames.

>> bgcolor <<
This parameter specifies the color that will be shown on the image display before the
first image has been rendered. Some transitions will also use this parameter. Use the
same RRGGBB format as for the "standardui.maincolor" parameter

>> fxmodxx <<
Specifies the transition effects that will be used. The value of fxmod0 will be the
effect that will be used first, fxmod1 the effect that will be used next and so on...
The standard effects available are "burnfxmod", "pixelfxmod", "pixel2fxmod", "pixel3fxmod",
"hbombfxmod", "fadefxmod", "slidefxmod", "shatterfxmod" and "rotatefxmod".

>> imagexx <<
The images that will be shown. image0 will be shown first, image1 next and so on...
NOTE 1: JPEG images created with PhotoShop 4.0 isn't compatible with Java 1.0 so try
to avoid them.
NOTE 2. The images will be centered on the display area. They will not be resized, and
if they are too large they will be cropped.

1.3 THE STANDARDUI USERINTERFACE

The default userinterface in PhotoAlbum is "standardui".
It uses three parameters in the HTML-file:

>> standardui.maincolor <<
This parameter is specific for the standardui user interface. It specifies the main color
of the border surrounding the image display area. You should use a RRGGBB syntax, where
RR is the hexadecimal value of the Red component and so on...
A value of 800000 would for example result in a red color, and 008000 a green color.
Setting the color value to that of the page background will, of course, make the
border transparent.

>> standardui.usepausebutton <<
Set the value to "yes" of you want a pause/continue button, else set to false.
You can click on the images displayed if you want to jump to the next image (or rather
transition to next image).
Clicking on a transition will make the applet skip the rest of the transition and jump
directly to the next image.

>>standardui.width<<
The width of the colored border that surrounds the images, in pixels.
Minimum value is "0". Once you have established the width of the border
the next step is to select and/or adjust image and overall applet size to suite.


2.1 ***How to create you own transition effects for photoalbum ***

To create you own userinterface class, you will need to subclass "fxmod.class". fxmod
has two methods that you must override:

>> public void init()

This method is called when the transition effect is first loaded, so it would be
appropriate to prepare the effects in this method.

>> public Image render(double animFrac);

This one is called with a double value between 0 and 1, which specifies how far the
transition has advanced. In this method you should create an "Image" that corresponds
to how far the transition has advanced, and then return that Image.

There are also some variables that you will have access. (Methods should have been
used to access these variables to make it look good, but it saves some space to use
variables instead) The following variables are available:

width: The width of the image display (the Image you return should also have
this width)
height: The height of the image display (the Image you return should also have
this height)
startImage: The last Image shown (before this transition)
endImage: The image that should be shown when this transition is finished.
bgColor: The bgcolor specified in the bgcolor parameter.
parent: The main applet. Could be of use when you want to use for example
getParameter(String parameter) and createImage(width, height)


Here is a commented example of how it might look. This example is fully working so you can
compile it and use it if you want to. It works by sliding the endImage down over
the startImage until only the endImage is shown.
----------------------------------- Start Source --------------------------------------
import java.awt.*;
import java.awt.image.*;

class slidefxmod extends fxmod {
// The Image that will be returned
Image targetImg;
// The Graphics of the targetImg. Needed to be able to draw on targetImg.    
Graphics targetImgG;

public Image render(double animFrac) {
  // Draw startImage on targetImg
targetImgG.drawImage(startImage,0,0,parent);
// Draw endImage at at a position depending on the advance of the transition
targetImgG.drawImage(endImage,0,(int)((animFrac-1)*height),parent);
// targetImg is ready, so return it
return targetImg;
}

public void init() {
    // Create targetImg
targetImg = parent.createImage(width, height);
// Get the Graphics of targetImg
targetImgG = targetImg.getGraphics();
}
}
------------------------------------ End Source ---------------------------------------

2.2 *** How to create you own user interface ***

To create you own userinterface class you will need to subclass "standardui.class".

These methods are available and should be overridden:

>> public void setData(int width, int height, photoalbum parent)

Set up your user interface in this method. The arguments are the width, height and parent
applet.

>> public Insets getInsets()

Return the insets for the display area in this method.

>> public void handleEvent(Event ev)

Handle the user interactions in this method. All events in the main applet are sent to
this method.
An event with id==2 will also be sent to this method when a pause has timed out.

You can also use the method "setPaused(boolean state)" in the main applet if you want to
pause the applet. state=true will pause the applet, and state=false will make the applet
continue.