Problème de LittleFS, ESPAsyncWebServer et CSS

Bonjour

J’ai un problème de LittleFS, ESPAsyncWebServer et CSS.

Dans /arduino/AAAA/data 3 files

<!DOCTYPE html>
<html lang="fr">

<head>
  <title> Server Power Girl</title> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="mystyle.css"> <!-- css -->
    <script type="text/javascript" src="script.js"></script> <!--   scpript.js --> 
</head>

<body>
  <div class="titre_1">
    <p>Power Girl Server


      ESP8266 ESP-201

    </p>
  </div>

  <table style="border-collapse: collapse; width: 100%;">
    <tbody>
      <tr>
        <td>
          <! VAR  INA219_1_on_off >
          <h1> INA219 1 </h1><input type="checkbox" name="INA219_1_on_off">
        </td>
        <td>
          <div class="boxes">
            <fieldset class="readingboxes" id="INA219_1_powerfs">
              <legend style="border: 2px solid #cc66ff;">Power</legend>
              <p id="INA219_1_powbox">Connecting...</p>
            </fieldset>
            <fieldset class="readingboxes" id="INA219_1_volfs">
              <legend style="border: 2px solid #3399ff;">Voltage</legend>
              <p id="INA219_1_volbox">Connecting...</p>
            </fieldset>
            <fieldset class="readingboxes" id="INA219_1_curfs">
              <legend style="border: 2px solid #cc0033;">Current</legend>
              <p id="INA219_1_curbox">Connecting...</p>
            </fieldset>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <hr />
  <div>
    <table style="border-collapse: collapse; width: 100%;">
      <tbody>
        <tr>
          <td>
             <! VAR  INA219_1_on_off >
            <h1> INA219 2 </h1>
            <input type="checkbox" name="INA219_2_on_off">
          </td>
          <td>
            <div class="boxes">
              <fieldset class="readingboxes" id="INA219_2_powerfs">
                <legend style="border: 2px solid #cc66ff;">Power</legend>
                <p id="INA219_2_powbox">Connecting...</p>
              </fieldset>
              <fieldset class="readingboxes" id="INA219_2_volfs">
                <legend style="border: 2px solid #3399ff;">Voltage</legend>
                <p id="INA219_2_volbox">Connecting...</p>
              </fieldset>
              <fieldset class="readingboxes" id="INA219_2_curfs">
                <legend style="border: 2px solid #cc0033;">Current</legend>
                <p id="INA219_2_curbox">Connecting...</p>
              </fieldset>
            </div>

          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <hr />
  <div id="polling">
    <h3>Set Polling Rate</h3>
    <input type="text" id="polinp" placeholder="Polling rate in seconds" />

</div>  
  <button type="button" id="setpol">Set button</button>
  <hr>
  <div class="center">
    <i color: White> Papy_stroke 2020</i>
  </div>
</body>

</html>
body {
  background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    linear-gradient(
      #1d1d1d 25%,
      #1a1a1a 25%,
      #1a1a1a 50%,
      transparent 50%,
      transparent 75%,
      #242424 75%,
      #242424
    );
  background-color: #131313;
  background-size: 20px 20px;
  margin: 0;
  padding: 0;
  margin: auto;
}
.titre_1 {
  background-image: url("https://www.urban-comics.com/wp-content/uploads/2019/07/powergirl2.jpg");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
  border: 1px;
  padding: 25px;
  background-size: 100%;
  height: 100%;
  text-align: center;
  text-shadow: 2px 2px 5px black;
  color: #000;
  font-size: 40px;
}
h1 {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  text-align: letf;
  color: #fff;
  font-size: 16px;
  padding: 15px 0;
  text-transform: uppercase;
  letter-spacing: 4px;
  text-indent: 20px;
}
input[type="checkbox"] {
  margin: 10px;
  position: relative;
  width: 120px;
  height: 40px;
  -webkit-appearance: none;
  background: linear-gradient(0deg, #333, #000);
  outline: none;
  border-radius: 20px;
  box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e,
    inset 0 0 10px rgba(0, 0, 0, 1);
}
.boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: auto;
  height: fit-content;
  margin-top: auto;
  margin-bottom: 10px;
}
.readingboxes {
  border: 3px;
  border-style: solid;
  text-align: center;
  width: 120px;
  margin: 30px;
}
#INA219_1_powerfs,
#INA219_2_powerfs {
  color: #cc66ff;
}
#INA219_1_volfs,
#INA219_2_volfs {
  color: #3399ff;
}
#INA219_1_curfs,
#INA219_2_curfs {
  color: #cc0033;
}
#INA219_1_powbox,
#INA219_1_volbox,
#INA219_1_curbox,
#INA219_2_powbox,
#INA219_2_volbox,
#INA219_2_curbox,
#unitbox {
  color: #dcdcdc;
  font-family: Arial;
  font-size: 1.35rem;
  text-align: center;
}
hr {
  border-top: 3.5px solid #dcdcdc;
  width: 100%;
}
#polling {
  position: relative;
  display: flex;
  flex-flow: column wrap;
  text-align: center;
}
h3 {
  color: #dcdcdc;
  font-family: Arial;
  font-size: 2rem;
  text-align: center;
  padding-bottom: 4px;
  margin: auto;
}

#polinp {
  background-color: #232426;
  margin: auto;
  font-family: Arial;
  text-align: center;
font-size: 15px;
     color: #dcdcdc;
   
}
button {
  background-color: #232426;
  display: inherit;
  width: 150px;
  height: 30px;
  padding: 0.35em 1.2em;
  border: 0.1em solid #ffffff;
  margin: 0 0.3em 0.3em 0;
  border-radius: 0.12em;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  color: #ffffff;
  text-align: center;
  transition: all 0.2s;
  margin-left: auto;
  margin-right: auto;
}
button:hover {
  color: #000000;
  background-color: #ffffff;
}

input:checked[type="checkbox"]:nth-of-type(1) {
  background: linear-gradient(0deg, #e8132f, #ff0022);
  box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e,
    inset 0 0 10px rgba(0, 0, 0, 1);
}
input:checked[type="checkbox"]:nth-of-type(2) {
  background: linear-gradient(0deg, #70a1ff, #1e90ff);
  box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e,
    inset 0 0 10px rgba(0, 0, 0, 1);
}
input[type="checkbox"]:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 40px;
  background: linear-gradient(0deg, #000, #6b6b6b);
  border-radius: 20px;
  box-shadow: 0 0 0 1px #232323;
  transform: scale(0.98, 0.96);
  transition: 0.5s;
}
input:checked[type="checkbox"]:before {
  left: 40px;
}
input[type="checkbox"]:after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  left: 70px;
  width: 4px;
  height: 4px;
  background: linear-gradient(0deg, #6b6b6b, #000);
  border-radius: 50%;
  transition: 0.5s;
}
input:checked[type="checkbox"]:after {
  left: 110px;
}
.center {
  left: 50%;
  top: 25%;
  height: 100%;
  text-align: center;
  color: White;
}

Quand je lis avec mon browser tout est bien. image1

Je transfers les files avec ESP8266 LittleFS Upload
Je transfers le ino run le debugging donne çà

14:26:50.783 -> Booting + Serial
14:26:50.783 -> Measuring voltage and current with INA219 ...
14:26:50.783 -> LittleFS ok 
14:26:50.783 -> File: index.html
14:26:50.783 -> File: mystyle.css
14:26:50.783 -> File: script.js
14:26:51.277 -> Disconnect
14:26:51.886 -> !!!!!!!
14:26:55.683 -> Hostname to Power_Girl
14:26:55.683 -> 
14:26:55.683 -> Connected to WiFi-2.4-4CE9
14:26:55.683 -> IP address: 192.168.1.80
14:26:55.683 -> Serveur actif!
14:26:55.683 -> Bus Voltage: 0.00 V
14:26:55.683 -> Shunt Voltage: -42.20 mV
14:26:55.683 -> Load Voltage: -0.04 V
14:26:55.683 -> Current: nan mA
14:26:55.683 -> Power: nan mW
14:26:55.683 ->

Quand je lis avec add 19.168.1.80 donne . image2
Tout est bien mais les le CSS est vide ???

Pourquoi
Merci beaucoup

les images:


il nous manque le code Arduino...

#include "credentials.h" // credentials.h include
#include "LittleFS_proc.h"
#include "papy_wifi_proc.h"
#include "SERVER_proc.h"


#include <Wire.h>
#include <Adafruit_INA219.h>

Adafruit_INA219 ina219;

void setup() {
  //------------------------------------------------Serial

  Serial.begin(115200);
  while (!Serial) {} // phase développement
  Serial.println("");
  Serial.println("Booting + Serial");

  //-----------------------------------------------GPIO

 Serial.println("Measuring voltage and current with INA219 ...");
 ina219.begin();
 pinMode(2,OUTPUT);
  
  //----------------------------------------------LittleFS

  LittleFS_proc();

  //-----------------------------------------------WIFI

  papy_wifi_proc();

  //-----------------------------------------------OTA

  SERVER_proc();

  //-----------------------------------------------SERVER

}

void loop() {

 digitalWrite(2,HIGH);
 float shuntvoltage = 0;
 float busvoltage = 0;
 float current_mA = 0;
 float loadvoltage = 0;
 float power = 0;

 shuntvoltage = ina219.getShuntVoltage_mV();
 busvoltage = ina219.getBusVoltage_V();
 current_mA = ina219.getCurrent_mA();
 loadvoltage = busvoltage + (shuntvoltage / 1000);
 power = current_mA * loadvoltage;

 Serial.print("Bus Voltage: "); Serial.print(busvoltage); Serial.println(" V");
 Serial.print("Shunt Voltage: "); Serial.print(shuntvoltage); Serial.println(" mV");
 Serial.print("Load Voltage: "); Serial.print(loadvoltage); Serial.println(" V");
 Serial.print("Current: "); Serial.print(current_mA); Serial.println(" mA");
 Serial.print("Power: "); Serial.print(power); Serial.println(" mW");
 Serial.println("");

 delay(5000);
 
 }
#include <LittleFS.h>

void LittleFS_proc(){

if (!LittleFS.begin())
  {
    Serial.println("Erreur LittleFS...");
    return;
  }

  Serial.println("LittleFS ok ");
  File root = LittleFS.open("/", "r");
  File file = root.openNextFile();

  while (file)
  {
    Serial.print("File: ");
    Serial.println(file.name());
    file.close();
    file = root.openNextFile();
  }
}
#include <ESPAsyncWebServer.h>

DNSServer dnsServer;
AsyncWebServer server(80);

const int led = LED_BUILTIN;
const int capteurLuminosite = D8; //GPIO15

 void SERVER_proc(){
 server.on("/", HTTP_GET, [](AsyncWebServerRequest  * request)
  {
    request->send(LittleFS, "/index.html", "text/html");
  });

  server.on("/w3.css", HTTP_GET, [](AsyncWebServerRequest * request)
  {
    request->send(LittleFS, "/mystyle.css", "text/css");
  });

  server.on("/script.js", HTTP_GET, [](AsyncWebServerRequest * request)
  {
    request->send(LittleFS, "/script.js", "text/javascript");
  });

  server.on("/lireLuminosite", HTTP_GET, [](AsyncWebServerRequest * request)
  {
    int val = analogRead(capteurLuminosite);
    String luminosite = String(val);
    request->send(200, "text/plain", luminosite);
  });

  server.on("/on", HTTP_GET, [](AsyncWebServerRequest * request)
  {
    digitalWrite(led, HIGH);
    request->send(200);
  });

  server.on("/off", HTTP_GET, [](AsyncWebServerRequest * request)
  {
    digitalWrite(led, LOW);
    request->send(200);
  });

  server.begin();
  Serial.println("Serveur actif!");
 }
#include <DNSServer.h>
#ifdef ESP32
#include <WiFi.h>
#include <AsyncTCP.h>
#elif defined(ESP8266)
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#endif

const char* ssid = mySSID;
const char* password = myPASSWORD;
const char* WiFi_hostname = myHostname;

//Static IP address configuration
IPAddress staticIP(192, 168, 1, 80); //ESP8266 static ip
IPAddress gateway(192, 168, 1, 1); //IP Address of your WiFi Router (Gateway)
IPAddress subnet(255, 255, 255, 0); //Subnet mask
IPAddress dns(192, 168, 1, 1); //DNS

void papy_wifi_proc(){
WiFi.setAutoConnect(false);

  WiFi.disconnect(); //Prevent connecting to wifi based on previous configuration
  delay(500);
  Serial.println("Disconnect");

  WiFi.hostname(WiFi_hostname); // DHCP Hostname
  WiFi.mode(WIFI_STA); //WiFi mode station (connect to wifi router only)
  WiFi.config(staticIP, gateway, subnet, dns, dns);
  WiFi.begin(ssid, password);

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

  Serial.println("");
  Serial.print("Hostname to ");
  Serial.println(WiFi_hostname);

  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());
}
    <link rel="stylesheet" type="text/css" href="mystyle.css"> <!-- css -->
  server.on("/w3.css", HTTP_GET, [](AsyncWebServerRequest * request)

pourquoi w3.css alors que le fichier s’appelle mystyle.css ?

:slight_smile:

C'est çà !!!! >:(

Merci !!