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

Physical JavaScript with Johnny-5, Cylon and Tessel

mulderp
September 24, 2014

Physical JavaScript with Johnny-5, Cylon and Tessel

A small overview on the current state of JavaScript for physical computing

mulderp

September 24, 2014
Tweet

More Decks by mulderp

Other Decks in Programming

Transcript

  1. Physical NodeJS!
    with Johnny-5, Cylon and Tessel
    Patrick Mulder
    @mulpat
    Munich Node JS User Group
    September 2014

    View Slide

  2. https://www.flickr.com/photos/spelio/13884611917

    View Slide

  3. ngraph
    http://anvaka.github.io/talks/jsfest/presentation

    View Slide

  4. maker labs
    https://www.flickr.com/photos/leesean/3098869562

    View Slide

  5. Source: Sander Arts, Atmel

    View Slide

  6. “inspecting” your car
    https://vimeo.com/84498522

    View Slide

  7. new browser controls
    https://www.flickr.com/photos/frenchhope/317111231
    https://www.flickr.com/photos/bagogames/14073389239

    View Slide

  8. example: blinking
    http://makezine.com/2014/05/29/10-ways-to-make-your-robot-more-humanlike/
    “The average human blink rate is about
    17 blinks per minute.” (ca. 3 blinks/s)
    “The normal length of a blink is
    100-400 milliseconds”

    View Slide

  9. Arduino!
    1x1

    View Slide

  10. Arduino UNO
    MPU
    Digital
    Pins
    Analog
    Pins
    USB
    Power
    Pins

    View Slide

  11. a “typical” project
    configuration
    blocking!
    code
    Processing IDE
    sketch

    View Slide

  12. Embedded Code
    void setup() {!
    pinMode(led, OUTPUT);!
    }!
    !
    void loop() {!
    digitalWrite(led, HIGH);!
    delay(300);!
    digitalWrite(led, LOW); !
    delay(2700); !
    }

    View Slide

  13. blink == blocking ?
    void loop() {!
    !
    blink();!
    !
    check_network();!
    move_something();!
    wait_for_input();!
    write_to_file();!
    }

    View Slide

  14. –Eric Lippert
    “The by-design purpose of
    JavaScript was to make the
    monkey dance when you
    moused over it. ”
    http://programmers.stackexchange.com/a/221658/4723
    JavaScript

    View Slide

  15. How would you
    write this with
    JavaScript ?

    View Slide

  16. blink = function() {!
    led.toggle();!
    setTimeout(blink, 2700);!
    }!
    !
    blink();
    setTimeout(…)

    View Slide

  17. setInterval(…)
    setInterval(function () {!
    led.toggle();!
    }, 2700);

    View Slide

  18. https://github.com/rwaldron/johnny-five
    Johnny-5 API

    View Slide

  19. Johnny-5 API
    this.repl.inject({!
    board: this!
    });
    https://github.com/rwaldron/johnny-five/tree/master/docs
    led.fadeIn();
    led.blink(100); // or led.strobe()
    led.color(keymap[key.name]);

    View Slide

  20. demo
    johnny-5
    http://www.flickr.com/photos/tronixstuff/5268597956/

    View Slide

  21. How can Arduino
    speak JavaScript ?

    View Slide

  22. Firmata protocol
    “The aim is to allow people to
    completely control the Arduino
    from software
    on the host computer.”
    http://www.firmata.org/wiki/Main_Page

    View Slide

  23. firmata sketch

    View Slide

  24. firmata test

    View Slide

  25. control flow
    led = new five.Led({!
    pin: 13!
    });!
    !
    led.on();!
    !
    this.wait(2700, function() {!
    led.on();!
    });
    JavaScript
    https://www.flickr.com/photos/nate/3081263606
    Firmata /!
    serial port
    Arduino

    View Slide

  26. Network?
    This means Arduino Yun…

    View Slide

  27. View Slide

  28. Yun architecture

    View Slide

  29. acts-as-webserver
    http://www.open-electronics.org/interact-and-remotely-control-arduino-yun-with-ajax/#

    View Slide

  30. For developer, OpenWrt is the framework to
    build an application without having to build
    a complete firmware around it
    +
    embedded host

    View Slide

  31. Cylon.js
    http://cylonjs.com/

    View Slide

  32. Cylon.js

    View Slide

  33. led blinking
    var Cylon = require('cylon');!
    !
    Cylon.robot({!
    connection: {!
    name: 'arduino',!
    adaptor: 'firmata',!
    port: '/dev/ttyACM0'!
    },!
    !
    devices: [!
    { name: 'led', driver: 'led', pin: 13 },!
    { name: 'button', driver: 'button', pin: 2 }!
    ],!
    !
    work: function(my) {!
    my.button.on('push', function() {!
    my.led.toggle()!
    });!
    }!
    }).start();

    View Slide

  34. http://www.slideshare.net/TechnicalMachine/tessel-the-end-of-web-development-as-we-know-it
    Tessel is a microcontroller that runs JavaScript.
    It's npm-compatible and ships with Wifi built in.
    Use it to easily make physical devices that connect
    to the web.
    http://www.slideshare.net/TechnicalMachine/fluent-20-min-32416115

    View Slide

  35. How does it work?
    today
    tomorrow

    View Slide

  36. Blink first
    var tessel = require('tessel');!
    !
    var gpioA = tessel.port['A'];!
    !
    var led1 = gpioA.digital[0];!
    !
    var value = true;!
    setInterval(function () {!
    led.write(value);!
    value = !value;!
    }, 2000);

    View Slide

  37. physical JavaScript is fun :)
    still in early stages
    dedicated platforms emerge

    View Slide

  38. Thanks!
    http://blog.farsinotare.com
    https://oshpark.com/shared_projects/ZsQu0dA9
    https://www.kickstarter.com/projects/311408456/rgb-123-led-matrices

    View Slide

  39. View Slide

  40. View Slide

  41. https://iotroadshow.intel.com/de/home/

    View Slide