September 2007 - Bespoke user interface & multi-format layered playback
Motion Tracked Playback


RenderHeads were hired to create software which would allow designers to create unique interactive installations, seamlessly combining different content types and input methods to produce a rich user experience.

The application is designed to display specially authored 'stories' which play as the user pushes a mounted display along a horizontal track. The application uses a rotary encoder to detect the position of the display and update the story accordingly. Each story is made up of various types of media, including: animations, videos, images and sounds which are all layered and composited together to form the final result. Usually the background layer contains thousands of pre-rendered images which are cycled through as the display moves, while foreground layers contain video and interactive Flash content which can optionally have on and off-screen transitions. Certain places in the story are set up as 'hotspots', where the user can stop and interact via the touchscreen display.

All the hardware and media were provided by the client; it was our job to support the required media types and make it all play back as smoothly as possible.

One of the biggest technical challenges was creating a system to handle the thousands of high resolution images which are used for the main background layer. This was the first area we tackled, performing extensive investigation into image compression and streaming techniques to make sure we could achieve the best results possible. The final solution enabled image playback at over 60 frames per second.

The secondary challenge was allowing our client, who use a set of Apple and Adobe creative tools, to incorporate their art assets directly into the playback system. This meant supporting the playback of Flash animations and videos, and QuickTime multimedia within a layered, depth-ordered environment.

Besides the main playback system we also authored various tools for processing images and maintaining the track hardware:

Image Compression Tool
RenderHeads developed a back-end image compression tool which allowed the client to compress their images into a custom format designed for rapid decompression. Using this format results in the application being able to access and decode the images much quicker, providing smoother animation and thus a better user experience.

Serial Port Utility
All communication with the track takes place via the serial port. As the serial port interface was new to us, we first implemented the serial port communications into a small standalone application. This allowed us to test and debug in isolation from the main application, and later on to tweak and refine - for example to add smoothing. This utility turned out to be so useful it was maintained and given to the client.

The motion tracked playback system is being used at various trade shows and exhibitions in 2007 and 2008, including: The International Petroleum Technology Conference in Dubai and World Energy Congress in Rome.

Technical Details
The display is a 42" plasma touchscreen, mounted in portrait mode and running at a native resolution of 1366x768. To handle the portrait orientation, our software can also optionally rotate the display (and all the inputs) itself at the render stage.

The main application, tools and test applications were all written in C# using the .NET framework. We once again developed the graphics rendering engine using the XNA framework. We used the QuickTime SDK for all video playback and processing. The client used a Motion Mind control board to track the display position, which we communicated with via an RS232 interface.

The software was prototyped, designed, and written in four weeks. All work was completed remotely, with the client delivering a test rig for us to develop on. Retrospectiva was used internally and by the client for issue tracking and reporting.

Images

At work on the test rig 

The test rig 

Exhibition build created by our client 

Media courtesy of:
Imagination

« Back to Portfolio

RSS Icon