続いて、ESPAsyncWebServerを利用した GPIOの切り替えを行なってみる。参考ページは以下だが、今回は ESP32自体をルーターにはせず、家庭内のルーターにぶら下げる形に一部改造している。
[ スケッチ:Esp32_AsyncWebServer_3 ]
// https://it-evo.jp/blog/blog-1483/ + https://kit.socinno.com/3_2_e/
#include <WiFi.h>
#include "ESPAsyncWebServer.h"
#include "SPIFFS.h"
#include <ArduinoJson.h>
const char ssid[] = "********";
const char pass[] = "********";
const IPAddress ip(192,168,3,17);
const IPAddress gateway(192,168,1,1); // デフォルトゲートウェイ
const IPAddress subnet(255,255,255,0);
AsyncWebServer server(80); // ポート設定
// Jsonオブジェクトの初期化
StaticJsonDocument<512> doc;
#define LED_PIN 33
uint8_t led_status; //LEDの状態制御用変数
void setup()
{
Serial.begin(115200);
pinMode(LED_PIN, OUTPUT); // GPIO25を出力設定に
// SPIFFSのセットアップ
if(!SPIFFS.begin(true)){
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}
WiFi.config(ip, gateway, subnet);
WiFi.begin (ssid, pass);
while ( WiFi.status() != WL_CONNECTED ) {
delay ( 1000 );
Serial.print ( "." );
}
// 各種情報を表示
Serial.print("SSID: ");
Serial.println(ssid);
Serial.print("AP IP address: ");
Serial.println(ip);
// GETリクエストに対するハンドラーを登録
// rootにアクセスされた時のレスポンス
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/index.html");
});
// style.cssにアクセスされた時のレスポンス
server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/style.css", "text/css");
});
// LED の制御変数の変更リクエスト
server.on(
"/post_test",
HTTP_POST,
[](AsyncWebServerRequest * request){},
NULL,
[](AsyncWebServerRequest * request, uint8_t *data, size_t len, size_t index, size_t total) {
String resjson = "";
for (size_t i = 0; i < len; i++) {
//Serial.write(data[i]);
resjson.concat(char(data[i]));
}
Serial.println(resjson);
DeserializationError error = deserializeJson(doc, resjson);
if(error){
Serial.println("deserializeJson() faild");
request->send(400);
}
else{
led_status = doc["LED_STATUS"]; //zz Tilt Motor Default SPEED
request->send(200);
}
});
led_status = 0;
// サーバースタート
server.begin();
Serial.println("Server start!");
}
void loop() {
// LED状態変更
if(led_status == 0){
digitalWrite(LED_PIN, LOW);
}
else{
digitalWrite(LED_PIN, HIGH);
}
delay(100);
}
というわけで、ESP32の非同期 Webサーバーライブラリ ESPAsyncWebServer の実験。導入手順は以下が詳しいので参考にさせてもらった。
ESP32でWebサーバーを立てよう
但しこれは ESP32自体をルーターとして動作させ、その中に Webサーバーを置く形になるので注意が必要だ(私は最初、家庭内のルーターに接続させるものと誤解していた)。また前記事ではスケッチ内で HTMLを生成していたが、今回のものは ESP32のフラッシュメモリに HTMLファイルを書き込む形となる。手順はその分増えるが、スケッチと HTMLを分離出来るのでメンテ面では楽になる。
概略手順は以下の通り
- ライブラリのインストール(ESPAsyncWebServer, AsyncTCP, Sketch data upload)
- スケッチ及び HTML類の準備
- ESP32にスケッチ及び HTML類を書き込み
- PC(又はスマホ等)を ESP32に Wi-Fi接続
- ブラウザで動作確認
次に、Wi-Fi ルーターとの接続、及びWebサーバー機能を試す。引き続き、以下ページのサンプルで検証を行なってみた。
「FPGAで遊んでみる」
手順としては、
- スケッチ例→WiFi→SimpleWiFiServer を選択
- ソースの ssid、password 部分を自ルーターに合わせる
- 確認用 LED出力ピンを前回使用の外部回路に合わせる
- 書き込みを行ない、シリアルモニタで IPアドレスを確認
- 任意のブラウザで URLにアクセスし動作確認
といった流れになる。
[ スケッチ:Esp32_SimpleWiFiServer ]
#include <WiFi.h>
const char *ssid = "********";
const char *password = "********";
int led_pin=33;
NetworkServer server(80);
void setup() {
Serial.begin(115200);
pinMode(led_pin, OUTPUT); // set the LED pin mode
delay(10);
// We start by connecting to a WiFi network
Serial.println();
Serial.println();
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());
server.begin();
}
void loop() {
NetworkClient client = server.accept(); // listen for incoming clients
if (client) { // if you get a client,
Serial.println("New Client."); // print a message out the serial port
String currentLine = ""; // make a String to hold incoming data from the client
while (client.connected()) { // loop while the client's connected
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println();
client.print("<html lang=\"ja\">");
client.print("<head>");
client.print("<meta charset=\"UTF-8\">");
client.print("</head><body>");
// the content of the HTTP response follows the header:
client.print("<h1>Wi-Fi経由のLED点灯</h1>");
client.print("Click <a href=\"/H\">here</a> to turn the LED on pin 33 on.<br>");
client.print("Click <a href=\"/L\">here</a> to turn the LED on pin 33 off.<br>");
client.print("</body>");
client.print("</html>");
// The HTTP response ends with another blank line:
client.println();
// break out of the while loop:
break;
} else { // if you got a newline, then clear currentLine:
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
// Check to see if the client request was "GET /H" or "GET /L":
if (currentLine.endsWith("GET /H")) {
digitalWrite(led_pin, HIGH); // GET /H turns the LED on
}
if (currentLine.endsWith("GET /L")) {
digitalWrite(led_pin, LOW); // GET /L turns the LED off
}
}
}
// close the connection:
client.stop();
Serial.println("Client Disconnected.");
}
}
開発環境が整ったら、さっそく基本動作の確認をしてみる。回路は前記事の参考ページに載っていた、LEDを点滅させるものである。「Lチカ」という言葉を初めて知ったが、電子工作界隈では日常用語なのかな? "LEDをチカチカ" を短縮して「Lチカ」、お役目としてはソフト界で言う所の「Hello World」的なものに当たるだろう。
このボード本体上にコントロール可能なLEDは実装されていないようなので、外部回路に置いたものを点滅させる。その為、スケッチ例の「Blink」はそのままでは動かず、改造が必要だ。他は特に問題なく、このスケッチで動作した。
一旦終了した本ブログだが、久々の再開。その心は、次作のモジュールで必要になりそうなので、より実践的な技術確立をしておく必要があるからである。今回は、以前購入しておいた ESP-WROOM-32D開発ボードを持ち出す。購入後4年近く経っているので今はもっと性能が拡張された物が出ているのだろうが、とりあえず基本動作は変わりないと思うのでこれで一通りの実験を行なってみる。
ESP32には教えていただいた以下のメリットがある。
- Arduinoと同コードで開発が出来る
- メモリが豊富
- CPUが高性能
- Wi-FiとBluetoothでリモート操作可能
- 低価格
あと、設定により Webサーバーに仕立てる事も出来るようだ。それらの要素を組み合わせると、PCやスマホのブラウザから Wi-Fi 経由でレイアウトモジュールの制御が可能になる筈である。
Arduino-IDE側のセットアップはこちらのページを参考にさせてもらった。
「FPGAで遊んでみる」