Windowsストアアプリで始めるLeap Motion入門

2013.09.21

Microsoft MVP for Visual Basic / Oracle ACE

初音玲

自己紹介

•初音玲

• Microsoft MVP for VB

• Oracle ACE

• NUI好き

•開発者

•インフラ

Leap Motionとは

Leap Motion社が発売

ToF型小型NUI

CMOS+赤外線LED

79.99ドル(94.98ドル)

Leap Motionで検出できること

•手の位置と向き、移動方向

•指の位置と向き、移動方向

• 登録済ジェスチャ

•棒状の位置と向き、移動方向

•逆ピラミッド25mm~600mm

Leap Motion SDKについて

• Leap.dll

• LeapCSharp.dll

• LeapCSharp.NET.4.0.dll

Leap Deivice Leap Service Leap Settings App

Leap対応アプリ

Leap Motion SDKの対応言語

• C++

• Objective C

• VB.NET / C#

• Java

• Python

• JavaScript

.NETでLeapを使うための準備

•アセンブリと同じ場所に置く必要のあるもの

• Leap.dll

• LeapCSharp.dll

•参照設定する

• LeapCSharp.NET.4.0.dll

• 注意：GACには登録されていません

C++

Windows コア OS サービス

WinRT .NET Framework

JavaScript

XAMLHTML / CSS XAML

Windowsストアアプリデスクトップ

アプリ

Windowsストアアプリとは

VB.NET / C# VB.NET / C#

トラッキングデータの種類

• Hands

• 検出されたすべての手

• Pointables

• 検出されたすべての指と指状のツール

• Fingers

• 検出されたすべての指

• Tools

• 検出されたすべての指状のツール

• Gestures

• 検出されたすべてジェスチャーの開始、終了、変化

手の情報を取得するには

• 手の取得

• leapFrame.Hands.Rightmost

• leapFrame.Hands.Leftmost

• 手の真ん中の位置をミリメートルで取得

• PalmPosition

• StabilizedPalmPosition

• 手の移動速度をmm/secで取得

• PalmVelocity

• 手の向きを取得

• Direction

指の情報を取得するには

• 指の先端の取得

• leapFrame.Hands.Rightmost.Fingers

• leapFrame.Hands.Leftmost.Fingers

• 指の先端の位置をミリメートルで取得

• TipPosition

• StabilizedTipPosition

• 指の先端の移動速度をmm/secで取得

• PalmVelocity

• 指の向きを取得

• Direction

DEMOLeapSample

Leapから情報を取得しよう

• Leap.Controller

• Listener

• OnFrame

コントローラをインスタンシング

リスナーをインスタンシング

リスナーをコントローラーに登録

LeapServiceからのデータ取得イベント

Listener-OnFrameの例Dim leapFrame As Frame = _controller.Frame

If Not leapFrame.Hands.Empty Then

Dim rightHand As Hand = leapFrame.Hands.Rightmost

Dim leftHand As Hand = leapFrame.Hands.Leftmost

Dim rightFingers As FingerList = rightHand.Fingers

Dim leftFingers As FingerList = leftHand.Fingers

Me.Pos.Hand(0) = leftHand.PalmPosition

Me.Pos.Hand(1) = rightHand.PalmPosition

If (Not leftFingers.Empty AndAlso leftFingers(0).TipPosition.x < 0) Then

Dim left = (From fig In leftFingers Order By fig.TipPosition.x Select fig).ToList

For index As Integer = 0 To left.Count - 1

Me.Pos.Finger(index) = left(index).TipPosition

Next

End If

MainPage

MainViewModel

Leapから得られた情報を描画する

LeapModel

XAML定義例

<TextBlock Text="(1)"

Canvas.Top="{Binding Item.Finger[0], Converter={StaticResource PositionYConverter}}"

Canvas.Left="{Binding Item.Finger[0], Converter={StaticResource PositionXConverter}}“

Visibility="{Binding Item.Finger[0], Converter={StaticResource ValueToVisibilityConverter}}“

/>

Leapの位置情報を画面位置に変換するConverter

• PositionYConverter

• PositionXConverter

• ValueToVisibilityConverter

登録されているジェスチャー

まる スワイプ

キータップ スクリーンタップ

DEMOLeapGestureSample

ジェスチャー検出の例

•ジェスチャーの有効化

• OnFrameでの判定追加

leapController.EnableGesture(Gesture.GestureType.TYPECIRCLE)leapController.EnableGesture(Gesture.GestureType.TYPEKEYTAP)leapController.EnableGesture(Gesture.GestureType.TYPESCREENTAP)leapController.EnableGesture(Gesture.GestureType.TYPESWIPE)

For index As Integer = 0 To gestures.Count - 1Dim leapGesture As Gesture = gestures(index)

Select Case leapGesture.TypeCase Gesture.GestureType.TYPECIRCLECase Gesture.GestureType.TYPESWIPECase Gesture.GestureType.TYPEKEYTAPCase Gesture.GestureType.TYPESCREENTAPCase ElseEnd Select

Next

Leapでロボットを制御する

• MindStorm EV3

• Bluetooth経由でコマンド送信

• WindowsストアアプリからBluetooth通信できない？

MainWindow

MainViewModel

Leapから得られた情報をWPFで描画する

LeapModel

MainWindow

MainViewModel

WPFからシリアルポート(Bluetooth)経由でコマンド送信

LeapModel EV3Model BT

まとめ

• Leapはキーボードに手かざしするようなUIを実現

•精度はそれほどよくない

•ざっくりした利用方法がお勧め

•手の情報を使うのか、指の情報を使うのかを判断

•位置よりも動きを検出した方が応用が利きそう

• Windowsストアアプリからも使える

•ストア申請通すにはタッチやマウス対応が必要かも