Serveur Web ESP32 utilisant le système de fichiers LittleFS

Then, add a paragraph with the text “GPIO state ” followed by the GPIO state. Because the GPIO state changes accordingly to the state of the GPIO, we can add a placeholder that will then be replaced with whatever value we set on the Arduino sketch.

To add a placeholder use % signs. To create a placeholder for the state, you can use %STATE%, for example.

💡 GPIO state %STATE%

Vous attribuez une valeur à l’espace réservé de l’État dans l’esquisse Arduino – nous verrons comment cela fonctionne plus tard.

Ensuite, créez un bout et un boutons ONF. Lorsque vous cliquez sur le bouton ON, nous redirigeons la page Web vers l’URL de root suivie de / sur URL. Lorsque vous cliquez sur le bouton OFF, vous êtes redirigé vers l’URL / OFF.

ON
OFF

Enfin, créez trois paragraphes pour afficher la température, l’humidité et la pression.

  ON
  OFF



  🌡️ Temperature
  %TEMPERATURE%
  °C



  💧 Humidity
  %HUMIDITY%
  %



  ↕️ Pressure
  %PRESSURE%
  hPa

Nous utilisons le% de température%,% d’humidité% et% de pression% en espaces réservés. Ceux-ci seront ensuite remplacés par les lectures réelles du capteur dans l’esquisse Arduino.

Mises à jour automatiques

Nous ajoutons également un peu de JavaScript à notre fichier HTML qui est responsable de la mise à jour des lectures toutes les dix secondes sans avoir à actualiser la page Web. Il devrait aller entre les balises.

Fondamentalement, nous récupérons les données du capteur du serveur (ESP32) et mettons à jour le contenu des éléments HTML correspondants sur la page.

Nous créons une fonction appelée UpdaSeSensorValue qui prend deux paramètres: ID (l’ID de l’élément HTML sur la page), et le point de terminaison (URL à partir de laquelle récupérer les données du capteur – par exemple, pour obtenir des valeurs de température, nous faisons une demande sur l’URL / température).

const updateSensorValue = (id, endpoint) => {
  fetch(endpoint)
    .then(response => {
      if (!response.ok) {
        throw new Error(`Failed to fetch ${endpoint}`);
      }
      return response.text();
    })
    .then(data => {
      document.getElementById(id).textContent = data;
    })
    .catch(error => {
      console.error(error);
      document.getElementById(id).textContent="Error";
    });
};

La fonction de commande fetch (endpoint) envoie une demande au serveur (l’ESP32).

 fetch(endpoint)

Si le serveur répond avec succès, la fonction récupère les données de réponse (au format texte) et met à jour le contenu texte de l’élément HTML avec l’ID donné.

  }
  return response.text();
})
  .then(data => {
     document.getElementById(id).textContent = data;
   })

Si quelque chose ne va pas (comme le serveur est en baisse ou que la demande échoue), il affiche une erreur dans l’élément HTML et enregistre l’erreur à la console.

.catch(error => {
  console.error(error);
  document.getElementById(id).textContent="Error";
});

Mise à jour des lectures de capteurs

La fonction setInterval () est utilisée pour appeler la fonction UpdaSeSenSorValue () toutes les 10 secondes. Il récupère les données de température, d’humidité et de pression et place les lectures sur les droits HTML.

 // Update all sensors every 10 seconds
 setInterval(() => {
   updateSensorValue('temperature', '/temperature');
   updateSensorValue('humidity', '/humidity');
   updateSensorValue('pressure', '/pressure');
 }, 10000);

Création du fichier CSS

Créez le fichier style.css avec le contenu suivant:

/***
  Rui Santos & Sara Santos - Raspberryme.com
  Complete project details at https://Raspberryme.com/esp32-web-server-littlefs/ 
***/

html {
  font-family: Arial;
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  background-color: #f4f4f4;
  color: #333;
}

h1 {
  color: #0F3376;
  padding: 2vh 1rem;
  font-size: 2rem;
  margin-bottom: 1rem;
}

p {
  font-size: 1.5rem;
  margin: 1rem auto;
  max-width: 600px;
}

.button {
  display: inline-block;
  background-color: #00A676;
  border: none;
  border-radius: 6px;
  color: white;
  padding: 14px 32px;
  text-decoration: none;
  font-size: 1.2rem;
  margin: 6px 10px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.1s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  width: 160px;
}

.button:hover {
  background-color: #0077a8;
  transform: translateY(-1px);
}

.button2 {
  background-color: #f44336;
}

.button2:hover {
  background-color: #d9362c;
}

.units {
  font-size: 1.2rem;
  color: #555;
  margin-left: 4px;
}

.sensor-labels {
  font-size: 1.5rem;
  font-weight: bold;
  vertical-align: middle;
  padding-bottom: 15px;
}

Afficher le code brut

Il s’agit juste d’un fichier CSS de base pour définir la taille de la police, le style et la couleur des boutons et aligner la page. Nous n’expliquerons pas comment fonctionne CSS. Un bon endroit pour en savoir plus sur CSS est le site Web de W3Schools.

Serveur Web ESP32 avec des fichiers de Littlefs (arduino sketch)

Copiez le code suivant dans l’ide Arduino ou téléchargez tous les fichiers du projet ici. Ensuite, vous devez taper vos informations d’identification réseau (SSID et mot de passe) pour connecter l’ESP32 à votre réseau local.

/*
  Rui Santos & Sara Santos - Raspberryme.com
  Complete project details at https://Raspberryme.com/esp32-web-server-littlefs/ 
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/

// Import required libraries
#include 
#include 
#include 
#include 
#include 
#include 
#include 
#include 

Adafruit_BME280 bme; // I2C
//Adafruit_BME280 bme(BME_CS); // hardware SPI
//Adafruit_BME280 bme(BME_CS, BME_MOSI, BME_MISO, BME_SCK); // software SPI

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

// Set LED GPIO
const int ledPin = 2;
// Stores LED state
String ledState;

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

String getTemperature() {
  float temperature = bme.readTemperature();
  // Read temperature as Fahrenheit (isFahrenheit = true)
  //float t = dht.readTemperature(true);
  Serial.println(temperature);
  return String(temperature);
}
  
String getHumidity() {
  float humidity = bme.readHumidity();
  Serial.println(humidity);
  return String(humidity);
}

String getPressure() {
  float pressure = bme.readPressure()/ 100.0F;
  Serial.println(pressure);
  return String(pressure);
}

// Replaces placeholder with LED state value
String processor(const String& var){
  Serial.println(var);
  if(var == "STATE"){
    if(digitalRead(ledPin)){
      ledState = "ON";
    }
    else{
      ledState = "OFF";
    }
    Serial.println(ledState);
    return ledState;
  }
  else if (var == "TEMPERATURE"){
    return getTemperature();
  }
  else if (var == "HUMIDITY"){
    return getHumidity();
  }
  else if (var == "PRESSURE"){
    return getPressure();
  }
  return String();
}
 
void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  pinMode(ledPin, OUTPUT);

  // Initialize the sensor
  if (!bme.begin(0x76)) {
    Serial.println("Could not find a valid BME280 sensor, check wiring!");
    while (1);
  }

  // Initialize LittleFS
  if(!LittleFS.begin()){
    Serial.println("An Error has occurred while mounting LittleFS");
    return;
  }

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP32 Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/index.html", String(), false, processor);
  });
  
  // Route to load style.css file
  server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(LittleFS, "/style.css", "text/css");
  });

  // Route to set GPIO to HIGH
  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, HIGH);    
    request->send(LittleFS, "/index.html", String(), false, processor);
  });
  
  // Route to set GPIO to LOW
  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
    digitalWrite(ledPin, LOW);    
    request->send(LittleFS, "/index.html", String(), false, processor);
  });

  server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain", getTemperature().c_str());
  });
  
  server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain", getHumidity().c_str());
  });
  
  server.on("/pressure", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send(200, "text/plain", getPressure().c_str());
  });

  // Start server
  server.begin();
}
 
void loop(){
  
}

Afficher le code brut

Comment fonctionne le code

Continuez à lire pour savoir comment fonctionne le code ou passez à la section suivante.

Tout d’abord, incluez les bibliothèques nécessaires:

#include 
#include 
#include 
#include 
#include 
#include 
#include 
#include 

Vous devez taper vos informations d’identification réseau dans les variables suivantes:

const char* ssid = "REPLACE_WITH_YOUR_SSID"; 
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Créez une instance qui fait référence au capteur BME280 appelé BME:

Adafruit_BME280 bme; // I2C

Ensuite, créez une variable qui fait référence à GPIO 2 appelé LEDPIN, et une variable de chaîne pour maintenir l’état LED: LEDState.

const int ledPin = 2;
String ledState;

Créez un objet AsynWebServer appelé Server qui écoute sur le port 80.

AsyncWebServer server(80);

Obtenez des lectures de capteurs

Nous créons trois fonctions pour retourner les lectures du capteur sous forme de chaînes: les fonctions getTemperature (), GetHumidity () et getPressure ().

Voici à quoi ressemble la fonction getTemperature () (les autres fonctions sont similaires).

String getTemperature() {
  float temperature = bme.readTemperature();
  // Read temperature as Fahrenheit (isFahrenheit = true)
  //float temperature = 1.8 * bme.readTemperature() + 32;
  Serial.println(temperature);
  return String(temperature);
}

Si vous souhaitez afficher la température en degrés Fahrenheit, il vous suffit de décommenter la ligne correspondante dans la fonction getTemperature ():

float temperature = 1.8 * bme.readTemperature() + 32;

Pour en savoir plus sur l’interfaçage du capteur BME280 avec l’ESP32, vous pouvez lire le tutoriel suivant:

processeur()

La fonction processeur () attribue une valeur aux espaces réservés que nous avons créés sur le fichier HTML. Il accepte comme argument l’espace réservé et doit renvoyer une chaîne qui remplacera l’espace réservé. La fonction processeur () doit avoir la structure suivante:

String processor(const String& var){
  Serial.println(var);
  if(var == "STATE"){
    if(digitalRead(ledPin)){
      ledState = "ON";
    }
    else{
      ledState = "OFF";
    }
    Serial.print(ledState);
    return ledState;
  }
  else if (var == "TEMPERATURE"){
    return getTemperature();
  }
  else if (var == "HUMIDITY"){
    return getHumidity();
  }
  else if (var == "PRESSURE"){
    return getPressure();
  }
}

Cette fonction vérifie d’abord si l’espace réservé est l’état que nous avons créé sur le fichier HTML.

if(var == "STATE"){

Si c’est le cas, alors, selon l’état LED, nous définissons la variable LEDState sur ou désactivé.

if(digitalRead(ledPin)){
  ledState = "ON";
}
else{
  ledState = "OFF";
}

Enfin, nous renvoyons la variable LEDState. Cela remplace l’espace réservé d’état par la valeur de chaîne LEDState.

return ledState;

S’il trouve le% d’espace réservé en% de température, nous retournons la température en appelant la fonction getTemperature () créée précédemment.

else if (var == "TEMPERATURE"){
  return getTemperature();
}

La même chose se produit pour le% d’humidité% et% PRESSION PERSONNEURS en appelant les fonctions correspondantes:

else if (var == "TEMPERATURE"){
  return getTemperature();
}
else if (var == "HUMIDITY"){
  return getHumidity();
}
else if (var == "PRESSURE"){
  return getPressure();
}  

installation()

Dans la configuration (), commencez par initialiser le moniteur série et définir le GPIO en tant que sortie.

Serial.begin(115200);
pinMode(ledPin, OUTPUT);

Initialisez le capteur BME280:

if (!bme.begin(0x76)) {
  Serial.println("Could not find a valid BME280 sensor, check wiring!");
  while (1);
}

Initialiser Littlefs:

// Initialize LittleFS
if(!LittleFS.begin()){
  Serial.println("An Error has occurred while mounting LittleFS");
  return;
}

Connexion Wi-Fi

Connectez-vous au Wi-Fi et imprimez l’adresse IP ESP32:

WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Connecting to WiFi..");
}
Serial.println(WiFi.localIP());

Serveur Web asynchrone

La bibliothèque EspasyncWebServer nous permet de configurer les itinéraires où le serveur écoutera les demandes HTTP entrantes et exécutera les fonctions lorsqu’une demande est reçue sur cette route. Pour cela, utilisez la méthode ON sur l’objet serveur comme suit:

// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(LittleFS, "/index.html", String(), false, processor);
});

Lorsque le serveur reçoit une demande sur la root / URL, il enverra le fichier index.html au client. Le premier argument est l’endroit où il devrait rechercher les fichiers – dans ce cas, les fichiers sont enregistrés dans LittleFS.

Le deuxième argument est le chemin de fichier dans le Littlefs à servir lorsque la root / est demandée.

String () est le type MIME. Le passage d’une chaîne vide signifie qu’il détectera automatiquement le type de contenu.

Le faux argument désactive la mise en cache, et enfin, le dernier argument de la fonction Send () est le processeur. Il s’agit d’une fonction de rappel vous permet d’insérer dynamiquement des valeurs dans le HTML à l’aide des espaces réservés de modèle. Nous l’utilisons pour que nous puissions remplacer l’espace réservé par la valeur que nous voulons – dans ce cas, l’état LED, et également envoyer des valeurs mises à jour lorsque nous actualisons la page Web.

Étant donné que nous avons référencé le fichier CSS dans le fichier HTML, le client fera une demande pour le fichier CSS. Lorsque cela se produit, le fichier CSS est envoyé au client:

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

Vous devez également définir ce qui se passe sur les itinéraires / ON et / OFF. Lorsqu’une demande est effectuée sur ces itinéraires, la LED est activée ou désactivée, et l’ESP32 sert le fichier HTML.

server.on("https://www.raspberryme.com/on", HTTP_GET, [](AsyncWebServerRequest *request){
  digitalWrite(ledPin, HIGH);
  request->send(LittleFS, "/index.html", String(),false, processor);
});
server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
  digitalWrite(ledPin, LOW);
  request->send(LittleFS, "/index.html", String(),false, processor);
});

Dans le fichier HTML, nous avons écrit un code JavaScript qui demande respectivement la température, l’humidité et la pression sur les routes / température, / humidité, / pression toutes les 10 secondes. Nous devons donc également gérer ce qui se passe lorsque nous recevons une demande sur ces itinéraires.

Nous devons simplement envoyer les lectures de capteurs mis à jour. Les lectures de capteurs mises à jour sont renvoyées par les fonctions GetTemperature (), GetHumidity () et GetPressure () que nous avons créées précédemment.

Les lectures sont en texte brut et doivent être envoyées sous forme de char, nous utilisons donc la méthode c_str ().

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(200, "text/plain", getTemperature().c_str());
});
  
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(200, "text/plain", getHumidity().c_str());
});
  
server.on("/pressure", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send(200, "text/plain", getPressure().c_str());
});

En fin de compte, nous utilisons la méthode begin () sur l’objet serveur, afin que le serveur commence à écouter les clients entrants.

server.begin();

Parce qu’il s’agit d’un serveur Web asynchrone, vous pouvez définir toutes les demandes de la configuration (). Ensuite, vous pouvez ajouter un autre code à la boucle () pendant que le serveur écoute des clients entrants.

Téléchargez le code et les fichiers (Image du système de fichiers)

Maintenant, vous devez télécharger les fichiers et le code sur votre carte. Suivez les instructions suivantes

1) Enregistrez votre croquis Arduino.

2) Allez dans Sketch> Afficher le dossier Sketch. Le dossier où votre croquis est enregistré doit s’ouvrir.

3) À l’intérieur de ce dossier, créez un dossier appelé données.

4) Enregistrez les fichiers HTML et CSS dans ce dossier de données.

5) Assurez-vous d’avoir la bonne carte (outils> carton) et le port com sélectionné (outils> port).

6) Selon la carte ESP32 sélectionnée, vous devrez peut-être sélectionner la taille du flash souhaitée (certaines planches n’ont pas cette option, ne vous inquiétez pas). Dans l’Arduino IDE, dans les outils> Taille du flash, sélectionnez la taille du flash souhaitée (par exemple, 4 Mo Spiffs).

7) Ensuite, téléchargez les fichiers sur la carte ESP32. Presse [Ctrl] + [Shift] + [P] sous Windows ou [⌘] + [Shift] + [P] sur macOS pour ouvrir la palette de commande. Recherchez le téléchargement Littlefs vers la commande PICO / ESP8266 / ESP32 et cliquez dessus.

IMPORTANT: Assurez-vous que le moniteur en série est fermé. Sinon, le téléchargement échouera.

Après quelques secondes, vous devriez recevoir le message «Téléchargement terminé». Les fichiers ont été téléchargés avec succès sur le système de fichiers ESP32.

8) Maintenant, téléchargez le code sur ESP32 en cliquant sur le bouton Télécharger.

Démonstration

Après avoir téléchargé le code, ouvrez le moniteur série à un taux en bauds de 115200.

Appuyez sur le bouton «RST» à bord ESP32. Il devrait imprimer l’adresse IP ESP32.

Ouvrez un navigateur Web sur votre réseau local et saisissez l’adresse IP ESP32. Vous devriez avoir accès à la page Web. Vous pouvez contrôler la LED embarquée en cliquant sur les boutons ON et OFF, et vous pouvez vérifier les dernières lectures de capteurs. Les lectures sont mises à jour toutes les 10 secondes.

Vous pouvez accéder au serveur Web sur votre ordinateur ou votre smartphone tant qu’ils sont sur le même réseau que l’ESP32.

Félicitations! Vous avez réussi à construire un serveur Web avec des fichiers enregistrés sur le système de fichiers LittleFS.

Dépannage – cette page ne peut être trouvée

Si vous obtenez cette erreur, cela signifie probablement que vous n’avez pas téléchargé les fichiers sur le système de fichiers ESP32 Littlefs ou qu’ils sont au mauvais emplacement.

Revenez à cette section et assurez-vous de suivre toutes les étapes.

Emballage

Dans ce tutoriel, vous avez appris à créer un serveur Web ESP32 qui sert le HTML et le CSS à partir du système de fichiers LittleFS. Enregistrer ces fichiers sur le système de fichiers est plus pratique que les intégrer dans l’esquisse Arduino.

Ce que vous avez appris ici peut être appliqué à d’autres serveurs Web qui utilisent la bibliothèque EspasyncTCP. N’oubliez pas que vous devez créer un dossier appelé Data dans votre dossier Sketch. Ensuite, à l’intérieur de ce dossier, vous devez enregistrer les fichiers que vous souhaitez télécharger sur le système de fichiers. Ensuite, n’oubliez pas de télécharger l’image du système de fichiers à l’aide du plugin Littlefs Uploader.

Si vous êtes nouveau dans les serveurs ESP32 et Web, nous recommandons les livres électroniques suivants:

Voici d’autres tutoriels que vous aimerez peut-être:

Cette vidéo vous emmène dans l’histoire de Raspberry Pi :