Prismjs

2019年5月1日水曜日

秋月のESP-WROOM-02開発キットを使う~ブラウザのボタンを押してLチカ編~


前回はブラウザにesp8266.local/onesp8266.local/offといったURLを入力することでLチカさせていました。
点滅させるたびにいちいちonoffをアドレスバーに打ち込むのはバカバカしいので、ブラウザに表示されたhtml内のボタンを押すとLEDを表示させる仕様に変更したいと思います。htmlはスケッチ内にベタ書きです笑


前回のスケッチを改造していきます。
早速ですが、スケッチは以下の通りです。ssidとパスワードは自分のルーターのを入れてください。

 #include <ESP8266WiFi.h>

#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という名前の関数が追加されたのと、関数LedOnLedOffの記述が少し変わったのと、server.on("/", root);が追加されただけです。

変更点だけ見ていきます。
関数root内ではhtmlの記述を送信しています。htmlソースは文字列として送信されます。
server.on("/", root);の記述によって、esp8266.local/にアクセスされたときに関数rootが呼び出されてhtmlソースを送信しています。
html内にはesp8266.local/on/offにアクセスするボタンが配置されています。本当は別ファイルにhtmlソースを記述したいのですが、大した量ではないし、wroom02htmlファイルを別で書き込むのがめんどくさいのでスケッチにベタ書きしています。ベタ書きするときはエスケープシーケンスに気を付けましょう。(特に「」とか)

LedOffLedOnではLEDの制御以外に、「server.sendHeader("Location", String("/"), true);」と「server.send(302, "text/plain", "");」の記述によってesp8266.local/on/offにアクセスした後に自動でesp8266.local/に飛ばす(リダイレクトする)ようにしています。


とりあえず前回よりはそれっぽい感じになってきました。

0 件のコメント:

コメントを投稿