Boom amazing in action at JSConf.EU

Last weekend at JSConf.EU I gave another talk on CouchDB and CouchApps. This gave me an excellent excuse to hack on boom amazing instead of preparing my talk. Boom amazing is my personal presentation tool. Instead of slides my presentation is laid out on a single large surface and I can pan around, zoom in and out and rotate my viewpoint to show specific contents.

In the end I managed to add a bunch of new features and still get my talk done. The following post explains how boom amazing works and how you can create your own fancy presentations with it.

What is behind it?

Boom amazing consists of a few relatively simple building blocks:

• One or more SVG files that contain all the texts and graphics
• a CouchApp that includes some HTML and CSS, and JavaScript
• some client side JavaScript to handle manipulating SVG and moving around (using JQuery and the jQuery SVG plugin)
• CouchDB: stores all the data: the presentation itself (as document attachments), the CouchApp and all the camera positions and data for replaying presentations
• A browser that displays the SVG file, I use PlainView which has a fullscreen mode.

Generating SVGs on OSX…

… pretty much sucks. I’ve tried a few tools already but still haven’t found anything that is simple and stable. I first tried Adobe Illustrator which can export to SVG, but first of all it’s slow, it sometimes crashes and I’m not willing to pay that much money just for drawing a few circles and write some text.

My current setup consists of Vector Designer for drawing and Scribus for converting to SVG. While I do like working in Vector Designer very much it doesn’t have an SVG exporter, it limits the maximum zoom and it has problems with the kerning when I set the font size below a certain level. I might be able to work around the zoom and kerning problems by simply using larger page sizes (this time I used 2×2 meters). I then export my drawing to the EPS format which works okay, except that the day before the conference Vector Designer suddenly created file sizes of 115MB instead of a few hundred KB like before. Which brings me to Scribus. It’s an open source vector drawing app with a truly ugly user interface, but it can import EPS and export SVG. At least sometimes. For me it worked in ~40% of the cases. Everything else was crashes, unknown import errors and missing data.

There’s a command line tool called pdf2svg (which you can install using MacPorts) which I also tried, but the resulting SVGs are much larger than what Scribus creates and the browser refused to display them.

There is hope though, a one man company called Bohemian Coding is working on a vector tool called Sketch and their previous apps look really slick.

If you’re not on OSX or can tolerate working with X11 apps there’s also Inkscape which has built-in SVG support.

Using it

In order to use boom amazing all you have to do is download it and push it into CouchDB.

git clone git://github.com/langalex/boom_amazing.git
cd boom_amazing
curl -X PUT http://localhost:5984/boom_amazing
couchapp push boom_amazing

After that go to futon and upload your SVG file into any document in the boom_amazing database. Then you go to http://localhost:5984/boom_amazing/_design/boom_amazing/index.html. When you move your mouse to the top a toolbar appears where you can select your presentation from the dropdown. Once the file has loaded you can:

• pan around by click & dragging the mouse
• zoom by pressing & holding [alt] and moving the mouse up and down
• rotate by holding down [ctrl] and moving the mouse left and right

Whenever you like a position you can save that by clicking the save button in the toolbar. After you have recorded all positions you can then jump back and forth between them with the Previous and Next buttons or by pressing [b] and [space] – which is what I do when presenting.

Hacking

If you are interested in extending the app here are the basics of how it works:

In _attachments/javascripts/app.js you find a small sammy application which controls all the actions like loading and saving data. Sammy maps the hash part of the URL to different actions, so when a link points to e.g. #/slides/23 sammy will automatically call the code to load slide (slide refers to a saved position) 23.

screen.js includes all the logic that handles mouse and keyboard events to move around. It also does all the computations for things like smooth transitions between positions and rotating around the center of the screen instead of just (0, 0).

The way this all works is that the jQuery SVG plugin loads the file and turns everything into DOM nodes. The application then takes all the nodes and puts them into a single group node. A group node can have an attribute transforms which expects a rotate, scale and translate parameter – the rest is up to the browser.

Conclusion

The feedback I have been getting for the talks where I have used boom amazing has been great so I am going to continue to use and extend it. Right now performance with larger SVGs is an issue but I don’t have any ideas wether I can do anything about it – except for buying faster laptops. There are also still a bunch of basic features missing, like editing or removing saved positions, or reordering.

I would love to see other people to pick up boom amazing and use it for their presentations. It certainly is more work than putting together a bunch of slides but then again I think it is worth the effort, and the results easily make any fancy Keynote presentation look like 1990.

Tags: couchapp, couchdb, jsconf, presentation, svg

This entry was posted on Friday, November 13th, 2009 at 15:44 by Alexander Lang. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.