EONでPubNubのリアルタイムデータを可視化する

　EONは、PubNubのデータをリアルタイムに可視化するためのJavaScriptフレームワークです。このEONを使って、Arduinoで計測した温度データを可視化してみます。




 Arduinoのセットアップや回路については、「PubNub+Google Chart(Gauge)でセンサー・データを可視化する」を参照してください。


①パブリッシャー側のコード
　Arudinoで計測した温度データをパブリッシュ(発行)するJavaScriptコードを記述します。

 　パブリッシュするデータは、次の書式で指定します。

｛ eon : {  key1 : value,, key2 : value,・・・・keyN : value}}


②サブスクライバー(ブラウザ)側のコード
　温度データをサブスクライブ(購読)し、グラフ化して表示するるJavaScriptコードを記述します。

Arudino+carriotsでIoT-データのプッシュ(転送)

　carriotsには、HTTP通信を使用して、データを外部にプッシュ（転送）する「Trigger」という仕組みが用意されいます。そこで、「Trigger」を使って、データをIFTTTのMakerに転送する方法を説明します。

　IFTTTのMaker、およびレシピの作成方法については、次の記事を参照してください。
　・IFTTTを使ってセンサー・データをGoogleドライブ(スプレッドシート)に記録する(Arduino編)

1.CONTROL PANELの左サイドメニューの「Push(Trigger)」をクリックします。
2.[＋New]をクリックします。
3.各項目に次のように入力します。

Name : 任意の名前
Max retries : 最大リトライ回数
Url : https://maker.ifttt.com/trigger/<Event Name>/with/key/<your key>
Vervb : POST
Payload : value1=%%%<データ名>%%%

<Event_Name>には、レシピのEvent Nameを、<Your Key>には、IFTTTのKeyを入力します。
<データ名>には、プッシュするデータの名前(例：temperature)を入力します。




4.[Add another header]をクリックし、次の2つのHTTPヘッダー情報を追加します。

key : Accept
Value : application/json

key : Content-Type
Value : application/x-www-form-urlencoded




5.[Save]をクリックして保存します。

Arudino+carriotsでIoT-センサー・データの監視と通知

　carriotsでセンサー・データやデバイスを監視するには、「Listener」(リスナ)を使います。たとえば、温度データ(temperature)が30より大きくなったら、メールで通知するListenerを作成するには、次のように操作します。

1.CONTROL PANELの左サイドメニューのの「Listener」をクリックします。
2.[＋New]をクリックします。



3.「If expression」に「context.data.temperature > 30」と入力します。
4.「Then expression」に次のコードを入力し、[Save]をクリックします。

import com.carriots.sdk.utils.Email;
def email = new Email ();
email.to="<mail addres>";
email.message="<message text>";
email.send();

 <mail addres>には送信先のメールアドレスを、<message text>には、メールメッセージを入力します。

Arudino+carriotsでIoT-グラフの作成

　carriotsで収集したデータをグラフ化する方法を説明します。

1.「CARRIOTS CONTROL PANEL」の左サイドメニューの「Wizard Widget Graphs」をクリックします。
2.グラフの種類を選択し、[Next Step]をクリックします。


3.対象のデバイスを選択し、[Next Step]をクリックします。


4.「From」(開始日)、「To」(終了日)を設定し、[Next Step]をクリックします。
　※設定なしでも可


5.最大レコード数を設定し、[Next Step]をクリックします。


6.グラフにプロットするデータを選択し、[Next Step]をクリックします。


7.Y軸の項目を選択し、[Next Step]をクリックします。
　※グラフの種類が「line」「bar」の場合


8.グラフのオーダー(順序)を設定し、[Next Step]をクリックします。




 生成されたJavaScriptコードを、HTMLに張り付けることで、サイト上でグラフを公開することができます。

Arudino+carriotsでIoT-センサー・データの収集

　IoTプラットフォーム(クラウドサービス)のcarriotsを使って、Arudinoで計測したセンサー・データ(温度)を取集してみます。

■carriotsの準備
①アカウント作成
　carriotsのアカウントを作成します。

②デバイスの設定
1.「CARRIOTS CONTROL PANEL」の左サイドメニューの「Device」をクリックします。


2.「defaultDevice」の「Action」列の[Action]→[edit]をクリックします。
 ※「defaultDevice」は規定で用意されるデバイスです。新しくデバイスを作成することもできますが、今回はこの「defaultDevice」を使用します。


3.「Time zone」を「Tokyo」に設定し、[Save]をクリックします。その他の項目は、必要に応じて設定してください。


③Apikeyの確認
1.上部メニューの[MY SETTING]→[MY ACCOUNT]をクリックします。


2,表示されたFull Privileges Apikeyを確認します。


③Id developer(device Id)の確認
1.左サイドメニューの「Device」をクリックします。
2.「Name」列のデバイス名（ここでは「defaultDevice」）をクリックします。


3.表示された情報の「Id developer」の内容を確認します。
　※Id developerは、「<デバイス名@ユーザ名.ユーザー名>」の形式になります。これは、ページ上部にも表示されています。




■回路とプログラム

①Arudino開発環境の構築
1.「ArduinoをJavaScriptで制御する」の手順で開発環境を構築します。
2.コマンドプロンプトから「npm install request」と入力し、node.jsのrequestモジュールをインストールします。


②回路の配線
　次のように回路を配線します。

③プログラムの作成と実行
1.次のJavaScriptコードを入力し、「rest_carriots.js」と名前を付けて、作業用フォルダに保存します。

<your Full Privileges Apikey>には、「Full Privileges Apikey」を、<your Id developer>には「Id developer」を入力します

2.コマンドプロンプトを起動し、作業用フォルダに移動し、「node rest_carriots.js」と入力します。

④データの確認
　「CARRIOTS CONTROL PANEL」の左サイドメニューの「Data streams」をクリックします。

Arudino+theThings.IOでIoT－センサー・データの収集

　theThings.IOを使って、Arudinoで計測したセンサー・データの収集する方法を説明します。



①アクティベート(Thing Tokenの取得)
1.theThings.IOのアカウントを作成します。
2.左サイドのメニューの[Things Manager]を選択し、「ユーザー名 product」の[DETAILS]をクリックします。


3.[Get activaton codes]をクリックします。


4.[+]をクリックします。


5.表示されたウィンドウでThing Tokenを確認し、[OK]ボタンをクリックします。

　以降、Thing Tokenは、「2」までの手順で確認できるようになります。


②開発環境の構築
1.「ArduinoをJavaScriptで制御する」の手順で開発環境を構築します。
2.コマンドプロンプトから「npm install thethingsio-api」と入力し、theThings.IO APIライブラリ(Node.jsモジュール)をインストールします。

③回路の配線
　次のように回路を配線します。

④プログラムの作成と実行
1.次のJsonを入力し、「config.json」と名前を付けて、作業用フォルダに保存します。

<your Thing Token>には、①で取得したThing Tokenを入力します。

2.次のJavaScriptコードを入力し、「temp_thethings.js」と名前を付けて、作業用フォルダに保存します。

3.コマンドプロンプトを起動し、作業用フォルダに移動して「node temp_thethings.js」と入力します。

⑤データの確認
1.theThings. IOにサインインし、Panel(パネル)を表示します。
2.左サイドのメニューの[Things Manager]を選択し、「ユーザー名 product」の[DETAILS]をクリックします。


3.「Option」欄の[Details]をクリックします。

PubNub+Google Chart(Gauge)でセンサー・データを可視化する

　 PubNubを使って、Arduinoで計測したセンサー・データ(温度)をブラウザで受信し、Google ChartのGauge(ゲージ)で可視化する方法を説明します。


①開発環境の構築
　「PubNubを使ってArudinoを制御する」の①～③の手順で開発環境を構築します。

②回路の配線
　次のように回路を配線します。

③プログラムの作成
1.次のJavaScriptコードを入力し、「temp_pubnub.js」と名前を付けて、作業用フォルダに保存します。

2.次のHTMLコードを入力し、「temp_pubnub.jhtml」と名前を付けて、任意の場所に保存します。

<your Publish key>にはPublish Keyを、<your Subscribe key>にはSubscribe Keyを入力します。

④プログラムの実行と動作確認
1.コマンドプロンプトを起動し、作業用フォルダに移動します。
2.「node temp_pubnub.js」と入力します。
3.ブラウザで「ltemp_pubnub.html」を開いて、[接続]ボタンをクリックし、ゲージに温度が表示されることを確認します。
4.[切断]ボタンのクリックで、ゲージが０になることを確認します。

PubNub+Raspberry Pi カメラで簡易ライブカメラシステムを構築する

　PubNubとRaspberry Pi カメラ(カメラモジュール)を使って、簡易ライブカメラシステムを構築する方法を説明します。




①Raspberry Pi　 開発環境の準備
 「Raspberry Pi カメラのリモート制御&画像転送-PubNub編」の「Raspberry Pi　 開発環境の準備」の手順で、 開発環境を準備します。

②プログラムの作成
1.次のJavaScriptコードを入力し、「live.js」と名前を付けて、作業用フォルダに保存します。

2.次のHTMLコードを入力し、「live.html」と名前を付けて、任意場所に保存します。

<your Publish key>にはPublish Keyを、<your Subscribe key>にはSubscribe Keyを入力します。

③プログラムの実行と動作確認
1.ターミナルを起動し、作業用フォルダに移動します。
2.「sudo node live.js」と入力します。
3.ブラウザで「live.html」を開いて、[START]ボタンをクリックします。
4.撮影が実行(カメラモジュールのLEDが点灯)され、写真がブラウザ上にライブで表示されることを確認します。
5.[STOP]ボタンのクリックで、ライブ表示が停止することを確認します。

Raspberry Pi カメラのリモート制御&画像転送-PubNub編

 PubNubを使ったRaspberry Pi カメラのリモート制御は、「Raspberry PiのカメラモジュールをJavaScript(Node.js)で制御する」で説明しましたが、今回は、撮った写真をブラウザにフィードバックして表示してみます。



①Raspberry Pi　 開発環境の準備
1.「Raspberry Pi カメラのリモート制御&画像転送-Adafruit IO編」の「Raspberry Pi　 開発環境の準備」の手順で、 開発環境を準備します。
2.ターミナルを起動し、作業用フォルダに移動して「npm install pubnub」と入力し、「pubnub」モジュールをインストールします。


②プログラムの作成
1.次のJavaScriptコードを入力し、「picam.js」と名前を付けて、作業用フォルダに保存します。

2.次のHTMLコードを入力し、「camera.html」と名前を付けて、任意場所に保存します。

<your Publish key>にはPublish Keyを、<your Subscribe key>にはSubscribe Keyを入力します。

③プログラムの実行と動作確認
1.ターミナルを起動し、作業用フォルダに移動します。
2.「sudo node picam.js」と入力します。
3.ブラウザで「camera.html」を開いて、[Shutter]ボタンをクリックします。
4.撮影が実行(カメラモジュールのLEDが点灯)され、写真がブラウザ上に表示されることを確認します。

Raspberry Pi カメラのリモート制御&画像転送-Adafruit IO編

　Adafruit IOのImageブロック（image block ）を使うと、Base64エンコードされた画像を表示することができます。そこで、momentaryボタン（momentary button）のプッシュでシャッターを切り、撮影した写真をImageブロックに転送する方法を説明します。




■Raspberry Pi　開発環境の準備

①「MQTT.js」と「base64-img」((Node.jsのモジュール)のインストール
1.ターミナルを起動し、作業用フォルダに移動します。
2.「npm install mqtt」と入力します。
3.「npm install base64-img」と入力します。

②「jpegoptim」のインストール
　「Add/Remove Software」から、「jpegoptim」をインストールします。




■Adafruit IOのフィード、ダッシュボード、ブロックの作成

①フィード(Feed)の作成
　「SHUTTER」フィードと「PICAM」フィードを作成します。

②ダッシュボードの作成
　「camera」ダッシュボードを作成します。

③ブロックの作成
　Imageブロックとmomentaryボタンを作成します。Imageブロックは「PICAM」フィードに、momentaryボタンは「SHUTTER」フィードに紐づけします。



 　フィード、ダッシュボード、ブロックの作成手順は、「Adafruit IO+Arduino+MQTTでIoT‐デバイスの制御」を参照してください。

■プログラムの作成と実行

①プログラムの作成
　 次のJavaScriptコードを入力し、「picam_adafruit.js」と名前を付けて、作業用フォルダに保存します。


　[USER NAME]には、Adafruit IOのユーザ名を、[YOUR AIO KEY]にはAIO KEYを入力します。[Topic name]には、トピック名を「<ユーザー名>/feeds/<フィード名>」の形式で指定します。


②プログラムの実行
1.ターミナルを起動し、作業用フォルダに移動します。
2.「sudo node 「picam_adafruit.js」と入力します。

③動作の確認
1.ブラウザで「camera」ダッシュボードを開き、momentaryボタン押します。
2.撮影が実行(カメラモジュールのLEDが点灯)され、写真がImageブロックび表示されることを確認します。

※Imageブロックは最新の写真だけでなく、過去に転送された写真も表示されます。

Node-RED+M2X+ArduinoでIoT

　Node-REDとM2Xを使用して、Arduinoで計測したセンサ・データの収集する方法を説明します。

　M2Xのアカウントの作成、センサーデータを計測するためのArduinoのセットアップ、および回路については、「Arduino+M2XでIoT」を参照してください。
　また、Node-REDのインストール手順については、「WindowsにNode-RED」をインストールする」を参照してください。

①M2Xノードのインストール
1.コマンドプロンプトを起動し、「cd .node-red」と入力します。
2.「npm install node-red-m2x」と入力します。

②フローの作成
　次のように「arduino in」「delay」「fuinction」「m2x」「debug」ノードを接続してフローを作成し、デプロイします。



　各ノードのプロパティは、次のように設定します。

・arduino in

　「Arudino」にArudinoの接続先のポートを指定します。自動的に認識されている場合、「Arudino」と設定されています。
　「Pin」にはピン番号を、「Type」には、ピンの種類(アナログまたはデジタル)を指定します。アナログの「0」を指定した場合、「A0」が入力ピンになります。

・delay


・fuinction

　次のコードを入力します。
var temp = msg.payload * 5 /1024 * 100;
msg.topic = "devices";
msg.action = "setStreamValue";
msg.topic_id = "&lt;DEVICE ID&gt;";
msg.sub_topic_id = "&lt;STREAM NAME&gt;";
msg.payload = {value: temp};
return msg;

<DEVICE ID>には、デバイスの「DEVICE ID」を、<STREAM NAME>には、ストリームの名前（「STREAM ID」ではないことに注意、この例では、「Temperature」）を入力します。


・m2x

　 「鉛筆」アイコンのボタンをクリックし、「API Key」にデバイスの「PRIMARY API KEY」を入力します。

Raspberry Pi +M2XでIoT

 AT&T M2Xを使用して、Raspberry Piで計測したセンサ・データを収集する方法を説明します。



①Raspberry Piのセットアップ
1.「Raspberry Pi 2のGPIOをJavaScriptで制御する」の手順でRaspberry Piの開発環境をセットアップします。
2.次のように回路を配線します。

②M2Xの準備
　「Arduino+M2XでIoT」の②の手順でM2Xのアカウントを作成し、デバイス(Device)とストリーム(Stream)を登録します。

※補足
・登録済みのデバイスにストリームを追加するには、デバイスの管理画面の[Add Stream]をクリック、「Stream ID」「Display Name」を入力し、[Save]をクリックします。
・新しいデバイスとストリームを対話形式で登録するには、　「Setup your Device」にアクセスします。
・デバイスの管理画面からデバイスを追加するには、[Device]をクリックしてデバイスの一覧画面を表示し、[Create New]→[Device]を選択し、「Device Name」にデバイス名を入力し、[Create]をクリックします。その後、デバイスの管理画面が表示されるので、[Add Stream]をクリックし、ストリームを追加します。

③「request」モジュールのインストール
　M2XのRESTful APIを使用するため、Node.jsの「「request」モジュールをインストールします。
1.ターミナルを起動し、作業用フォルダに移動します。
2.「npm install request」と入力します。

④プログラムの作成と実行
1.次のJavaScriptコードを入力し、「bright_m2x.js」と名前を付けて作業用フォルダに保存します。

　[PRIMARY API KEY][DEVICE ID][STREAM ID]には、デバイスの管理画面に表示される「PRIMARY API KEY「[DEVICE ID」「STREAM ID」を入力します。


2.ターミナルから「sudo node bright_m2x.js」と入力します。