ESP8266 NodeMCU WebSerial : moniteur série à distance basé sur le Web

Dans ce guide, vous apprendrez à créer et à utiliser un « Serial Monitor » basé sur le Web pour vos projets ESP8266 NodeMCU à l’aide de la bibliothèque WebSerial. Cela crée une interface Web pour générer des messages de débogage, comme vous le feriez avec un moniteur série standard. Vous pouvez également envoyer des messages du moniteur série basé sur le Web à l’ESP8266.

Nous avons un tutoriel similaire pour la carte ESP32 : ESP32 WebSerial Web-based Remote Serial Monitor

Moniteur série basé sur le Web

Dans la plupart de vos projets ESP8266, vous utilisez le moniteur série pour générer des messages de débogage qui aident à mieux comprendre ce qui se passe avec le microcontrôleur.

Vous créez une communication série entre votre carte et votre ordinateur, puis vous pouvez visualiser les messages à l’aide du moniteur série. Cependant, lorsque votre carte n’est pas connectée à votre ordinateur, vous ne pouvez pas voir les messages de débogage.

Une solution de contournement à ce problème consiste à utiliser un moniteur série basé sur le Web : l’ESP8266 héberge un serveur Web qui sert une page pour visualiser les messages comme vous le feriez avec le moniteur série « ordinaire ». La page Web WebSerial vous permet également d’envoyer des données de la page Web à votre tableau.

WebSerial Library ESP32 ESP8266 Moniteur série basé sur le Web

Pour ce tutoriel, nous utiliserons le Bibliothèque WebSerial.

Si vous aimez cette bibliothèque et que vous l’utiliserez dans vos projets, pensez soutenir le travail du développeur.

Fonctionnalités WebSerial

Liste des fonctionnalités WebSerial :

Fonctionne sur WebSockets ;
Journalisation en temps réel ;
N’importe quel nombre de moniteurs série peut être ouvert sur le navigateur ;
Les usages Serveur Web asynchrone pour de meilleures performances.

Fonctions WebSerial

L’utilisation de WebSerial est similaire à l’utilisation du moniteur série. Ses principales fonctions sont imprimer() et println():

imprimer(): imprime les données sur le moniteur série basé sur le Web sans caractère de nouvelle ligne (sur la même ligne) ;
println(): imprime les données sur le moniteur série basé sur le Web avec un caractère de nouvelle ligne (sur la ligne suivante) ;

Installation de la bibliothèque WebSerial

Pour ce projet, nous utiliserons le Bibliothèque WebSerial.h. Pour installer la bibliothèque :

Dans votre IDE Arduino, accédez à Esquisser > Inclure la bibliothèque > Gérer les bibliothèques…
Rechercher websérie.
Installez la bibliothèque WebSerial d’Ayush Sharma.

Installation de la bibliothèque Web Serial Library Arduino IDE

Vous devez également installer le ESPAsyncWebServer et le AsyncTCP bibliothèques. Cliquez sur les liens suivants pour télécharger les fichiers des bibliothèques.

Pour installer ces bibliothèques, cliquez sur les liens précédents pour télécharger les fichiers des bibliothèques. Ensuite, dans votre IDE Arduino, accédez à Esquisser > Inclure la bibliothèque > Ajouter une bibliothèque .ZIP…

Si vous utilisez VS Code avec l’extension PlatformIO, copiez ce qui suit dans le platformio.ini fichier pour inclure les bibliothèques.

lib_deps = ESP Async WebServer
  ayushsharma82/WebSerial @ ^1.1.0

Exemple de série Web ESP8266

La bibliothèque fournit un exemple simple de création du Web Serial Monitor pour émettre et recevoir des messages. Nous avons légèrement modifié l’exemple pour le rendre plus interactif.

Cet exemple imprime Salut! au moniteur série basé sur le Web toutes les deux secondes. De plus, vous pouvez envoyer des messages du moniteur série basé sur le Web à la carte. Vous pouvez envoyer le message AU pour allumer la LED intégrée à la carte ou le message DÉSACTIVÉ pour l’éteindre.

/*
  Rui Santos
  Complete project details at https://Raspberryme.com/esp8266-nodemcu-webserial-library/
  
  This sketch is based on the WebSerial library example: ESP8266_Demo
  https://github.com/ayushsharma82/WebSerial
*/

#include <Arduino.h>
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <WebSerial.h>

#define LED 2

AsyncWebServer server(80);

const char* ssid = "REPLACE_WITH_YOUR_SSID";          // Your WiFi SSID
const char* password = "REPLACE_WITH_YOUR_PASSWORD";  // Your WiFi Password

void recvMsg(uint8_t *data, size_t len){
  WebSerial.println("Received Data...");
  String d = "";
  for(int i=0; i < len; i++){
    d += char(data[i]);
  }
  WebSerial.println(d);
  if (d == "ON"){
    digitalWrite(LED, LOW);
  }
  if (d=="OFF"){
    digitalWrite(LED, HIGH);
  }
}

void setup() {
  Serial.begin(115200);
  pinMode(LED, OUTPUT);
  digitalWrite(LED, HIGH);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
    Serial.printf("WiFi Failed!n");
    return;
  }
  Serial.println("IP Address: ");
  Serial.println(WiFi.localIP());
  // WebSerial is accessible at "<IP Address>/webserial" in browser
  WebSerial.begin(&server);
  WebSerial.msgCallback(recvMsg);
  server.begin();
}

void loop() {
  WebSerial.println("Hello!");
  delay(2000);
}

Afficher le code brut

Avant de télécharger le code sur votre tableau, n’oubliez pas d’insérer vos identifiants réseau.

Dans cet exemple, l’ESP8266 est en mode station. Cet exemple fonctionne également en mode point d’accès. Pour savoir comment configurer votre ESP8266 en tant que point d’accès, lisez :

Comment fonctionne le code

Continuez à lire pour savoir comment fonctionne le code ou passez à la section de démonstration.

Tout d’abord, vous devez inclure les bibliothèques requises pour WebSerial. le ESP8266WiFi.h bibliothèque est nécessaire pour connecter l’ESP8266 à un réseau Wi-Fi.

#include <ESP8266WiFi.h>

le WebSérie la bibliothèque utilise le ESPAsyncTCP et le ESPAsyncWebServer bibliothèques pour créer le moniteur série basé sur le Web.

#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>

Finalement, le WebSérie La bibliothèque fournit des méthodes simples pour créer le moniteur série basé sur le Web.

#include <WebSerial.h>

Créer une variable appelée LED pour la LED intégrée sur GPIO 2.

#define LED 2

Initialiser un AsyncWebServer objet sur le port 80 pour configurer le serveur Web.

AsyncWebServer server(80);

Insérez vos identifiants réseau dans les variables suivantes :

const char* ssid = "REPLACE_WITH_YOUR_SSID"; // Your WiFi SSID
const char* password = "REPLACE_WITH_YOUR_PASSWORD"; // Your WiFi Password

Gestion des messages reçus

La fonction suivante reçoit les messages entrants envoyés depuis le moniteur série basé sur le Web. Le message est enregistré sur le ré variable. Ensuite, il est imprimé sur le moniteur série Web à l’aide WebSerial.println(d).

void recvMsg(uint8_t *data, size_t len){
  WebSerial.println("Received Data...");
  String d = "";
  for(int i=0; i < len; i++){
    d += char(data[i]);
  }
  WebSerial.println(d);

Ensuite, nous vérifions si le contenu du ré la variable est AU ou DÉSACTIVÉ et allumer la LED en conséquence.

if (d == "ON"){
  digitalWrite(LED, LOW);
}
if (d=="OFF"){
  digitalWrite(LED, HIGH);
}

La LED intégrée fonctionne en logique inversée : envoie un signal HIGH pour l’éteindre et un signal LOW pour l’allumer.

mettre en place()

Dans le mettre en place(), met le LED en tant que SORTIR et désactivez-le par défaut.

pinMode(LED, OUTPUT);
digitalWrite(LED, HIGH);

Connectez votre carte à votre réseau local :

WiFi.mode(WIFI_STA);
WiFi.begin(ssid, password);
if (WiFi.waitForConnectResult() != WL_CONNECTED) {
  Serial.printf("WiFi Failed!n");
  return;
}
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());

Initialisez le moniteur série basé sur le Web avec le commencer() méthode sur le WebSérie objet. Cette fonction accepte comme argument un AsyncWebServer objet.

WebSerial.begin(&server);

Enregistrez le recvMsg() comme fonction de rappel en utilisant le msgRappel() méthode sur le WebSérie objet. le recvMsg() La fonction s’exécutera chaque fois que vous enverrez un message du moniteur à la carte.

WebSerial.msgCallback(recvMsg);

Enfin, initialisez le serveur.

server.begin();

C’est juste après avoir appelé cette ligne que le moniteur série basé sur le Web commencera à fonctionner.

boucler()

Dans le boucler(), imprimez le Salut! message toutes les 2000 millisecondes (2 secondes) en utilisant le println() fonction sur le WebSérie objet.

void loop() {
  WebSerial.println("Hello!");
  delay(2000);
}

Manifestation

Après avoir inséré vos informations d’identification réseau, vous pouvez télécharger le code sur votre tableau.

Après le téléchargement, ouvrez le moniteur série « régulier » à un débit en bauds de 115 200. L’adresse IP de la carte sera imprimée.

ESP8266 NodeMCU Obtenir l'adresse IP Arduino IDE Serial Monitor

Maintenant, ouvrez un navigateur sur votre réseau local et tapez l’adresse IP ESP suivie de /websérie. Par exemple, dans mon cas :

192.168.1.100/webserial

La page WebSerial doit se charger.

ESP8266 NodeMCU Testing Web Serial Library Exemple de démonstration de base

Comme vous pouvez le voir, il s’imprime Salut! toutes les deux secondes. De plus, vous pouvez envoyer des commandes à l’ESP8266. Toutes les commandes que vous envoyez sont réimprimées sur le moniteur série Web. Vous pouvez envoyer le AU et DÉSACTIVÉ commandes pour contrôler la LED intégrée.

Ce n’était qu’un exemple simple montrant comment vous pouvez utiliser la bibliothèque WebSerial pour créer un moniteur série basé sur le Web pour envoyer et recevoir des données.

Maintenant, vous pouvez facilement ajouter un moniteur série basé sur le Web à n’importe lequel de vos projets en utilisant le Bibliothèque WebSerial.

Conclusion

Dans ce didacticiel rapide, vous avez appris à créer un moniteur série basé sur le Web. Ceci est particulièrement utile si votre projet n’est pas connecté à votre ordinateur via la communication série et que vous souhaitez toujours visualiser les messages de débogage. La communication entre le moniteur série basé sur le Web et l’ESP8266 utilise le protocole WebSocket.

Nous espérons que ce tutoriel vous sera utile. Nous avons d’autres tutoriels de serveur Web que vous pourriez aimer :

En savoir plus sur la carte ESP8266 avec nos ressources :

Merci pour la lecture.