2017/9/6

BLEでリアルタイムグラフ表示

どうも、クラゲです。
今回は、BLEデバイスからNotifyで読み込んだデータをリアルタイムにグラフ表示する方法を教えます。
横を時間軸として、次々とデータが流れるため、センサー値をリアルタイムにモニターするなどに最適です。

Smoothie Chartsというライブラリを活用しています。
グラフライブラリはc3.jsやChart.jsが有名ですが、Smoothie Chartsのようにオシロスコープ表示のような感じで描くことはできないと思います。

【 必要なもの 】

scan のときと同じです

【 デモページとソースコード 】

デバイスがBLE Nanoの場合で説明します。
半固定抵抗のツマミを回すことでリアルタイムに分圧値(0〜1023)をグラフで描画します

WEB上で試せるデモページはこちら
https://secure1689.sakura.ne.jp/kurage.jellyware.jp/bluejelly/advance_graph.html

ローカル環境で試したい方はこちらのGitHubからダウンロードし、advance_graph.htmlを実行してください。
https://github.com/electricbaka/bluejelly

【 プログラム解説(HTML) 】

ベースはnotify です。
グラフ以外にresetボタンを追加していますが、その解説は省略しています。
では、グラフ追加部分を見てゆきましょう。

Smoothie Chartを使うために、以下のサイトからsmoothie.jsをダウンロードしてHTMLファイルと同じ階層に置いて下さい。
http://smoothiecharts.org/smoothie.js
右クリックでダウンロードしてください

smoothie.jsを呼び出します

<script type="text/javascript" src="./smoothie.js"></script>

Smoothie Chartが描画するためのCANVASを準備します。大きさは自由に決めてOKです

<canvas id="chart" width="500" height="320"></canvas>

【 プログラム解説(JavaScript) 】

Global変数宣言時に、TimeSeriesのインスタンス生成
ble_dataという変数名は別名に変えても良いです。

var ble_data = new TimeSeries();

createTimelineという関数を作ります。3つの重要な要素が入っています。

//-------------------------------------------------
//smoothie.js
//-------------------------------------------------
function createTimeline() {
    var chart = new SmoothieChart({
        millisPerPixel: 20,
        grid: {
            fillStyle: '#ff8319',
            strokeStyle: '#ffffff',
            millisPerLine: 800
        },
        maxValue: 1024,
        minValue: 0
    });
    chart.addTimeSeries(ble_data, {
        strokeStyle: 'rgba(255, 255, 255, 1)',
        fillStyle: 'rgba(255, 255, 255, 0.2)',
        lineWidth: 4
    });
    chart.streamTo(document.getElementById("chart"), 500);
}

上記の中身の詳細設定について説明します。

windowロード時に先ほどの関数createTimelineを呼ぶようにします。

//smoothie.js
createTimeline();

READ時に、取得したデータをグラフへ追加します。
1番目の引数は時間です。

//グラフへ反映
ble_data.append(new Date().getTime(), value);

これで、いい感じのグラフが描画できるようになりました!
以上、BLEでリアルタイムグラフ表示でした。