[ESP32]Webサーバーを構築する方法(画像表示/内部変数表示,変更)

Webサーバーを構築する方法(画像表示/内部変数表示,変更)

Webサーバーを構築する方法(画像表示/内部変数表示,変更)

はじめに

この記事は、前回の記事（ESP32上に「index.html/style.css」をアップロードしてWebサーバーにする方法）の続きになりますので、詳細な手順は前回記事をご確認ください。

ESP32のフラッシュメモリに画像をアップロードして表示させる方法と、内部変数の表示,変更する方法をご紹介いたします。

Arduino IDE 2.X.X かつ Arduino IDE 2.X.X を使用している場合、より速く安全な LittleFS を使用した方法をお勧めします。

開発環境

OS : Windows 11 Pro
ESP32：ESP-WROOM-32
統合開発環境 : Arduino IDE 2.1.0 / Arduino IDE 1.8.19
使用ライブラリ：ESPAsyncWebServer(1.2.6) / ESP32FS(1.1)

作業手順

スケッチ作成

テストプログラムのスケッチを作成します。
「ESP_WebServer」というフォルダを作成して、「ESP_WebServer.ino」というスケッチファイルを作成します。

配置場所（「ファイル」→「基本設定」でスケッチブックの場所を確認）

「スケッチブックの場所\ESP_WebServer\ESP_WebServer」

<<ESP_WebServer.ino>>

#include <WiFi.h>
#include <ESPAsyncWebSrv.h>
#include <SPIFFS.h>

AsyncWebServer server(80);

const char* ssid = "xxxxxxxx";
const char* password = "xxxxxxxx";

ulong count = 0;

// 内部変数でhtmlファイル内のSTATEの文字を変える
String processor(const String& var) {
  Serial.println(var);
  if (var == "COUNTER") {
    return String(count);
  } else {
    return String();
  }
}

void setup() {

    Serial.begin(115200);

    // SPIFFSのセットアップ
    if (!SPIFFS.begin(true)) {
      Serial.println("An Error has occurred while mounting SPIFFS");
      return;
    }

    WiFi.mode(WIFI_STA);
    WiFi.begin(ssid, password);
    if (WiFi.waitForConnectResult() != WL_CONNECTED) {
        Serial.printf("WiFi Failed!\n");
        return;
    }

    Serial.print("IP Address: ");
    Serial.println(WiFi.localIP());

    // GETリクエストに対するハンドラーを登録
    // rootにアクセスされた時のレスポンス
    server.on("/", HTTP_GET, [](AsyncWebServerRequest * request) {
      request->send(SPIFFS, "/index.html", String(), false, processor);
    });
    // style.cssにアクセスされた時のレスポンス
    server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest * request) {
      request->send(SPIFFS, "/style.css", "text/css");
    });
    // 画像にアクセスされた時のレスポンス
    server.on("/image", HTTP_GET, [](AsyncWebServerRequest * request) {
      request->send(SPIFFS, "/image.png", "image/png");
    });
    // リロードボタンにアクセスされた時のレスポンス
    server.on("/RELOAD", HTTP_GET, [](AsyncWebServerRequest * request) {
      request->redirect("/");
    });
    // クリアボタンにアクセスされた時のレスポンス
    server.on("/BUTTON", HTTP_GET, [](AsyncWebServerRequest * request) {
      count = 0;
      request->redirect("/");
    });

    // ESP32_WebServer start
    server.begin();
    Serial.println("ESP32_WebServer start!");
}

void loop() {
  count++;
  delay(1000);
}

7行目と8行目の[ssid]と[password]の内容はご自身の環境に変更してください。

const char* ssid = "xxxxxxxx";
const char* password = "xxxxxxxx";

アップロードファイル作成

こちらからダウンロードして以下の場所へ配置してください。

配置場所（「ファイル」→「基本設定」でスケッチブックの場所を確認）

「スケッチブックの場所\ESP_WebServer\data」

👇以降はファイルの内容です👇

<<index.html>>

<!DOCTYPE html>
<html>
  <head>
    <title>ESP32_WebServer</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>ESP32_WebServer</h1>
    <p>farmsoft</p>
    <p><img src="/image"></p>
    <p>内部変数カウンタ：%COUNTER%</p>
    <p>
      <button type="button" onclick="location.href='RELOAD'">リロード</button>
      <button type="button" onclick="location.href='BUTTON'">変数クリア</button>
    </p>
  </body>
</html>

<<style.css>>

html {
  font-family: Helvetica;
  display: inline-block;
  margin: 0px auto;
  text-align: center;
}
h1 {
  font-size: 4.0rem;
  color: blue;
}
button {
  font-size: 2.0rem;
}
p {
  font-size: 2.0rem;
  margin-top: 0px;
  margin-bottom: 0px;
}

<<image.png>>