気楽にESP8266内部のfavicon.icoやindex.htmlを書き換えたり、画像をアップロードしたいと思ったらプログラム作成の吉日です。 WebServerでファイル操作を行える基本ソフトを作ってみました。
プログラム内で表示するWebページを持っているので、使いやすいと思います。
僕は以前の改造と組み合わせて、SSID・Password・他の設定などを登録できる様にして
IOT端末っぽくしています。
ESP8266環境で必要なリソース
SPIFFSとMDNSを使います。
ESP32で使うには？
ESP8266WebServerを移植すると動作可能になります。(確認済)
過去の日記に移植内容を書いてあります。 ※数行治す程度です。
機能
WindowsのGoogle ChromeよりESP8266.local/files.htmlへアクセスすることで
ファイル一覧が確認できる。
任意のファイルを削除できる。
任意のファイルの内容をテキスト表示できる。
任意のファイルをダウンロードできる。
Windows上の任意のファイルをアップロードできる。
使い方
記事「ESP8266で遊ぶための初期コードを作成する」にて画面紹介等しておきました。
メインソースはこんな風にします。
esp8266.ino
#include <ESP8266WiFi.h>
#include <ESP8266mDNS.h>
#include <ESP8266WebServer.h>
#include <FS.h>
const char* ssid = "guest";
const char* password = "guest";
ESP8266WebServer server(80);
// HTMLヘッダ
const char *ESPHTMLHeader ="<html lang=\"ja\">\n<head>\n\
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Shift_JIS\">\n\
<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\">\n</head>\n";
char *ESPfilename = "filename";
//=====================================================================================
// 選択ファイルをテキストで表示する
void ESPlist(){
Serial.print( "display text : " ); Serial.println( server.arg(1) );
String dataType = "text/plain";
String path = "/" + server.arg(1);
File dataFile = SPIFFS.open( path, "r");
if (server.streamFile(dataFile, dataType) != dataFile.size())
Serial.println("Sent less data than expected!");
dataFile.close();
}
//=====================================================================================
// 選択ファイルを起動する(htmlなら普通に表示
void ESPexec(){
Serial.print( "execute file : " ); Serial.println( server.arg(1) );
String path = "/" + server.arg(1);
//loadFromDataFile( path );
}
//=====================================================================================
// 削除ファイルを実際に削除する
void ESPremove(){
String path = "/" + server.arg(1);
SPIFFS.remove(path);
Serial.print( "removed file : " ); Serial.println( server.arg(1) );
}
//=====================================================================================
// アップロード用htmlを表示する
void ESPuploadhtml( ){
Serial.println( "execute : upload.html" );
String output = ESPHTMLHeader;
output += "\
<form method=\"POST\" action=\"/upload\" enctype=\"multipart/form-data\">\n\
<p>Select upload file</p>\n<input type=\"file\" name=\"file\"/><br>\n\
<input type=\"submit\" value=\"SUBMIT\">\n</form>\n</html>\n";
server.send(200, "text/html", output);
}
//=====================================================================================
// ファイル一覧及び削除ファイルの選択
void ESPfiles( ){
if( 0<server.args() ){
if( server.arg(0)=="remove" ) ESPremove();
if( server.arg(0)=="list" ){ ESPlist(); return; }
if( server.arg(0)=="exec" ){ ESPexec(); return; }
if( server.arg(0)=="/upload.html" ){ ESPuploadhtml(); return; }
}
String output = ESPHTMLHeader;
output += "\
<form name='files' action=/files.html method='post'>\
<p><select name=\"mode\">\n\
<option value=\"exec\" selected>exec file</option>\
<option value=\"list\">source list</option>\
<option value=\"/upload.html\">upload file</option>\
<option value=\"remove\">remove file</option>\
</select><br>";
Dir dir = SPIFFS.openDir( server.arg("dir") );
while(dir.next()){
File entry = dir.openFile("r");
output += "<input type=\"radio\" name=\"remove\" value=\"";
output += String(entry.name()).substring(1);
output += "\">";
//
output += "<a href=\"http://";
output += MYHOSTNAME;
output += ".local/";
output += String(entry.name()).substring(1);
output += "\">";
//
output += String(entry.name()).substring(1);
output += "\n<br>";
entry.close();
}
output += "<input type=submit value=OK target=tif>\n</form>\n</html>\n";
server.send(200, "text/html", output);
}
//=====================================================================================
// upload.htmlで選択したファイルをアップロードする
File fsUploadFile;
void ESPhandleFileUpload(){
HTTPUpload& upload = server.upload();
if(upload.status == UPLOAD_FILE_START){
String filename = "/" + upload.filename;
Serial.print( "upload [" );
Serial.print( filename );
Serial.print( "] start:");
fsUploadFile = SPIFFS.open( filename, "w");
} else if(upload.status == UPLOAD_FILE_WRITE){
if(fsUploadFile)
fsUploadFile.write(upload.buf, upload.currentSize);
Serial.print( upload.currentSize );
Serial.print( ":" );
} else if(upload.status == UPLOAD_FILE_END){
if(fsUploadFile)
fsUploadFile.close();
Serial.println( "end");
}
}
//=====================================================================================
void setup(void)
{
Serial.begin(115200);
SPIFFS.begin();
// 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());
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.begin();
Serial.println("TCP server started");
// Add service to MDNS-SD
MDNS.addService("http", "tcp", 80);
//
server.on("/upload", HTTP_POST, [](){ ESPfiles(); }, ESPhandleFileUpload);
server.on("/files.html", ESPfiles);
server.on("/upload.html", ESPuploadhtml);
}
//=====================================================================================
void loop(void)
{
server.handleClient( );
MDNS.update();
}