Перейти к содержимому

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

28 марта 2025 г. от
Dimmer controller – ESP32/8266 web server with slider Arduino code.
Administrator
| Комментариев пока нет


В этом проекте управления диммером с помощью веб-сервера мы рассмотрим, как создать на основе ESP8266 и ESP32 веб-сервер с ползунком для управления уровнем напряжения диммера, подключённого к GPIO-выводу ESP8266 / ESP32.

Для этого мы добавим на страницу веб-сервера HTML-ползунок. Перемещая ползунок, вы задаёте его значение, которое в свою очередь устанавливает уровень диммирования.

Кроме того, мы используем библиотеку WiFiManager, которая позволяет подключать проект диммера на базе ESP8266/ESP32 к различным точкам доступа (AP) без необходимости жёстко прописывать и загружать новый код на плату. Также с помощью библиотеки WiFiManager можно добавлять пользовательские параметры (переменные или адрес/порт MQTT-сервера) и управлять подключением к нескольким SSID.

Ниже приведены 2 примера кода. Первый — для одноканального диммера, второй — для 4-канального диммера с 4 ползунками на веб-странице.


Код для 1-канального ДИММЕРА

  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 // назначение выводов
  7. dimmerLamp dimmer(outputPin, zerocross); //инициализация порта для диммера для плат ESP8266, ESP32, Arduino Due
  10. #if defined(ESP8266)
  11. #include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
  12. #else
  13. #include <WiFi.h>                //Для ESP32
  14. #endif
  16. #include <ESPAsyncWebServer.h>
  17. #include <ESPAsyncWiFiManager.h>         //https://github.com/knolleary/pubsubclient
  20. //вызывается при переходе WiFiManager в режим конфигурации
  21. void configModeCallback (AsyncWiFiManager *myWiFiManager) {
  22.   Serial.println("Entered config mode");
  23.   Serial.println(WiFi.softAPIP());
  24.   //если использовался автоматически сгенерированный SSID, вывести его
  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. // Заменяет заполнитель на секцию с кнопкой на веб-странице
  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.   // поместите ваш код инициализации здесь, выполняется один раз:
  83.   Serial.begin(115200);
  84.   dimmer.begin(NORMAL_MODE, OND);
  86.   //WiFiManager. Локальная инициализация. После завершения работы нет необходимости хранить объект
  87.   AsyncWiFiManager wifiManager(&server,&dns);
  88.   //сброс настроек — для тестирования
  89.   //wifiManager.resetSettings();
  91.   //установка колбэка, который вызывается при неудачном подключении к предыдущему WiFi и переходе в режим точки доступа
  92.   //wifiManager.setAPCallback(configModeCallback);
  94.   //получает ssid и пароль, пытается подключиться
  95.   //и входит в блокирующий цикл ожидания конфигурации
  96.   if (!wifiManager.autoConnect("WiFi-Dimmer")) {
  97.     Serial.println("failed to connect and hit timeout");
  98.     //сбросить и попробовать снова, или перевести в глубокий сон
  99.     //ESP.resetSettings();
  100.     //ESP.reset();
  101.     //ESP.restart();  
  102.     delay(1000);
  103.   }
  105.   //если вы дошли до этой строки, подключение к WiFi выполнено
  106.   Serial.println("connected!");
  108.    // Маршрут для корневой / веб-страницы
  109.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  110.     request->send_P(200, "text/html", index_html, processor);
  111.   });
  113.   // Отправка GET-запроса на <ESP_IP>/slider?value=<inputMessage>
  114.   server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  115.     String inputMessage;
  116.     // Получение значения input1 по адресу <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());  //ДИММИРОВАНИЕ
  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.   // Запуск сервера
  131.   server.begin();
  132. }
  134. void loop() {
  135.   // поместите ваш основной код здесь, выполняется циклически:
  137. }


Код для 4-канального ДИММЕРА

  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 // назначение выводов
  7. dimmerLamp dimmer(outputPin, zerocross); //инициализация порта для диммера для плат ESP8266, ESP32, Arduino Due
  9. #if defined(ESP8266)
  10. #include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
  11. #else
  12. #include <WiFi.h>          //для ESP32
  13. #endif
  15. #include <ESPAsyncWebServer.h>
  16. #include <ESPAsyncWiFiManager.h>         //https://github.com/knolleary/pubsubclient
  19. //вызывается при переходе WiFiManager в режим конфигурации
  20. void configModeCallback (AsyncWiFiManager *myWiFiManager) {
  21.   Serial.println("Entered config mode");
  22.   Serial.println(WiFi.softAPIP());
  23.   //если использовался автоматически сгенерированный SSID, вывести его
  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. // Заменяет заполнитель на секцию с кнопкой на веб-странице
  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.   // поместите ваш код инициализации здесь, выполняется один раз:
  131.   Serial.begin(115200);
  132.   dimmer.begin(NORMAL_MODE, OND);
  134.   //WiFiManager
  135.   //Локальная инициализация. После завершения работы нет необходимости хранить объект
  136.   AsyncWiFiManager wifiManager(&server,&dns);
  137.   //сброс настроек — для тестирования
  138.   //wifiManager.resetSettings();
  140.   //установка колбэка, который вызывается при неудачном подключении к предыдущему WiFi и переходе в режим точки доступа
  141.   //wifiManager.setAPCallback(configModeCallback);
  143.   //получает ssid и пароль, пытается подключиться
  144.   //и входит в блокирующий цикл ожидания конфигурации
  145.   if (!wifiManager.autoConnect("WiFi-Dimmer")) {
  146.     Serial.println("failed to connect and hit timeout");
  147.     //сбросить и попробовать снова, или перевести в глубокий сон
  148.     //ESP.resetSettings();
  149.     //ESP.reset();
  150.     //ESP.restart();  
  151.     delay(1000);
  152.   }
  154.   //если вы дошли до этой строки, подключение к WiFi выполнено
  155.   Serial.println("connected...yeey :)");
  157.    // Маршрут для корневой / веб-страницы
  158.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  159.     request->send_P(200, "text/html", index_html, processor);
  160.   });
  162.   // Отправка GET-запроса на <ESP_IP>/slider?value=<inputMessage>
  163.   server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  164.     String inputMessage;
  165.     // Получение значения input1 по адресу <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.     // Получение значения input1 по адресу <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.   // Запуск сервера
  193.   server.begin();
  195. }
  197. void loop() {
  198.   // поместите ваш основной код здесь, выполняется циклически:
  200. }


Шаг 1. Настройка доступа к Wi-Fi.

WiFiManager — отличная библиотека для использования в проектах на ESP8266/ESP32, поскольку с ней вам больше не нужно жёстко прописывать сетевые учётные данные (SSID и пароль). ESP автоматически подключится к известной сети или создаст точку доступа, которую можно использовать для настройки сетевых параметров. Вот как работает этот процесс:

  • Когда ESP8266/ESP32 загружается, он переходит в режим станции (Station mode) и пытается подключиться к ранее сохранённой точке доступа (известная комбинация SSID и пароля);
  • Если подключение не удаётся, ESP переходит в режим точки доступа;
  • С помощью любого устройства с Wi-Fi и браузером подключитесь к созданной точке доступа (WiFi-Dimmer);
  • После подключения к «WiFi-Dimmer» откройте IP-адрес по умолчанию 192.168.4.1, чтобы открыть веб-страницу для настройки SSID и пароля;
  • После задания нового SSID и пароля ESP перезагружается и пытается подключиться;

Если подключение установлено, процесс завершён успешно. В противном случае ESP снова перейдёт в режим точки доступа.


Шаг 2. Веб-сервер с ползунком и диммирование.

  • ESP8266/ESP32 размещает веб-сервер с веб-страницей, содержащей ползунок;
  • Когда вы перемещаете ползунок, на ESP8266/ESP32 отправляется HTTP-запрос с новым значением ползунка;
  • HTTP-запрос имеет следующий формат: GET/slider?value=SLIDERVALUE, где SLIDERVALUE — число от 0 до 100;
  • Из HTTP-запроса ESP8266/ESP32 получает текущее значение ползунка;
  • ESP8266 устанавливает уровень диммера в соответствии со значением ползунка: dimmer.setPower(sliderValue.toInt()); //ДИММИРОВАНИЕ;

Для 4-канального диммера на веб-странице отображаются 4 ползунка.



Поделиться этой записью
Наши блоги
Войти оставить комментарий