latest log

酩酊状態で書いたエンジニアポエムです。酩酊状態で読んでください。

LEAP Motion + Chrome Extension でブラウザを操作する BrowserMotionExtension というサンプルコードを作ってみたよ

LEAP Motion と Chrome Extension を使い、ブラウザの操作を行うChrome拡張のサンプルを作ってみました。

手のひらで左右にスワイプすると、開いているページの背景色が、青や黄色に変化する機能を実装してあります。

試してみましょう

github から BrowserMotionExtension をクローンします

git clone git@github.com:uupaa/BrowserMotionExtension.git

Chrome拡張機能を読み込みます

Chrome を起動し、 chrome://extensions/拡張機能のページを開きます。

右上にある「デベロッパー モード」をチェックし、
「パッケージ化されていない拡張機能を読み込む…」をクリックし、BrowserMotionExtension のディレクトリを指定すると、
拡張機能として読み込まれ、アドレスバーの横にLEAP Motionのアイコンが表示されます。

f:id:uupaa:20130731050434p:plain

LEAP Motion がアクティブな状態(アイコンが緑)な事を確認します。

f:id:uupaa:20130731050555p:plain

背景色が白いシンプルなページ( http://developer.chrome.com/extensions/browserAction.html )を開きます。

拡張機能のアイコンをクリックし、

f:id:uupaa:20130731051432p:plain

LEAP Motion の上で手のひらを左右にスワイプしてください。

この時、指を広げ、手のひらを横にし、LEAP Motion の 10〜15cm 上空を、大きく左右に振りきれるようにジェスチャーしてください。

(ε・◇・)з o O ( えーとですね。
(ε・◇・)з o O ( キーボードの上に、デブネコが寝そべってると妄想して…
(ε・◇・)з o O ( その子の背中をゆっくり左右に大きく、
(ε・◇・)з o O ( →なでもふ ←もふなで、する感じで操作してみてください

f:id:uupaa:20130731054816p:plain

f:id:uupaa:20130731052603p:plain

f:id:uupaa:20130731052714p:plain

(ε・◇・)з o O ( コードはこんな感じだよ
(ε・◇・)з o O ( disconnect の実装の仕方がよく分からなかったよ

var connected = false; // Boolean: { false: disconnected, true: connected }
var gestureState = 0;  // Number: { 0: none, 1: start, 2: progress }
var leap = null;       // Leap.Controller instance

chrome.browserAction.onClicked.addListener(function() {
    connected = !connected; // toggle state

    if (connected) {
      //Leap.loop({ enableGestures: true }, onframe);
        leap = new Leap.Controller({
                  //host: "127.0.0.1",
                  //port: 6437,
                    enableGestures: true,
                  //frameEventName: "animationFrame"
                });
        leap.loop(onframe);
    } else {
        // TODO: disconnect impl
        leap.disconnect();
    }
    chrome.browserAction.setBadgeText({ text: connected ? "on" : "off" });
});

function onframe(frame) {
    if (!connected) {
        return;
    }
    var i = 0, iz = frame.gestures.length;

    for (; i < iz; ++i) {
        var gesture = frame.gestures[i];

        if (gesture.type === "swipe") {
            switch (gesture.state) {
            case "start":
                if (gestureState === 0) { // avoid chattering
                    gestureState = 1;
                }
                break;
            case "update":
                if (gestureState === 1) { // avoid chattering
                    gestureState = 2;
                }
                break;
            case "stop":
                if (gestureState === 2) { // avoid chattering
                    gestureState = 0;
                    swipe(gesture.direction[0],
                          gesture.direction[1],
                          gesture.direction[2]);
                }
            }
        }
    }
}

function swipe(x, y, z) {
    if (x < 0) {
        console.log("swipeLeft");
        executeScript('document.body.style.backgroundColor = "yellow"');
    } else {
        console.log("swipeRight");
        executeScript('document.body.style.backgroundColor = "blue"');
    }
}

function executeScript(code) {
    chrome.tabs.executeScript(null, {
        code: code
    });
}

(ε・◇・)з o O ( 初めての Chrome Extension + 初めての LEAP Motion アプリで、
(ε・◇・)з o O ( 形にするまで18時間ぐらいかかってるけど、
(ε・◇・)з o O ( 15時間ぐらいは Chrome Extension の学習時間だった気がするよ。
(ε・◇・)з o O ( LEAP Motion で悩んだ時間は2〜3時間ぐらいじゃないかな?
(ε・◇・)з o O ( さぁ、みんなも LEAP Motion で面白い事しましょう!

追記

現在のコードは、拡張機能をONにしたときに表示していたページに対して、背景色の変更を試みてしまうことがあるらしく、
上手く行かないときは以下の事を試してみてください。

  • 白い背景のページで試す
  • LEAP Motion と拡張機能(BrowserMotionExtension)を OFF/ON する
  • BrowserMotionExtension を一度無効にするか削除して、再度有効にしてみる