・目的
esp8266のファイルシステムにHTMLファイルを
追加しwebサーバーを立ち上げる
HTMLファイルをスケッチ内に書かなくて
いいのでかなり楽にコードが書ける。
・方法
(1)SPIFFSの導入
esp8266のファイルシステムを使うための準備をする
まず以下のサイトからツールをダウンロード
https://github.com/esp8266/arduino-esp8266fs-plugin
ダウンロードし終わったら解凍して
Arduinoファルダーにtoolsフォルダを
作成してtools以下に先ほど解凍した
フォルダをコピーする
/Arduino/tools/
この作業が終わるとESP8266 Skech Data Upload
が追加される。
ファイルをesp8266にアップロードするには
スケッチフォルダを表示をクリックして
dataフォルダーを作成
Flash Size をno SPIFFS以外の物を選択する
今回は512k(64K SPIFFS)にした
1M SPIFFSとかにするとアプロード時間が
凄く長くなるので必要最小限の容量を選択した方がいい。
dataフォルダーにアップロードしたいファイル
を入れたらesp8266を書き込みモードに変更して
ESP8266 Skech Data Uploadをクリック
(2)スケッチ
SPIFFS機能を使うにはFS.hをインクルード
#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <FS.h>
const char *ssid = "*****";
const char *pass = "******";
ESP8266WebServer server(80);
void setup() {
SPIFFS.begin(); //SPIFFSを開始
Serial.begin(9600);
WiFi.begin( ssid, pass);
while( WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.println("...");
}
Serial.println("");
Serial.print("Connected to ");
Serial.println(ssid);
Serial.print("IP address: ");
Serial.println(WiFi.localIP() );
if( MDNS.begin("esp8266")) {
Serial.println("MDNS responder started");
}
server.begin();
server.on("/",[]() {
String tmp;
//index.htmlファイルの読み込み
File index = SPIFFS.open("/index.html", "r");
if(!index)
Serial.println("file open failed");
else{
tmp = index.readString();//index.htmlをstringで読み込み
index.close();//ファイルを閉じる
}
server.send(200, "text/html", tmp);
} );
}
void loop() {
server.handleClient();
}
以下が今回使ったhtmlファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ESP Web Server</title>
</head>
<body>
<p>WWWWWWWWWWWWW</p>
</body>
</html>
・結果
実行すると以下の写真のようになる
ブラウザに192.168.2.112を
/>入力するとhtmlファイルのwwwwww
がブラウザに表示できた。