ESP-WROOM02をサーバーモードにしてWI-FIの設定をブラウザから記憶させてみる！
今回のテーマは「ESP-WROOM02をサーバーモードにしてWI-FIの設定をブラウザから記憶させてみる！」です！
詳しく説明しますと、ESP-WROOM02にはサーバーモードとクライアントモードがあります。
サーバーモードでは、ESP-WROOM02 自身が アクセスポイント兼 Webサーバ になって
ブラウザを使った設定の変更をできるようにします！
若干難易度は上がるかもしれませんが、まずはコピペして動作させてみましょう！
これができるようになればIoT(物とネットワークが繋がること)が簡単に作れちゃいます^^
※ESPWROOM02の回路、及び開発環境の準備が出来ていると前提して作業を進めさせて頂きます。
まだできていない方はまずはこちらを成功させてみましょう！
①「ライブラリー用意」
・ライブラリーはすでに用意されているので用意する必要なし！
②「ArduinoIEDを起動し早速コピペ」
・初心者の方はコードを細かく理解する前にまずはコピペして試してみましょう！
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | #include <ESP8266WiFi.h> #include <WiFiClient.h> #include <ESP8266WebServer.h> #include <FS.h> // モード切り替えピン const int MODE_PIN = 0; // GPIO0 //メッセージLED const int messageLed = 12; // Wi-Fi設定を保存ファイル const char* settings = "/settings.txt"; // サーバモードでのパスワード const String pass = "Settings"; ESP8266WebServer server(80); /** WEBに表示されるWiFi設定画面(入力画面) */ void handleRootGet() { String html = ""; html += "<h1>Wi-Fi Settings</h1>"; html += "<form method='post'>"; html += " <input type='text' name='ssid' placeholder='ssid'><br>"; html += " <input type='text' name='pass' placeholder='pass'><br>"; html += " <input type='submit'><br>"; html += "</form>"; server.send(200, "text/html", html); } /** WEBに表示されるWiFi設定画面(入力完了画面) */ void handleRootPost() { String ssid = server.arg("ssid"); String pass = server.arg("pass"); File f = SPIFFS.open(settings, "w"); f.println(ssid); f.println(pass); f.close(); String html = ""; html += "<h1>Wi-Fi Settings</h1>"; html += ssid + "<br>"; html += pass + "<br>"; server.send(200, "text/html", html); } /** 初期化(クライアントモード) */ void setup_client() { File f = SPIFFS.open(settings, "r"); String ssid = f.readStringUntil('\n'); String pass = f.readStringUntil('\n'); f.close(); ssid.trim(); pass.trim(); Serial.println("SSID: " + ssid); Serial.println("PASS: " + pass); WiFi.begin(ssid.c_str(), pass.c_str()); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println("WiFi connected"); Serial.print("IP address: "); Serial.println(WiFi.localIP()); } /** 初期化(サーバモード) */ void setup_server() { byte mac[6]; WiFi.macAddress(mac); String ssid = ""; for (int i = 0; i < 6; i++) { ssid += String(mac[i], HEX); } Serial.println("SSID: " + ssid); Serial.println("PASS: " + pass); /* You can remove the password parameter if you want the AP to be open. */ WiFi.softAP(ssid.c_str(), pass.c_str()); server.on("/", HTTP_GET, handleRootGet); server.on("/", HTTP_POST, handleRootPost); server.begin(); Serial.println("HTTP server started."); } /** 初期化 */ void setup() { Serial.begin(115200); Serial.println(); //digitalpinセットアップ pinMode(messageLed, OUTPUT); pinMode(MODE_PIN, INPUT); // 1秒以内にMODEを切り替える delay(1000); // ファイルシステム初期化 SPIFFS.begin(); //モード判別 if (digitalRead(MODE_PIN) == 0) { //サーバーモードになったら3秒光らせる digitalWrite(messageLed, HIGH); delay(3000); digitalWrite(messageLed, LOW); // サーバモード初期化 setup_server(); } else { // クライアントモード初期化 setup_client(); } } void loop() { server.handleClient(); //起動しているのか確認用 digitalWrite(messageLed, HIGH); delay(1000); digitalWrite(messageLed, LOW); delay(1000); } |
ESP-WROOM02本体を書き込みモードにし、ビルドをしましょう！
※書き込む前に、シリアルモニターを開いておきましょう！
※シリアルモニターに変な暗号が表示されたり、何も表示されない場合、
シリアルモニターの右下にあるbpsが115200bpsになっているか確認してください。
※シリアルモニターが選択できない場合、まずツールの中にあります「シリアルポート:COM 」が選択されているか確認してください。
これが選択できない状態だたUSBケーブルが原因の可能性があります。USBケーブルは必ずデータ通信が可能なものを使用しましょう。
③「動作確認」
・コードのコピペが完了したら動作確認！
ビルドが完了するとシリアルモニターにこんな感じで何か表示されると思います↓
・表示されるのが確認できましたら次は本体をサーバーモードにします。
サーバーモードの切り替え方は、リセットボタンを一回押して1秒以内にGPIO 0(IO0)をLOWにします。
↓の回路で説明すると、黒ボタンがリセット、黄色のボタンがGPIO 0(IO0)になります。
（メッセージLEDを（IO012に)付けていれば、サーバーモードに切り替わったとき3秒点灯します。）
・サーバーモードに切り替わったらシリアルモニターにはこんな感じで表示されます↓
※SSIDはマイコン(ESP-WROOM02)ごとに変わります。
・次に、マイコンをWI-Fi経由でPCに繫げてみます！
PC画面でネット接続するためのアンテナアイコンをクリックすると、
いくつかアクセスポイントの候補が出てくると思います。
その中にシリアルモニターに表示されているSSIDがあるかと思います。
それをクリックするパスワードを入力する項目が出てきます。
そこにシリアルモニターで表示されているPASSをコピペして貼り付け、もしくは入力し、次へを押せば完了！
※ちなみにPASSはプログラムで指定したものになりますので自由に変えられます。
1 2 | // サーバモードでのパスワード const String pass = "Settings"; |
・次へを押した後、接続してますみたいな画面になるかと思いますがそのまま閉じて構いません。
また、アンテナアイコンが黄色い注意マークみたいなのが出ていても問題ありません。
※PCではなく、スマートフォンなどで試す場合も基本操作は同じになります。
④「ブラウザに繫げてWI-FI設定をしてみる」
・では、早速正常に接続できているか確認してみたいと思います。
↓のURLをクリックすることでWI-FI設定画面が表示されます！
上手く接続できているとこんな感じに表示されます↓
・この画面で、接続させたいWI-FIのssidとpassを入力します。
入力したらクエリ送信ボタンを押しますとページが変わり、入力したssidとpassが表示されます！
これでマイコンに入力したssidとpassが保存されましたので、ブラウザは閉じても大丈夫です！
※もし、この画面以外のページが出たら上手く接続ができていないと考えられます。
主な原因は、回路が不安定で一瞬接続できてもすぎ切断されたりする場合があります。
もし回路が安定しない場合はコンデンサを１つ増やしましょう！
もしくは、サーバーモードになってなかったってこともありえます。
サーバーモードにしなくてもPCのWI-FI候補には表示される場合があります！
その場合はもう一度手順を見直しましょう！
・では、本当に保存されたのか確認してみましよう！
シリアルモニターを起動させた状態でマイコン側をリセット、もしくは再起動させてみましょう。
そうするとシリアルモニターにはなんと、先ほどブラウザで設定したssidとpassが表示されるかと思います！
マイコンとWI-FIが繋がると「WIFI connected」と表示されIPが表示されます！
これで成功です！
以上、お疲れ様でした＾＾
⑤「まとめ」
・プログラムから直接WI-FIの設定を入れることはできますが、これができるようになることでスマホからも設定できるようになります。
なのでいちいちArduinoIEDを立ち上げビルドを行う手間は省けるようになり、IoTに一歩近づいたと実感できるかと思います！
以上、ご訪問ありがとうございました＾＾
