Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript in the Real World

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/

Andrew Nesbitt

November 08, 2013
Tweet

More Decks by Andrew Nesbitt

Other Decks in Programming

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