前回はブラウザにesp8266.local/onやesp8266.local/offといったURLを入力することでLチカさせていました。
点滅させるたびにいちいちonやoffをアドレスバーに打ち込むのはバカバカしいので、ブラウザに表示されたhtml内のボタンを押すとLEDを表示させる仕様に変更したいと思います。htmlはスケッチ内にベタ書きです笑
前回のスケッチを改造していきます。
早速ですが、スケッチは以下の通りです。ssidとパスワードは自分のルーターのを入れてください。
#include <ESP8266mDNS.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
const char* ssid = "......";
const char* password = "....";
// TCP server at port 80 will respond to HTTP requests
ESP8266WebServer server(80);
void root(){
server.send(200, "text/html",
"<!DOCTYPE html><html lang=\"jp\"><head><meta charset=\"UTF-8\"><title>Lチカ</title></head><body><form name=\"on\" method=\"GET\" action=\"/on\"><input type=\"submit\" value=\"ON\" style=\"font-size:50px; width: 600px; height: 80px\"></form><form name=\"off\" method=\"GET\" action=\"/off\"><input type=\"submit\" value=\"OFF\" style=\"font-size:50px; width: 600px; height: 80px\"></form></body></html>");
}
void LedOn(){
digitalWrite(13,HIGH);
server.sendHeader("Location", String("/"), true);
server.send(302, "text/plain", "");
}
void LedOff(){
digitalWrite(13,LOW);
server.sendHeader("Location", String("/"), true);
server.send(302, "text/plain", "");
}
void setup(void) {
pinMode(13,OUTPUT);
Serial.begin(115200);
// Connect to WiFi network
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.println("");
// 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());
// Set up mDNS responder:
// - first argument is the domain name, in this example
// the fully-qualified domain name is "esp8266.local"
// - second argument is the IP address to advertise
// we send our IP address on the WiFi network
if (!MDNS.begin("esp8266")) {
Serial.println("Error setting up MDNS responder!");
while (1) {
delay(1000);
}
}
Serial.println("mDNS responder started");
// Start TCP (HTTP) server
server.on("/", root); //////////////////////////////////////
server.on("/on", LedOn);
server.on("/off", LedOff);
server.begin();
Serial.println("TCP server started");
// Add service to MDNS-SD
MDNS.addService("http", "tcp", 80);
}
void loop(void) {
MDNS.update();
server.handleClient();
}
変更点はrootという名前の関数が追加されたのと、関数LedOnとLedOffの記述が少し変わったのと、server.on("/", root);が追加されただけです。
変更点だけ見ていきます。
関数root内ではhtmlの記述を送信しています。htmlソースは文字列として送信されます。
server.on("/", root);の記述によって、esp8266.local/にアクセスされたときに関数rootが呼び出されてhtmlソースを送信しています。
html内にはesp8266.local/onや/offにアクセスするボタンが配置されています。本当は別ファイルにhtmlソースを記述したいのですが、大した量ではないし、wroom02にhtmlファイルを別で書き込むのがめんどくさいのでスケッチにベタ書きしています。ベタ書きするときはエスケープシーケンスに気を付けましょう。（特に「”」とか）
LedOffとLedOnではLEDの制御以外に、「server.sendHeader("Location",
String("/"), true);」と「server.send(302,
"text/plain", "");」の記述によってesp8266.local/onや/offにアクセスした後に自動でesp8266.local/に飛ばす(リダイレクトする)ようにしています。
とりあえず前回よりはそれっぽい感じになってきました。
0 件のコメント:
コメントを投稿