Chargez votre page Web de configuration Arduino/ESP depuis le cloud : 7 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:09

Lors de la création d'un projet Arduino / ESP (ESP8266/ESP32), vous pouvez simplement tout coder en dur. Mais le plus souvent, quelque chose se produit et vous finirez par rattacher à nouveau votre appareil IoT à votre IDE. Ou vous avez simplement plus de personnes accédant à la configuration et vous souhaitez fournir une interface utilisateur au lieu de vous attendre à ce qu'elles comprennent le fonctionnement interne.

Cette instructable vous dira comment mettre la plupart de l'interface utilisateur dans le cloud au lieu de sur l'Arduino / ESP. En procédant de cette manière, vous économiserez de l'espace et de la mémoire. Un service fournissant des pages Web statiques gratuites est particulièrement adapté en tant que "cloud", comme les pages GitHub, mais d'autres options fonctionneront probablement également.

Pour créer la page Web de cette manière, le navigateur de l'utilisateur doit suivre 4 étapes:

1. Demander l'url racine de l'Arduino / ESP
2. Recevez une page Web très simple, indiquant à:
3. Demander un fichier JavaScript depuis le cloud
4. Recevez le code qui construit la page réelle

Ce Instructable expliquera également comment interagir avec l'Arduino/ESP une fois que la page est prête selon les étapes ci-dessus.

Le code créé sur cette instructable se trouve également sur GitHub.

Conditions préalables

Cette instructable suppose que vous avez accès à certains matériaux et à certaines connaissances préalables:

• Un Arduino (avec accès réseau) / ESP
• Un ordinateur auquel connecter ce qui précède
• Accès WiFi connecté à internet
• L'IDE Arduino installé (également pour l'ESP32)
• Vous savez comment télécharger un croquis sur votre appareil IoT
• Vous savez utiliser Git & GitHub

Étape 1: Commencer avec un simple croquis de serveur Web

Nous allons commencer aussi simplement que possible, et le laisser grandir à partir de maintenant.

#comprendre

const char* ssid = "yourssid"; const char* mot de passe = "votrepasswd"; Serveur WiFiServer (80); void setup() { //Initialize serial et attendez que le port s'ouvre: Serial.begin(115200); while(!Série) {; // attend que le port série se connecte. Nécessaire pour le port USB natif uniquement } WiFi.begin(ssid, mot de passe); while(WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println("WiFi connecté."); Serial.println("Adresse IP: "); Serial.println(WiFi.localIP()); serveur.begin(); } void loop() { // écouter les clients entrants WiFiClient client = server.available(); // écoute les clients entrants bool sendResponse = false; // défini sur true si nous voulons envoyer une réponse String urlLine = ""; // crée une chaîne pour contenir l'URL demandée if(client) // si vous obtenez un client, { Serial.println("Nouveau client."); // affiche un message sur le port série String currentLine = ""; // crée une chaîne pour contenir les données entrantes du client while(client.connected()) // boucle pendant que le client est connecté { if(client.available()) // s'il y a des octets à lire depuis le client, { char c = client.lire(); // lit un octet, puis if(c == '\n') // si l'octet est un caractère de nouvelle ligne { // si la ligne actuelle est vide, vous avez deux caractères de nouvelle ligne d'affilée. // c'est la fin de la requête HTTP du client, alors envoyez une réponse: if(currentLine.length() == 0) { sendResponse = true; // tout va bien! Pause; // sortir de la boucle while } else // si vous avez une nouvelle ligne, alors effacez currentLine: { if(currentLine.indexOf("GET /") >= 0) // cela devrait être la ligne URL { urlLine = currentLine; // enregistrez-le pour une utilisation ultérieure } currentLine = ""; // réinitialise la chaîne currentLine } } else if(c != '\r') // si vous avez autre chose qu'un caractère de retour chariot, { currentLine += c; // l'ajoute à la fin de la ligne courante } } } if(sendResponse) { Serial.print("Client demandé "); Serial.println(urlLine); // Les en-têtes HTTP commencent toujours par un code de réponse (par exemple HTTP/1.1 200 OK) // et un type de contenu afin que le client sache ce qui va arriver, puis une ligne vide: client.println("HTTP/1.1 200 OK"); client.println("Content-type:text/html"); client.println(); if(urlLine.indexOf("GET / ") >= 0) // si l'URL n'est qu'un "/" { // le contenu de la réponse HTTP suit l'en-tête: client.println("Hello world!"); } // La réponse HTTP se termine par une autre ligne vide: client.println(); } // ferme la connexion: client.stop(); Serial.println("Client déconnecté."); } }

Copiez le code ci-dessus ou téléchargez-le à partir du commit sur GitHub.

N'oubliez pas de changer le SSID et le mot de passe pour qu'ils correspondent à votre réseau.

Ce croquis utilise le bien connu Arduino

mettre en place()

et

boucle()

les fonctions. Dans le

mettre en place()

fonction, la connexion série à l'IDE est initialisée, de même que le WiFi. Une fois que le WiFi est connecté audit SSID, l'IP est imprimée et le serveur Web est démarré. A chaque itération du

boucle()

fonction, le serveur Web est vérifié pour les clients connectés. Si un client est connecté, la requête est lue et l'URL demandée est enregistrée dans une variable. Si tout semble bien, une réponse du serveur au client est effectuée en fonction de l'URL demandée.

ATTENTION! Ce code utilise la classe Arduino String pour rester simple. Les optimisations de chaîne ne sont pas dans le cadre de cette instructable. En savoir plus à ce sujet sur l'instructable about Arduino String Manipulation Using Minimal Ram.

Étape 2: Création du JavaScript distant

L'Arduino / ESP dira au navigateur du visiteur de charger ce fichier. Tout le reste sera fait par ce code JavaScript.

Dans ce Instructable, nous utiliserons jQuery, ce n'est pas strictement nécessaire, mais facilitera les choses.

Ce fichier doit être accessible depuis le web, un serveur de pages statiques suffit pour que cela fonctionne, par exemple des pages GitHub. Vous voudrez donc probablement créer un nouveau référentiel GitHub et créer un

gh-pages

branche. Mettez le code suivant dans un

.js

dans le référentiel dans la branche appropriée.

Copiez le code ci-dessus ou téléchargez-le à partir du commit sur GitHub.

Vérifiez si votre fichier est accessible. Dans le cas des pages GitHub, accédez à https://username.github.io/repository/your-file.j… (remplacez

Nom d'utilisateur

,

dépôt

et

votre-fichier.js

pour les bons paramètres).

Étape 3: Chargement du fichier JavaScript distant dans le navigateur des visiteurs

Maintenant que tout est configuré, il est temps que la page Web charge le fichier JavaScript distant.

Vous pouvez le faire en changeant la ligne 88 du croquis de

client.println("Bonjour tout le monde!"); t

client.println("");

(changer la

src

attribut pour pointer vers votre propre fichier JavaScript). Il s'agit d'une petite page Web HTML, tout ce qu'elle fait est de charger le fichier JavaScript dans le navigateur des visiteurs.

Le fichier modifié peut également être trouvé dans le commit correspondant sur GitHub.

Téléchargez le croquis ajusté sur votre Arduino / ESP.

Étape 4: Ajout de nouveaux éléments à la page

Une page vide est inutile, il est donc temps d'ajouter un nouvel élément à la page Web. Pour l'instant, ce sera une vidéo YouTube. Dans cet exemple, certains codes jQuery seront utilisés pour accomplir cela.

Ajoutez la ligne de code suivante au

init()

fonction:

$('').prop({ src: 'https://www.youtube.com/embed/k12h_FOInZg?rel=0', frameborder: '0' }).css({ width: '608px', height: '342px' }).appendTo('body');

Cela créera un

iframe

élément, définissez le bon

src

attribut et définissez la taille à l'aide de css et ajoutez l'élément au corps de la page.

jQuery nous aide à sélectionner et à modifier facilement des éléments de la page Web, quelques éléments de base à savoir:

• $('corps')

• sélectionne tout élément déjà existant, d'autres sélecteurs CSS peuvent également être utilisés

• $(' ')

  crée un nouveau

• élément (mais ne l'ajoute pas au document)

• .appendTo('.main')

• ajoute l'élément sélectionné/créé à un élément avec la classe css 'main'

• D'autres fonctions pour ajouter des éléments sont

  .ajouter()

  ,

  .prepend()

  ,

  .prependTo()

  ,

  .insérer()

  ,

  .insertAfter()

  ,

  .insertAvant()

  ,

  .après()

  ,

  .avant()

Jetez un œil au commit correspondant sur GitHub si quelque chose n'est pas clair.

Étape 5: Éléments interactifs

Une vidéo est amusante, mais le but de cette instructable est d'interagir avec l'Arduino / ESP. Remplaçons la vidéo par un bouton qui envoie des informations à l'Arduino / ESP et attend également une réponse.

Nous aurons besoin d'un

$('')

à ajouter à la page et y attacher un écouteur d'événement. L'écouteur d'événement appellera la fonction de rappel lorsque l'événement spécifié se produira:

$('').text('un bouton').on('click', function()

{ // le code ici sera exécuté lorsque le bouton sera cliqué }).appendTo('body');

Et ajoutez une requête AJAX à la fonction de rappel:

$.get('/ajax', fonction(données)

{ // le code ici sera exécuté lorsque la requête AJAX sera terminée });

Une fois la demande terminée, les données renvoyées seront ajoutées à la page:

$('

').text(data).appendTo('body');

En résumé, le code ci-dessus crée un bouton, l'ajoute à la page Web, lorsque le bouton est cliqué, une demande sera envoyée et la réponse sera également ajoutée à la page Web.

Si c'est la première fois que vous utilisez des rappels, vous voudrez peut-être vérifier le commit sur GitHub pour voir comment tout est imbriqué.

Étape 6: Répondre à l'élément interactif

Bien entendu, la requête AJAX nécessite une réponse.

Pour créer la réponse correcte pour le

/ajax

URL, nous devrons ajouter un

sinon si ()

juste après le crochet fermant de l'instruction if qui vérifie le

/

URL.

else if(urlLine.indexOf("GET /ajax") >= 0)

{ client.print("Bonjour!"); }

Dans le commit sur GitHub, j'ai également ajouté un compteur pour montrer au navigateur que chaque requête est unique.

Étape 7: Conclusion

C'est la fin de cette instructable. Vous disposez maintenant d'un Arduino/ESP desservant une petite page Web qui indique au navigateur du visiteur de charger un fichier JavaScript depuis le cloud. Une fois que JavaScript est chargé, il crée le reste du contenu de la page Web en fournissant une interface utilisateur permettant à l'utilisateur de communiquer avec l'Arduino / ESP.

Maintenant, c'est à votre imagination de créer plus d'éléments sur la page Web et d'enregistrer les paramètres localement sur une sorte de ROM (EEPROM / NVS / etc.).

Merci d'avoir lu et n'hésitez pas à donner votre avis !