Ir al contenido

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

28 de marzo de 2025 por
Dimmer controller – ESP32/8266 web server with slider Arduino code.
Administrator
| Sin comentarios aún


En este proyecto de control de dimmer con servidor web, aprenderemos a crear con ESP8266 y ESP32 un servidor web con slider que controlará el nivel de voltaje de atenuación del dimmer conectado al pin GPIO del ESP8266 / ESP32.

Esto se logrará mediante un slider HTML que agregaremos a la página del servidor web. El slider se moverá para establecer su valor. En respuesta, este valor del slider establecerá el valor del dimmer.

Además, utilizamos la biblioteca WiFiManager que le permite conectar su proyecto de dimmer basado en ESP8266/ESP32 a diferentes puntos de acceso (AP) sin necesidad de codificar y cargar nuevo código en su placa. Adicionalmente, con la biblioteca WiFiManager también puede agregar parámetros personalizados (variables o dirección de servidor/puerto MQTT) y gestionar múltiples conexiones SSID.

A continuación encontrará 2 ejemplos de código. Uno para un dimmer de 1 canal y el segundo código para un dimmer de 4 canales con 4 sliders en la página web.


CÓDIGO DIMMER de 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 // configuración de pines
  7. dimmerLamp dimmer(outputPin, zerocross); //inicializar puerto para dimmer en placas ESP8266, ESP32, Arduino Due
  10. #if defined(ESP8266)
  11. #include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
  12. #else
  13. #include <WiFi.h>                //Para ESP32
  14. #endif
  16. #include <ESPAsyncWebServer.h>
  17. #include <ESPAsyncWiFiManager.h>         //https://github.com/knolleary/pubsubclient
  20. //se llama cuando WiFiManager entra en modo de configuración
  21. void configModeCallback (AsyncWiFiManager *myWiFiManager) {
  22.   Serial.println("Entered config mode");
  23.   Serial.println(WiFi.softAPIP());
  24.   //si se usó un SSID generado automáticamente, mostrarlo
  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. // Reemplaza el marcador de posición por la sección de botón en su página 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.   // inserte su código de inicialización aquí, se ejecuta una sola vez:
  83.   Serial.begin(115200);
  84.   dimmer.begin(NORMAL_MODE, OND);
  86.   //WiFiManager. Inicialización local. Una vez que termina su tarea, no es necesario conservarlo
  87.   AsyncWiFiManager wifiManager(&server,&dns);
  88.   //restablecer configuración - para pruebas
  89.   //wifiManager.resetSettings();
  91.   //establecer callback que se llama cuando falla la conexión al WiFi anterior y entra en modo punto de acceso
  92.   //wifiManager.setAPCallback(configModeCallback);
  94.   //obtiene el SSID y la contraseña e intenta conectarse
  95.   //y entra en un bucle de bloqueo esperando configuración
  96.   if (!wifiManager.autoConnect("WiFi-Dimmer")) {
  97.     Serial.println("failed to connect and hit timeout");
  98.     //restablecer e intentar de nuevo, o poner en modo de suspensión profunda
  99.     //ESP.resetSettings();
  100.     //ESP.reset();
  101.     //ESP.restart();  
  102.     delay(1000);
  103.   }
  105.   //si llega aquí, se ha conectado al WiFi
  106.   Serial.println("connected!");
  108.    // Ruta para la página web raíz
  109.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  110.     request->send_P(200, "text/html", index_html, processor);
  111.   });
  113.   // Enviar una solicitud GET a <ESP_IP>/slider?value=<inputMessage>
  114.   server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  115.     String inputMessage;
  116.     // Obtener valor input1 en <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());  //ATENUACIÓN
  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.   // Iniciar servidor
  131.   server.begin();
  132. }
  134. void loop() {
  135.   // inserte su código principal aquí, se ejecuta repetidamente:
  137. }


CÓDIGO DIMMER de 4 canales

  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 // configuración de pines
  7. dimmerLamp dimmer(outputPin, zerocross); //inicializar puerto para dimmer en placas ESP8266, ESP32, Arduino Due
  9. #if defined(ESP8266)
  10. #include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
  11. #else
  12. #include <WiFi.h>          //para ESP32
  13. #endif
  15. #include <ESPAsyncWebServer.h>
  16. #include <ESPAsyncWiFiManager.h>         //https://github.com/knolleary/pubsubclient
  19. //se llama cuando WiFiManager entra en modo de configuración
  20. void configModeCallback (AsyncWiFiManager *myWiFiManager) {
  21.   Serial.println("Entered config mode");
  22.   Serial.println(WiFi.softAPIP());
  23.   //si se usó un SSID generado automáticamente, mostrarlo
  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. // Reemplaza el marcador de posición por la sección de botón en su página 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.   // inserte su código de inicialización aquí, se ejecuta una sola vez:
  131.   Serial.begin(115200);
  132.   dimmer.begin(NORMAL_MODE, OND);
  134.   //WiFiManager
  135.   //Inicialización local. Una vez que termina su tarea, no es necesario conservarlo
  136.   AsyncWiFiManager wifiManager(&server,&dns);
  137.   //restablecer configuración - para pruebas
  138.   //wifiManager.resetSettings();
  140.   //establecer callback que se llama cuando falla la conexión al WiFi anterior y entra en modo punto de acceso
  141.   //wifiManager.setAPCallback(configModeCallback);
  143.   //obtiene el SSID y la contraseña e intenta conectarse
  144.   //y entra en un bucle de bloqueo esperando configuración
  145.   if (!wifiManager.autoConnect("WiFi-Dimmer")) {
  146.     Serial.println("failed to connect and hit timeout");
  147.     //restablecer e intentar de nuevo, o poner en modo de suspensión profunda
  148.     //ESP.resetSettings();
  149.     //ESP.reset();
  150.     //ESP.restart();  
  151.     delay(1000);
  152.   }
  154.   //si llega aquí, se ha conectado al WiFi
  155.   Serial.println("connected...yeey :)");
  157.    // Ruta para la página web raíz
  158.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  159.     request->send_P(200, "text/html", index_html, processor);
  160.   });
  162.   // Enviar una solicitud GET a <ESP_IP>/slider?value=<inputMessage>
  163.   server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  164.     String inputMessage;
  165.     // Obtener valor input1 en <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.     // Obtener valor input1 en <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.   // Iniciar servidor
  193.   server.begin();
  195. }
  197. void loop() {
  198.   // inserte su código principal aquí, se ejecuta repetidamente:
  200. }


Paso 1. Configuración del acceso Wi-Fi.

WiFiManager es una excelente biblioteca para agregar a sus proyectos ESP8266/ESP32, ya que con ella no necesita codificar de forma fija sus credenciales de red (SSID y contraseña). Su ESP se conectará automáticamente a una red conocida o configurará un punto de acceso que podrá usar para configurar las credenciales de red. Así es como funciona este proceso:

  • Cuando su ESP8266/ESP32 arranca, se configura en modo Estación e intenta conectarse a un punto de acceso previamente guardado (una combinación conocida de SSID y contraseña);
  • Si este proceso falla, configura el ESP en modo punto de acceso;
  • Usando cualquier dispositivo con Wi-Fi y navegador, conéctese al punto de acceso recién creado (WiFi-Dimmer);
  • Después de establecer una conexión con "WiFi-Dimmer", puede ir a la dirección IP predeterminada 192.168.4.1 para abrir una página web que le permite configurar su SSID y contraseña;
  • Una vez que se establecen un nuevo SSID y contraseña, el ESP se reinicia e intenta conectarse;

Si establece una conexión, el proceso se completa exitosamente. De lo contrario, se configurará como punto de acceso.


Paso 2. Slider del servidor web y atenuación.

  • El ESP8266/ESP32 aloja un servidor web que muestra una página web con un slider;
  • Cuando mueve el slider, envía una solicitud HTTP al ESP8266/ESP32 con el nuevo valor del slider;
  • La solicitud HTTP tiene el siguiente formato: GET/slider?value=SLIDERVALUE, donde SLIDERVALUE es un número entre 0 y 100;
  • A partir de la solicitud HTTP, el ESP8266/ESP32 obtiene el valor actual del slider;
  • El ESP8266 ajusta el valor del dimmer de acuerdo con el valor del slider: dimmer.setPower(sliderValue.toInt()); //ATENUACIÓN;

Para el dimmer de 4 canales, en la página web se muestran 4 sliders.



Compartir esta publicación
Nuestros blogs
Iniciar sesión para dejar un comentario