MyoJS. From gesture to code - TopConf Linz 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 Linz 2016 MyoJS From gesture to code.
2. @alexcanessa MyoJS - TopConf Linz 2016 @alexcanessa Italian web developer living in London co-founder of bisquits working at DigitalDetox
3. @alexcanessa MyoJS - TopConf Linz 2016 A bit of history Historical Development of Hand Gesture Recognition
4. @alexcanessa MyoJS - TopConf Linz 2016 1919 - Theremin
5. @alexcanessa MyoJS - TopConf Linz 2016 Data Gloves 1989 - Nintendo PowerGlove
6. @alexcanessa MyoJS - TopConf Linz 2016 Data Gloves 1990 - CyberGlove
7. @alexcanessa MyoJS - TopConf Linz 2016 Data Gloves 2002 - P5 Gloves
8. @alexcanessa MyoJS - TopConf Linz 2016 2010 - Kinect
9. @alexcanessa MyoJS - TopConf Linz 2016 2013 - Smart TV
10. @alexcanessa MyoJS - TopConf Linz 2016 2014 - Leap Motion
11. @alexcanessa MyoJS - TopConf Linz 2016 Myo
12. @alexcanessa MyoJS - TopConf Linz 2016
13. @alexcanessa MyoJS - TopConf Linz 2016
14. @alexcanessa MyoJS - TopConf Linz 2016 Electromyography (EMG) is an electrodiagnostic technique for evaluating and recording the electrical activity produced by skeletal muscles. EMG
15. @alexcanessa MyoJS - TopConf Linz 2016 Gestures and motions Double Tap Fist Spread Fingers Wave In Wave Out Rotate Move
16. @alexcanessa MyoJS - TopConf Linz 2016 http://diagnostics.myo.com/
17. @alexcanessa MyoJS - TopConf Linz 2016 Meet the Man With a Myo-Controlled Robotic Arm
18. @alexcanessa MyoJS - TopConf Linz 2016 Platforms Arduino Virtual Reality Smartphone Web App Computer
19. @alexcanessa MyoJS - TopConf Linz 2016 Arduino - Door Lock
20. @alexcanessa MyoJS - TopConf Linz 2016 Augmented Reality - Icarus
21. @alexcanessa MyoJS - TopConf Linz 2016 Let’s Start.
22. @alexcanessa MyoJS - TopConf Linz 2016 var Myo = require('myo'); Myo.connect(‘com.acanessa.myApp’); Myo.on('connected', function() { // this is the myo armband this.vibrate(); });
23. @alexcanessa MyoJS - TopConf Linz 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
24. @alexcanessa MyoJS - TopConf Linz 2016 Let’s Code.
25. @alexcanessa MyoJS - TopConf Linz 2016 Lights Control
26. @alexcanessa MyoJS - TopConf Linz 2016 Web Sockets
27. @alexcanessa MyoJS - TopConf Linz 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
28. @alexcanessa MyoJS - TopConf Linz 2016 Myo.socket = new Socket('ws://127.0.0.1:10138/myo/'); Create the connection
29. @alexcanessa MyoJS - TopConf Linz 2016 Socket.send() How does a socket work Socket.onmessage
30. @alexcanessa MyoJS - TopConf Linz 2016 What does it mean? WebSockets JSON myo.js Myo { } < /> onmessage send() WS
31. @alexcanessa MyoJS - TopConf Linz 2016 What does it mean? WebSockets JSON myo.js Myo { } < /> send() onmessage WS
32. @alexcanessa MyoJS - TopConf Linz 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); }
33. @alexcanessa MyoJS - TopConf Linz 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; }
34. @alexcanessa MyoJS - TopConf Linz 2016 WebSockets Browser support 10 12 11 16 O 12.1 7
35. @alexcanessa MyoJS - TopConf Linz 2016 Myo Market
36. @alexcanessa MyoJS - TopConf Linz 2016 Let’s Snap.
37. @alexcanessa MyoJS - TopConf Linz 2016 Questions?
38. @alexcanessa MyoJS - TopConf Linz 2016 Grazie @alexcanessa canessa.alex@gmail.com https://github.com/alexcanessa/myojs-from-gesture-to-code https://speakerdeck.com/alexcanessa