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 - PubNub Data Stream

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 - Vs 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
<script src="http://cdn.pubnub.
com/pubnub-3.7.15.min.js"></script>

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

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

36. @girlie_mac

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

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

39. @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

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