腹腹開発: 6月 2015

2015年6月26日金曜日

【すでに治ってます】IBM IoT Foundation サイトが開かない

昨日からためしているのだけど..

くるくる回ってるだけで、ちっとも開かない..

NodeREDやその先のCloudantを見るとデータは入り続けているので
MQTTブローカ自体の機能がだめになったわけではないようだ。

で、Chromeのデバッガで調べてみたら
ja系のファイルがいくつかサイトにないらしく
開かないようだ。

つーか、日本語化しようとしたけど、デプロイ失敗しわすれたってかんじか..

で、Twitterサイトにも落ちてること連絡したけど..まだなおらない..

たのむよIBM..

にしても、全然日本人が騒がないのはなぜなんだろう..
Bluemix ChallengeとかでIoTやってる奴とかいていいはずなのに..

ｐ．ｓ．
AngularJSつかってるとこは、さすが先進的..
Single Page Frameworkは、いずれやらんとなあ..

そういやGWTはSingle Pageにはいるんだろうか..

p.s.

2015/06/29

朝画面見たら治っていた。
といっても日本語化する気は毛頭なく
ja→enへそのままディスパッチしているだけ..

期待した私が悪うござんした。

新機能も追加されたわけではないのになんで画面が変わったのかな
とおもっていたら、どうもBluemixのカタログに登録されたかららしい..

といってもサービス化してもibmcloud.comなのはかわらずだけど...

2015年6月19日金曜日

Proxy環境でcfコマンドを使用する

忘備録として。

Bluemix上にボイラプレート(よく使われる複数のビルドパックのセット)からNodeRED Starterを選択せずに、単独のビルドパックNode.jsを使う場合、開発PC上にcfコマンドが必要になる。

cfコマンドは以下のサイトからダウンロードできる。
https://github.com/cloudfoundry/cli/releases

IBM ID harahara@hara2.com(パスワード:fugafuga)で登録したBluemix上(米国南部)にNode.jsをアプリID"dokidoki"で作成した場合、
以下の手順でデプロイする。

・Node.jsビルドパックでアプリID"dokidoki"としてさくせした際に表示されたcfコマンドとスタートアップのダウンロードを済ませておく。

スタートアップの圧縮ファイルは、最初にデプロイするデフォルトディレクトリに使用する。

・DOSプロンプトを起動
・cd ＜スタートアップ展開先＞ ←アプリIDディレクトリdokidoki直下へ移動する
・set http_proxy=http://proxy.harahara.com:8080/ ←proxy環境の場合のみ
・set https_proxy=http://proxy.harahara.com:8080/ ←proxy環境の場合のみ
・cf login -a -a https://api.ng.bluemix.net -u harahara@hara2.com -p fugafuga ←ヨーロッパの場合はhttps://api.eu-gb.bluemix.net
・cf dokidoki -o harahara@hara2.com -s dev ← デプロイ先を指定する
・cf push dokidoki ← フォルダ内のリソースがデプロイされる

後はローカルPC上で開発作業→cf push dokidokiの繰り返し。

最後にログアウトする場合は、cf logoutでOK。

現時点でデプロイ先がどこかを確認する場合は、cf api～を使う。

複数のIBM IDを乗り回している場合は、この確認をしないでpushして「あっ」となる可能性あり。要注意。

2015年6月9日火曜日

IBM IoT Foundation Trial版上のPublishデータをJavaScriptで取得してグラフ表示する

IBM IoT Foundation Traial版にようやくArdinoのセンサデータを常時送信できるようになったので、データを使う方を考えないと..

とりあえずいろいろ分析とかするより、まずカッコイイグラフで表示させてやろうか..

で検索の結果、"かっこいいグラフ"は書籍「インタラクティブデータビジュアライゼーション」

でも紹介されている

D3 Data-Driven Documents
http://d3js.org/

と、D3を使って水位表示によさげな

D3 Liquid Fill Gauge
http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

を使うことにした。

D3サイトから d3.min.js を、Liquid Full Gaugeサイトからは liquidFullGauge.js をダウンロード（もしくはコピペ）してローカルへ配置する。

JSONデータをオブジェクト化する $.parseJSON() を使いたかったので、JQueryもダウンロードしてローカルへ配置した。

Paho
https://eclipse.org/paho/

の Java client and utilities からJavaScriptライブラリをダウンロードしてローカル配置した。

jQuery
https://jquery.com/

以下、作成したindex,html ファイル。ライブラリのパスは、各自の環境に合わせて変更すること。

＜注意＞
以下のHTMLだとAPI Key とAuth Tokenが全世界にバレバレになるので、インターネット上のHTTPサーバには決して載せないこと。
あくまで、ローカルPCからダイレクトにブラウザで実行して見るか、FW設定で1883を開けてイントラのHTTPサーバ上にのせるとかで対処のこと（inputタグで入力させる方法もある）。

<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset="UTF-8">
    <title>Water Level</title>
    <script src="d3/d3.min.js" language="JavaScript"></script>
    <script src="liquidFillGauge.js" language="JavaScript"></script>
    <script src="paho/mqttws31.js" language="JavaScript"></script>
    <script src="jquery/jquery-1.11.3.min.js" language="JavaScript"></script>
    <style>
        .liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }
    </style>
</head>
<body>

<svg id="fillgauge" width="19%" height="200"></svg>

<script language="JavaScript">

// MQTTブローカ(IBM IoT Foundation Trial)
var hostname = "組織ID.messaging.internetofthings.ibmcloud.com";
var port = 1883; // ポート
var client_id = "a:組織ID:water"; // a:組織ID:アプリID(自由..らしい)
var user_name = "a-組織ID-xxxxxxxx"; // API Key生成時の"Key"
var pass = "xxxxxxxxxxxxxxxxxx"; // API Key生成時の"Auth Token"
//購読トピック指定
var topic = "iot-2/type/+/id/デバイスID/evt/+/fmt/json";

// MQTTブローカクライアント
client = new Paho.MQTT.Client(hostname, port, client_id);

// コールバック時間数を定義
client.onConnectionLost = onConnectionLost; // 接続喪失時
client.onMessageArrived = onMessageArrived; // subscribe該当データが到着時

// MQTTブローカへ接続（認証あり）
client.connect({onSuccess:onConnect, userName: user_name, password: pass});

// 接続時
function onConnect() {
console.log("onConnect");

// 購読対象トピックを渡してSubscribe開始
client.subscribe(topic);
}

// 接続喪失時
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
    console.log("onConnectionLost:"+responseObject.errorMessage);
}
}

// subscribe指定したトピック該当データが到着時
function onMessageArrived(message) {
console.log("onMessageArrived:"+message.payloadString);
// 水位データをメッセージから抽出
var waterLevel = Number($.parseJSON(message.payloadString).d.waterLevel);

// グラフ設定（共通）
var config = liquidFillGaugeDefaultSettings();
config.circleThickness = 0.1;
config.circleFillGap = 0.2;
config.textVertPosition = 0.8;
config.waveAnimateTime = 2000;
config.waveHeight = 0.3;
config.waveCount = 1;
config.maxValue = 171; // 満水時上限を指定する
config.displayPercent = false;

// 30以下で赤表示
if(waterLevel<=30){
    config.displayPercent = false;
    config.circleColor = "#FF7777";
    config.textColor = "#FF4444";
    config.waveTextColor = "#FFAAAA";
    config.waveColor = "#FFDDDD";
}

// グラフ表示
loadLiquidFillGauge("fillgauge", waterLevel, config);
}
</script>
</body>
</html>

組織IDは、IBM IoT FoundationのTrial版を登録した際に決まる文字列。

ドキュメントだと認証ありだと8883か443とか書いてあったので、ずっとそっちを指定していてはまってしまった。1883にしたら動いた。

認証は IBM IoT Foundation コンソール上で API Key を生成して API Key と Auth Token (一度しか確認できない) をメモっておく。

関数onMessageArrived()の引数messageは、 Paho.MQTT.Message クラスオブジェクトで、Stringかバイトでしか受け取れない。ので、jQueryを使ってStringになっているJSON文字列を変換させて使用している。

Class Paho.MQTT.Message リファレンス
http://www.eclipse.org/paho/files/jsdoc/symbols/Paho.MQTT.Message.html

変数topicの"+"はワイルドカード指定をあらわす。
topicの文字列をうまく書き換えてやれば、ほしいデータをsubscribeすることができる。

実際に表示させると以下のようになる。

ぬふー...このペースじゃ全然終わらんぞ..

2015年6月4日木曜日

Bluemix上のNode-RED画面に「Error: Lost connection to server」と表示される

BluemixでIoTボイラープレートを選択して、Node-REDのフローエディタを開くと、以下のようなメッセージが表示されて、ibmiotノードなどを使ってサーバへ接続しようとしても全然つながらない..

で、よく知っている人に聞いたら、httpsではなくhttpだとこのようなメッセージがでるらしい..

再度先頭のURLをhttpsになおして通信したら、素直につながった..

..このページのリンク誤りなんでないの？

ムカ着火インフェルノ！

..すみません、使ってみただけです..

PubSubClientライブラリを使ってArduinoからIBM IoT Foundationトライアル版へセンサデータを送信する

IoTのデモなどのためにIBM IoT Foundationと接続する場合、一番手っ取り早いのがQuickStartだ。

なので、これまではQuickStartを使っていたのだけど、そろそろSaaS(?)版の本物に近い環境での接続を試しておかないと、いざ仕事になった時にこまる。

ということでMQTTブローカの先をトライアル版の環境に変更することにした。

トライアル版を使用するには、IBM IoT Foundationサイトから「Sign up」を押して、IBM Cloud Marketplaceの「Go to Market」ボタンを押し、
Internet of Things Cloud というサイトからFree Trial 「TRY NOW」ボタンを押してIBM IDを登録（すでに持っていれば既存IDで接続）する。

有料版もあるが、執筆時点でリージョン日本ではオープンになっていなかった。

登録が完了するとメールがおくられてくるのでその中のLunch Serviceリンクを踏む。
https://internetofthings.ibmcloud.com/を開いて、ログインしてもよい。

ログインすると右上のアイコンが人マークになるのでこの人型アイコンをクリックする。
するとYOUR ORGANIZATIONに１つ組織が構築されているのでこの組織名文字列リンクを踏む（この組織名は、接続先URLの先頭の文字列となる）。

Devicesタブを選択する。

Add Deviceリンクを押し、デバイス登録画面を開く。

デバイスタイプの文字列を適当に入力する。私は使用デバイスの名称(arduino)にした。
Device IDにはMACアドレス(小文字コロンなし)を入力し、Continueボタンを押す。

表示された情報を記録し、Doneボタンを押す。

表に追加したデバイスがあらわれ、すでに接続済みであれば先頭のマークが緑色になる。LastEventの＋マークを押せば、接続した履歴が表示される。接続されていない場合は赤い■マークがかわりに表示されている。

Arduino側のプログラムはtokenを使った認証が必要となる。先ほとデバイス登録直後メモした情報を使用する。

PubSubClientライブラリを使ったプログラムについては、

Arduino YUN上の温湿度センサデータをIBM IoT Foundation QuickStartへ送信する

に書いた記事を参考のこと。

PubSubClientオブジェクトの生成部分が以下のようになっている場合、

PubSubClient client(serverName, 1883, 0, c);

serverNameを「＜組織名＞.messaging.internetofthings.ibmcloud.com」に変更する。

次に、PubSubClientオブジェクトのconnect()を実行する箇所は、引数3つの関数に変更する。

client.connect(clientName, userName, password);

clientNameは「d:＜組織名＞:＜デバイスタイプ＞:＜デバイスID(MACアドレス小文字コロンなし)＞」を指定する。

userNameは、「use-token-auth」という固定文字列を指定する。

passwordは、デバイス登録直後にメモしたauth-token値を指定する。

トピック名の指定方法はQuickStartの際の記述方法と同じなので省略する。詳細は以下のサイトを参照のこと。

MQTT client connection
https://docs.internetofthings.ibmcloud.com/messaging/mqtt.html#mqtt-client-connection

登録: 投稿 (Atom)

腹腹開発

Translate