| Prochaine révision | Révision précédente |
| howto:arduino-esp:esp_atelier1 [2021/06/24 15:46] – créée - modification externe 127.0.0.1 | howto:arduino-esp:esp_atelier1 [2022/11/14 10:10] (Version actuelle) – admin |
|---|
| L'objectif de cette première approche du **microcontrôleur ESP8266** va être de comprendre et d'expérimenter les possibilités de communication wifi de la puce. | L'objectif de cette première approche du **microcontrôleur ESP8266** va être de comprendre et d'expérimenter les possibilités de communication wifi de la puce. |
| |
| La première étape va être d'installer la chaîne de compilation dans l'IDE d'Arduino. En effet, les puces ESP ne sont pas gérées nativement. Dans les préférences, ajouter l'URL http://arduino.esp8266.com/stable/package_esp8266com_index.json dans le champ *URL de gestionnaire de cartes supplémentaires*. Aller ensuite dans *Outils>Type de carte>Gestionnaire de carte* puis, tout en haut du menu déroulant, choisir *Gestionnaire de carte*. Entrer *ESP* dans le champ de recherche, puis installer le gestionnaire correspondant. Une fois le téléchargement terminé, les nouvelles cartes disponibles sont apparues dans la liste. Celles du Fablab sont des **NodeMCU 1.0**. Une fois cette carte sélectionnée, vous verrez apparaître dans les exemples une série de dossiers spécifiques à l'ESP, que nous vous encourageons fortement à explorer. | La première étape va être d'installer la chaîne de compilation dans l'IDE d'Arduino. En effet, les puces ESP ne sont pas gérées nativement. |
| | * Dans les préférences, ajouter l'URL http://arduino.esp8266.com/stable/package_esp8266com_index.json dans le champ *URL de gestionnaire de cartes supplémentaires*. |
| | * Aller ensuite dans *Outils>Type de carte>Gestionnaire de carte* puis, tout en haut du menu déroulant, choisir *Gestionnaire de carte*. Entrer *ESP* dans le champ de recherche, puis installer le gestionnaire correspondant. |
| | |
| | Une fois le téléchargement terminé, les nouvelles cartes disponibles sont apparues dans la liste. Celles du Fablab sont des **NodeMCU 1.0**. Une fois cette carte sélectionnée, vous verrez apparaître dans les exemples une série de dossiers spécifiques à l'ESP, que nous vous encourageons fortement à explorer. |
| |
| Le code fournis en fin d'article est commenté. Nous allons en expliciter certaines parties. | Le code fournis en fin d'article est commenté. Nous allons en expliciter certaines parties. |
| |
| #1-Le Code | ===== Le Code ===== |
| | |
| | ==== Se connecter au Wifi ==== |
| |
| Se connecter au Wifi | |
| -------------------- | |
| La première étape est bien sûr d'avoir sous la main un routeur Wifi, branché au web ou non, pour créer un réseau local par lequel transiteront les données. | La première étape est bien sûr d'avoir sous la main un routeur Wifi, branché au web ou non, pour créer un réseau local par lequel transiteront les données. |
| |
| La première étape, importer la lib Wifi pour l'ESP: | La première étape, importer la lib Wifi pour l'ESP: |
| | <code> |
| `#include <ESP8266WiFi.h>` | #include <ESP8266WiFi.h> |
| | </code> |
| |
| puis déclarer le login et le mot de passe du réseau: | puis déclarer le login et le mot de passe du réseau: |
| |
| ``` | <code> |
| // Les accès pour se connecter au réseau wifi | // Les accès pour se connecter au réseau wifi |
| const char* ssid = "FABLAB"; | const char* ssid = "FABLAB"; |
| const char* password = "FABLABFAB"; | const char* password = "FABLABFAB"; |
| ``` | </code> |
| |
| Ensuite, dans la fonction `setup()` , il suffit de se connecter avec : | Ensuite, dans la fonction `setup()` , il suffit de se connecter avec : |
| |
| ``` | <code> |
| WiFi.begin(ssid, password); | WiFi.begin(ssid, password); |
| while (WiFi.status() != WL_CONNECTED) | while (WiFi.status() != WL_CONNECTED) |
| Serial.println(""); | Serial.println(""); |
| Serial.println("WiFi connecté"); | Serial.println("WiFi connecté"); |
| ``` | </code> |
| La boucle `while` permet seulement de signifier à l'utilisateur que l'ESP est en train de se connecter (il aura fallu, au préalable, lancer la communication série avec `Serial.begin(115200);` ). | La boucle `while` permet seulement de signifier à l'utilisateur que l'ESP est en train de se connecter (il aura fallu, au préalable, lancer la communication série avec `Serial.begin(115200);` ). |
| |
| Puisque nous affichons quelques trucs sur la console, profitons en pour afficher l'adresse IP qui a été attribuée par le routeur: | Puisque nous affichons quelques trucs sur la console, profitons en pour afficher l'adresse IP qui a été attribuée par le routeur: |
| | <code> |
| `Serial.println(WiFi.localIP());` | `Serial.println(WiFi.localIP());` |
| | </code> |
| |
| Le serveur Web | ==== Le serveur Web ==== |
| -------------- | |
| |
| Pour communiquer avec l'ESP, nous utiliserons notre navigateur préféré (sur un ordinateur ou un smartphone). Il faut donc, côté ESP, lancer un serveur web, qui recevra les requêtes et les traitera. On le déclare: | Pour communiquer avec l'ESP, nous utiliserons notre navigateur préféré (sur un ordinateur ou un smartphone). Il faut donc, côté ESP, lancer un serveur web, qui recevra les requêtes et les traitera. On le déclare: |
| | <code> |
| `WiFiServer server(80);` | WiFiServer server(80); |
| | </code> |
| |
| Puis dans le `setup()`, on le démarre: | Puis dans le `setup()`, on le démarre: |
| | <code> |
| | server.begin(); |
| | </code> |
| |
| `server.begin();` | ==== Client et requêtes ==== |
| | |
| CLient et requêtes | |
| ------------------ | |
| |
| Le principe de l'interaction entre la navigateur web d'une part (qui sera ici le `client`) et l'ESP va être ici de récupérer la requête du client, de l'analyser et d'en déduire l'action à réaliser. La requête du client au serveur n'est autre que l'URL tapée dans le navigateur. | Le principe de l'interaction entre la navigateur web d'une part (qui sera ici le `client`) et l'ESP va être ici de récupérer la requête du client, de l'analyser et d'en déduire l'action à réaliser. La requête du client au serveur n'est autre que l'URL tapée dans le navigateur. |
| On surveille d'abord la présence d'une requête, donc on attaque la boucle `loop()` avec : | On surveille d'abord la présence d'une requête, donc on attaque la boucle `loop()` avec : |
| |
| ``` | <code> |
| // On vérifie qu'un client est connecté | // On vérifie qu'un client est connecté |
| WiFiClient client = server.available(); | WiFiClient client = server.available(); |
| } | } |
| | |
| // Puis on attends qu'il envoie des données | // Puis on attend qu'il envoie des données |
| Serial.println("Nouveau client"); | Serial.println("Nouveau client"); |
| while(!client.available()){ | while(!client.available()){ |
| delay(1); | delay(1); |
| } | } |
| ``` | </code> |
| Si un client est connecté, on analyse sa requête (c'est une chaîne de caractère): | Si un client est connecté, on analyse sa requête (c'est une chaîne de caractère): |
| |
| ``` | <code> |
| // On lit la première ligne de la requête | // On lit la première ligne de la requête |
| String req = client.readStringUntil('\r'); | String req = client.readStringUntil('\r'); |
| return; | return; |
| } | } |
| ``` | </code> |
| En résumé, si l'utilisateur entre `http://adresse_ip/gpio/0` ou `http://adresse_ip/gpio/1` dans son navigateur, la variable `val` va passer de 0 à 1. La chaîne `/gpio/0` a été choisie arbitrairement, à vous de choisir ce qui vous parle le mieux. On peut imaginer un simple `/on` et `/off`, par exemple. | En résumé, si l'utilisateur entre `http://adresse_ip/gpio/0` ou `http://adresse_ip/gpio/1` dans son navigateur, la variable `val` va passer de 0 à 1. La chaîne `/gpio/0` a été choisie arbitrairement, à vous de choisir ce qui vous parle le mieux. On peut imaginer un simple `/on` et `/off`, par exemple. |
| |
| La suite est très simple, on manipule la pin digitale comme on pourrait le faire sur un arduino. | La suite est très simple, on manipule la pin digitale comme on pourrait le faire sur un arduino. |
| |
| La réponse HTML | ==== La réponse HTML ==== |
| --------------- | |
| |
| Le programme pourrait s'arrêter ici, mais il est intéressant de noter que le serveur, une fois qu'il a traité la requête peut envoyer une réponse sous forme html, qui apparaîtra sur le navigateur du client. Il faut créer une chaîne de caractère, puis l'envoyer à l'aide de la commande `client.print(String)`. | Le programme pourrait s'arrêter ici, mais il est intéressant de noter que le serveur, une fois qu'il a traité la requête peut envoyer une réponse sous forme html, qui apparaîtra sur le navigateur du client. Il faut créer une chaîne de caractère, puis l'envoyer à l'aide de la commande `client.print(String)`. |
| |
| ``` | <code> |
| // On prépare la réponse | // On prépare la réponse |
| String s = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n<!DOCTYPE HTML>\r\n<html>\r\nGPIO is now "; | String s = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n<!DOCTYPE HTML>\r\n<html>\r\nGPIO is now "; |
| client.print(s); | client.print(s); |
| |
| ``` | </code> |
| |
| Amélioration de l'Html | ==== Amélioration de l'Html ==== |
| ---------------------- | |
| |
| Il est un peu contraignant de devoir demander à l'utilisateur de mémoriser la syntaxe précise de l'URL à entrer pour allumer ou éteindre la pin digitale. Il paraîtrait plus logique de proposer à l'utilisateur des boutons sur la page web. Si les boutons créés sur les pages contiennent des liens hypertextes, l'ESP pourra analyser l'URL de destination de ces boutons comme il l'a fait précédemment avec les URL entrées à la main. C'est comme cela que fonctionne le code proposé par Rui Santos sur son excellent site: https://randomnerdtutorials.com/esp8266-web-server/ . | Il est un peu contraignant de devoir demander à l'utilisateur de mémoriser la syntaxe précise de l'URL à entrer pour allumer ou éteindre la pin digitale. Il paraîtrait plus logique de proposer à l'utilisateur des boutons sur la page web. Si les boutons créés sur les pages contiennent des liens hypertextes, l'ESP pourra analyser l'URL de destination de ces boutons comme il l'a fait précédemment avec les URL entrées à la main. C'est comme cela que fonctionne le code proposé par Rui Santos sur son excellent site: https://randomnerdtutorials.com/esp8266-web-server/ . |
| |
| Analysons la partie HTML qui affiche les boutons: | Analysons la partie HTML qui affiche les boutons: |
| | <code> |
| ``` | |
| if (output5State=="off") { | if (output5State=="off") { |
| client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>"); | client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>"); |
| client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>"); | client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>"); |
| } | } |
| ``` | </code> |
| On voit que le paramètre `href` prend des URL semblables à celles que nous avons utilisé précédemment. | On voit que le paramètre `href` prend des URL semblables à celles que nous avons utilisé précédemment. |
| Je vous laisse le soin d'explorer le code de Mr Santos, la majorité des ajouts est relative à la stylisation en Css des parties créées en html. | Je vous laisse le soin d'explorer le code de Mr Santos, la majorité des ajouts est relative à la stylisation en Css des parties créées en html. |
| |
| Fichier d'exemple, un relais piloté en wifi | ===== Fichier d'exemple, un relais piloté en wifi ===== |
| ------------------------------------------- | |
| {{ :ateliers:wifi_relais.zip |}} | {{ :ateliers:wifi_relais.zip |}} |
| |