December 01, 2010

Picture Canvas

The Picture Canvas knows about the following artifact in space:
  • Digital Camera: A digital camera that has the functionality of capturing and storing pictures. In my example, the camera also has integrated wi-fi (through an eye-fi card) and is connected to all other digital devices in the homespace. So i can transfer images in between.
  • Vertical Surface: A large vertical surface is used for displaying pictures and lets people interact using touch.
  • Digital Picture Frame: A digital picture Frame is also connected to all other devices (via usb to the main Machine). It simply displays pictures.
Scenario:
  • Approach: When a person enters the room with his digital camera, a subtle Icon of the camera follows him on the border of the screen, indicating that it is connected. While moving closer, the icon reveals the latest pictures taken with the camera as a stack below the icon. When he stands close to the screen, the pictures arrange like a fly around the camera.
  • PictureBrowsing: By tilting the camera to the left or right, you can navigate back and forth through the pictures. When standing close, the fly rotates and when standing further away, the stack reorders itself accordingly.
  • Transfering Pictures: The application offers several ways of transferring pictures from the camera to the screen depending on distance and orientation. When standing close to the screen, one can use touch and drag images out of it to copy them on the screen canvas. Using the camera to touch the display drops the front image directly onto the canvas on the screen. While standing in front of the screen, but too far away to reach it, the stack of images is also projected into the center of the screen depending on the exact position of the camera. now a person can perform a short acceleration towards the screen to pin the front Image to its Canvas. This is comparable to a throw-gesture. Also it is possible to transfer Images to the digital picture frame in several ways. First the person can just touch the picture frame with the camera to transfer the latest image to it and it will instantly be displayed in the frame. Again using the throw gesture transfers an Image from a distance. To distinguish between a throw gesture towards the large display and the picture frame, we determinate the attention towards an object by considering the position of the persons head and the camera. The currently attended screen has a light border around it. On the border of the large vertical surface we display an icon of the picture frame that is oriented towards the location of the picture frame in the room. It acts as a "tunnel" which means that you can drag images from the screen canvas onto the icon and it will be displayed on the picture frame.
  • Ambient Visualization: Once pictures are transferred onto the displays canvas, people can drag them around and change their visual order (z-index). When sitting down on the couch in front of the display, a slide show plays images according to the visual order on the screen and restores their original position on the canvas when moving towards the screen again.
  • Shooting Pictures: I want to note that at any time it it possible to take pictures with the camera and they will instantly appear in the current visualization.
Implementation challenges:
  • Transfer of images: the camera loads all images into a specified folder on the main Machine that runs the large display. So the application itself only hast to watch the folder. 
  • Fan visualization: The dynamic visualization of a fan around an icon that animates along the edges was quite a challenge. After several approaches using circles with that have the images distributed along its path, but ran into issues of alignment of images to the border. So we now create an arch segment after placing the largest and the smallest Image on the border of the screen and then distribute the images in between.
  • This figure illustrates how the items on the fan are arranged along a path segment in between the largest and smallest item. Here it is placed on the left border of the display, which was the tricky part