ESP32-WROOM-32Eで加速度の変化をグラフ表示する

こんにちは、ENGかぴです。

ESP32-WROOM-32EのWire(SPI)を使用すると加速度センサー（ADXL345）の加速度やタップ情報などを取得することができます。加速度情報を取得しながらイベント発生で加速度データを保管してグラフ表示する方法をまとめています。

ESP32-WROOM-32E開発ボード（秋月電子）を使用しArduino IDEで開発を行います。また、ADXL345モジュール（秋月電子）を使用しています。

本記事の内容を応用してSDカードに保存する方法をまとめています。

ESP32-WROOM-32EとSDカードで加速度の履歴を保存

ESP32-WROOM-32Eで動作確認したことについてリンクをまとめています。

ESP32-WROOM-32Eで学べるソフト開発と標準ライブラリの使い方

加速度データをグラフで表示する
動作確認
ソースコード全体
関連リンク

加速度データをグラフで表示する

グラフ表示はChart.jsを使っています。Chart.jsを使ってブラウザー上にグラフ表示する方法を下記記事まとめています。

Chart.jsを使ってデータをブラウザー上でグラフ表示する

ChartライブラリをESP32-WROOM-32EのFlashに書き込む

ChartライブラリをESP32-WROOM-32EのFlashに書き込んで読み出して使用しています。Flashに書き込むためにSPIFFSプラグインをダウンロードしてArduino IDEのツールに「ESP32 Sketch Data Upload」を追加する方法などは下記記事を参考にしてください。

ESP32-WROOM-32Eで温湿度データをグラフで表示する

グラフ表示するまでのポイントを以下に示しています。

ESP32でグラフ表示するまでの手順

手順1
ESP32 Sketch Data Uploadを追加
手順2
ChartライブラリをSPIFFSに書き込む
手順3
SPIFFSからChartライブラリを読み込みHTMLデータに組み込む

PR：わからないを放置せず、あなたにあったスキルを身に着けるコツを教えるテックジム　「書けるが先で、理解が後」を体験しよう！

グラフ表示用のデータを準備する

加速度データをグラフ表示するためのデータを準備します。グラフ表示する目安としてADXL345のイベントを使います。今回はFREE FALLがイベントを検出した前後250msの加速度情報を保存して表示します。

加速度情報を保管するバッファはリング構成にすることでxyzdata[]配列のサイズをオーバーしないようにデータを更新することができます。wpはxyzdata[]配列におけるデータの格納場所を示すポインタです。

FREE FALLイベントが発生すると250ms分の加速度情報を取得してからwave[]配列にイベント発生時の加速度情報を格納します。

int16_t rp;
uint16_t i;
      
rp = getdata.wp;
//rpを更新してデータを時系列にデータを並び替えてwave[]に格納      
for( i = 0; i < CHART_SZ; i++){
  wave[0][i] = getdata.xyz[0][rp];
  wave[1][i] = getdata.xyz[1][rp];
  wave[2][i] = getdata.xyz[2][rp];

  if( ++rp >= CHART_SZ ){
    rp = 0;
  }
}

getdata.xyz[]配列に格納している加速度情報を時系列でグラフで表示するために並び替えしながら格納します。wpはgetdata[]において次にデータを格納する場所を示すポインタなのでwp+1のデータが時系列でみた時getdata[]内の最古のデータになります。

最古のデータの位置をrpの初期値としてgetdata[]配列のサイズ分順に取得して格納することで時系列で整理したデータになります。

FREE FALLイベント発生直後からデータを取得するのではなくイベント発生以前のデータを含めて取得することでイベント発生の様子を確認することができます。

HTMLデータの生成

String str="";
  
str += "datasets: [{";
str += "label: 'X',";
str += "fill: false,";
str += "borderColor: 'blue',";
str += "borderWidth: 1,";
str += "pointRadius: 0,";
str += "pointHoverBorderWidth: 10,";
str += "data: [";
  for(uint16_t i = 0; i< CHART_SZ; i++ ){
    str += wave[0][i]; 
    if(i != CHART_SZ-1 )str += ",";
  }
str += "]";
str += "}, {";

Chart.jsはHTTPファイルと関連付けられた配列であればX軸やY軸の値を配列名で指定するとグラフ表示ができますが、温湿度の履歴はRAMに格納しているため関連性がなく配列名を直接指定することができません。

10～15行目のように配列を文字列で追加してグラフのデータをセットする必要があります。例のようにdata[]に配列のデータを追加してHTMLデータを生成しています。

例）文字列追加の様子
配列の一番目を追加：data[0.03,
配列の二番目を追加：data[0.03,0.04,
配列のN番目を追加：data[0.03,0.04,・・・,0.47,
配列の追加が完了：data[0.03,0.04,・・・,0.47,・・・,1.64]

一文字でも間違うと表示できなくなるためテキストファイルなどでHTML形式で文章を生成しGoogle Chromeで開いて表示できることを確認しておくとよいでしょう。

ESP32のString型は65535バイト分（２バイト）までしか対応していないため文字の増やし過ぎには注意が必要です。またRAM領域を多く使用している場合は文字数が多いとスタックオーバーになることもあります。

PR：あなたのキャリアのお供に「生涯学習のユーキャン」

動作確認

ESP32-WROOM-32EとADXL345の配線例を示しています。回路図の番号はESP32 -WROOM-32Eの左上を1ピンとした時反時計回りにピンを数えた場合の番号としています。ピン番号横の（）内の番号はシルク印刷されているピンの名称です。

スマホのGoogle ChromeでIPアドレス「192.168.11.2」を入力しリクエストを送るとESP32-WROOM-32Eからスマホに返信しFREE FALLが発生した時のデータの様子を示すグラフ表示されました。サンプル数250の時のFREE FALLが発生しています。（XYZ軸の値がほとんど0になっていることが分かります。）

ブラウザーの環境によってはWiFi接続が切れることがありました。ノートPCのWiFiやiPhoneでは接続が切断しませんでしたがAndroidでは切断することがありました。

通信なので接続が切断しても復帰できる仕組みを検討しておくことが理想です。シリアルプロッタでのグラフ表示を行ってFREE FALL発生時のデータと一致するかを確かめました。