Site icon AranaCorp

Pilotez un NodeMCU ESP8266 à l’aide d’une interface web

4.2
(19)

Le NodeMCU ESP8266 est un microcontrôleur avec un module Wifi intégré. Très simple d’utilisation il est léger et possède une capacité de mémoire et de calcul supérieure aux Arduino.L’ESP8266 est idéal pour vos projets connectés et pilotés à l’aide d’une interface web.

La base, pour créer des objets connectés, est de les connecter à un réseau comme le réseau WiFi. L’émetteur et l’antenne WiFi intégrés au microcontrôleur permettent la connexion à Internet. Grâce à cela, il est possible de créer un serveur qui héberge une page Web permettant de piloter le microcontrôleur à distance. Cette page peut servir à afficher des valeurs mesurées par le NodeMCU ou bien piloter des entrées/sorties du microcontrôleur.

Prérequis: Programmer un NodeMCU avec l’IDE Arduino

Matériel

Principe de fonctionnement

La carte NodeMCU ESP8266 contient un module ESP-12E contenant un microprocesseur 32bits. Il intègre un émetteur-récepteur WiFi ce qui lui permet de se connecter à des réseaux existants ou bien de mettre en place son propre réseau.
Le réseau WiFi est un réseau Radio qui travaille sur les fréquences 2,45 GHz et 5 GHz.

Schéma

Le microcontrôleur possède une entrée analogique et 16 GPIO (11 Digital I/O)disponibles sur les broches de la carte de développement. Sur les 25 broches:

Il est nécessaire d’avoir un composant Ethernet ou Wifi intégré ou ajouter au microcontrôleur pour avoir la capacité de communiquer sur le réseau. Le module ESP-12E possède une interface Wifi. Il ne nécessite donc pas de composant supplémentaire pour se connecter à internet.

Code

Pour utiliser la carte NodeMCU, il nous faut tout d’abord installer le gestionnaire de carte après avoir ajouter l’adresse https://arduino.esp8266.com/stable/package_esp8266com_index.json dans les préférences de l’IDE d’Arduino.
Pour communiquer sur le réseau, il nous faut utiliser un protocole particulier. Ce protocole est intégré dans toutes les librairies relatives à la communication Wifi.

La librairie qui va nous permettre de gérer l’émetteur-récepteur Wifi est la librairie ESP8266WiFi.h. Pour charger le code Arduino dans la carte, vous devez sélectionner la bonne carte et le bon port. Dans notre cas, la carte est NodeMCU 1.0 (ESP-12E Module). Nous allons ensuite créer l’interface web de l’ESP8266 dans la fonction webpage en HTML.

N.B.: N’oubliez pas de modifier le ssid et password correspondant au réseau Wifi utilisé

//Libraries
#include <ESP8266WiFi.h>//https://github.com/esp8266/Arduino/blob/master/libraries/ESP8266WiFi/src/ESP8266WiFi.h

//Constants
#define LED D4

//Parameters
String request;
char* ssid = "********";
char* password = "********";
String nom = "ESP8266";

//Objects
WiFiServer server(80);

void setup(){
//Init Serial USB
Serial.begin(115200);
Serial.println(F("Initialize System"));
//Init ESPBrowser
  Serial.print(F("Connecting to "));Serial.println(ssid);
WiFi.begin(ssid, password);
  // Connect to Wifi network.
while (WiFi.status() != WL_CONNECTED)
{
  delay(500);Serial.print(F("."));
}
  server.begin();
  Serial.println();
  Serial.println(F("ESPBrowser initialized"));
  Serial.print(F("IP Address: "));
  Serial.println(WiFi.localIP());
//Init WiFi server
  server.begin();
  pinMode(LED, OUTPUT);
  pinMode(A0,INPUT);
}

void loop(){
WiFiClient client = server.available();
  if (!client) {
    return;
  }
 
  // Wait until the client sends some data
  Serial.println("new client");
  while(!client.available()){
    delay(1);
  }
 
  // Read the first line of the request
  String request = client.readStringUntil('\r');
  Serial.println(request);
  client.flush();
  handleRequest(request);
  webpage(client);//Return webpage
}

void handleRequest(String request){/* function handleRequest */ 
////Handle web client request
 if (request.indexOf("/light1on") > 0)  {
    digitalWrite(LED, LOW);
  }
  if (request.indexOf("/light1off") >0)  {
    digitalWrite(LED, HIGH);
  }
}

void webpage(WiFiClient client){/* function webpage */ 
////Send wbepage to client
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println(""); //  do not forget this one
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.println("<head>");
  client.println("<meta name='apple-mobile-web-app-capable' content='yes' />");
  client.println("<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />");
  client.println("</head>");
  client.println("<body bgcolor = '#70706F'>"); 
  client.println("<hr/><hr>");
  client.println("<h1 style='color : #3AAA35;'><center> "+nom+" Device Control </center></h1>");
  client.println("<hr/><hr>");
  client.println("<br><br>");
  client.println("<br><br>");
  client.println("<center>");
  client.println("  Pin A0");
  client.println("  <input value="+String(analogRead(A0))+" readonly></input>");
  client.println("  </center>");
  client.println("<center>");
  client.println("Built-in LED");
  client.println("<a href='/light1on'><button>Turn On </button></a>");
  client.println("<a href='/light1off'><button>Turn Off </button></a><br />");  
  client.println("</center>");   
  client.println("<br><br>");
  client.println("<br><br>");
  client.println("<center>");
  client.println("<table border='5'>");
  client.println("<tr>");
  client.print("<td>LED is </td>");
  if (digitalRead(LED))
  { 
    client.print("<td> OFF</td>");
  }else{
    client.print("<td> ON</td>");
  } 
   client.println("</tr>");
   client.println("</table>");
   client.println("</center>");
   client.println("</body></html>"); 
   client.println();
   delay(1);
}

Applications

Sources

Retrouvez nos tutoriels et d’autres exemples dans notre générateur automatique de code
La Programmerie

How useful was this post?

Click on a star to rate it!

Average rating 4.2 / 5. Vote count: 19

No votes so far! Be the first to rate this post.

Quitter la version mobile