Se rendre au contenu

Dimmer controller – ESP32/8266 web server with slider Arduino code.

28 mars 2025 par
Dimmer controller – ESP32/8266 web server with slider Arduino code.
Administrator
| Aucun commentaire pour l'instant


Dans ce projet de commande de variateur avec serveur web, nous allons apprendre à créer avec ESP8266 et ESP32 un serveur web à slider qui contrôlera le niveau de tension de variation du variateur connecté à la broche GPIO de l'ESP8266 / ESP32.

Cela sera réalisé grâce à un slider HTML que nous ajouterons à la page du serveur web. Le slider sera déplacé pour définir sa valeur. En réponse, cette valeur du slider définira la valeur du variateur.

De plus, nous utilisons la bibliothèque WiFiManager qui vous permet de connecter votre projet de variateur basé sur ESP8266/ESP32 à différents points d'accès (AP) sans avoir à coder en dur et téléverser un nouveau code sur votre carte. Vous pouvez également ajouter des paramètres personnalisés (variables ou adresse serveur/port MQTT) et gérer plusieurs connexions SSID avec la bibliothèque WiFiManager.

Ci-dessous, vous trouverez 2 exemples de code. Le premier pour un variateur 1 canal et le second pour un variateur 4 canaux avec 4 sliders sur la page web.


CODE VARIATEUR 1 canal

  1. #include <AsyncTCP.h>
  3. #include <RBDdimmer.h>       //https://rocketcontroller.com/dimmer-connection-to-microcontroller-and-arduino-library-examples/
  4. #define outputPin  16 
  5. #define zerocross  5 // configuration des broches
  7. dimmerLamp dimmer(outputPin, zerocross); //initialisation du port pour le variateur pour les cartes ESP8266, ESP32, Arduino Due
  10. #if defined(ESP8266)
  11. #include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
  12. #else
  13. #include <WiFi.h>                //Pour ESP32
  14. #endif
  16. #include <ESPAsyncWebServer.h>
  17. #include <ESPAsyncWiFiManager.h>         //https://github.com/knolleary/pubsubclient
  20. //appelé lorsque WiFiManager entre en mode configuration
  21. void configModeCallback (AsyncWiFiManager *myWiFiManager) {
  22.   Serial.println("Entered config mode");
  23.   Serial.println(WiFi.softAPIP());
  24.   //si un SSID généré automatiquement a été utilisé, l'afficher
  25.   Serial.println(myWiFiManager->getConfigPortalSSID());
  26. }
  28. AsyncWebServer server(80);
  29. DNSServer dns;
  31. String sliderValue = "0";
  33. const char* PARAM_INPUT = "value";
  34. const char index_html[] PROGMEM = R"rawliteral(
  35. <!DOCTYPE HTML><html>
  36. <head>
  37.   <meta name="viewport" content="width=device-width, initial-scale=1">
  38.   <title>Dimmer ESP Controller</title>
  39.   <style>
  40.     html {font-family: Arial; display: inline-block; text-align: center;}
  41.     h2 {font-size: 2.3rem;}
  42.     p {font-size: 1.9rem;}
  43.     body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
  44.     .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
  45.       outline: none; -webkit-transition: .2s; transition: opacity .2s;}
  46.     .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
  47.     .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; } 
  48.     .button { background-color: #003249; border: none; color: white; padding: 16px 40px;}
  49.   </style>
  50. </head>
  51. <body>
  52.   <h2>RocketController Dimmer</h2>
  53.   <p><span id="textSliderValue">%SLIDERVALUE%</span></p>
  54.   <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="100" value="%SLIDERVALUE%" step="1" class="slider"></p>
  55.   </br>
  56.   <p><a href=/output/on\><button class=\"button\">WiFi RST</button></a></p>
  57.   
  58. <script>
  59. function updateSliderPWM(element) {
  60.   var sliderValue = document.getElementById("pwmSlider").value;
  61.   document.getElementById("textSliderValue").innerHTML = sliderValue;
  62.   console.log(sliderValue);
  63.   var xhr = new XMLHttpRequest();
  64.   xhr.open("GET", "/slider?value="+sliderValue, true);
  65.   xhr.send();
  66. }
  67. </script>
  68. </body>
  69. </html>
  70. )rawliteral";
  72. // Remplace le placeholder par la section bouton dans votre page web
  73. String processor(const String& var){
  74.   //Serial.println(var);
  75.   if (var == "SLIDERVALUE"){
  76.     return sliderValue;
  77.   }
  78.   return String();
  79. }
  81. void setup() {
  82.   // insérez votre code d'initialisation ici, exécuté une seule fois :
  83.   Serial.begin(115200);
  84.   dimmer.begin(NORMAL_MODE, OND);
  86.   //WiFiManager. Initialisation locale. Une fois son travail terminé, il n'est plus nécessaire de le conserver
  87.   AsyncWiFiManager wifiManager(&server,&dns);
  88.   //réinitialiser les paramètres - pour les tests
  89.   //wifiManager.resetSettings();
  91.   //définir le callback appelé lorsque la connexion au WiFi précédent échoue et passe en mode point d'accès
  92.   //wifiManager.setAPCallback(configModeCallback);
  94.   //récupère le SSID et le mot de passe et tente de se connecter
  95.   //et entre dans une boucle bloquante en attente de configuration
  96.   if (!wifiManager.autoConnect("WiFi-Dimmer")) {
  97.     Serial.println("failed to connect and hit timeout");
  98.     //réinitialiser et réessayer, ou mettre en veille profonde
  99.     //ESP.resetSettings();
  100.     //ESP.reset();
  101.     //ESP.restart();  
  102.     delay(1000);
  103.   }
  105.   //si vous arrivez ici, vous êtes connecté au WiFi
  106.   Serial.println("connected!");
  108.    // Route pour la page web racine
  109.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  110.     request->send_P(200, "text/html", index_html, processor);
  111.   });
  113.   // Envoyer une requête GET à <ESP_IP>/slider?value=<inputMessage>
  114.   server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  115.     String inputMessage;
  116.     // Obtenir la valeur input1 sur <ESP_IP>/slider?value=<inputMessage>
  117.     if (request->hasParam(PARAM_INPUT)) {
  118.       inputMessage = request->getParam(PARAM_INPUT)->value();
  119.       sliderValue = inputMessage;
  120.       dimmer.setPower(sliderValue.toInt());  //VARIATION
  121.     }
  122.     else {
  123.       inputMessage = "No message sent";
  124.     }
  125.     //Serial.println(inputMessage);
  126.     Serial.println(sliderValue);
  127.     request->send(200, "text/plain", "OK");
  128.   });
  129.   
  130.   // Démarrer le serveur
  131.   server.begin();
  132. }
  134. void loop() {
  135.   // insérez votre code principal ici, exécuté en boucle :
  137. }


CODE VARIATEUR 4 canaux

  1. #include <AsyncTCP.h>
  3. #include <RBDdimmer.h>       //https://rocketcontroller.com/dimmer-connection-to-microcontroller-and-arduino-library-examples/
  4. #define outputPin  16 
  5. #define zerocross  5 // configuration des broches
  7. dimmerLamp dimmer(outputPin, zerocross); //initialisation du port pour le variateur pour les cartes ESP8266, ESP32, Arduino Due
  9. #if defined(ESP8266)
  10. #include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
  11. #else
  12. #include <WiFi.h>          //pour ESP32
  13. #endif
  15. #include <ESPAsyncWebServer.h>
  16. #include <ESPAsyncWiFiManager.h>         //https://github.com/knolleary/pubsubclient
  19. //appelé lorsque WiFiManager entre en mode configuration
  20. void configModeCallback (AsyncWiFiManager *myWiFiManager) {
  21.   Serial.println("Entered config mode");
  22.   Serial.println(WiFi.softAPIP());
  23.   //si un SSID généré automatiquement a été utilisé, l'afficher
  24.   Serial.println(myWiFiManager->getConfigPortalSSID());
  25. }
  27. AsyncWebServer server(80);
  28. DNSServer dns;
  30. //=====
  31. String sliderValue = "0";
  32. String sliderValue2 = "0";
  33. String sliderValue3 = "0";
  34. String sliderValue4 = "0";
  36. const char* PARAM_INPUT = "value";
  37. const char index_html[] PROGMEM = R"rawliteral(
  38. <!DOCTYPE HTML><html>
  39. <head>
  40.   <meta name="viewport" content="width=device-width, initial-scale=1">
  41.   <title>Dimmer ESP Controller</title>
  42.   <style>
  43.     html {font-family: Arial; display: inline-block; text-align: center;}
  44.     h2 {font-size: 2.3rem;}
  45.     p {font-size: 1.9rem;}
  46.     body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
  47.     .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
  48.       outline: none; -webkit-transition: .2s; transition: opacity .2s;}
  49.     .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
  50.     .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; } 
  51.     .button { background-color: #003249; border: none; color: white; padding: 16px 40px;}
  52.   </style>
  53. </head>
  54. <body>
  55.   <h2>Dimmer ESP Controller</h2>
  56.   <p><span id="textSliderValue">%SLIDERVALUE%</span></p>
  57.   <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="100" value="%SLIDERVALUE%" step="1" class="slider"></p>
  58.   </br>
  59.   <h2>Dimmer ESP Controller2</h2>
  60.   <p><span id="textSliderValue2">%SLIDERVALUE2%</span></p>
  61.   <p><input type="range" onchange="updateSliderPWM2(this)" id="pwmSlider" min="0" max="100" value2="%SLIDERVALUE2%" step="1" class="slider"></p>
  62.   </br>
  63.   <h2>Dimmer ESP Controller3</h2>
  64.   <p><span id="textSliderValue3">%SLIDERVALUE3%</span></p>
  65.   <p><input type="range" onchange="updateSliderPWM3(this)" id="pwmSlider" min="0" max="100" value3="%SLIDERVALUE3%" step="1" class="slider"></p>
  66.   </br>
  67.   <h2>Dimmer ESP Controller4</h2>
  68.   <p><span id="textSliderValue4">%SLIDERVALUE4%</span></p>
  69.   <p><input type="range" onchange="updateSliderPWM4(this)" id="pwmSlider" min="0" max="100" value4="%SLIDERVALUE4%" step="1" class="slider"></p>
  70.   </br>      
  71.   <p><a href=/output/on\><button class=\"button\">WiFi RST</button></a></p>
  72.   
  73. <script>
  74. function updateSliderPWM  (element) {
  75.   var sliderValue = document.getElementById("pwmSlider").value;
  76.   document.getElementById("textSliderValue").innerHTML = sliderValue;
  77.   console.log(sliderValue);
  78.   var xhr = new XMLHttpRequest();
  79.   xhr.open("GET", "/slider?value="+sliderValue, true);
  80.   xhr.send();
  81. }
  82. function updateSliderPWM2  (element) {
  83.   var sliderValue2 = document.getElementById("pwmSlider2").value2;
  84.   document.getElementById("textSliderValue2").innerHTML = sliderValue2;
  85.   console.log(sliderValue2);
  86.   var xhr = new XMLHttpRequest();
  87.   xhr.open("GET", "/slider?value="+sliderValue2, true);
  88.   xhr.send();
  89. }
  90. function updateSliderPWM3  (element) {
  91.   var sliderValue3 = document.getElementById("pwmSlider3").value3;
  92.   document.getElementById("textSliderValue3").innerHTML = sliderValue3;
  93.   console.log(sliderValue3);
  94.   var xhr = new XMLHttpRequest();
  95.   xhr.open("GET", "/slider?value="+sliderValue3, true);
  96.   xhr.send();
  97. }
  98. function updateSliderPWM4  (element) {
  99.   var sliderValue4 = document.getElementById("pwmSlider4").value4;
  100.   document.getElementById("textSliderValue4").innerHTML = sliderValue4;
  101.   console.log(sliderValue4);
  102.   var xhr = new XMLHttpRequest();
  103.   xhr.open("GET", "/slider?value="+sliderValue4, true);
  104.   xhr.send();
  105. }
  106. </script>
  107. </body>
  108. </html>
  109. )rawliteral";
  111. // Remplace le placeholder par la section bouton dans votre page web
  112. String processor(const String& var){
  113.   //Serial.println(var);
  114.   if (var == "SLIDERVALUE"){
  115.     return sliderValue;
  116.   }
  117.   if (var == "SLIDERVALUE2"){
  118.     return sliderValue2;
  119.   }
  120.   if (var == "SLIDERVALUE3"){
  121.     return sliderValue3;
  122.   }  
  123.   if (var == "SLIDERVALUE4"){
  124.     return sliderValue4;
  125.   }  
  126.   return String();
  127. }
  129. void setup() {
  130.   // insérez votre code d'initialisation ici, exécuté une seule fois :
  131.   Serial.begin(115200);
  132.   dimmer.begin(NORMAL_MODE, OND);
  134.   //WiFiManager
  135.   //Initialisation locale. Une fois son travail terminé, il n'est plus nécessaire de le conserver
  136.   AsyncWiFiManager wifiManager(&server,&dns);
  137.   //réinitialiser les paramètres - pour les tests
  138.   //wifiManager.resetSettings();
  140.   //définir le callback appelé lorsque la connexion au WiFi précédent échoue et passe en mode point d'accès
  141.   //wifiManager.setAPCallback(configModeCallback);
  143.   //récupère le SSID et le mot de passe et tente de se connecter
  144.   //et entre dans une boucle bloquante en attente de configuration
  145.   if (!wifiManager.autoConnect("WiFi-Dimmer")) {
  146.     Serial.println("failed to connect and hit timeout");
  147.     //réinitialiser et réessayer, ou mettre en veille profonde
  148.     //ESP.resetSettings();
  149.     //ESP.reset();
  150.     //ESP.restart();  
  151.     delay(1000);
  152.   }
  154.   //si vous arrivez ici, vous êtes connecté au WiFi
  155.   Serial.println("connected...yeey :)");
  157.    // Route pour la page web racine
  158.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  159.     request->send_P(200, "text/html", index_html, processor);
  160.   });
  162.   // Envoyer une requête GET à <ESP_IP>/slider?value=<inputMessage>
  163.   server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  164.     String inputMessage;
  165.     // Obtenir la valeur input1 sur <ESP_IP>/slider?value=<inputMessage>
  166.     if (request->hasParam(PARAM_INPUT)) {
  167.       inputMessage = request->getParam(PARAM_INPUT)->value();
  168.       sliderValue = inputMessage;
  169.         dimmer.setPower(sliderValue.toInt());
  170.     }
  171.     String inputMessage2;
  172.     // Obtenir la valeur input1 sur <ESP_IP>/slider?value=<inputMessage>
  173.     if (request->hasParam(PARAM_INPUT)) {
  174.       inputMessage2 = request->getParam(PARAM_INPUT)->value();
  175.       sliderValue2 = inputMessage2;
  176.         
  177.     }
  178.     else {
  179.       inputMessage = "No message sent";
  180.     }
  181.     //Serial.println(inputMessage);
  182.     Serial.println(sliderValue);
  183.     Serial.print("DIM2");
  184.     Serial.println(sliderValue2);
  185.     Serial.print("DIM3");
  186.     Serial.println(sliderValue3);    
  187.     Serial.print("DIM4");
  188.     Serial.println(sliderValue4);    
  189.     request->send(200, "text/plain", "OK");
  190.   });
  191.   
  192.   // Démarrer le serveur
  193.   server.begin();
  195. }
  197. void loop() {
  198.   // insérez votre code principal ici, exécuté en boucle :
  200. }


Étape 1. Configuration de l'accès Wi-Fi.

WiFiManager est une excellente bibliothèque à ajouter à vos projets ESP8266/ESP32, car grâce à elle, vous n'avez plus besoin de coder en dur vos identifiants réseau (SSID et mot de passe). Votre ESP se connectera automatiquement à un réseau connu ou créera un point d'accès que vous pourrez utiliser pour configurer les identifiants réseau. Voici comment ce processus fonctionne :

  • Lorsque votre ESP8266/ESP32 démarre, il est configuré en mode Station et tente de se connecter à un point d'accès précédemment enregistré (une combinaison SSID et mot de passe connue) ;
  • Si ce processus échoue, l'ESP passe en mode point d'accès ;
  • À l'aide de n'importe quel appareil Wi-Fi équipé d'un navigateur, connectez-vous au point d'accès nouvellement créé (WiFi-Dimmer) ;
  • Après avoir établi une connexion avec « WiFi-Dimmer », vous pouvez accéder à l'adresse IP par défaut 192.168.4.1 pour ouvrir une page web qui vous permet de configurer votre SSID et votre mot de passe ;
  • Une fois un nouveau SSID et un nouveau mot de passe définis, l'ESP redémarre et tente de se connecter ;

S'il établit une connexion, le processus est terminé avec succès. Sinon, il sera configuré en tant que point d'accès.


Étape 2. Slider du serveur web et variation.

  • L'ESP8266/ESP32 héberge un serveur web qui affiche une page web avec un slider ;
  • Lorsque vous déplacez le slider, vous envoyez une requête HTTP à l'ESP8266/ESP32 avec la nouvelle valeur du slider ;
  • La requête HTTP se présente sous le format suivant : GET/slider?value=SLIDERVALUE, où SLIDERVALUE est un nombre entre 0 et 100 ;
  • À partir de la requête HTTP, l'ESP8266/ESP32 obtient la valeur actuelle du slider ;
  • L'ESP8266 ajuste la valeur du variateur en fonction de la valeur du slider : dimmer.setPower(sliderValue.toInt()); //VARIATION ;

Pour le variateur 4 canaux, la page web affiche 4 sliders.



Partager cet article
Nos blogs
Se connecter pour laisser un commentaire.