スマートIoT照明をArduino(Johnny-Five)とPubNubでプロトタイプモデルを構築
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を使ってHTML5(ブラウザ)から色調制御をするのが今回の目的です。
JavaScriptでリアルタイム通信アプリの作成
今回のシステム構築のキモであるHTML5(ブラウザ)から色調制御すると言うことは、どこからでもコントロールが可能になるということで、いよいよInternet of Thingsっぽくなってきたと興奮を覚えるのですが、実際に複数デバイスやブラウザ間でのリアルタイムでデータのやり取りをするということは、実装はかなり面倒らしくなかなかとっつきにくいイメージもあると思います。
そこで、面倒なデータのやり取りの実装はサービスPubNubのJavaScript APIに任せて2Way コミュニケーションを可能にして、Pub-Sub(Publish - Subscribe)のモデルを使ったリアルタイム通信を実現したいと思います。
PubNubはグローバルなデータストリームネットワーク (DSN)のサービスで、このAPIを使ってリアルタイムアプリケーション、IoTデバイスなどを接続、拡張、管理することができます。
- @girlie_mac
今回必要なハードウェア
- ARDUINO:Arduino UNO R3
- ブレッドボード
- ジャンパーワイヤー × 4
- RGB LED(アノードコモン)
- 抵抗器 (330Ω × 3)
RGBフルカラーLED
赤、緑、青の三原色が一体にになっているLEDで、RGB(Red-Green-Blue)の組み合わせで発色させることができる。
今回使うのは各色ピンが一本ずつとアノードの4ピンのもの。
電気回路図
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の色彩が変化しています。
このプロトタイプデバイスの作成で、リモートコントロールのイメージが明確になりました。
もっと機能を拡張していっても面白そうです。