この記事では、以前実装したOTA (Wifiを用いた無線書き込み)環境でLocal環境にWebサーバーを実装してみたので、そのやり方とサンプルプログラムを紹介します。
↓ 以前の記事
www.takeshi-1222.com
この記事を読むことで、自作のWebサーバーが立てられるようになり、センサ情報などをweb上で管理できるようになります。また、カメラの映像なども確認できるようになるので、監視カメラなどの用途にも使用可能です。さらに、まだ経験はないですが、スマホアプリなども作成することでwebページでなくても閲覧可能になるかと思います。これにより、ESP32をさらに使いこなせるようになること間違いなしです！
ESP32の簡単な説明
ESP32とはどんなものなのかよくわかっていない方もいらっしゃると思いますので、簡単に説明します。
ESP32の大きな特徴はWifi, Bluetoothを搭載しているところです。そのうえで純正のArduinoよりも安価に購入でき、ArduinoコードやC++などいくつかの言語の互換性があります。そのため、1つのマイコンでいろいろなことを試したい方には大変おすすめなマイコンです。
リンク
実験構成
今回の実験に使用する部品は以下のものです。
- ESP32
- モバイルバッテリー
- マイクロUSBケーブル
ESP32は上記のものを使用します。
モバイルバッテリー、マイクロUSBケーブルに関してはなんでも問題ありませんが、参考に安いものを紹介しておきます。
モバイルバッテリー
リンク
マイクロUSBケーブル
リンク
モバイルバッテリーは電池の残量が確認できるものがおすすめです。また、マイクロUSBケーブルはたまに充電はできてもデータ通信ができず、ESP32にプログラムをそもそも書き込めないものが売っていますので、注意してください。
実験
Arduino IDEでESP32を使うためのセットアップ
Arduino IDEでESP32を使用する場合、以下の手順でボードのボードマネージャーにインストールしなければいけません。
ESP32自動書き込みの準備
私が購入したESP32は、プログラムを書き込む時にENスイッチやbootスイッチを操作しなければ、書き込みができない仕様になっていました。 (ものによっては無痛に書き込めますので要確認)
そのため、自動書き込みをするために、ENとGNDの間に0.22uF～2.2uFのコンデンサを追加する必要がありました。
私の場合、1.0uFの抵抗をはんだ付けしました。 (少々強引ですが無事動作しています。)
実行コード
それでは早速、ESP32をPCに接続し、以下のコードを書き込んでください。
この時、"ssid"と"password"の中身を自身が使用するWifiのものに書き換えてください。(自宅のWifiを使用する場合、モデムの裏とかに書いてあると思います。)
#include <WiFi.h>
#include <WebServer.h>
#include <ESPmDNS.h>
#include <WiFiUdp.h>
#include <ArduinoOTA.h>
const char* ssid = "ssid";
const char* password = "password";
WebServer server(80);
void handleRoot() {
char temp[400];
snprintf(temp, 500,
"<html>\
<head>\
<meta http-equiv='refresh' content='5'/>\
<title>ESP32 server test</title>\
<style>\
body{background-color:#40e0d0;font-family:Arial,Helvetica,Sans-Serif;Color:#000000;}\
</style>\
</head>\
<body>\
<h1>text from ESP32</h1>\
<p>hello hogehoge</p>\
<p>byebye piyopiyo</p>\
</body>\
</html>"
);
server.send(200, "text/html", temp);
}
void setup() {
Serial.begin(115200);
Serial.println("Booting");
WiFi.mode(WIFI_STA);
while (!Serial);
WiFi.begin(ssid, password);
while (WiFi.waitForConnectResult() != WL_CONNECTED) {
Serial.println("Connection Failed! Rebooting...");
delay(5000);
ESP.restart();
}
ArduinoOTA
.onStart([]() {
String type;
if (ArduinoOTA.getCommand() == U_FLASH)
type = "sketch";
else
type = "filesystem";
Serial.println("Start updating " + type);
})
.onEnd([]() {
Serial.println("\nEnd");
})
.onProgress([](unsigned int progress, unsigned int total) {
Serial.printf("Progress: %u%%\r", (progress / (total / 100)));
})
.onError([](ota_error_t error) {
Serial.printf("Error[%u]: ", error);
if (error == OTA_AUTH_ERROR) Serial.println("Auth Failed");
else if (error == OTA_BEGIN_ERROR) Serial.println("Begin Failed");
else if (error == OTA_CONNECT_ERROR) Serial.println("Connect Failed");
else if (error == OTA_RECEIVE_ERROR) Serial.println("Receive Failed");
else if (error == OTA_END_ERROR) Serial.println("End Failed");
});
ArduinoOTA.begin();
Serial.println("Ready");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
server.on("/", handleRoot);
server.begin();
Serial.println("HTTP server started");
Serial.print("HTTP Server: http://");
Serial.print(WiFi.localIP());
Serial.println("/");
}
void loop() {
ArduinoOTA.handle();
server.handleClient();
}
上記の書き込みが正常に完了すると、以下のようにシリアルモニターにIPアドレスが表示されます。
ここに書いてあるHTTP Server :以下の部分を開くと以下のように自作したwebページが表示できます。
また、これ以降は基本的にはIPアドレスは変わらないはずなので、PCからESP32を外し、モバイルバッテリー等で動かすことができます。今回のサンプルプログラムであれば、OTA実装ができているので、無線でプログラムの書き換えも可能となっています。
まとめ
今回は、ESP32を使ってローカル環境にWebサーバーを実装しました。またその際のサンプルプログラムを紹介しました。
参考資料
ESP32 Arduino IDEのセットアップからLチカまで - JH7UBCブログ
esp32_tips – スイッチサイエンス
