Freenove ESP32-S3-WROOM CAMボードでWeb Server

Freenove ESP32-S3-WROOM CAMボードにWeb Serverを構築します。LittleFSライブラリを使用して画像ファイルを保存し、ブラウザからのアクセスでこの画像ファイルを表示させます。

ライブラリのインストール

ESPAsyncWebSrv

画面左側のライブラリマネージャーで「ESPAsyncWebSrv 」を検索して、Webサーバライブラリ「ESPAsyncWebSrv 」をインストールします。

arduino-littlefs-upload

ArduinoIDE2(2.x.x)におけるESP32のファイルシステムでは、非推奨なSPIFFSではなくLittleFSを使用します。LittleFSは組み込みシステム向けに特別に設計されており、突然の電源喪失が発生してもファイルシステムの破損を防ぐように設計されています。次の手順でarduino-littlefs-uploadプラグインを導入します。

「earlephilhower/arduino-littlefs-upload」から、プラグイン「arduino-littlefs-upload-x.x.x.zip」を取得し、解凍してvsixを入手します。

「C:\Users\（ユーザー名）\.arduinoIDE」にフォルダ「plugins」を作成して、ダウンロードした「arduino-littlefs-upload-x.x.x.vsix」を格納します。

アップロードしたいデータを、スケッチと同じフォルダにフォルダ「data」（固定パス）を作成して配置します。

ArduinoIDE(ver2.x.x)を再起動して、対象のdataフォルダが格納されたスケッチを開きます。

ボード選択やCOMポート選択を済ませ、スケッチ書き込みができる状態にします。

「Ctrl+Shift+P」でコマンドパレットを開き、「Upload LittleFS to Pico/ESP8266/ESP32」を選択します。

data配下のファイルが自動的にアップロードされ、CompletedUploadと表示されれば完了します。

IDEのシリアルモニタの窓を閉じたのちに実行します。

Web Serverスケッチの作成

Web Serverスケッチを次のように作成します。

/*********
  Rui Santos & Sara Santos - Random Nerd Tutorials
  Complete project details at https://RandomNerdTutorials.com/display-images-esp32-esp8266-web-server/
*********/
#ifdef ESP32
  #include <WiFi.h>
  #include <ESPAsyncWebServer.h>
  #include <LittleFS.h>
#else
  #include <Arduino.h>
  #include <ESP8266WiFi.h>
  #include <Hash.h>
  #include <ESPAsyncTCP.h>
  #include <ESPAsyncWebServer.h>
  #include "LittleFS.h"
#endif

// Replace with your network credentials
const char* ssid = "xxxxxx";
const char* password = "xxxxx";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <h2>ESP Image Web Server</h2>
  <img src="sun">
  <img src="sun-cloud">
  <img src="cloud">
  <img src="rain">
  <img src="storm">
  <img src="snow">
</body>  
</html>)rawliteral";

void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  
  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }
  if(!LittleFS.begin()){
        Serial.println("An Error has occurred while mounting LittleFS");
        return;
  }

  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/html", index_html);
  });
  
  server.on("/sun", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/sun.png", "image/png");
  });
  server.on("/sun-cloud", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/sun-cloud.png", "image/png");
  });
  server.on("/cloud", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/cloud.png", "image/png");
  });
  server.on("/rain", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/rain.png", "image/png");
  });
  server.on("/storm", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/storm.png", "image/png");
  });
  server.on("/snow", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/snow.png", "image/png");
  });
  // Start server
  server.begin();
}
 
void loop(){
  
}

Web Serverスケッチの実行

Web Serverスケッチを実行し、ブラウザから「http://192.168.xx.xxx/」にアクセスすると、次のように表示されます

実行すると次のエラーメッセージが発生し、リブートが繰り返されました。
「assert failed: tcp_alloc /IDF/components/lwip/lwip/src/core/tcp.c:1854 (Required to lock TCPIP core functionality!)」

修正方法は、ボードマネージャでespのバージョンを3.3.0から3.0.7にバックデートします。