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 full-size slide

  2. Andrew Nesbitt
    @teabass
    github.com/andrew

    View full-size slide

  3. Bertie
    @BertramRabbit
    Mr April 2014

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. bellard.org/jslinux/

    View full-size slide

  8. reddit.com/r/atwoodslaw

    View full-size slide

  9. Buildcat
    Alex Potsides

    View full-size slide

  10. github.com/achingbrain/build-cat

    View full-size slide

  11. Hardware hacking
    with Javascript

    View full-size slide

  12. Why JAvascript?

    View full-size slide

  13. Higher Level

    View full-size slide

  14. Lower
    Barriers

    View full-size slide

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

    View full-size slide

  16. Internet of
    things

    View full-size slide

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

    View full-size slide

  18. 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 full-size slide

  19. Kinect Controlled Arm

    View full-size slide

  20. Biped Nodebot

    View full-size slide

  21. Cat Laser Toy

    View full-size slide

  22. Rabbit Laser Toy

    View full-size slide

  23. 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 full-size slide

  24. github.com/rwaldron/johnny-five

    View full-size slide

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

    View full-size slide

  26. node-ardx.org

    View full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

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

    View full-size slide

  30. github.com/clebert/ev3

    View full-size slide

  31. Linux running on lego

    View full-size slide

  32. Programmatic Flying Robots

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  35. 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 full-size slide

  36. Dance Dance Drone

    View full-size slide

  37. github.com/eschnou/ardrone-webflight

    View full-size slide

  38. Quadcopters
    as a
    Service

    View full-size slide

  39. robot laser pong

    View full-size slide

  40. JavaSCript
    Microcontrollers

    View full-size slide

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

    View full-size slide

  42. JavaSCript Hardware
    in the browser

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. whatwg.github.io/serial

    View full-size slide

  46. Go forth and make
    robots

    View full-size slide

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

    View full-size slide

  48. Bonus Content

    View full-size slide

  49. Kinect Drone

    View full-size slide

  50. Rabbit Photo Booth

    View full-size slide







  51. <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 full-size slide