スマートIoT照明をArduino(Johnny-Five)とPubNubでプロトタイプモデルを構築

posted： 2016-06-04　　category：web

前回はArduinoをJohnny-Fiveを使ってLチカすることが出来ました。
今回はフルカラーLEDを使ってスマート照明的なシステムを構築してみたいと思います。

参考記事: 『JavaScriptエンジニアへのIoTのすすめ：Node.jsとArduinoでスマートデバイスのプロトタイプをしてみよう』
- @girlie_mac

『電子回路を作る基礎を学びNode.jsでボードを操ろう』
- @y_iwanaga_

『JavaScriptでArduinoをコントロール ― 第1回 Lチカ(LEDチカチカ)させてみよう！』
- @umi_kappa
参考リポジトリ: https://github.com/girliemac/arduino-led-rgb/tree/gh-pages

スマート照明のプロトタイプモデルを構築

スマート照明と言うと代表的なのがPhilips Hueなどがありますが、Wi-Fiやインターネットを経由しスマホやタブレットからon-offや色調をコントロールできるユニークな機能を持っています。
ArduinoとRGB LEDを使ってHTML５（ブラウザ）から色調制御をするのが今回の目的です。

JavaScriptでリアルタイム通信アプリの作成

今回のシステム構築のキモであるHTML５（ブラウザ）から色調制御すると言うことは、どこからでもコントロールが可能になるということで、いよいよInternet of Thingsっぽくなってきたと興奮を覚えるのですが、実際に複数デバイスやブラウザ間でのリアルタイムでデータのやり取りをするということは、実装はかなり面倒らしくなかなかとっつきにくいイメージもあると思います。

そこで、面倒なデータのやり取りの実装はサービスPubNubのJavaScript APIに任せて2Way コミュニケーションを可能にして、Pub-Sub(Publish - Subscribe)のモデルを使ったリアルタイム通信を実現したいと思います。

PubNubはグローバルなデータストリームネットワーク (DSN)のサービスで、このAPIを使ってリアルタイムアプリケーション、IoTデバイスなどを接続、拡張、管理することができます。
- @girlie_mac

Pub Nub Publish - Subscribe イメージ

今回必要なハードウェア

ARDUINO：Arduino UNO R3
ブレッドボード
ジャンパーワイヤー × 4
RGB LED（アノードコモン）
抵抗器（330Ω × 3）

必要なハードウェア

RGBフルカラーLED

赤、緑、青の三原色が一体にになっているLEDで、RGB(Red-Green-Blue)の組み合わせで発色させることができる。
今回使うのは各色ピンが一本ずつとアノードの4ピンのもの。

RGB LED

電気回路図

Arduino側に差し込むピンは、PWM (Pulse Width Modulation)パルス幅変調のピンを使用します。
一般のデジタルピンはon-offの2つのステートしか表現されていない。Lチカはこのオンとオフ交互に発することによって表現出来たが、フルカラーLEDで色を表現するには各色の値の組み合わせで色を作り出すので中間の値が必要になるため、アナログであるPWMピンを使う。

電気回路図

RGBフルカラーLEDをArduino Johnny-Fiveで制御してみる

まずは前回の要領でRGB LEDをJohnny-Fiveで点灯させてみます。
作業ディレクトリにnpmを使ってJohnny-Fiveをインストールする。

$ npm install johnny-five

同じディレクトリに適当なjsファイルを作成します（例：test.js）

$ touch test.js

test.jsに記述される内容は以下の通り。
(アノードコモンのLEDなのでisAnode: trueになる。)

var five = require('johnny-five');
var led;

five.Board().on('ready', function() {
  console.log('ready');

  // RGB LED初期化
  led = new five.Led.RGB({
    pins: { // PWM-pinの番号
      red: 6,
      green: 5,
      blue: 3
    },
    isAnode: true
  });

  led.color({red: 0, green: 255, blue: 0});
  led.on();
});

test.jsを実行。

$ node test.js

greenの値が255なので緑色に光るはずです。
Johnny-FiveはRGBカラーモデルの加法混合で、色の明度の数値も0から255までの数字は16進法でも表されています。
当然red:255, green: 255, blue: 255の場合は白くなります。

電気回路図

LEDがカソードコモンの場合はDigitalのGNDにつないでみてください。
LEDによってピンの順番が違う場合もあります。

ブラウザで表示するリモートコントローラーUIを作成

hrml5/CSSでLEDを制御するためのコントローラーを作ります。

各色0〜255までの値、step="1"刻みで調節できるフェーダーを作ります。

そしてJavaScriptで変更された値に対してArduinoに反映すべく制御を加えていきます。
PubNub JavaScript APIを読み込みます。

PubNub JavaScript APIキーの取得をする。

var pubnub = PUBNUB.init({
  publish_key: '取得したpublishキー',
  subscribe_key: '取得したsubscribeキー'
});

作成したDOMのフェーダーの値に変更があると関数 publishUpdateが実行されpublishメドッドで送信されるようにします。

function publishUpdate(data) {
  pubnub.publish({
    channel: channel,
    message: data
  });
}

red.addEventListener('change', function(e){
      brightness.r = this.value;
      publishUpdate(brightness);
    }, false);

Arduino Johnny-FiveもPubNubに繋がってIoTデバイスとして振る舞う

先ほどの作業ディレクトリにnpmでpubnubをインストール。

$ npm install pubnub

同じく APIキーの取得をする。

var pubnub = PUBNUB.init({
  publish_key: '取得したpublishキー',
  subscribe_key: '取得したsubscribeキー'
});

channelにデータを送信、するとsubscribeメソッドのcallbackを返す。
コールバックのデータはLEDに色データとして反映される。

pubnub.subscribe({
  channel: channel,
  callback: setLedColor,
  connect: initLedColor,
  error: function(err) {console.log(err);}
});

function setLedColor(m) {
  led.color({red: m.r, green: m.g, blue: m.b});
  console.log( 'color change to...' );
  console.log( led.color() );
}

function initLedColor() {
  pubnub.history({
    channel: channel,
    count: 1,
    callback: function(messages) {
      messages[0].forEach(function(m) {
        setLedColor(m);
      });
    }
  });
}

DOMのフェーダーの値に応じてリアルタイムにLEDの色彩が変化しています。

ブラウザからArduinoを制御