Apprenez à créer un serveur Web avec le NodeMCU ESP8266 pour afficher les lectures des capteurs dans les jauges. À titre d’exemple, nous afficherons la température et l’humidité d’un capteur BME280 dans deux jauges différentes : linéaire et radiale. Vous pouvez facilement modifier le projet pour tracer d’autres données. Pour construire les jauges, nous allons utiliser la bibliothèque JavaScript canvas-gauges.
Nous avons un tutoriel similaire pour la carte ESP32 : Web Server – Display Sensor Readings in Gauges
Aperçu du projet
Ce projet créera un serveur Web avec l’ESP8266 qui affiche les relevés de température et d’humidité d’un capteur BME280. Nous allons créer une jauge linéaire qui ressemble à un thermomètre pour afficher la température et une jauge radiale pour afficher l’humidité.
Événements envoyés par le serveur
Les lectures sont mises à jour automatiquement sur la page Web à l’aide des événements envoyés par le serveur (SSE).
Pour en savoir plus sur SSE, vous pouvez lire :
Fichiers enregistrés sur le système de fichiers
Pour que notre projet reste mieux organisé et plus facile à comprendre, nous enregistrerons les fichiers HTML, CSS et JavaScript pour créer la page Web sur le système de fichiers de la carte (LittleFS).
Conditions préalables
Assurez-vous de vérifier toutes les conditions préalables dans cette section avant de poursuivre le projet.
1. Installez la carte ESP8266 dans l’IDE Arduino
Nous allons programmer l’ESP8266 à l’aide de l’IDE Arduino. Donc, vous devez avoir installé le module complémentaire ESP8266. Suivez le tutoriel suivant si vous ne l’avez pas déjà fait :
Si vous souhaitez utiliser VS Code avec l’extension PlatformIO, suivez plutôt le tutoriel suivant pour apprendre à programmer l’ESP8266 :
2. Plugin de téléchargement de système de fichiers
Pour télécharger les fichiers HTML, CSS et JavaScript sur le système de fichiers ESP8266 (LittleFS), nous utiliserons un plugin pour Arduino IDE : LittleFS Filesystem Uploader. Suivez le tutoriel suivant pour installer le plugin filesystem uploader :
Si vous utilisez VS Code avec l’extension PlatformIO, lisez le didacticiel suivant pour savoir comment télécharger des fichiers sur le système de fichiers :
3. Installation des bibliothèques
Pour compiler ce projet, vous devez installer les bibliothèques suivantes :
Vous pouvez installer les trois premières bibliothèques à l’aide du gestionnaire de bibliothèque Arduino. Accédez à Sketch > Inclure la bibliothèque > Gérer les bibliothèques et recherchez les noms des bibliothèques.
Les bibliothèques ESPAsyncWebServer et ESPAsynTCP ne peuvent pas être installées via le gestionnaire de bibliothèque Arduino, vous devez donc copier les fichiers de bibliothèque dans le dossier Bibliothèques d’installation Arduino. Vous pouvez également télécharger les dossiers .zip des bibliothèques, puis, dans votre IDE Arduino, accédez à Sketch> Inclure la bibliothèque> Ajouter une bibliothèque .zip et sélectionnez les bibliothèques que vous venez de télécharger.
Installation de bibliothèques (VS Code + PlatformIO)
Si vous programmez l’ESP8266 à l’aide de PlatformIO, vous devez ajouter les lignes suivantes au fichier platformio.ini pour inclure les bibliothèques, modifier la vitesse de Serial Monitor à 115200 et utiliser LittleFS pour le système de fichiers :
monitor_speed = 115200
lib_deps = ESP Async WebServer
arduino-libraries/Arduino_JSON @ 0.1.0
adafruit/Adafruit BME280 Library @ ^2.1.0
adafruit/Adafruit Unified Sensor @ ^1.1.4
board_build.filesystem = littlefsPièces requises
Pour suivre ce tutoriel vous avez besoin des pièces suivantes :
Vous pouvez utiliser n’importe quel autre capteur ou afficher toute autre valeur utile pour votre projet. Si vous n’avez pas le capteur, vous pouvez également expérimenter avec des valeurs aléatoires pour comprendre le fonctionnement du projet.
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
Nous enverrons des lectures de température et d’humidité à partir d’un capteur BME280. Nous allons utiliser la communication I2C avec le module de capteur BME280. Pour cela, câblez le capteur aux broches ESP8266 SCL (GPIO 5) et SDA (GPIO 4) par défaut, comme indiqué dans le schéma suivant.
Lecture recommandée : Référence de brochage ESP8266 : Quelles broches GPIO devez-vous utiliser ?
Organisation de vos fichiers
Pour garder le projet organisé et le rendre plus facile à comprendre, nous allons créer quatre fichiers pour construire le serveur Web :
- Esquisse Arduino qui gère le serveur Web ;
- index.html : pour définir le contenu de la page Web ;
- sytle.css : pour styliser la page Web ;
- script.js : pour programmer le comportement de la page Web : gérer les réponses du serveur Web, les événements, créer les jauges, etc.
Vous devez enregistrer les fichiers HTML, CSS et JavaScript dans un dossier appelé data dans le dossier d’esquisse Arduino, comme indiqué dans le diagramme précédent. Nous allons télécharger ces fichiers sur le système de fichiers ESP8266 (LittleFS).
Vous pouvez télécharger tous les fichiers du projet :
Fichier HTML
Copiez ce qui suit dans le fichier index.html.
<!DOCTYPE html>
<html>
<head>
<title>ESP IOT DASHBOARD</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="https://www.raspberryme.com/esp8266-web-server-gauges/favicon.png">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/all/gauge.min.js"></script>
</head>
<body>
<div class="topnav">
<h1>ESP WEB SERVER GAUGES</h1>
</div>
<div class="content">
<div class="card-grid">
<div class="card">
<p class="card-title">Temperature</p>
<canvas id="gauge-temperature"></canvas>
</div>
<div class="card">
<p class="card-title">Humidity</p>
<canvas id="gauge-humidity"></canvas>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Le fichier HTML pour ce projet est très simple. Il comprend le Bibliothèque de jauges de canevas JavaScript dans l’en-tête du fichier HTML :
<script src="https://cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/all/gauge.min.js"></script>Il y a une balise
<canvas id="gauge-temperature"></canvas>Il y a aussi une autre balise
<canvas id="gauge-humidity"></canvas>Fichier CSS
Copiez les styles suivants dans votre fichier style.css. Il stylise la page Web avec des couleurs et des styles simples.
html {
font-family: Arial, Helvetica, sans-serif;
display: inline-block;
text-align: center;
}
h1 {
font-size: 1.8rem;
color: white;
}
p {
font-size: 1.4rem;
}
.topnav {
overflow: hidden;
background-color: #0A1128;
}
body {
margin: 0;
}
.content {
padding: 5%;
}
.card-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.card {
background-color: white;
box-shadow: 2px 2px 12px 1px rgba(140,140,140,.5);
}
.card-title {
font-size: 1.2rem;
font-weight: bold;
color: #034078
}Fichier JavaScript (création des jauges)
Copiez ce qui suit dans le fichier script.js.
// Get current sensor readings when the page loads
window.addEventListener('load', getReadings);
// Create Temperature Gauge
var gaugeTemp = new LinearGauge({
renderTo: 'gauge-temperature',
width: 120,
height: 400,
units: "Temperature C",
minValue: 0,
startAngle: 90,
ticksAngle: 180,
maxValue: 40,
colorValueBoxRect: "#049faa",
colorValueBoxRectEnd: "#049faa",
colorValueBoxBackground: "#f1fbfc",
valueDec: 2,
valueInt: 2,
majorTicks: [
"0",
"5",
"10",
"15",
"20",
"25",
"30",
"35",
"40"
],
minorTicks: 4,
strokeTicks: true,
highlights: [
{
"from": 30,
"to": 40,
"color": "rgba(200, 50, 50, .75)"
}
],
colorPlate: "#fff",
colorBarProgress: "#CC2936",
colorBarProgressEnd: "#049faa",
borderShadowWidth: 0,
borders: false,
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "linear",
barWidth: 10,
}).draw();
// Create Humidity Gauge
var gaugeHum = new RadialGauge({
renderTo: 'gauge-humidity',
width: 300,
height: 300,
units: "Humidity (%)",
minValue: 0,
maxValue: 100,
colorValueBoxRect: "#049faa",
colorValueBoxRectEnd: "#049faa",
colorValueBoxBackground: "#f1fbfc",
valueInt: 2,
majorTicks: [
"0",
"20",
"40",
"60",
"80",
"100"
],
minorTicks: 4,
strokeTicks: true,
highlights: [
{
"from": 80,
"to": 100,
"color": "#03C0C1"
}
],
colorPlate: "#fff",
borderShadowWidth: 0,
borders: false,
needleType: "line",
colorNeedle: "#007F80",
colorNeedleEnd: "#007F80",
needleWidth: 2,
needleCircleSize: 3,
colorNeedleCircleOuter: "#007F80",
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "linear"
}).draw();
// Function to get current readings on the webpage when it loads for the first time
function getReadings(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
console.log(myObj);
var temp = myObj.temperature;
var hum = myObj.humidity;
gaugeTemp.value = temp;
gaugeHum.value = hum;
}
};
xhr.open("GET", "/readings", true);
xhr.send();
}
if (!!window.EventSource) {
var source = new EventSource('/events');
source.addEventListener('open', function(e) {
console.log("Events Connected");
}, false);
source.addEventListener('error', function(e) {
if (e.target.readyState != EventSource.OPEN) {
console.log("Events Disconnected");
}
}, false);
source.addEventListener('message', function(e) {
console.log("message", e.data);
}, false);
source.addEventListener('new_readings', function(e) {
console.log("new_readings", e.data);
var myObj = JSON.parse(e.data);
console.log(myObj);
gaugeTemp.value = myObj.temperature;
gaugeHum.value = myObj.humidity;
}, false);
}Voici un résumé de ce que fait ce code :
- initialiser le protocole de source d’événement ;
- ajouter un écouteur d’événement pour l’événement new_readings ;
- créer les jauges ;
- obtenir les dernières lectures de capteur à partir de l’événement new_readings et les afficher dans les jauges correspondantes ;
- faire une requête HTTP GET pour les lectures actuelles du capteur lorsque vous accédez à la page Web pour la première fois.
Obtenir des lectures
Lorsque vous accédez à la page Web pour la première fois, nous demandons au serveur d’obtenir les lectures actuelles des capteurs. Sinon, nous devrons attendre l’arrivée de nouvelles lectures de capteurs (via les événements envoyés par le serveur), ce qui peut prendre un certain temps en fonction de l’intervalle que vous avez défini sur le serveur.
Ajoutez un écouteur d’événement qui appelle la fonction getReadings lors du chargement de la page Web.
// Get current sensor readings when the page loads
window.addEventListener('load', getReadings);L’objet window représente une fenêtre ouverte dans un navigateur. La méthode addEventListener() définit une fonction à appeler lorsqu’un certain événement se produit. Dans ce cas, nous appellerons la fonction getReadings lors du chargement de la page (« load ») pour obtenir les lectures actuelles du capteur.
Examinons maintenant la fonction getReadings. Créez un nouvel objet XMLHttpRequest. Ensuite, envoyez une requête GET au serveur sur l’URL /readings à l’aide des méthodes open() et send().
function getReadings() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "/readings", true);
xhr.send();
}Lorsque nous envoyons cette demande, l’ESP enverra une réponse avec les informations requises. Nous devons donc gérer ce qui se passe lorsque nous recevons la réponse. Nous utiliserons la propriété onreadystatechange qui définit une fonction à exécuter lorsque la propriété readyState change. La propriété readyState contient le statut de XMLHttpRequest. La réponse de la demande est prête lorsque readyState est 4 et le statut est 200.
- readyState = 4 signifie que la demande est terminée et que la réponse est prête ;
- statut = 200 signifie « OK »
Ainsi, la requête devrait ressembler à ceci :
function getStates(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
… DO WHATEVER YOU WANT WITH THE RESPONSE …
}
};
xhr.open("GET", "/states", true);
xhr.send();
}La réponse envoyée par l’ESP est le texte suivant au format JSON (ce ne sont que des valeurs arbitraires).
{
"temperature" : "25.02",
"humidity" : "64.01",
}Nous devons convertir la chaîne JSON en un objet JSON à l’aide de la méthode parse(). Le résultat est enregistré dans la variable myObj.
var myObj = JSON.parse(this.responseText);La variable myObj est un objet JSON qui contient les relevés de température et d’humidité. Nous voulons mettre à jour les valeurs des jauges avec les lectures correspondantes.
La mise à jour de la valeur d’une jauge est simple. Par exemple, notre jauge de température s’appelle gaugeTemp (comme nous le verrons plus loin), pour mettre à jour une valeur, nous pouvons simplement appeler : gaugeTemp.value = NEW_VALUE. Dans notre cas, la nouvelle valeur est la lecture de température enregistrée sur l’objet myObj JSON.
gaugeTemp.value = myObj.temperature;Il en est de même pour l’humidité (notre jauge d’humidité s’appelle gaugeHum).
gaugeHum.value = myObj.humidity;Voici la fonction complète getReadings().
function getReadings(){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
console.log(myObj);
var temp = myObj.temperature;
var hum = myObj.humidity;
gaugeTemp.value = temp;
gaugeHum.value = hum;
}
};
xhr.open("GET", "/readings", true);
xhr.send();
}Création des jauges
La bibliothèque canvas-charts vous permet de construire des jauges linéaires et radiales pour afficher vos lectures. Il fournit plusieurs exemples, et il est très simple à utiliser. Nous vous recommandons de consulter la documentation et d’explorer toutes les fonctionnalités des jauges :
Indicateur de température
Les lignes suivantes créent la jauge pour afficher la température.
// Create Temperature Gauge
var gaugeTemp = new LinearGauge({
renderTo: 'gauge-temperature',
width: 120,
height: 400,
units: "Temperature C",
minValue: 0,
startAngle: 90,
ticksAngle: 180,
maxValue: 40,
colorValueBoxRect: "#049faa",
colorValueBoxRectEnd: "#049faa",
colorValueBoxBackground: "#f1fbfc",
valueDec: 2,
valueInt: 2,
majorTicks: [
"0",
"5",
"10",
"15",
"20",
"25",
"30",
"35",
"40"
],
minorTicks: 4,
strokeTicks: true,
highlights: [
{
"from": 30,
"to": 40,
"color": "rgba(200, 50, 50, .75)"
}
],
colorPlate: "#fff",
colorBarProgress: "#CC2936",
colorBarProgressEnd: "#049faa",
borderShadowWidth: 0,
borders: false,
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "linear",
barWidth: 10,
}).draw();Pour créer une nouvelle jauge linéaire, utilisez la méthode new LinearGauge() et passez en argument les propriétés de la jauge.
var gaugeTemp = new LinearGauge({Dans la ligne suivante, définissez où vous voulez placer le graphique (il doit s’agir d’un élément
renderTo: 'gauge-temperature',Ensuite, nous définissons d’autres propriétés pour personnaliser notre jauge. Les noms sont explicites, mais nous vous recommandons de jeter un œil à toutes les configurations possibles et changer la jauge pour répondre à vos besoins.
Au final, vous devez appliquer la méthode draw() pour afficher réellement la jauge sur le canevas.
}).draw();Attention particulière que si vous avez besoin de changer la plage de jauge, vous devez changer les propriétés minValue et maxValue :
minValue: 0,maxValue: 40,Vous devez également ajuster les valeurs majorTicks pour les valeurs affichées sur l’axe.
majorTicks: [
"0",
"5",
"10",
"15",
"20",
"25",
"30",
"35",
"40"
],Jauge d’humidité
La création de la jauge d’humidité est similaire, mais nous utilisons la nouvelle fonction RadialGauge() à la place et elle est rendue à la
// Create Humidity Gauge
var gaugeHum = new RadialGauge({
renderTo: 'gauge-humidity',
width: 300,
height: 300,
units: "Humidity (%)",
minValue: 0,
maxValue: 100,
colorValueBoxRect: "#049faa",
colorValueBoxRectEnd: "#049faa",
colorValueBoxBackground: "#f1fbfc",
valueInt: 2,
majorTicks: [
"0",
"20",
"40",
"60",
"80",
"100"
],
minorTicks: 4,
strokeTicks: true,
highlights: [
{
"from": 80,
"to": 100,
"color": "#03C0C1"
}
],
colorPlate: "#fff",
borderShadowWidth: 0,
borders: false,
needleType: "line",
colorNeedle: "#007F80",
colorNeedleEnd: "#007F80",
needleWidth: 2,
needleCircleSize: 3,
colorNeedleCircleOuter: "#007F80",
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "linear"
}).draw();Gérer les événements
Mettre à jour les lectures sur la jauge lorsque le client reçoit les lectures sur l’événement new_readings
Créez un nouvel objet EventSource et spécifiez l’URL de la page qui envoie les mises à jour. Dans notre cas, il s’agit de /events.
if (!!window.EventSource) {
var source = new EventSource('/events');Une fois que vous avez instancié une source d’événement, vous pouvez commencer à écouter les messages du serveur avec addEventListener().
Ce sont les écouteurs d’événements par défaut, comme indiqué ici dans AsyncWebServer Documentation.
source.addEventListener('open', function(e) {
console.log("Events Connected");
}, false);
source.addEventListener('error', function(e) {
if (e.target.readyState != EventSource.OPEN) {
console.log("Events Disconnected");
}
}, false);
source.addEventListener('message', function(e) {
console.log("message", e.data);
}, false);Ensuite, ajoutez l’écouteur d’événement pour new_readings.
source.addEventListener('new_readings', function(e) {Lorsque de nouvelles lectures sont disponibles, l’ESP8266 envoie un événement (new_readings) au client. Les lignes suivantes gèrent ce qui se passe lorsque le navigateur reçoit cet événement.
source.addEventListener('new_readings', function(e) {
console.log("new_readings", e.data);
var myObj = JSON.parse(e.data);
console.log(myObj);
gaugeTemp.value = myObj.temperature;
gaugeHum.value = myObj.humidity;
}, false);Fondamentalement, imprimez les nouvelles lectures sur la console du navigateur, convertissez les données en un objet JSON et affichez les lectures sur les jauges correspondantes.
Esquisse Arduino
Copiez le code suivant dans votre IDE Arduino ou dans le fichier main.cpp si vous utilisez PlatformIO.
Vous pouvez aussi télécharger tous les fichiers ici.
/*********
Rui Santos
Complete instructions at https://Raspberryme.com/esp8266-web-server-gauges/
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.
*********/
#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include "LittleFS.h"
#include <Arduino_JSON.h>
#include <Adafruit_BME280.h>
#include <Adafruit_Sensor.h>
// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";
// Create AsyncWebServer object on port 80
AsyncWebServer server(80);
// Create an Event Source on /events
AsyncEventSource events("/events");
// Json Variable to Hold Sensor Readings
JSONVar readings;
// Timer variables
unsigned long lastTime = 0;
unsigned long timerDelay = 30000;
// Create a sensor object
Adafruit_BME280 bme; // BME280 connect to ESP32 I2C (GPIO 21 = SDA, GPIO 22 = SCL)
// Init BME280
void initBME(){
if (!bme.begin(0x76)) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
}
}
// Get Sensor Readings and return JSON object
String getSensorReadings(){
readings["temperature"] = String(bme.readTemperature());
readings["humidity"] = String(bme.readHumidity());
String jsonString = JSON.stringify(readings);
return jsonString;
}
// Initialize LittleFS
void initFS() {
if (!LittleFS.begin()) {
Serial.println("An error has occurred while mounting LittleFS");
}
Serial.println("LittleFS mounted successfully");
}
// Initialize WiFi
void initWiFi() {
WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
Serial.print("Connecting to WiFi ..");
while (WiFi.status() != WL_CONNECTED) {
Serial.print('.');
delay(1000);
}
Serial.println(WiFi.localIP());
}
void setup() {
Serial.begin(115200);
initBME();
initWiFi();
initFS();
// Web Server Root URL
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(LittleFS, "/index.html", "text/html");
});
server.serveStatic("/", LittleFS, "/");
// Request for the latest sensor readings
server.on("/readings", HTTP_GET, [](AsyncWebServerRequest *request){
String json = getSensorReadings();
request->send(200, "application/json", json);
json = String();
});
events.onConnect([](AsyncEventSourceClient *client){
if(client->lastId()){
Serial.printf("Client reconnected! Last message ID that it got is: %u\n", client->lastId());
}
// send event with message "hello!", id current millis
// and set reconnect delay to 1 second
client->send("hello!", NULL, millis(), 10000);
});
server.addHandler(&events);
// Start server
server.begin();
}
void loop() {
if ((millis() - lastTime) > timerDelay) {
// Send Events to the client with the Sensor Readings Every 30 seconds
events.send("ping",NULL,millis());
events.send(getSensorReadings().c_str(),"new_readings" ,millis());
lastTime = millis();
}
}
Comment fonctionne le code
Examinons le code et voyons comment il fonctionne pour envoyer des lectures au client à l’aide d’événements envoyés par le serveur.
Y compris les bibliothèques
Les bibliothèques Adafruit_Sensor et Adafruit_BME280 sont nécessaires pour s’interfacer avec le capteur BME280.
#include <Adafruit_BME280.h>
#include <Adafruit_Sensor.h>Les bibliothèques ESP8266WiFi, ESPAsyncWebServer et ESPAsyncTCP sont utilisées pour créer le serveur Web.
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>Nous utiliserons LittleFS pour enregistrer les fichiers afin de créer le serveur Web.
#include "LittleFS.h"Vous devez également inclure la bibliothèque Arduino_JSON pour faciliter la gestion des chaînes JSON.
#include <Arduino_JSON.h>Informations d’identification réseau
Insérez vos informations d’identification réseau dans les variables suivantes, afin que l’ESP8266 puisse se connecter à votre réseau local en utilisant le Wi-Fi.
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";AsyncWebServer et AsyncEventSource
Créez un objet AsyncWebServer sur le port 80.
AsyncWebServer server(80);La ligne suivante crée une nouvelle source d’événement sur /events.
AsyncEventSource events("/events");Déclaration de variables
La variable lectures est une variable JSON pour conserver les lectures du capteur au format JSON.
JSONVar readings;Les variables lastTime et timerDelay seront utilisées pour mettre à jour les lectures du capteur toutes les X secondes. Par exemple, nous obtiendrons de nouvelles lectures de capteur toutes les 30 secondes (30 000 millisecondes). Vous pouvez modifier ce délai dans la variable timerDelay.
unsigned long lastTime = 0;
unsigned long timerDelay = 30000;Créez un objet Adafruit_BME280 appelé bme sur les broches ESP I2C par défaut.
Adafruit_BME280 bme;Initialiser le capteur BME280
La fonction suivante peut être appelée pour initialiser le capteur BME280.
// Init BME280
void initBME(){
if (!bme.begin(0x76)) {
Serial.println("Could not find a valid BME280 sensor, check wiring!");
while (1);
}
}Obtenez des lectures BME280
Pour obtenir la température et l’humidité à partir de la température du BME280, utilisez les méthodes suivantes sur l’objet bme :
- bme.readTemperature()
- bme.readHumidity()
La fonction getSensorReadings() obtient les lectures du capteur et les enregistre sur le tableau JSON des lectures.
// Get Sensor Readings and return JSON object
String getSensorReadings(){
readings["temperature"] = String(bme.readTemperature());
readings["humidity"] = String(bme.readHumidity());
String jsonString = JSON.stringify(readings);
return jsonString;
}Le tableau de lectures est ensuite converti en une variable de chaîne JSON à l’aide de la méthode stringify() et enregistré sur la variable jsonString.
La fonction renvoie la variable jsonString avec les relevés actuels du capteur. La chaîne JSON a le format suivant (les valeurs ne sont que des nombres arbitraires à des fins d’explication).
{
"temperature" : "25",
"humidity" : "50"
}installation()
Dans setup(), initialisez le moniteur série, le Wi-Fi, le système de fichiers et le capteur BME280.
void setup() {
// Serial port for debugging purposes
Serial.begin(115200);
initBME();
initWiFi();
initFS();Traiter les demandes
Lorsque vous accédez à l’adresse IP ESP8266 sur la root/l’URL, envoyez le texte stocké dans le fichier index.html pour créer la page Web.
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send(LittleFS, "/index.html", "text/html");
});Servir les autres fichiers statiques demandés par le client (style.css et script.js).
server.serveStatic("/", LittleFS, "/");Envoyez la chaîne JSON avec les relevés actuels du capteur lorsque vous recevez une demande sur l’URL /readings.
// Request for the latest sensor readings
server.on("/readings", HTTP_GET, [](AsyncWebServerRequest *request){
String json = getSensorReadings();
request->send(200, "application/json", json);
json = String();
});La variable json contient le retour de la fonction getSensorReadings(). Pour envoyer une chaîne JSON en réponse, la méthode send() accepte comme premier argument le code de réponse (200), le second est le type de contenu (« application/json ») et enfin le contenu (variable json).
Source d’événement du serveur
Configurez la source d’événement sur le serveur.
events.onConnect([](AsyncEventSourceClient *client){
if(client->lastId()){
Serial.printf("Client reconnected! Last message ID that it got is: %u\n", client->lastId());
}
// send event with message "hello!", id current millis
// and set reconnect delay to 1 second
client->send("hello!", NULL, millis(), 10000);
});
server.addHandler(&events);Enfin, démarrez le serveur.
server.begin();boucle()
Dans la boucle (), envoyez des événements au navigateur avec les dernières lectures de capteur pour mettre à jour la page Web toutes les 30 secondes.
events.send("ping",NULL,millis());
events.send(getSensorReadings().c_str(),"new_readings" ,millis());Utilisez la méthode send() sur l’objet events et transmettez en argument le contenu que vous souhaitez envoyer et le nom de l’événement. Dans ce cas, nous souhaitons envoyer la chaîne JSON renvoyée par la fonction getSensorReadings(). La méthode send() accepte une variable de type char, nous devons donc utiliser la méthode c_str() pour convertir la variable. Le nom des événements est new_readings.
Habituellement, nous envoyons également un message ping toutes les X secondes. Cette ligne n’est pas obligatoire. Il est utilisé pour vérifier côté client que le serveur est actif.
events.send("ping",NULL,millis());Téléchargement de code et de fichiers
Après avoir inséré vos informations d’identification réseau, enregistrez le code. Accédez à Sketch > Show Sketch Folder et créez un dossier appelé data.
Dans ce dossier, vous devez enregistrer les fichiers HTML, CSS et JavaScript.
Ensuite, téléchargez le code sur votre carte ESP8266. Assurez-vous d’avoir sélectionné la bonne carte et le bon port COM. Assurez-vous également d’avoir ajouté vos informations d’identification réseau.
Après avoir téléchargé le code, vous devez télécharger les fichiers. Accédez à Outils> Téléchargement de données ESP8266 LittleFS et attendez que les fichiers soient téléchargés.
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 ESP8266 EN/RST, et il devrait imprimer l’adresse IP ESP8266.
Manifestation
Ouvrez votre navigateur et tapez l’adresse IP ESP8266. Vous devriez avoir accès à la page Web qui affiche les jauges avec les dernières lectures de capteur.
Vous pouvez également consulter vos jauges à l’aide de votre smartphone (la page web est mobile responsive).
Conclusion
Dans ce didacticiel, vous avez appris à créer un serveur Web pour afficher les relevés de capteur dans des jauges linéaires et radiales. À titre d’exemple, nous avons affiché la température et l’humidité d’un capteur BME280. Vous pouvez utiliser ces jauges pour afficher toute autre valeur susceptible d’avoir un sens pour votre projet.
Vous aimerez peut-être aussi lire :
En savoir plus sur l’ESP8266 avec nos ressources :
Merci pour la lecture.
Apprenez l’histoire de Raspberry Pi à travers cette vidéo :
-
StarTech.com Serveur d'impression LPR réseau 10/100 Mb/s avec port USB 2.0 (PM1115U2) -
Lot de 2 capteurs sonores pour Arduino ESP32 ESP8266 Raspberry Pi Microcontrôleur Projects 3,3 V 5 V Compatible Sensibilité réglable Sortie numérique