JavaScript in the Real World

Anything that can be written in JavaScript, will eventually be written in JavaScript. First client side web apps, then server side programs and now you can control hardware, embedded devices and even flying robots with JavaScript.

We'll look at how you can get started writing JavaScript for Ardunio and Raspberry Pi to read sensors and control servos and build your own JavaScript powered robots.

Presented at http://2013.full-frontal.org/

Transcript

1. Javascript in the real world
2. Andrew Nesbitt @teabass github.com/andrew
3. Bertie @BertramRabbit Mr April 2014
6. Any application that can be written in JavaScript, will eventually be written in JavaScript
8. patrick-wied.at/static/nudejs/
9. patrick-wied.at/static/nudejs/
10. bellard.org/jslinux/
11. reddit.com/r/atwoodslaw
12. Buildcat Alex Potsides
13. github.com/achingbrain/build-cat
14. Hardware hacking with Javascript
15. Why JAvascript?
16. Higher Level
17. Async
18. Lower Barriers
19. Javascript is popular 871,108 JS repos on github
20. Internet of things
21. Hardware
22. Arduino
23. Johnny-five github.com/rwaldron/johnny-five
24. Firmata
25. var five = require("johnny-five"); var board = new five.Board(); board.on("ready", function() { led = new five.Led({ pin: 9 }); board.repl.inject({ led: led }); led.pulse(500); this.wait( 10000, function() { led.stop().off(); }); });
26. Kinect Controlled Arm
27. Biped Nodebot
28. Cat Laser Toy
29. Rabbit Laser Toy
30. var five = require("johnny-five"), board = new five.Board(); function randomFromInterval(from,to){ return Math.floor(Math.random()*(to-from+1)+from); } board.on("ready", function() { var servoX = new five.Servo(10); var servoY = new five.Servo(9); var laser = new five.Led(8); laser.on() setInterval(function(){ x = randomFromInterval(80, 120) y = randomFromInterval(95, 145) servoX.move(x) servoY.move(y) }, 400) })
31. DEMO
33. github.com/rwaldron/johnny-five
34. Sparkfun Inventors Kit hobbytronics.co.uk/sparkfun-inventors-kit-v3
35. node-ardx.org
36. LEGO
37. EV3
39. var Ev3 = require ("ev3-nodejs-bt"); var Ev3_base = Ev3.base; var XboxController = require('xbox-controller'); var xbox = new XboxController; var robot = new Ev3_base("/dev/tty.EV3-SerialPort"); var maxAngle = 32768; var maxSpeed = 100; var speeds = { a: 0, b: 0, c: 0, d: 0 };
40. robot.connect(function(){ robot.start_program(function(ev3){ var setSpeed = function(){ var output = ev3.getOutputSequence(speeds.a,speeds.b,speeds.c,speeds.d); ev3.sp.write(output); } setInterval(setSpeed, 100) xbox.on('left:move', function(position){ var x = -(position.x / maxAngle)*-maxSpeed var y = (position.y / maxAngle)*-maxSpeed var left = y-x var right = y+x speeds.b = left speeds.a = right }) xbox.on('a:press', function(){ speeds.d = 100 }) xbox.on('a:release', function(){ speeds.d = 0 }) }); });
41. DEMO
44. github.com/andrew/node-ev3-robot
45. github.com/clebert/ev3
46. Linux running on lego
47. Nodecopter
48. Programmatic Flying Robots
49. HD Camera Downfacing camera Gyroscope Wifi 1GHz CPU Linux Accelerometer Magnetometer Ultrasound
50. github.com/felixge/node-ar-drone
51. var arDrone = require('ar-drone'); var client = arDrone.createClient(); client.takeoff(); client .after(5000, function() { this.clockwise(0.5); }) .after(3000, function() { this.animate('flipLeft', 15); }) .after(1000, function() { this.stop(); this.land(); });
52. QR CodeR
53. Dance Dance Drone
54. DEMO
55. WARNING
56. github.com/eschnou/ardrone-webflight
57. Quadcopters as a Service
58. robot laser pong
59. JavaSCript Microcontrollers
63. Arduino Yun
64. £70 £21 £30 £55 Lua based Tiny-js Node.js or browser Node.js plug and play Hacker friendly Tiny computer Arduino++
65. JavaSCript Hardware in the browser
66. In Development Vibration api Ambient light sensor Proximity sensor TCP Socket API wiki.mozilla.org/WebAPI
67. Future? UDP Datagram Socket API WebNFC WebUSB WebBluetooth wiki.mozilla.org/WebAPI
68. whatwg.github.io/serial
69. Go forth and make robots
70. No animals were harmed in the making of this presentation Thanks!
71. Bonus Content
72. Kinect Drone
73. NoDebots.io
76. Makey Makey
77. Rabbit Photo Booth
78. <html> <body> <video id="v" width="300" height="300" style="display:none;"></video> <canvas id="c" style="display:none;" width="300" height="300"></canvas> <div id='images'></div> </body> <script> var video = document.getElementById("v"), canvas = document.getElementById("c"), div = document.getElementById('images'); navigator.mozGetUserMedia({video: true}, function(stream) { video.src = window.URL.createObjectURL(stream); video.play() }); takePhoto = function(){ canvas.getContext("2d").drawImage(video, 0, 0, 300, 300); var img = canvas.toDataURL("image/png"); var image = new Image(); image.width = 320 image.height = 240 div.appendChild(image); image.src = img; } window.onkeypress = function(k){ if(k.charCode === 103){ takePhoto() } } </script> </html>