Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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)

Tomomi Imura

November 13, 2015
Tweet

More Decks by Tomomi Imura

Other Decks in Technology

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 学園祭

    View full-size slide

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

    View full-size slide

  3. @girlie_mac
    Internet of Things の時代
    Source: Cisco IBSG https://www.cisco.com/web/about/ac79/docs/innov/IoT_IBSG_0411FINAL.pdf
    500億!

    View full-size slide

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

    View full-size slide

  5. @girlie_mac
    猫も杓子も
    インターネット
    キタ━━━(゚∀゚)━━━!!!

    View full-size slide

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

    View full-size slide

  7. @girlie_mac
    Arduino (Genuino)
    ● MCU のキット
    ● オープンソースなハードウェア
    とソフトウェア (IDE)
    ● ディベロッパ・フレンドリー

    View full-size slide

  8. @girlie_mac
    LittleBits

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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
    イベント
    コールバック

    View full-size slide

  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

    View full-size slide

  14. @girlie_mac
    Raspbian OS

    View full-size slide

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

    View full-size slide

  16. @girlie_mac
    LED: Hello World of Hardware

    View full-size slide

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

    View full-size slide

  18. @girlie_mac
    オームの法則
    R =
    V - V
    s f
    I
    電源電圧 (V) LED にかかる電圧 (V)
    LED に流れる電流 (A)
    抵抗 (Ω)

    View full-size slide

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

    View full-size slide

  20. @girlie_mac
    ラズベリーパイでの回路
    3.3V
    (Pin 1)
    GND
    アノード
    (足の長い方)
    カソード

    View full-size slide

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

    View full-size slide

  22. @girlie_mac
    Programming MCU with Node.js

    View full-size slide

  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

    View full-size slide

  24. @girlie_mac
    Johnny-Five
    ● JS で書けるロボティクス・フレーム
    ワーク
    ● Arduino 互換機で作動
    ● 他機種はIOプラグインで
    ● http://johnny-five.io/
    Woot!

    View full-size slide

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

    View full-size slide

  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 を使う場合は必要
    なし

    View full-size slide

  27. @girlie_mac
    スマートなんちゃらを
    プロトタイプしてみよう

    View full-size slide

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

    View full-size slide

  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);
    クリックイベントの
    発生

    View full-size slide

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

    View full-size slide

  31. @girlie_mac
    RGB LED で Hue もどきを作る
    カソードコモン4本足 LED
    R
    G
    B
    GND
    アナログ
    PWM pins

    View full-size slide

  32. @girlie_mac
    RGB LED で Hue もどきを作る
    {'red':215,
    'green':50,
    'blue':255}
    publish data
    subscribe data
    Software UI Physical Output

    View full-size slide

  33. @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 で赤色の値が変

    View full-size slide

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

    View full-size slide

  35. @girlie_mac
    KittyCam

    View full-size slide

  36. @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 でデータをサブスク
    ライブ)

    View full-size slide

  37. @girlie_mac
    PIR Sensor(焦電型赤外線センサ)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. @girlie_mac
    github.com/girliemac/RPi-KittyCam

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide