L'ESP8266, communication wifi depuis un navigateur

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.

Le code fournis en fin d'article est commenté. Nous allons en expliciter certaines parties.

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:

#include <ESP8266WiFi.h>

puis déclarer le login et le mot de passe du réseau:

// Les accès pour se connecter au réseau wifi
const char* ssid = "FABLAB";
const char* password = "FABLABFAB";

Ensuite, dans la fonction `setup()` , il suffit de se connecter avec :

WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) 
{
    delay(500);
    Serial.print(".");
}
Serial.println("");
Serial.println("WiFi connecté");

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:

`Serial.println(WiFi.localIP());`

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:

WiFiServer server(80);

Puis dans le `setup()`, on le démarre:

server.begin();

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 vérifie qu'un client est connecté
WiFiClient client = server.available();
if (!client) {
    return;
}
  
// Puis on attend qu'il envoie des données
Serial.println("Nouveau client");
while(!client.available()){
    delay(1);
}

Si un client est connecté, on analyse sa requête (c'est une chaîne de caractère):

// On lit la première ligne de la requête
String req = client.readStringUntil('\r');
Serial.println(req);
client.flush();
  
// On analyse cette requête
int val;
if (req.indexOf("/gpio/0") != -1)
{
   val = 0;
}else if (req.indexOf("/gpio/1") != -1)
{
   val = 1;
} else {
    Serial.println("Requête invalide");
    client.stop();
    return;
}

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.

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)`.

// 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 ";
s += (val)?"high":"low";
s += "</html>\n";

// Puis on l'envoie
client.print(s);

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:

if (output5State=="off") {
 client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
} else {
 client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
}

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.

wifi_relais.zip