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

ESP32

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

はじめに

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

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

開発環境

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)

作業手順

スケッチ作成

配置例

「C:\Users\xxxxx\OneDrive\ドキュメント\Arduino\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";

index.html/style.css 作成

配置例

「C:\Users\xxxxx\OneDrive\ドキュメント\Arduino\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;
}

画像作成

配置例

「C:\Users\xxxxx\OneDrive\ドキュメント\Arduino\ESP_WebServer\data

表示させたい画像を用意します。

今回は上の画像を使用しますので、こちらを右クリックして「名前を付けて画像を保存」からダウンロードして「image.png」という名前で「data」フォルダに配置してください。

書き込み

スケッチ書き込み

スケッチは、通常通りビルドして書き込みしてください。

dataフォルダ書き込み

「ESP32 Sketch Data Upload」を実行して、書き込みしてください。

動作確認

ウェブブラウザでIPアドレスにアクセスし、以下のように表示されれば成功です。

内部変数カウンタは1秒ごとにインクリメントするようにしていますので、リロードボタンを押下すると増えていくと思います。そして、変数クリアボタンを押下すると0に戻ります。

おわりに

フラッシュメモリにアップロードしたファイルは、SPIFFS (SPI Flash File System)を使用して、読み込むため index.html からはアクセスできません。一旦プログラムに読み込む要求をして、プログラムが SPIFFS を使用して画像を取得して返しています。

少し通常のWEBページを作成するより複雑になりますが、センサから取得した情報を表示させたり、見栄えの良いページの作成もできそうです。

コメント

タイトルとURLをコピーしました