Hardware Hacking for JavaScript Developers

In the era of Internet of Things, connecting things to the mobile devices and web is becoming ubiquitous. You can control room light using your mobile phone. You can monitor your heart rate and weight on browser. Front-end developers like you already have skills to prototype software ideas, so why not prototyping the Internet of Everything?

- Arduino
- Raspberry Pi
- Johnny-Five JS robotics framework

Transcript

1. @girlie_mac
   Hardware Hacking
   for JavaScript Devs
   Tomomi Imura (@girlie_mac)
   Hardware Hacking
   for JavaScript Devs
   https://flic.kr/p/8tuc1u by randomliteraturecouncil CC-BY 2.0
   

   View Slide

2. @girlie_mac
   

   View Slide

3. @girlie_mac
   I am a:
   ● Front-End Engineer
   ● N00b Hardware Hacker
   ● Sr. Developer Evangelist at
   PubNub
   

   View Slide

4. @girlie_mac
   

   View Slide

5. @girlie_mac
   Era of Internet of Things
   Source: Cisco IBSG https://www.cisco.com/web/about/ac79/docs/innov/IoT_IBSG_0411FINAL.pdf
   

   View Slide

6. @girlie_mac
   Withings: Smart Body Analyzer
   GE Link
   Cinder
   Sensing Cooker
   Nest: Learning
   Thermostat
   Whistle: Connected pet collar
   Amazon
   Dash Button
   

   View Slide

7. @girlie_mac
   Thermostats get Internet!
   Bulbs get Internet!
   Everything gets Internet!
   

   View Slide

8. @girlie_mac
   OK, connect
   me with
   InterWeb...
   Srsly, where should I start?
   

   View Slide

9. @girlie_mac
   Arduino
   ● MCU-based kit
   ● Open-Source hardware &
   software (IDE)
   ● The first developer-friendly
   boards
   

   View Slide

10. @girlie_mac
    Arduino
    USB PLUG
    TO
    COMPUTER
    EXTERNAL POWER
    SOURCE
    GPIO DIGITAL PINS
    ANALOG PINS
    

    View Slide

11. @girlie_mac
    LittleBits
    

    View Slide

12. @girlie_mac
    LittleBits & Arduino at Heart
    9V BATTERY
    USB PLUG TO COMPUTER
    MODULES
    

    View Slide

13. @girlie_mac
    Arduino-Compatible MCUs
    BeagleBone
    C.H.I.P
    mCookie
    Petduino
    LinkIt One
    

    View Slide

14. @girlie_mac
    Tessel USB PLUGS TO
    COMPUTER
    ETHERNET
    MODULES
    GPIO DIGITAL PINS
    EXTRA USB
    PORTS
    

    View Slide

15. @girlie_mac
    Programming Tessel in Node.js
    var tessel = require('tessel');
    var camera = require('camera-vc0706').use(tessel.port['A']);
    camera.on('ready', function() {
    camera.takePicture(function(err, image) {
    if (err) { console.log(err); }
    else {
    var name = 'pic-' + Date.now() + '.jpg';
    process.sendfile(name, image);
    camera.disable();
    }
    });
    });
    the port the
    camera module
    is plugged in
    ready
    event
    callback
    

    View Slide

16. @girlie_mac
    Selfie with Tessel!
    

    View Slide

17. @girlie_mac
    Raspberry Pi
    USB TO POWER
    SOURCE
    TO MONITOR
    TO MOUSE
    TO KEYBOARD
    WI-FI ADAPTER
    SD CARD
    GPIO DIGITAL PINS
    4 EXTRA USB
    PORTS
    ETHERNET
    

    View Slide

18. @girlie_mac
    Raspbian OS
    

    View Slide

19. @girlie_mac
    Programming Raspberry Pi
    Pre-installed on RPi:
    C / C++
    

    View Slide

20. @girlie_mac
    LED: Hello World of Hardware
    

    View Slide

21. @girlie_mac
    Circuit
    3.3V
    (Raspberry Pi)
    LED
    

    View Slide

22. @girlie_mac
    Ohm’s Law & Resistors
    R =
    V - V
    s f
    I
    source voltage (V) forward voltage (V) (LED
    voltage drop)
    current thru the LED (A)
    resistance (Ω)
    

    View Slide

23. @girlie_mac
    Ohm’s Law & Resistors
    R =
    3.3 - 1.9
    0.02
    source voltage (V) forward voltage (V) (LED
    voltage drop)
    current thru the LED (A)
    resistance (Ω)
    = 70Ω
    

    View Slide

24. @girlie_mac
    Circuit
    3.3V
    (Pin 1)
    GND
    Anode (longer
    leg)
    Cathode
    

    View Slide

25. @girlie_mac
    Making LED Programmable
    GPIO-4 (Pin 7)
    

    View Slide

26. @girlie_mac
    Programming MCU with Node.js
    

    View Slide

27. @girlie_mac
    Programming Pi with Node.js
    Download & install Node.js with node-arm:
    $ wget http://node-arm.herokuapp.
    com/node_latest_armhf.deb
    $ sudo dpkg -i node_latest_armhf.deb
    

    View Slide

28. @girlie_mac
    Johnny-Five
    ● JavaScript robotics framework
    ● Works with Arduino-compatible
    Boards
    ● IO plugins for more platform
    supports
    ● http://johnny-five.io/
    Woot!
    

    View Slide

29. @girlie_mac
    Johnny-Five & Raspi-io
    npm install johnny-five
    npm install raspi-io
    

    View Slide

30. @girlie_mac
    Blinking LED
    var five = require('johnny-five');
    var raspi = require('raspi-io');
    var board = new five.Board({io: new raspi()});
    board.on('ready', function() {
    var led = new five.Led(7); // Create an instance
    led.blink(500); // "blink" in 500ms on-off phase periods
    });
    Pin 7 (GPIO-4)
    Plugin for RPI
    (Default w/o plugins
    works for all Arduino)
    

    View Slide

31. @girlie_mac
    Prototyping Smart Stuff
    

    View Slide

32. @girlie_mac
    Streaming Data
    Data streaming among devices w/ PubNub
    

    View Slide

33. @girlie_mac
    Sending Data from browser
    var pubnub = PUBNUB.init({
    subscribe_key: 'sub-c-...',
    publish_key: 'pub-c-...'
    });
    function lightOn() {
    pubnub.publish({
    channel: 'remote-led',
    message: {light: true},
    callback: function(m) {console.log(m);},
    error: function(err) {console.log(err);}
    });
    }
    document.querySelector('button')
    .addEventListener('click', lightOn);
    button click
    

    View Slide

34. @girlie_mac
    Receiving Data to MCU
    var pubnub = require('pubnub').init({
    subscribe_key: 'sub-c-...',
    publish_key: 'pub-c-...'
    });
    pubnub.subscribe({
    channel: channel,
    callback: function(m) {
    if(m.blink) {
    // blink LED
    }
    }
    });
    led.pulse();
    

    View Slide

35. @girlie_mac
    Prototyping Hue-clone w/ RGB LED
    Common cathode LED
    R
    G
    B
    GND
    PWM pins
    

    View Slide

36. @girlie_mac
    Prototyping Hue-clone w/ RGB LED
    {'red':215,
    'green':50,
    'blue':255}
    publish data
    subscribe data
    Software UI Physical Output
    

    View Slide

37. @girlie_mac
    Sending Data from browser
    redInput.addEventListener('change', function(e){
    publishUpdate({color: 'red', brightness: +this.value});
    }, false);
    function publishUpdate(data) {
    pubnub.publish({
    channel: 'hue',
    message: data
    });
    }
    Send the red value to PubNub to
    tell the MCU to reflect the
    change!
    the value has
    changed! Publish the
    new value!
    

    View Slide

38. @girlie_mac
    Receiving Data to LED
    pubnub.subscribe({
    channel: 'hue',
    callback: function(m) {
    if(led) {
    r = (m.color === 'red') ? m.brightness : r;
    g = (m.color === 'green') ? m.brightness : g;
    b = (m.color === 'blue') ? m.brightness : b;
    led.color({red: r, blue: b, green: g});
    }
    }
    });
    to the GPIO pins
    that connect to
    LED anodes
    

    View Slide

39. @girlie_mac
    Prototyping Smart Light Bulbs
    

    View Slide

40. @girlie_mac
    KittyCam
    

    View Slide

41. @girlie_mac
    

    View Slide

42. @girlie_mac
    KittyCam in Node.js
    1. Detect motion (Johnny-Five IR.Motion obj)
    2. Take photos (Raspistill, command line tool)
    3. Cat facial detection (KittyDar)
    4. Store the photos in Cloudinary
    5. Publish the data to PubNub
    6. Stream on web (subscribe the data from
    PubNub)
    

    View Slide

43. @girlie_mac
    PIR Sensor
    

    View Slide

44. @girlie_mac
    PIR Sensor > Run Camera
    board.on('ready', function() {
    // Create a new `motion` hardware instance.
    var motion = new five.Motion(7); //a PIR is wired on pin 7 (GPIO 4)
    // 'calibrated' occurs once at the beginning of a session
    motion.on('calibrated', function() {console.log('calibrated');});
    motion.on('motionstart', function() { // Motion detected
    // Run raspistill command to take a photo with the camera module
    var filename = 'photo/image_'+i+'.jpg';
    var args = ['-w', '320', '-h', '240', '-o', filename, '-t', '1'];
    var spawn = child_process.spawn('raspistill', args);
    ...
    motion detected!
    Take a photo!
    

    View Slide

45. @girlie_mac
    Processing Photo
    ...
    spawn.on('exit', function(code) {
    if((/jpg$/).test(filename)) {
    var imgPath = __dirname + '/' + filename;
    // Child process: read the file and detect cats with KittyDar
    var args = [imgPath];
    var fork = child_process.fork(__dirname+'/detectCatsFromPhoto.js');
    fork.send(args);
    // the child process is completed
    fork.on('message', function(base64) {
    if(base64) {
    // Send to cloud storage
    }
    }); ...
    var kittydar = require
    ('kittydar');
    a cat detected!
    

    View Slide

46. @girlie_mac
    github.com/girliemac/RPi-KittyCam
    

    View Slide

47. @girlie_mac
    https://twit.tv/shows/new-screen-savers/episodes/19
    

    View Slide

48. @girlie_mac
    I hacked hardware so you can too!
    Join meetups &
    events like Int’l
    NodeBots Day!
    

    View Slide

49. @girlie_mac
    Thank you!
    @girlie_mac
    github.com/girliemac
    speakerdeck.com/girlie_mac
    pubnub.com
    github.com/pubnub
    

    View Slide