SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(ComponentOne Studio)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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 実行画面
図5 実行画面
図6 実行動画

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

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

まとめ

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

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

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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(ComponentOne Studio)連載記事一覧

もっと読む

この記事の著者

初音玲(ハツネアキラ)

 国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。 個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。 Microsoft MVP for Windows Development ブログ:http://hatsune.hatenablog.jp/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7753 2014/11/07 15:23

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング