Ajax mosaic builder

To demonsterate what you can do with the BinFileReader that I have posted at https://nagoon97.wordpress.com/2008/04/06/reading-binary-files-using-ajax/, I’ve written a mosaic builder.

The function will load multiple images as a color pallet using BinFileReader and then arranged them in such an order that those images would look like one of the images in the pallet.

And you can also click on one of the small images to rearrange the images to build that image.

The demo is available at http://www.heypage.com/nagoon97/BinFileReader/MosaicBuilder_demo.html

It may take a while to load all the image files because the hosting server is quote slow, please be patient.

You can see the image loading progress on the title bar on FireFox but I found that IE won’t even update the title bar before making an ajax request.

And I’d like to mention that this was written entirely in Javascript/VBScript, no server-side techologies what-so-ever. (VBScript for IE support)

To try this on your own server, you just need to download BinFileReader.js, MosaicBuilder.js, the HTML file and the image files.

And you can use the mosaic builder in the following manner.

var demo = MosaicBuilder(Prefix_used_for_the_filenames_of_the_images, number_of_the_image_files);
demo.buildMosaic(image_file_name);

Example:

var demo = new MosaicBuilder("60x45", 23);
demo.buildMosaic("60x45 (0).bmp");

Please note that since the function was written just to show what can done with BinFileReader, the code was not optimized.
If you wish to increase the speed, you may want to sort the pallet and then implement a better search algorithm when it looks for an image with the closest brightness.

And if you wish to run this script with your own set of images, please make sure all the images are
(1) 24 bits per pixel, uncompressed BMP files
(2) gray scaled
(3) small