Serveur Web Arduino de base – Pi My Life Up – Bien choisir son serveur d impression
Ce tutoriel décrit les étapes à suivre pour créer votre propre serveur Web Arduino.
L'installation d'un serveur Web sur l'Arduino est un processus simple qui couvre le processus pour le rendre opérationnel. Je vais également aborder certains concepts de base, tels que l'utilisation d'Ajax pour mettre à jour plutôt que d'actualiser la page à plusieurs reprises.
Vous aurez besoin de connaître le HTML de base, qui est incroyablement facile à comprendre. Si vous n'avez jamais fait de HTML, je vous recommande de vous familiariser avec w3schools pour une introduction de base.
Ce serveur ne pourra rien faire de trop sophistiqué, mais il est incroyablement utile pour quiconque souhaite afficher des données à partir de périphériques connectés aux broches ou qui souhaite interagir avec un circuit à partir d’une page Web. Le serveur Web plus puissant Raspberry Pi pourrait vous intéresser si cela ne couvre pas vraiment ce que vous recherchez.
Tous les exemples de code peuvent être trouvés sur mon Github et peuvent être facilement téléchargés (ils sont également commentés). Si vous constatez des erreurs, assurez-vous de me le faire savoir dans la section commentaires au bas de cette page.
Sommaire
Équipement
L’équipement dont vous aurez besoin pour ce tutoriel sur le serveur Web Arduino est répertorié ci-dessous.
Arduino Uno
Bouclier Ethernet ou similaire
Cordon Ethernet
Carte Micro SD (en option)
** La carte SD devra être formatée au format FAT16 ou FAT32.
Les bases du code
Si vous débutez dans le codage ou si vous êtes intéressé par certains principes de base expliqués, lisez la suite, sinon vous pouvez ignorer cette section et passer à la configuration du serveur Web avec ou sans section de carte SD.
Initialisation
Pour commencer, vous devez d’abord initialiser le serveur Web en définissant quelques variables, puis en appelant une fonction.
Tout d’abord, vous devez définir une adresse Mac, celle ci-dessous devrait convenir à la plupart des réseaux domestiques. Si vous savez exactement ce que vous voulez, n'hésitez pas à le changer.
octet mac[] =
0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED
;
Deuxièmement, vous devrez définir une adresse IP. Pour cela, il vous suffit d'appeler le Adresse IP
classe avec votre adresse IP choisie. Assurez-vous de le mettre à jour avec une adresse IP qui n’entrera pas en conflit sur votre réseau.
IPAddress ip (192, 168, 1, 177);
Troisièmement, vous devrez définir le numéro de port que le serveur doit écouter. Par défaut, HTTP pur s'exécute sur le port 80. Si vous le modifiez, vous devrez définir le port lorsque vous accéderez à la page Web dans votre navigateur. Par exemple, si votre port était 14213, alors l'adresse ressemblera à ceci: 192.168.1.177:14213
Serveur EthernetServer (80);
Enfin, dans la fonction de configuration, vous devrez initialiser le périphérique Ethernet. Une fois cette initialisation effectuée, appelez simplement le server.begin ()
Une fois que cela est fait, vous devriez maintenant pouvoir écouter les connexions et répondre avec les données, le cas échéant.
Ethernet.begin (mac, ip);
server.begin ();
Détecter une nouvelle connexion
Dans la fonction de boucle, nous devons vérifier une nouvelle connexion à chaque boucle. Si une nouvelle connexion est détectée, nous entrons dans le code logique de notre page Web.
Le code suivant détectera lorsqu'un nouveau client tente de se connecter au serveur.
Client EthernetClient = server.available ();
si (client) {
while (client.connected ()) {
if (client.available ()) {
Une fois qu'il est déterminé qu'un client est disponible, nous passons ensuite à la production de code HTML à partir du serveur Web Arduino.
Renvoyer l'en-tête de réponse HTML
Pour qu'un navigateur affiche correctement la page Web, nous devons d’abord répondre avec un en-tête de réponse HTML. Cela n’a besoin d’être compliqué, l’exemple ci-dessous est plus que suffisant pour que tout fonctionne correctement.
Si vous recherchez plus d’informations sur les champs d’en-tête, cette page wiki extrêmement pratique explique très bien tout.
client.println ("HTTP / 1.1 200 OK");
client.println ("Content-Type: text / html");
client.println ("Connection: close");
client.println ();
Sortie HTML
La sortie HTML peut simplement être effectuée en appelant client.println ()
ou client.print ()
avec le texte / HTML passé en paramètre. C’est simple, mais comme vous pouvez le voir dans les exemples plus bas dans cette page, cela alourdit vraiment le code.
Vous trouverez ci-dessous un exemple de base de la production de HTML.
client.println ("");
client.println ("");
client.print ("Valeurs analogiques
");
L’autre option consiste à stocker les fichiers HTML sur une carte SD à partir de laquelle vous pouvez accéder. Vous pouvez ensuite exécuter des requêtes AJAX pour mettre à jour des éléments sur la page Web afin qu’ils affichent les données correctes.
Vous pouvez également faire cela pour que l’Arduino exécute des actions telles que l’allumage et l’extinction d’un voyant.
Fermer la connexion
Une fois le traitement de la page Web terminé, vous devez attendre quelques instants avant de vous assurer que le client récupère les données. Au bout d'une seconde environ, fermez simplement la connexion au client.
retarder (1);
client.stop ();
Serveur Web Arduino sans carte SD
Si vous n’utilisez pas la carte SD, il est extrêmement simple de mettre en place un serveur Web.
Il est important de noter que si vous avez une carte SD insérée, mais que celle-ci n’est pas utilisée, cela peut entraîner des problèmes de communication entre le sketch et l’Arduino. Pour éviter cela, ajoutez les deux lignes suivantes dans la fonction de configuration.
pinMode (4, OUTPUT);
digitalWrite (4, HAUT);
Une fois qu’ils ont été ajoutés, vous pouvez rajouter la carte SD dans l’appareil.
Pour obtenir rapidement un serveur Web Arduino opérationnel, ouvrez simplement sketch, copiez et collez le code ci-dessous. Vous pouvez également le trouver sur ma page Github, ainsi que le code complet de tous les exemples de ce tutoriel.
#comprendre
#comprendre
octet mac[] =
0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED
;
IPAddress ip (192, 168, 1, 177);
Serveur EthernetServer (80);
void setup()
Serial.begin (9600);
while (! Série)
; // attend que le port série se connecte. Nécessaire pour le port USB natif uniquement
Ethernet.begin (mac, ip);
server.begin ();
Serial.print ("le serveur est à");
Serial.println (Ethernet.localIP ());
boucle vide () {
// écoute les clients entrants
Client EthernetClient = server.available ();
si (client) {
Serial.println ("nouveau client");
// une demande http se termine par une ligne vide
boolean currentLineIsBlank = true;
while (client.connected ())
if (client.available ())
char c = client.read ();
Serial.write (c);
if (c == ' n' && currentLineIsBlank)
client.println ("HTTP / 1.1 200 OK");
client.println ("Content-Type: text / html");
client.println ("Connection: close");
client.println ("Refresh: 5");
client.println ();
client.println ("");
client.println ("");
client.print ("Valeurs analogiques
");
pour (int analogChannel = 0; analogChannel <6; analogChannel ++)
int sensorReading = analogRead (analogChannel);
client.print ("entrée analogique");
client.print (analogChannel);
client.print ("est");
client.print (sensorReading);
client.println ("
");
client.println ("");
Pause;
si (c == ' n')
currentLineIsBlank = true;
sinon si (c! = ' r')
currentLineIsBlank = false;
retarder (1);
// ferme la connexion:
client.stop ();
Serial.println ("client déconnecté");
}
}
Une fois que vous avez téléchargé ce code sur l'Arduino, vous devez avoir un serveur Web très basique opérationnel.
Il sera actualisé toutes les 5 secondes en mettant à jour les valeurs des broches analogiques de l’Arduino (il ne s’agira que de valeurs aléatoires, sauf si vous avez un appareil ou un capteur connecté à celles-ci).
Vous pouvez également surveiller le moniteur série pour toutes les lignes de débogage situées dans le code.
Serveur Web Arduino avec une carte SD
Si vous décidez de choisir la route de la carte SD pour le serveur Web Arduino, les fichiers HTML devront être créés sur votre ordinateur, puis copiés sur la carte SD avant d'être insérés dans l'Arduino.
Un pro avec le chargement de la page Web depuis la carte SD est que vous pourriez avoir des pages plus complexes / lourdes sans avoir à écrire des centaines de client.write lignes. Cela permet également d'éviter toute situation de faible mémoire qui se produit généralement lorsque trop de code est exécuté sur l'Arduino.
Initialisation de la carte SD
Avant de pouvoir accéder à la carte SD, vous devez importer le package SD et l’initialiser dans la fonction de configuration. La vérification dans la fonction de configuration verra si elle peut accéder à la carte, sinon émettra une erreur dans le moniteur série.
Serial.println ("La vérification de la carte SD est accessible ...");
if (! SD.begin (4))
Serial.println ("ERROR - Échec d'initialisation de la carte SD!");
revenir; // l'initialisation a échoué
Serial.println ("SUCCESS - Carte SD initialisée.");
Chargement du fichier
Lorsque vous êtes prêt à charger le fichier, utilisez simplement sd.open (nom du fichier)
pour ouvrir le fichier. Utilisez une instruction if pour vous assurer que le fichier existe, puis parcourez le contenu du fichier jusqu'à la fin.
webPage = SD.open ("index.htm"); // ouvrir un fichier de page Web
si (page Web) {
while (webPage.available ())
client.write (webPage.read ()); // envoyer une page Web au client
webPage.close ();
Vous trouverez ci-dessous un exemple de page Web chargée via la carte SD avec Ajax (expliqué ci-dessous) mettant à jour les éléments de la page.
Effectuer des actions via la page Web (AJAX)
Il se peut que vous souhaitiez contrôler un appareil ou un capteur via la page Web. Dans cette section, je vais examiner l'exécution de demandes et de mises à jour à l'aide d'AJAX. Cela signifie que vous ne verrez pas la page se charger encore et encore, mais elle sera toujours mise à jour si nécessaire.
AJAX ou JavaScript et XML asynchrones est un peu trop compliqué à couvrir complètement dans ce tutoriel, mais je vais passer en revue les bases de l’utiliser sur Arduino. Vous devriez pouvoir adapter les exemples à vos besoins sans trop de problèmes.
Exemple AJAX
AJAX fonctionne en envoyant une requête au serveur. Le serveur vérifiera ensuite si la chaîne ajaxrefresh ou ledstatus existe dans l'en-tête (pour cet exemple). Si tel est le cas, il générera les données pertinentes et les renverra.
Le JavaScript trouve ensuite l’élément HTML pertinent avec le bon identifiant puis remplace le innerHTML avec la réponse de la demande AJAX.
L'exemple ci-dessous envoie une demande au serveur Web exécuté sur l'Arduino avec la variable GET. ajaxrefresh. Si le serveur renvoie des données, il remplacera le innerHTML de l'élément qui a l'identifiant données analogiques.
Ce script s'exécute toutes les 5 secondes mais peut être ajusté pour répondre à vos besoins.
Fonctions Arduino Ajax
Les deux fonctions ci-dessous sont appelées chaque fois que la demande AJAX correspondante parvient au serveur. C’est très simple: le premier lit les broches analogiques et renvoie les données correspondantes.
La deuxième fonction allumera ou éteindra la LED ROUGE en fonction de son état actuel. Il renverra également l'état de la DEL afin qu'AJAX puisse mettre à jour la valeur sur la page Web.
void ajaxRequest (client EthernetClient)
pour (int analogChannel = 0; analogChannel <6; analogChannel ++)
int sensorReading = analogRead (analogChannel);
client.print ("entrée analogique");
client.print (analogChannel);
client.print ("est");
client.print (sensorReading);
client.println ("
");
void ledChangeStatus (client EthernetClient)
int state = digitalRead (RED);
Serial.println (état);
si (état == 1)
écriture numérique (ROUGE, FAIBLE);
client.print ("OFF");
autre
digitalWrite (RED, HIGH);
client.print ("ON");
AJAX avec HTML généré par l'Arduino
L'exemple ci-dessous contient tout le code HTML et JavaScript entièrement généré par l'Arduino. JavaScript envoie des requêtes AJAX au serveur Arduino qui met à jour la page en fonction des résultats fournis.
Un problème que j'ai remarqué en générant tout le code sur l'Arduino est qu'il a commencé à manquer d'espace et à donner des avertissements de stabilité. Cela pourrait être un problème si vous voulez des tonnes de capteurs et d'options sur la page. Vous voudrez peut-être envisager de stocker le code HTML sur une carte SD et de le récupérer à partir de là.
boucle vide () {
Client EthernetClient = server.available ();
si (client) {
Serial.println ("nouveau client");
boolean currentLineIsBlank = true;
while (client.connected ()) {
if (client.available ()) {
char c = client.read ();
if (HTTP_req.length () < 120)
HTTP_req += c; // save the HTTP request 1 char at a time
Serial.write(c);
if (c == 'n' && currentLineIsBlank)
{
// send a standard http response header
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
Serial.println(HTTP_req);
if (HTTP_req.indexOf("ajaxrefresh") >= 0)
// lit l'état du commutateur et l'entrée analogique
ajaxRequest (client);
Pause;
else if (HTTP_req.indexOf ("ledstatus")> = 0)
// lit l'état du commutateur et l'entrée analogique
ledChangeStatus (client);
Pause;
autre {
client.println ("");
client.println ("");
client.println ("");
// affiche la valeur de chaque broche d'entrée analogique
client.print ("Valeurs analogiques
");
client.println ("Valeurs des entrées analogiques Arduino loading .....");
client.println ("État des DEL Arduino
");
client.println ("");
if (digitalRead (RED) == 1)
client.println ("On");
autre
client.println ("Off");
client.println (" | ");
client.println ("");
Pause;
}
}
si (c == ' n')
// tu commences une nouvelle ligne
currentLineIsBlank = true;
sinon si (c! = ' r')
// vous avez un personnage sur la ligne en cours
currentLineIsBlank = false;
}
}
retarder (1);
client.stop ();
HTTP_req = "";
Serial.println ("client déconnecté");
}
}
AJAX avec des fichiers HTML sur une carte SD
Comme vous pouvez le voir ci-dessous, le résultat est beaucoup plus net en enregistrant simplement le code HTML dans un fichier de la carte SD. Cela devrait vous aider à garder votre script pour traiter principalement le code, en particulier si vous faites tout via AJAX et chargez le code HTML sur la carte SD.
N'oubliez pas qu'il ne s'agit que de la boucle du code si vous souhaitez que la version complète soit dirigée vers ma page Github.
boucle vide ()
{
Client EthernetClient = server.available ();
si (client) {
Serial.println ("nouveau client");
boolean currentLineIsBlank = true;
while (client.connected ()) {
if (client.available ()) {
char c = client.read ();
if (HTTP_req.length () < 80)
HTTP_req += c;
if (c == 'n' && currentLineIsBlank)
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println("Connection: close");
client.println();
if (HTTP_req.indexOf("ajaxrefresh") >= 0)
ajaxRequest (client);
Pause;
else if (HTTP_req.indexOf ("ledstatus")> = 0)
ledChangeStatus (client);
Pause;
autre
webPage = SD.open ("index.htm");
si (page Web)
while (webPage.available ())
client.write (webPage.read ());
webPage.close ();
Pause;
si (c == ' n')
currentLineIsBlank = true;
sinon si (c! = ' r')
currentLineIsBlank = false;
}
}
retarder (1);
client.stop ();
HTTP_req = "";
Serial.println ("client déconnecté");
}
}
Dépannage
Comme avec tout projet Arduino, vous pouvez rencontrer quelques problèmes, les problèmes suivants ne sont que quelques-uns des problèmes rencontrés lors de la création de ce didacticiel.
- Je ne peux pas accéder à ma page Web:Vérifiez l’adresse IP et assurez-vous qu’elle n’entre pas en conflit avec un autre appareil du réseau. Essayez également d’envoyer une requête ping à l’adresse IP pour voir si vous obtenez une réponse.
- Ma carte SD dit que c'est inaccessible: Maintenez le bouton éteint enfoncé, puis insérez la carte SD. Je trouve que cela règle généralement le problème.
- CSS: Vous pouvez inclure des feuilles de style CSS sur vos pages Web. Vous pouvez le faire en ligne ou dans l'en-tête entre les balises de style. C’est quelque chose que vous voudrez peut-être approfondir si vous n’avez pas fait beaucoup de CSS. Ce n’est vraiment nécessaire que si vous voulez que vos pages aient une belle apparence.
Autres mises en œuvre
Vous pouvez utiliser un serveur Web de beaucoup plus de façons pour augmenter les fonctionnalités de votre circuit. Je vais rapidement énumérer quelques projets pour lesquels vous voudrez peut-être mettre en place une interface Web.
- Contrôle du ventilateur / de la température – Surveillez une salle de serveur, une serre, ou quelque chose de similaire où la chaleur et le flux d'air sont importants Vous pouvez ajouter des commandes pour allumer et éteindre les chauffages et les ventilateurs.
- Compteur – Utilisez un capteur de mouvement pour détecter les mouvements et comptez chaque fois que le capteur est déclenché. Vous pouvez appliquer cette même logique avec presque n'importe quel type de capteur.
J'espère que ce tutoriel sur le serveur Web Arduino vous a aidé à créer un site Web où vous pourrez visualiser et interagir avec des données. Si vous avez des recommandations, des conseils ou avez remarqué que quelque chose ne va pas, n'hésitez pas à laisser un commentaire sur notre forum.
Commentaires
Le 3 février 2021 à 15 h 19 min, Lara a dit :
Merci pour le tuto :)
Laisser un commentaire