Hardware Hacking for JavaScript Developers

1b741e5d8f5efe12c6307db4ebfab8f9?s=47 Tomomi Imura
September 16, 2015

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

1b741e5d8f5efe12c6307db4ebfab8f9?s=128

Tomomi Imura

September 16, 2015
Tweet

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
  2. @girlie_mac

  3. @girlie_mac I am a: • Front-End Engineer • N00b Hardware

    Hacker • Sr. Developer Evangelist at PubNub
  4. @girlie_mac

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

  6. @girlie_mac Withings: Smart Body Analyzer GE Link Cinder Sensing Cooker

    Nest: Learning Thermostat Whistle: Connected pet collar Amazon Dash Button
  7. @girlie_mac Thermostats get Internet! Bulbs get Internet! Everything gets Internet!

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

    start?
  9. @girlie_mac Arduino • MCU-based kit • Open-Source hardware & software

    (IDE) • The first developer-friendly boards
  10. @girlie_mac Arduino USB PLUG TO COMPUTER EXTERNAL POWER SOURCE GPIO

    DIGITAL PINS ANALOG PINS
  11. @girlie_mac LittleBits

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

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

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

    PINS EXTRA USB PORTS
  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
  16. @girlie_mac Selfie with Tessel!

  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
  18. @girlie_mac Raspbian OS

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

  20. @girlie_mac LED: Hello World of Hardware

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

  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 (Ω)
  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Ω
  24. @girlie_mac Circuit 3.3V (Pin 1) GND Anode (longer leg) Cathode

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

  26. @girlie_mac Programming MCU with Node.js

  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
  28. @girlie_mac Johnny-Five • JavaScript robotics framework • Works with Arduino-compatible

    Boards • IO plugins for more platform supports • http://johnny-five.io/ Woot!
  29. @girlie_mac Johnny-Five & Raspi-io npm install johnny-five npm install raspi-io

  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)
  31. @girlie_mac Prototyping Smart Stuff

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

  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
  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();
  35. @girlie_mac Prototyping Hue-clone w/ RGB LED Common cathode LED R

    G B GND PWM pins
  36. @girlie_mac Prototyping Hue-clone w/ RGB LED {'red':215, 'green':50, 'blue':255} publish

    data subscribe data Software UI Physical Output
  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!
  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
  39. @girlie_mac Prototyping Smart Light Bulbs

  40. @girlie_mac KittyCam

  41. @girlie_mac

  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)
  43. @girlie_mac PIR Sensor

  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!
  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!
  46. @girlie_mac github.com/girliemac/RPi-KittyCam

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

  48. @girlie_mac I hacked hardware so you can too! Join meetups

    & events like Int’l NodeBots Day!
  49. @girlie_mac Thank you! @girlie_mac github.com/girliemac speakerdeck.com/girlie_mac pubnub.com github.com/pubnub