A la découverte de l'ESP8266

ESP8266

L'ESP8266 est un module qui assure une interface entre une liason série et un connexion WIFI. Cependant le circuit intégré qui est utilisé peut faire bien plus.

Liens utiles

En français

En anglais

• un site : http://www.esp8266.com
• un blog qui fixe bien les idées pour démarrer avec l'ESP8266 : ESP8266 Quick Start Guide
• un livre gratuit sur ESP8266 : Un peu le seul document disponible sur ce module qui aborde différentes versions de l'ESP,  et les manière de l'exploité (via commande AT, le SDK natif, ou la librairie Arduino entre autres)

Firmware

NodeMCU

NodeMCU propose un firmware simple d'approche permettant l'exécution de script Lua. Semble poser des problèmes de taille de pile disponible (les scripts étant analysés (parsé) dans la mémoire de l'ESP (48Ko).

IDE Arduino

Il est possible de compiler un firmware directement depuis l'IDE d'Arduino, voir détail par ici :WhatIMadeToday 

Quelques liens:

• Référence des fonctions/librairies utilisables avec l'IDE.

IDE PlateformIO

>> http://platformio.org/ 

Un excellent IDE pour le développement autour des objets connectés et notamment l'ESP8266. Je le préfère largement à la version Arduino, car il est bien plus professionnel que l'IDE Arduino. Entre autre un vrai multi-fenêtrage efficace, complétion de code nickel, aide à la correction syntaxique, bonne reconnaissance des symboles. L'IDE est basé sur l'excellent éditeur OpenSource et multiplateforme de texte Atom et le compilateur cross plateforme LLVM.

Premier Test 

Pour ne pas déroger à la règle des Hello World, je vous propose ici un petit HelloWorld Connecté. L'objectif est de pouvoir piloter une LED à l'aide du module ESP8266-12E (nodeMCU), de l'IDE d'Arduino et d'un LED et une resistance.
Le pilotage de la LED pourra se faire via un browser sur un ordinateur ou un portable.

L'électronique

Pour le petit montage d'exemple, j'ai choisi de le faire sur une Bred Board, qui évite dans un premier temps toute soudure.
Pour connecter la LED au circuit, il faut limiter le courant, pour cela j'ai choisi un résistance de 100 Ohm (marron noir noir or (5%) ou Marron noir noir noir marron (1%) ). Il est important de limiter le courant car vous ne devez pas dépasser les 15 mA sur une sortie de l'ESP8266.

 Le logiciel

Coté logiciel, nous allons avoir deux parties distinct:

• Firmware que nous allons enregistrer dans le module ESP8266. Ce dernier aura la fonction de répondre aux accès via l'interface Wifi d'un explorateur Internet du PC ou du Téléphone Portable. En fonction des commandes envoyées depuis l'explorateur, des instructions permettront d'activer ou pas la sortie D1 du module ESP8266. Le module répondra ensuite par une page Web (en HTML) qui sera affichée dans l'explorateur internet.
• Un code CSS très basique pour faire une jolie interface : L'idée est que pour diminuer la taille du code à enregistrer sur le module, nous allons faire référence à un code CSS (langage de mise en forme) disponible sur un serveur Web (dans notre exemple cela sera celui d'Info@Lèze)

Le Firmware

/*
 *  Ce petit programme démontre la réalisation d'un tout petit serveur
 *  HTTP, pour interagir avec le module ESP via le Wifi.
 *  Dans cette exemple nous utilisons un réseau Wifi existant, il faudra
 *  donc fournir les paramètres ssid & password en fonction de votre
 *  situation.
 * 
 *  Afin de pouvoir commuter la sortie D1 de nodeMCU, il est nécessaire
 *  d'appeler l'adresse IP du module suivit de /gpio/1 pour activer ou
 *  /gpio/0 pour désactiver
 * 
 *  Exemple : http://<IP>/gpio/0
 * 
 *  Les informations concernant l'état du module sont envoyées sur la
 *  ligne série (115200 bauds)
 * 
 *  Le clignotement lent de la LED indique une tentative de connexion
 *  à votre réseau Wifi
 *  Le clignotement rapide indique que la connexion est établie (le
 *  clignotement s'arrête en suite)
 * 
 *  La page Web renvoyée à l'utilisateur est simple, mais elle utilise
 *  un CSS qui est stocké sur http://infoaleze.chez.com/IoT afin
 *  d'améliorer le visuel
 */

#include <ESP8266WiFi.h>

const char* ssid = "<SSID - Achanger>";
const char* password = "<Pwd - Achanger>";

// Création d'un server sur le port 80 (généralement utilisé par le WEB)
WiFiServer server(80);

/* *********************************************************************** *
 *  Setup : initialisation des services, mode des entrées/sorties etc...   *
 * *********************************************************************** */
void setup() {

  int Led0 = LOW;
 
  /* Ouverture du port USB pour le débugage */
  Serial.begin(115200);
  delay(10);

  /* Dans cette exemple nous utiliserons
    - le port D0 soit GPIO16 pour la led intégrée bleu
    - le port D1 soit GPIO5  pour la led (en mode OUTPUT)   
  */
  pinMode(16, OUTPUT);
  pinMode(5, OUTPUT);
  digitalWrite(5, LOW);
  digitalWrite(16, HIGH);

  Serial.println();
  Serial.println();
  Serial.println("**************************************");
  Serial.println("** Petit programme de Test Wifi     **");
  Serial.println("** Permet de piloter une LEd via    **");
  Serial.println("** une URL ( http://<IP>/gpio/[0|1] **");
  Serial.println("**----------------------------------**");
  Serial.println("** Yoann Darche | 21/10/2015 | 1.00 **");
  Serial.println("**************************************");
  Serial.println();
   
  // initialisation de la connexion au réseau Wifi 
  Serial.print("[i] Tentative de connexion a ");
  Serial.println(ssid);
 
  WiFi.begin(ssid, password);

  // On attend que la connexion soit opérationelle
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
    if(Led0 == LOW) { Led0 = HIGH; } else { Led0 = LOW; }
    digitalWrite(16, Led0);
  }
  Serial.println("");
  Serial.println("[+] WiFi connecte");
 
  // Démarre le serveur
  server.begin();
  Serial.println("[+] Serveur demarree");

  /* Les lignes suivantes réalisent une petite anim
   *  sur la LED intégrée afin d'avertir que le
   *  module est prêt et connecté
   */
  digitalWrite(16, LOW);
  delay(392);
  digitalWrite(16, HIGH);
  delay(392);
  for(int i=0; i<10; i++) {
    digitalWrite(16, LOW);
    delay(125);
    digitalWrite(16, HIGH);
    delay(125);
  }
 
  // Affiche dans la console de débugage l'adresse IP
  // utilisée
  Serial.print("L'adresse IP utilise est :");
  Serial.println(WiFi.localIP());
}

/* *********************************************************************** *
 *  Loop : Programme principal                                             *
 * *********************************************************************** */
void loop() {
  // Vérifie si un client est connécté au module
  WiFiClient client = server.available();
  if (!client) {
    return;
  }
 
  // Attend que le client (browser) envoie des données
  // dans notre cas la requête HTTP
  Serial.println("[i] Nouveau client");
  while(!client.available()){
    delay(1);
  }
 
  // Lecture de la première ligne envoyé par le client
  // dans notre cas GET <url>
  String req = client.readStringUntil('\r');
  Serial.println(req);
  // On vide le reste des données reçus (économie de mémoire)
  client.flush();
 
  // Décodage de la requête reçue
  int val;
  if (req.indexOf("/gpio/0") != -1) {
    val = 0;
    // Désactivation du GPIO5 soit D1
    digitalWrite(5, val);
  }
  else if (req.indexOf("/gpio/1") != -1) {
    val = 1;
    // Activation du GPIO5 soit D1
    digitalWrite(5, val);
  }
  else {
    Serial.println("[-] Requete invalide");
  }
 
  client.flush();

  // Entête de Réponse  
  String s = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n<!DOCTYPE HTML>\r\n";
  // Ajout de la référence à une stylesheet pour faire des beaux boutons sans charger la mémoire
  s+= "<html><head><link rel=\"stylesheet\" type=\"text/css\" href=\"http://infoaleze.chez.com/IoT/IoT.css\" media=\"all\"/></head><body>";
  // Ecriture de l'état du port
  s+="<h1>D1(GPIO5) est maintenant ";
  s += (val)?"On":"Off";
  s += "</h1></html>\n";
  // Ajout de bouton de commutation
  s += "<a href=\"../gpio/1\" class=\"bouton\">On</a><a href=\"../gpio/0\" class=\"bouton\">Off</a></body></html>";
 
  // Send the response to the client
  client.print(s);
  delay(1);
  Serial.println("[i] Client deconecte");

  // Quand nous sortons de la fonction, la variable objet client sera automatiquement détruite
  // et donc la liaison avec le client coupée
}

Le CSS

Je me suis largement inspiré de la présentation faite par Sebastien Briot à cette adresse.
Je n'en dirais pas plus vu que tout est décrit sur son site. Voici néanmoins la version du code que j'ai déposé sur http://infoaleze.chez.com/IoT/IoT.css :

.bouton {
    width:auto;
    padding:8px 0;
    text-align:center;
    display: inline-block;
    float:left;
    margin:0 8px 0 0;
    border-radius:7px;
    font-size: 0.85em;
    width:120px;
    color:#000;
    font-family: Arial,sans-serif;
 
 box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1);
 text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
}

.bouton, .bouton:active {
    background: #444;
    background: linear-gradient( #00C200, #00FF00);
    background: -webkit-linear-gradient( #00C200, #00FF00);
    background: -moz-linear-gradient( #00C200, #00FF00);
    background: -ms-linear-gradient( #00C200, #00FF00);
    background: -o-linear-gradient( #00C200, #00FF00);
    background: linear-gradient( #00C200, #00FF00);
}

.bouton:hover {
    background: #00C200;
    background: -webkit-linear-gradient( #777, #333);
    background: -moz-linear-gradient( #777, #333);
    background: -ms-linear-gradient( #777, #333);
    background: -o-linear-gradient( #777, #333);
    background: linear-gradient( #777, #333);
}

.bouton:active{box-shadow: 1px 1px 10px #000 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}