Making-Of: Fortune Table

Today, the German design magazine WEAVE features a short article on the Fortune Table. That’s reason enough to write a blog post explaining some basics on how we created the multitouch project portfolio.

Idea & Concept

“Fortune Table” is a project portfolio based on a combination of a multitouch table and interactive tarot cards. Each card represents one person and can be placed on the surface of the table. Virtual cards magically appear underneath the real card, each displaying a project made by that person. A card can hold a short description as well as photos and movie clips. It can be scaled, rotated and panned. The metaphor of playing cards is widely known and therefore an intuitive way to interact with the multitouch portfolio.

The project was first shown in early 2013 at an exhibition created by students of the master’s program “Communication, Media & Interaction Design” at FH Joanneum in Graz, Austria. The exhibition followed a circus theme – that’s where the  fortune-teller and tarot card metaphor comes from.

Visitors enjoy the intuitive user interface

Hardware

Fortune Table is based on the Samsung SUR-40 multitouch table with Micorsoft PixelSense technology. In contrast to other FTIR multitouch tables, the SUR-40 table does not include a camera system. Instead it uses sensors embedded into the LED glass panel to track contacts (finger/blob/tag/object) on the surface. The table is 42″ wide and features a Full-HD screen as well as a quad-core Intel processor.

Software

On the software side Fortune Table is based on a combination of various technologies. We used an app called Surface2TUIO to do some low-level stuff like recognizing the Microsoft touch events as well as the Microsoft byte tags and translating both into TUIO events via OCS. The Fortune Table app itself is an Adobe Air application written in ActionScript3 using the TUIO AS3 library. Since the app was supposed to display projects from a variety of people, we needed some kind of CMS system to enable everyone to submit their data. We did this by asking everyone to upload their files (text, images, videos etc) to a Dropbox folder. Then we wrote a PHP parser that indexes all files and creates one structured XML. When the Fortune Table app is started, the app loads all the neccessary files from an external folder according to the XML and creates all virtual project cards (based on a general template) with the corresponding content. Whenever a tarot card is placed on the table, the app recognizes the tag ID and displays these project cards underneath the real card. User’s then can interact with the virtual tarot cards.

Tarot Cards

The tarot cards are simple paper cards with a Microsoft byte tag on the back. We found that non-coated 300g paper works best in terms of speed and stability of the tag recognition. Each person received a set of personalized cards with a unique tag, their picture and contact data. Thus the tarot cards couldn’t only be used to interact with the Fortune Table but also handed out like regular business cards.

Curstom tarot/business cards with optical code

Creators of the Fortune Table: Mac Krebernik, Alex Maier, Daniela Graf and me.

    Jürgen Röhm

    I'm a UX Freelancer from Munich with over 10 years of experience in designing digital products and services.

    About