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することができる。
実際に表示させると以下のようになる。
ぬふー...このペースじゃ全然終わらんぞ..
0 件のコメント:
コメントを投稿