Passa al contenuto

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

28 marzo 2025 di
Dimmer controller – ESP32/8266 web server with slider Arduino code.
Administrator
| Ancora nessun commento


In questo progetto di controllo dimmer con server web, impareremo a creare con ESP8266 ed ESP32 un server web con slider che controllerà il livello di tensione di dimmerizzazione del dimmer collegato al pin GPIO dell'ESP8266 / ESP32.

Questo sarà realizzato tramite uno slider HTML che aggiungeremo alla pagina del server web. Lo slider verrà spostato per impostare il suo valore. In risposta, questo valore dello slider imposterà il valore del dimmer.

Inoltre, utilizziamo la libreria WiFiManager che consente di collegare il progetto dimmer basato su ESP8266/ESP32 a diversi punti di accesso (AP) senza dover codificare e caricare nuovo codice sulla scheda. In aggiunta, con la libreria WiFiManager è possibile aggiungere parametri personalizzati (variabili o indirizzo server/porta MQTT) e gestire più connessioni SSID.

Di seguito troverete 2 esempi di codice. Uno per un dimmer a 1 canale e il secondo per un dimmer a 4 canali con 4 slider sulla pagina web.


CODICE DIMMER 1 canale

  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 // configurazione dei pin
  7. dimmerLamp dimmer(outputPin, zerocross); //inizializzazione della porta per il dimmer per schede ESP8266, ESP32, Arduino Due
  10. #if defined(ESP8266)
  11. #include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
  12. #else
  13. #include <WiFi.h>                //Per ESP32
  14. #endif
  16. #include <ESPAsyncWebServer.h>
  17. #include <ESPAsyncWiFiManager.h>         //https://github.com/knolleary/pubsubclient
  20. //viene chiamato quando WiFiManager entra in modalità configurazione
  21. void configModeCallback (AsyncWiFiManager *myWiFiManager) {
  22.   Serial.println("Entered config mode");
  23.   Serial.println(WiFi.softAPIP());
  24.   //se è stato usato un SSID generato automaticamente, stamparlo
  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. // Sostituisce il segnaposto con la sezione pulsante nella pagina 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.   // inserire il codice di inizializzazione qui, viene eseguito una sola volta:
  83.   Serial.begin(115200);
  84.   dimmer.begin(NORMAL_MODE, OND);
  86.   //WiFiManager. Inizializzazione locale. Una volta completato il suo compito, non è necessario mantenerlo
  87.   AsyncWiFiManager wifiManager(&server,&dns);
  88.   //ripristinare le impostazioni - per test
  89.   //wifiManager.resetSettings();
  91.   //impostare il callback che viene chiamato quando la connessione al WiFi precedente fallisce e passa in modalità punto di accesso
  92.   //wifiManager.setAPCallback(configModeCallback);
  94.   //recupera SSID e password e tenta di connettersi
  95.   //ed entra in un ciclo di blocco in attesa della configurazione
  96.   if (!wifiManager.autoConnect("WiFi-Dimmer")) {
  97.     Serial.println("failed to connect and hit timeout");
  98.     //ripristinare e riprovare, o mettere in modalità deep sleep
  99.     //ESP.resetSettings();
  100.     //ESP.reset();
  101.     //ESP.restart();  
  102.     delay(1000);
  103.   }
  105.   //se si arriva qui, ci si è connessi al WiFi
  106.   Serial.println("connected!");
  108.    // Percorso per la pagina web principale
  109.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  110.     request->send_P(200, "text/html", index_html, processor);
  111.   });
  113.   // Inviare una richiesta GET a <ESP_IP>/slider?value=<inputMessage>
  114.   server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  115.     String inputMessage;
  116.     // Ottenere il valore input1 su <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());  //DIMMERIZZAZIONE
  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.   // Avviare il server
  131.   server.begin();
  132. }
  134. void loop() {
  135.   // inserire il codice principale qui, viene eseguito ripetutamente:
  137. }


CODICE DIMMER 4 canali

  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 // configurazione dei pin
  7. dimmerLamp dimmer(outputPin, zerocross); //inizializzazione della porta per il dimmer per schede ESP8266, ESP32, Arduino Due
  9. #if defined(ESP8266)
  10. #include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
  11. #else
  12. #include <WiFi.h>          //per ESP32
  13. #endif
  15. #include <ESPAsyncWebServer.h>
  16. #include <ESPAsyncWiFiManager.h>         //https://github.com/knolleary/pubsubclient
  19. //viene chiamato quando WiFiManager entra in modalità configurazione
  20. void configModeCallback (AsyncWiFiManager *myWiFiManager) {
  21.   Serial.println("Entered config mode");
  22.   Serial.println(WiFi.softAPIP());
  23.   //se è stato usato un SSID generato automaticamente, stamparlo
  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. // Sostituisce il segnaposto con la sezione pulsante nella pagina 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.   // inserire il codice di inizializzazione qui, viene eseguito una sola volta:
  131.   Serial.begin(115200);
  132.   dimmer.begin(NORMAL_MODE, OND);
  134.   //WiFiManager
  135.   //Inizializzazione locale. Una volta completato il suo compito, non è necessario mantenerlo
  136.   AsyncWiFiManager wifiManager(&server,&dns);
  137.   //ripristinare le impostazioni - per test
  138.   //wifiManager.resetSettings();
  140.   //impostare il callback che viene chiamato quando la connessione al WiFi precedente fallisce e passa in modalità punto di accesso
  141.   //wifiManager.setAPCallback(configModeCallback);
  143.   //recupera SSID e password e tenta di connettersi
  144.   //ed entra in un ciclo di blocco in attesa della configurazione
  145.   if (!wifiManager.autoConnect("WiFi-Dimmer")) {
  146.     Serial.println("failed to connect and hit timeout");
  147.     //ripristinare e riprovare, o mettere in modalità deep sleep
  148.     //ESP.resetSettings();
  149.     //ESP.reset();
  150.     //ESP.restart();  
  151.     delay(1000);
  152.   }
  154.   //se si arriva qui, ci si è connessi al WiFi
  155.   Serial.println("connected...yeey :)");
  157.    // Percorso per la pagina web principale
  158.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  159.     request->send_P(200, "text/html", index_html, processor);
  160.   });
  162.   // Inviare una richiesta GET a <ESP_IP>/slider?value=<inputMessage>
  163.   server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  164.     String inputMessage;
  165.     // Ottenere il valore input1 su <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.     // Ottenere il valore input1 su <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.   // Avviare il server
  193.   server.begin();
  195. }
  197. void loop() {
  198.   // inserire il codice principale qui, viene eseguito ripetutamente:
  200. }


Passo 1. Configurazione dell'accesso Wi-Fi.

WiFiManager è un'eccellente libreria da aggiungere ai progetti ESP8266/ESP32, perché grazie ad essa non è più necessario codificare le credenziali di rete (SSID e password) direttamente nel codice. L'ESP si connetterà automaticamente a una rete conosciuta oppure creerà un punto di accesso che potrete utilizzare per configurare le credenziali di rete. Ecco come funziona questo processo:

  • Quando l'ESP8266/ESP32 si avvia, viene configurato in modalità Stazione e tenta di connettersi a un punto di accesso precedentemente salvato (una combinazione nota di SSID e password);
  • Se questo processo fallisce, l'ESP viene configurato in modalità punto di accesso;
  • Utilizzando qualsiasi dispositivo abilitato al Wi-Fi con un browser, collegatevi al punto di accesso appena creato (WiFi-Dimmer);
  • Dopo aver stabilito una connessione con "WiFi-Dimmer", potete accedere all'indirizzo IP predefinito 192.168.4.1 per aprire una pagina web che consente di configurare SSID e password;
  • Una volta impostati un nuovo SSID e una nuova password, l'ESP si riavvia e tenta di connettersi;

Se stabilisce una connessione, il processo è completato con successo. In caso contrario, verrà configurato come punto di accesso.


Passo 2. Slider del server web e dimmerizzazione.

  • L'ESP8266/ESP32 ospita un server web che visualizza una pagina web con uno slider;
  • Quando si sposta lo slider, viene inviata una richiesta HTTP all'ESP8266/ESP32 con il nuovo valore dello slider;
  • La richiesta HTTP ha il seguente formato: GET/slider?value=SLIDERVALUE, dove SLIDERVALUE è un numero compreso tra 0 e 100;
  • Dalla richiesta HTTP, l'ESP8266/ESP32 ottiene il valore corrente dello slider;
  • L'ESP8266 regola il valore del dimmer in base al valore dello slider: dimmer.setPower(sliderValue.toInt()); //DIMMERIZZAZIONE;

Per il dimmer a 4 canali, nella pagina web sono presenti 4 slider.



Condividi articolo
I nostri blog
Accedi per lasciare un commento