Drawing Something Together
I’ve been working on a cool little project over the last few weeks. The original idea was inspired by the amazing laser-pointer graffiti these guys did, but I wanted to provide more of a collaborative, distributed angle. I wanted to let anyone see a live feed of a real physical wall, and be able to draw on that wall in their browser and have their doodling reflected in the real world.
So I came up with this:
Digital Wall Architecture Diagram - not to scale
I’ll touch on each of the architecture points in turn.
Application Layer
At core the wall relies on a WPF application which is reponsible for actually drawing the current digital wall image on the physical wall using a projector. I used an InkCanvas control to display any drawing data that is ‘current’ (meaning it hasn’t been wiped off the wall yet). The drawing data for the control can be created remotely in Silverlight or directly at the machine using a Wii remote, using Brian Peek’s Managed Library for Nintendo’s Wiimote.
The drawing data is stored in a SQL database, which has a single table Drawings. Each row in that table is a single ’stroke’, in the sense of what you draw between pressing the left mouse button down and lifting it up again on the canvas. Any drawings stored in the table are swept up by the WPF application, added to the InkCanvas’ strokes collection, and then the whole canvas is captured to an image. That image is then applied to the application background and the InkCanvas’ strokes collection is cleared out. Using this technique I was able to get some performance improvements out of the application because keeping loads of Stroke objects in memory was way to intensive.
The application is also encoding a webcam stream of the physical wall, so that anyone connecting in their browser can see actual footage of the wall. I could have just downloaded the drawing data directly to Silverlight and rendered them in the browser using the same method as the WPF application, but I wanted to give remote users a real sense that they’re changing a physical environment. We’re using Windows Media Encoder to encode the stream and a service called Stream Web Town to make the stream available for broadcast. SWT provide a free streaming service which is limited in a couple of ways but dead useful to get a simple proof of concept up and running.
Finally the app is screen capturing the current wall every minute or so and saving out to a predefined network location, so we can see a complete history of what gets drawn. This is essential because currently the wall erases itself every 10 minutes, so it’s the only way people would be able to see what they’ve drawn.
The Browser
The Silverlight application is doing three things. First, the webcam feed is being streamed to the background of the canvas, so a user can see exactly what’s already on the wall. Second, another InkCanvas control allows the user to draw directly on the canvas. Third, when you’re ready the Silverlight app will send the drawing data to the database for the WPF app to pick up.
The communication layer was written in WCF and basically consists of a single method AddGeometry(), which requires some simple data like IP, colour and the actual data, which is just a list of points serialised to comma delimited values. The website that the Silverlight application available at is also hosting the WCF service. It also provides an RSS feed of all the screen grabs saved from the WPF app.
Cool so that’s a brief explanation of what I’ve built, I’ll try to get some more information up at some point, and more pictures and video too.
