Using the TuioClient

This article will explain how you can create a Flash project using Tuio with callbacks.

This method isn't really going along nicely with Adobe's original eventmodel but was implemented this way to allow a better performance for additional Eventdispatching that also uses this method to receive its information from the TuioClient.

What you basically have to do is the implementation of the org.tuio.ITuioListener interface. You don't have to fully implement all functions but you will at least need to leave in the empty definitions or you will get a compiler error for not fully implementing the interface. More on interfaces, what they are and what they actually do or not do can be found in Adobe's as3 documentation and programming guide.

Intitializing Tuio and tracing receive notifications

This part will be rather easy if you already have some object oriented programming experience. What we will do is create a very simple implementation of the ITuioListener that just traces the received TuioObjects. We will also intialize a TuioClient and attach our ITuioListener as a listener in a way that is very similar to how some listeners where attached in as2.

So first we will create our implementation:

As you can see I simply trace the String representation of the passed TuioCursor, TuioObject or TuioBlob. Every of these classes has an implementation of toString() that will give you all the content as defined in the Tuio specification in a single line String.

Also note the TuioClient intitialization in the constructor. As mentioned in the comment the LocalConnection baesd LCConnector is used as a default in this script. By uncommenting the succeeding two lines and removing/commenting the other two you can choose to use the TCP based IOSCConnector if your Tuio setup doesn't support LocalConnection yet.

The class can be simply used as a document class in a Flash project so no additional work is needed at this point.

Drawing and removing Sprites

Since we know now that the getting information into flash works just fine we can actually do something with it. This one will be kind of simple but should be fun to play around with and extend.

The code that we are going to add will draw circles on the coordinates sent by the tracker.
So first we will create a simple Sprite that draws circles.

Next we will create a new implementation of the ITuioListener. This time only the Cursor specific callbacks will be implemented.

On addTuioCursor we just simply create a new Circle and set its poisition to the values given in the TuioCursor. Since those position values are given in a range between 0 to 1 they have to be multiplied with the actual dimensions of the drawing canvas. in this case the Stage's stageWidth and stageHeight.
As name for the Circle we simply use Tuio's sessionID for the cursor since it is supposed unique at a time.

On updateTuioCursor we just simply use the given sessionID to retrieve the corresponding Circle and update its position.

On removeTuioCursor we just have to find the Circle again with the sessionID given and remove it from the stage.

Additionally you may have noticed the KeyboardEvent handler that enables you to adjust the Circle's radius by simply pressing the up and down arrows on you keyboard. This is quite handy if you want to test this on different Tuio setups with varying screen resolution.

Download Project

The project is included with the most recent release of the library in the "demo" folder.
It basically is the project explained in this article but draws differently colored circles for each one of the three different tuio container types (cursors, object and blob). It also has three connection indicators that will light up if tuio data is received.