Zum Inhalt springen

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

28. März 2025 durch
Dimmer controller – ESP32/8266 web server with slider Arduino code.
Administrator
| Noch keine Kommentare


In diesem Dimmer-Steuerungsprojekt mit Webserver lernen wir, wie man mit ESP8266 und ESP32 einen Slider-Webserver erstellt, der den Dimmspannungspegel des an den GPIO-Pin des ESP8266 / ESP32 angeschlossenen Dimmers steuert.

Dies wird durch einen HTML-Slider erreicht, den wir zur Webserver-Seite hinzufügen. Der Slider wird bewegt, um den Slider-Wert einzustellen. Als Reaktion darauf wird dieser Slider-Wert den Dimmer-Wert festlegen.

Außerdem verwenden wir die Bibliothek WiFiManager, die es Ihnen ermöglicht, Ihr Dimmer-Projekt auf Basis von ESP8266/ESP32 mit verschiedenen Access Points (AP) zu verbinden, ohne den Code fest einprogrammieren und erneut auf Ihr Board hochladen zu müssen. Zusätzlich können Sie mit der WiFiManager-Bibliothek benutzerdefinierte Parameter (Variablen oder MQTT-Server-/Port-Adressen) hinzufügen und mehrere SSID-Verbindungen verwalten.

Unten finden Sie 2 Code-Beispiele. Eines für einen 1-Kanal-Dimmer und den zweiten Code für einen 4-Kanal-Dimmer mit 4 Slidern auf der Webseite.


1-Kanal DIMMER-CODE

  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 // Pin-Einstellungen
  7. dimmerLamp dimmer(outputPin, zerocross); //Port für Dimmer initialisieren für ESP8266, ESP32, Arduino Due Boards
  10. #if defined(ESP8266)
  11. #include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
  12. #else
  13. #include <WiFi.h>                //Für ESP32
  14. #endif
  16. #include <ESPAsyncWebServer.h>
  17. #include <ESPAsyncWiFiManager.h>         //https://github.com/knolleary/pubsubclient
  20. //wird aufgerufen, wenn WiFiManager in den Konfigurationsmodus wechselt
  21. void configModeCallback (AsyncWiFiManager *myWiFiManager) {
  22.   Serial.println("Entered config mode");
  23.   Serial.println(WiFi.softAPIP());
  24.   //wenn eine automatisch generierte SSID verwendet wurde, diese ausgeben
  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. // Ersetzt Platzhalter durch den Button-Abschnitt auf Ihrer Webseite
  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.   // Ihren Setup-Code hier einfügen, wird einmal ausgeführt:
  83.   Serial.begin(115200);
  84.   dimmer.begin(NORMAL_MODE, OND);
  86.   //WiFiManager. Lokale Initialisierung. Nach Abschluss wird er nicht mehr benötigt
  87.   AsyncWiFiManager wifiManager(&server,&dns);
  88.   //Einstellungen zurücksetzen - zum Testen
  89.   //wifiManager.resetSettings();
  91.   //Callback setzen, der aufgerufen wird, wenn die Verbindung zum vorherigen WiFi fehlschlägt und in den Access-Point-Modus wechselt
  92.   //wifiManager.setAPCallback(configModeCallback);
  94.   //holt SSID und Passwort und versucht sich zu verbinden
  95.   //und geht in eine Warteschleife bis zur Konfiguration
  96.   if (!wifiManager.autoConnect("WiFi-Dimmer")) {
  97.     Serial.println("failed to connect and hit timeout");
  98.     //Zurücksetzen und erneut versuchen, oder in den Deep-Sleep-Modus wechseln
  99.     //ESP.resetSettings();
  100.     //ESP.reset();
  101.     //ESP.restart();  
  102.     delay(1000);
  103.   }
  105.   //wenn Sie hier ankommen, sind Sie mit dem WiFi verbunden
  106.   Serial.println("connected!");
  108.    // Route für die Stamm-Webseite
  109.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  110.     request->send_P(200, "text/html", index_html, processor);
  111.   });
  113.   // GET-Anfrage an <ESP_IP>/slider?value=<inputMessage> senden
  114.   server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  115.     String inputMessage;
  116.     // GET input1-Wert von <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());  //DIMMEN
  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.   // Server starten
  131.   server.begin();
  132. }
  134. void loop() {
  135.   // Ihren Hauptcode hier einfügen, wird wiederholt ausgeführt:
  137. }


4-Kanal DIMMER-CODE

  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 // Pin-Einstellungen
  7. dimmerLamp dimmer(outputPin, zerocross); //Port für Dimmer initialisieren für ESP8266, ESP32, Arduino Due Boards
  9. #if defined(ESP8266)
  10. #include <ESP8266WiFi.h>          //https://github.com/esp8266/Arduino
  11. #else
  12. #include <WiFi.h>          //für ESP32
  13. #endif
  15. #include <ESPAsyncWebServer.h>
  16. #include <ESPAsyncWiFiManager.h>         //https://github.com/knolleary/pubsubclient
  19. //wird aufgerufen, wenn WiFiManager in den Konfigurationsmodus wechselt
  20. void configModeCallback (AsyncWiFiManager *myWiFiManager) {
  21.   Serial.println("Entered config mode");
  22.   Serial.println(WiFi.softAPIP());
  23.   //wenn eine automatisch generierte SSID verwendet wurde, diese ausgeben
  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. // Ersetzt Platzhalter durch den Button-Abschnitt auf Ihrer Webseite
  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.   // Ihren Setup-Code hier einfügen, wird einmal ausgeführt:
  131.   Serial.begin(115200);
  132.   dimmer.begin(NORMAL_MODE, OND);
  134.   //WiFiManager
  135.   //Lokale Initialisierung. Nach Abschluss wird er nicht mehr benötigt
  136.   AsyncWiFiManager wifiManager(&server,&dns);
  137.   //Einstellungen zurücksetzen - zum Testen
  138.   //wifiManager.resetSettings();
  140.   //Callback setzen, der aufgerufen wird, wenn die Verbindung zum vorherigen WiFi fehlschlägt und in den Access-Point-Modus wechselt
  141.   //wifiManager.setAPCallback(configModeCallback);
  143.   //holt SSID und Passwort und versucht sich zu verbinden
  144.   //und geht in eine Warteschleife bis zur Konfiguration
  145.   if (!wifiManager.autoConnect("WiFi-Dimmer")) {
  146.     Serial.println("failed to connect and hit timeout");
  147.     //Zurücksetzen und erneut versuchen, oder in den Deep-Sleep-Modus wechseln
  148.     //ESP.resetSettings();
  149.     //ESP.reset();
  150.     //ESP.restart();  
  151.     delay(1000);
  152.   }
  154.   //wenn Sie hier ankommen, sind Sie mit dem WiFi verbunden
  155.   Serial.println("connected...yeey :)");
  157.    // Route für die Stamm-Webseite
  158.   server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  159.     request->send_P(200, "text/html", index_html, processor);
  160.   });
  162.   // GET-Anfrage an <ESP_IP>/slider?value=<inputMessage> senden
  163.   server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  164.     String inputMessage;
  165.     // GET input1-Wert von <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.     // GET input1-Wert von <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.   // Server starten
  193.   server.begin();
  195. }
  197. void loop() {
  198.   // Ihren Hauptcode hier einfügen, wird wiederholt ausgeführt:
  200. }


Schritt 1. Wi-Fi-Zugang einrichten.

WiFiManager ist eine großartige Bibliothek für Ihre ESP8266/ESP32-Projekte, denn mit dieser Bibliothek müssen Sie Ihre Netzwerk-Zugangsdaten (SSID und Passwort) nicht mehr fest im Code hinterlegen. Ihr ESP verbindet sich automatisch mit einem bekannten Netzwerk oder richtet einen Access Point ein, über den Sie die Netzwerk-Zugangsdaten konfigurieren können. So funktioniert dieser Prozess:

  • Wenn Ihr ESP8266/ESP32 startet, wird er im Station-Modus eingerichtet und versucht, sich mit einem zuvor gespeicherten Access Point (einer bekannten SSID- und Passwort-Kombination) zu verbinden;
  • Wenn dieser Vorgang fehlschlägt, wird der ESP in den Access-Point-Modus versetzt;
  • Verbinden Sie sich mit einem beliebigen WLAN-fähigen Gerät mit Browser mit dem neu erstellten Access Point (WiFi-Dimmer);
  • Nachdem eine Verbindung mit „WiFi-Dimmer" hergestellt wurde, können Sie die Standard-IP-Adresse 192.168.4.1 aufrufen, um eine Webseite zu öffnen, auf der Sie Ihre SSID und Ihr Passwort konfigurieren können;
  • Sobald eine neue SSID und ein neues Passwort eingestellt sind, startet der ESP neu und versucht, sich zu verbinden;

Wenn eine Verbindung hergestellt wird, ist der Vorgang erfolgreich abgeschlossen. Andernfalls wird er als Access Point eingerichtet.


Schritt 2. Webserver-Slider und Dimmen.

  • Der ESP8266/ESP32 hostet einen Webserver, der eine Webseite mit einem Slider anzeigt;
  • Wenn Sie den Slider bewegen, senden Sie eine HTTP-Anfrage an den ESP8266/ESP32 mit dem neuen Slider-Wert;
  • Die HTTP-Anfrage hat folgendes Format: GET/slider?value=SLIDERVALUE, wobei SLIDERVALUE eine Zahl zwischen 0 und 100 ist;
  • Aus der HTTP-Anfrage erhält der ESP8266/ESP32 den aktuellen Wert des Sliders;
  • Der ESP8266 passt den Dimmer-Wert entsprechend dem Slider-Wert an: dimmer.setPower(sliderValue.toInt()); //DIMMEN;

Beim 4-Kanal-Dimmer haben Sie auf der Webseite 4 Slider.



Diesen Beitrag teilen
Unsere Blogs
Anmelden , um einen Kommentar zu hinterlassen