dimanche 4 novembre 2018

ESP8266 ou ESP32 et afficheur LCD 16 X 2

Lorsque vous créez un objet connecté au moyen d'un  ESP8266 ou d'un ESP32, il est parfois utile que votre dispositif soit en mesure d'afficher un court message de façon autonome, ne serait-ce que pour indiquer que sa tentative de connexion au réseau WiFi n'a pas fonctionné, pour afficher son adresse IP, etc.

C'est pourquoi je vous présente aujourd'hui un court article sur le contrôle d'un afficheur à cristaux liquides 16 X 2 basé sur le contrôleur Hitachi HD44780, au moyen d'un module ESP8266 ou ESP32.


Préparation de l'IDE Arduino

Nous allons programmer l'ESP au moyen de l'IDE Arduino. Les fichiers nécessaires à la programmation de ce module doivent donc avoir été ajoutés au moyen du gestionnaire de cartes du logiciel; pour plus d'informations à ce sujet, voir voir cet article pour l'ESP8266 ou celui-ci pour l'ESP32.

Connexions

L'afficheur LCD occupe 6 broches de l'ESP, sans compter l'alimentation. Assurez-vous d'utiliser un afficheur qui accepte de fonctionner à un niveau logique de 3,3 V, car ce n'est pas toujours le cas.  De plus, si vous programmez le module avec un convertisseur USB-série, il est très important qu'il s'agisse d'un modèle fonctionnant sous 3,3 V, et non 5 V.

Les 16 broches de l'afficheur LCD sont connectées de la façon suivante:
  • Broche 1 de l'afficheur (VSS): GND
  • Broche 2 de l'afficheur (VDD): 3,3 V
  • Broche 3 de l'afficheur (contraste): potentiomètre variant de 0 à 3,3 V.
  • Broche 4 de l'afficheur (RS): broche GPIO4 de l'ESP8266
  • Broche 5 de l'afficheur (RW): GND
  • Broche 6 de l'afficheur (E): GPIO05 de l'ESP8266
  • Broches 7, 8, 9 et 10 de l'afficheur (D0, D1, D2, D3): pas connectées
  • Broche 11 de l'afficheur (D4): GPIO12 de l'ESP8266
  • Broche 12 de l'afficheur (D5): GPIO13 de l'ESP8266
  • Broche 13 de l'afficheur (D6): GPIO14 de l'ESP8266
  • Broche 14 de l'afficheur (D7): GPIO15 de l'ESP8266
  • Broche 15 de l'afficheur (rétroéclairage): 3,3 V
  • Broche 16 de l'afficheur: GND
Ce qui donne ce résultat avec ma carte de développement ESP32:

...et celui-ci avec une carte Wemo D1 Mini:


De plus, si vous utilisez un module ESP8266 qui n'est pas intégré à une carte de développement (genre NodeMCU ou Wemos), vous devrez, comme d'habitude, brancher ses broches VCC, RST et CH_PD (enable) à 3,3 V, et brancher ses broches GND et GPIO0 à GND. La broche TXD de l'ESP8266 se branche sur le RX du convertisseur USB-série, et la broche RXD de l'ESP8266 se branche sur le TX du convertisseur USB-série.



Sketch minimal

Bonne nouvelle: si vous avez déjà utilisé ce type d'afficheur avec une carte Arduino, ce sera exactement la même chose, puisque la bibliothèque LiquidCrystal fournie avec l'IDE Arduino est pleinement compatible avec l'ESP8266.

Voici un premier sketch qui ne fait que le strict minimum: afficher un message sur l'afficheur LCD.


/**********************************************************
Utilisation d'un afficheur LCD 16 X 2 (compatible Hitachi
HD44780 et de la bibliothèque LiquidCrystal avec l'ESP8266
ou l'ESP32.
Instructions complètes:
http://electroniqueamateur.blogspot.com/2018/11/esp8266-et-afficheur-lcd-16-x-2.html
**********************************************************/
#include <LiquidCrystal.h> // blibliotheque LiquidCrystal
// définition des broches auxquelles on a branché l'afficheur LCD
const int pinRS = 4; // broche 4 (RS) de l'afficheur branchée à GPIO04 de l'ESP8266
const int pinEnable = 5; // broche 6 (Enable) de l'afficheur branchée à GPIO05 de l'ESP8266
const int pinD4 = 12; // broche 11 (D4) de l'afficheur branchée à GPIO12 de l'ESP8266
const int pinD5 = 13; // broche 12 (D5) de l'afficheur branchée à GPIO13 de l'ESP8266
const int pinD6 = 14; // broche 13 (D6) de l'afficheur branchée à GPIO14 de l'ESP8266
const int pinD7 = 15; // broche 14 (D7) de l'afficheur branchée à GPIO15 de l'ESP8266
// Initialisation de la bibliothèque LiquidCrystal en utilisant les broches définies ci-dessus:
LiquidCrystal lcd(pinRS, pinEnable, pinD4, pinD5, pinD6, pinD7);
void setup() {
// On indique que notre afficheur comporte 2 lignes de 16 caractères:
lcd.begin(16, 2);
}
void loop() {
lcd.clear(); // on efface tout
lcd.print(" Electronique");
lcd.setCursor(0, 1); // deuxième ligne
lcd.print(" en amateur");
delay(5000);
lcd.clear(); // on efface tout
lcd.print("LCD et");
lcd.setCursor(0, 1); // deuxième ligne
lcd.print(" ESP8266");
delay(5000);
}
view raw ESP8266_LCD.ino hosted with ❤ by GitHub


Affichage d'un message éditable par une page web

Essayons maintenant un mini-projet qui utilisera un peu mieux les caractéristiques de l'ESP8266 / ESP32: le message qui sera affiché par le LCD pourra être modifié à distance au moyen d'une page web.


/**********************************************************************
ESP8266 LCD WiFi
Au moyen d'une page web, on contrôle le message affiché par un LCD
branché à un ESP8266 ou un ESP32.
Instructions complètes:
http://electroniqueamateur.blogspot.com/2018/11/esp8266-et-afficheur-lcd-16-x-2.html
***********************************************************************/
// inclusion des bibliothèques utiles
#if defined ARDUINO_ARCH_ESP8266 // s'il s'agit d'un ESP8266
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#elif defined ARDUINO_ARCH_ESP32 // s'il s'agit d'un ESP32
#include "WiFi.h"
#include <WebServer.h>
#endif
#include <WiFiClient.h>
#include <LiquidCrystal.h>
// modifiez ces deux constantes pour qu'elles contiennent les caractéristiques de
// votre réseau Wifi
#define ssid "**********" // le nom (SSID) de votre réseau WiFi
#define password "**********" // votre mot de passe WiFi
// définition des broches auxquelles on a branché l'afficheur LCD
const int pinRS = 4; // broche 4 (RS) de l'afficheur branchée à GPIO04 de l'ESP8266
const int pinEnable = 5; // broche 6 (Enable) de l'afficheur branchée à GPIO05 de l'ESP8266
const int pinD4 = 12; // broche 11 (D4) de l'afficheur branchée à GPIO12 de l'ESP8266
const int pinD5 = 13; // broche 12 (D5) de l'afficheur branchée à GPIO13 de l'ESP8266
const int pinD6 = 14; // broche 13 (D6) de l'afficheur branchée à GPIO14 de l'ESP8266
const int pinD7 = 15; // broche 14 (D7) de l'afficheur branchée à GPIO15 de l'ESP8266
// Initialisation de la bibliothèque LiquidCrystal en utilisant les broches définies ci-dessus:
LiquidCrystal lcd(pinRS, pinEnable, pinD4, pinD5, pinD6, pinD7);
#if defined ARDUINO_ARCH_ESP8266 // s'il s'agit d'un ESP8266
ESP8266WebServer server(80);
#elif defined ARDUINO_ARCH_ESP32 // s'il s'agit d'un ESP32
WebServer server(80);
#endif
// Affichage initial sur le LCD
String ligne1STR = "Bonjour!";
String ligne2STR = ":)";
/* La fonction construitPage retourne un string qui contient toute notre page web */
String construitPage() {
String bouton1Str, bouton2Str;
String page = "<html lang=fr-FR><head>";
page += "<title>ESP8266 Afficheur WiFi</title>";
page += "<style> body { background-color: #fffff; font-family: Arial, Helvetica, Sans-Serif; Color: #000088; }</style>";
page += "</head><body><h1>ESP8266 Afficheur WiFi</h1>";
page += "<form action='/' method='POST'>";
page += "<h3>&Eacute;crivez ci-dessous le message &agrave; afficher:</h3>";
page += "<p>Ligne 1:</p>";
page += "<p><INPUT type='text' name='ligne1' value='" + ligne1STR + "'></p>";
page += "<p>Ligne 2:</p>";
page += "<p><INPUT type='text' name='ligne2' value='" + ligne2STR + "'></p>";
page += "<INPUT type='submit' value='Appliquer'><br><br>";
page += "</body></html>";
return page;
}
/* La fonction gestionPage modifie les caractéristiques du moteur si le bouton
Appliquer a été cliqué. */
void gestionPage() {
if ( server.hasArg("ligne1") ) {
ligne1STR = server.arg("ligne1");
ligne2STR = server.arg("ligne2");
// Affichage sur le moniteur série, pour débogage
Serial.print("Commande recue. Message: ");
Serial.println(ligne1STR);
Serial.println(ligne2STR);
// mise à jour de l'afficheur LCD
lcd.clear();
lcd.print(ligne1STR);
lcd.setCursor(0, 1); // deuxième ligne
lcd.print(ligne2STR);
}
server.send ( 200, "text/html", construitPage() );
}
void setup() {
lcd.begin(16, 2);
lcd.print(ligne1STR);
lcd.setCursor(0, 1); // deuxième ligne
lcd.print(ligne2STR);
// pour affichage dans le moniteur série (utile pour le débogage)
Serial.begin ( 115200 );
// initialisation de la communication WiFi
WiFi.begin ( ssid, password );
while ( WiFi.status() != WL_CONNECTED ) {
delay ( 500 ); Serial.print ( "." );
}
Serial.println ( "" );
Serial.print ( "Maintenant connecte a " );
Serial.println ( ssid );
Serial.print ( "Adresse IP: " );
Serial.println ( WiFi.localIP() );
// On indique le nom de la fonction qui gère l'interraction avec la page web
server.on ( "/", gestionPage );
server.begin();
Serial.println ( "Serveur HTTP en fonction" );
}
void loop() {
server.handleClient();
delay(1000);
}

Au démarrage du sketch, l'ESP8266 se connecte au réseau WiFi et son adresse IP s'affiche dans le moniteur série de l'IDE Arduino.  Il s'agit de coller cette adresse IP dans le navigateur web d'un appareil (ordinateur ou téléphone) branché au même réseau local pour faire apparaître une page web générée par l'ESP8266.


Vous écrivez un message dans les champs de texte de la page web (un champ pour chaque ligne du LCD) et, lorsque vous cliquez sur le bouton "Appliquer", le message s'affiche sur le LCD.

Yves Pelletier   (TwitterFacebook)

3 commentaires:

  1. L'exemple est intéressant, mais pour le coup, il est à mon avis plus interessant d'utiliser un 16x2 avec un module I2C au dos. Ca vaut quelques centimes de plus, mais ça permet d'économiser de précieuses broches pour d'autres usages !

    RépondreSupprimer
  2. Pourrais je avoir une photo du câblage sur fritzing avec la breadboard ?

    RépondreSupprimer