Arduino - Serveur Web à plusieurs pages

Préparation du matériel

Ou vous pouvez acheter les kits suivants:

À propos de l'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 brochage, le fonctionnement et la programmation), vous pouvez en savoir plus sur eux grâce aux tutoriels suivants :

• Comment démarrer avec Arduino Uno R4.
• Arduino - Serveur Web.

Comment fonctionne un serveur Web sur Arduino

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

• Créer un serveur Web capable d'écouter les requêtes HTTP provenant du navigateur Web.
• Lire la première ligne de l'en-tête de la requête HTTP lorsqu'il reçoit une requête HTTP.
• Acheminer les requêtes en fonction de la première ligne de la requête HTTP afin de déterminer quelles pages Web l'Arduino doit renvoyer.
• (Optionnel) Analyser l'en-tête de la requête HTTP pour identifier les commandes de contrôle envoyées par l'utilisateur.
• (Optionnel) Contrôler les dispositifs connectés à l'Arduino en fonction des commandes de contrôle reçues.
• Envoyer 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 des capteurs ou l'état des périphériques.

En réalisant ces tâches, l'Arduino peut gérer efficacement les requêtes HTTP et fournir des réponses appropriées au navigateur Web, ce qui permet un contrôle et une interaction basés sur le Web avec les périphériques connectés à l'Arduino.

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

Serveur Web Arduino - Algorithme de routage

Avant d'écrire le code pour la fonction de routage, vous devriez créer une liste de 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 une liste d'exemples :

• GET page d'accueil
• GET page de température
• GET page de porte
• GET page LED

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

• GET page d'accueil :
• GET /
• GET /index.html
• GET page de température :
• GET /temperature.html
• GET page de porte :
• GET /door
• GET page 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

Code Arduino - Serveur Web à plusieurs pages

Ci-dessous se trouve le code Arduino complet qui crée un serveur Web avec plusieurs pages. Pour rester simple, le contenu HTML de chaque page est très simple et intégré directement dans le code Arduino. Dans la prochaine partie, nous apprendrons comment séparer le contenu HTML de chaque page en fichiers distincts, ce qui rend le code plus organisé et plus facile à gérer.

Étapes rapides

• Si c'est la première fois que vous utilisez Arduino Uno R4, consultez Comment démarrer avec Arduino Uno R4..
• Ouvrez le Gestionnaire de bibliothèque en cliquant sur l'icône Gestionnaire de bibliothèque sur le côté gauche de l'IDE Arduino.
• Recherchez Serveur Web pour Arduino Uno R4 WiFi et localisez la bibliothèque Serveur Web créée par DIYables.
• Cliquez sur le bouton Install pour ajouter la bibliothèque Serveur Web.

• Copiez le code ci-dessus et ouvrez-le avec l'IDE Arduino
• Modifiez les informations Wi-Fi (SSID et mot de passe) dans le code pour les remplacer par les vôtres
• Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code sur l'Arduino
• Ouvrez le moniteur série
• Consultez le résultat dans le moniteur série

• Vous verrez une adresse IP dans le moniteur série, par exemple : 192.168.0.2
• Saisissez la liste suivante une par une dans la barre d'adresse d'un navigateur Web sur votre smartphone ou votre PC.

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

Le code précédent contient un contenu HTML très simple pour chaque page. Mais si nous voulons créer une interface élégante avec beaucoup de HTML, le code peut devenir long et désordonné. Pour le simplifier, nous allons apprendre à séparer le HTML du code Arduino. Cela nous permet de garder le HTML dans des fichiers séparés, ce qui facilite la gestion et le travail avec.

Code Arduino - Serveur Web complet à plusieurs pages

• 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.

• Modifiez les informations WiFi (SSID et mot de passe) dans le code pour les remplacer par les vôtres
• Créez le fichier index.h dans l'IDE Arduino en procédant comme suit :
• Soit cliquez 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.

• Donnez le nom du fichier index.h et cliquez sur le bouton OK

• Copiez le code ci-dessous et collez-le dans le 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-multiple-pages */ const char *HTML_CONTENT_HOME = R""""( <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="data:,"> <title>Home Page</title> </head> <body> <h1>Welcome to the Home Page</h1> <ul> <li><a href="/led">LED Page</a></li> <li><a href="/temperature">Temperature Page</a></li> <li><a href="/door">Door Page</a></li> </ul> </body> </html> )"""";
• De même, créez le fichier temperature.h dans l'IDE Arduino avec le contenu suivant.

/* * 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 */ const char *HTML_CONTENT_TEMPERATURE = 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> )"""";
• De même, créez le fichier door.h dans l'IDE Arduino avec le contenu suivant.

/* * 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 */ const char *HTML_CONTENT_DOOR = R""""( <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="data:,"> <title>Door Page</title> </head> <body> <h1>Door Page</h1> <p>Door State: <span style="color: red;">DOOR_STATE_MARKER</span></p> </body> </html> )"""";
• De même, créez le fichier led.h dans l'IDE Arduino avec le contenu suivant.

/* * 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 */ const char *HTML_CONTENT_LED = R""""( <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="data:,"> <title>LED Page</title> </head> <body> <h1>LED Page</h1> <p>LED State: <span style="color: red;">LED_STATE_MARKER</span></p> </body> </html> )"""";
• De même, créez le fichier error_404.h dans l'IDE Arduino avec le contenu suivant.

/* * 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 */ const char *HTML_CONTENT_404 = R""""( <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" href="data:,"> <title>404 - Page Not Found</title> <style> h1 {color: #ff4040;} </style> </head> <body> <h1>404</h1> <p>Oops! The page you are looking for could not be found on Arduino Web Server.</p> <p>Please check the URL or go back to the <a href="/">homepage</a>.</p> <p>Or check <a href="https://arduinogetstarted.com/tutorials/arduino-web-server-multiple-pages"> Arduino Web Server</a> tutorial.</p> </body> </html> )"""";
• 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 la carte Arduino
• Accédez aux pages Web de la carte Arduino dans un navigateur Web une par une, comme auparavant. Vous verrez toutes les pages Web ci-dessous :


※ Note:

• 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échargerez le code sur l'ESP32.
• Pour forcer l'IDE Arduino à mettre à jour le contenu HTML dans cette situation, vous devez apporter une modification dans le fichier ArduinoWebServer.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 modifications dans le projet, ce qui garantit que votre contenu HTML mis à jour est inclus dans le téléchargement.

Tutoriels connexes

• Arduino - Serveur Web.
• Arduino - Mot de passe du serveur Web.
• Arduino - WebSocket.
• Arduino - Traceur Web.
• Arduino - Contrôle d'un moteur servo via le Web.
• Arduino - contrôle de voiture via le Web.
• Arduino - matrice LED via le Web.
• Arduino - Température via le Web.
• Arduino - Contrôle la serrure de porte via le Web.
• L'Arduino Uno R4 WiFi contrôle la LED via le Web.
• Arduino Uno R4 WiFi contrôle le relais via le Web.