MyoJS. From gesture to code - TopConf Tallinn 2016

The Myo armband measures the electrical activity from your muscles to detect what gesture your hand is making. It also senses all of the motions and rotations of your hand and forearm.

The talk is about the Javascript library which allows to detect gestures and make web applications based on hand motions.

Transcript

1. @alexcanessa MyoJS - TopConf Tallinn 2016 MyoJS From gesture to code.
2. @alexcanessa MyoJS - TopConf Tallinn 2016 @alexcanessa Italian full-stack dev living in London co-founder of bisquits working at DigitalDetox
3. @alexcanessa MyoJS - TopConf Tallinn 2016 A bit of history Historical Development of Hand Gesture Recognition
4. @alexcanessa MyoJS - TopConf Tallinn 2016 1919 - Theremin
5. @alexcanessa MyoJS - TopConf Tallinn 2016 Data Gloves 1989 - Nintendo PowerGlove
6. @alexcanessa MyoJS - TopConf Tallinn 2016 Data Gloves 1990 - CyberGlove
7. @alexcanessa MyoJS - TopConf Tallinn 2016 Data Gloves 2002 - P5 Gloves
8. @alexcanessa MyoJS - TopConf Tallinn 2016 2010 - Kinect
9. @alexcanessa MyoJS - TopConf Tallinn 2016 2013 - Smart TV
10. @alexcanessa MyoJS - TopConf Tallinn 2016 2014 - Leap Motion
11. @alexcanessa MyoJS - TopConf Tallinn 2016 Myo
12. @alexcanessa MyoJS - TopConf Tallinn 2016
13. @alexcanessa MyoJS - TopConf Tallinn 2016
14. @alexcanessa MyoJS - TopConf Tallinn 2016 Electromyography (EMG) is an electrodiagnostic technique for evaluating and recording the electrical activity produced by skeletal muscles. EMG
15. @alexcanessa MyoJS - TopConf Tallinn 2016 Gestures and motions Double Tap Fist Spread Fingers Wave In Wave Out Rotate Move
16. @alexcanessa MyoJS - TopConf Tallinn 2016 Custom gestures? Snap!
17. @alexcanessa MyoJS - TopConf Tallinn 2016 http://diagnostics.myo.com/
18. @alexcanessa MyoJS - TopConf Tallinn 2016 Meet the Man With a Myo-Controlled Robotic Arm
19. @alexcanessa MyoJS - TopConf Tallinn 2016 Platforms Arduino Virtual Reality Smartphone Web App Computer
20. @alexcanessa MyoJS - TopConf Tallinn 2016 Arduino - Door Lock
21. @alexcanessa MyoJS - TopConf Tallinn 2016 Augmented Reality - Icarus
22. @alexcanessa MyoJS - TopConf Tallinn 2016 Let’s Start.
23. @alexcanessa MyoJS - TopConf Tallinn 2016 import Myo from 'myo'; Myo.connect(‘com.acanessa.myApp’); Myo.on('connected', function() { // this is the myo armband this.vibrate(); });
24. @alexcanessa MyoJS - TopConf Tallinn 2016 Methods and Events • Myo.on • Myo.off • Myo.lock • Myo.unlock • Myo.vibrate • Myo.streamEMG • on('pose') • on('orientation') • on('arm_synced') • on('connected') • on('locked') • on('battery_level') https://github.com/thalmiclabs/myo.js/blob/master/docs.md
25. @alexcanessa MyoJS - TopConf Tallinn 2016 Let’s Code.
26. @alexcanessa MyoJS - TopConf Tallinn 2016 Lights Control
27. @alexcanessa MyoJS - TopConf Tallinn 2016 Web Sockets
28. @alexcanessa MyoJS - TopConf Tallinn 2016 Web Sockets “WebSockets is an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.” MDN
29. @alexcanessa MyoJS - TopConf Tallinn 2016 Myo.socket = new Socket('ws://127.0.0.1:10138/myo/'); Create the connection
30. @alexcanessa MyoJS - TopConf Tallinn 2016 Socket.send() How does a socket work Socket.onmessage
31. @alexcanessa MyoJS - TopConf Tallinn 2016 What does it mean? WebSockets JSON myo.js Myo { } < /> onmessage send() WS
32. @alexcanessa MyoJS - TopConf Tallinn 2016 What does it mean? WebSockets JSON myo.js Myo { } < /> send() onmessage WS
33. @alexcanessa MyoJS - TopConf Tallinn 2016 Listen for a web socket event Myo.socket.onmessage = Myo.handleMessage; pose : function(myo, data){ myo.trigger(data.pose); myo.trigger('pose', data.pose); }
34. @alexcanessa MyoJS - TopConf Tallinn 2016 Trigger a web socket event vibrate : function(intensity){ intensity = intensity || 'medium'; Myo.socket.send(JSON.stringify(['command',{ "command": "vibrate", "myo": this.connectIndex, "type": intensity }])); return this; }
35. @alexcanessa MyoJS - TopConf Tallinn 2016 WebSockets Browser support 10 12 11 16 O 12.1 7
36. @alexcanessa MyoJS - TopConf Tallinn 2016 Myo Market
37. @alexcanessa MyoJS - TopConf Tallinn 2016 Let’s Snap.
38. @alexcanessa MyoJS - TopConf Tallinn 2016 Questions?
39. @alexcanessa MyoJS - TopConf Tallinn 2016 Grazie @alexcanessa canessa.alex@gmail.com https://github.com/alexcanessa/myojs-from-gesture-to-code https://speakerdeck.com/alexcanessa