[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers (Japanese | 日本語)

1b741e5d8f5efe12c6307db4ebfab8f9?s=47 Tomomi Imura
November 13, 2015

[Tokyo NodeFest 2015] Hardware Hacking for Javascript Developers (Japanese | 日本語)

電球をスマホから作動できたり、体重や心拍数をブラウザからモニタリングできたり、いろいろなモノがモバイルやインターネット上に接続されるようになり、今やモノのインターネット (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)

1b741e5d8f5efe12c6307db4ebfab8f9?s=128

Tomomi Imura

November 13, 2015
Tweet

Transcript

  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
  5. @girlie_mac 猫も杓子も インターネット キタ━━━(゚∀゚)━━━!!!

  6. @girlie_mac ニュータイプ なのか…? Srsly, where should I start?

  7. @girlie_mac Arduino (Genuino) • MCU のキット • オープンソースなハードウェア とソフトウェア (IDE)

    • ディベロッパ・フレンドリー
  8. @girlie_mac LittleBits

  9. @girlie_mac LittleBits & Arduino at Heart 9V BATTERY USB PLUG

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

  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
  14. @girlie_mac Raspbian OS

  15. @girlie_mac Programming Raspberry Pi プリインストールされた言語 C / C++

  16. @girlie_mac LED: Hello World of Hardware

  17. @girlie_mac Circuit 電気回路 3.3V (Raspberry Pi) LED

  18. @girlie_mac オームの法則 R = V - V s f I

    電源電圧 (V) LED にかかる電圧 (V) LED に流れる電流 (A) 抵抗 (Ω)
  19. @girlie_mac オームの法則と抵抗 R = 3.3 - 1.9 0.02 電源電圧 (V)

    LED にかかる電圧 (V) LED に流れる電流 (A) 抵抗 (Ω) = 70Ω
  20. @girlie_mac ラズベリーパイでの回路 3.3V (Pin 1) GND アノード (足の長い方) カソード

  21. @girlie_mac LED をプログラムで操作 GPIO-4 (Pin 7)

  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 を使う場合は必要 なし
  27. @girlie_mac スマートなんちゃらを プロトタイプしてみよう

  28. @girlie_mac デバイス間データのストリーミング PubNub を使って Publish/Subscribe

  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 もどきを作る カソードコモン4本足 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
  36. @girlie_mac KittyCam

  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 でデータをサブスク ライブ)
  39. @girlie_mac PIR Sensor(焦電型赤外線センサ)

  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!
  42. @girlie_mac github.com/girliemac/RPi-KittyCam

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

  44. @girlie_mac I hacked hardware so you can too! International NodeBots

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