ESPr Developer をスマホからWiFi経由で操作する方法を試しました。
リンク
ESPr DeveloperをWebサーバとして使用するのですが、そこで表示するHTMLファイルはESPr Developer内のFLASHメモリに格納します。
FLASHメモリへのデータの書き込みにはSPIFFSというものを用いるため、Arduino IDE(開発環境)にSPIFFSをインストールしました。
インストール後、スケッチと同じ場所に「data」フォルダを作り、この下にHTMLファイルを置いた状態で「ツール」→「ESP8266 Sketch Data Upload」を実行すると、HTMLファイルを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が光りました。
これを、子供が昔遊んでいたフェラーリのラジコンに組み込んで動かそうとしたのですが、子供に提供を拒否されたので実現できませんでした。どうやって遊ぶかはおいおい考えることにします。
リンク