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

document.getElementById(“myElement”).onG esture( “doubletap”, function(event) { alert(“I’ve been doubletapped!”); }); Presentation Demonstration Our solution Implementation Organisation Conclusion

OUR SOLUTION

• Some existing libraries • Nothing more than 2 fingers 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 @fixed @fixed 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