SHOEISHA iD

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

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

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

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

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

 IoT(Internet of Things)というキーワードは今後のICTを考える上での重要なキーワードです。そして、センサーからクラウドにアップロードされた様々なデータの活用方法の一つとして、利用者に分かりやすい形で表示して状態の把握を容易にすることで次のアクションの判断基準とするような利用形態があります。そのようなアウトプットで有効な「見える化」手法の一つはセンサーの値を時系列でグラフにすることでしょう。そこで今回はセンサーの値を「ComponentOne Studio for WinRT XAML」のChartコントロールでグラフ化してWindows 8タブレットで表示する方法を紹介したいと思います。

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

使用センサー

 今回利用するセンサーは手のひらや指の位置を検出できる「Leap Motion」を使用します。Leap MotionはWindowsストアアプリからも利用可能で、簡単に対応アプリが作れるテンプレートも提供されています。

 Leap Motionからの手のひらのデータはX,Y,Zの三次元データとして取得できます。

 Leapの上で手を左右にふればX値が変わり、上下に動かせばY値、前後に動かせばZ値が変わります。単位はLeapの中心位置からの距離でmm(ミリメートル)単位で取得できます。

図1 Leapの座標系
図1 Leapの座標系

Chartを追加する

 Windowsストアアプリのプロジェクトを新規作成し、MainPage.xamlを表示してツールボックスから「C1Chart」をxaml上にドラッグ&ドロップします。Page属性としてあらたに「xmlns:Xaml="using: C1.Xaml.Chart"」が追加され、ページ定義中にも「<Xaml:C1Chart />」が追加されます。

図2 初期表示
図2 初期表示
リスト1 初期設定値
<Chart:C1Chart ChartType="Column" HorizontalAlignment="Left" Height="150" Margin="946,431,0,0" Palette="Office" VerticalAlignment="Top" Width="200">
    <Chart:C1Chart.Data>
        <Chart:ChartData>
            <Chart:ChartData.Children>
                <Chart:DataSeries Label="s1" Opacity="1" Values="20 22 19 24 25"/>
                <Chart:DataSeries Label="s2" Opacity="1" Values="8 12 10 12 15"/>
            </Chart:ChartData.Children>
        </Chart:ChartData>
    </Chart:C1Chart.Data>
    <Chart:C1ChartLegend Position="Right" VerticalContentAlignment="Center"/>
</Chart:C1Chart>

 初期設定値は2種類の値が表示されている棒グラフになります。この定義のポイントは次のようなところです。

XAML定義のポイント

(1)ChartTypeプロパティ

 C1Chart定義の一番ベースとなる部分にChartTypeプロパティとして「Column」が指定されています。これはこのグラフが棒グラフであることを示しています。位置情報を可視化するときは棒グラフではなく折れ線グラフの方が適切なので、このプロパティ値を変更すれば目的の折れ線グラフに変更できます。

(2) DataSeries

 2種類のデータは2つのDataSeriesとして定義しています。今回はX,Y,Zの3種類の値を表示したいのでDataSeriesを3つ用意することになります。

初期表示からの変更ポイント

 ツールボックスから設定した直後の状態から目的のデザインに変更するためには次のような作業項目が必要になります。

  1. グラフサイズを全画面サイズに変更
  2. グラフの色合いを変更
  3. 折れ線グラフに変更
  4. 3種類の値を表示するように変更

次のページ
チャートを加工する

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング