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

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

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

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

	var publishKey = '<your Publish Key>';
	var subscribeKey = '<your Subscribe Key>';

	var channel = "temperature"; // channel名の設定

	var five = require("johnny-five");
	var board = new five.Board({port: "COM3"});

	board.on("ready", function() {

	var temperature = new five.Thermometer({
	controller: "LM35",
	pin: "A0",
	freq: 10000 // サンプリング間隔(ms)
	});

	// PubNub初期化
	var pubnub = require("pubnub")({
	ssl : true,
	publish_key : publishKey,
	subscribe_key : subscribeKey
	});

	temperature.on("data", function() {
	console.log(this.celsius)
	var data = {eon:{'temperature' : this.celsius}};
	// データの送信
	pubnub.publish({
	channel : channel,
	message : data,
	callback : function(message) {
	console.log(message);
	}
	});
	});
	});

view raw publish_temp.js hosted with ❤ by GitHub

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

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

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

	<!DOCTYPE HTML>
	<html lang="ja">
	<head>
	<title>Line Chart</title>
	<script src="http://pubnub.github.io/eon/v/eon/0.0.10/eon.js"></script>
	<link type="text/css" rel="stylesheet" href="http://pubnub.github.io/eon/v/eon/0.0.10/eon.css"/>
	</head>
	<body>
	<div id="chart"></div>
	<script>
	var pubnub = PUBNUB.init({
	publish_key : '<your Publish Key>',
	subscribe_key: '<your Subscribe Key>'
	});
	var channel = "temperature"; // channel名の設定

	eon.chart({
	channel: channel,
	pubnub: pubnub,
	generate: {
	bindto: '#chart',
	data: {
	labels: true
	}
	}
	});
	</script>
	</body>
	</html>

view raw LineChart.html hosted with ❤ by GitHub

IoT Dev.

2016年1月23日土曜日

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

0 件のコメント:

コメントを投稿