MyoJS. From gesture to code - EmberJS DD 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 - EmberJS - Digital Detox - 2016 MyoJS From gesture to code.
2. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 @alexcanessa Italian full stack developer co-founder of bisquits working at DigitalDetox
3. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Myo
4. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016
5. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016
6. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Electromyography (EMG) is an electrodiagnostic technique for evaluating and recording the electrical activity produced by skeletal muscles. EMG
7. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Gestures and motions Double Tap Fist Spread Fingers Wave In Wave Out Rotate Move
8. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 http://diagnostics.myo.com/
9. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Meet the Man With a Myo-Controlled Robotic Arm
10. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Platforms Arduino Virtual Reality Smartphone Web App Computer
11. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Arduino - Door Lock
12. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Augmented Reality - Icarus
13. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Let’s Start.
14. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 var Myo = require('myo'); Myo.connect(‘com.acanessa.myApp’); Myo.on(‘connected', function() { // this is the myo armband this.vibrate(); });
15. @alexcanessa MyoJS - EmberJS - Digital Detox - 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
16. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Let’s Code.
17. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Lights Control
18. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Web Sockets
19. @alexcanessa MyoJS - EmberJS - Digital Detox - 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
20. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Myo.socket = new Socket('ws://127.0.0.1:10138/myo/'); Create the connection
21. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Socket.send() How does a socket work Socket.onmessage
22. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 What does it mean? WebSockets JSON myo.js Myo { } < /> onmessage send() WS
23. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 What does it mean? WebSockets JSON myo.js Myo { } < /> send() onmessage WS
24. @alexcanessa MyoJS - EmberJS - Digital Detox - 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); }
25. @alexcanessa MyoJS - EmberJS - Digital Detox - 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; }
26. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 WebSockets Browser support 10 12 11 16 O 12.1 7
27. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Myo Market
28. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Let’s Snap.
29. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Questions?
30. @alexcanessa MyoJS - EmberJS - Digital Detox - 2016 Grazie @alexcanessa canessa.alex@gmail.com https://github.com/alexcanessa/myojs-from-gesture-to-code https://speakerdeck.com/alexcanessa