M5ATOMでWiFiManagerを使って実行時にWi-Fi接続先を設定する

はじめに

M5ATOMなどのESP32搭載デバイスをWi-Fiに接続する場合、まず単純な方法ではプログラム中にSSIDとパスワードを記述します。

例えば、次のような形です。

WiFi.begin("SSID", "PASSWORD");

この方法でもWi-Fiには接続できますが、接続するアクセスポイントを変更するたびに、

1. プログラムのSSID、パスワードを書き換える
2. 再ビルドする
3. M5ATOMへ再度書き込む

という作業が必要になります。

ロボットやIoT機器を実際に別の場所へ持っていって使用する場合、接続先のWi-Fiが変わるたびにプログラムを書き換えるのは不便です。

そこで今回は、ESP32用の WiFiManager を使用し、

プログラムを書き換えずに、実行時にWi-Fiアクセスポイントの接続先を設定できること

をM5ATOM Lite（以降はM5ATOMと記述します。）で実証しました。また、Wi-Fi接続後に同一LAN上のPCからHTTP通信を行い、実際に通信可能であることも確認します。(このM5ATOMの実際のサイズは約2.5cm角です。）

このM5ATOMのwifi接続先を以下のようにWebブラウザで設定します。

---

今回の構成

今回使用した構成は単純です。M5ATOMをWi-Fiアクセスポイントへ接続します。接続後、同一LAN上のPCからM5ATOMへHTTPでアクセスし、M5ATOM内蔵RGB LEDの色を変更します。

今回はLED制御そのものが目的ではありません。

Wi-Fiの設定を行ったあと、実際に同一LAN上からHTTP通信できることを確認するための簡単な動作確認

としてLEDを使用しています。

---

WiFiManagerの動作概要

WiFiManagerを使用すると、M5ATOM内に接続可能なWi-Fi設定が保存されていない場合、一時的にM5ATOM自身がWi-Fiアクセスポイントになります。

今回のプログラムでは、

wm.autoConnect("M5ATOM-WIFI-SETUP");

としています。そのため、Wi-Fi設定が存在しない場合、

M5ATOM-WIFI-SETUP

というSSIDのアクセスポイントが起動します。Windows PCからは以下のように選択出来ます。

このアクセスポイントへPCやスマートフォンから接続すると、WiFiManagerの設定画面から周囲のWi-Fiアクセスポイントを選択できます。

流れは次のようになります。

M5ATOM起動
    ↓
保存済みWi-Fi設定を確認
    ↓
設定がない
    ↓
M5ATOM-WIFI-SETUP
という設定用APを起動
    ↓
PCまたはスマートフォンから接続
    ↓
WiFiManagerの設定画面を表示
    ↓
実際に使用するWi-Fi APを選択
    ↓
SSID / Passwordを設定
    ↓
M5ATOMが選択したWi-Fi APへ接続
    ↓
DHCPでIPアドレス取得

ここで重要なのは、M5ATOMが常時アクセスポイントとして動作するわけではないという点です。

WiFiManagerが起動する M5ATOM-WIFI-SETUP は、Wi-Fi接続先を設定するための一時的なアクセスポイントです。

設定完了後は、M5ATOM自身が通常のWi-Fiクライアントとして指定されたアクセスポイントへ接続します。

---

プログラム

今回使用したプログラムです。

#include <WiFi.h>
#include <WebServer.h>
#include <FastLED.h>
#include <WiFiManager.h>
#include <ESPmDNS.h>

// ===== Wi-Fi設定 =====
WiFiManager wm;

// ===== HTTP Server =====
WebServer server(80);

// ===== M5ATOM 内蔵RGB LED =====
#define LED_PIN 27
#define NUM_LEDS 1

CRGB leds[NUM_LEDS];

// ===== 内蔵LED表示 =====
void setLedColor(const CRGB& color) {
  leds[0] = color;
  FastLED.show();
}

void sendText(const String& msg) {
  server.send(200, "text/plain; charset=utf-8", msg);
}

// ===== HTTP / =====
void handleRoot() {
  sendText(
    "M5ATOM WiFi HTTP LED Demo\n"
    "\n"
    "GET /red\n"
    "GET /yellow\n"
    "GET /green\n"
    "GET /off\n"
  );
}

void handleRed() {
  setLedColor(CRGB::Red);
  sendText("LED RED\n");
}

void handleYellow() {
  setLedColor(CRGB::Yellow);
  sendText("LED YELLOW\n");
}

void handleGreen() {
  setLedColor(CRGB::Green);
  sendText("LED GREEN\n");
}

void handleOff() {
  setLedColor(CRGB::Black);
  sendText("LED OFF\n");
}

void handleNotFound() {
  server.send(
    404,
    "text/plain; charset=utf-8",
    "not found\n"
  );
}

void setup() {
  Serial.begin(115200);
  delay(500);

  Serial.println();
  Serial.println("M5ATOM WiFi HTTP LED Demo START");

  // ===== 内蔵LED初期化 =====
  FastLED.addLeds<NEOPIXEL, LED_PIN>(leds, NUM_LEDS);
  FastLED.setBrightness(30);

  setLedColor(CRGB::Black);

  // ===== Wi-Fi接続 =====
  Serial.println("WiFi setup start");

  bool ok = wm.autoConnect("M5ATOM-WIFI-SETUP");

  if (!ok) {
    Serial.println("WiFi connection failed");
    delay(1000);
    ESP.restart();
  }

  Serial.println();
  Serial.println("WiFi connected");

  Serial.print("SSID: ");
  Serial.println(WiFi.SSID());

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

  // ===== mDNS =====
  if (MDNS.begin("m5atom")) {
    Serial.println("mDNS responder started");
    Serial.println("http://m5atom.local/");
  }

  // ===== HTTPルーティング =====
  server.on("/", handleRoot);
  server.on("/red", handleRed);
  server.on("/yellow", handleYellow);
  server.on("/green", handleGreen);
  server.on("/off", handleOff);

  server.onNotFound(handleNotFound);

  // ===== HTTP Server開始 =====
  server.begin();

  Serial.println("HTTP server started");
}

void loop() {
  server.handleClient();
}

---

実行方法

M5ATOMへプログラムを書き込み、起動します。初回起動など、Wi-Fi接続情報が保存されていない場合は、PCまたはスマートフォンのWi-Fi一覧に、

M5ATOM-WIFI-SETUP

が表示されます。

これに接続し、WiFiManagerの設定画面から実際に使用するWi-Fiアクセスポイントを選択します。
以下のConfigure WiFiからアクセスポイント一覧が表示されるので選択します。

SSIDを選択して一覧画面の下の方でパスワードを設定すると、M5ATOMがそのWi-Fiへ接続します。

シリアルモニタには取得したIPアドレスが表示されます。

例えば、

WiFi connected
SSID: XXXXX
IP address: 192.168.1.50
HTTP server started

となった場合、同じLAN上のPCからブラウザなどで、

http://192.168.1.50/red

へアクセスします。M5ATOMの内蔵LEDが赤色になります。
※実際にはシリアルモニタが使える場合の方が少ないので、mDNSで構成した以下を使用します。
http://m5atom.local/red
同様に、

http://m5atom.local/yellow
http://m5atom.local/green
http://m5atom.local/off

へアクセスすると、それぞれ、

• 黄色
• 緑色
• 消灯

へ変更されます。
これにより、

WiFiManagerで設定したWi-Fi APへM5ATOMが接続し、同一LAN上のPCからHTTP通信できていること
が確認できました。
緑色に設定した例です。

---

一度設定したWi-Fiには自動で再接続する

WiFiManagerで設定したWi-Fi情報は保存されます。

そのため、M5ATOMの電源を切って再度起動しても、通常は前回設定したWi-Fiアクセスポイントへ自動的に接続します。

つまり毎回、

M5ATOM-WIFI-SETUP

へ接続してWi-Fi設定をやり直す必要はありません。
これがWiFiManagerを使用する大きな利点です。

---

別のWi-Fiへ接続し直す

別のWi-Fiアクセスポイントへ接続する実証を行いたい場合などは、保存されているWi-Fi設定を削除できます。

WiFiManagerでは、

wm.resetSettings();

を使用します。例えば、

wm.resetSettings();
bool ok = wm.autoConnect("M5ATOM-WIFI-SETUP");

とすると、保存されていたWi-Fi設定を削除してから autoConnect() を実行します。この状態でM5ATOMを起動すると再び、

M5ATOM-WIFI-SETUP

が起動するため、別のWi-Fiアクセスポイントを設定できます。

ただし、通常運用時に毎回 resetSettings() を実行すると、起動するたびにWi-Fi設定が消えてしまいます。

そのため通常は、

// wm.resetSettings();

bool ok = wm.autoConnect("M5ATOM-WIFI-SETUP");

としておき、Wi-Fi設定を初期化したい場合だけ、

wm.resetSettings();

を有効にする方法が簡単です。

将来的には、M5ATOMのボタンを押しながら起動した場合だけWi-Fi設定を削除する、といった実装も可能です。

---

実証結果

今回の実証では、

WiFiManagerを使用することで、M5ATOMのプログラムを書き換えることなく、実行時にWi-Fiアクセスポイントの接続先を設定できる

ことを確認しました。

また設定後は、同一LAN上のPCからHTTPでM5ATOMへアクセスし、内蔵LEDを操作できました。

したがって、単にWi-Fiへ接続できたことだけではなく、実際にLAN上の機器間でアプリケーションレベルの通信が可能であることまで確認できました。

---

この方式のメリット

ロボットやIoT機器では、開発環境で使用していたWi-Fiと、実際に機器を設置する場所のWi-Fiが異なるケースがあります。

SSIDやパスワードをプログラムへ直接記述している場合、設置場所が変わるたびに、

SSID変更
 ↓
プログラム変更
 ↓
ビルド
 ↓
ファームウェア書き込み

が必要になります。
WiFiManagerを使用すれば、

設定用APへ接続
 ↓
使用するWi-Fiを選択
 ↓
接続

だけで変更できます。
つまり、Wi-Fi環境が変わってもファームウェアを書き換える必要がありません。

今回はM5ATOMの内蔵LEDをHTTPで操作するだけの単純な実証ですが、この通信部分をモーター制御、センサー取得、ロボット制御などへ置き換えることができます。

ロボットを複数の場所へ持ち出して実証する場合にも、ネットワーク設定とアプリケーションプログラムを分離できることは大きなメリットになると考えます。