1 / 46

HTML5 Haptics Standardization

Mohamed Mansour hello@mohamedmansour.com. HTML5 Haptics Standardization. HTML5 Haptics Standardization. 3. 1. 2. 5. 4. 6. 7. HTML5 Haptics Standardization. 3. 1. 2. 5. 4. 6. 7. Vision. Haptics Integration into HTML5 Rich JavaScript API to communicate to Haptics Cross platform

mills
Download Presentation

HTML5 Haptics Standardization

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mohamed Mansourhello@mohamedmansour.com HTML5 Haptics Standardization Haptics Chrome

  2. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  3. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  4. Vision • Haptics Integration into HTML5 • Rich JavaScript API to communicate to Haptics • Cross platform • Haptic device independent • Standardized in W3C Mohamed Mansour

  5. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  6. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  7. HTML5 INNOVATION Mohamed Mansour

  8. What is HTML5? Mohamed Mansour

  9. HTML5 New features • Storage • Application Cache • Web Workers • Web Sockets • Notifications • Drag and Drop • Geolocation • Semantic Tags • Link Relations, and Microdata • ARIA • New form fields • Audio and Video • Canvas and SVG • Font Text Support, • Opacity, Rounded Corners • Shadows, Gradients • Backgrounds, Transitions • Transformations, Animations • Device • A lot more! Mohamed Mansour

  10. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  11. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  12. Haptics • Technology that interfaces with the user through the sense of touch [definition] • The process of recognizing objects through touch [another definition] Mohamed Mansour

  13. Haptic Devices • Omni • Novint • Gloves • Wrist band • Jacket • Way more … Mohamed Mansour

  14. How they work? • Robotic • Sensors • Feedback • Ex: • You send forces to the device, and it magically moves. • You request positional data from the device. Mohamed Mansour

  15. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  16. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  17. Plugins • Browser plugins is the only way you can allow the user to communicate to native code. • Current state of HTML is still limited … look at Flash, why did it exist? • Can do almost anything! • But very veryvery Dangerous! Mohamed Mansour

  18. Plugins • Active X • Microsoft Internet Explorer • NPAPI (very low-level) • Google Chrome • Firefox • Opera • Safari Mohamed Mansour

  19. NPAPI • Very long name …. Netscape Plugin Application Programming Interface. • Very powerful! • It is just a single library (.dll, .so, .plugin) file that gets loaded. • You just need at least 3 Library Exports: • NP_GetEntryPoints • NP_Initialize • NP_Shutdown Mohamed Mansour

  20. NPAPI Architecture Plugin LOGIC <embed> 3 1 2 DLL EXPORTS ScriptabletoNPObject* 5 4 Browser API NPN_* Mohamed Mansour

  21. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  22. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  23. Google Chrome • Multi Process Browser • Tab, Plugins, Renders, Extensions, Browser • Very fast JavaScript and Rendering • GPU Accelerated Canvas and WebGL • Secure Sandbox, for Plugins • Very fast at implementing HTML5 features. • Open Source browser Mohamed Mansour

  24. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  25. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  26. Google Chrome Extensions • Small software that can modify and enhance the functionality of Google Chrome. • Using web technologies, HTML, JavaScript, and CSS. • Easily expose NPAPI functionality. • Separate Process Mohamed Mansour

  27. Chrome Extension Basics • Background page • Lengthy process, long lived, singleton. • Browser Actions / Page Actions • Desktop Notifications • Override Pages • Browser Interaction (Bookmarks, Cookies, History, Events, Management, Windows, Tabs) • Plugin Interaction. Mohamed Mansour

  28. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  29. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  30. Prototype • HTML5 Device Tag <device> • Interface • Type Mohamed Mansour

  31. Device Tag • Still in implementation (research phase) • It can change! Add a Haptics “type” Dreamy Ex: <p> To start, Select a haptic device: <device type=haptic onchange="update(this.data)"></p><script> function update(stream) { console.log(stream.data); } </script> Mohamed Mansour

  32. Prototype , Needed? • Proof of concept needed to prove that Haptics needs love! And the future of computer human interactions! • Rescue …  Mohamed Mansour

  33. Prototype, Chrome Extension • How do we do it right now! • HTML5 (Web Workers) • CSS3, Canvas (WebGL Context Graphics) • Chrome Extension • Dedicated Thread (Background Page) • Haptics Controller (Browser Action) • Page Interactions (Page Action) • Accessibility (ARIA) • NPAPI • Haptics Plugin communicates to Chrome Extension • C++ extreme (scene graph, triangles) collision detection algorithms Mohamed Mansour

  34. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  35. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  36. Architecture C Plus Plus • High Level Novint Device HTML5 Mohamed Mansour

  37. Architecture Plugin Plugin Module Plugin Gate Scripting Bridge Haptics Service NP_GetEntryPoints NP_Initialize NP_Shutdown  Haptics Device Utils Haptics Signal Mohamed Mansour

  38. Glimpse of Plugin Code Mohamed Mansour

  39. Architecture, Extension • Browser Action to act as the controller • Background Page, to allow the plugin to live forever. • JavaScript for Some Collision Detection, Haptic Loop, and Rendering Loop. Mohamed Mansour

  40. Framework • O3D JavaScript API for creating rich and interactive 3D application in the broswer using Canvas, WebGL context. • Haptics API • void startDevice(); • void stopDevice(); • void sendForce(double[3]); • double[3] position; • addEventListener(‘servo’, function(Haptic data)); Mohamed Mansour

  41. Open Source’d Release it to the public! That is how I learned how to code, give back to the community! You can fork it from GitHubfrom here: http://github.com/mohamedmansour/haptics-chrome-extension Mohamed Mansour

  42. Working Prototype Mohamed Mansour

  43. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  44. HTML5 Haptics Standardization 3 1 2 5 4 6 7 Mohamed Mansour

  45. Future • Present this to the W3C Developer Group • Help Google Chrome complete <device> tag implementation. • Implement the Prototype again using the <device> tag. • Implement webpage interactions, like annotated YouTube Videos to feel video touch. Mohamed Mansour

  46. Done! Thank you, questions? 3 1 2 5 4 6 7 Mohamed Mansour

More Related