ESP32-WROOM-32Eで履歴データをダウンロードする

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

Webサーバーを実装することでクライアントからに対してダウンロード要求のレスポンスを返すことができます。SDカードに保管した温湿度センサーの履歴をブラウザー上に表示したダウンロードリンクを使って履歴データを取得する方法をまとめています。

下記記事で動作確認した温湿度センサーのグラフ表示にダウンロードリンクを追加して動作確認を行います。

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

本記事ではダウンロードした履歴とSDカードの履歴が一致するかを確認します。

ESP32-WROOM-32E開発ボード（秋月電子）を使用しArduino IDEで開発を行います。また温湿度センサー：AE-SHT35（秋月電子）、SDカードモジュール:AE-microSD-LLCNV（秋月電子）を使用しています。

ESP32-WROOM-32Eを使って動作確認したことをまとめています。

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

ダウンロードリンクを実装する
動作確認
ソースコード全体
関連リンク

ダウンロードリンクを実装する

Webサーバーを使ってクライアントからの接続要求を受け付けます。接続要求で表示するHTMLのページにダウンロードリンクを実装しSDカード内に保存した履歴をダウンロードできるようにします。Webサーバーを実装する方法を下記記事にまとめています。

ESP32-WROOM-32EでWebServerを実装する

ダウンロードリンクを実装する方法はポイントは以下の通りです。

WebServerでSDカードのデータを参照する
HTMLデータ内の<a>タグにdownload属性を追加する

PR：技術系の通信教育講座ならJTEX

ESP32-WROOM-32Eと各種モジュールの構成

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

SHT35モジュールはWire（I2C）通信を使用します。Wireを使用する場合はプルアップ抵抗が必要ですがSHT35モジュールに実装されているため必要ありません。

SDカードモジュールの電源は5VなのでESP32-WROOM-32Eの5Vを供給しています。SDカードの操作はSPI通信を使用します。ESP32-WROOM-32EはVSPIとHSPIがありますが、特に指定しない場合VSPIピンが有効になります。HSPIを使用する場合は下記記事に使用例をまとめていますので参考にしてください。

ESP32-WROOM-32EのSPIでBME280の情報を取得

SDカードにSHT35から取得した温湿度データの履歴を保存します。ブラウザー上で温湿度データをグラフで表示しますが温湿度データの履歴をダウンロードできるようにリンクを設置します。

WebServerでSDカードのデータを参照する

#include <WebServer.h>
#include <SD.h>

String filepath = "/sht35.txt"; //SDカードのファイル
WebServer Wserver(80);
//SDカードを参照する場合
Wserver.serveStatic(filepath.c_str(),SD, filepath.c_str());
//フラッシュを参照する場合
Wserver.serveStatic(filepath.c_str(),SPIFFS, filepath.c_str());

WebServerクラスのserverStatic()関数でSDカードに保管したデータを参照できるようにします。

serverStatic()関数の第1引数はファイルを表示するURI（URL）を指定します。第2引数はFSクラス（ファイルの操作を定義したもの）で宣言されたファイルの種別を指定します。今回はSDカードを参照するのでSDを指定します。第３引数はファイルのパスを指定します。

第2引数にSPIFFSを指定するとフラッシュを参照することができるのでフラッシュないのデータをダウンロードさせることもできます。

フラッシュは書き込み回数に制限があるため頻繁な書き込みには向かないため更新頻度の高い履歴をダウンロードさせる場合の用途には向きません。

HTMLデータの生成

void HtmlSet(void){
  String str = "";

  str += "<body>";
  str += "<a href='sht35.txt' download='sht35.txt'>履歴をダウンロード</a>";
  str += "</body>";
}

HTMLデータを作成してブラウザに表示します。ダウンロードリンクは<a>タグで作成します。<a>タグでは属性を指定しない場合はhrefで指定したページに遷移します。<a>タグにdownload属性を追加することで指定したURLにリンクされたファイルがダウンロードできるようになります。

download属性を追加しない場合は普通のリンクとなりファイルの内容を表示するページに遷移してしまいます。

SDライブラリの準備と初期化

#include <SPI.h>
#include <SD.h>

File myfile; //SDカードの状態を格納

void setup() {

  if(!SD.begin()){
    //初期化失敗の処理
  }
}

SDカードの操作はSPI通信を使用するためSD.hとSPI.hの2つのライブラリをインクルードする必要があります。SPIのスレーブ選択のDOを指定する必要がありますがデフォルトで5ピンが指定されています。

SDカードのファイルに関する情報等を管理するにFile型のクラス変数を変数を宣言します。例ではmyfileの宣言しています。

SDライブラリのbegin()関数を使用してSDカードに関する情報を初期化します。引数にはSDカードを選択するためのスレーブセレクト（SS）のピン番号を指定します。指定しない場合はデフォルトの5ピンで初期化が行われます。

SDカードが挿入されていない場合など失敗した場合は戻り値がfalseになるので必要があれば失敗したときの処理を入れます。

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

SDに履歴を追加する

myfile = SD.open(filepath,FILE_APPEND);//追加で書き込む"a"を指定

if( myfile ){ //ファイルが開けたら書き込む
  myfile.print(no);
  myfile.print(",");
  myfile.print(temp);
  myfile.print(",");
  myfile.println(humid);
  myfile.close(); //ファイルを閉じる
  ++no;
}
else{
  Serial.println("NG");
}

ESP32シリーズではSDカードの書き込みのパターンを使い分ける必要があります。ファイルを開いてデータを更新する場合はFILE_WRITE(“w”)を指定し、ファイルを開いてデータを追加する場合はFILE_APPEND(“a”)を指定します。

ESP32シリーズ以外のArduino環境のSDカードライブラリではWRITEとAPPENDの区別はなくWRITEを指定するとデータの追加になります。一部仕様が異なるため注意が必要です。

例ではFILE_APPENDでファイルを開いて履歴の番号、温度、湿度の情報をSDカードに書き込んでいます。それぞれのデータの間に”,”を入れているのはcsvファイルで展開するときにセルの区切りにするためです。

FILE_WRITEでファイルを開いた場合はファイルの内容が更新されるため１行分のデータしか確認することができません。

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

ブラウザー上でグラフとして表示するデータの配列を作成します。SHT35-DISから取得した温湿度データを配列の先頭に最古のデータが配置されるようにデータを格納することで時系列でデータの変化の履歴データを作成します。

getdata.temp[]の配列はリングポインタの構成としwpを更新しながら取得した温湿度データを格納していきます。wpはgetdata[]において次にデータを格納する場所を示すポインタなのでwp+1のデータが時系列でみた時getdata[]内の最古のデータになります。

最古のデータの位置をrpの初期値としてrpを更新しながらgetdata.temp[]配列のサイズ分wavetemp[]の配列にデータを移し替えることで最古のデータを先頭にした時系列のデータになります。

動作確認

ブラウザーから接続要求を行い温湿度データのグラフとダウンロードリンクが実装されていることを確認します。ダウンロードリンクから履歴データをダウンロードしてSDカードに保存している履歴データと比較します。

スマホでWiFiのアクセスポイントに接続し「192.168.11.2」を入力しリクエストを送るとESP32-WROOM-32Eからスマホに返信し温湿度データと時間経過による温湿度情報がグラフ表示されました。また「履歴をダウンロード」のリンクが追加されていることが確認できました。

「履歴をダウンロード」をクリックすると履歴をダウンロードするか確認のダイアログが表示されるのでダウンロードを許可すると指定したフォルダ内に「sht32.txt」がダウンロードされます。

ダウンロードするとフォルダ内にsht35.txtがファイル一覧に表示されます。sht35(12).txtのように()がついているのは同じファイル名で複数回ダウンロードを行った場合に表示されます。ファイルの内容を確認すると履歴の番号、温度データ、湿度データが保存されているのが分かります。次にSDカードのファイルを確認します。