Hardware Hacking for Javascript Developers


The Presentation inside:

Slide 0

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


Slide 1

@girlie_mac


Slide 2

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


Slide 3

@girlie_mac


Slide 4

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


Slide 5

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


Slide 6

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


Slide 7

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


Slide 8

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


Slide 9

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


Slide 10

LittleBits @girlie_mac


Slide 11

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


Slide 12

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


Slide 13

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


Slide 14

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); } ready else { event var name = 'pic-' + Date.now() + '.jpg'; callback process.sendfile(name, image); camera.disable(); } }); }); @girlie_mac the port the camera module is plugged in


Slide 15

Selfie with Tessel! @girlie_mac


Slide 16

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


Slide 17

Raspbian OS @girlie_mac


Slide 18

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


Slide 19

LED: Hello World of Hardware @girlie_mac


Slide 20

Circuit LED 3.3V (Raspberry Pi) @girlie_mac


Slide 21

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


Slide 22

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


Slide 23

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


Slide 24

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


Slide 25

Programming MCU with Node.js @girlie_mac


Slide 26

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


Slide 27

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


Slide 28

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


Slide 29

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


Slide 30

Prototyping Smart Stuff @girlie_mac


Slide 31

Streaming Data Data streaming among devices w/ PubNub @girlie_mac


Slide 32

Sending Data from browser var pubnub = PUBNUB.init({ subscribe_key: 'sub-c-...', publish_key: document.querySelector('button') 'pub-c-...' .addEventListener('click', lightOn); }); function lightOn() { button click pubnub.publish({ channel: 'remote-led', message: {light: true}, callback: function(m) {console.log(m);}, error: function(err) {console.log(err);} }); } @girlie_mac <script src="http://cdn.pubnub. com/pubnub-3.7.15.min.js"></script>


Slide 33

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


Slide 34

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


Slide 35

@girlie_mac


Slide 36

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


Slide 37

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 }); } @girlie_mac Send the red value to PubNub to tell the MCU to reflect the change! the value has changed! Publish the new value!


Slide 38

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}); } } }); @girlie_mac to the GPIO pins that connect to LED anodes


Slide 39

KittyCam @girlie_mac


Slide 40

@girlie_mac


Slide 41

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


Slide 42

PIR Sensor @girlie_mac


Slide 43

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); ... @girlie_mac motion detected! Take a photo!


Slide 44

Processing Photo ... spawn.on('exit', function(code) { if((/jpg$/).test(filename)) { var kittydar = require ('kittydar'); 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 } @girlie_mac }); ... a cat detected!


Slide 45

github.com/girliemac/RPi-KittyCam @girlie_mac


Slide 46

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


Slide 47

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


Slide 48

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


Slide 49


×

HTML:





Ссылка: