Serveur Web ESP8266 NodeMCU avec curseur : contrôle de la luminosité de la LED (PWM)

Serveur Web ESP8266 NodeMCU avec curseur : contrôle de la luminosité de la LED (PWM)

Ce tutoriel montre comment créer un serveur Web ESP8266 NodeMCU avec un curseur pour contrôler la luminosité des LED. Vous apprendrez à ajouter un curseur à vos projets de serveur Web, à obtenir sa valeur et à l’enregistrer dans une variable que l’ESP8266 peut utiliser. Nous utiliserons cette valeur pour contrôler le rapport cyclique d’un signal PWM et modifier la luminosité d’une LED. Au lieu d’une LED, vous pouvez par exemple contrôler un servomoteur.

Serveur Web ESP8266 NodeMCU avec curseur de contrôle de la luminosité LED PWM utilisant Arduino IDE

De plus, vous pouvez également modifier le code de ce didacticiel pour ajouter un curseur à vos projets afin de définir une valeur de seuil ou toute autre valeur que vous devez utiliser dans votre code.

Aperçu du projet

ESP8266 NodeMCU Slider Contrôle du serveur Web Luminosité de la LED
  • L’ESP8266 héberge un serveur Web qui affiche une page Web avec un curseur ;
  • Lorsque vous déplacez le curseur, vous faites une requête HTTP à l’ESP8266 avec la nouvelle valeur du curseur ;
  • La requête HTTP se présente au format suivant : GET/slider?value=SLIDERVALUE, dans lequel VALEURCURSEUR est un nombre compris entre 0 et 1023. Vous pouvez modifier votre curseur pour inclure toute autre plage ;
  • À partir de la requête HTTP, l’ESP8266 obtient la valeur actuelle du curseur ;
  • L’ESP8266 ajuste le rapport cyclique PWM en fonction de la valeur du curseur ;
  • Cela peut être utile pour contrôler la luminosité d’une LED (comme nous le ferons dans cet exemple), d’un servomoteur, de la configuration d’une valeur de seuil ou d’autres applications.

Conditions préalables

Avant de poursuivre ce projet, assurez-vous de vérifier les prérequis suivants.

EDI Arduino

Nous allons programmer la carte ESP8266 NodeMCU à l’aide de l’IDE Arduino, donc avant de poursuivre ce tutoriel, assurez-vous que la carte ESP8266 est installée dans votre IDE Arduino.

Bibliothèques de serveurs Web asynchrones

Nous allons créer le serveur Web à l’aide des bibliothèques suivantes :

Ces bibliothèques ne peuvent pas être installées via le gestionnaire de bibliothèque Arduino, vous devez donc copier les fichiers de bibliothèque dans le dossier Bibliothèques d’installation Arduino. Alternativement, dans votre IDE Arduino, vous pouvez accéder à Esquisser > Inclure la bibliothèque > Ajouter une bibliothèque .zip et sélectionnez les bibliothèques que vous venez de télécharger.

Code

Le code suivant contrôle la luminosité de la LED intégrée ESP8266 à l’aide d’un curseur sur un serveur Web. En d’autres termes, vous pouvez modifier le rapport cyclique PWM avec un curseur. Cela peut être utile pour contrôler la luminosité des LED ou contrôler un servomoteur, par exemple.

Copiez le code dans votre IDE Arduino. Insérez vos informations d’identification réseau et le code fonctionnera directement.

/*********
  Rui Santos
  Complete project details at https://Raspberryme.com/esp8266-nodemcu-web-server-slider-pwm/
  
  Permission is hereby granted, free of charge, to any person obtaining a copy
  of this software and associated documentation files.
  
  The above copyright notice and this permission notice shall be included in all
  copies or substantial portions of the Software.
*********/

// Import required libraries
#include <ESP8266WiFi.h>
#include <ESPAsyncTCP.h>
#include <ESPAsyncWebServer.h>

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

const int output = 2;

String sliderValue = "0";

const char* PARAM_INPUT = "value";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ESP Web Server</title>
  <style>
    html {font-family: Arial; display: inline-block; text-align: center;}
    h2 {font-size: 2.3rem;}
    p {font-size: 1.9rem;}
    body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
    .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
    .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
    .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; } 
  </style>
</head>
<body>
  <h2>ESP Web Server</h2>
  <p><span id="textSliderValue">%SLIDERVALUE%</span></p>
  <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="1023" value="%SLIDERVALUE%" step="1" class="slider"></p>
<script>
function updateSliderPWM(element) {
  var sliderValue = document.getElementById("pwmSlider").value;
  document.getElementById("textSliderValue").innerHTML = sliderValue;
  console.log(sliderValue);
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/slider?value="+sliderValue, true);
  xhr.send();
}
</script>
</body>
</html>
)rawliteral";

// Replaces placeholder with button section in your web page
String processor(const String& var){
  //Serial.println(var);
  if (var == "SLIDERVALUE"){
    return sliderValue;
  }
  return String();
}

void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);

  analogWrite(output, sliderValue.toInt());

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });

  // Send a GET request to <ESP_IP>/slider?value=<inputMessage>
  server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
    if (request->hasParam(PARAM_INPUT)) {
      inputMessage = request->getParam(PARAM_INPUT)->value();
      sliderValue = inputMessage;
      analogWrite(output, sliderValue.toInt());
    }
    else {
      inputMessage = "No message sent";
    }
    Serial.println(inputMessage);
    request->send(200, "text/plain", "OK");
  });
  
  // Start server
  server.begin();
}
  
void loop() {
  
}

Afficher le code brut

Comment fonctionne le code

Continuez à lire pour savoir comment fonctionne le code ou passez à la section suivante.

Importation de bibliothèques

Tout d’abord, importez les bibliothèques requises. le ESP8266Wi-Fi, ESPAsyncWebServer et le ESPAsyncTCP sont nécessaires pour construire le serveur Web.

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

Définition de vos identifiants réseau

Insérez vos informations d’identification réseau dans les variables suivantes, afin que l’ESP8266 puisse se connecter à votre réseau local.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Définition des variables

Nous contrôlerons la luminosité de la LED intégrée ESP8266. La LED intégrée correspond à GPIO 2. Enregistrez le GPIO que nous voulons contrôler sur le sortir variable.

const int output = 2;

le sliderValue variable contiendra la valeur du curseur. Au démarrage, il est mis à zéro.

String sliderValue = "0";

Paramètres d’entrée

le PARAM_INPUT La variable sera utilisée pour « rechercher » la valeur du curseur sur la demande reçue par l’ESP8266 lorsque le curseur est déplacé. (Rappelez-vous: l’ESP8266 recevra une demande comme celle-ci GET/slider?value=SLIDERVALUE)

const char* PARAM_INPUT = "value";

Il va chercher valeur sur l’URL et obtenez la valeur qui lui est attribuée.

Construire la page Web

Passons maintenant à la page du serveur Web.

Serveur Web ESP8266 NodeMCU Slider Comment ça marche

La page Web de ce projet est assez simple. Il contient un titre, un paragraphe et une entrée de type plage.

Voyons comment la page Web est créée.

Tout le texte HTML avec les styles inclus est stocké dans le index_html variable. Nous allons maintenant parcourir le texte HTML et voir ce que fait chaque partie.

Ce qui suit La balise rend votre page Web réactive dans n’importe quel navigateur.

<meta name="viewport" content="width=device-width, initial-scale=1">

Entre le tags va le titre de notre serveur Web. Le titre est le texte qui s’affiche dans l’onglet du navigateur Web.

modes

Entre le

balises, nous ajoutons du CSS pour styliser la page Web.

<style>
  html {font-family: Arial; display: inline-block; text-align: center;}
  h2 {font-size: 2.3rem;}
  p {font-size: 1.9rem;}
  body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
  .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
    outline: none; -webkit-transition: .2s; transition: opacity .2s;}
  .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
  .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; }
</style>

Fondamentalement, nous configurons la page HTML pour afficher le texte avec la police Arial en bloc sans marge et aligné au centre.

html {font-family: Arial; display: inline-block; text-align: center;}

Les lignes suivantes définissent la taille de la police du titre (h2) et le paragraphe (p).

h2 {font-size: 2.3rem;}
p {font-size: 1.9rem;}

Définissez les propriétés du corps HTML.

body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}

Les lignes suivantes personnalisent le slider :

.slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
.slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; } 

Corps HTML

À l’intérieur de les balises sont l’endroit où nous ajoutons le contenu de la page Web.

le

les balises ajoutent un titre à la page Web. Dans ce cas, le texte « ESP Web Server », mais vous pouvez ajouter n’importe quel autre texte.

<h2>ESP Web Server</h2>

Le premier paragraphe contiendra la valeur actuelle du curseur. Cette balise HTML particulière a l’identifiant textSliderValue qui lui est attribué, afin que nous puissions la référencer plus tard.

<p><span id="textSliderValue">%SLIDERVALUE%</span></p>

le %SLIDERVALUE% est un espace réservé pour la valeur du curseur. Celui-ci sera remplacé par l’ESP8266 par une valeur réelle lorsqu’il l’enverra au navigateur. Ceci est utile pour afficher la valeur actuelle lorsque vous accédez au navigateur pour la première fois.

Création d’un curseur

Pour créer un curseur en HTML, vous utilisez le étiqueter. le tag spécifie un champ dans lequel l’utilisateur peut entrer des données.

Il existe une grande variété de types d’entrées. Pour définir un curseur, utilisez le « taper » attribut avec le « intervalle » valeur. Dans un curseur, vous devez également définir la plage minimale et maximale à l’aide de la touche « min » et « maximum” attributs (dans ce cas, 0 et 1023, respectivement).

<p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="1023" value="%SLIDERVALUE%" step="1" class="slider"></p>

Vous devez également définir d’autres attributs tels que :

  • la étape L’attribut spécifie l’intervalle entre les nombres valides. Dans notre cas, il est fixé à 1;
  • la classer pour styliser le curseur (classe = « curseur »);
  • la identifiant pour mettre à jour la position actuelle affichée sur la page Web ;
  • la sur le changement attribut pour appeler une fonction (updateSliderPWM (ceci)) pour envoyer une requête HTTP à l’ESP8266 lorsque le curseur se déplace. le cette mot-clé fait référence à la valeur actuelle du curseur.

Ajout de JavaScript au fichier HTML

Ensuite, vous devez ajouter du code JavaScript à votre fichier HTML en utilisant le Mots clés. Vous devez ajouter le updateSliderPWM() fonction qui fera une demande à l’ESP8266 avec la valeur actuelle du curseur.

<script>
function updateSliderPWM(element) {
  var sliderValue = document.getElementById("pwmSlider").value;
  document.getElementById("textSliderValue").innerHTML = sliderValue;
  console.log(sliderValue);
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/slider?value="+sliderValue, true);
  xhr.send();
}
</script>

Cette ligne suivante obtient la valeur actuelle du curseur par son identifiant et l’enregistre dans le sliderValue Variable JavaScript. Auparavant, nous avons attribué l’identifiant du curseur à pwmSlider. Ainsi, nous l’obtenons comme suit :

var sliderValue = document.getElementById("pwmSlider").value;

Après cela, nous définissons l’étiquette du curseur (dont l’identifiant est textSliderValue) à la valeur enregistrée sur le sliderValue variable.

Enfin, faites une requête HTTP GET.

var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();

Par exemple, lorsque le curseur est sur 0, vous effectuez une requête HTTP GET sur l’URL suivante :

http://ESP-IP-ADDRESS/slider?value=0

Et lorsque la valeur du curseur est de 200, vous aurez une requête sur l’URL suivante.

http://ESP-IP-ADDRESS/slider?value=200

De cette façon, lorsque l’ESP8266 reçoit la requête GET, il peut récupérer le paramètre de valeur dans l’URL et contrôler le signal PWM en conséquence, comme nous le verrons dans les sections suivantes.

Processeur

Maintenant, nous devons créer le processeur() fonction, qui remplacera les espaces réservés dans notre texte HTML par la valeur actuelle du curseur lorsque vous y accéderez pour la première fois dans un navigateur.

// Replaces placeholder with button section in your web page
String processor(const String& var){
  //Serial.println(var);
  if (var == "SLIDERVALUE"){
    return sliderValue;
  }
  return String();
}

Lorsque la page Web est demandée, nous vérifions si le code HTML contient des espaces réservés. S’il trouve le %SLIDERVALUE% espace réservé, on renvoie la valeur enregistrée sur le sliderValue variable.

mettre en place()

Dans le mettre en place(), initialiser le moniteur série à des fins de débogage.

Serial.begin(115200);

Réglez le rapport cyclique du signal PWM sur la valeur enregistrée sur le sliderValue (lorsque l’ESP8266 démarre, il est mis à 0).

analogWrite(output, sliderValue.toInt());

Pour en savoir plus sur le PWM avec l’ESP8266, lisez notre guide : ESP8266 PWM avec Arduino IDE (sortie analogique).

Connectez-vous à votre réseau local et imprimez l’adresse IP ESP8266.

// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Connecting to WiFi..");
}

// Print ESP Local IP Address
Serial.println(WiFi.localIP());

Traiter les demandes

Enfin, ajoutez les lignes de code suivantes pour gérer le serveur Web.

// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
});

// Send a GET request to <ESP_IP>/slider?value=<inputMessage>
server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  String inputMessage;
  // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
  if (request->hasParam(PARAM_INPUT)) {
    inputMessage = request->getParam(PARAM_INPUT)->value();
    sliderValue = inputMessage;
    ledcWrite(ledChannel, sliderValue.toInt());
  }
  else {
    inputMessage = "No message sent";
  }
  Serial.println(inputMessage);
  request->send(200, "text/plain", "OK");
});

Lorsque nous faisons une demande sur l’URL root, nous envoyons le texte HTML qui est stocké sur le index_html variable. Nous devons également passer le processeur() fonction, qui remplacera tous les espaces réservés par les bonnes valeurs.

// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
});

Nous avons besoin d’un autre gestionnaire qui enregistrera la valeur actuelle du curseur et réglera la luminosité de la LED en conséquence.

server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  String inputMessage;
  // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
  if (request->hasParam(PARAM_INPUT)) {
    inputMessage = request->getParam(PARAM_INPUT)->value();
    sliderValue = inputMessage;
    ledcWrite(ledChannel, sliderValue.toInt());
  }
  else {
    inputMessage = "No message sent";
  }
  Serial.println(inputMessage);
  request->send(200, "text/plain", "OK");
});

Fondamentalement, nous obtenons la valeur du curseur sur les lignes suivantes :

if (request->hasParam(PARAM_INPUT)) {
  inputMessage = request->getParam(PARAM_INPUT)->value();
  sliderValue = inputMessage;

Ensuite, mettez à jour la luminosité de la LED (cycle de service PWM) à l’aide du ledcEcrit() fonction qui accepte comme arguments le canal que vous souhaitez contrôler et la valeur.

ledcWrite(ledChannel, sliderValue.toInt());

Enfin, démarrez le serveur.

server.begin();

Comme il s’agit d’un serveur Web asynchrone, nous n’avons pas besoin d’écrire quoi que ce soit dans le boucler().

void loop(){

}

C’est à peu près comme ça que le code fonctionne.

Télécharger le code

Maintenant, téléchargez le code sur votre ESP8266. Assurez-vous d’avoir sélectionné la bonne carte et le bon port COM.

Après le téléchargement, ouvrez le moniteur série à un débit en bauds de 115200. Appuyez sur le bouton de réinitialisation ESP8266. L’adresse IP ESP8266 doit être imprimée dans le moniteur série.

ESP32 ESP8266 Serveur Web PWM Arduino IDE Adresse IP du moniteur série

Démonstration du serveur Web

Ouvrez un navigateur et saisissez l’adresse IP ESP8266. Votre serveur Web doit afficher le curseur et sa valeur actuelle.

Démonstration du serveur Web de sortie ESP8266 NodeMCU Slider PWM

Déplacez le curseur et voyez la LED intégrée ESP8266 augmenter et diminuer sa luminosité.

Conclusion

Avec ce didacticiel, vous avez appris à ajouter un curseur à vos projets de serveur Web et à obtenir et enregistrer sa valeur sur une variable que l’ESP8266 peut utiliser. Par exemple, nous contrôlons un signal PWM pour contrôler la luminosité d’une LED. Au lieu d’une LED, vous pouvez contrôler un servomoteur, par exemple.

De plus, le curseur peut également être utilisé pour définir un seuil ou toute autre valeur que vous devez configurer, puis être utilisé par l’ESP8266 pour décider de quelque chose.

Si vous utilisez une carte ESP32, lisez ESP32 Web Server with Slider Control LED Brightness (PWM).

Nous espérons que vous avez trouvé ce projet utile. Vous aimerez peut-être aussi les tutoriels suivants :

En savoir plus sur l’ESP8266 avec nos ressources :

Merci d’avoir lu.