Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML5 Haptics 1 HTML5 Haptics Standardization Mohamed Mansour Haptics Chrome.

Similar presentations


Presentation on theme: "HTML5 Haptics 1 HTML5 Haptics Standardization Mohamed Mansour Haptics Chrome."— Presentation transcript:

1 HTML5 Haptics 1 HTML5 Haptics Standardization Mohamed Mansour Haptics Chrome

2 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour2 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

3 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour3 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

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

5 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour5 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

6 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour6 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

7 HTML5 Haptics HTML5 Mohamed Mansour HTML 1994 HTML CSS 1JavaScript 1997 HTML CSS XHTML 2002 Tableless 2005 AJAX 2009 HTML 5 INNOVATION

8 HTML5 Haptics What is HTML5? Mohamed Mansour8

9 HTML5 Haptics HTML5 New features Storage Application Cache Web Workers Web Sockets Notifications Drag and Drop Geolocation Semantic Tags Link Relations, and Microdata ARIA Mohamed Mansour9 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!

10 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour10 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

11 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour11 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

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

13 HTML5 Haptics Haptic Devices Omni Novint Gloves Mohamed Mansour13 Wrist band Jacket Way more …

14 HTML5 Haptics 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 Mansour14

15 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour15 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

16 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour16 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

17 HTML5 Haptics 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 very very Dangerous! Mohamed Mansour17

18 HTML5 Haptics Plugins Active X – Microsoft Internet Explorer NPAPI (very low-level) – Google Chrome – Firefox – Opera – Safari Mohamed Mansour18

19 HTML5 Haptics 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 Mansour19

20 HTML5 Haptics NPAPI Architecture Mohamed Mansour20 Scriptable to NPObject* Plugin DLL EXPORTS LOGIC Browser API NPN_*

21 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour21 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

22 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour22 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

23 HTML5 Haptics 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 Mansour23

24 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour24 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

25 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour25 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

26 HTML5 Haptics 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 Mansour26

27 HTML5 Haptics 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 Mansour27

28 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour28 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

29 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour29 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

30 HTML5 Haptics Prototype HTML5 Device Tag Interface Type Mohamed Mansour30

31 HTML5 Haptics Device Tag Still in implementation (research phase) It can change! Add a Haptics “type” Dreamy Ex: To start, Select a haptic device: function update(stream) { console.log(stream.data); } Mohamed Mansour31

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

33 HTML5 Haptics 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 Mansour33

34 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour34 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

35 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour35 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

36 HTML5 Haptics Architecture High Level Mohamed Mansour36 HTML5 C Plus Plus Novint Device

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

38 HTML5 Haptics Glimpse of Plugin Code Mohamed Mansour38

39 HTML5 Haptics 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 Mansour39

40 HTML5 Haptics 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 Mansour40

41 HTML5 Haptics 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 GitHub from here: Mohamed Mansour41

42 HTML5 Haptics Working Prototype Mohamed Mansour42

43 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour43 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

44 HTML5 Haptics HTML5 Haptics Standardization Mohamed Mansour44 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture

45 HTML5 Haptics Future Present this to the W3C Developer Group Help Google Chrome complete tag implementation. Implement the Prototype again using the tag. Implement webpage interactions, like annotated YouTube Videos to feel video touch. Mohamed Mansour45

46 HTML5 Haptics Done! Thank you, questions? Mohamed Mansour46 VisionHTML5Haptics Plugins Google Chrome Extensions PrototypeArchitectureFuture


Download ppt "HTML5 Haptics 1 HTML5 Haptics Standardization Mohamed Mansour Haptics Chrome."

Similar presentations


Ads by Google