Arduino Nano - Serveur Web
Dans ce guide, nous vous montrerons comment programmer une carte Arduino Nano avec un module Ethernet pour qu'elle agisse comme un serveur web. Vous pourrez visualiser les données et contrôler l'Arduino Nano à travers des pages web accessibles depuis votre ordinateur ou smartphone. Nous commencerons par des tâches simples et passerons à des tâches plus avancées, comme indiqué ci-dessous :
- Serveur Web Arduino Nano - Bonjour le monde !
- Serveur Web Arduino Nano - Surveillance des valeurs des capteurs via une page web.
- Serveur Web Arduino Nano - Mise à jour automatique des valeurs sur la page web.
- Serveur Web Arduino Nano - Séparation du HTML, CSS, et JavaScript du code Arduino.
- Serveur Web Arduino Nano - Contrôle de l'Arduino Nano via une page web.
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.
Schéma de câblage entre l'Arduino Nano et le module Ethernet W5500
This image is created using Fritzing. Click to enlarge image
image source: diyables.io
Serveur Web Arduino Nano - Bonjour tout le monde
C'est relativement simple. Le code Arduino Nano effectue les tâches suivantes :
- Création d'un serveur web qui écoute les requêtes HTTP d'un navigateur web.
- Lors de la réception d'une requête d'un navigateur web, l'Arduino Nano répond avec les informations suivantes :
- En-tête HTTP
- Corps HTTP : inclut "Hello World !".
- Connectez l'Arduino Nano au module Ethernet selon le schéma de câblage ci-dessus.
- Connectez un câble Ethernet au module Ethernet.
- Connectez l'Arduino Nano à un PC à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre PC.
- Sélectionnez la carte Arduino Nano et le port COM correspondant.
- Cliquez sur l'icône Libraries dans la barre gauche de l'IDE Arduino.
- Recherchez « Ethernet », puis trouvez la bibliothèque Ethernet par Various.
- Cliquez sur le bouton Install pour installer la bibliothèque Ethernet.
- Copiez le code ci-dessus et ouvrez-le avec Arduino IDE
- Cliquez sur le bouton Upload dans Arduino IDE pour télécharger le code sur Arduino Nano
- Ouvrez le Moniteur Série
- Vérifiez le résultat sur le Moniteur Série.
- Notez l'adresse IP affichée et saisissez-la dans la barre d'adresse d'un navigateur web sur votre smartphone ou PC.
- Vous verrez alors la sortie suivante sur le Moniteur Série.
- Une fois que vous accédez au navigateur web en utilisant l'adresse IP, vous verrez une page web simple affichant "Hello World!". La page ressemblera à ceci :
Ci-dessous le code Arduino Nano qui réalise les tâches mentionnées ci-dessus :
/*
* Ce code Arduino Nano a été développé par newbiely.fr
* Ce code Arduino Nano 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-nano/arduino-nano-web-server
*/
#include <SPI.h>
#include <Ethernet.h>
// MAC address for the Ethernet module, you can modify it as needed
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // Set a static IP address
EthernetServer server(80); // Create an Ethernet server that listens on port 80
void setup() {
//Initialize serial communication:
Serial.begin(9600);
// Start the Ethernet connection:
if (Ethernet.begin(mac) == 0) {
Serial.println(F("Failed to configure Ethernet using DHCP"));
// Try with a static IP:
Ethernet.begin(mac, ip);
}
// Start the server:
server.begin();
// Print the Ethernet board's IP address:
Serial.print(F("Arduino Nano Web Server's IP address: "));
Serial.println(Ethernet.localIP());
}
void loop() {
// Listen for incoming clients
EthernetClient 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(F("<< "));
Serial.println(HTTP_header); // print HTTP request to Serial Monitor
}
}
// send the HTTP response
// send the HTTP response header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("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(F("<!DOCTYPE HTML>"));
client.println(F("<html>"));
client.println(F("<head>"));
client.println(F("<link rel=\"icon\" href=\"data:,\">"));
client.println(F("</head>"));
client.println(F("<p>"));
client.println(F("Hello World!"));
client.println(F("</p>"));
client.println(F("</html>"));
client.flush();
// give the web browser time to receive the data
delay(10);
// close the connection:
client.stop();
}
}
Étapes rapides
COM6
Arduino Nano Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
COM6
Arduino Nano Web Server's IP address: 192.168.0.3
<< GET / HTTP/1.1
<< Host: 192.168.0.3
<< Connection: keep-alive
<< Upgrade-Insecure-Requests: 1
<< User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36 Edg/129.0.0.0
<< Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
<< Accept-Encoding: gzip, deflate
<< Accept-Language: en-US,en;q=0.9,ko;q=0.8
Autoscroll
Clear output
9600 baud
Newline
Serveur Web Arduino Nano - Surveillance des valeurs des capteurs via une page Web.
Le code Arduino Nano ci-dessous effectue les tâches suivantes :
- Création d'un serveur web qui écoute les requêtes HTTP d'un navigateur web.
- Lors de la réception d'une requête d'un navigateur web, l'Arduino Nano répond avec les informations suivantes :
- En-tête HTTP
- Corps HTTP : Cela inclut le contenu HTML, CSS et la valeur lue depuis le capteur.
- Copiez le code ci-dessus et ouvrez-le dans l'IDE Arduino.
- Cliquez sur le bouton Upload dans l'IDE Arduino pour envoyer le code à l'Arduino Nano.
- Rechargez la page web précédente (Ctrl + F5) et vous la verrez comme indiqué ci-dessous :
/*
* Ce code Arduino Nano a été développé par newbiely.fr
* Ce code Arduino Nano 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-nano/arduino-nano-web-server
*/
#include <SPI.h>
#include <Ethernet.h>
// MAC address for the Ethernet module, you can modify it as needed
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // Set a static IP address
EthernetServer server(80); // Create an Ethernet server that listens on port 80
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a random value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
//Initialize serial communication:
Serial.begin(9600);
// Start the Ethernet connection:
if (Ethernet.begin(mac) == 0) {
Serial.println(F("Failed to configure Ethernet using DHCP"));
// Try with a static IP:
Ethernet.begin(mac, ip);
}
// Start the server:
server.begin();
// Print the Ethernet board's IP address:
Serial.print(F("Server is at: "));
Serial.println(Ethernet.localIP());
}
void loop() {
// Listen for incoming clients
EthernetClient 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(F("<< "));
Serial.println(HTTP_header); // print HTTP request to Serial Monitor
}
}
// send the HTTP response
// send the HTTP response header
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("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(F("<!DOCTYPE HTML>"));
client.println(F("<html>"));
client.println(F("<head>"));
client.println(F("<link rel=\"icon\" href=\"data:,\">"));
client.println(F("</head>"));
client.println(F("<p>"));
client.print(F("Temperature: <span style=\"color: red;\">"));
float temperature = getTemperature();
client.print(temperature, 2);
client.println(F("°C</span>"));
client.println(F("</p>"));
client.println(F("</html>"));
client.flush();
// give the web browser time to receive the data
delay(10);
// close the connection:
client.stop();
}
}
Étapes rapides
Avec le code fourni, pour mettre à jour la température, vous devez recharger la page dans le navigateur web. Dans la prochaine section, apprenons comment faire en sorte que la page web mette automatiquement à jour la valeur de la température en arrière-plan sans rechargement.
Serveur Web Arduino Nano - Mise à jour automatique des valeurs sur la page Web
Comment la mise à jour automatique fonctionne
- L'utilisateur entre l'adresse IP de l'Arduino Nano dans le navigateur web.
- Le navigateur web envoie une requête HTTP à la page d'accueil de l'Arduino Nano (/).
- L'Arduino répond avec du HTML, du CSS et du JavaScript.
- Le navigateur web affiche la page web en utilisant le HTML et le CSS reçus.
- Toutes les 3 secondes, le navigateur web exécute le code JavaScript, qui effectue une requête HTTP à l'endpoint /temperature.
- L'Arduino lit la valeur du capteur et l'envoie en réponse.
- Le navigateur web reçoit la valeur du capteur et met à jour la page web en conséquence.
Voici le code Arduino Nano qui effectue les tâches ci-dessus :
/*
* Ce code Arduino Nano a été développé par newbiely.fr
* Ce code Arduino Nano 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-nano/arduino-nano-web-server
*/
#include <SPI.h>
#include <Ethernet.h>
// MAC address and IP address for the Ethernet module (modify if necessary)
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // Static IP address for the Arduino Nano
EthernetServer server(80); // Set up the Ethernet server to listen on port 80
const char* HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano Temperature</title>
</head>
<body>
<h1>Arduino Nano Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 3000); // Update temperature every 3 seconds
</script>
</body>
</html>
)=====";
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a random value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
// Start serial communication
Serial.begin(9600);
// Start Ethernet connection
if (Ethernet.begin(mac) == 0) {
Serial.println(F("Failed to configure Ethernet using DHCP"));
// Try with a static IP address if DHCP fails
Ethernet.begin(mac, ip);
}
// Start the server
server.begin();
// Print the Arduino Nano's IP address
Serial.print(F("Arduino Nano Web Server's IP address: "));
Serial.println(Ethernet.localIP());
}
void loop() {
// Listen for incoming clients
EthernetClient client = server.available();
if (client) {
Serial.println(F("Client connected"));
// Wait until the client sends some data
while (client.connected()) {
if (client.available()) {
// Read the first line of the HTTP request
String request = client.readStringUntil('\r');
Serial.print(F("Request: "));
Serial.println(request);
client.flush();
// Serve the HTML page from the index.h file if the request is "/"
if (request.indexOf("GET / ") >= 0) {
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close")); // Connection will be closed after the response
client.println();
client.println(HTML_CONTENT); // Send the HTML page from index.h
}
// Serve the temperature data if the request is "/temperature"
else if (request.indexOf("GET /temperature") >= 0) {
float temperature = getTemperature();
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/plain"));
client.println(F("Connection: close")); // Connection will be closed after the response
client.println();
client.print(temperature, 2); // Send the temperature as plain text
}
// Close the connection
client.stop();
Serial.println(F("Client disconnected"));
}
}
}
}
Étapes rapides
- Copiez le code ci-dessus et ouvrez-le dans l'IDE Arduino.
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code sur l'Arduino Nano.
- Rechargez la page web précédente (Ctrl + F5), et vous la verrez comme indiqué ci-dessous :
Vous verrez que la valeur est automatiquement mise à jour toutes les 3 secondes.
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 Nano, comme expliqué précédemment.
Cependant, pour les pages web plus complexes et riches en fonctionnalités, intégrer tout le HTML, le CSS et le JavaScript directement dans le code de l'Arduino Nano peut devenir fastidieux. Dans de tels cas, il est préférable d'utiliser une approche différente pour gérer le code :
- Le code Arduino Nano sera toujours stocké dans un fichier .ino comme d'habitude.
- Le contenu de la page web (HTML, CSS, JavaScript) sera placé dans un fichier .h séparé. Cette séparation facilite la gestion et la mise à jour de la page web sans encombrer le code Arduino.
Étapes rapides
- Ouvrez l'IDE Arduino et créez un nouveau croquis. Donnez-lui un nom, par exemple, newbiely.com.ino.
- Copiez le code fourni ci-dessous et collez-le dans le fichier créé.
/*
* Ce code Arduino Nano a été développé par newbiely.fr
* Ce code Arduino Nano 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-nano/arduino-nano-web-server
*/
#include <SPI.h>
#include <Ethernet.h>
#include "index.h" // Include the index.h file
// MAC address and IP address for the Ethernet module (modify if necessary)
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };
IPAddress ip(192, 168, 1, 177); // Static IP address for the Arduino Nano
EthernetServer server(80); // Set up the Ethernet server to listen on port 80
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a random value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
void setup() {
// Start serial communication
Serial.begin(9600);
// Start Ethernet connection
if (Ethernet.begin(mac) == 0) {
Serial.println(F("Failed to configure Ethernet using DHCP"));
// Try with a static IP address if DHCP fails
Ethernet.begin(mac, ip);
}
// Start the server
server.begin();
// Print the Arduino Nano's IP address
Serial.print(F("Arduino Nano Web Server's IP address: "));
Serial.println(Ethernet.localIP());
}
void loop() {
// Listen for incoming clients
EthernetClient client = server.available();
if (client) {
Serial.println(F("Client connected"));
// Wait until the client sends some data
while (client.connected()) {
if (client.available()) {
// Read the first line of the HTTP request
String request = client.readStringUntil('\r');
Serial.print(F("Request: "));
Serial.println(request);
client.flush();
// Serve the HTML page from the index.h file if the request is "/"
if (request.indexOf("GET / ") >= 0) {
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/html"));
client.println(F("Connection: close")); // Connection will be closed after the response
client.println();
client.println(HTML_CONTENT); // Send the HTML page from index.h
}
// Serve the temperature data if the request is "/temperature"
else if (request.indexOf("GET /temperature") >= 0) {
float temperature = getTemperature();
client.println(F("HTTP/1.1 200 OK"));
client.println(F("Content-Type: text/plain"));
client.println(F("Connection: close")); // Connection will be closed after the response
client.println();
client.print(temperature, 2); // Send the temperature as plain text
}
// Close the connection
client.stop();
Serial.println(F("Client disconnected"));
}
}
}
}
- 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.
- Donnez le nom de fichier index.h et cliquez sur le bouton OK.
- Copiez le code ci-dessous et collez-le dans le index.h.
/*
* Ce code Arduino Nano a été développé par newbiely.fr
* Ce code Arduino Nano 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-nano/arduino-nano-web-server
*/
/*
* This Arduino Nano code was developed by newbiely.com
*
* This Arduino Nano code is made available for public use without any restriction
*
* For comprehensive instructions and wiring diagrams, please visit:
* http://localhost/web/newbiely.com/public/tutorials/arduino-nano-esp32/arduino-nano-esp32-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* HTML_CONTENT = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Nano Temperature</title>
</head>
<body>
<h1>Arduino Nano Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 3000); // Update temperature every 3 seconds
</script>
</body>
</html>
)=====";
#endif
- Vous avez maintenant le code dans deux fichiers : newbiely.com.ino et index.h
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code sur l'Arduino Nano
- Rechargez la page web (en utilisant Ctrl + F5), et elle apparaîtra comme avant
※ Note:
- Si vous mettez à jour le contenu HTML dans le fichier index.h sans changer quoi que ce soit dans le fichier newbiely.com.ino, l'IDE Arduino ne rafraîchira pas ou n'inclura pas le contenu HTML mis à jour lorsque vous compilerez et téléverserez le code sur l'Arduino Nano.
- Pour s'assurer que l'IDE Arduino mette à jour le contenu HTML, vous devez apporter une petite modification dans le fichier newbiely.com.ino, comme ajouter une ligne vide ou un commentaire. Cela force l'IDE à détecter les changements, garantissant que le contenu HTML mis à jour soit inclus dans le téléversement.
Contrôler l'Arduino Nano via le Web
Contrôler quelque chose connecté à un Arduino Nano est un peu plus complexe que de simplement lire une valeur. C'est parce que l'Arduino Nano doit comprendre la demande qu'il reçoit du navigateur web pour savoir quelle action entreprendre.
Pour un exemple plus complet et détaillé, je recommande de consulter les tutoriels listés ci-dessous :