Archive for March, 2009

File uploads… Flash or Silverlight?

It has been a while, but recently I had to look into Flash again. I was happy to find out Adobe has done some effort to allow the Flash developer to access the local filesystem. This is very useful to implement a file upload (see this example).

In previous versions of Flash, the file upload was about the only thing one could do with local files. Due to security reasons, only Adobe Air (the desktop variant) applications where allowed to read the bytes of a local file. But all this changed quite recently, because in Flash 10 you can finally read a file into a ByteArray and interpret the bytes. This is really cool stuff and will certainly inspire a lot of programmers/designers to come up with innovative applications.

The reason I was excited about it was that I needed an uploader that allows to upload large – like in several gigabytes – files. I thought it would be possible to just read in part of the file and upload that part to the server, and then send the next part. Or send some parts in parallel to speed things up. I already found a nice example online: uploads files in chunks to a server. It needs some modification to work with the new security constraints of Flash 10 (all loader.load calls should go in one function and they should be initiated by a user interaction) but it illustrates splitting a file in chunks very well.

But I hit the wall when looking for a way to load only part of a local file into a ByteArray. As my files will be several gigabytes large, it is impossible to load them entirely into the memory, so I need something to read a part of the file. After some digging around it appears that the Adobe guys didn’t provide this (yet), so I guess my super-uploader for monstrously large files will have to wait :-s

Ok, maybe I should take a look at Silverlight, the Microsoft guys just released the beta of version 3. It didn’t take too many googles to find the open-source Silverlight File Upload project. This Silverlight uploader is pretty amazing, it splits large files into chunks and uploads them in separate POSTs. Serverside code for the platform is included in the project but not necessary (a basic PHP server side is available on the site as well).

As there is not many information on the project’s site, here is some things I learned about it today:

When you download the project, and open it in Visual Studio, you’ll see three projects. The FileUpload project is the client-side, the other two are necessary for the server side. As I’m not interested in these we’ll delete them and use the php server side. Put the php code in the htdocs folder of your Apache, change the upload.php file to upload the file to an existing folder on your harddrive and run it. The Silverlight client generates a TestPage.html which includes the Silverlight component. Because the component expects some parameters to be passed to it, you’ll have to add a <param> tag to it:

<param name="initParams"
value="id=FileUpload,UploadPage=http://localhost/PhpFileUpload/upload.php,MaxConcurrentUploads=1,Filter=Images  (*.jpg;*.gif)|*.jpg;*.gif|All Files (*.*)|*.*,"/>

Now you can just open TestPage.html in a browser and adore the uploading :).

The component will first send a HTTP GET to your server. The server answers with 0 if the file does not exist yet or with the filesize if it does. If the file already exists, the Silverlight component will show a message box asking the user if she wants to overwrite it.

In a second step the actual upload is performed. This is done with a HTTP POST which contains the filename and some other parameters in the URL and the bytes of the file in the body of the POST request. This is very efficient as no parsing of the request body is necessary to extract any fields like filename etc. as would be necessary if the upload was done with a regular multipart/form-data upload.

It is however more difficult than I was hoping for to let the component work together with my Rails application. If anyone knows a good way to write the entire POST body to a file, let me know in the comments :p

edit: found out how to rewrite the method to support multipart upload.

private void writeStringToStream(string s,Stream stream)
    UTF8Encoding encoding = new UTF8Encoding();
    byte[] z = encoding.GetBytes(s);

    for (int i = 0; i < z.Length; i++)

//this method sends the data.
//changed the original code so the POST is multipart with fields. 
private void WriteCallback(IAsyncResult asynchronousResult)
    HttpWebRequest webrequest = (HttpWebRequest)asynchronousResult.AsyncState;

    webrequest.ContentType = "multipart/form-data; boundary=" + MULTIPART_BOUNDARY;

    // End the operation.
    Stream requestStream = webrequest.EndGetRequestStream(asynchronousResult);

    byte[] buffer = new Byte[4096];
    int bytesRead = 0;
    int tempTotal = 0;

    Stream fileStream = resizeStream != null ? (Stream)resizeStream : File.OpenRead();

    string dataName = File.Name;// +".part" + partCounter;
    long fileLen = File.Length;
    long currentLength = ChunkSize;

    //determine content-range
    long currentIndex = BytesUploaded;
    long chunkLength = (currentIndex + ChunkSize > fileLen) ? fileLen - currentIndex : ChunkSize;

    //datafile[file] field
    string theString = "--" + MULTIPART_BOUNDARY + "\r\n";
    theString += "Content-Disposition: form-data; name=\"datafile[file]\"; filename=\"" + dataName + "\"\r\n";
    theString += "Content-Type: binary/octet-stream\r\n";
    theString += "Content-Range: " + currentIndex + "-" + (currentIndex+chunkLength-1) + "/" + fileLen + "\r\n\r\n";

    fileStream.Position = BytesUploaded;
    while ((bytesRead = fileStream.Read(buffer, 0, buffer.Length)) != 0 && tempTotal + bytesRead < ChunkSize && !cancel)
        requestStream.Write(buffer, 0, bytesRead);
        BytesUploaded += bytesRead;
        tempTotal += bytesRead;
        if (UploadProgressChanged != null)
            int percent = (int)(((double)BytesUploaded / (double)FileLength) * 100);
            UploadProgressChangedEventArgs args = new UploadProgressChangedEventArgs(percent, bytesRead, BytesUploaded, FileLength, file.Name);
                UploadProgressChanged(this, args);

    writeStringToStream("\r\n--" + MULTIPART_BOUNDARY + "--\r\n", requestStream);

    // only close the stream if it came from the file, don't close resizestream so we don't have to resize it over again.
    if (resizeStream == null)
    webrequest.BeginGetResponse(new AsyncCallback(ReadCallback), webrequest);

March 31, 2009 at 9:10 pm Leave a comment

At last! Streetview in Belgium

Seems like Google Street View is coming to Belgium! Cities like Ghent, Brussels and Antwerp will be covered by street view according to news bulletins. But I knew it before that because this weekend we chased the Google Streetview car here in Ghent with our bikes 🙂

March 16, 2009 at 7:12 pm Leave a comment

Real time animation with Animata

I bumped into this cool open source tool Animata a few days ago. It lets you import images, define joints and bones in these images and use this skeleton to animate it. This post is a basic example of what you can do with Animata. As I am totally new to the program I could be doing some things wrong, but I already like the result 🙂

First draw some figure, and make sure the limbs are easy to separate from the body. Take a photo of it or scan it and remove the background in Photoshop or The Gimp. 

Take a photo of your drawing, remove the background in an image editor and save it as a png image

Take a photo of your drawing, remove the background in an image editor and save it as a png image

Save the image in .png format and open Animata. In the first tab you can add your image to the scene. Go to the mesh tab and put a lot of vertices on you image. Click create triangle>triangulate and you should see a lot of triangles between the vertices, click on texturize. Animata will use the vertices to warp the image into some other form (when you’ll move a joint later on).

Animata lets you define a skeleton which is used to animate the image

Animata lets you define a skeleton which is used to animate the image

Now you can define joints and bones in the skeleton tab. You’ll have to attach the vertices to one of the bones. Now you can move the joints and the figure will move along! 

You can create dummy bones the length of which changes periodically to move your figure’s limbs. The video below is a summary of the process (I cut out some parts).

Animata – a first animation from karel braeckman on Vimeo.

The really cool thing about Animata is that you can control the animation from within you own custom application by simply putting some values (x,y coordinates for the joints or the length of the bones) on a local udp port. I already have a Processing example running (by using the commands from so I’ll probably write about it in a next post.. :p

March 12, 2009 at 9:45 pm Leave a comment

Transform your old T-shirts with stencils and textile paint

This post is a bit less technical than the usual, it doesn’t even got anything to do with computers or microcontrollers at all! That’s right, we’re going analog! Our goal is to convert a plain boring T-shirt into an entirely home-crafted design shirt. I did this together with my girlfriend Delphine who’s a whole lot more skilled in this sort of things than I am.

1.       Creating a stencil

The book “Stencil 101” by Ed Roth is a must have when starting out with stencil art. It contains 25 reusable ready made stencils. You can also buy ready-made stencils online (e.g. on


But to gain some real street credibility, you should be making your stencils yourself! The trick is to find some high-contrast photograph of cool stuff, open it in Photoshop and play with the “treshold” value. I made a climber and a Dirty Harry using the pictures below. Make sure there are no isolated white parts in your creation (the white should be in one piece as the black is what you’ll cut out)!

original climber, image taken from

original climber, image taken from



Climber after some basic Photoshopping (treshold + cutout filter for smoother curves)



Original Dirty Harry, image taken from

Original Dirty Harry, image taken from



Dirty Harry stencil

Dirty Harry stencil

Once the stencil image is created, you can print it. Now we’ll have to cut it out in some plastic-like material. We used transparant sheets (like used with an overhead projector), because you can see the printed image very good while cutting.  


Print the stencil and cover it with the transparant sheet. Now you’ll have to cut it out using a knife.

Two stencils with the climber cut out already

Two stencils with the climber cut out already

2.       Put some paint on that T-shirt!

Now we can finally apply our paint to the T-shirt. There are two kinds of textile paint, opaque (gives a more bright color) and non-opaque (more waterpaint-like, blends with the original color of your shirt).


Stamping technique

Stamping technique

 You can apply several layers of paint. When done, carefully remove the plastic stencil..


The moment of truth..

The moment of truth..

 With all the tension building up, and you being solely focussed on your T-shirt, this will probably be the time where your dog will start complaining. Promise him you’ll make him a cool shirt too and keep focussing, because we’re almost done!


“Why play with the paint if you could be playing with me?!”

“Why play with the paint if you could be playing with me?!”


3.       Heat up that iron!

To make sure the paint doesn’t go off after washing it in the machine, you’ll have to fixate it. We ironed the shirt for a couple of minutes, with a cardboard between the front and back of the shirt to protect the back, and a towel on the painted part to protect the iron. 


Fixate the paint by ironing it. But a cardboard and a towel in between to protect your iron from the paint!

Fixate the paint by ironing it. Put a towel in between to protect your iron! You might also want to put something between the front and back of the shirt to protect the back from being painted...


4.       Look flashy!


The end result. Pretty cool ain’t it? :-)

The end result. Pretty cool ain’t it? 🙂


That’s it for this post. If you made some cool stencils/shirts let me know in a comment!

March 8, 2009 at 12:52 am 2 comments

Weekend webcam project: playing with the reacTIVision framework

Last weekend, I stranded on the reacTIVision site by coincidence. It took me some time to figure out what the reacTIVision open source project is all about, but once I did my weekend project was settled! 🙂

What does reacTIVision do?

This is what their site says: reacTIVision is an open source, cross-platform computer vision framework for the fast and robust tracking of fiducial markers attached onto physical objects, as well as for multi-touch finger tracking. My first reaction was “what the … is a fiducial marker?”. A fiducial marker turns out to be some sort of graphical symbol that is associated with a unique ID. The reacTIVision code uses the “amoebe fiducials” by default, which are cute amoebe-like figures. There are 180 of these amoebe fiducials, and each one of them is associated with a unique id (0 through 179).


a fiducial

So what does the reacTIVision framework do with these symbols? The software will analyze the image captured from your webcam, and locate any amoebe fiducials in it. The software is able to give the location of the symbol as wel as its orientation (rotation).

The software will write all this information (what symbols found, their location and their orientation) on a UDP port. This UDP port is not a real port on your computer but just a number that identifies where the information is written. Another program (custom written by you) can then read in this information by connecting to that port.

 Why is it cool?

On the software page of their site, the reacTIVision team provides not only the reacTIVision software itself, but also a demo application that uses this information. This demo application is available in a lot of different programming languages (C++, Java, C#, Processing, Pure Data, Max/MSP, Quartz Composer and others) so you can just use your prefered language to build your own cool application!

A commercial application (not open source) is the reactable (click here for a basic demo video), a cross-breeding between a touch table and a synthesizer, which looks like a really really really cool way to make music. Some of the symbols generate a tone (e.g. a sine wave) and other blocks will influence this tone (e.g. its frequency) as soon as they are close enough to the tone-block.

You don’t have to build a touch table for your own projects (altough it gives the coolest results I guess), you can just hold the symbols in front of a webcam too.

My own application

I built a simple test application that associates the fiducials with a loop sound. When I show a fiducial to my camera my program starts playing the loop so you can compose a simple track this way. I wanted to program it in Java at first, but the developing of the graphical output went way too slow to my liking, so I switched to Processing. If you don’t know this language (I didn’t) already, it really is worth checking out. It is targetted at artists so it is really easy to create fancy graphical output. It is built upon Java so it is even possible to combine it with Java code!

My own reacTIVision application :-)

My own reacTIVision application 🙂

My application is shown in the above image. When I show a fiducial to the camera, it is detected and plotted in the application. A sound loop starts playing (I use the Minim library that is included in Processing for this) and the sound wave is plotted next to the symbol. The code can be downloaded from here. The sound loops were downloaded from I also experimented a bit with the filter possibilities of the Minim library. If you uncomment a line in my code, a bandpass filter depending on the fiducial’s position will be applied to the loop!

The code is quick draft code and certainly not error proof, so use it as your first steps into TUIO and Processing but be aware of all the things that could be coded better :p

My test setup

You can show your fiducials to your webcam and all will work well as long as you hold the fiducial pointing straight at the webcam. You can construct a simple setup by hanging a camera with a little tripod between some books like in the image below:

A minimal camera setup

A minimal camera setup

 A better solution would be to construct a transparant table. I constructed a simple setup with two wooden IKEA boxes and some plexi-glass as shown below:

A more elaborate (but still very far from professional) setup :p

A more elaborate (but still very far from professional) setup :p

You can see the camera peeping through the hole below. The lamp and the white paper on the floor of the box are an attempt to improve the performance. If you can afford a projector you can even create a real multitouch table like in the reactable project!

Existing applications

You can find a lot of reacTIVision projects on the web. Most of them use it to interact with a sound producing application like e.g. Abbleton Live. Some other creative uses of the reacTIVision framework:

So that’s it for this post.. If you know of some other cool reacTIVision projects, or (even better) have created your own cool application, let me know in the comments!

March 3, 2009 at 7:58 pm 3 comments


Articles to be written…

Twitter – kr3l


RSS Google Reader Shared Stuff

  • An error has occurred; the feed is probably down. Try again later.

RSS Listening to..

  • An error has occurred; the feed is probably down. Try again later.