SENSORS/ACTUATORS

INTERNET OF THING (IoT)

Arduino - Serveur Web Multisites

Dans ce tutoriel, nous découvrirons comment transformer un Arduino en serveur web capable de gérer plusieurs pages simultanément, telles que index.html, temperature.html, led.html, error_404.html et error_405.html... Le contenu de chaque page, incluant HTML, CSS et JavaScript, sera stocké dans différents fichiers sur l'IDE Arduino. En accédant au serveur web Arduino depuis un navigateur web sur votre PC ou smartphone, vous pourrez voir et contrôler les capteurs et actionneurs connectés à l'Arduino via le web. De plus, le serveur web sera conçu pour accepter les liens avec ou sans l'extension .html.

En suivant ce tutoriel, vous pourrez transformer votre Arduino en un serveur web avec quelques fonctionnalités intéressantes :

Plusieurs pages web sont actives simultanément.
Le contenu HTML (incluant HTML, CSS et Javascript) pour chaque page est conservé séparément dans son propre fichier.
Le contenu HTML peut être mis à jour dynamiquement avec des valeurs en temps réel provenant de capteurs, rendant les pages web dynamiques et réactives.
Vous pouvez accéder aux pages avec ou sans l'extension .html. Par exemple, vous pouvez utiliser des liens comme http://192.168.0.2/led ou http://192.168.0.2/led.html pour atteindre la même page de contrôle des LED.
Le serveur web gère les codes d'erreur HTTP tels que 404 Non Trouvé et 405 Méthode Non Autorisée

Cela peut sembler compliqué, mais ne vous inquiétez pas ! Ce tutoriel offre des directives étape par étape, et le code est conçu pour être accessible aux débutants, vous assurant ainsi de pouvoir facilement comprendre et créer votre propre serveur web Arduino.

Préparation du matériel

1	×	Arduino UNO R4 WiFi
1	×	USB Cable Type-C
1	×	(Optional) 9V Power Adapter for Arduino
1	×	(Recommended) Screw Terminal Block Shield for Arduino Uno
1	×	(Optional) Transparent Acrylic Enclosure For Arduino Uno

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.

À propos d'Arduino Uno R4 et du serveur Web

Si vous n'êtes pas familier avec l'Arduino Uno R4 et le serveur Web (y compris le schéma des broches, son fonctionnement et sa programmation), vous pouvez vous renseigner à leur sujet grâce aux tutoriels suivants :

Comment fonctionne un serveur web sur Arduino

Lorsqu'un navigateur web envoie une requête HTTP à la carte Arduino, celle-ci doit être programmée pour effectuer les tâches suivantes :

Créez un serveur web capable d'écouter les requêtes HTTP provenant du navigateur web.
Lisez la première ligne de l'en-tête de la requête HTTP lorsqu'il reçoit une demande HTTP.
Routez les requêtes en fonction de la première ligne de la requête HTTP pour déterminer quelles pages web l'Arduino doit retourner.
(Optionnellement) Analysez l'en-tête de la requête HTTP pour identifier les commandes de contrôle envoyées par l'utilisateur.
(Optionnellement) Contrôlez les dispositifs connectés à l'Arduino en fonction des commandes de contrôle reçues.
Envoyez une réponse HTTP au navigateur web, qui comprend :

Un en-tête de réponse HTTP.
Le corps de la réponse HTTP, qui contient du contenu HTML et (le cas échéant) des données de capteurs ou l'état du dispositif.

En effectuant ces tâches, l'Arduino peut gérer efficacement les requêtes HTTP et fournir les réponses appropriées au navigateur web, permettant ainsi un contrôle et une interaction basés sur le web avec les dispositifs connectés à l'Arduino.

La fonction de routage est la tâche la plus importante et sera expliquée en détail. Les autres parties sont abordées dans le tutoriel Arduino - Serveur Web. Une fois que vous aurez compris l'algorithme de routage, nous passerons à voir le code complet pour un serveur web avec plusieurs pages.

Serveur Web Arduino - Algorithme de Routage

Avant de rédiger le code pour la fonction de routage, vous devriez créer une liste des pages web et des méthodes HTTP correspondantes qui seront disponibles sur Arduino. Dans ce tutoriel, nous ne prendrons en charge que la méthode GET. Cependant, vous pouvez facilement l'étendre pour inclure d'autres méthodes HTTP si nécessaire. Voici un exemple de liste :

OBTENIR la page d'accueil
OBTENIR la page de température
OBTENIR la page de porte
OBTENIR la page de LED

Ensuite, vous devez créer une liste des en-têtes de requête HTTP de première ligne correspondant à la liste des pages :

Obtenir la page d'accueil :

GET /
GET /index.html

Obtenir la page de température

GET /temperature.html

Obtenir la page de la porte

GET /door

Obtenir la page des LED

GET /led.html

En résumé, nous avons la liste suivante :

GET / GET /index.html GET /temperature.html GET /door.html GET /led.html

Le code suivant montre comment implémenter la fonction de routage pour un serveur web sur Arduino.

if (HTTP_req.indexOf("GET") == 0) { // vérifier si la méthode de requête est GET if (HTTP_req.indexOf("GET / ") > -1 || HTTP_req.indexOf("GET /index.html ") > -1) { Serial.println("home page"); // À IMPLEMENTER } else if (HTTP_req.indexOf("GET /temperature.html ") > -1) { Serial.println("temperature page"); // À IMPLEMENTER } else if (HTTP_req.indexOf("GET /door.html ") > -1) { Serial.println("door page"); // À IMPLEMENTER } else if (HTTP_req.indexOf("GET /led.html ") > -1) { Serial.println("led page"); // À IMPLEMENTER } else { // 404 Non trouvé Serial.println("404 Not Found"); // À IMPLEMENTER } } else { // 405 Méthode non autorisée Serial.println("405 Method Not Allowed"); // À IMPLEMENTER }

N'hésitez pas à modifier le code pour ajouter ou supprimer des pages selon le besoin. Maintenant, actualisons la fonction de routage pour gérer les liens avec ou sans l'extension .html.

if (HTTP_req.indexOf("GET") == 0) { // vérifier si la méthode de requête est GET if (HTTP_req.indexOf("GET / ") > -1 || HTTP_req.indexOf("GET /index ") > -1 || HTTP_req.indexOf("GET /index.html ") > -1) { Serial.println("home page"); // À IMPLEMENTER } else if (HTTP_req.indexOf("GET /temperature ") > -1 || HTTP_req.indexOf("GET /temperature.html ") > -1) { Serial.println("temperature page"); // À IMPLEMENTER } else if (HTTP_req.indexOf("GET /door ") > -1 || HTTP_req.indexOf("GET /door.html ") > -1) { Serial.println("door page"); // À IMPLEMENTER } else if (HTTP_req.indexOf("GET /led ") > -1 || HTTP_req.indexOf("GET /led.html ") > -1) { Serial.println("led page"); // À IMPLEMENTER } else { // 404 Non Trouvé Serial.println("404 Not Found"); // À IMPLEMENTER } } else { // 405 Méthode Non Autorisée Serial.println("405 Method Not Allowed"); // À IMPLEMENTER }

Code Arduino - Serveur Web à pages multiples

Voici le code Arduino complet qui crée un serveur web avec plusieurs pages. Pour simplifier, le contenu HTML de chaque page est très simple et intégré directement dans le code Arduino. Dans la partie suivante, nous apprendrons comment séparer le contenu HTML de chaque page dans des fichiers distincts, rendant le code plus organisé et plus facile à gérer.

/* * 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-multiple-pages */ #include <WiFiS3.h> #define PAGE_HOME 0 #define PAGE_TEMPERATURE 1 #define PAGE_DOOR 2 #define PAGE_LED 3 #define PAGE_ERROR_404 -1 #define PAGE_ERROR_405 -2 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); 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 first line of HTTP request header String HTTP_req = ""; while (client.connected()) { if (client.available()) { Serial.println("New HTTP Request"); HTTP_req = client.readStringUntil('\n'); // read the first line of HTTP request Serial.print("<< "); Serial.println(HTTP_req); // print HTTP request to Serial Monitor break; } } // read the remaining lines of HTTP request header 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 } } // ROUTING // This example supports the following: // - GET / // - GET /index // - GET /index.html // - GET /temperature // - GET /temperature.html // - GET /door // - GET /door.html // - GET /led // - GET /led.html int page_id = 0; if (HTTP_req.indexOf("GET") == 0) { // check if request method is GET if (HTTP_req.indexOf("GET / ") > -1 || HTTP_req.indexOf("GET /index ") > -1 || HTTP_req.indexOf("GET /index.html ") > -1) { Serial.println("home page"); page_id = PAGE_HOME; } else if (HTTP_req.indexOf("GET /temperature ") > -1 || HTTP_req.indexOf("GET /temperature.html ") > -1) { Serial.println("temperature page"); page_id = PAGE_TEMPERATURE; } else if (HTTP_req.indexOf("GET /door ") > -1 || HTTP_req.indexOf("GET /door.html ") > -1) { Serial.println("door page"); page_id = PAGE_DOOR; } else if (HTTP_req.indexOf("GET /led ") > -1 || HTTP_req.indexOf("GET /led.html ") > -1) { Serial.println("led page"); page_id = PAGE_LED; } else { // 404 Not Found Serial.println("404 Not Found"); page_id = PAGE_ERROR_404; } } else { // 405 Method Not Allowed Serial.println("405 Method Not Allowed"); page_id = PAGE_ERROR_405; } // send the HTTP response // send the HTTP response header if (page_id == PAGE_ERROR_404) client.println("HTTP/1.1 404 Not Found"); if (page_id == PAGE_ERROR_405) client.println("HTTP/1.1 405 Method Not Allowed"); else 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 simple HTTP response body client.println("<!DOCTYPE HTML>"); client.println("<html>"); client.println("<head>"); client.println("<link rel=\"icon\" href=\"data:,\">"); client.println("</head>"); String html; switch (page_id) { case PAGE_HOME: client.println("This is home page"); break; case PAGE_TEMPERATURE: client.println("This is temperature page"); break; case PAGE_DOOR: client.println("This is door page"); break; case PAGE_LED: client.println("This is LED page"); break; case PAGE_ERROR_404: client.println("Page Not Found"); break; case PAGE_ERROR_405: client.println("Method Not Allowed"); break; } client.println("</html>"); client.flush(); 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

Si c'est la première fois que vous utilisez Arduino Uno R4, consultez comment configurer l'environnement pour 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 Arduino
Ouvrez le moniteur série
Consultez le résultat sur le moniteur série.

COM6

Send

Attempting to connect to SSID: YOUR_WIFI IP Address: 192.168.0.2 signal strength (RSSI):-39 dBm

Autoscroll Show timestamp

Clear output

9600 baud

Newline

Vous verrez une adresse IP sur le moniteur série, par exemple : 192.168.0.2
Tapez les éléments suivants un par un dans la barre d'adresse d'un navigateur web sur votre smartphone ou PC.

192.168.0.2 192.168.0.2/index 192.168.0.2/index.html 192.168.0.2/led 192.168.0.2/led.html 192.168.0.2/door 192.168.0.2/door.html 192.168.0.2/temperature 192.168.0.2/temperature.html 192.168.0.2/blabla 192.168.0.2/blabla.html

Veuillez noter que vous devez changer le 192.168.0.2 par l'adresse IP que vous avez obtenue sur le moniteur série.
Vous verrez les pages suivantes : page d'accueil, page des LED, page de la porte, page de la température, et page Non Trouvée.
Vous pouvez également vérifier la sortie sur le moniteur série.

Le code précédent possède un contenu HTML très simple pour chaque page. Mais si nous souhaitons créer une interface élégante avec beaucoup de HTML, le code peut devenir volumineux et désordonné. Pour simplifier, nous allons apprendre à séparer le HTML du code Arduino. Cela nous permet de conserver le HTML dans des fichiers séparés, rendant ainsi la gestion et le travail plus aisés.

Code Arduino - Serveur Web complet à pages multiples

Ouvrez l'IDE Arduino.
Créez un nouveau sketch et donnez-lui un nom, par exemple, ArduinoWebServer.ino.
Copiez le code fourni et collez-le dans ce fichier.

/* * 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-multiple-pages */ #include <WiFiS3.h> #include "index.h" #include "temperature.h" #include "door.h" #include "led.h" #include "error_404.h" #include "error_405.h" #define PAGE_HOME 0 #define PAGE_TEMPERATURE 1 #define PAGE_DOOR 2 #define PAGE_LED 3 #define PAGE_ERROR_404 -1 #define PAGE_ERROR_405 -2 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 first line of HTTP request header String HTTP_req = ""; while (client.connected()) { if (client.available()) { Serial.println("New HTTP Request"); HTTP_req = client.readStringUntil('\n'); // read the first line of HTTP request Serial.print("<< "); Serial.println(HTTP_req); // print HTTP request to Serial Monitor break; } } // read the remaining lines of HTTP request header 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 } } // ROUTING // This example supports the following: // - GET / // - GET /index // - GET /index.html // - GET /temperature // - GET /temperature.html // - GET /door // - GET /door.html // - GET /led // - GET /led.html int page_id = 0; if (HTTP_req.indexOf("GET") == 0) { // check if request method is GET if (HTTP_req.indexOf("GET / ") > -1 || HTTP_req.indexOf("GET /index ") > -1 || HTTP_req.indexOf("GET /index.html ") > -1) { Serial.println("home page"); page_id = PAGE_HOME; } else if (HTTP_req.indexOf("GET /temperature ") > -1 || HTTP_req.indexOf("GET /temperature.html ") > -1) { Serial.println("temperature page"); page_id = PAGE_TEMPERATURE; } else if (HTTP_req.indexOf("GET /door ") > -1 || HTTP_req.indexOf("GET /door.html ") > -1) { Serial.println("door page"); page_id = PAGE_DOOR; } else if (HTTP_req.indexOf("GET /led ") > -1 || HTTP_req.indexOf("GET /led.html ") > -1) { Serial.println("led page"); page_id = PAGE_LED; } else { // 404 Not Found Serial.println("404 Not Found"); page_id = PAGE_ERROR_404; } } else { // 405 Method Not Allowed Serial.println("405 Method Not Allowed"); page_id = PAGE_ERROR_405; } // send the HTTP response // send the HTTP response header if (page_id == PAGE_ERROR_404) client.println("HTTP/1.1 404 Not Found"); if (page_id == PAGE_ERROR_405) client.println("HTTP/1.1 405 Method Not Allowed"); else 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 String html; switch (page_id) { case PAGE_HOME: html = String(HTML_CONTENT_HOME); break; case PAGE_TEMPERATURE: html = String(HTML_CONTENT_TEMPERATURE); html.replace("TEMPERATURE_MARKER", String(getTemperature(), 2)); // replace the marker by a real value break; case PAGE_DOOR: html = String(HTML_CONTENT_DOOR); html.replace("DOOR_STATE_MARKER", "OPENED"); // replace the marker by a real value break; case PAGE_LED: html = String(HTML_CONTENT_LED); html.replace("LED_STATE_MARKER", "OFF"); // replace the marker by a real value break; case PAGE_ERROR_404: html = String(HTML_CONTENT_404); break; case PAGE_ERROR_405: html = String(HTML_CONTENT_405); break; } 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'Arduino IDE en :

Cliquant soit sur le bouton juste en dessous de l'icône du moniteur série et choisissez Nouvel Onglet, ou utilisez les touches Ctrl+Shift+N.

Nommez le fichier index.h et cliquez sur le bouton OK

L'IDE Arduino 2 ajoute le fichier index.h.

Copiez le code ci-dessous et collez-le dans le fichier index.h.

De même, créez le fichier temperature.h sur Arduino IDE avec le contenu suivant.

De même, créez le fichier door.h sur Arduino IDE avec le contenu suivant.

De même, créez le fichier led.h sur l'IDE Arduino avec le contenu suivant.

De même, créez le fichier error_404.h dans l'IDE Arduino avec le contenu suivant.

De même, créez le fichier error_405.h sur Arduino IDE avec le contenu suivant.

Maintenant, vous avez plusieurs fichiers dans l'IDE Arduino comme ci-dessous :

Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code sur Arduino
Accédez aux pages web de la carte Arduino via un navigateur web une par une comme auparavant. Vous verrez toutes les pages web comme ci-dessous :

※ NOTE THAT:

Si vous apportez des modifications au contenu HTML dans le fichier index.h mais que vous ne modifiez rien dans le fichier ArduinoWebServer.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 ArduinoWebServer.ino. Par exemple, vous pouvez ajouter une ligne vide ou insérer un commentaire. Cette action déclenche la reconnaissance par l'IDE qu'il y a eu des changements dans le projet, garantissant que votre contenu HTML mis à jour est inclus dans le téléversement.

Tutoriels connexes

※ OUR MESSAGES

Please feel free to share the link of this tutorial. However, Please do not use our content on any other websites. We invested a lot of effort and time to create the content, please respect our work!