MilkcocoaでSphero2を遠隔操作

Sphero2をMilkcocoaで遠隔操作

Sphero2は,iPhone等の携帯端末で操作ができるロボットボールです.Milkcocoa経由でSphero2を遠隔コントロールしてみました.

流れ

流れは下図のようになります.リモコンページがスピードと方向を決めて送信ボタンを押すと,Milkcocoaへsendします.Milkcocoaはsendイベント監視しているコントロールアプリに送信します.コントロールアプリは受けた値からスピードと方向を取り出しSpheroを操作します.

flow

構成

構成は,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を使ったモデル駆動開発用ツールに落とし込んで行きたいと思う.

リファレンス

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です