Tuio Flash Blog

Using the TuioManager

The TuioManager is the way to go if you want to create a Tuio tracker input based flash application without the need to tinker with the Tuio tracking data itself.

The TuioManager is an implementation of the ITuioListener interface and processes the data received by the TuioClient and turns it into events you can handle by using event listeners. The TuioManager uses two custom event classes but is also able to dispatch MouseEvents.

The two custom event classes are:

  • TouchEvent: Works like the MouseEvent just for touches tracked by the Tuio tracker. Will probably be the event used in most cases. Is dispatched onto the stage's children.
  • TuioEvent: Is an event equivalent of the callback functions defined in the ITuioListener interface. Gives you more control on what to do with the actual tracking data. Is dispatched onto the TuioManager itself.

Initializing the TuioManager

Since the TuioManager needs a TuioClient to receive tracking data you first have to create a new TuioClient with the IOSCConnector for the connection method you want to use. With this TuioClient you then can create a new TuioManager.

  1. var tuioClient:TuioClient = new TuioClient(new LCConnector());
  2. var tuioManager:TuioManager = TuioManager.init(stage, tuioClient);

The TuioManager will automatically start to dispatch TuioEvent and TouchEvents as soon as tracking data is received. Since the TuioManager searches the whole child tree of the stage to find the topmost object under a certain touch point to dispatch a TouchEvent it might happen that you want to exclude objects from this touchtarget discovery.

Touchtarget discovery

The Touchtarget discovery can be configured by setting the TuioManager.touchTargetDiscoveryMode.

There are the following possibilities:

  • TuioManager.TOUCH_TARGET_DISCOVERY_MOUSE_ENABLED
    Is the default setting and simply checks if the mouseEnabled property is set true before dispatching a TouchEvent. The mouseChildren property currently isn't checked but may be added later depending on feedback.
  • TuioManager.TOUCH_TARGET_DISCOVERY_NONE
    Nomen est omen -> nothing is excluded.
  • TuioManager.TOUCH_TARGET_DISCOVERY_IGNORELIST
    An ignore list is used to exclude DisplayObjects. They can be added to the list via TuioManager.addToIgnoreList or removed again via TuioManager.removeFromIgnoreList. If a DisplayObjectContainer is added to the list all of its children won't receive TouchEvents

MouseEvents

The TuioManager can also dispatch MouseEvents in addition to TouchEvents and TuioEvents. To enable this you have to set TuioManager.dispatchMouseEvents = true. Note that this will also set the touchTargetDiscoveryMode back to TuioManager.TOUCH_TARGET_DISCOVERY_MOUSE_ENABLED in case you have changed that.

Blobs and Objects

TUIO distinguishes between three types of tracked objects. Your fingers are basically "cursor" messages which the TuioManager automatically reacts to. Fiducials are called "objects" and everything else is a "blob". Depending on your setup you might need the TuioManager to react to blobs and objects. You can achieve this by setting the TuioManager's properties triggerTouchOnBlob and/or triggerTouchOnObject true.

Touch behaviour

You can directly change the behaviour of the doubleTap and hold TouchEvents by setting properties of the TuioManager.

  • doubleTapTimeout: With this property you can set the minimum time that may pass between two taps so that they are still considered a double tap.
  • doubleTapDistance: By setting this you can control the maximum allowed distance between the two taps. You'll maybe need to configure this depending on the sensibility and display/toucharea ratio of you setup.
  • holdTimeout: Controls the time that has to pass until a still touch triggers a hold TouchEvent.

Example project

You can find a similar project within the latest downloadable package in the TuioManagerExample so I won't write fully working code in order to focus on the important stuff.
In this project for each touch a circle is drawn but also an additional circle if a touch is released. This circle can then be removed by again tapping it.

At first the TuioManager is initialized and the eventlisteners are added.

  1. this.tuio = new TuioClient(new LCConnector()); 
  2. this.tuioManager = TuioManager.init(stage, this.tuio);
  3.                        
  4. this.tuioManager.addEventListener(TuioEvent.ADD, addHandler);
  5. this.tuioManager.addEventListener(TuioEvent.UPDATE, updateHandler);
  6. this.tuioManager.addEventListener(TuioEvent.REMOVE, removeHandler);
  7.                        
  8. stage.addEventListener(TouchEvent.TOUCH_UP, tapHandler);

As you can see there are both TuioEvent and TouchEvents used here. The TuioEvent used for drawing a circle for each touch to give a visual feedback to the user. The TouchEvent is used to draw a circle after a touch. A TuioEvent.REMOVE listener would have done the same job but I used it here for example purposes.

Next I'll explain the the TuioEvent listeners attached to the TuioManager above. The following function creates a new circle if there is a new object tracked by the tracker. Notice that the circle is set mouseEnabled = false in order to keep it from receiving TouchEvents since it would be on top now and would normally receive those.

  1. public function addHandler(e:TuioEvent):void {
  2.   var circle:Circle = new Circle(e.tuioContainer.sessionID.toString(), stage, e.tuioContainer.x*stage.stageWidth, e.tuioContainer.y * stage.stageHeight, this.circleSize, 0xee3333);
  3.   circle.mouseEnabled = false;
  4. }

Next up is the updatehandler which updates the circles created in the addHandler according to the new tracking position.

  1. public function updateHandler(e:TuioEvent):void {
  2.   currentCircle = stage.getChildByName(e.tuioContainer.sessionID.toString()) as Circle;
  3.   currentCircle.x = e.tuioContainer.x*stage.stageWidth;
  4.   currentCircle.y = e.tuioContainer.y*stage.stageHeight;
  5. }

Last but not least the removeHandler removes the circles if the corresponding tracked object was removed from the tracking area.

  1. public function removeHandler(e:TuioEvent):void {
  2.   currentCircle = stage.getChildByName(e.tuioContainer.sessionID.toString()) as Circle;
  3.   stage.removeChild(currentCircle);
  4. }

The following tapHandler creates a circle if a touch is released. There is also an eventlistener added to the circle to remove it when it is tapped. Please note that since the event listenere is attached to the stage and TOUCH_UP is a bubbling event there has to be a check whether the stage is the actual target of the TouchEvent.

  1. public function tapHandler(e:TouchEvent):void {
  2.   if(e.relatedObject == stage){
  3.     var circle:Circle = new Circle("tabring", stage, e.tuioContainer.x*stage.stageWidth, e.tuioContainer.y * stage.stageHeight, this.circleSize+5, 0xcc6600);
  4.     circle.addEventListener(TouchEvent.TAP, circleTapHandler);
  5.   }
  6. }

The circleTapHandler is added to every circle created in the tapHandler and removes the target from the stage.

  1. public function circleTapHandler(e:TouchEvent):void {
  2.   stage.removeChild(e.relatedObject);
  3. }

If you find errors or have any additional questions please use the comments to this article to let us know how we can improve it

Comments (2) Trackbacks (1)
  1. Bart
    February 12th, 2010 - 21:37

    Awesome work, keep it up. This is amazing stuff!

  2. ofer
    July 5th, 2010 - 17:26

    im trying to run this code but i dont get any response
    do i need to run the cammera and use markers


Leave a comment


New Release v0.6 « Tuio Flash Blog
 

Pages

Links

Categories