Physical JavaScript with Johnny-5, Cylon and Tessel

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

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