koudenpaのブログ

趣味のブログです。株式会社はてなでWebアプリケーションエンジニアをやっています。職業柄IT関連の記事が多いと思います。

センサーデータをグラフ表示する

Raspberry Pi 3 と Windows 10 IoT Core で BME280 から温度、湿度、気圧を取れた。 じゃぁ、次はそれをグラフ表示したい。

IoT的には次はクラウドにセンシングデータを飛ばすのが定石なのだろうけれど、 せっかくUWP(Universal Windows Platform:ユニバーサル ウィンドウズ プラットフォーム)なのだから、 デバイス単体でGUIにいい感じに表示したい。

グラフライブラリを探す

MS界隈でグラフと検索すると、Officeなどのリソースをいい感じに取回せる Graph API が引っかかってややこしい。

また、UWPはおろか、WPFですらなく、WindowsForms対象のライブラリも多く探すのはなかなか難しい。

探している人がヒットしたりいる。

xaml - Windows Universal (UWP) Charting Library - Stack Overflow

NuGetで入らないライブラリも見つかる。

MS周りのデータ可視化ライブラリは結構いい商売になるようで、 昔から色々製品が売っている印象がある。

A Guided Tour of Windows 10 IoT Core -Telerik Developer Network

今や、データをグラフ表示するのに便利なのはJavaScript系なのだろうか。

MS系でもPowerBIがあるし。

と微妙な気分になっていたところ、多分これが現状のUWPでのグラフ表示のデファクトなんだろうな、という感じのライブラリがあった。

OxyPlot

OxyPlot.Windows

OxyPlot は各種プラットフォームに対応しており、UWP向けには OxyPlot.Windows がある。

NuGet的にはいい感じに依存関係が解決されるので OxyPlot を指定すればよさそうだった。

{
  "dependencies": {
    "Microsoft.ApplicationInsights": "1.0.0",
    "Microsoft.ApplicationInsights.PersistenceChannel": "1.0.0",
    "Microsoft.ApplicationInsights.WindowsApps": "1.0.0",
    "Microsoft.NETCore.UniversalWindowsPlatform": "5.0.0",
    "OxyPlot": "1.0.0-unstable2100"
  },
  "frameworks": {
    "uap10.0": {}
  },
  "runtimes": {
    "win10-arm": {},
    "win10-arm-aot": {},
    "win10-x86": {},
    "win10-x86-aot": {},
    "win10-x64": {},
    "win10-x64-aot": {}
  }
}

そのうえで、XAMLに PlotView を配置し PlotModel をバインドするなりすれば Model に指定した設定でグラフが表示される。

<Page x:Class="bme280_visualize.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:bme280_visualize"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      xmlns:oxy="using:OxyPlot.Windows"
      mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel Orientation="Vertical">
            <oxy:PlotView  Model="{x:Bind Bme280.Plot}"
                           Height="320" />

f:id:koudenpa:20160521014933p:plain

github.com

とりあえずグラフが出たところまで。

この手のはいい感じに出そうとすると色々大変そうだ。

ちょっといじっただけでもいくらか癖があったが、 特に更新通知に対応しておらず、 表示対象のデータに変更があった場合は明示的に PlotModel.InvalidatePlot を呼ぶ必要がある点には注意したい。