More Related Content
Similar to IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現
Similar to IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現 (20)
IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現
- 9. JavaScript による傾き検知
:
if( window.DeviceOrientationEvent ){
// システムが DeviceOrientation イベントに対応している場合、傾き検知時のイベントハンドラを定義
window.addEventListener( "deviceorientation"
, deviceOrientation );
}
:
function deviceOrientaion( e ){
var dir = e.alpha; // 向いている方角
var tiltFB = e.beta; // 左右の傾き
var tiltLR = e.gamma; // 前後の傾き
var ori = { tiltLR: tiltLD, tiltFB: tiltFB, dir: dir };
:
}
- 10. JavaScript による MQTT パブリッシュ
:
<script src="/mqttws31.js"></script> <!– Paho -->
:
var pubTopic = "iot-2/evt/status/fmt/json"; // MQTT のトピック
var clientID = "d:quickstart:MyDevice:(Device ID)"; // MQTT のクライアントID
// MQTT ブローカーを指定
var client = new Messaging.Client( "quickstart.messaging.internetofthings.ibmcloud.com", 443, clientID );
:
phoneData.publish = function(){
// JSON データを MQTT ブローカーへ送信
var message = new Messaging.Message( phoneData.toJson() );
message.destinationName = pubTopic;
client.send( message );
}
:
- 11. IBM Cloud の MQTT ブローカー
IBM Cloud 内で Node-RED を作成した時に標準で使える ibmiot ノードと連携するための MQTT ブ
ローカー
IBM Watson IoT サービスの一部として無料で利用可能
ホスト: quickstart.messaging.internetofthings.ibmcloud.com:443
トピック: "iot-2/evt/status/fmt/json"
クライアントID: "d:quickstart:(デバイス名):(デバイスID)"
で MQTT パブリッシュすると、Node-RED 内の ibmiot in ノードの Device ID に同じものを指定する
だけで簡単に MQTT サブスクライブできる。
MQTT
ブローカー
- 12. MQTT データを WebSocket へ
MQTT サブスクライバーで受け取り、
(オプション)
全ての傾き情報を送るのは意味ないの
で、1秒に2つだけにフィルタリング
受け取った傾き情報を /ws/sensor へ
WebSocket で送信
- 13. JavaScript による WebSocket 監視
:
var socket;
var wsUrl = "wss://" + location.hostname + "/ws/sensor"; // 監視先
function connect(){
socket = new WebSocket(wsUrl);
socket.onmessage = function(e) { // WebSocket イベントを監視
var sensorData = JSON.parse(e.data);
if( sensorData.d.ori.tiltLR >= 50 ){
// 左右傾きが 50 度以上になったら右
keyPress( "right" );
render();
}else if( sensorData.d.ori.tiltLR <= -50 ){
// 左右傾きが -50 度以下になったら左
keyPress( "left" );
render();
}else if( sensorData.d.ori.tiltFB >= 0 && sensorData.d.ori.tiltFB <= 30 ){
// 前後傾きが 0 度以上 30 度以下になったら回転
keyPress( "rotate" );
render();
:
- 15. まとめ
• IBM Cloud で Node-RED 環境を作ると、MQTT に便利な ibmiot
ノードや MQTT ブローカーを簡単に使うことができる
• スマートフォンのブラウザで使える JavaScript は(ジャイロセン
サー搭載機種であれば)スマートフォンの傾きを検知することがで
きる
• この傾き情報を使ってスマートフォンをゲームコントローラーのように扱う
ことができる
• MQTT や WebSocket を利用することで物理的に離れた場所から画
面をコントロールすることができる
• Node-RED だけで HTTP, MQTT, WebSocket など多くのプロトコ
ルに対応したデータフローを定義でき、HTML5 ベースの(ゲー
ム)アプリケーションに対するメッセージ処理含めて実装できる