2017年12月10日

ESPr DeveloperでSPIFFSファイルシステム

ESPr DeveloperにWEBサーバーをたてて、スマートロックのインターフェース用のWEBページをアップしたかったので、SPIFFSファイルシステムについて調べてみました。

SPIFFSファイルシステム

SPIFFSファイルシステムは、 ESP8266(ESPr Developerのチップ)のフラッシュメモリのユーザーデータ領域に、HTMLや画像ファイル等をアップロードして、Arduinoスケッチから読み書きできるシステムです。

● SPIFFSファイルシステムをインストール

データ(ESP8266FS-0.3.0.zip)をGitHubのInstallation項目のreleases pageからダウンロードします。

ダウンロードしたデータを解凍してArduinoのドキュメントフォルダのtoolsに入れます。「Arduino > tools > ESP8266FS > tool > esp8266fs.jar」※toolsがない場合は、新規作成します。



ArduinoIDEを再起動して、ツールメニューに「ESP8266 Sketch Data Upload」という項目が表示されればOKです。

※ESPr DeveloperのFlash Sizeを4M(1M SPIFFS)にします。



● データをフラッシュメモリにアップロード

アップロードしたいデータは、Arduinoプロジェクトディレクトリの直下に「data」ディレクトリを作成して、その中に入れます。

今回は「OPEN」「CLOSE」ボタンをつけたスマホ用のWEBページのデータを「data」ディレクトリに入れました。



データを入れたら「ESP8266 Sketch Data Upload」をクリックしてアップロードします。
※アップロードする際は、シリアルモニタを閉じておく必要があります。
しばらくするとアップローが完了します。

ESPr Developer Rev.3だと、「SPIFFS Upload failed!」になってしまうという情報もありましたが、手持ちのESPr Developer Rev.3では問題なくアップロードできました。

● SmartLock.ino

#include <FS.h>

String strHtml;

void setup(){
  Serial.begin(9600);
  SPIFFS.begin();
  String strHtml = loadHtmlFile("/index.html");
  Serial.println(strHtml);
}

String loadHtmlFile(String path){
  String txt = "";
  String line = "";
  char c;
  strHtml = "";
  
  File htmlFile = SPIFFS.open(path, "r");
 
  if (htmlFile) {
    while (htmlFile.available()) {
      c = htmlFile.read();
      if (c == '\n' || c == '\r') {
        if (line.length() > 0) {
          txt = txt + line + "\n";
        }
        line = "";
      } else {
        line = line + String(c);       
      }
    }
    if (line.length() > 0) {
      txt = txt + line;
    }
    htmlFile.close();
    
  } else {
    Serial.println("file open failed");
  }

  return txt;
}

void loop() {}

フラッシュメモリにアップロードしたHTMLを読み込んでシリアルモニタに出力しました。確かにアップロードできているようです。アップした画像をブラウザで表示させるためには、MIMEタイプを設定する必要があります。「void handleNotFound()」で画像の参照が来るタイミングで、MIMEタイプを設定しています。
ESPr DeveloperをWiFiに接続して、WEBサーバーを立てて、MIMEタイプを設定したソースコードは下記になります。


● SmartLock.ino

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>

#define SSID "WiFiのSSID"
#define PASS "WiFiのパスワード"

ESP8266WebServer server(80);

String strHtml;

String loadHtmlFile(String path){
  String txt = "";
  String line = "";
  char c;
  strHtml = "";
   
  File htmlFile = SPIFFS.open(path, "r");
  
  if (htmlFile) {
    while (htmlFile.available()) {
      c = htmlFile.read();
      if (c == '\n' || c == '\r') {
        if (line.length() > 0) {
          txt = txt + line + "\n";
        }
        line = "";
      } else {
        line = line + String(c);       
      }
    }
    if (line.length() > 0) {
      txt = txt + line;
    }
    htmlFile.close();
     
  } else {
    Serial.println("file open failed");
  }
  return txt;
}

bool loadFromESP8266(String path){
  String dataType = "";

  if(path.endsWith(".png")) dataType = "image/png";
  else if(path.endsWith(".gif")) dataType = "image/gif";
  else if(path.endsWith(".jpg")) dataType = "image/jpeg";

  SPIFFS.begin();
  File img = SPIFFS.open(path,"r");
  server.streamFile(img,dataType);
  img.close();
  return true;
}

void handleRoot() {  
  server.send(200,"text/html",strHtml);
}

void handleNotFound(){
  if(loadFromESP8266(server.uri())) return;  
}

void setup(){
  Serial.begin(9600);
  
  WiFi.begin(SSID, PASS);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.onNotFound(handleNotFound);
  
  server.begin();
  
  SPIFFS.begin();
  strHtml = loadHtmlFile("/index.html");
  Serial.println(strHtml);  
}

void loop() {
  server.handleClient();
}

● index.html

WEBサーバーにアップしたindex.htmlは下記になります。

<!DOCTYPE html>
<html lang="ja">
<head>





SMART LOCK




<body>

</body>
</html>
  • このエントリーをはてなブックマークに追加
前の記事へ

ESPr Developerでサーボモーターを遠隔操作

次の記事へ

ESPr DeveloperにFTPサーバー