Introduction
One of the coolest things I ever built at Fooala was visual menus.
Our motivation for building visual menus was to provide more restaurant content quickly. Entering menus is tedious, and we felt it was only beneficial if the restaurant happened to also accept online orders through our platform. With visual menus, we simply have to scan, straighten, crop, and then upload the image.
In addition, diners looking to find a restaurant can quickly scan through visual menus. Not only do they get to see what food is served, but they also get a feel for the gestalt of the restaurant based on the menu's design.
Technology
I wanted to do something more than simply scanning in an image of the menu. Luckily, Microsoft released a javascript library of their deep zoom imaging technology, Seadragon. All I needed to do was create image tiles at various zoom levels.
First, I had to figure out how to upload the high resolution images. Since the image files are at 600DPI, the resulting files sizes are sometimes 100MB+. I used the s3-swf-upload-plugin by GreenAsJade. The plugin uses a Flash widget to upload directly to S3 from the client's browser instead of via the application server like thoughtbot's Paperclip. (Since building visual tools, an improved s3-swf-upload-plugin is available from nathancolgate.)
Once the high resolution image is uploaded, a delayed job is spawned that slices the image into image tiles at various zoom levels. The script is largely based on a script from the openzoom project. I modified the script to also apply a watermark.
The resulting image tiles are stored on S3 and served through their content distribution network, Cloudfront.
A collection of deep zoom images defines a visual menu. Each deep zoom image tries to capture what it is like opening the menu one page at a time. The user interface I built, has a thumbnail carousel that allows for easy switching between deep zoom images. The widget is then served through an iFrame on our publisher widget.