三浦研究所

社会人エンジニア1年目が考える日々の研鑽、日常について書き、お互いに刺激しあえるようなブログを目指しています。

【Wifi, Bluetooth搭載マイコン】EPS32 の Wifi 機能を使って無線書き込み ~ Webサーバーを立ててみた ~

f:id:bamboomush:20210105181508p:plain

 この記事では、以前実装したOTA (Wifiを用いた無線書き込み)環境でLocal環境にWebサーバーを実装してみたので、そのやり方とサンプルプログラムを紹介します。

 

↓ 以前の記事

www.takeshi-1222.com

 

この記事を読むことで、自作のWebサーバーが立てられるようになり、センサ情報などをweb上で管理できるようになります。また、カメラの映像なども確認できるようになるので、監視カメラなどの用途にも使用可能です。さらに、まだ経験はないですが、スマホアプリなども作成することでwebページでなくても閲覧可能になるかと思います。これにより、ESP32をさらに使いこなせるようになること間違いなしです! 

◆ESP32関係の実装記事◆ 
  • DCモータ実装

www.takeshi-1222.com

  •  サーボモータ実装

www.takeshi-1222.com

  •  無線書き込み実装

www.takeshi-1222.com

  •  OLED実装

www.takeshi-1222.com

 

ESP32の簡単な説明

 ESP32とはどんなものなのかよくわかっていない方もいらっしゃると思いますので、簡単に説明します。

ESP32の大きな特徴はWifi, Bluetoothを搭載しているところです。そのうえで純正のArduinoよりも安価に購入でき、ArduinoコードやC++などいくつかの言語の互換性があります。そのため、1つのマイコンでいろいろなことを試したい方には大変おすすめなマイコンです。

 

実験構成

 今回の実験に使用する部品は以下のものです。
  • ESP32
  • モバイルバッテリー
  • マイクロUSBケーブル

ESP32は上記のものを使用します。

モバイルバッテリー、マイクロUSBケーブルに関してはなんでも問題ありませんが、参考に安いものを紹介しておきます。

 

モバイルバッテリー

マイクロUSBケーブル

 

モバイルバッテリーは電池の残量が確認できるものがおすすめです。また、マイクロUSBケーブルはたまに充電はできてもデータ通信ができず、ESP32にプログラムをそもそも書き込めないものが売っていますので、注意してください。

実験

Arduino IDEでESP32を使うためのセットアップ

Arduino IDEでESP32を使用する場合、以下の手順でボードのボードマネージャーにインストールしなければいけません。

  • Arduino IDEを立ち上げて、メニューから「ファイル」→「環境設定」を開き、「追加のボードマネージャのURL」にhttps://dl.espressif.com/dl/package_esp32_index.jsonと入力し「OK」をクリックします。

  • 「ツール」→「ボード」→「ボードマネージャ」を開きます。「esp32」と入力し、「esp32 by Espressif Systems」をインストールします。

  • 「ツール」→「ボード」で、「ESP32 Dev Module」を選択します。

ESP32自動書き込みの準備

私が購入したESP32は、プログラムを書き込む時にENスイッチやbootスイッチを操作しなければ、書き込みができない仕様になっていました。 (ものによっては無痛に書き込めますので要確認)

そのため、自動書き込みをするために、ENとGNDの間に0.22uF~2.2uFのコンデンサを追加する必要がありました。

私の場合、1.0uFの抵抗をはんだ付けしました。 (少々強引ですが無事動作しています。)

f:id:bamboomush:20210103222603j:plain

実行コード

それでは早速、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";    //Wi-Fiのアクセスポイント名に書き換えてください
const char* password = "password"; //Wi-Fiのパスワードに書き換えてください

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();
  }

  // Port defaults to 3232
  // ArduinoOTA.setPort(3232);

  // Hostname defaults to esp3232-[MAC]
  // ArduinoOTA.setHostname("myesp32");

  // No authentication by default
  // ArduinoOTA.setPassword("admin");

  // Password can be set with it's md5 value as well
  // MD5(admin) = 21232f297a57a5a743894a0e4a801fc3
  // ArduinoOTA.setPasswordHash("21232f297a57a5a743894a0e4a801fc3");

  ArduinoOTA
    .onStart([]() {
      String type;
      if (ArduinoOTA.getCommand() == U_FLASH)
        type = "sketch";
      else // U_SPIFFS
        type = "filesystem";

      // NOTE: if updating SPIFFS this would be the place to unmount SPIFFS using SPIFFS.end()
      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();
  // Serial.println("Hello");
  server.handleClient();
}

上記の書き込みが正常に完了すると、以下のようにシリアルモニターにIPアドレスが表示されます。

f:id:bamboomush:20210105213607p:plain

ここに書いてあるHTTP Server :以下の部分を開くと以下のように自作したwebページが表示できます。

f:id:bamboomush:20210105213610p:plain

 

また、これ以降は基本的にはIPアドレスは変わらないはずなので、PCからESP32を外し、モバイルバッテリー等で動かすことができます。今回のサンプルプログラムであれば、OTA実装ができているので、無線でプログラムの書き換えも可能となっています。 

まとめ

今回は、ESP32を使ってローカル環境にWebサーバーを実装しました。またその際のサンプルプログラムを紹介しました。

参考資料

ESP32 Arduino IDEのセットアップからLチカまで - JH7UBCブログ

esp32_tips – スイッチサイエンス