Slide 1

Slide 1 text

@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

Slide 2

Slide 2 text

@girlie_mac

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

@girlie_mac

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

@girlie_mac LittleBits

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

@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

Slide 16

Slide 16 text

@girlie_mac Selfie with Tessel!

Slide 17

Slide 17 text

@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

Slide 18

Slide 18 text

@girlie_mac Raspbian OS

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

@girlie_mac LED: Hello World of Hardware

Slide 21

Slide 21 text

@girlie_mac Circuit 3.3V (Raspberry Pi) LED

Slide 22

Slide 22 text

@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 (Ω)

Slide 23

Slide 23 text

@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Ω

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

@girlie_mac Programming MCU with Node.js

Slide 27

Slide 27 text

@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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

@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)

Slide 31

Slide 31 text

@girlie_mac Prototyping Smart Stuff

Slide 32

Slide 32 text

@girlie_mac Streaming Data Data streaming among devices w/ PubNub

Slide 33

Slide 33 text

@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

Slide 34

Slide 34 text

@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();

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

@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!

Slide 38

Slide 38 text

@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

Slide 39

Slide 39 text

@girlie_mac Prototyping Smart Light Bulbs

Slide 40

Slide 40 text

@girlie_mac KittyCam

Slide 41

Slide 41 text

@girlie_mac

Slide 42

Slide 42 text

@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)

Slide 43

Slide 43 text

@girlie_mac PIR Sensor

Slide 44

Slide 44 text

@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!

Slide 45

Slide 45 text

@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!

Slide 46

Slide 46 text

@girlie_mac github.com/girliemac/RPi-KittyCam

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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