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
   

   View Slide

2. Andrew Nesbitt
   @teabass
   github.com/andrew
   

   View Slide

3. Bertie
   @BertramRabbit
   Mr April 2014
   

   View Slide

4. View Slide

5. View Slide

6. Any application that can
   be written in JavaScript,
   will eventually be written
   in JavaScript
   

   View Slide

7. View Slide

8. patrick-wied.at/static/nudejs/
   

   View Slide

9. patrick-wied.at/static/nudejs/
   

   View Slide

10. bellard.org/jslinux/
    

    View Slide

11. reddit.com/r/atwoodslaw
    

    View Slide

12. Buildcat
    Alex Potsides
    

    View Slide

13. github.com/achingbrain/build-cat
    

    View Slide

14. Hardware hacking
    with Javascript
    

    View Slide

15. Why JAvascript?
    

    View Slide

16. Higher Level
    

    View Slide

17. Async
    

    View Slide

18. Lower
    Barriers
    

    View Slide

19. Javascript is popular
    871,108 JS repos on github
    

    View Slide

20. Internet of
    things
    

    View Slide

21. Hardware
    

    View Slide

22. Arduino
    

    View Slide

23. Johnny-five
    github.com/rwaldron/johnny-five
    

    View Slide

24. Firmata
    

    View Slide

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();
    });
    });
    

    View Slide

26. Kinect Controlled Arm
    

    View Slide

27. Biped Nodebot
    

    View Slide

28. Cat Laser Toy
    

    View Slide

29. Rabbit Laser Toy
    

    View Slide

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)
    })
    

    View Slide

31. DEMO
    

    View Slide

32. View Slide

33. github.com/rwaldron/johnny-five
    

    View Slide

34. Sparkfun
    Inventors Kit
    hobbytronics.co.uk/sparkfun-inventors-kit-v3
    

    View Slide

35. node-ardx.org
    

    View Slide

36. LEGO
    

    View Slide

37. EV3
    

    View Slide

38. View Slide

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 };
    

    View Slide

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
    })
    });
    });
    

    View Slide

41. DEMO
    

    View Slide

42. View Slide

43. View Slide

44. github.com/andrew/node-ev3-robot
    

    View Slide

45. github.com/clebert/ev3
    

    View Slide

46. Linux running on lego
    

    View Slide

47. Nodecopter
    

    View Slide

48. Programmatic Flying Robots
    

    View Slide

49. HD Camera
    Downfacing camera
    Gyroscope
    Wifi 1GHz CPU
    Linux
    Accelerometer Magnetometer
    Ultrasound
    

    View Slide

50. github.com/felixge/node-ar-drone
    

    View Slide

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();
    });
    

    View Slide

52. QR CodeR
    

    View Slide

53. Dance Dance Drone
    

    View Slide

54. DEMO
    

    View Slide

55. WARNING
    

    View Slide

56. github.com/eschnou/ardrone-webflight
    

    View Slide

57. Quadcopters
    as a
    Service
    

    View Slide

58. robot laser pong
    

    View Slide

59. JavaSCript
    Microcontrollers
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. Arduino
    Yun
    

    View Slide

64. £70 £21 £30 £55
    Lua based Tiny-js Node.js or
    browser Node.js
    plug and play Hacker friendly Tiny computer Arduino++
    

    View Slide

65. JavaSCript Hardware
    in the browser
    

    View Slide

66. In Development
    Vibration api
    Ambient light sensor
    Proximity sensor
    TCP Socket API
    wiki.mozilla.org/WebAPI
    

    View Slide

67. Future?
    UDP Datagram Socket API
    WebNFC
    WebUSB
    WebBluetooth
    wiki.mozilla.org/WebAPI
    

    View Slide

68. whatwg.github.io/serial
    

    View Slide

69. Go forth and make
    robots
    

    View Slide

70. No animals were harmed in the making of this presentation
    Thanks!
    

    View Slide

71. Bonus Content
    

    View Slide

72. Kinect Drone
    

    View Slide

73. NoDebots.io
    

    View Slide

74. View Slide

75. View Slide

76. Makey
    Makey
    

    View Slide

77. Rabbit Photo Booth
    

    View Slide

78. 
    
    
    
    
    
    <br/>var video = document.getElementById("v"),<br/>canvas = document.getElementById("c"),<br/>div = document.getElementById('images');<br/>navigator.mozGetUserMedia({video: true}, function(stream) {<br/>video.src = window.URL.createObjectURL(stream);<br/>video.play()<br/>});<br/>takePhoto = function(){<br/>canvas.getContext("2d").drawImage(video, 0, 0, 300, 300);<br/>var img = canvas.toDataURL("image/png");<br/>var image = new Image();<br/>image.width = 320<br/>image.height = 240<br/>div.appendChild(image);<br/>image.src = img;<br/>}<br/>window.onkeypress = function(k){<br/>if(k.charCode === 103){<br/>takePhoto()<br/>}<br/>}<br/>
    
    

    View Slide

79. View Slide