SPIFFS Html con css e js esterni

International Italiano Software
1

Buona Sera a tutti, come sempre sono a chiedere il Vostro aiuto:
Sto cercando di creare una pagina web che utilizza un foglio stile e un file js esterni.
In locale la pagina web funziona correttamente, ma quando la lancio dalla esp8266 questo non funziona, infatti non carica ne i css ne lo script java.

Il software è sempre un test, perché il Mio obiettivo è quello di creare una pagina web che possa consentire all'utente di selezionare la wifi a cui si dovrà connettere la scheda. Questo per ora è un test, per cui chiedo scusa se il codice non è scritto in maniera pulita e normalizzata.

index_config.html:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>config WiFi</title>
	<link rel="icon" href="data:,">
	<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
</head>

<body>
	<div class="box">
		<h1>CONFIGURAZIONE RETE WIFI</h1>
		<div class="form-input-material">
			<select class="seletWifi" id="listaWifi" size="10"></select>
		</div>
		<br>
		<br>
		<div class="form-input-material">
			<label>SSID: </label><input type="text" name="SSID" id="SSID" placeholder=" " autocomplete="off"  class="input-form" required /> <label>Password:</label>
			<input type="password" name="password" id="password" placeholder=" " autocomplete="off"  class="input-form" required />
		</div>
		<br>
		<br>
		<div class="form-stati-ip" >
			<br>
			<label class="form-stati-ip-elem">IP statico: </label> <input id="ipStatico" type="checkbox" />
			<br>
			<div class="containerConfigBox" id="formInputStaticIp" contenteditable="false">
				<div class="configBox">
					<label>IP: </label><input type="text" name="IP" id="txtIp" placeholder=" " autocomplete="off"  class="input-form2" required disabled/>
					<br>
					<label>MASK: </label><input type="text" name="MASK" id="txtMask" placeholder=" " autocomplete="off"  class="input-form2" required disabled/>
				</div>
				<div class="configBox">
					<label>GATEWAY: </label><input type="text" name="GATEWAY" id="txtGateway" placeholder=" " autocomplete="off"  class="input-form2" required disabled />
					<br>
					<label>DNS: </label><input type="text" name="DNS" id="txtDns" placeholder=" " autocomplete="off"  class="input-form2" required disabled />
				</div>
			</div>
		</div>
		<br>
		<br>
		<div class="buttonDiv">
			<button id="scann">Scan</button>
			<button id="send">Invia</button>
			<button id="reset">Annulla</button>
		</div>
		
		
</div>
	<script src="script.js"></script>
</body>
</html>

style.css:

@charset "utf-8";
/* CSS Document */
body {
	display: flex;
  	justify-content: center;
  	align-items: center;
  	min-height: 100vh;
  	background: #eceffc;
	font-family:Arial;
	
}

.configBox{
	display:flex;
	flex-direction: column;
	width: 50%;
}

.containerConfigBox{
	display: flex;
	display: -webkit-flex;
	flex-flow: row nowrap;
	align-items: stretch;
	justify-content: space-between;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
}

.box {
	width: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 40px;
  color: white;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;

  box-shadow: 0 0.4px 0.4px rgba(128, 128, 128, 0.109),
    0 1px 1px rgba(128, 128, 128, 0.155),
    0 2.1px 2.1px rgba(128, 128, 128, 0.195),
    0 4.4px 4.4px rgba(128, 128, 128, 0.241),
    0 12px 12px rgba(128, 128, 128, 0.35);
}
h1 {
	margin: 0 0 24px 0;
}

.form-stati-ip{
	background-color: rgba(96,96,96,1.00);
	width: 500px;
	height: 180px;
	align-items: flex-start;
	border-radius: 10px;padding: inherit,10px;
}
.form-stati-ip-elem{
	margin: 10px;	
}

.form-input-material {
	border-color: white;
	border-bottom-color: white;
	color: white;
	text-decoration-color: white;
}

.input-form{
	border: 0;
	background-color: rgba(96,96,96,1.00);
	border-radius: 10px;
	padding: 5px,7px;
	color: white;
}

.input-form2{
	border: 0;
	background-color: rgba(23,23,23,1.00);
	border-radius: 10px;
	padding: 5px,7px;
	color: white;
	cursor: auto;
}

.seletWifi{
	border: 0;
	width: 500px;
	background-color: rgba(96,96,96,1.00);
	border-radius: 10px;
	padding: 5px,7px;
	color: white;
}

.input-form2:disabled{
	background-color: #262626;
	cursor: no-drop;
}

button{
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #fff;
	padding: 10px 20px;
	border: solid 2px rgba(255,255,255,1.00);
	background: rgba(63,63,63,1.00);
	border-radius: 20px;
}
button:focus{
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #fff;
	padding: 10px 20px;
	border: solid 2px rgba(255,255,255,1.00);
	background: rgba(77,77,77,1.00);
	border-radius: 20px;
	box-shadow: 0px 0px 10px 5px rgba(110,110,110,0.73);
}
button:hover{
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #fff;
	padding: 10px 20px;
	border: solid 2px rgba(255,255,255,1.00);
	background: rgba(77,77,77,1.00);
	border-radius: 20px;
	box-shadow: 0px 0px 10px 5px rgba(144,144,144,0.65);
}
button:active{
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #000000;
	padding: 10px 20px;
	border: solid 2px rgba(255,255,255,1.00);
	background: rgba(255,255,255,1.00);
	border-radius: 20px;
	box-shadow: 0px 0px 10px 5px rgba(144,144,144,0.65);
}

.buttonDiv{
	align-items:flex-end;
}

label{
	color: white;
}

Esp2866:

#include <ESP8266WebServer.h>
#include <ArduinoJson.h>
#include <ESP8266WiFi.h>
#include <FS.h>

ESP8266WebServer server (80);
File WEB;
void setup() {
   SPIFFS.begin();
   
   Serial.begin(115200);
   WiFi.softAPdisconnect(true);
   WiFi.disconnect(); 
   WiFi.mode(WIFI_STA);
   WiFi.begin(//SSID,//pw);

   while(WiFi.status()!=WL_CONNECTED){
    delay(1000);
    Serial.print("."); 
   }
   Serial.println("");
   Serial.println(WiFi.localIP());

  Dir dir = SPIFFS.openDir("/");
  Serial.println("Elenco File presenti in EEPROM:");
while (dir.next()) {
    Serial.println(dir.fileName());
}
    
   
   
    server.on("/", handleRoot);
    server.on("/scann",HTTP_POST,scanzione);
    server.on("/data",HTTP_POST,ricezione);
    server.onNotFound(handleNotFound);
    server.begin();
    
   /*server.on("/",[](){server.send_P(200,"text/html", web);});
   server.on("/scann",HTTP_GET,scanzione);
   server.begin();*/
}

void handleRoot() {
    loadFromSPIFFS("/index_config.html");
}

bool loadFromSPIFFS(String path) {
  String dataType = "text/html";
 
  Serial.print("Requested page -> ");
  Serial.println(path);
  if (SPIFFS.exists(path)){
      File dataFile = SPIFFS.open(path, "r");
      if (!dataFile) {
          handleNotFound();
          return false;
      }
 
      if (server.streamFile(dataFile, dataType) != dataFile.size()) {
        Serial.println("Sent less data than expected!");
      }else{
          Serial.println("Page served!");
      }
 
      dataFile.close();
  }else{
      Serial.println("File non trovato");
      handleNotFound();
      return false;
  }
  return true;
}

void handleNotFound() {
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
 
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
 
  server.send(404, "text/plain", message);
}

void loop() {
  server.handleClient();

}
void scanzione(){
  Serial.println("Invio Wifi");
  const size_t dimensioni = JSON_ARRAY_SIZE(5);
  DynamicJsonDocument doc (dimensioni);

  JsonArray list = doc.createNestedArray("SSID");
  list.add("Wifi_1");
  list.add("Wifi_2");
  list.add("Wifi_3");
  list.add("Wifi_4");
  
  String message = "";
  serializeJson(doc,message);
  Serial.println(message);
  server.send(200,"application/json",message);
  delay(500);
}

void ricezione(){
  
}

Questa schermata la ho se lancio la pagina web da locale

Web_Locale
Web_Locale1700×867 19.9 KB

mentre cosi se la lancio dall'ESP:

Web_rete
Web_rete629×545 9.3 KB

Che errore commetto?

2

Chiedo scusa a tutti, basta guardare meglio e la soluzione si trova, non avevo generato le risposte del server alle richieste di apertura del css e del js. per cui sull'ESP2866 ho dovuto aggiungere il seguente codice:
nel begin:

    server.on("/style.css", HTTP_GET,hendleCss);
    server.on("/script.js", HTTP_GET,hendleJs);

più il seguente codice:

void handleRoot() {
    loadFromSPIFFS("/index_config.html","text/html");
}

void hendleCss(){
  loadFromSPIFFS("/style.css","text/css");
}

void hendleJs(){
  loadFromSPIFFS("/script.js","application/javascript");
}

bool loadFromSPIFFS(String path, String Type) {
  String dataType = Type;
 
  Serial.print("Requested page -> ");
  Serial.println(path);
  if (SPIFFS.exists(path)){
      File dataFile = SPIFFS.open(path, "r");
      if (!dataFile) {
          handleNotFound();
          return false;
      }
 
      if (server.streamFile(dataFile, dataType) != dataFile.size()) {
        Serial.println("Sent less data than expected!");
      }else{
          Serial.println("Page served!");
      }
 
      dataFile.close();
  }else{
      Serial.println("File non trovato");
      handleNotFound();
      return false;
  }
  return true;
}

Ora funziona correttamente

3

Ciao, se può interessarti, ho riorganizzato le funzioni dell'esempio FSBrowser.ino in una libreria Arduino sia per ESP32 che per ESP8266.

Nella libreria, oltre a qualche esempio, ho aggiunto anche un WiFi manager più semplice rispetto a come lo stai implementando, ma può essere disabilitato per usare i file che hai già creato (o eventualmente esteso con nuove funzionalità).

Trovi tutto qui:

1 Like
4

TI ringrazio

5

This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.