• characterized download performance with image handlers
• self-starting slide show with automatic low-bandwidth mode
• mouse activity tracking for staggered slide show interrupt
• punctuation pacing pause in text parsing/display engine
• PHP code supplies browser-dependent compressed files

overview

Update: 2001-12-02 The code and table layouts have been updated to improve both download and rendering performance. The code will now shift into a low-bandwidth mode when a slow connection is detected. At present this is just a ball-park estimate of the actual bandwidth based upon the number of iterations run by a counter in the time taken to complete the download of all thumbnail images. If a particular threshold is met, the software stops the pre-cache cycle and it switches the play-mode to single frame (you press the green play button to view the next slide.) As the normal images are no longer pre-cached, the slide show interval timers are offset until such time as the next image download is complete. Otherwise the system should operates as before. You can in fact choose to re-select the all pages play mode; the slide show will simply take a little longer to run each page (until all the images are stored in cache locally.) The HTML is now stored in a couple of compressed flavours; PHP code decides whether or not the client can handle compressed HTML and compressed JavaScript files or archives and sends the appropriate version.

Original text continues...
The gallery software is composed of two distinct sections: a slide show engine for managing the display of the photographs and a virtual LCD panel engine. This panel engine implements a basic text display tool using images to represent the various 5x7 font glyphs (like those that appear on the alphanumeric LCD panels used in some cell phones and pagers.)

The gallery relies on 3 image sizes for display of the photographs: a small thumbnail which appears in thumbnail area of the display, on the left; a normal image which is displayed on the right either by the slide show engine or when the user selects one of the thumbnail images; an enlargement image which opens in a reusable window (which will float to the top when reloaded.) Due to space limitations I currently include only a sample of the enlargements; the magnifying glass icon on the LCD panel is ghosted or greyed out where an enlargement is not available. Otherwise selecting this icon will display the enlargement for the selected photograph.

The virtual LCD panel is used to display text messages. During the initial loading of a gallery page the panel will respond to image onLoad events to provide status on download progress (the thumbnail and normal images are preloaded before the slide show starts.) Once the preloading is complete the LCD panel can display photograph data (shutter speed, aperture etc.) at high speed or arbitrary text commentary which is "typed" in real-time on the panel. At "normal" typing speed punctuation in the text strings is interpreted: a brief pause at commas; a longer pause for periods etc. Both of these text modes rely on simple JavaScript text strings that are stored in separate files (one per gallery page) which also contain the stubs for the photograph filenames allowing for automation of the image management.

Finally the slide show engine monitors the mouse and interrupts all activity if there is any movement. This is done to allow the user time to reach some button or link on the gallery page before the slide show engine moves on to the next image or section. The engine notes where in the between-slide pause the interrupt occured so that it can continue more or less seemlessly if the mouse event does not result in a link activation. I.e. if the user moves the mouse early in the slide pause then most of the pause remains to be run while if the movement occurs at last possible moment in the pause only a short period of time is left once the slide show resumes.

JavaScript source: click here to have a look at the
source code for this version of the LCD text panel.