ESP32をWebサーバーにしてスマホでLEDをONする
今までBlynkを使って、スマホからESP32をコントロールしてましたが、今回はBlynkを使わないでコントロールしてみます。💪
イメージ的にはこんなやつです。😊
早速、プログラムです。ちょっと長いですが😅じっくり見ていけばそれほど難しくはないです。
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>
const char* ssid = "your ssid";
const char* password = "your password";
WebServer server(80);
const int led = 4;
void handleRoot() {
// LED の制御
Serial.print("handleLED: ");
if (server.method() == HTTP_POST) {
String val = server.arg("led");
if (val == "1") {
// LED オン
digitalWrite(led, HIGH);
Serial.println("ON");
}
else if (val == "0") {
// LED オフ
digitalWrite(led, LOW);
Serial.println("OFF");
}
}
String mes = "\
<html lang=\"ja\">\n\
<meta charset=\"utf-8\">\n\
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\
<head>\n\
<title>webLedTest</title>\n\
</head>\n\
<body style=\"font-family: sans-serif; background-color: #ffeeaa ;\" >\n\
<h1>webLedTest</h1>\n\
<p><form action='' method='post'>\n\
<button name='led' value='1'>オン</button>\n\
</form>\n\
<form action='' method='post'>\n\
<button name='led' value='0'>オフ</button>\n\
</form>\n\
</p>\n\
</body>\n\
</html>\n";
server.send(200, "text/html", mes);
}
void handleNotFound() {
String message = "File Not Found\n\n";
message += "URI: ";
message += server.uri();
message += "\nMethod: ";
message += (server.method() == HTTP_GET) ? "GET" : "POST";
message += "\nArguments: ";
message += server.args();
message += "\n";
for (uint8_t i = 0; i < server.args(); i++) {
message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
}
server.send(404, "text/plain", message);
}
void setup(void) {
pinMode(led, OUTPUT);
digitalWrite(led, LOW);
Serial.begin(115200);
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
// Wait for connection
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
if (MDNS.begin("esp32led")) {
Serial.println("MDNS responder started");
}
server.on("/", handleRoot);
server.on("/inline", []() {
server.send(200, "text/plain", "hello from esp8266!");
});
server.onNotFound(handleNotFound);
server.begin();
Serial.println("HTTP server started");
}
void loop(void) {
server.handleClient();
}ポイントはこの部分。ブラウザよりIPアドレス（例えばhttp://192.168.40.3/)でアクセスされた場合は
server.on("/", handleRoot);が登録されているのでhandleRootというモジュールが実行されます。
さらに(例えばhttp://192.168.40.3/inline)でアクセスされた場合は
hello from esp8266!
がブラウザに表示されます。
server.on("/", handleRoot);
server.on("/inline", []() {
server.send(200, "text/plain", "hello from esp8266!");
});
server.onNotFound(handleNotFound);
server.begin();登録されていないアドレスにアクセスがあった場合は、handleNotFoundが実行されます。
handleRootのモジュールはHTMLデータを転送するようになっているため、ブラウザにはこんな表示がされます。
さらに掘り下げて、
server.send(200, "text/html", mes);200 - HTTPステータスコード
text/html - コンテンツタイプ
mes - コンテンツ
HTTPステータスコードはたくさんありますが、とりあえず200(正常）408(見つからない）だけで大丈夫でしょう。興味あれば調べてください。
コンテンツタイプとはどんなデータを送るの情報です。
あと、このプログラムで重要な部分ですが、ルーターにDHCPで接続しているためIPアドレスが分からないと接続できないじゃないかと思いますが、このプログラムにはmDNSというのが組み込まれていて、DNSサーバーがなくてもmDNSで登録されたアドレスでアクセス出来ます。
if (MDNS.begin("esp32led")) {
Serial.println("MDNS responder started");
}mDNSの名前は『esp32led』で登録されているのでブラウザからは
でアクセスすれば接続できます。（複数同時に使う時は名前を変えてね！）
動作ですが、スマホのONをタッチするとLEDが光りますね。💯
しかし、Blynkは外部サーバーにアクセスしているので、外出先などからコントロールできますが、こちらは外部には出ていけないため、ローカルな環境でしか動きません。ちなみに、ESP32をルーターに接続しないでアクセスポイントとして起動すればスマホと直接接続ができます。
WiFi.mode(WIFI_AP);ちなみに、これ作るには少しHTML、CSSの知識が必要になります。
自分はこの本で軽く勉強しました。普段プログラムをやってる人なら、楽勝なので使わなくてもちょっと舐めておくと良いですよ。
とりあえず、今回はこんなもので。
では🤚
この記事が気に入ったらサポートをしてみませんか？