Arduino UNO R4 - Serveur Web
Dans ce guide, nous vous montrerons comment faire fonctionner une carte Arduino UNO R4 R4 WiFi comme serveur Web. Vous pourrez consulter des pages sur le serveur Web Arduino UNO R4 en utilisant un navigateur sur votre ordinateur ou votre smartphone. Cela vous permettra de voir et de modifier des valeurs sur l'Arduino UNO R4. Nous apprendrons les étapes suivantes pour programmer l'Arduino UNO R4 WiFi à cette fin :
- Arduino UNO R4 Web Server - Page unique : Cela nous aide à vérifier les lectures des capteurs sur l'Arduino UNO R4 via une page Web.
- Arduino UNO R4 Web Server - Page unique : Nous rendrons possible la gestion de l'Arduino UNO R4 via un navigateur Web.
- Arduino UNO R4 Web Server - Page unique : Nous apprendrons comment déplacer des éléments HTML (tels que HTML, CSS et JavaScript) vers un fichier différent dans l'IDE Arduino.
- Arduino UNO R4 Web Server - Plusieurs pages : Nous créerons diverses pages Web telles que index.html, temperature.html, led.html, error_404.html et error_405.html, entre autres.
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables STEM V4 IoT (Arduino inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
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 UNO R4 via le Web
Le code Arduino UNO R4 effectue ces tâches :
- Construire un serveur web qui reçoit des requêtes HTTP d'un navigateur web.
- Lorsqu'un navigateur web envoie une requête, l'Arduino UNO R4 répond avec :
- En-tête HTTP
- Corps HTTP : Cela contient du contenu HTML et des données des capteurs.
- Si c'est votre première utilisation de l'Arduino Uno R4 WiFi/Minima, reportez-vous au tutoriel sur Arduino UNO R4 - Installation du logiciel..
- Connectez la carte Arduino Uno R4 à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte Arduino Uno R4 appropriée (par exemple, Arduino Uno R4 WiFi) et le port COM.
- Ouvrez le Gestionnaire de bibliothèques en cliquant sur l'icône Gestionnaire de bibliothèques sur le côté gauche de l'IDE Arduino.
- Recherchez Web Server for Arduino Uno R4 WiFi et localisez la bibliothèque Web Server créée par DIYables.
- Cliquez sur le bouton Install pour ajouter la bibliothèque Web Server.
- Copiez le code et ouvrez-le dans l'IDE Arduino.
- Remplacez les détails du Wi‑Fi (SSID et mot de passe) dans le code par les vôtres.
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code vers l'Arduino UNO R4.
- Ouvrez le Moniteur série.
- Regardez les résultats dans le Moniteur série.
- Regardez l'adresse IP affichée et saisissez-la dans la barre d'adresse d'un navigateur web sur votre smartphone ou votre ordinateur.
- Puis, vous verrez ces informations sur le moniteur série.
- Lorsque vous saisissez l’adresse IP dans votre navigateur, vous verrez une page web simple qui affiche des informations sur la carte Arduino UNO R4. La page apparaîtra comme suit :
Voici le code Arduino UNO R4 qui réalise les tâches mentionnées ci-dessus :
/*
* Ce code Arduino UNO R4 a été développé par newbiely.fr
* Ce code Arduino UNO R4 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-uno-r4/arduino-uno-r4-web-server
*/
#include <UnoR4WiFi_WebServer.h>
const char HTML_CONTENT[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML>
<html>
<head>
<link rel="icon" href="data:,">
</head>
<p>
Temperature: <span style="color: red;">%TEMP_PLACE_HOLDER% °C</span>
</p>
</html>
)rawliteral";
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
// Create web server instance
UnoR4WiFi_WebServer server;
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 handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = getTemperature();
String response = HTML_CONTENT;
response.replace("%TEMP_PLACE_HOLDER%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("Arduino Uno R4 WiFi - Web Server");
// Connect to WiFi
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// Configure routes
server.addRoute("/", handleHome);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
Étapes rapides
Suivez ces instructions étape par étape :
COM6
Arduino Uno R4 WiFi - Web Server
Connecting to YOUR_WIFI_SSID
connected!
IP address: 192.168.0.254
Starting web server on IP: 192.168.0.254
=== Web Server Ready! ===
Visit: http://192.168.0.254
Autoscroll
Clear output
9600 baud
Newline
COM6
Arduino Uno R4 WiFi - Web Server
Connecting to YOUR_WIFI_SSID
connected!
IP address: 192.168.0.254
Starting web server on IP: 192.168.0.254
=== Web Server Ready! ===
Visit: http://192.168.0.254
Method: GET
Requested path: /
Client disconnected
Autoscroll
Clear output
9600 baud
Newline
Pour créer une page web attrayante en utilisant une interface utilisateur graphique (IUG), consultez la dernière partie de ce tutoriel.
Contrôler l'Arduino UNO R4 via le Web
Gérer un appareil connecté à l'Arduino UNO R4 est un peu plus complexe que de simplement vérifier une valeur. Cette complexité survient parce que l'Arduino UNO R4 doit interpréter la commande qu'il reçoit du navigateur Web afin de déterminer la réponse appropriée. Voici comment le code de l'Arduino UNO R4 gère cette situation :
- Construire un serveur Web qui reçoit des requêtes HTTP d'un navigateur Web.
- Traiter la requête du navigateur en procédant à :
- Lire l'en-tête de la requête HTTP.
- Examiner l'en-tête de la requête HTTP pour déterminer la commande de contrôle nécessaire.
- Contrôler le dispositif ou l'élément connecté en utilisant l'Arduino UNO R4 selon la commande de contrôle.
- Envoyer une réponse HTTP.
- Optionnellement, il peut également envoyer un corps de réponse HTTP contenant du contenu HTML pour afficher les détails sur l'état du contrôle (si nécessaire).
Pour un exemple plus complet et plus détaillé, je vous suggère de consulter les tutoriels ci-dessous.
Séparer le contenu HTML dans un autre fichier dans l'IDE Arduino
Pour créer une page web basique avec seulement quelques contenus, vous pouvez inclure le HTML dans le code Arduino UNO R4 comme mentionné précédemment.
Si vous souhaitez créer une page Web plus complexe et impressionnante avec beaucoup de contenu, il n'est pas facile d'intégrer tout le HTML, le CSS et le JavaScript directement dans le code de l'Arduino UNO R4. Dans ce cas, vous pouvez utiliser une méthode différente pour gérer le code.
- Le code Arduino UNO R4 doit être enregistré dans un fichier nommé .ino.
- Le code HTML, qui comprend HTML, CSS et JavaScript, doit être enregistré dans un fichier différent nommé .h. Cela aide à garder le contenu de la page web séparé du code Arduino UNO R4, ce qui facilite sa gestion et sa modification.
Nous devons prendre deux étapes majeures :
- Création de contenu HTML
- Programmation de l'Arduino UNO R4
Préparation du contenu HTML
- Créez un fichier HTML sur votre ordinateur. Ce fichier doit inclure la conception de votre interface utilisateur en utilisant HTML, CSS et JavaScript.
- Dans le fichier HTML, placez un espace réservé à l'endroit où vous souhaitez que s'affichent les données de l'Arduino UNO R4. Pour l'instant, utilisez une valeur d'exemple.
- Vérifiez et ajustez la conception de votre fichier jusqu'à ce que vous en soyez satisfait.
- Remplacez la valeur de l'espace réservé dans votre fichier HTML par une étiquette unique, telle que TEMPERATURE_MARKER. Plus tard, vous utiliserez la commande String.replace("TEMPERATURE_MARKER", real_value); dans votre script Arduino UNO R4 pour afficher les données réelles de l'Arduino.
- Ensuite, nous transférerons ce contenu HTML dans un fichier .h dans l'IDE Arduino.
Programmation de l'Arduino UNO R4
- Démarre l'IDE Arduino et crée un nouveau fichier. Nomme-le comme ceci : newbiely.com.ino.
- Prends le code ci-dessous et mets-le dans le nouveau fichier que tu as créé.
/*
* Ce code Arduino UNO R4 a été développé par newbiely.fr
* Ce code Arduino UNO R4 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-uno-r4/arduino-uno-r4-web-server
*/
#include <UnoR4WiFi_WebServer.h>
#include "index.h"
const char WIFI_SSID[] = "YOUR_WIFI_SSID"; // change your network SSID (name)
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD"; // change your network password
UnoR4WiFi_WebServer server;
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 handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = getTemperature();
String response = HTML_CONTENT;
response.replace("TEMPERATURE_MARKER", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("Arduino Uno R4 WiFi - Web Server");
// Connect to WiFi
Serial.print("Connecting to ");
Serial.println(WIFI_SSID);
WiFi.begin(WIFI_SSID, WIFI_PASSWORD);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}
Serial.println("connected!");
Serial.print("IP address: ");
Serial.println(WiFi.localIP());
// Configure routes
server.addRoute("/", handleHome);
// Start server
server.begin();
Serial.println("\n=== Web Server Ready! ===");
Serial.print("Visit: http://");
Serial.println(WiFi.localIP());
}
void loop() {
server.handleClient();
}
- Mettez à jour le code avec vos détails WiFi (SSID et mot de passe)
- Dans l'IDE Arduino, créez le fichier nommé index.h
- Cliquez sur le bouton sous l'icône du moniteur série et sélectionnez Nouvel onglet, ou appuyez sur Ctrl+Shift+N.
- Nommez le fichier index.h et appuyez sur le bouton OK.
- Copiez le code ci-dessous et collez-le dans le fichier nommé index.h.
/*
* Ce code Arduino UNO R4 a été développé par newbiely.fr
* Ce code Arduino UNO R4 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-uno-r4/arduino-uno-r4-web-server
*/
const char *HTML_CONTENT = R""""(
REPLACE_YOUR_HTML_CONTENT_HERE
)"""";
- Insérez votre contenu HTML préparé à l'emplacement REPLACE_YOUR_HTML_CONTENT_HERE. Il est acceptable d'utiliser des sauts de ligne. Voici un exemple de fichier index.h :
/*
* Ce code Arduino UNO R4 a été développé par newbiely.fr
* Ce code Arduino UNO R4 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-uno-r4/arduino-uno-r4-web-server
*/
const char *HTML_CONTENT = R""""(
<!DOCTYPE html>
<html>
<head>
<title>Arduino Uno R4 - 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>
)"""";
- Vous avez maintenant le code dans deux fichiers : newbiely.com.ino et index.h
- Cliquez sur le bouton Upload dans l'IDE Arduino pour transférer le code vers l'Arduino UNO R4
- Ouvrez la page Web de la carte Arduino UNO R4 dans votre navigateur Web, comme les fois précédentes. Elle s'affichera comme suit :
Pour un guide détaillé, veuillez consulter le tutoriel Arduino UNO R4 - Température via le Web..
※ Note:
Si vous modifiez le HTML dans le fichier nommé "index.h" mais que vous ne modifiez pas le fichier "newbiely.com.ino", l'IDE Arduino ne mettra pas à jour le HTML lorsque vous compilerez et téléverserez le code sur l'ESP32.
Pour que l'IDE Arduino mette à jour le HTML, vous devez modifier quelque chose dans le fichier "newbiely.com.ino". Vous pouvez ajouter une ligne vide ou un commentaire. Cela indique à l'IDE que le projet a changé, il inclut donc votre nouveau HTML lors du téléversement.
Serveur Web Arduino UNO R4 - Plusieurs pages
Visitez ce tutoriel sur Arduino UNO R4 - Serveur Web à pages multiples..