手の位置をチャートで可視化しよう

Leapデータの取得

LeapModelの定義

　テンプレートから新規にプロジェクトを作成し、その中にあるLeapModelクラスを参考にして次のようなLealModelクラスを作成します。

リスト10　MainPage.xaml

Imports System.Runtime.Serialization
Imports Newtonsoft.Json
Imports Windows.Networking.Sockets
Imports Windows.Storage.Streams
Imports Windows.Web

Namespace Models
    Public Class TValue
        Public Property ValueX As Integer
        Public Property ValueY As Integer
        Public Property ValueZ As Integer
    End Class

    Public Class LeapModel
        Implements INotifyPropertyChanged

        Public Property HandData As New ObservableCollection(Of TValue)

        Private WithEvents Timer As New DispatcherTimer
        Private WithEvents LeapListener As SampleListener

        Public Sub New()
            If Not DesignMode.DesignModeEnabled Then
                For index As Integer = 0 To 99
                    Me.HandData.Add(New TValue)
                Next
                Me.LeapListener = New SampleListener
                Me.Timer.Interval = New TimeSpan(0, 0, 0, 0, 0.1)
                Me.Timer.Start()
            End If
        End Sub

        Private Sub Timer_Tick(sender As Object, e As Object) Handles Timer.Tick
            Me.Timer.Stop()
            Dim data = LeapListener.Pos
            If data.Hand IsNot Nothing Then
                Me.HandData.Add(New TValue With {.ValueX = data.Hand(0).X,
                                                 .ValueY = data.Hand(0).Y,
                                                 .ValueZ = data.Hand(0).Z})
                If Me.HandData.Count >= 100 Then
                    Me.HandData.RemoveAt(0)
                End If
            Else
                Me.HandData.Add(New TValue)
            End If
            Me.Timer.Start()
        End Sub

        Public Event PropertyChanged(sender As Object,
                                     e As PropertyChangedEventArgs) Implements INotifyPropertyChanged.PropertyChanged
        Protected Sub OnPropertyChanged(<CallerMemberName> Optional propertyName As String = Nothing)
            RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
        End Sub
    End Class

    Friend Class SampleListener

            ：
         （中略）
            ：

        Private Function NormalizeVector3(tip As String()) As SharpDX.Vector3
            Return New SharpDX.Vector3(CType(tip(0), Single), 
                                        CType(tip(1), Single), 
                                        CType(tip(2), Single))
        End Function

    End Class
End Namespace

　これでLeapからあがってきた手のひらの三次元位置が随時HandDataコレクションに設定され、100個を超えたら古いものが削除されてX軸が常に最大100データでデータが随時更新されるようになります。

MainViewModelの対応

　次にMainViewModelでLeapModelを使うように設定します。

リスト11　MainViewModelクラス（抜粋）

Private Model As New Models.LeapModel

Public Sub New()
    AddHandler Model.PropertyChanged, AddressOf Model_PropertyChanged
End Sub

Public Property HandData As ObservableCollection(Of Models.TValue)
    Get
        Return Me.Model.HandData
    End Get
    Set(value As ObservableCollection(Of Models.TValue))
        Me.Model.HandData = value
    End Set
End Property

　これでHandDataコレクションのデータ供給元がLeapModelです。

MainPage.xaml.vbの対応

　最後にXAMLにMainViewModelをつなぎこむ部分を記載しましょう。MainViewModelはapp.xaml.vbでMainVMというプロパティで公開していますので次ようなコードをMainPage.xaml.vbに追記します。

リスト12　MainPage.xaml.vb抜粋

Private Sub NavigationHelper_LoadState(sender As Object, 
                                       e As Common.LoadStateEventArgs)
    Me.DataContext = App.MainVM
End Sub

実行

図5　実行画面

図6　実行動画

　http://youtu.be/5Kbvm-_X0Zo

　手の動きに反応して機敏にグラフが変化するのが分かると思います。このようにグラフ化というのは値の動きや変化というデータに対して人に何らかの思考を促すのに適したアウトプット形式なのです。

まとめ

　複雑になりがちなグラフ表示もC1Chartを使えば非常に簡単に見た目もよいグラフ表示が可能です。また、リアルタイムにデータを表示させてみて、その表示性能の良さも特筆すべきものであるという実感を得ました。

　今回は手のひら1つでしたが、両掌の位置、各指の位置などもC1Chartで見える化すればLeap Motionで特定の動きを検出したいときの分析に役立つでしょう。そして入力を切り替えて各種環境センサーなどの値を使うことで環境の見えるかなど快適な住空間などのデザインなどの役立つ情報が得られるかもしれません。

　今年のトレンドの一つであるIoTをC1Chartで加速してみてはいかがでしょうか。