CoffeeTouch

Authors Nima Izadi Pierre Corsini Nicolas Dupont Nicolas Fernandez June
17th, 2010 Supervisors Raphaël Bellec Francoise Baude CoffeeTouch: Multi-touch JavaScript Library

PRESENTATION

• You said Javascript Library? • Touchpads are more and
more used • Multiplication of web applications • Multi-touch in web browsers CONTEXT Presentation Demonstration Our solution Implementation Organisation Conclusion

• Handling multi-touch gestures • Ease of use • Improvable
FEATURES Presentation Demonstration Our solution Implementation Organisation Conclusion

DEMONSTRATION

<html> <head> <script src="CoffeeTouch.js"></script> </head> <body> <div id="myElement">My Element</div> </body>
<script type=”text/javascript”> document.getElementById(“myElement”).onG esture( “doubletap”, function(event) { alert(“I’ve been doubletapped!”); }); </script> </html> Presentation Demonstration Our solution Implementation Organisation Conclusion

OUR SOLUTION

• Some existing libraries • Nothing more than 2 ﬁngers
gesture • Library dependent • Heterogeneous of multi-touch compatibility on browsers STATE OF ART Presentation Demonstration Our solution Implementation Organisation Conclusion

WHAT WE WOULD LIKE TO ADD •A independent JavaScript library
•Ease of use •Very few functions •Intuitive event naming •Modular source code Presentation Demonstration Our solution Implementation Organisation Conclusion

IMPLEMENTATION

MODULES Presentation Demonstration Our solution Implementation Organisation Conclusion

STATE MACHINE Presentation Demonstration Our solution Implementation Organisation Conclusion

• Recognize the action done by a single finger •
Three browser’s low level events: -touchstart -touchmove -touchend STATE MACHINE tap fixed drag fixedend doubletap Presentation Demonstration Our solution Implementation Organisation Conclusion

STATE MACHINE @ﬁxed @ﬁxed Presentation Demonstration Our solution Implementation Organisation
Conclusion

EVENT ROUTER/GROUPER Presentation Demonstration Our solution Implementation Organisation Conclusion

EVENT ROUTER Presentation Demonstration Our solution Implementation Organisation Conclusion

EVENT GROUPER Presentation Demonstration Our solution Implementation Organisation Conclusion

ANALYSER Presentation Demonstration Our solution Implementation Organisation Conclusion

ANALYSER •Recognize multi-touch gesture •Notify using several names •Two style
•Ordered - up,up,down •Unordered - two:up,one:down Presentation Demonstration Our solution Implementation Organisation Conclusion

ANALYSER •Gesture detection: •Pinch - Spread •Rotation •Direction •Composition Presentation
Demonstration Our solution Implementation Organisation Conclusion

ORGANISATION

ORGANISATION •New work environment •Team members had never worked together
before •Choice of agile methodology •Scrum •xprograming Presentation Demonstration Our solution Implementation Organisation Conclusion

ORGANISATION •Scrum Frequent feedbacks with supervisors Small and regular increments
of the code Keeping a working and up-to-date version Usage of ‘sprints’ Presentation Demonstration Our solution Implementation Organisation Conclusion

ORGANISATION •XPrograming A lot of pair programing No formal unit
test but each modules tested independently Presentation Demonstration Our solution Implementation Organisation Conclusion

CONCLUSION

CONCLUSION •Fully deployable and usable api •Handle many gestures •Easily
understandable •Examples •User’s manual Presentation Demonstration Our solution Implementation Organisation Conclusion

PERSPECTIVES •Improvements •Handle gesture sequences •Enhance visibility with a jQuery
plugin Presentation Demonstration Our solution Implementation Organisation Conclusion

Thank you for your attention Special thanks to: • Raphaël
Bellec • Françoise Baude • Jérémie Bellec Pictures: •Logos - Polytech / Structure Computation / Scripty 2 / jQuery / Github / IBM (Open source) •Gestureworks - Hands •ObamaPacman - iPad hands-on •Autodesk - Multi-hands •INS Consulting - Puzzles •Ideal - Buddy

CoffeeTouch

CoffeeTouch

Nima Izadi

More Decks by Nima Izadi

Other Decks in Programming

Featured

Transcript

Authors Nima Izadi Pierre Corsini Nicolas Dupont Nicolas Fernandez June

PRESENTATION

• You said Javascript Library? • Touchpads are more and

• Handling multi-touch gestures • Ease of use • Improvable

DEMONSTRATION

<html> <head> <script src="CoffeeTouch.js"></script> </head> <body> <div id="myElement">My Element</div> </body>

OUR SOLUTION

• Some existing libraries • Nothing more than 2 ﬁngers

WHAT WE WOULD LIKE TO ADD •A independent JavaScript library

IMPLEMENTATION

MODULES Presentation Demonstration Our solution Implementation Organisation Conclusion

STATE MACHINE Presentation Demonstration Our solution Implementation Organisation Conclusion

• Recognize the action done by a single ﬁnger •

STATE MACHINE @ﬁxed @ﬁxed Presentation Demonstration Our solution Implementation Organisation

EVENT ROUTER/GROUPER Presentation Demonstration Our solution Implementation Organisation Conclusion

EVENT ROUTER Presentation Demonstration Our solution Implementation Organisation Conclusion

EVENT GROUPER Presentation Demonstration Our solution Implementation Organisation Conclusion

ANALYSER Presentation Demonstration Our solution Implementation Organisation Conclusion

ANALYSER •Recognize multi-touch gesture •Notify using several names •Two style

ANALYSER •Gesture detection: •Pinch - Spread •Rotation •Direction •Composition Presentation

ORGANISATION

ORGANISATION •New work environment •Team members had never worked together

ORGANISATION •Scrum Frequent feedbacks with supervisors Small and regular increments

ORGANISATION •XPrograming A lot of pair programing No formal unit

CONCLUSION

CONCLUSION •Fully deployable and usable api •Handle many gestures •Easily

PERSPECTIVES •Improvements •Handle gesture sequences •Enhance visibility with a jQuery

Thank you for your attention Special thanks to: • Raphaël