Skip to content

Commit 2e6fe50

Browse files
author
ficeto
committed
Add File System Server Example
Serve files from the onboard flash Edit them with the included file manager (http://esp8266fs.local/edit) Create simple graphs filled with sensor data with the included simple library (example is the index page, editable through the editor) The sketch uses the new extension for packing files into SPIFFS image and uploading it to your ESP8266
1 parent 866ab26 commit 2e6fe50

File tree

10 files changed

+1255
-0
lines changed

10 files changed

+1255
-0
lines changed

‎libraries/ESP8266WebServer/examples/FSWebServer/FSWebServer.ino

+258
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
/*
2+
FSWebServer - Example WebServer with SPIFFS backend for esp8266
3+
4+
Copyright (c) 2015 Hristo Gochkov. All rights reserved.
5+
This file is part of the ESP8266WebServer library for Arduino environment.
6+
7+
This library is free software; you can redistribute it and/or
8+
modify it under the terms of the GNU Lesser General Public
9+
License as published by the Free Software Foundation; either
10+
version 2.1 of the License, or (at your option) any later version.
11+
12+
This library is distributed in the hope that it will be useful,
13+
but WITHOUT ANY WARRANTY; without even the implied warranty of
14+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
15+
Lesser General Public License for more details.
16+
17+
You should have received a copy of the GNU Lesser General Public
18+
License along with this library; if not, write to the Free Software
19+
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
20+
21+
upload the contents of the data folder with MkSPIFFS Tool ("ESP8266 Sketch Data Upload" in Tools menu in Arduino IDE)
22+
!!! This will erase any previous SPIFFS data you may have!
23+
!!! Make Backups First !!!
24+
if you do not have it, get it at : <<<FILL THIS
25+
access the sample web page at http://esp8266fs.local
26+
edit the page by going to http://esp8266fs.local/edit
27+
28+
*/
29+
#include <ESP8266WiFi.h>
30+
#include <WiFiClient.h>
31+
#include <ESP8266WebServer.h>
32+
#include <ESP8266mDNS.h>
33+
#include <FileSystem.h>
34+
35+
#define DBG_OUTPUT_PORT Serial
36+
37+
const char* ssid = "**********";
38+
const char* password = "**********";
39+
const char* hostname = "esp8266fs";
40+
41+
MDNSResponder mdns;
42+
ESP8266WebServer server(80);
43+
//holds the current upload
44+
FSFile fsUploadFile;
45+
46+
//format bytes
47+
char *formatBytes(size_t bytes){
48+
if (bytes < 1024){
49+
return (char *)String(String(bytes)+"B").c_str();
50+
} else if(bytes < (1024 * 1024)){
51+
return (char *)String(String(bytes/1024.0)+"KB").c_str();
52+
} else if(bytes < (1024 * 1024 * 1024)){
53+
return (char *)String(String(bytes/1024.0/1024.0)+"MB").c_str();
54+
} else {
55+
return (char *)String(String(bytes/1024.0/1024.0/1024.0)+"GB").c_str();
56+
}
57+
}
58+
59+
String getContentType(String filename){
60+
if(server.hasArg("download")) return "application/octet-stream";
61+
else if(filename.endsWith(".htm")) return "text/html";
62+
else if(filename.endsWith(".css")) return "text/css";
63+
else if(filename.endsWith(".js")) return "application/javascript";
64+
else if(filename.endsWith(".png")) return "image/png";
65+
else if(filename.endsWith(".gif")) return "image/gif";
66+
else if(filename.endsWith(".jpg")) return "image/jpeg";
67+
else if(filename.endsWith(".ico")) return "image/x-icon";
68+
else if(filename.endsWith(".xml")) return "text/xml";
69+
else if(filename.endsWith(".pdf")) return "application/x-pdf";
70+
else if(filename.endsWith(".zip")) return "application/x-zip";
71+
else if(filename.endsWith(".gz")) return "application/x-gzip";
72+
return "text/plain";
73+
}
74+
75+
bool handleFileRead(String path){
76+
if(path.endsWith("/")) path += "index.htm";
77+
String contentType = getContentType(path);
78+
if(FS.exists((char *)(path+".gz").c_str()) || FS.exists((char *)path.c_str())){
79+
if(FS.exists((char *)(path+".gz").c_str()))
80+
path += ".gz";
81+
FSFile file = FS.open((char *)path.c_str());
82+
server.streamFile(file, contentType);
83+
file.close();
84+
return true;
85+
}
86+
return false;
87+
}
88+
89+
void handleFileUpdate(){
90+
if(server.uri() != "/edit") return;
91+
HTTPUpload& upload = server.upload();
92+
if(upload.status == UPLOAD_FILE_START){
93+
String filename = upload.filename;
94+
DBG_OUTPUT_PORT.print("Upload Name: "); DBG_OUTPUT_PORT.println(filename);
95+
fsUploadFile = FS.open((char *)filename.c_str(), FSFILE_OVERWRITE);
96+
filename = String();
97+
} else if(upload.status == UPLOAD_FILE_WRITE){
98+
//DBG_OUTPUT_PORT.print("Upload Data: "); DBG_OUTPUT_PORT.println(upload.currentSize);
99+
if(fsUploadFile)
100+
fsUploadFile.write(upload.buf, upload.currentSize);
101+
} else if(upload.status == UPLOAD_FILE_END){
102+
if(fsUploadFile)
103+
fsUploadFile.close();
104+
DBG_OUTPUT_PORT.print("Upload Size: "); DBG_OUTPUT_PORT.println(upload.totalSize);
105+
}
106+
}
107+
108+
void handleFileDelete(){
109+
if(server.args() == 0) return server.send(500, "text/plain", "BAD ARGS");
110+
String path = server.arg(0);
111+
if(path == "/")
112+
return server.send(500, "text/plain", "BAD PATH");
113+
if(!FS.exists((char *)(path.c_str())))
114+
return server.send(404, "text/plain", "FileNotFound");
115+
FS.remove((char *)path.c_str());
116+
server.send(200, "text/plain", "");
117+
path = String();
118+
}
119+
120+
void handleFileCreate(){
121+
if(server.args() == 0)
122+
return server.send(500, "text/plain", "BAD ARGS");
123+
String path = server.arg(0);
124+
if(path == "/")
125+
return server.send(500, "text/plain", "BAD PATH");
126+
if(FS.exists((char *)path.c_str()))
127+
return server.send(500, "text/plain", "FILE EXISTS");
128+
FSFile file = FS.open((char *)path.c_str(), FSFILE_OVERWRITE);
129+
if(file)
130+
file.close();
131+
else
132+
return server.send(500, "text/plain", "CREATE FAILED");
133+
server.send(200, "text/plain", "");
134+
path = String();
135+
}
136+
137+
void handleFileList() {
138+
if(!server.hasArg("dir")) return server.send(500, "text/plain", "BAD ARGS");
139+
String path = server.arg("dir");
140+
141+
FSFile entry;
142+
FSFile dir = FS.open((char *)path.c_str());
143+
path = String();
144+
if(!dir.isDirectory()){
145+
dir.close();
146+
server.send(500, "text/plain", "NOT DIR");
147+
return;
148+
}
149+
dir.rewindDirectory();
150+
151+
WiFiClient client = server.client();
152+
client.print("HTTP/1.1 200 OK\r\nContent-Type: text/json\r\nConnection: close\r\n\r\n");
153+
String output = "[";
154+
while(true){
155+
entry = dir.openNextFile();
156+
if (!entry) break;
157+
if(!FS.exists(entry.name())){
158+
os_printf("Entry[%s] Not Exists!\n", entry.name());
159+
entry.remove();
160+
entry.close();
161+
continue;
162+
}
163+
if(output != "[") output += ',';
164+
output += "{\"type\":\"";
165+
output += (entry.isDirectory())?"dir":"file";
166+
output += "\",\"name\":\"";
167+
output += String(entry.name()).substring(1);
168+
output += "\"}";
169+
entry.close();
170+
}
171+
dir.close();
172+
173+
output += "]";
174+
client.write(output.c_str(), output.length());
175+
output = String();
176+
uint16_t maxWait = HTTP_MAX_CLOSE_WAIT;
177+
while(client.connected() && maxWait--) {
178+
delay(1);
179+
}
180+
}
181+
182+
void setup(void){
183+
DBG_OUTPUT_PORT.begin(115200);
184+
DBG_OUTPUT_PORT.print("\n");
185+
186+
//SPIFFS INIT
187+
DBG_OUTPUT_PORT.printf("\n==== SPIFFS Info ====\n");
188+
DBG_OUTPUT_PORT.printf("FS Mount: %d\n", FS.mount());
189+
DBG_OUTPUT_PORT.printf("FS Size: %s\n", formatBytes(FS.size()));
190+
DBG_OUTPUT_PORT.printf("FS Bytes: total: %s, used: %s\n", formatBytes(FS.totalBytes()), formatBytes(FS.usedBytes()));
191+
DBG_OUTPUT_PORT.printf("FS Blocks: total: %d, free: %d, size: %s\n", FS.totalBlocks(), FS.freeBlocks(), formatBytes(FS.blockSize()));
192+
DBG_OUTPUT_PORT.printf("FS Pages: allocated: %d, deleted: %d, size: %s\n", FS.allocatedPages(), FS.deletedPages(), formatBytes(FS.pageSize()));
193+
FSFile entry;
194+
FSFile dir = FS.open((char *)"/");
195+
while(true){
196+
entry = dir.openNextFile();
197+
if (!entry) break;
198+
DBG_OUTPUT_PORT.printf("FS File: %s, type: %s, size: %s\n", entry.name(), (entry.isDirectory())?"dir":"file", formatBytes(entry.size()));
199+
entry.close();
200+
}
201+
dir.close();
202+
DBG_OUTPUT_PORT.printf("\n");
203+
204+
//WIFI INIT
205+
DBG_OUTPUT_PORT.printf("Connecting to %s\n", ssid);
206+
WiFi.begin(ssid, password);
207+
if(WiFi.waitForConnectResult() != WL_CONNECTED){
208+
DBG_OUTPUT_PORT.printf("Could not connect to %s\n", ssid);
209+
while(1) delay(500);
210+
}
211+
DBG_OUTPUT_PORT.print("Connected! IP address: ");
212+
DBG_OUTPUT_PORT.println(WiFi.localIP());
213+
214+
//mDNS INIT
215+
if (mdns.begin(hostname, WiFi.localIP()))
216+
DBG_OUTPUT_PORT.printf("mDNS responder started for %s.local\n", hostname);
217+
218+
//SERVER INIT
219+
//list directory
220+
server.on("/list", HTTP_GET, handleFileList);
221+
//load editor
222+
server.on("/edit", HTTP_GET, [](){
223+
if(!handleFileRead("/edit.htm")) server.send(404, "text/plain", "FileNotFound");
224+
});
225+
//create file
226+
server.on("/edit", HTTP_PUT, handleFileCreate);
227+
//delete file
228+
server.on("/edit", HTTP_DELETE, handleFileDelete);
229+
//called after file upload
230+
server.on("/edit", HTTP_POST, [](){ server.send(200, "text/plain", ""); });
231+
//called when a file is received inside POST data
232+
server.onFileUpload(handleFileUpdate);
233+
234+
//called when the url is not defined here
235+
//use it to load content from SPIFFS
236+
server.onNotFound([](){
237+
if(!handleFileRead(server.uri()))
238+
server.send(404, "text/plain", "FileNotFound");
239+
});
240+
241+
//get heap status, analog input value and all GPIO statuses in one json call
242+
server.on("/all", HTTP_GET, [](){
243+
String json = "{";
244+
json += "\"heap\":"+String(ESP.getFreeHeap());
245+
json += ", \"analog\":"+String(analogRead(A0));
246+
json += ", \"gpio\":"+String((uint32_t)(((GPI | GPO) & 0xFFFF) | ((GP16I & 0x01) << 16)));
247+
json += "}";
248+
server.send(200, "text/json", json);
249+
json = String();
250+
});
251+
server.begin();
252+
DBG_OUTPUT_PORT.println("HTTP server started");
253+
254+
}
255+
256+
void loop(void){
257+
server.handleClient();
258+
}

‎libraries/ESP8266WebServer/examples/FSWebServer/data/edit.htm.gz

4.02 KB
Binary file not shown.

‎libraries/ESP8266WebServer/examples/FSWebServer/data/favicon.ico

1.12 KB
Binary file not shown.

‎libraries/ESP8266WebServer/examples/FSWebServer/data/graphs.js.gz

1.92 KB
Binary file not shown.

‎libraries/ESP8266WebServer/examples/FSWebServer/data/index.htm

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!--
2+
FSWebServer - Example Index Page
3+
4+
Copyright (c) 2015 Hristo Gochkov. All rights reserved.
5+
This file is part of the ESP8266WebServer library for Arduino environment.
6+
7+
This library is free software; you can redistribute it and/or
8+
modify it under the terms of the GNU Lesser General Public
9+
License as published by the Free Software Foundation; either
10+
version 2.1 of the License, or (at your option) any later version.
11+
12+
This library is distributed in the hope that it will be useful,
13+
but WITHOUT ANY WARRANTY; without even the implied warranty of
14+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
15+
Lesser General Public License for more details.
16+
17+
You should have received a copy of the GNU Lesser General Public
18+
License along with this library; if not, write to the Free Software
19+
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
20+
-->
21+
<!DOCTYPE html>
22+
<html>
23+
<head>
24+
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
25+
<title>ESP Monitor</title>
26+
<script type="text/javascript" src="graphs.js"></script>
27+
<script type="text/javascript">
28+
var heap,temp,digi;
29+
var reloadPeriod = 1000;
30+
var running = false;
31+
32+
function loadValues(){
33+
if(!running) return;
34+
var xh = new XMLHttpRequest();
35+
xh.onreadystatechange = function(){
36+
if (xh.readyState == 4){
37+
if(xh.status == 200) {
38+
var res = JSON.parse(xh.responseText);
39+
heap.add(res.heap);
40+
temp.add(res.analog);
41+
digi.add(res.gpio);
42+
if(running) setTimeout(loadValues, reloadPeriod);
43+
} else running = false;
44+
}
45+
};
46+
xh.open("GET", "/all", true);
47+
xh.send(null);
48+
};
49+
50+
function run(){
51+
if(!running){
52+
running = true;
53+
loadValues();
54+
}
55+
}
56+
57+
function onBodyLoad(){
58+
var refreshInput = document.getElementById("refresh-rate");
59+
refreshInput.value = reloadPeriod;
60+
refreshInput.onchange = function(e){
61+
var value = parseInt(e.target.value);
62+
reloadPeriod = (value > 0)?value:0;
63+
e.target.value = reloadPeriod;
64+
}
65+
var stopButton = document.getElementById("stop-button");
66+
stopButton.onclick = function(e){
67+
running = false;
68+
}
69+
var startButton = document.getElementById("start-button");
70+
startButton.onclick = function(e){
71+
run();
72+
}
73+
74+
// Example with 10K thermistor
75+
//function calcThermistor(v) {
76+
// var t = Math.log(((10230000 / v) - 10000));
77+
// t = (1/(0.001129148+(0.000234125*t)+(0.0000000876741*t*t*t)))-273.15;
78+
// return (t>120)?0:Math.round(t*10)/10;
79+
//}
80+
//temp = createGraph(document.getElementById("analog"), "Temperature", 100, 128, 10, 40, false, "cyan", calcThermistor);
81+
82+
temp = createGraph(document.getElementById("analog"), "Analog Input", 100, 128, 0, 1023, false, "cyan");
83+
heap = createGraph(document.getElementById("heap"), "Current Heap", 100, 125, 0, 30000, true, "orange");
84+
digi = createDigiGraph(document.getElementById("digital"), "GPIO", 100, 146, [0, 4, 5, 16], "gold");
85+
run();
86+
}
87+
</script>
88+
</head>
89+
<body id="index" style="margin:0; padding:0;" onload="onBodyLoad()">
90+
<div id="controls" style="display: block; border: 1px solid rgb(68, 68, 68); padding: 5px; margin: 5px; width: 362px; background-color: rgb(238, 238, 238);">
91+
<label>Period (ms):</label>
92+
<input type="number" id="refresh-rate"/>
93+
<input type="button" id="start-button" value="Start"/>
94+
<input type="button" id="stop-button" value="Stop"/>
95+
</div>
96+
<div id="heap"></div>
97+
<div id="analog"></div>
98+
<div id="digital"></div>
99+
</body>
100+
</html>

0 commit comments

Comments
 (0)