[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers
9 likes14,200 views
電球をスマホから作動できたり、体重や心拍数をブラウザからモニタリングできたり、いろいろなモノがモバイルやインターネット上に接続されるようになり、今やモノのインターネット (Internet of Things) の時代と言われています。Web Developer は既にソフトウェアでアプリケーションのプロトタイプをするスキルを持ち合わせているのだから、この際ハードウェアも含めて Internet of Everything のプロトタイプをしてみませんか？ このスライドは、2015年11月7日に東京、渋谷で行われた NodeFest からのもので、Node.js / Johnny-Five を使って Arduino や Raspberry Pi と、Front-end JavaScript そして PubNub を使ってモノのインターネットのプロトタイプをしてみよう、という内容です。 - Arduino - Raspberry Pi - Johnny-Five JS robotics framework - PubNub - Prototyping Phillips Hue Clone - KittyCam (Raspberry Pi camera w/ cat facial recognition)
![@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();
}
});
});
カメラモジュールの
差し込まれたポート
ready
イベント
コールバック](https://image.slidesharecdn.com/nodefesthardwarehackingforjavascriptdevelopers-151107050537-lva1-app6891/85/Tokyo-NodeFest-2015-Hardware-Hacking-for-Javascript-Developers-12-320.jpg)
![@girlie_mac
MCU でデータを受信
var led = new five.Led.RGB([7, 5, 3]);
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});
}
}
});
GPIO ピンに接続
された LED ア
ノードに各色の
値を伝達
http://johnny-five.io/examples/led-rgb/
pin#s for R, G, B](https://image.slidesharecdn.com/nodefesthardwarehackingforjavascriptdevelopers-151107050537-lva1-app6891/85/Tokyo-NodeFest-2015-Hardware-Hacking-for-Javascript-Developers-35-320.jpg)
![@girlie_mac
PIR Sensor > Run Camera
board.on('ready', function() {
// `motion` ハードウェア・インスタンスを生成
var motion = new five.Motion(7); //pin 7 (GPIO 4) にワイヤーが接続
// セッションが始まると 'calibrated' が発火
motion.on('calibrated', function() {console.log('calibrated');});
motion.on('motionstart', function() { // 動きが感知されたぞ！
// raspistill コマンドでカメラを動かす
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!](https://image.slidesharecdn.com/nodefesthardwarehackingforjavascriptdevelopers-151107050537-lva1-app6891/85/Tokyo-NodeFest-2015-Hardware-Hacking-for-Javascript-Developers-40-320.jpg)
![@girlie_mac
Processing Photo
...
spawn.on('exit', function(code) {
if((/jpg$/).test(filename)) {
var imgPath = __dirname + '/' + filename;
// Child process: 画像ファイルを読み取り、別プロセスで 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) {
// クラウドストレージへ送る
}
}); ...
var kittydar = require
('kittydar');
a cat detected!](https://image.slidesharecdn.com/nodefesthardwarehackingforjavascriptdevelopers-151107050537-lva1-app6891/85/Tokyo-NodeFest-2015-Hardware-Hacking-for-Javascript-Developers-41-320.jpg)
[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers
- 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 2015 東京 Node 学園祭
- 2. @girlie_mac I am a: ● Front-End Engineer ● N00b Hardware Hacker ● Sr. Developer Evangelist at PubNub ● San Francisco Dweller
- 3. @girlie_mac Internet of Things の時代 Source: Cisco IBSG https://www.cisco.com/web/about/ac79/docs/innov/IoT_IBSG_0411FINAL.pdf 500億！
- 4. @girlie_mac Withings: Smart Body Analyzer GE Link Cinder Sensing Cooker Nest: Learning Thermostat Whistle: Connected pet collar Amazon Dash Button
- 6. @girlie_mac ニュータイプ なのか…？ Srsly, where should I start?
- 7. @girlie_mac Arduino (Genuino) ● MCU のキット ● オープンソースなハードウェア とソフトウェア (IDE) ● ディベロッパ・フレンドリー
- 9. @girlie_mac LittleBits & Arduino at Heart 9V BATTERY USB PLUG TO COMPUTER MODULES
- 11. @girlie_mac Tessel USB PLUGS TO COMPUTER ETHERNET MODULES GPIO DIGITAL PINS EXTRA USB PORTS
- 12. @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(); } }); }); カメラモジュールの 差し込まれたポート ready イベント コールバック
- 13. @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
- 16. @girlie_mac LED: Hello World of Hardware
- 18. @girlie_mac オームの法則 R = V - Vs f I 電源電圧 (V) LED にかかる電圧 (V) LED に流れる電流 (A) 抵抗 (Ω)
- 19. @girlie_mac オームの法則と抵抗 R = 3.3 - 1.9 0.02 電源電圧 (V) LED にかかる電圧 (V) LED に流れる電流 (A) 抵抗 (Ω) = 70Ω
- 22. @girlie_mac Programming MCU with Node.js
- 23. @girlie_mac Programming Pi with Node.js node-arm を使って Node.js をインストール $ wget http://node-arm.herokuapp.com/node_latest_armhf.deb $ sudo dpkg -i node_latest_armhf.deb もしくは特定バージョンの Node
- 24. @girlie_mac Johnny-Five ● JS で書けるロボティクス・フレーム ワーク ● Arduino 互換機で作動 ● 他機種はIOプラグインで ● http://johnny-five.io/ Woot!
- 25. @girlie_mac Johnny-Five & Raspi-io $ npm install johnny-five $ npm install raspi-io
- 26. @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); // インスタンスの作成 led.blink(500); // 500ms 間隔の on-off フェイズで "blink" （チカチカ） させる }); Pin 7 (GPIO-4) ラズパイ用プラグイン。 Arduino を使う場合は必要 なし
- 29. @girlie_mac ブラウザからデータを送信 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); クリックイベントの 発生 <script src="http://cdn.pubnub. com/pubnub-3.7.15.min.js"></script>
- 30. @girlie_mac MCU でデータを受信 var pubnub = require('pubnub').init({ subscribe_key: 'sub-c-...', publish_key: 'pub-c-...' }); pubnub.subscribe({ channel: 'remote-led', callback: function(m) { if(m.light) { // Johnny-Five でLチカ！ } } }); led.pulse();
- 31. @girlie_mac RGB LED で Hue もどきを作る カソードコモン４本足 LED R G B GNDアナログ PWM pins
- 32. @girlie_mac
- 33. @girlie_mac RGB LED で Hue もどきを作る {'red':215, 'green':50, 'blue':255} publish data subscribe data Software UI Physical Output
- 34. @girlie_mac ブラウザからデータを送信 redInput.addEventListener('change', function(e){ publishUpdate({color: 'red', brightness: +this.value}); }, false); function publishUpdate(data) { pubnub.publish({ channel: 'hue', message: data }); } その値を PubNub に送信し て、MCU 側に伝える UI で赤色の値が変 更
- 35. @girlie_mac MCU でデータを受信 var led = new five.Led.RGB([7, 5, 3]); 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}); } } }); GPIO ピンに接続 された LED ア ノードに各色の 値を伝達 http://johnny-five.io/examples/led-rgb/ pin#s for R, G, B
- 37. @girlie_mac
- 38. @girlie_mac KittyCam in Node.js 1. 動きを察知 (Johnny-Five IR.Motion obj) 2. 写真を撮影 (Raspistill, command line tool) 3. ネコ顔認識 (KittyDar) 4. クラウド (Cloudinary) に写真を保存 5. データを PubNub でパプリッシュ 6. web でストリーム (PubNub でデータをサブスク ライブ)
- 40. @girlie_mac PIR Sensor > Run Camera board.on('ready', function() { // `motion` ハードウェア・インスタンスを生成 var motion = new five.Motion(7); //pin 7 (GPIO 4) にワイヤーが接続 // セッションが始まると 'calibrated' が発火 motion.on('calibrated', function() {console.log('calibrated');}); motion.on('motionstart', function() { // 動きが感知されたぞ！ // raspistill コマンドでカメラを動かす 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!
- 41. @girlie_mac Processing Photo ... spawn.on('exit', function(code) { if((/jpg$/).test(filename)) { var imgPath = __dirname + '/' + filename; // Child process: 画像ファイルを読み取り、別プロセスで 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) { // クラウドストレージへ送る } }); ... var kittydar = require ('kittydar'); a cat detected!
- 44. @girlie_mac I hacked hardware so you can too! International NodeBots Day!