How We Created Product Catalog Image Clouds

Posted on September 22, 2007


When we introduced our highly interactive online product catalog image clouds, many people liked the concept and asked how we did it. So, I am taking time to explain how we are able to do this. While creating image clouds itself is not quite involved, creating the image clouds of product catalogs from Amazon ECS is a bit more involved. So, it’s in this context, I would explain how this is done.

There are 5 stages in creating these product catalogs.

Fetch Product Data Using Amazon’s ECS Web Service, and using Perl, the product information of various product categories are fetched. This is implemented using perl. The product data is available as an XML response which is parsed and captured as perl data structure. This part of the program is a standalone module that can be used for other concepts around Amazon ECS.

Fetch The Product Images From the image information within the product data, an image for each product is fetched and staged. This is again implemented in perl making use of wget. Sometimes, but rarely, amazon’s image cache servers don’t respond and so the process gets stuck. So, we use wget’s timeout parameter to timeout beyond 10 seconds. This helps most of the time as it happens only for a couple of images occasionally. There are times when the server is completely down. In this case, we simply change the ec1 to ec2 in the url and then use their other server. Some of this at present is a manual process, and we need to find a way to completely automate the process inspite of such a hiccup from the server.

Generate Image Cloud Data The Image Cloud program itself is written to be generic, so that we could also do such things as 2008 cars image clouds. Hence, in this step, the product information available as xml documents is converted into a data format that the Image Cloud program can understand. At this time the Image Cloud is not completely generic, it has some knowledge of list price, sales price and such details to change the color of the border of each image in the cloud. With more object orientation, it should be possible to make it more generic. This is also implemented in Perl.

Generate Image Cloud This is the step which actually takes the data which contains the image urls, and the cloud weights that are used in generating the image cloud. The program is written in Java, but in a script format (BeanShell). The reason for choosing Java is since I am already familiar with javax.imageio.* and Java AWT/Swing to do image processing. The reason for using BeanShell instead of just Java is well, it offers rapid development which is very desirable especially when working on new ideas that have never been there before to go with an existing algorithm/code/pseudo-code. Anyway, we first find the min and max values, then determine the layout of the cloud based on the image size of each image adjusted to the cloud weight and then finally render the image. And while rendering the image, since the coordinates of each image is available, the HTML fragment for image maps is also generated.

Generate HTML Once the gif is ready and the image map fragment is ready, now it’s time to generate the complete html file with menus and whatever the page should look like. So, this step is the final step that does this. This is again done in Perl. To provide the onmouseover effect for the image cloud, we use JavaScript. The image map generated in the previous step generates the html with onmouseover event passing a unique id of each of the image. In case of cloudstore, it happens to be Amazon product’s ASIN. When generating the HTML, the product details are aslo generated as hidden div elements which show up through the onmouseover event handler.

That’s pretty much it!

Posted in: image clouds