Ce didacticiel montre comment créer un serveur Web qui sert des fichiers HTML et CSS stockés sur le système de fichiers ESP8266 NodeMCU (SPIFFS) à l’aide de l’IDE Arduino. Au lieu d’avoir à écrire le texte HTML et CSS dans l’esquisse Arduino, nous allons créer des fichiers HTML et CSS séparés.
Le serveur Web que nous allons construire montre comment contrôler les sorties ESP8266 et comment afficher les lectures des capteurs. Par exemple, nous allons contrôler une LED et afficher les lectures d’un capteur BME280.
Vous pouvez utiliser les concepts appris dans ce didacticiel pour contrôler n’importe quelle sortie ou afficher les relevés de capteur d’autres capteurs.
Lecture recommandée : Serveur Web ESP32 utilisant SPIFFS
Aperçu du projet
Avant de passer directement au projet, il est important de décrire ce que fera notre serveur Web, afin qu’il soit plus facile à comprendre.
- Le serveur Web contrôle une LED connectée à l’ESP8266 GPIO 2. Il s’agit de la LED intégrée à l’ESP8266. Vous pouvez contrôler n’importe quel autre GPIO ;
- La page du serveur Web affiche deux boutons : ON et OFF – pour activer et désactiver GPIO 2 ;
- La page du serveur Web affiche également l’état GPIO actuel ;
- Vous utiliserez également un capteur BME280 pour afficher les lectures du capteur (température, humidité et pression).
La figure suivante montre un schéma simplifié pour montrer comment tout fonctionne.
Conditions préalables
Avant de poursuivre ce projet, assurez-vous de vérifier toutes les conditions préalables suivantes.
1. Installez la carte ESP8266 dans l’IDE Arduino
Nous allons programmer l’ESP8266 à l’aide de l’IDE Arduino, vous devez donc avoir installé le module complémentaire ESP8266. Suivez le tutoriel suivant pour l’installer :
2. Plugin de téléchargement de système de fichiers
Pour télécharger des fichiers sur le système de fichiers Flash ESP8266 SPI (SPIFFS), nous utiliserons le plugin Filesystem Uploader. Installez le plugin dans votre IDE Arduino :
3. Installation des bibliothèques
L’un des moyens les plus simples de créer un serveur Web à l’aide de fichiers du système de fichiers consiste à utiliser le ESPAsyncWebServer bibliothèque.
Installation de la bibliothèque ESPAsyncWebServer
Cette bibliothèque n’est pas disponible au téléchargement via le gestionnaire de bibliothèques Arduino IDE. Vous devez donc suivre les étapes suivantes pour installer la bibliothèque :
- Cliquez ici pour télécharger la librairie ESPAsyncWebServer. Vous devriez avoir un dossier .zip dans votre dossier Téléchargements
- Décompressez le dossier .zip et vous devriez obtenir le dossier ESPAsyncWebServer-master
- Renommez votre dossier de
ESPAsyncWebServer-maîtrevers ESPAsyncWebServer - Déplacez le dossier ESPAsyncWebServer vers le dossier des bibliothèques d’installation de votre IDE Arduino
Vous pouvez également accéder à Esquisse > Inclure la bibliothèque > Bibliothèque .zip et sélectionner la bibliothèque précédemment téléchargée.
Installation de l’ESPAsyncTCP
La bibliothèque ESPAsyncWebServer a également besoin du Bibliothèque ESPAsyncTCP pour fonctionner correctement. Suivez les étapes suivantes pour installer la bibliothèque ESPAsyncTCP :
- Cliquez ici pour télécharger la librairie ESPAsyncTCP. Vous devriez avoir un dossier .zip dans votre dossier Téléchargements
- Décompressez le dossier .zip et vous devriez obtenir le dossier ESPAsyncTCP-master
- Renommez votre dossier de
ESPAsyncTCP-maîtrevers ESPAsyncTCP - Déplacez le dossier ESPAsyncTCP vers le dossier des bibliothèques d’installation de votre IDE Arduino
- Enfin, rouvrez votre IDE Arduino
Vous pouvez également accéder à Esquisse > Inclure la bibliothèque > Bibliothèque .zip et sélectionner la bibliothèque précédemment téléchargée.
Installation des bibliothèques BME280
Dans ce tutoriel, nous allons afficher les lectures d’un capteur BME280 (Guide avec ESP8266). Vous devez installer les bibliothèques suivantes :
Vous pouvez installer ces bibliothèques via le gestionnaire de bibliothèques Arduino IDE. Accédez à Esquisse > Inclure les bibliothèques > Gérer les bibliothèques. Ensuite, recherchez le nom des bibliothèques pour les installer.
Pièces requises
Pour poursuivre ce projet, vous avez besoin des pièces suivantes :
Vous pouvez utiliser les liens précédents ou accéder directement à MakerAdvisor.com/tools pour trouver toutes les pièces pour vos projets au meilleur prix !
Diagramme schématique
Connectez tous les composants en suivant le diagramme schématique suivant.
| BME280 | ESP8266 |
| Vin | 3.3V |
| Terre | Terre |
| SCL | GPIO 5 |
| SDA | GPIO 4 |
Organisation de vos fichiers
Pour construire le serveur Web, vous avez besoin de trois fichiers différents. Le sketch Arduino, le fichier HTML et le fichier CSS. Les fichiers HTML et CSS doivent être enregistrés dans un dossier appelé data dans le dossier d’esquisse Arduino, comme indiqué ci-dessous :
Création du fichier HTML
Créez un fichier index.html avec le contenu suivant ou télécharger tous les fichiers du projet ici:
<!DOCTYPE html>
<!--
Rui Santos
Complete project details at https://Raspberryme.com
-->
<html>
<head>
<title>ESP8266 Web Server</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<link rel="stylesheet" type="text/css" href="https://www.raspberryme.com/esp8266-web-server-spiffs-nodemcu/style.css">
</head>
<body>
<h1>ESP8266 Web Server</h1>
<p>GPIO state<strong> %STATE%</strong></p>
<p>
<a href="https://www.raspberryme.com/on"><button class="button">ON</button></a>
<a href="https://www.raspberryme.com/off"><button class="button button2">OFF</button></a>
</p>
<p>
<span class="sensor-labels">Temperature</span>
<span id="temperature">%TEMPERATURE%</span>
<sup class="units">°C</sup>
</p>
<p>
<span class="sensor-labels">Humidity</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
</p>
<p>
<span class="sensor-labels">Pressure</span>
<span id="pressure">%PRESSURE%</span>
<sup class="units">hPa</sup>
</p>
</body>
<script>
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("temperature").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 10000 ) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("humidity").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/humidity", true);
xhttp.send();
}, 10000 ) ;
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("pressure").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/pressure", true);
xhttp.send();
}, 10000 ) ;
</script>
</html>
Parce que nous utilisons CSS et HTML dans des fichiers différents, nous devons référencer le fichier CSS sur le texte HTML.
<link rel="stylesheet" type="text/css" href="https://www.raspberryme.com/esp8266-web-server-spiffs-nodemcu/style.css">La balise indique au fichier HTML que vous utilisez une feuille de style externe pour formater l’apparence de la page. L’attribut rel précise la nature du fichier externe, en l’occurrence qu’il s’agit d’une feuille de style — le fichier CSS — qui sera utilisée pour modifier l’apparence de la page.
L’attribut type est défini sur « text/css » pour indiquer que vous utilisez un fichier CSS pour les styles. L’attribut href indique l’emplacement du fichier ; puisque les fichiers CSS et HTML seront dans le même dossier, il vous suffit de référencer le nom du fichier : style.css.
Dans la ligne suivante, nous écrivons le premier titre de notre page Web. Dans ce cas, nous avons « ESP8266 Web Server ». Vous pouvez remplacer le titre par n’importe quel texte :
<h1>ESP8266 Web Server</h1>Ensuite, ajoutez un paragraphe avec le texte « État GPIO : » suivi de l’état GPIO. Étant donné que l’état du GPIO change en fonction de l’état du GPIO, nous pouvons ajouter un espace réservé qui sera ensuite remplacé par la valeur que nous avons définie sur l’esquisse Arduino.
Pour ajouter un espace réservé, utilisez les signes %. Pour créer un espace réservé pour l’état, vous pouvez utiliser %STATE%, par exemple.
<p>GPIO state<strong> %STATE%</strong></p>Vous attribuez une valeur à l’espace réservé STATE dans l’esquisse Arduino.
Créez ensuite un bouton ON et un bouton OFF. Lorsque vous cliquez sur le bouton on, nous redirigeons la page Web vers root suivi de /on url. Lorsque vous cliquez sur le bouton off, vous êtes redirigé vers l’url /off.
<a href="https://www.raspberryme.com/on"><button class="button">ON</button></a>
<a href="https://www.raspberryme.com/off"><button class="button button2">OFF</button></a>Enfin, créez trois paragraphes pour afficher la température, l’humidité et la pression.
<p>
<span class="sensor-labels">Temperature</span>
<span id="temperature">%TEMPERATURE%</span>
<sup class="units">°C</sup>
</p>
<p>
<span class="sensor-labels">Pressure</span>
<span id="pressure">%PRESSURE%</span>
<sup class="units">hPa</sup>
</p>
<p>
<span class="sensor-labels">Humidity</span>
<span id="humidity">%HUMIDITY%</span>
<sup class="units">%</sup>
</p>Nous utilisons les espaces réservés %TEMPERATURE%, %HUMIDITY% et %PRESSURE%. Celles-ci seront ensuite remplacées par les lectures de température réelles dans l’esquisse Arduino.
Mises à jour automatiques
Nous ajoutons également un peu de JavaScript dans notre fichier HTML qui est responsable de la mise à jour des lectures de température sans avoir besoin de rafraîchir la page Web.
L’extrait de code suivant est responsable de la température.
setInterval(function ( ) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("temperature").innerHTML = this.responseText;
}
};
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 10000 ) ;Pour mettre à jour la température, nous avons une fonction setInterval() qui s’exécute toutes les 10 secondes.
Fondamentalement, il fait une demande dans l’URL /temperature pour obtenir la dernière lecture de température.
xhttp.open("GET", "/temperature", true);
xhttp.send();
}, 10000 ) ;Lorsqu’il reçoit cette valeur, il met à jour l’élément HTML avec l’identifiant de température.
if (this.readyState == 4 && this.status == 200) {
document.getElementById("temperature").innerHTML = this.responseText;
}En résumé, cette section précédente est responsable de la mise à jour de la température de manière asynchrone. Le même processus est répété pour les relevés d’humidité et de pression.
Création du fichier CSS
Créez le fichier style.css avec le contenu suivant ou télécharger tous les fichiers du projet ici:
/***
Rui Santos
Complete project details at https://Raspberryme.com
***/
html {
font-family: Arial;
display: inline-block;
margin: 0px auto;
text-align: center;
}
h1 {
color: #0F3376;
padding: 2vh;
}
p {
font-size: 1.5rem;
}
.button {
display: inline-block;
background-color: #008CBA;
border: none;
border-radius: 4px;
color: white;
padding: 16px 40px;
text-decoration: none;
font-size: 30px;
margin: 2px;
cursor: pointer;
}
.button2 {
background-color: #f44336;
}
.units {
font-size: 1.2rem;
}
.sensor-labels {
font-size: 1.5rem;
vertical-align:middle;
padding-bottom: 15px;
}
Ceci est juste 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 le fonctionnement de CSS. Un bon endroit pour en savoir plus sur CSS est le Site Web de W3Schools.
Croquis du serveur Web asynchrone ESP8266
Copiez le code suivant dans l’IDE Arduino ou télécharger tous les fichiers du projet ici. Ensuite, vous devez saisir vos identifiants réseau (SSID et mot de passe) pour connecter l’ESP8266 à votre réseau local.
/*
Rui Santos
Complete project details at https://Raspberryme.com
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 <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>
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 temperature = 1.8 * bme.readTemperature() + 32;
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.print(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 SPIFFS
if(!SPIFFS.begin()){
Serial.println("An Error has occurred while mounting SPIFFS");
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(SPIFFS, "/index.html", String(), false, processor);
});
// Route to load style.css file
server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/style.css", "text/css");
});
// Route to set GPIO to HIGH
server.on("https://www.raspberryme.com/on", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledPin, HIGH);
request->send(SPIFFS, "/index.html", String(), false, processor);
});
// Route to set GPIO to LOW
server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledPin, LOW);
request->send(SPIFFS, "/index.html", String(), false, processor);
});
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", getTemperature().c_str());
});
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", getHumidity().c_str());
});
server.on("/pressure", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", getPressure().c_str());
});
// Start server
server.begin();
}
void loop(){
}
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 <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>
#include <Wire.h>
#include <Adafruit_Sensor.h>
#include <Adafruit_BME280.h>Vous devez saisir vos identifiants réseau dans les variables suivantes :
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";Créez une instance faisant référence au capteur BME280 appelé bme :
Adafruit_BME280 bme; // I2CEnsuite, créez une variable qui fait référence au GPIO 2 appelée ledPin, et une variable String pour contenir l’état de la led : ledState.
const int ledPin = 2;
String ledState;Créez un objet AsyncWebServer appelé serveur qui écoute sur le port 80.
AsyncWebServer server(80);Obtenir des lectures de capteur
Nous créons trois fonctions pour renvoyer les lectures des capteurs 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’ESP8266, vous pouvez lire le tutoriel suivant :
processeur()
La fonction processor() attribue une valeur aux espaces réservés que nous avons créés dans 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 processor() 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 le STATE que nous avons créé sur le fichier HTML.
if(var == "STATE"){Si c’est le cas, alors, en fonction de l’état de la LED, nous définissons la variable ledState sur ON ou OFF.
if(digitalRead(ledPin)){
ledState = "ON";
}
else{
ledState = "OFF";
}Enfin, nous renvoyons la variable ledState. Cela remplace l’espace réservé STATE par la valeur de chaîne ledState.
return ledState;S’il trouve l’espace réservé %TEMPERATURE%, nous renvoyons la température en appelant la fonction getTemperature() créée précédemment.
else if (var == "TEMPERATURE"){
return getTemperature();
}Il en va de même pour les espaces réservés %HUMIDITY% et %PRESSURE% 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 le setup (), commencez par initialiser le moniteur série et définissez le GPIO comme 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 SPIFF :
if(!SPIFFS.begin()){
Serial.println("An Error has occurred while mounting SPIFFS");
return;
}Connexion Wifi
Connectez-vous au Wi-Fi et imprimez l’adresse ESP8266 :
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 routes où le serveur écoutera les requêtes HTTP entrantes et d’exécuter des fonctions lorsqu’une requête est reçue sur cette route. Pour cela, utilisez la méthode on sur l’objet serveur comme suit :
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(SPIFFS, "/index.html", String(), false, processor);
});Lorsque le serveur reçoit une requête sur l’URL root « / », il enverra le fichier index.html au client. Le dernier argument de la fonction send () est le processeur, afin que nous puissions remplacer l’espace réservé par la valeur que nous voulons – dans ce cas, le ledState.
Parce que nous avons référencé le fichier CSS sur 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(SPIFFS, "/style.css","text/css");
});Vous devez également définir ce qui se passe sur les routes /on et /off. Lorsqu’une demande est faite sur ces routes, la LED est allumée ou éteinte, et l’ESP32 sert le fichier HTML.
server.on("https://www.raspberryme.com/on", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledPin, HIGH);
request->send(SPIFFS, "/index.html", String(),false, processor);
});
server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){
digitalWrite(ledPin, LOW);
request->send(SPIFFS, "/index.html", String(),false, processor);
});Dans le fichier HTML, nous avons écrit un code JavaScript qui demande la température, l’humidité et la pression sur les routes /temperature, /humidity, /pressure, respectivement, toutes les 10 secondes. Nous devons donc également gérer ce qui se passe lorsque nous recevons une demande sur ces routes.
Nous devons simplement envoyer les relevés de capteur mis à jour. Les lectures de capteur 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 caractères, nous utilisons donc la méthode c_str().
server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", getTemperature().c_str());
});
server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", getHumidity().c_str());
});
server.on("/pressure", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(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();Comme il s’agit d’un serveur Web asynchrone, vous pouvez définir toutes les requêtes dans setup(). Ensuite, vous pouvez ajouter un autre code à la boucle () pendant que le serveur écoute les clients entrants.
Téléchargement de code et de fichiers
Enregistrez l’esquisse Arduino sous ESP8266_SPIFFS_Web_Server ou télécharger tous les fichiers du projet ici.
- Accédez à Sketch > Afficher le dossier Sketch et créez un dossier appelé data. Enregistrez les fichiers HTML et CSS dans ce dossier ;
- Dans Outils > Carte, sélectionnez la carte ESP8266 que vous utilisez ;
- Ensuite, allez dans Outils > Taille du flash et sélectionnez 4M (1M SPIFFS).
Enfin, téléchargez les fichiers sur votre tableau. Accédez à Outils> ESP8266 Data Sketch Upload et attendez que les fichiers soient téléchargés.
Ensuite, appuyez sur le bouton de téléchargement de l’IDE Arduino pour télécharger le code sur l’ESP8266.
Lorsque tout est téléchargé avec succès, ouvrez le moniteur série à un débit en bauds de 115200. Appuyez sur le bouton RST embarqué ESP8266, et il devrait imprimer l’adresse IP ESP8266.
Manifestation
Ouvrez un navigateur et tapez votre adresse IP ESP8266. La page Web suivante devrait se charger.
Appuyez sur les boutons ON et OFF pour contrôler la LED embarquée ESP8266. Vous pouvez également visualiser les dernières lectures des capteurs. Les lectures des capteurs sont mises à jour automatiquement sans qu’il soit nécessaire d’actualiser la page Web.
Conclusion
L’utilisation du système de fichiers Flash ESP8266 SPI (SPIFFS) est particulièrement utile pour stocker des fichiers HTML et CSS à servir à un client – au lieu d’avoir à écrire tout le code dans l’esquisse Arduino.
Nous avons d’autres projets connexes qui pourraient vous plaire :
En savoir plus sur l’ESP8266 :
Merci d’avoir lu.
Apprenez l’histoire de Raspberry Pi à travers cette vidéo :
-
AZDelivery ESP32 NodeMCU Module WLAN WiFi Dev Kit C Development Board avec CP2102 (successeur de ESP8266) Compatible avec Arduino incluant Un E-Book! -
AZDelivery 3 x D1 Mini NodeMCU Lua avec ESP8266-12F Module WLAN CH340G Compatible avec Arduino incluant Un E-Book!