1 of 2
1
Getting Started with TUIO and Flash
Posted: 13 March 2008 11:49 AM   [ Ignore ]
Avatar
RankRankRankRank
Joined  2006-11-09
Total Posts:  1499
Administrator

As Martin (TUIO Author) noted below; there is newer implementations here: http://nuigroup.com/forums/viewthread/7364/ but this document can still act as a general overview.

Introduction:

<div style="padding:15px; background-color:#EEEEEE; border:1px solid #C3C3C3; padding-top:0px">
I wanted to make a really easy to follow tutorial on how to get started using the TUIO Simulator with a Flash Client (EXE or SWF).
To get started read the following instructions, If you don’t know what TUIO is… I would recommend starting with the “What is TUIO?” section.</div>

Requirements:

<div style="padding:15px; background-color:#EEEEEE; border:1px solid #C3C3C3; padding-top:0px">
Flash Player 9+ (Download)
Java Runtime 6+ (Download)
</div>

Instructions:

<div style="padding:15px; background-color:#EEEEEE; border:1px solid #C3C3C3; padding-top:0px">
1) Download the attached file and extract to your desktop.
2) Open Flosc.jar (then click start)
3) Open Simulator.jar
4) Open Test.exe
5) Go back to Simulator.jar and draw within the circle, you will see your actions replicated into Test.exe
5a) Use SHIFT+Click for multi-touch events. (see Simulator Help for more info)
</div>

Explanation:

<div style="padding:15px; background-color:#EEEEEE; border:1px solid #C3C3C3; padding-top:0px">
<div style="padding:15px; background-color:#FFFFFF; border:1px solid #DDDDDD; padding-top:0px">
?ACT=28&fid=33&aid=713_H9CYF7sZT7iDoSJ6cKtK

Step by Step:

<div style="padding:15px; background-color:#F3F3F3; border:1px solid #CCCCCC; padding-top:0px">
1) The TUIO (OSC) data is SENT from the Simulator OR Touchlib’s “osc.exe”.

2) The FLOSC gateway CONVERTS the OSC (UDP) data into XML (TCP)

3) The Flash client uses an XMLSocket to RECEIVE and parse the XML data then renders the cursors within your application.
</div><div style="padding:15px; background-color:#F3F3F3; border:1px solid #CCCCCC; padding-top:0px">

Notes:

<ul>
<li>Host: localhost ---- Ports: 3000/3333</li>
<li>Remember TUIO and OSC are referring to the SAME data.</li>
<li>The reason we need Step 2 is because Flash CANNOT read UDP data, thus we convert it to TCP</li>
<li>The Direct Binary method is not covered in this tutorial. But you can read more about it here:
Binary Socket Connection in Flash.</li>
</ul></div>
</div>

What is TUIO?

<div style="padding:15px; background-color:#F4F4F4; border:1px solid #CCCCCC; padding-top:0px">
TUIO (Table-Top User Interfaces Objects) is a simple yet versatile protocol designed specifically to meet the requirements of table-top tangible user interfaces. Inspired by the idea of interconnecting various existing interactive surface interfaces such as the reacTable or AudioTouch. The TUIO protocol has been implemented using OpenSound Control and is therefore usable on any platform supporting this protocol.

Simply put: TUIO is just a standardized way of formatting OSC data.

TUIO Documentation (pdf)
</div>

Message Syntax:

<div style="padding:15px; background-color:#F4F4F4; border:1px solid #CCCCCC; padding-top:0px">
Since TUIO is implemented using OSC it follows its general syntax:

/tuio/[profileName] set sessionID [parameterList] 
/tuio/[profileName] alive [list of active sessionIDs] 
/tuio/[profileName] fseq int32

</div>

Parameters:

<div style="padding:15px; background-color:#F3F3F3; border:1px solid #CCCCCC; padding-top:0px">
The parameters defined in this section reflect the object properties we considered important for an interactive surface interface. A session ID number is assigned to each object. This is necessary to uniquely identify untagged objects across successive frames, and in the case where multiple objects tagged with the same classID are simultaneously present on the surface. <br><br>Some of these parameters (id, position and angle) are retrieved directly by the sensor. Others (speed, acceleration) are derived from these primary parameters using timing information. Computing these parameters on the low level side of an tangible user interface system allows a more efficient computation, since the necessary timing information does not need to be transferred to clients. <br><br>The parameters allowed in a set message:

s        sessionIDtemporary ob ject IDint32 
i        classID
fiducial ID numberint32 
x
yz        positionfloat32range 0...1 
a
bc        anglefloat32range 0..2PI 
X
,Z        movement vector (motion speed &ampdirection), float32 
A
BC        rotation vector (rotation speed &ampdirection), float32 
m        motion acceleration
float32 
r        rotation acceleration
float32 
P        free parameter
type defined by OSC packet header

</div>

Profiles:

<div style="padding:15px; background-color:#F4F4F4; border:1px solid #CCCCCC; padding-top:0px">
We define a set of profiles, which apply to most table-style tangible user interfaces.This allows the tracking of ob jects and cursors on two dimensional surfaces and in special cases also in the 3D space above the table surface. If one of these predefined profiles does not meet a system’s requirements we also allow so-called raw profiles that send the raw sensor data, as well as free form profiles, which allow a user defined set of parameters to be transmitted.

2D Interactive Surface:

/tuio/2Dobj set s i x y a X Y A m r 
/tuio/2Dcur set s x y m r

3D Interactive Surfaces:

/tuio/3Dobj set s i x y z a X Y Z A m r 
/tuio/3Dcur set s x y z m r

Custom Profile:

/tuio/_[formatString] 
/tuio/_ixyP set s i x y 0.57

</div>
</div>

<div class="attachTitle">Related Articles</div><div class="attachBody"><div class="itempad">TUIO Homepage
OSC Homepage
Multitouch TUIO Simulator
</div></div>

Image Attachments
TUIO_Diagram.jpg
File Attachments
SimulatorExample.zip  (File Size: 1963KB - Downloads: 19425)
TUIO_Documentation.pdf  (File Size: 100KB - Downloads: 7665)
 Signature 

~

Profile
 
 
Posted: 13 March 2008 04:11 PM   [ Ignore ]   [ # 1 ]
Rank
Joined  2007-08-31
Total Posts:  54
New Member

great! smile

Profile
 
 
Posted: 14 March 2008 03:37 AM   [ Ignore ]   [ # 2 ]
Avatar
RankRank
Joined  2008-01-28
Total Posts:  124
Member

THNX !!

Profile
 
 
Posted: 17 March 2008 06:46 AM   [ Ignore ]   [ # 3 ]
RankRank
Joined  2008-03-11
Total Posts:  138
Member

Thankswink

 Signature 

~ myHead.addEventListener(Event.ENTER_FRAME, functionProperly); ~

Profile
 
 
Posted: 27 March 2008 07:09 PM   [ Ignore ]   [ # 4 ]
Avatar
RankRankRankRank
Joined  2008-01-04
Total Posts:  676
Moderator

Nice and simple c.moore! Well done!

 Signature 

Get Sparked at sparkon.net
ORION Multi-Touch Display (blog)
My YouTube

Profile
 
 
Posted: 01 April 2008 09:07 AM   [ Ignore ]   [ # 5 ]
Rank
Joined  2008-03-23
Total Posts:  33
New Member

nice work, maybe my pc is a bit slow, I experienced som legs, anyway, it shows me a lot about TUIO and Flash intercommunication

Profile
 
 
Posted: 01 April 2008 02:54 PM   [ Ignore ]   [ # 6 ]
Rank
Joined  2008-02-16
Total Posts:  81
New Member

Wow very solid tutorial! Very much appreciated. Thank you.

 Signature 

Visit http://www.crystalminds.net/

Profile
 
 
Posted: 25 April 2008 05:41 AM   [ Ignore ]   [ # 7 ]
Rank
Joined  2008-03-20
Total Posts:  8
New Member

Oh It’s great example.

Profile
 
 
Posted: 02 June 2008 02:29 PM   [ Ignore ]   [ # 8 ]
Avatar
Rank
Joined  2008-01-16
Total Posts:  87
New Member

Elegant, yet simple and easy to follow. Nice work. smile

 Signature 

EasterIsland, LLC.
My Signature Quote

Profile
 
 
Posted: 19 September 2008 01:52 AM   [ Ignore ]   [ # 9 ]
Rank
Joined  2008-09-19
Total Posts:  7
New Member

Thanks. Good job but i understanding like 90% of it could u explain how we work with actionscript to get the data from touchs. thanks

Profile
 
 
Posted: 06 October 2008 03:53 AM   [ Ignore ]   [ # 10 ]
Rank
Joined  2008-10-02
Total Posts:  1
New Member

gracias gracias gracias mil años tratando de que funcione y gracias a la pequeña explicacion y a la imagen, pude hacer funcionar todo.

Ahora solo falta programar aplicaciones.

NAMASTE.

Profile
 
 
Posted: 16 October 2008 01:19 PM   [ Ignore ]   [ # 11 ]
Rank
Joined  2008-10-13
Total Posts:  15
New Member

Nice! Thanks!

I was wondering about the flosc-part. As i heard, flash player 10 is finally supporting the UDP-Protocol.
This will make the use of flosc OpenSound Control translator obsolete. Am I right? Can anybody confirm that? Hopefully, since the performance of flash MT apps is rather bad compared to C++, Python apps.

 Signature 

no one will be left behind…

Profile
 
 
Posted: 20 October 2008 04:49 PM   [ Ignore ]   [ # 12 ]
Avatar
Rank
Joined  2008-10-02
Total Posts:  5
New Member

It would wish if somebody can leave this guide in Spanish, Thanks.

Profile
 
 
Posted: 21 October 2008 07:08 PM   [ Ignore ]   [ # 13 ]
Avatar
Rank
Joined  2008-06-05
Total Posts:  92
New Member
daniel.klotz - 16 October 2008 01:19 PM

Nice! Thanks!

I was wondering about the flosc-part. As i heard, flash player 10 is finally supporting the UDP-Protocol.
This will make the use of flosc OpenSound Control translator obsolete. Am I right? Can anybody confirm that? Hopefully, since the performance of flash MT apps is rather bad compared to C++, Python apps.

You should give a try to MIG (using it instead of FLOSC) pheraps it has better performance.

http://nuigroup.com/forums/viewthread/3280/

I just added support for Flash to it.

G.

Profile
 
 
Posted: 21 October 2008 07:19 PM   [ Ignore ]   [ # 14 ]
Avatar
Rank
Joined  2008-06-05
Total Posts:  92
New Member
daniel.klotz - 16 October 2008 01:19 PM

Nice! Thanks!

I was wondering about the flosc-part. As i heard, flash player 10 is finally supporting the UDP-Protocol.
This will make the use of flosc OpenSound Control translator obsolete. Am I right? Can anybody confirm that? Hopefully, since the performance of flash MT apps is rather bad compared to C++, Python apps.

You need Flash Media Server in order to use RTMFP. Better performance but not too open and easy to setup solution.

G.

Profile
 
 
Posted: 19 October 2009 05:15 AM   [ Ignore ]   [ # 15 ]
Rank
Joined  2009-10-16
Total Posts:  3
New Member

Can anyone post the syntax of an XML FLOSC packet? I tried to parse some, but I don’t understand all of their parameters. I found various AS3 implementations of the TUIO class and seems that everyone built that basing on their own needs… :S

Thank you!

Profile
 
 
   
1 of 2
1