PongGal Ver 1.1 Updated 20240423

To see it work at all here, you'll have to click the STEP button till it's fetched each of the 10 images in this demo. Then RUN, PONG, etc will work.

Bugfix: Ver 1.1. Fixed bug that worked with older browers, but not newer.

For these types of image sequences, there's a need to be able to very easily animate ranges within the sequence, going forward or back, looping (skip back to start) or 'ping-pong' shuttling back and forth in the selected range.

This Gallery Player is intended for use where all the image files are local. It does no prefetching of images. For one thing, because often in medical image stacks there are hundreds of fairly large images, and prefetching just isn't going to help. This demo on the web really isn't going to work well, so I've set it to only fetch 10 images. Better to try it with the 79-image demo zipped image stack on your PC. (Which is a truncated and cropped subset of a 379 image stack, in which the images are about 500K each.)

The files this reads must all be in one folder, and have names containing a sequential numeric field. Like "file024" for instance. The numbers can have leading zeros with a fixed number of digits, or be normal (no leading zeros.) I always number such files with a fixed number of digits and leading zeros, so they sort sensibly in directory listings.

The /buttons folder also contains a button and helpfile.
Also a icon, useful for hotlinking in pages to jump to another page with an animation.

Distribution

Yes, I know the Javascript coding style is primitive, no need to tell me this. It's been a long, long time since I wrote any code.

Controls

PONG/LOOP This sets the repeat mode. In LOOP the display jumps back to the other end of the series when it reaches either end. In PONG it shuttles back and forth between the selected end points.

REVR is 'Reverse direction'. This only makes sense in LOOP mode, so it's grayed out in PONG mode. It allows the image stack to be displayed in forward or reverse order.

STEP allows manual incrementing of the image number when stopped. It works in PONG and LOOP, and goes in the direction set via REVR. Note that RUN-PONG mode has its own direction flag, and doesn't alter the 'manual' one. STEP doesn't make sense in RUN mode, so it's grayed out.

FIRST and LAST are available while in STOP, allow resetting of the selection endpoints to the lower and upper bounds of the image set, as displayed in the left and right numeric fields. They also set the current image index to the low or high bound, and the scan direction away from the set end.

SLOW and FAST are present during RUN mode. Mouse clicks on these alter the rate of image incrementing, by about 20% with each click. There's no precise speed control, you just click them enough to get about the speed you want. The speed setting is retained during STOP.

1

23

50

The three numeric fields are: Play selection low endpoint, current image #, and play selection high endpoint.
Clicking on the left and right fields at any time sets that field to the current image index (center field), even in RUN mode. Since the center field can be altered with the RUN, REVR, STEP, FIRST and LAST buttons, this allows the endpoints to be set easily enough too, without requiring a numeric entry. (Might add that later.)

If you make the endoints equal, obviously there's nothing to animate, and RUN will drop back to STOP.
If there are only two images selected, it serves as a blink comparator. The rate is variable too.
The code sets hard limits on the image shuffling rate of 10 mSec to 1 Sec between image changes.

Tools used for this project

• EditPad 3.4.0.
  An old, no frills plain text editor. I prefer simplicity over complexity.
• Renamer http://www.1-4a.com/rename
  With Windows set up for this in the Explorer right click Send To list for folders.
• IrfanView http://www.irfanview.com/
  Hugely useful for image rescale, crop, conversion, etc in batch operation.
• Photoshop ver 5.5.
  I have a more recent version but find for simple stuff good old 5.5 just works better and faster.
• http://www.w3schools.com/js/ — Javascript tutorial.
  http://www.w3schools.com/jsref/ — Javascript reference.
  I like the way they implemented 'try it yourself' examples.

ToDo List

• Image index scrolling with mouse wheel in Stop mode.
• A way to include multiple instances of image sequences and their controls, on one html page. With just one playable at a time.
• Numeric entry on the limits and image index fields. Without cluttering the running display.
• Ability to set (and see) precise frame rates.
• Frame rate control via mouse wheel in Run mode.
• Option to work as a more traditional gallery player, ie un-numbered filenames, and just pointing it at a folder of images.
  This implies slower refresh rates, pre-caching of images, keeping an array of image names, etc.

I Have Questions