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のアイコンが表示されます。
LEAP Motion がアクティブな状態(アイコンが緑)な事を確認します。
背景色が白いシンプルなページ( http://developer.chrome.com/extensions/browserAction.html )を開きます。
拡張機能のアイコンをクリックし、
LEAP Motion の上で手のひらを左右にスワイプしてください。
この時、指を広げ、手のひらを横にし、LEAP Motion の 10〜15cm 上空を、大きく左右に振りきれるようにジェスチャーしてください。
(ε・◇・)з o O ( えーとですね。
(ε・◇・)з o O ( キーボードの上に、デブネコが寝そべってると妄想して…
(ε・◇・)з o O ( その子の背中をゆっくり左右に大きく、
(ε・◇・)з o O ( →なでもふ ←もふなで、する感じで操作してみてください
(ε・◇・)з 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 を一度無効にするか削除して、再度有効にしてみる