・目的
スマフォから外部デバイスとしてESP8266に繋げてコントロールする為の予備実験。
加えて表示するHTMLをSPIFFSにてリソースから取って表示させてみる。
・準備
とりあえず、AP/Webサーバーを立ち上げてスマフォからみれるかどーかをテスト。
以下、書き込むソース。
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
static const char *ssid = "gkgk";
static const char *pwd = "12341234";
ESP8266WebServer server(1234);
IPAddress ip( 192, 168, 128, 21);
IPAddress subnet( 255, 255, 255, 0 );
void handleRoot() {
Serial.println("receive req: /");
server.send(200, "text/html", "<h1>Welcome GKGK</h1>");
}
void setup() {
Serial.begin(9600);
WiFi.mode(WIFI_AP);
WiFi.softAPConfig(ip, ip, subnet);
WiFi.softAP(ssid, pwd);
server.on("/", handleRoot);
server.begin();
Serial.println("ap setup...");
}
void loop() {
server.handleClient();
}
AP
SSID:gkgk
pwd:12341234
WebServer
192.168.128.21:1234/
とした。
ビルドして書き込んで実行。
iphoneでesp8266にwifi接続してみる。
繋がった。
chromeで見てみる。
http://192.168.128.21:1234
Aruduinoのコンソール上でも確認。
リクエストを受信してシリアルに出力している。
なんという手軽さ。。。
SPIFFSで内部フラッシュ？に書いたリソースを読めるように環境を作る。
[1]
下記のページに飛び、
https://github.com/esp8266/arduino-esp8266fs-plugin
Download the tool archive from releases page
のリンクをクリックし、zipファイルをダウンロードして解凍。
[2]
解凍したものを以下のように置く。
[Aruduinoインストールフォルダ]/Arduino/tools/ESP8266FS/tool/esp8266fs.jar
[3]
IDEが起動しているなら、再起動。
IDEのツールに、「ESP8266 Sketch Data Upload」が出ていればOK。
リソースの準備
[1]
スケッチのフォルダに、dataディレクトリを作成
[2]
indexページのテンプレートをファイルで用意。
以下ソース。
<html lang="ja">
<head>
<meta charset="utf-8">
<title>GKGK TEST</title>
</head>
<body>
<h1>Welcome...</h1>
<h2>GKGK Test Resource HTML...</h2><br/>
<form name="g_form" method="post" action="/">
<img src="${img}" onclick="forms['g_form'].submit();"/><br/>
<input type="hidden" name="FLAG" value="${flag}" />
<input type="submit" value="${submit_msg}"/>
</form>
</body>
</html>
サブミットボタンもしくは、画像を押したら表示が切り替わる感じ。
[3]
dataフォルダ内に、表示させるリソースを配置。
表示させるindexページのテンプレートと、そのHTML内に表示する
画像を用意した。
[4]
IDEのツール->ESP8266 Sketch Data Uploadをクリック。
ESP8266への書き込みが始まる。
Aruduino側の実装。
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <FS.h>
static const char *ssid = "gkgk";
static const char *pwd = "12341234";
ESP8266WebServer server(1234);
IPAddress ip( 192, 168, 128, 21);
IPAddress subnet( 255, 255, 255, 0 );
String strIndexHtml;
boolean flagGod;
// indexページ
void handleRoot() {
Serial.println("receive req: /");
// Postの場合、パラメータからフラグを設定
if (server.method() == HTTP_POST) {
String s = server.arg("FLAG");
if (s == "1") {
flagGod = true;
} else {
flagGod = false;
}
}
// テンプレートのindexページ文字列をフラグによって設定
String msg = "";
if (!flagGod) {
msg = "チェンジ・ぷらいべーとモード！";
} else {
msg = "チェンジ・ビジネスモード！";
}
String arg1 = "${submit_msg}";
String tmpl = "" + strIndexHtml;
tmpl.replace(arg1, msg);
tmpl.replace("${flag}", flagGod ? "0" : "1");
tmpl.replace("${img}", flagGod ? "/img2.gif" : "/img1.gif");
Serial.println(tmpl);
// クライアントに返す
server.send(200, "text/html", tmpl);
}
// /img1.gifハンドラ
void handleImg1() {
Serial.println("receive req: /img1.gif");
// リソースから読み込んで画像をかえす。
SPIFFS.begin();
File hogeFile = SPIFFS.open("/god_on.gif", "r");
// バイナリのリソースを返すならこんな感じ。
server.streamFile(hogeFile, "image/gif");
hogeFile.close();
}
// /img2.gifハンドラ
void handleImg2() {
Serial.println("receive req: /img2.gif");
// リソースから読み込んで画像をかえす。
SPIFFS.begin();
File hogeFile = SPIFFS.open("/god_off.gif", "r");
// バイナリのリソースを返すならこんな感じ。
server.streamFile(hogeFile, "image/gif");
hogeFile.close();
}
// テキストファイルを読み込み
String loadTextFile(String path) {
String txt = "";
String line = "";
char c;
File hogeFile = SPIFFS.open(path, "r");
strIndexHtml = "";
if (hogeFile) {
Serial.println("file open success...");
while (hogeFile.available()) {
// １文字読み込み
c = hogeFile.read();
// 改行の場合
if (c == '\n' || c == '\r') {
// 行文字列の長さが１以上の場合
if (line.length() > 0) {
txt = txt + line + "\n";
//Serial.println(line);
}
// 改行文字が来たので行文字列をクリア
line = "";
} else {
// 改行文字でなければ行文字列に読み込んだ1文字を追加
line = line + String(c);
}
}
if (line.length() > 0) {
txt = txt + line;
}
hogeFile.close();
} else {
Serial.println("file open failed...");
}
Serial.println(path + " is loaded...");
return txt;
}
// リソース読み込み
void loadHtmlResource() {
String line = "";
char c;
SPIFFS.begin();
// Dir dir = SPIFFS.openDir("/");
// while (dir.next()) {
// Serial.print(dir.fileName());
// File f = dir.openFile("r");
// Serial.println(String(" ") + f.size());
// }
strIndexHtml = loadTextFile("/index.html");
}
void setup() {
flagGod = false;
Serial.begin(9600);
WiFi.mode(WIFI_AP);
WiFi.softAPConfig(ip, ip, subnet);
WiFi.softAP(ssid, pwd);
// ハンドラ設定
server.on("/", handleRoot);
server.on("/img1.gif", handleImg1);
server.on("/img2.gif", handleImg2);
server.begin();
Serial.println("ap setup...");
loadHtmlResource();
Serial.println(strIndexHtml);
Serial.println("load complete...");
}
void loop() {
server.handleClient();
}
フラグで画像を切り替える感じの処理にしている。
スレッドセーフとかは、とりあえず、無視。。。
処理の切り替えによるアクションをLチカでしても良かったが、
画像のよーなリソースをどう扱うか試してみたかったので、こんな感じにした。
・実行確認
前述のソースをビルドしてESP8266上にロードし、実行。
iphoneで接続して、画面を見る。
リソースから読み込んだものを表示出来たことを確認。
日本語も何も気にせず出るんだなぁ。。。
で、ビジネスモードにする為、ボタンを押す。
POSTの処理もうまくいっている。
再度、ボタンを押して元の画面が出るか確認する。
プライベートモードに無事戻るw
・TODO
スレッドセーフな感じにするのはどーした良いか調べる。
（そもそも、Arduino的にはどーなんだろう。。。）
Basic認証とかできるっぽいので、調べておく。