Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hardware Hacking for JavaScript Engineers

807 views

Published on

Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada
More info at www.fitc.ca/webu

Hardware Hacking for JavaScript Engineers
with Tomomi Imura

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

In this talk, Tomomi Imura, a front-end engineer with no background in electrical engineering, shares how she got started with hardware hacking with JavaScript.

OBJECTIVE
To get started with hardware hacking with JavaScript.

TARGET AUDIENCE
Front-end engineers with no prior experiences with hardware.

LEVEL OF KNOWLEDGE
N00b

FIVE THINGS AUDIENCE WILL LEARN
Why the Internet of Things matter to front-end engineers and UX designers
Basic knowledge to get started with hardware
Types of microcontrollers and microprocessors you can hack with JavaScript
Johnny-Five framework
How to prepare yourself to prototype the Internet of Everything

Published in: Internet
  • Be the first to comment

Hardware Hacking for JavaScript Engineers

  1. 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. 2. @girlie_mac
  3. 3. @girlie_mac I am a: ● Front-End Engineer ● N00b Hardware Hacker ● Sr. Developer Evangelist at PubNub ● (Former) Mobile Geek ● Cat Lady of The InterWeb
  4. 4. @girlie_mac
  5. 5. @girlie_mac
  6. 6. @girlie_mac Era of Internet of Things Source: Cisco IBSG https://www.cisco.com/web/about/ac79/docs/innov/IoT_IBSG_0411FINAL.pdf
  7. 7. @girlie_mac Withings: Smart Body Analyzer GE Link Cinder Sensing Cooker Nest: Learning Thermostat Whistle: Connected pet collar Amazon Dash Button
  8. 8. @girlie_mac Thermostats get Internet! Bulbs get Internet! Everything gets Internet!
  9. 9. @girlie_mac OK, connect me with InterWeb... Srsly, where should I start?
  10. 10. @girlie_mac Arduino ● MCU-based kit ● Open-Source hardware & software (IDE) ● The first developer-friendly boards
  11. 11. @girlie_mac Arduino USB PLUG TO COMPUTER EXTERNAL POWER SOURCE GPIO DIGITAL PINS ANALOG PINS
  12. 12. @girlie_mac Microprocessor v. Microcontroller “CPU Core” ● CPU ● Typically used in PC w/ external memory “Computer on chip” ● CPU + Memory + Peripherals ● I/O Interface ● Cost-effective
  13. 13. @girlie_mac LittleBits
  14. 14. @girlie_mac LittleBits & Arduino at Heart 9V BATTERY USB PLUG TO COMPUTER MODULES
  15. 15. @girlie_mac Tessel USB PLUGS TO COMPUTER ETHERNET MODULES GPIO DIGITAL PINS EXTRA USB PORTS
  16. 16. @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
  17. 17. @girlie_mac Selfie with Tessel!
  18. 18. @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
  19. 19. @girlie_mac Raspbian OS
  20. 20. @girlie_mac Programming Raspberry Pi Pre-installed on RPi: C / C++
  21. 21. @girlie_mac LED: Hello World of Hardware
  22. 22. @girlie_mac OMG, Physics: Know Your LEDs! Cathode (-) Anode (+) - + 1.9V 3.2V - +
  23. 23. @girlie_mac Ohm’s Law & Resistors R = V - Vs f I source voltage (V) forward voltage (V) (LED voltage drop) current thru the LED (A) resistance (Ω)
  24. 24. @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Ω
  25. 25. @girlie_mac Breadboard 400-pinMini conductive metal strips goes horizontally Connected! not connected !
  26. 26. @girlie_mac Resistor Color Code (4-Band) 47 x 1000 = 4.7 k Ohms 4 7 102 +/- 5% multiplier tolerance Learn more at: https://learn.adafruit.com/multimeters/resistance
  27. 27. @girlie_mac Resistor Color Code (5-Band) 200 x 1 = 200 Ohms 2 0 100 +/- 1% 0 multiplier tolerance
  28. 28. @girlie_mac Circuit 3.3V (Raspberry Pi) LED
  29. 29. @girlie_mac Circuit 3.3V (Pin 1) GND Anode (longer leg) Cathode
  30. 30. @girlie_mac Programming LED GPIO-4 (Pin 7)
  31. 31. @girlie_mac Blinking LED in Python import RPi.GPIO as GPIO import time GPIO.setmode(GPIO.BCM) LED = 4 GPIO.setup(LED,GPIO.OUT) for i in range(6): GPIO.output(LED,True) time.sleep(0.5) GPIO.output(LED,False) time.sleep(0.5) import RPi.GPIO libs GPIO 4 pin (Pin 7) set LED pin as output toggle light pin signal to low/high to make it blink.
  32. 32. @girlie_mac Programming Pi in Node.js Download & install Node.js from terminal: $ wget http://node-arm.herokuapp. com/node_latest_armhf.deb $ sudo dpkg -i node_latest_armhf.deb
  33. 33. @girlie_mac Meet Johnny-Five! ● JavaScript robotics framework ● Works with Arduino-compatible Boards ● IO plugins for more platform supports Woot!
  34. 34. @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(P1-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)
  35. 35. @girlie_mac Prototyping Smart Stuff
  36. 36. @girlie_mac Prototyping Smart Light Bulbs By Kevin Gleason Vine URL: https://vine. co/v/ehPivZOeK9P Controlling RGB values from a mobile phone
  37. 37. @girlie_mac Smart Home (LEGO Version) By Geremy Cohen
  38. 38. @girlie_mac Smart Home (LEGO Version)
  39. 39. @girlie_mac Starting Simple Vine URL: https://vine. co/v/erUUw2ZUYq e Using Pulse-width modulations to control the brightness of the lights
  40. 40. @girlie_mac Streaming Data Data streaming among devices w/ PubNub
  41. 41. @girlie_mac KittyCam
  42. 42. @girlie_mac
  43. 43. @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)
  44. 44. @girlie_mac I hacked hardware so you can too! Join meetups & events like Int’l NodeBots Day!
  45. 45. @girlie_mac Thank you! @girlie_mac github.com/girliemac speakerdeck.com/girlie_mac

×