Arduino - Serveur Web
Dans ce tutoriel, nous apprendrons à transformer un Arduino Uno R4 WiFi en serveur web. En accédant aux pages web hébergées sur le serveur web Arduino via un navigateur web sur votre PC ou smartphone, vous pourrez lire des valeurs depuis l'Arduino et même le contrôler. Voici un aperçu de ce que nous apprendrons pour programmer l'Arduino Uno WiFi à réaliser :
- Serveur Web Arduino - Page unique : Cela nous permet de surveiller les valeurs des capteurs depuis l'Arduino via une interface web.
- Serveur Web Arduino - Page unique : Nous activerons la possibilité de contrôler l'Arduino à l'aide d'un navigateur web.
- Serveur Web Arduino - Page unique : Nous apprendrons à séparer le contenu HTML (HTML, CSS et Javascript) dans un autre fichier au sein de l'IDE Arduino.
- Serveur Web Arduino - Pages multiples : Dans cette étape, nous créerons plusieurs pages telles que index.html, temperature.html, led.html, error_404.html, et error_405.html..., et plus encore.
Préparation du matériel
Or you can buy the following sensor kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Lecture de la valeur du capteur depuis Arduino via le Web
Ceci est relativement simple. Le code Arduino effectue les tâches suivantes :
- Création d'un serveur web qui écoute les requêtes HTTP provenant d'un navigateur web.
- Lors de la réception d'une requête d'un navigateur web, l'Arduino répond avec les informations suivantes :
- En-tête HTTP
- Corps HTTP : Cela inclut le contenu HTML et la valeur lue depuis le capteur.
- Si c'est la première fois que vous utilisez l'Arduino Uno R4, consultez comment configurer l'environnement pour l'Arduino Uno R4 sur Arduino IDE.
- Copiez le code ci-dessus et ouvrez-le avec Arduino IDE
- Modifiez les informations wifi (SSID et mot de passe) dans le code pour les vôtres
- Cliquez sur le bouton Upload sur Arduino IDE pour téléverser le code sur l'Arduino
- Ouvrez le moniteur série
- Consultez le résultat sur le moniteur série.
- Prenez note de l'adresse IP affichée, et saisissez cette adresse dans la barre d'adresse d'un navigateur web sur votre smartphone ou PC.
- En conséquence, vous verrez la sortie suivante sur le moniteur série.
- Une fois que vous aurez accédé au navigateur web en utilisant l'adresse IP, une page web très basique s'affichera, présentant des informations sur la carte Arduino. La page ressemblera à ce qui suit :
Voici le code Arduino qui exécute les tâches mentionnées ci-dessus :
/*
* Ce code Arduino a été développé par newbiely.fr
* Ce code Arduino est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/arduino/arduino-web-server
*/
#include <WiFiS3.h>
const char ssid[] = "YOUR_WIFI"; // change your network SSID (name)
const char pass[] = "YOUR_WIFI_PASSWORD"; // change your network password (use for WPA, or use as key for WEP)
int status = WL_IDLE_STATUS;
WiFiServer server(80);
float getTemperature() {
return 26.9456;
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
//Initialize serial and wait for port to open:
Serial.begin(9600);
String fv = WiFi.firmwareVersion();
if (fv < WIFI_FIRMWARE_LATEST_VERSION)
Serial.println("Please upgrade the firmware");
// attempt to connect to WiFi network:
while (status != WL_CONNECTED) {
Serial.print("Attempting to connect to SSID: ");
Serial.println(ssid);
// Connect to WPA/WPA2 network. Change this line if using open or WEP network:
status = WiFi.begin(ssid, pass);
// wait 10 seconds for connection:
delay(10000);
}
server.begin();
// you're connected now, so print out the status:
printWifiStatus();
}
void loop() {
// listen for incoming clients
WiFiClient client = server.available();
if (client) {
// read the HTTP request header line by line
while (client.connected()) {
if (client.available()) {
String HTTP_header = client.readStringUntil('\n'); // read the header line of HTTP request
if (HTTP_header.equals("\r")) // the end of HTTP request
break;
Serial.print("<< ");
Serial.println(HTTP_header); // print HTTP request to Serial Monitor
}
}
// send the HTTP response
// send the HTTP response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close"); // the connection will be closed after completion of the response
client.println(); // the separator between HTTP header and body
// send the HTTP response body
client.println("<!DOCTYPE HTML>");
client.println("<html>");
client.println("<head>");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("</head>");
client.println("<p>");
client.print("Temperature: <span style=\"color: red;\">");
float temperature = getTemperature();
client.print(temperature, 2);
client.println("°C</span>");
client.println("</p>");
client.println("</html>");
client.flush();
// give the web browser time to receive the data
delay(10);
// close the connection:
client.stop();
}
}
void printWifiStatus() {
// print your board's IP address:
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
// print the received signal strength:
Serial.print("signal strength (RSSI):");
Serial.print(WiFi.RSSI());
Serial.println(" dBm");
}
Étapes rapides
COM6
Attempting to connect to SSID: YOUR_WIFI
IP Address: 192.168.0.2
signal strength (RSSI):-39 dBm
Autoscroll
Clear output
9600 baud
Newline
COM6
Attempting to connect to SSID: YOUR_WIFI
IP Address: 192.168.0.2
signal strength (RSSI):-41 dBm
New HTTP Request
<< GET / HTTP/1.1
<< Host: 192.168.0.2
<< Connection: keep-alive
<< Cache-Control: max-age=0
<< Upgrade-Insecure-Requests: 1
<< User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
<< Accept: text/html,application/xhtml+xml,application/xml
<< Accept-Encoding: gzip, deflate
<< Accept-Language: en-US,en;q=0.9
Autoscroll
Clear output
9600 baud
Newline
Pour rendre la page web fantastique avec une interface graphique utilisateur (UI), consultez la dernière section de ce tutoriel.
Contrôler l'Arduino via le Web
Contrôler quelque chose connecté à un Arduino est un peu plus compliqué que de simplement lire une valeur. C'est parce que l'Arduino doit comprendre la demande qu'il reçoit du navigateur web pour savoir quelle action entreprendre. Voici ce que fait le code Arduino dans ce cas :
- Création d'un serveur web qui écoute les requêtes HTTP provenant d'un navigateur web.
- Gestion de la requête reçue du navigateur web en procédant comme suit :
- Lit l'en-tête de la requête HTTP.
- Analyse l'en-tête de la requête HTTP pour déterminer la commande de contrôle spécifique nécessaire.
- Contrôle l'appareil ou l'objet connecté à l'Arduino en fonction de la commande de contrôle reçue.
- Renvoie une réponse HTTP.
- De plus, il peut envoyer un corps de réponse HTTP avec du contenu HTML pour afficher des informations sur l'état de contrôle (si nécessaire).
Pour un exemple plus complet et détaillé, je recommande de consulter les tutoriels listés ci-dessous :
Séparation du contenu HTML dans un autre fichier sur Arduino IDE
Si vous souhaitez créer une page web simple avec un contenu minimal, vous pouvez intégrer le HTML directement dans le code Arduino, comme expliqué précédemment.
Cependant, si vous souhaitez créer une page web plus sophistiquée et impressionnante avec un contenu plus volumineux, il devient peu pratique d'inclure tout le HTML, le CSS et le Javascript directement dans le code Arduino. Dans cette situation, vous pouvez utiliser une approche différente pour gérer le code :
- Le code Arduino sera placé dans un fichier .ino, comme auparavant.
- Le code HTML (HTML, CSS, Javascript) sera placé dans un fichier .h séparé. Cela vous permet de garder le contenu de la page web séparé du code Arduino, facilitant ainsi sa gestion et sa modification.
Pour ce faire, nous devons franchir deux étapes majeures :
- Préparation du contenu HTML
- Programmation Arduino
Préparation du contenu HTML
- Créez un fichier HTML sur votre PC local qui contient le contenu HTML (HTML, CSS et Javascript) pour votre conception d'interface utilisateur.
- Dans le fichier HTML, où les données de l'Arduino doivent être affichées, utilisez une valeur arbitraire.
- Testez et modifiez jusqu'à ce que vous soyez satisfait.
- Dans le fichier HTML, où les données de l'Arduino doivent être affichées, remplacez la valeur arbitraire par un nom spécial, par exemple, TEMPERATURE_MARKER. Plus tard, dans le code Arduino, nous utiliserons la fonction String.replace("TEMPERATURE_MARKER", real_value); pour mettre à jour la valeur fournie par Arduino.
- Nous mettrons le contenu HTML dans le fichier .h sur l'IDE Arduino. Voir l'étape suivante.
Programmation Arduino
- Ouvrez l'IDE Arduino et créez un nouveau sketch. Nommez-le, par exemple, ArduinoGetStarted.com.ino.
- Copiez le code fourni ci-dessous et collez-le dans le fichier créé.
/*
* Ce code Arduino a été développé par newbiely.fr
* Ce code Arduino est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/arduino/arduino-web-server
*/
#include <WiFiS3.h>
#include "index.h"
const char ssid[] = "YOUR_WIFI"; // change your network SSID (name)
const char pass[] = "YOUR_WIFI_PASSWORD"; // change your network password (use for WPA, or use as key for WEP)
int status = WL_IDLE_STATUS;
WiFiServer server(80);
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
//Initialize serial and wait for port to open:
Serial.begin(9600);
String fv = WiFi.firmwareVersion();
if (fv < WIFI_FIRMWARE_LATEST_VERSION)
Serial.println("Please upgrade the firmware");
// attempt to connect to WiFi network:
while (status != WL_CONNECTED) {
Serial.print("Attempting to connect to SSID: ");
Serial.println(ssid);
// Connect to WPA/WPA2 network. Change this line if using open or WEP network:
status = WiFi.begin(ssid, pass);
// wait 10 seconds for connection:
delay(10000);
}
server.begin();
// you're connected now, so print out the status:
printWifiStatus();
}
void loop() {
// listen for incoming clients
WiFiClient client = server.available();
if (client) {
// read the HTTP request header line by line
while (client.connected()) {
if (client.available()) {
String HTTP_header = client.readStringUntil('\n'); // read the header line of HTTP request
if (HTTP_header.equals("\r")) // the end of HTTP request
break;
Serial.print("<< ");
Serial.println(HTTP_header); // print HTTP request to Serial Monitor
}
}
// send the HTTP response
// send the HTTP response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close"); // the connection will be closed after completion of the response
client.println(); // the separator between HTTP header and body
// send the HTTP response body
float temp = getTemperature();
String html = String(HTML_CONTENT);
html.replace("TEMPERATURE_MARKER", String(temp, 2)); // replace the marker by a real value
client.println(html);
client.flush();
// give the web browser time to receive the data
delay(10);
// close the connection:
client.stop();
}
}
void printWifiStatus() {
// print your board's IP address:
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
// print the received signal strength:
Serial.print("signal strength (RSSI):");
Serial.print(WiFi.RSSI());
Serial.println(" dBm");
}
- Modifiez les informations WiFi (SSID et mot de passe) dans le code par les vôtres
- Créez le fichier index.h sur l'IDE Arduino en :
- Cliquez soit sur le bouton juste en dessous de l'icône du moniteur série et choisissez Nouvel Onglet, soit utilisez les touches Ctrl+Shift+N.
- Nommez le fichier index.h et cliquez sur le bouton OK.
- Copiez le code ci-dessous et collez-le dans le index.h.
/*
* Ce code Arduino a été développé par newbiely.fr
* Ce code Arduino est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/arduino/arduino-web-server
*/
const char *HTML_CONTENT = R""""(
REPLACE_YOUR_HTML_CONTENT_HERE
)"""";
- Remplacez la ligne REPLACE_YOUR_HTML_CONTENT_HERE par votre contenu HTML que vous avez préparé auparavant. Il n'y a aucun problème avec le caractère de nouvelle ligne. Voici un exemple de fichier index.h :
/*
* Ce code Arduino a été développé par newbiely.fr
* Ce code Arduino est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/arduino/arduino-web-server
*/
const char *HTML_CONTENT = R""""(
<!DOCTYPE html>
<html>
<head>
<title>Arduino - Web Temperature</title>
<meta name="viewport" content="width=device-width, initial-scale=0.7, maximum-scale=0.7">
<meta charset="utf-8">
<link rel="icon" href="https://diyables.io/images/page/diyables.svg">
<style>
body { font-family: "Georgia"; text-align: center; font-size: width/2pt;}
h1 { font-weight: bold; font-size: width/2pt;}
h2 { font-weight: bold; font-size: width/2pt;}
button { font-weight: bold; font-size: width/2pt;}
</style>
<script>
var cvs_width = 200, cvs_height = 450;
function init() {
var canvas = document.getElementById("cvs");
canvas.width = cvs_width;
canvas.height = cvs_height + 50;
var ctx = canvas.getContext("2d");
ctx.translate(cvs_width/2, cvs_height - 80);
update_view(TEMPERATURE_MARKER);
}
function update_view(temp) {
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
var radius = 70;
var offset = 5;
var width = 45;
var height = 330;
ctx.clearRect(-cvs_width/2, -350, cvs_width, cvs_height);
ctx.strokeStyle="blue";
ctx.fillStyle="blue";
//5-step Degree
var x = -width/2;
ctx.lineWidth=2;
for (var i = 0; i <= 100; i+=5) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 20, y);
ctx.stroke();
}
//20-step Degree
ctx.lineWidth=5;
for (var i = 0; i <= 100; i+=20) {
var y = -(height - radius)*i/100 - radius - 5;
ctx.beginPath();
ctx.lineTo(x, y);
ctx.lineTo(x - 25, y);
ctx.stroke();
ctx.font="20px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="right";
ctx.fillText(i.toString(), x - 35, y);
}
// shape
ctx.lineWidth=16;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.stroke();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle="#e6e6ff";
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.rect(-width/2, -height, width, height);
ctx.fill();
ctx.beginPath();
ctx.arc(0, -height, width/2, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle="#ff1a1a";
ctx.beginPath();
ctx.arc(0, 0, radius - offset, 0, 2 * Math.PI);
ctx.fill();
temp = Math.round(temp * 100) / 100;
var y = (height - radius)*temp/100.0 + radius + 5;
ctx.beginPath();
ctx.rect(-width/2 + offset, -y, width - 2*offset, y);
ctx.fill();
ctx.fillStyle="red";
ctx.font="bold 34px Georgia";
ctx.textBaseline="middle";
ctx.textAlign="center";
ctx.fillText(temp.toString() + "°C", 0, 100);
}
window.onload = init;
</script>
</head>
<body>
<h1>Arduino - Web Temperature</h1>
<canvas id="cvs"></canvas>
</body>
</html>
)"""";
- Maintenant, vous avez le code dans deux fichiers : ArduinoGetStarted.com.ino et index.h
- Cliquez sur le bouton Upload de l'IDE Arduino pour charger le code sur Arduino
- Accédez à la page web de la carte Arduino via un navigateur web comme auparavant. Vous la verrez comme ci-dessous :
Pour une illustration plus complète et détaillée, veuillez consulter le tutoriel Arduino - Capteur de température DS18B20 via Web.
※ NOTE THAT:
- Si vous apportez des modifications au contenu HTML dans le fichier index.h mais que vous ne modifiez rien dans le fichier ArduinoGetStarted.com.ino, l'IDE Arduino ne rafraîchira ni ne mettra à jour le contenu HTML lorsque vous compilerez et téléverserez le code sur l'ESP32.
- Pour forcer l'IDE Arduino à mettre à jour le contenu HTML dans cette situation, vous devez effectuer une modification dans le fichier ArduinoGetStarted.com.ino. Par exemple, vous pouvez ajouter une ligne vide ou insérer un commentaire. Cette action pousse l'IDE à reconnaître qu'il y a eu des changements dans le projet, garantissant que votre contenu HTML mis à jour est inclus dans le téléversement.
Serveur Web Arduino - Pages Multiples
Découvrez ce tutoriel Arduino - Serveur Web Multisites.