WiFi経由でESPr Developerを操作する

「ESPr Developer」を、スマホからWiFi経由で操作する方法を試しました。

リンク

ESPr DeveloperをWebサーバとして使用するのですが、そこで表示するHTMLファイルはESPr Developer内のFLASHメモリに格納します。
FLASHメモリへのデータの書き込みにはSPIFFSというものを用いるため、Arduino IDE（開発環境）にSPIFFSをインストールします。
インストール後、スケッチと同じ場所に「data」フォルダを作り、この下にHTMLファイルを置いた状態で「ツール」→「ESP8266 Sketch Data Upload」を実行すると、HTMLファイルを、ESPr Developer内のFLASHメモリにアップロードすることができます。

動作確認のためにLEDを光らせてみます。
ESPr Developerの12番, 13番, 5番, 4番出力ピンとグランドの間に、それぞれ、LEDと抵抗（330Ω）を直列に接続します。

スケッチとHTMLファイルは、他の方のブログに載っていたものを、ほとんどそのまま使用させていただきました。

スケッチは以下のとおりです。

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>

const char *ssid        = "robot02";
const char *password    = "robot02";

const char *path_root   = "/index.html";
uint8_t buf[16384];

const int FLPin = 12;
const int BLPin = 13;
const int FRPin = 5;
const int BRPin = 4;

ESP8266WebServer server(80);

void handleRoot() {
  server.send(200, "text/html", (char *)buf);
}

void ForwardLeft() {
  digitalWrite(FLPin, HIGH);
  digitalWrite(FRPin, LOW);
  digitalWrite(BLPin, LOW);
  digitalWrite(BRPin, LOW);
  server.send(200, "text/html", "FL");
}
void Forward() {
  digitalWrite(FLPin, HIGH);
  digitalWrite(FRPin, HIGH);
  digitalWrite(BLPin, LOW);
  digitalWrite(BRPin, LOW);
  server.send(200, "text/html", "FF");
}
void ForwardRight() {
  digitalWrite(FLPin, LOW);
  digitalWrite(FRPin, HIGH);
  digitalWrite(BLPin, LOW);
  digitalWrite(BRPin, LOW);
  server.send(200, "text/html", "FR");
}
void Stop() {
  digitalWrite(FLPin, HIGH);
  digitalWrite(FRPin, HIGH);
  digitalWrite(BLPin, HIGH);
  digitalWrite(BRPin, HIGH);
  server.send(200, "text/html", "SS");
}
void BackLeft() {
  digitalWrite(FLPin, LOW);
  digitalWrite(FRPin, LOW);
  digitalWrite(BLPin, HIGH);
  digitalWrite(BRPin, LOW);
  server.send(200, "text/html", "BL");
}
void Back() {
  digitalWrite(FLPin, LOW);
  digitalWrite(FRPin, LOW);
  digitalWrite(BLPin, HIGH);
  digitalWrite(BRPin, HIGH);
  server.send(200, "text/html", "BB");
}
void BackRight() {
  digitalWrite(FLPin, LOW);
  digitalWrite(FRPin, LOW);
  digitalWrite(BLPin, LOW);
  digitalWrite(BRPin, HIGH);
  server.send(200, "text/html", "BR");
}

void setup() {
  delay(1000);
  pinMode(FLPin, OUTPUT);
  pinMode(FRPin, OUTPUT);
  pinMode(BLPin, OUTPUT);
  pinMode(BRPin, OUTPUT);

  SPIFFS.begin();
  File htmlFile = SPIFFS.open(path_root, "r");
  size_t size = htmlFile.size();
  htmlFile.read(buf, size);
  htmlFile.close();

  WiFi.softAP(ssid, password);
  IPAddress myIP = WiFi.softAPIP();
  delay(500);

  server.on("/", handleRoot);
  server.on("/FL/", ForwardLeft);
  server.on("/FF/", Forward);
  server.on("/FR/", ForwardRight);
  server.on("/SS/", Stop);
  server.on("/BL/", BackLeft);
  server.on("/BB/", Back);
  server.on("/BR/", BackRight);

  server.begin();
}

void loop() {
  server.handleClient();
}

HTMLファイル(index.html)は以下のとおりです。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Robot02 WiFi Controller</title>
<script>
function send(url){
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, true);
  xhr.send();
}
</script>
<style type="text/css">
<!--
body {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
}
.stebtn {
  font-size: 50px;
  font-weight: bold;
  width: 250px;
  height: 200px;
}
-->
</style>
</head>

<body>
<table width="800" border="0" align="center" cellpadding="2">
  <tr>
    <td colspan="3" align="center">Robot02 WiFi Controller</td>
  </tr>
  <tr>
    <td align="center"><input type="button" class="stebtn" onClick="send('/FL/')" value="←"></td>
    <td align="center"><input type="button" class="stebtn" onClick="send('/FF/')" value="↑"></td>
    <td align="center"><input type="button" class="stebtn" onClick="send('/FR/')" value="→"></td>
  </tr>
  <tr>
    <td></td>
    <td align="center"><input type="button" class="stebtn" onClick="send('/SS/')" value="ー"></td>
    <td></td>
  </tr>
  <tr>
    <td align="center"><input type="button" class="stebtn" onClick="send('/BL/')" value="←"></td>
    <td align="center"><input type="button" class="stebtn" onClick="send('/BB/')" value="↓"></td>
    <td align="center"><input type="button" class="stebtn" onClick="send('/BR/')" value="→"></td>
  </tr>
</table>
</body>
</html>

スマホのWiFi設定メニューで、アクセスポイントとして「robot02」を選択した後、パスワートに「robot02」を入力します。
その後、スマホのWebブラウザを起動し、URL欄に「192.168.4.1」を入力します。
ボタンがいくつか並んだWebページが表示されますので、そのボタンを押すと、対応するLEDが光りました。