CoffeeTouch

 CoffeeTouch

Milti-touch Javascript library written in CoffeeScript for handling multi-touch gesture on mobile devices.
More at: https://github.com/Crozis/CoffeeTouch

4c9a493357b17fb1ac818b3cfed6583a?s=128

Nima Izadi

June 17, 2012
Tweet

Transcript

  1. Authors Nima Izadi Pierre Corsini Nicolas Dupont Nicolas Fernandez June

    17th, 2010 Supervisors Raphaël Bellec Francoise Baude CoffeeTouch: Multi-touch JavaScript Library
  2. PRESENTATION

  3. • 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
  4. • Handling multi-touch gestures • Ease of use • Improvable

    FEATURES Presentation Demonstration Our solution Implementation Organisation Conclusion
  5. DEMONSTRATION

  6. <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
  7. OUR SOLUTION

  8. • 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
  9. 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
  10. IMPLEMENTATION

  11. MODULES Presentation Demonstration Our solution Implementation Organisation Conclusion

  12. STATE MACHINE Presentation Demonstration Our solution Implementation Organisation Conclusion

  13. • 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
  14. STATE MACHINE @fixed @fixed Presentation Demonstration Our solution Implementation Organisation

    Conclusion
  15. EVENT ROUTER/GROUPER Presentation Demonstration Our solution Implementation Organisation Conclusion

  16. EVENT ROUTER Presentation Demonstration Our solution Implementation Organisation Conclusion

  17. EVENT GROUPER Presentation Demonstration Our solution Implementation Organisation Conclusion

  18. ANALYSER Presentation Demonstration Our solution Implementation Organisation Conclusion

  19. 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
  20. ANALYSER •Gesture detection: •Pinch - Spread •Rotation •Direction •Composition Presentation

    Demonstration Our solution Implementation Organisation Conclusion
  21. ORGANISATION

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

    before •Choice of agile methodology •Scrum •xprograming Presentation Demonstration Our solution Implementation Organisation Conclusion
  23. 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
  24. ORGANISATION •XPrograming A lot of pair programing No formal unit

    test but each modules tested independently Presentation Demonstration Our solution Implementation Organisation Conclusion
  25. CONCLUSION

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

    understandable •Examples •User’s manual Presentation Demonstration Our solution Implementation Organisation Conclusion
  27. PERSPECTIVES •Improvements •Handle gesture sequences •Enhance visibility with a jQuery

    plugin Presentation Demonstration Our solution Implementation Organisation Conclusion
  28. 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