Building a touch table with everyday objects and a touch interface with Flash

2,202 views

Published on

Slides from presentation at GeekCamp SG 2010 on how to build a touch table using everyday objects and a touch interface with Flash. Built mostly using open source software.

Hardware needed: Projector, webcam, piece of glass/acrylic, tracing paper, computer

Software needed (All are open source except Flash): TUIO, Tbeta, FLOSC, Flash

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,202
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building a touch table with everyday objects and a touch interface with Flash

  1. 1. Building a Touch Table with Everyday Objects <ul><li>by @suyuen </li></ul>
  2. 2. What are we covering? <ul><li>Very very elementary touch table </li></ul><ul><li>Hardware Setup </li></ul><ul><li>Touch Interface in Flash ActionScript </li></ul>
  3. 3. Sneak Preview <ul><li>http://www.youtube.com/watch?v=TvDCMLjA8JM </li></ul>
  4. 4. Hardware <ul><li>Projector </li></ul><ul><li>Small piece of mirror </li></ul><ul><li>Cheap 50 cent Tracing Paper </li></ul><ul><li>Glass/Acrylic </li></ul>
  5. 5. Hardware Setup
  6. 6. Software Needed <ul><li>TBeta (http://tbeta.nuigroup.com) </li></ul><ul><li>FLOSC ( http://transmote.com/flosc/ ) </li></ul><ul><li>TUIO ( http://www.tuio.org/ ) </li></ul><ul><li>Adobe Flash </li></ul>
  7. 7. TBeta <ul><li>Free and Open Source (yay!) </li></ul><ul><li>Tracks shadow blobs detected by webcam </li></ul><ul><li>Sends data to computer (FLOSC) </li></ul><ul><li>Settings - Threshold, Contrast, Dynamic Subtraction, etc </li></ul>
  8. 9. FLOSC <ul><li>Communicator between Flash & TUIO </li></ul><ul><li>Send data to Port Num (E.g: 3333) </li></ul><ul><li>Position/Coordinate Values </li></ul><ul><li>FLOSC Simulator </li></ul>
  9. 11. TUIO <ul><li>Communicator between FLOSC & Flash </li></ul><ul><li>Grab data from defined port number </li></ul><ul><li>Feeds to Flash </li></ul><ul><li>TUIO API for touch capability in ActionScript </li></ul>
  10. 12. Diagram Flow Webcam TBeta FLOSC (x, y) TUIO Port Num Flash Data + Touch API
  11. 13. Coding the Interface!! <ul><li>Must I design an interface with a hardware ready for me to poke all the time?? </li></ul><ul><li>NAH!! A mouse will do... </li></ul>
  12. 14. Demo of Mouse Interface
  13. 15. Conversion to Touch <ul><li>import flash.events.TUIO; </li></ul><ul><li>import flash.events.TouchEvent; </li></ul><ul><li>Replace MouseEvent with TouchEvent </li></ul>
  14. 16. Thank You! Find me at: E-mail : [email_address] Twitter: @suyuen

×