MilkcocoaでSphero2を遠隔操作
Sphero2をMilkcocoaで遠隔操作
Sphero2は，iPhone等の携帯端末で操作ができるロボットボールです．Milkcocoa経由でSphero2を遠隔コントロールしてみました．
流れ
流れは下図のようになります．リモコンページがスピードと方向を決めて送信ボタンを押すと，Milkcocoaへsendします．Milkcocoaはsendイベント監視しているコントロールアプリに送信します．コントロールアプリは受けた値からスピードと方向を取り出しSpheroを操作します．
構成
構成は，Sphero2 をコントロールするアプリと遠隔リモコンHTMLページとなります．
Sphero2のコントロールには，sphero.jsという公式javascript APIを使いました．
Sphero2 コントロールアプリ
機能として，前後左右の指示を行い，この指示内容をMilkcocoaへ記録します．MilkcocoaのデータストアのSendイベントを監視し，遠隔リモコンHTMLからのコマンドが送られてきたらそれに従いSpheroを移動させます．Electronを用いてアプリ化．
main.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
electron.crashReporter.start();
var mainWindow = null;
app.on('window-all-closed', function() {
if (process.platform != 'darwin') {
app.quit();
}
});
app.on('ready', function() {
mainWindow = new BrowserWindow({width: 350, height: 300});
mainWindow.loadURL('file://' + __dirname + '/index.html');
mainWindow.on('closed', function() {
mainWindow = null;
});
});
チュートリアル通りのファイルです．．．
HTMLファイル (index.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spheroの操作</title>
<script src="script.js"></script>
</head>
<body>
<h1>Spheroコントローラ</h1>
<h2>操作パネル</h2>
<button id="front" onclick="move(50, 0)">前</button>
<button id="left" onclick="move(50, 270)">左</button>
<button id="right" onclick="move(50, 90)">右</button>
<button id="back" onclick="move(50, 180)">後</button>
</body>
</html>
コントローラでもSpheroを操作できるように前後左右させるボタンを配置しています．
JSファイル (script.js)
const MilkCocoa = require('milkcocoa');
var mlkcca = new MilkCocoa('{app-id}.mlkcca.com');
var sphero = require("sphero");
var orb = sphero("/dev/tty.Sphero-***-***-***");
function move(s, d) {
orb.roll(s, d);
mlkcca.dataStore('sphero/move').push({'s':s, 'd':d});
}
function connect(callback){
function done() {
orb.startCalibration();
setTimeout(function() {
orb.finishCalibration();
}, 5000);
callback();
}
orb.connect(done);
}
function remoteControl(e){
var v = e.value;
move(v['s'], v['d']);
}
connect(function() {
mlkcca.dataStore('sphero/status').push({ 'messeage' : 'Wakeup!' });
mlkcca.dataStore('sphero/move').on("send", remoteControl);
});
connect関数でSpheroに接続を行います．成功したらMilkcocoaの’sphero/status’に状態を通知します．そして，データストア’sphero/move’のsendイベントを監視対象にします．
イベントが発生すると，remoteControl関数にて,スピードと方向を取り出し，Spheroに伝えます．
遠隔リモコンHTMLページ
機能として，スピード，方向を選択してMilkcocoaにSendします．HTMLファイルのみ.
HTMLファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spheroの操作</title>
<link rel="stylesheet" href="style.css" media="screen" type="text/css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
<script>
var mlkcca = new MilkCocoa('{app_id}.mlkcca.com');
function sendData(){
var s=$('#speed option:selected').val();
var d=$('#direction option:selected').val();
mlkcca.dataStore('sphero/move').send({'s':s, 'd':d});
}
</script>
</head>
<body>
<h1>Spheroリモコン</h1>
スピード
<select id="speed">
<option value="30">30</option>
<option value="50">50</option>
<option value="80">80</option>
<option value="100">100</option>
</select>
方向
<select id="direction">
<option value="0">前</option>
<option value="270">左</option>
<option value="90">右</option>
<option value="180">後</option>
</select>
<button onclick="sendData()">送信</button>
</html>
sendData関数でセレクタのスピードと方向の値を取得してMilkcocoaにsecdしてます．
おわりに
Sphero2を遠隔操作するプログラムを簡単に作ることができ，Milkcocoaのすごさに驚きました．今後は，このアプリのブラッシュアップと，cloocaを使ったモデル駆動開発用ツールに落とし込んで行きたいと思う．