HOME ESP32 ESP8266 ESP32-CAM RASPBERRY PI MICROPYTHON RPi PICO ARDUINO REVIEWS

ESP32 Web Server with Slider: Control LED Brightness (PWM)

This tutorial shows how to build an ESP32 web server with a slider to control the LED brightness. You’ll learn how to add a slider to your web server projects, get its value and save it in a variable that the ESP32 can use. We’ll use that value to control the duty cycle of a PWM signal and change the brightness of an LED. Instead of an LED you can control a servo motor, for example.

ESP32 Web Server with Slider Control LED Brightness PWM using Arduino IDE

Updated 11 June 2024

Additionally, you can also modify the code in this tutorial to add slider to your projects to set a threshold value or any other value that you need to use in your code.

Project Overview

ESP32 ESP8266 Slider Web Server Control LED Brightness
  • The ESP32 hosts a web server that displays a web page with a slider;
  • When you move the slider, you make an HTTP request to the ESP32 with the new slider value;
  • The HTTP request comes in the following format: GET/slider?value=SLIDERVALUE, in which SLIDERVALUE is a number between 0 and 255. You can modify your slider to include any other range;
  • From the HTTP request, the ESP32 gets the current value of the slider;
  • The ESP32 adjusts the PWM duty cycle accordingly to the slider value;
  • This can be useful to control the brightness of an LED (as we’ll do in this example), a servo motor, setting up a threshold value or other applications.

Prerequisites

Before proceeding with this project, make sure you check the following prerequisites.

Arduino IDE

We’ll program the ESP32 boards using Arduino IDE, so before proceeding with this tutorial, make sure you have the ESP32 board installed in your Arduino IDE.

Async Web Server Libraries

We’ll build the web server using the following libraries:

These libraries aren’t available to install through the Arduino Library Manager, so you need to copy the library files to the Arduino Installation Libraries folder. Alternatively, in your Arduino IDE, you can go to Sketch > Include Library > Add .zip Library and select the libraries you’ve just downloaded.

Code

The following code controls the brightness of the ESP32 built-in LED using a slider on a web server. In other words, you can change the PWM duty cycle with a slider. This can be useful to control the LED brightness or control a servo motor, for example.

Copy the code to your Arduino IDE. Insert your network credentials and the code will work straight away.

/*********
  Rui Santos & Sara Santos - Random Nerd Tutorials
  Complete project details at https://RandomNerdTutorials.com/esp32-web-server-slider-pwm/
  
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files.
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*********/
// Import required libraries
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

const int output = 2;

String sliderValue = "0";

// setting PWM properties
const int freq = 5000;
const int ledChannel = 0;
const int resolution = 8;

const char* PARAM_INPUT = "value";

// Create AsyncWebServer object on port 80
AsyncWebServer server(80);

const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ESP Web Server</title>
  <style>
    html {font-family: Arial; display: inline-block; text-align: center;}
    h2 {font-size: 2.3rem;}
    p {font-size: 1.9rem;}
    body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
    .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
    .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
    .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; } 
  </style>
</head>
<body>
  <h2>ESP Web Server</h2>
  <p><span id="textSliderValue">%SLIDERVALUE%</span></p>
  <p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>
<script>
function updateSliderPWM(element) {
  var sliderValue = document.getElementById("pwmSlider").value;
  document.getElementById("textSliderValue").innerHTML = sliderValue;
  console.log(sliderValue);
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/slider?value="+sliderValue, true);
  xhr.send();
}
</script>
</body>
</html>
)rawliteral";

// Replaces placeholder with button section in your web page
String processor(const String& var){
  //Serial.println(var);
  if (var == "SLIDERVALUE"){
    return sliderValue;
  }
  return String();
}

void setup(){
  // Serial port for debugging purposes
  Serial.begin(115200);
  
  // configure LED PWM functionalitites
  ledcAttachChannel(output, freq, resolution, ledChannel);
  
  ledcWrite(output, sliderValue.toInt());

  // Connect to Wi-Fi
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi..");
  }

  // Print ESP Local IP Address
  Serial.println(WiFi.localIP());

  // Route for root / web page
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
    request->send_P(200, "text/html", index_html, processor);
  });

  // Send a GET request to <ESP_IP>/slider?value=<inputMessage>
  server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
    String inputMessage;
    // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
    if (request->hasParam(PARAM_INPUT)) {
      inputMessage = request->getParam(PARAM_INPUT)->value();
      sliderValue = inputMessage;
      ledcWrite(output, sliderValue.toInt());
    }
    else {
      inputMessage = "No message sent";
    }
    Serial.println(inputMessage);
    request->send(200, "text/plain", "OK");
  });
  
  // Start server
  server.begin();
}
  
void loop() {
  
}

View raw code

How the Code Works

Continue reading to learn how the code works or skip to the next section.

Importing libraries

First, import the required libraries. The WiFi, ESPAsyncWebServer and the ESPAsyncTCP are needed to build the web server.

#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>

Setting your network credentials

Insert your network credentials in the following variables, so that the ESP32 can connect to your local network.

const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Variables definition

We’ll control the brightness of the ESP32 built-in LED. The built-in LED corresponds to GPIO 2. Save the GPIO we want to control on the output variable.

The sliderValue variable will hold the slider value. At start, it is set to zero.

String sliderValue = "0";

Set PWM Properties

The following lines define the PWM properties to control the LED. 

// setting PWM properties
const int freq = 5000;
const int ledChannel = 0;
const int resolution = 8;

We’ll use 8-bit resolution, which means you can control the LED brightness using a value from 0 to 255.

To learn more about PWM properties with the ESP32, read our guide: ESP32 PWM with Arduino IDE (Analog Output).

Input Parameters

The PARAM_INPUT variable will be used to “search” for the slider value on the request received by the ESP32 when the slider is moved. (Remember: the ESP32 will receive a request like this GET/slider?value=SLIDERVALUE) 

const char* PARAM_INPUT = "value";

It will search for value on the URL and get the value assigned to it.

Building the Web Page

Let’s now proceed to the web server page.

ESP32 Slider Web Server How it Works

The web page for this project is pretty simple. It contains one heading, one paragraph and one input of type range.

Let’s see how the web page is created.

All the HTML text with styles included is stored in the index_html variable. Now we’ll go through the HTML text and see what each part does.

The following <meta> tag makes your web page responsive in any browser.

<meta name="viewport" content="width=device-width, initial-scale=1">

Between the <title> </title> tags goes the title of our web server. The title is the text that shows up on the web browser tab.

Styles

Between the <style></style> tags, we add some CSS to style the web page.

<style>
  html {font-family: Arial; display: inline-block; text-align: center;}
  h2 {font-size: 2.3rem;}
  p {font-size: 1.9rem;}
  body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}
  .slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
    outline: none; -webkit-transition: .2s; transition: opacity .2s;}
  .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
  .slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; }
</style>

Basically, we’re setting the HTML page to display the text with Arial font in block without margin, and aligned at the center.

html {font-family: Arial; display: inline-block; text-align: center;}

The following lines set the font size for the heading (h2) and paragraph (p).

h2 {font-size: 2.3rem;}
p {font-size: 1.9rem;}

Set the HTML body properties.

body {max-width: 400px; margin:0px auto; padding-bottom: 25px;}

The following lines customize the slider:

.slider { -webkit-appearance: none; margin: 14px; width: 360px; height: 25px; background: #FFD65C;
      outline: none; -webkit-transition: .2s; transition: opacity .2s;}
.slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 35px; height: 35px; background: #003249; cursor: pointer;}
.slider::-moz-range-thumb { width: 35px; height: 35px; background: #003249; cursor: pointer; }

HTML Body

Inside the <body></body> tags is where we add the web page content.

The <h2></h2> tags add a heading to the web page. In this case, the “ESP Web Server” text, but you can add any other text.

<h2>ESP Web Server</h2>

The first paragraph will contain the current slider value. That particular HTML tag has the id textSliderValue assign to it, so that we can reference it later. 

<p><span id="textSliderValue">%SLIDERVALUE%</span></p>

The %SLIDERVALUE% is a placeholder for the slider value. This will be replaced by the ESP32 by an actual value when it sends it to the browser. This is useful to show the current value when you access the browser for the first time.

Creating a Slider

To create a slider in HTML you use the <input> tag. The <input> tag specifies a field where the user can enter data.

There are a wide variety of input types. To define a slider, use the “type” attribute with the “range” value. In a slider, you also need to define the minimum and the maximum range using the “min” and “max” attributes (in this case, 0 and 255, respectively). 

<p><input type="range" onchange="updateSliderPWM(this)" id="pwmSlider" min="0" max="255" value="%SLIDERVALUE%" step="1" class="slider"></p>

You also need to define other attributes like:

  • the step attribute specifies the interval between valid numbers. In our case, it is set to 1;
  • the class to style the slider (class=”slider”);
  • the id to update the current position displayed on the web page;
  • the onchange attribute to call a function (updateSliderPWM(this)) to send an HTTP request to the ESP32 when the slider moves. The this keyword refers to the current value of the slider.

Adding JavaScript to the HTML File

Next, you need to add some JavaScript code to your HTML file using the <script> and </script> tags. You need to add the updateSliderPWM() function that will make a request to the ESP32 with the current slider value.

<script>
function updateSliderPWM(element) {
  var sliderValue = document.getElementById("pwmSlider").value;
  document.getElementById("textSliderValue").innerHTML = sliderValue;
  console.log(sliderValue);
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/slider?value="+sliderValue, true);
  xhr.send();
}
</script>

This next line gets the current slider value by its id and saves it in the sliderValue JavaScript variable. Previously, we’ve assigned the id of the slider to pwmSlider. So, we get it as follows:

var sliderValue = document.getElementById("pwmSlider").value;

After that, we set the slider label (whose id is textSliderValue) to the value saved on the sliderValue variable.

Finally, make an HTTP GET request.

var xhr = new XMLHttpRequest();
xhr.open("GET", "/slider?value="+sliderValue, true);
xhr.send();

For example, when the slider is at 0, you make an HTTP GET request on the following URL:

http://ESP-IP-ADDRESS/slider?value=0

And when the slider value is 200, you’ll have a request on the follow URL.

http://ESP-IP-ADDRESS/slider?value=200

This way, when the ESP32 receives the GET request, it can retrieve the value parameter in the URL and control the PWM signal accordingly as we’ll se in the next sections

Processor

Now, we need to create the processor() function, that will replace the placeholders in our HTML text with the current slider value when you access it for the first time in a browser.

// Replaces placeholder with button section in your web page
String processor(const String& var){
  //Serial.println(var);
  if (var == "SLIDERVALUE"){
    return sliderValue;
  }
  return String();
}

When the web page is requested, we check if the HTML has any placeholders. If it finds the %SLIDERVALUE% placeholder, we return the value saved on the sliderValue variable.

setup()

In the setup(), initialize the Serial Monitor for debugging purposes.

Serial.begin(115200);

Configure the LEDC pin with the PWM properties defined earlier.

// configure LED PWM functionalitites
ledcAttachChannel(output, freq, resolution, ledChannel);

Set the duty cycle of the PWM signal to the value saved on the sliderValue (when the ESP32 starts, it is set to 0).

ledcWrite(output, sliderValue.toInt());

Connect to your local network and print the ESP32 IP address.

// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.println("Connecting to WiFi..");
}

// Print ESP Local IP Address
Serial.println(WiFi.localIP());

Handle Requests

Finally, add the next lines of code to handle the web server.

// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
});

// Send a GET request to <ESP_IP>/slider?value=<inputMessage>
server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  String inputMessage;
  // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
  if (request->hasParam(PARAM_INPUT)) {
    inputMessage = request->getParam(PARAM_INPUT)->value();
    sliderValue = inputMessage;
    ledcWrite(output, sliderValue.toInt());
  }
  else {
    inputMessage = "No message sent";
  }
  Serial.println(inputMessage);
  request->send(200, "text/plain", "OK");
});

When we make a request on the root URL, we send the HTML text that is stored on the index_html variable. We also need to pass the processorfunction, that will replace all the placeholders with the right values.

// Route for root / web page
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
  request->send_P(200, "text/html", index_html, processor);
});

We need another handler that will save the current slider value and set he LED brightness accordingly.

server.on("/slider", HTTP_GET, [] (AsyncWebServerRequest *request) {
  String inputMessage;
  // GET input1 value on <ESP_IP>/slider?value=<inputMessage>
  if (request->hasParam(PARAM_INPUT)) {
    inputMessage = request->getParam(PARAM_INPUT)->value();
    sliderValue = inputMessage;
    ledcWrite(output, sliderValue.toInt());
  }
  else {
    inputMessage = "No message sent";
  }
  Serial.println(inputMessage);
  request->send(200, "text/plain", "OK");
});

Basically, we get the slider value on the following lines:

if (request->hasParam(PARAM_INPUT)) {
  inputMessage = request->getParam(PARAM_INPUT)->value();
  sliderValue = inputMessage;

Then, update the LED brightness (PWM duty cycle) using the ledcWrite() function that accepts as arguments the LEDC pin you want to control and the value.

ledcWrite(output, sliderValue.toInt());

Lastly, start the server.

server.begin();

Because this is an asynchronous web server, we don’t need to write anything in the loop().

void loop(){

}

That’s pretty much how the code works.

Upload the Code

Now, upload the code to your ESP32. Make sure you have the right board and COM port selected.

After uploading, open the Serial Monitor at a baud rate of 115200. Press the ESP32 reset button. The ESP32 IP address should be printed in the serial monitor.

ESP32 ESP8266 PWM Web Server Arduino IDE Serial Monitor IP Address

Web Server Demonstration

Open a browser and type the ESP32 IP address. Your web server should display the slider and its current value.

ESP32 ESP8266 Slider Web Server Control PWM Demonstration

Move the slider and see the ESP32 built-in LED increasing and decreasing its brightness.


Wrapping Up

With this tutorial you’ve learned how to add a slider to your web server projects and get and save its value on a variable that the ESP32 can use. As an example, we’re controlling a PWM signal to control the brightness of an LED. Instead of an LED, you can control a servo motor, for example.

Additionally, the slider may also be used to set up a threshold or any other value that you need to be set up and then be used by the ESP32 to decide on something.

If you’re using an ESP8266 board, read ESP8266 NodeMCU Web Server with Slider Control LED Brightness (PWM).

We hope you’ve found this project useful. You may also like the following tutorials:

Learn more about the ESP32 with our resources:

Thanks for reading.



SMART HOME with Raspberry Pi ESP32 and ESP8266 Node-RED InfluxDB eBook

SMART HOME with Raspberry Pi, ESP32, ESP8266 [eBook]

Learn how to build a home automation system and we’ll cover the following main subjects: Node-RED, Node-RED Dashboard, Raspberry Pi, ESP32, ESP8266, MQTT, and InfluxDB database DOWNLOAD »
Learn how to build a home automation system and we’ll cover the following main subjects: Node-RED, Node-RED Dashboard, Raspberry Pi, ESP32, ESP8266, MQTT, and InfluxDB database DOWNLOAD »

Recommended Resources

Build a Home Automation System from Scratch » With Raspberry Pi, ESP8266, Arduino, and Node-RED.

Home Automation using ESP8266 eBook and video course » Build IoT and home automation projects.

Arduino Step-by-Step Projects » Build 25 Arduino projects with our course, even with no prior experience!

What to Read Next…


Enjoyed this project? Stay updated by subscribing our newsletter!

66 thoughts on “ESP32 Web Server with Slider: Control LED Brightness (PWM)”

  1. How are the following two libraries important to this project?
    #include <AsyncTCP.h>
    #include <ESPAsyncWebServer.h>
    I set one of your earlier projects with buttons and used only
    #include <ESP8266WiFi.h>
    I understand the need to run the wifi, but what does the async aspect fit in?

    Reply

    • Hi.
      You need those libraries because we’re building the webserver using the methods provided by those libraries.
      Regards,
      Sara

      Reply

    • Sara already gave the best answer but let me expand a bit: the big difference between synchronous (say ESP8266WiFi,h) and asynchronous websites is that in a synchronous webserver you need to refresh the entire webpage in order to update values. That is not necessary with asynchronous websites ergo a slider with constantly updating values kinda requires an asynchronous webserver

      Reply

  2. Hi,
    If I create a project and then choose to send it to a friend, I discover that I need to know his STASSID and STAPSK.
    1) Can you create a project where one can change these parameters through the serial port, and save them to EEPROM?
    2) Is there a software module that would set the STASSID and STAPSK linking process with the push of a button? There are a number of devices that allow a WiFi plug and play approach.

    Reply

    • Hi.
      To solve your problem, search for “ESP32 WifiManager”.
      At the moment, we don’t have a tutorial about that.
      Regards,
      Sara

      Reply

  3. Nice tutorial!

    I wonder how often the onchange event gets triggered when dragging the slider. Have you ever measured the event rate? In theory you could queue up a whole series of http requests that open a bunch of TCP connections in parallel. Maybe it doesn’t matter.

    The browser might also see that the GET request is from the same server, so might limit parallel HTTP requests and queue them instead, waiting for a reply from the prior request before issuing another. I guess I could try it in a browser with developer tools.

    Adding code to limit the update rate unless there is an http reply from the prior event gets pretty complicated and would mess up the simplicity of this tutorial. I don’t know that any LED controller worries about this, but I am curious about what kind of event rates occur when dragging a slider or move inside a color wheel.

    Reply

  5. Hi. In Monitor Serial the only message is
    Connecting to WiFi..
    Connecting to WiFi..
    Connecting to WiFi..
    Connecting to WiFi..
    Connecting to WiFi..
    Connecting to WiFi..
    Connecting to WiFi..
    But it does not connect. I’d like to know if this problem is in the board or in the code.
    Thanks

    Reply

  6. I’m having a problem getting this program to compile, get the following error code

    C:\Users\Gary\Documents\Arduino\libraries\AsyncTCP-master\src\AsyncTCP.cpp: In function ‘bool _start_async_task()’:
    C:\Users\Gary\Documents\Arduino\libraries\AsyncTCP-master\src\AsyncTCP.cpp:221:141: error: ‘xTaskCreateUniversal’ was not declared in this scope

    Reply

    • It looks like you are using an outdated version of the Async library. Can you ensure that you are using the latest versions of all libraries?
      After updating the libraries, restart your Arduino IDE and your code should compile

      Reply

  8. Like all your examples this worked like a charm.
    My question is;

    I want to build an interface with buttons and sliders, what is the preferred Server option, the #include <AsyncTCP.h>
    #include <ESPAsyncWebServer.h> combination
    OR will the
    WiFiServer server(80);

    do the job

    Reply

  10. These tutorials are outstanding, thank you.

    I was able to easily adapt the code above to control one servo, but I am looking for a way to code two sliders and for each to control a servo. I am a beginner and don’t know HTML and Java. I tried to duplicate the first slider on the webpage, and was successful in that I could see it, but couldn’t get the second to function, to read values and pass them along separately to the second servo.

    I also went to your tutorial on controlling a servo on a webpage, and tried jerryrigging that, but couldn’t make it work.

    I couldn’t find any examples online. Any ideas would be appreciated. Thanks!

    Reply

  11. Hey, nevermind! I found an example of two sliders on your rntlab website, and duct taped it together with mine, and it’s working.

    Reply

  12. Hi,
    please, give me an advice.
    The library <WiFi.h> works without problems, I tried various synchronous webs, without defects.
    The library <ESPAsyncWebServer.h> cannot be compiled, I think I followed the correct procedure to install this library, but it still does not work! Please do not know how to proceed, what to check?
    Thank you
    Martin

    Reply

  13. Hi,
    Can i use this project using webserver Library by inserting webserver.h header file?
    Because in my remaining project i am using synchronous webserver.

    If yes then can you please guide me what necessary changes i have to do.

    Thanks

    Reply

  14. Hey! Amazing tutorials. I really love your work.
    Could it be possible to modify this code to work with a rotary encoder?
    I would like to control the PWM slider with encoder and update the PWM value in real time on the web server. Any suggestions? I am getting a little lost here :/

    Reply

    • Hi.
      Thanks for following our work.
      Unfortunately, at the moment, we don’t have any tutorials about rotary encoders.
      Regards,
      Sara

      Reply

  15. nice code. Thank you for sharing. Works great but in opposite direction. When slider start button is turned ON voltage turns off. When the button OFF voltage is ON? Any suggestions appreciated.

    Thanks

    Reply

    • It could be that your dev board has the LED connected to power instead of ground (is on when the output is 0). Since the max slider value is 255, you can invert the output by changing
      ledcWrite(ledChannel, sliderValue.toInt());
      to
      ledcWrite(ledChannel, 255-sliderValue.toInt());
      in 2 places.

      Reply

    • Hi.
      Yes, of course.
      You just need to add the following line to the platformio.ini file of your project:

      lib_deps = ESP Async WebServer

      Regards,
      Sara

      Reply

        • I tried this and I got a message regarding the software could not identify the directory of the library. I’m supposing that I have something wrong with my settings.

          Any suggestions?

          Reply

          • I am really struggling with this. The first project works fine but the second project still gives me the directory path error. Is this addresses in one of your books?

          • Hi again.
            Yes, we cover these subjects in one of our eBooks.
            However, you must be doing something wrong that causes the error. The eBook won’t solve the problem.
            Can you tell me the exact error that you«re getting?
            And can you provide more details?
            Regards,
            Sara

          • Yes, I’ll try.

            I created a project “tester” and included EEPAsynchWebServer in the project. I then added #include<ESPAsyncWebServer.h> to the main.cpp file. The result was a squiggly line which I resolved by exiting and restarting the Visual Studio Code.

            I then added a new project “tester_02 which I added the #include<ESPAsyncWebServer.h>.

            I got the same squiggly line which resulted in the error “#include errors detected. Please update your include path…. Cannot open source file ESPAsyncWebServer”

            I repeated the exit and restart procedure with no positive result. I also tried reading the library with no positive result.

            I’m frankly stumped.

          • Hi,

            I got it to work, finally, by clicking on the link, clicking on quick fix and then exiting and restarting the VS Code. It seems sort of obtuse and I think something is wrong in my setup. Sorry to be such a pain.

  17. I don’t know this is only happen in me..in String sliderValue = “0”;
    when I use 0 nothing happen, but when I change the the random number between 0 – 255 it works, for ex: String sliderValue = “150”;..

    Reply

  18. I tried this and I got a message regarding the software could not identify the directory of the library. I’m supposing that I have something wrong with my settings.

    Any suggestions?

    Reply

  19. I’m currently going through the “2.4 – Web Server with Slider: Control
    LED Brightness (PWM)” in the course which is slightly different.
    I’m getting errors on the “void handleWebSocketMessage” function, and the “void onEvent” function. I’m getting the same two errors with the downloaded code. The first one says “opcode not declared”, and the other say “id not declared”.
    The checking stops on this: Compiling .pio\build\esp32doit-devkit-v1\lib65f\WiFi\WiFiScan.cpp.o
    I’m using the same libraries I used for the previous lesson, so I don’t think that’s the problem.
    Anybody with any idea what is going on?
    Am I in the wrong place for a question like this?
    Thanks.

    Reply

  20. Hi. I used your code successfully with ESP32.
    Now I am trying to use the code for ESP32 C3 DevKit. When compiling, it gives me error for the library ESPAsyncWebServer.
    Do you know what modifications i have to do to the library ?

    Reply

  21. C:\Users\Aorus\Documents\Arduino\libraries\ESPAsyncWebServer-master\src\AsyncWebSocket.cpp: In member function ‘IPAddress AsyncWebSocketClient::remoteIP()’:
    C:\Users\Aorus\Documents\Arduino\libraries\ESPAsyncWebServer-master\src\AsyncWebSocket.cpp:832:28: error: call of overloaded ‘IPAddress(unsigned int)’ is ambiguous
    return IPAddress(0U);
    ^
    In file included from C:\Users\Aorus\AppData\Local\Arduino15\packages\esp32\hardware\esp32\2.0.1\cores\esp32/Arduino.h:163,
    from C:\Users\Aorus\Documents\Arduino\libraries\ESPAsyncWebServer-master\src\AsyncWebSocket.cpp:21:
    C:\Users\Aorus\AppData\Local\Arduino15\packages\esp32\hardware\esp32\2.0.1\cores\esp32/IPAddress.h:51:5: note: candidate: ‘IPAddress::IPAddress(const uint8_t*)’
    IPAddress(const uint8_t *address);
    ^~~~~~~~~
    C:\Users\Aorus\AppData\Local\Arduino15\packages\esp32\hardware\esp32\2.0.1\cores\esp32/IPAddress.h:50:5: note: candidate: ‘IPAddress::IPAddress(uint32_t)’
    IPAddress(uint32_t address);
    ^~~~~~~~~
    C:\Users\Aorus\AppData\Local\Arduino15\packages\esp32\hardware\esp32\2.0.1\cores\esp32/IPAddress.h:29:7: note: candidate: ‘constexpr IPAddress::IPAddress(const IPAddress&)’
    class IPAddress: public Printable
    ^~~~~~~~~
    Multiple libraries were found for “WiFi.h”
    Used: C:\Users\Aorus\AppData\Local\Arduino15\packages\esp32\hardware\esp32\2.0.1\libraries\WiFi
    Not used: C:\Program Files (x86)\Arduino\libraries\WiFi

    Reply

  23. Is there a way to have this same functionality but without the need to know the IP address?

    If I take my ESP32 to a different location I would have to check the serial monitor to see what is the IP address, is there a way to avoid this?

    Reply

  24. hello. My mother tongue is not English, so I’m not good at writing English. But I have a question.

    I’m using PlatformIO. I copied and pasted the program on this site.
    #include <WiFi.h> will have ~ at the end.

    AsyncTCP and ESPAsyncWebServer are saved in the lib file generated by PlatformIO.

    Can you tell me how to solve?

    Reply

  25. Hello, I modified your example to save the value linked to the slider using Preferences, that works OK but I need also to update the slider position on the web page. In practice I have to send the save value to the webpage when it is displayed but I am not a JavaScript expert. I understood and know how to update the data on the web page but I do not know how to @move@ the slider at startup using ESPAsyncWebServer functions. What can I do?

    Reply

  26. Hello, thanks for your time first.

    I compiled and uploaded this example, getting the following error message.
    Traceback (most recent call last):
    File “esptool.py”, line 34, in
    File “esptool__init__.py”, line 1004, in _main
    File “esptool__init__.py”, line 646, in main
    File “esptool__init__.py”, line 895, in get_default_connected_device
    File “esptool\loader.py”, line 631, in connect
    File “esptool\loader.py”, line 558, in _connect_attempt
    File “serial\serialutil.py”, line 594, in inWaiting
    File “serial\serialwin32.py”, line 259, in in_waiting
    serial.serialutil.SerialException: ClearCommError failed (PermissionError(13, ‘�s����t�Ϊ��Y�Ӹ˸m���h�@�ΡC’, None, 31))
    [3280] Failed to execute script ‘esptool’ due to unhandled exception!
    Failed uploading: uploading error: exit status 1

    However, I taught this example several time with ESP8266, it is very perfect.
    I want to give MANY THANKS to this website.

    Reply

  28. Hello, the code works like charm. But I’ve been noticing that after a few days the ESP32 crashes, forcing me to reset the device. Is there a possibility for you to deploy a watchdog? Thanks 🙂

    Reply

  29. Hi. Thanks for sharing such a wonderful work. I have made this and its working fine. Now, I want to control brightness of LED using a mobile app instead of a slider. My mobile app have a window to enter a number and a send button. On pressing said button number entered in window is sent on the pre-defind IP address (of ESP32) e.g. http://192.168.40.20/55. Here 55 is sent to 192.168.40.20. So, I want that PWM should be set to 55. Please help to achieve this.

    Reply

  30. Hi Sara, Rui,

    When compiling the sketch for an ESP32S2 Dev Module I get following compilation error:

    e:\Arduino\libraries\ESPAsyncWebServer\src\WebAuthentication.cpp: In function ‘bool getMD5(uint8_t*, uint16_t, char)’:
    e:\Arduino\libraries\ESPAsyncWebServer\src\WebAuthentication.cpp:74:3: error: ‘mbedtls_md5_starts_ret’ was not declared in this scope; did you mean ‘mbedtls_md5_starts’?
    74 | mbedtls_md5_starts_ret(&_ctx);
    | ^~~~~~~~~~~~~~~~~~~~~~
    | mbedtls_md5_starts
    e:\Arduino\libraries\ESPAsyncWebServer\src\WebAuthentication.cpp:75:3: error: ‘mbedtls_md5_update_ret’ was not declared in this scope; did you mean ‘mbedtls_md5_update’?
    75 | mbedtls_md5_update_ret(&_ctx, data, len);
    | ^~~~~~~~~~~~~~~~~~~~~~
    | mbedtls_md5_update
    e:\Arduino\libraries\ESPAsyncWebServer\src\WebAuthentication.cpp:76:3: error: ‘mbedtls_md5_finish_ret’ was not declared in this scope; did you mean ‘mbedtls_md5_finish’?
    76 | mbedtls_md5_finish_ret(&_ctx, _buf);
    | ^~~~~~~~~~~~~~~~~~~~~~
    | mbedtls_md5_finish
    e:\Arduino\libraries\ESPAsyncWebServer\src\AsyncEventSource.cpp: In member function ‘void AsyncEventSourceClient::_queueMessage(AsyncEventSourceMessage    )’:
    e:\Arduino\libraries\ESPAsyncWebServer\src\AsyncEventSource.cpp:189:7: error: ‘ets_printf’ was not declared in this scope; did you mean ‘vswprintf’?
    189 | ets_printf(“ERROR: Too many messages queued\n”);
    | ^~~~~~~~~~
    | vswprintf

    Anything I missed here?
    Thanks in advance for your reaction.

    Kind regards,
    Frank De Hert

    Reply

  31. I am on board version 3.0.2. Getting similar problem

    C:\Users\xx\Documents\Arduino\libraries\ESPAsyncWebServer\src\WebAuthentication.cpp: In function ‘bool getMD5(uint8_t*, uint16_t, char)’:
    C:\Users\xx\Documents\Arduino\libraries\ESPAsyncWebServer\src\WebAuthentication.cpp:99:3: error: ‘mbedtls_md5_starts_ret’ was not declared in this scope; did you mean ‘mbedtls_md5_starts’?
    99 | mbedtls_md5_starts_ret(&_ctx);
    | ^~~~~~~~~~~~~~~~~~~~~~
    | mbedtls_md5_starts
    C:\Users\xx\Documents\Arduino\libraries\ESPAsyncWebServer\src\WebAuthentication.cpp:100:3: error: ‘mbedtls_md5_update_ret’ was not declared in this scope; did you mean ‘mbedtls_md5_update’?
    100 | mbedtls_md5_update_ret(&_ctx, data, len);
    | ^~~~~~~~~~~~~~~~~~~~~~
    | mbedtls_md5_update
    C:\Users\xx\Documents\Arduino\libraries\ESPAsyncWebServer\src\WebAuthentication.cpp:101:3: error: ‘mbedtls_md5_finish_ret’ was not declared in this scope; did you mean ‘mbedtls_md5_finish’?
    101 | mbedtls_md5_finish_ret(&_ctx, _buf);
    | ^~~~~~~~~~~~~~~~~~~~~~
    | mbedtls_md5_finish
    C:\Users\xx\Documents\Arduino\libraries\ESPAsyncWebServer\src\AsyncWebSocket.cpp: In member function ‘void AsyncWebSocketClient::_queueMessage(AsyncWebSocketMessage    )’:
    C:\Users\xx\Documents\Arduino\libraries\ESPAsyncWebServer\src\AsyncWebSocket.cpp:726:5: error: ‘ets_printf’ was not declared in this scope; did you mean ‘vswprintf’?
    726 | ets_printf(“ERROR: Too many messages queued\n”);
    | ^~~~~~~~~~
    | vswprintf
    C:\Users\xx\Documents\Arduino\libraries\ESPAsyncWebServer\src\AsyncEventSource.cpp: In member function ‘void AsyncEventSourceClient::_queueMessage(AsyncEventSourceMessage*)’:
    C:\Users\xx\Documents\Arduino\libraries\ESPAsyncWebServer\src\AsyncEventSource.cpp:189:7: error: ‘ets_printf’ was not declared in this scope; did you mean ‘vswprintf’?
    189 | ets_printf(“ERROR: Too many messages queued\n”);
    | ^~~~~~~~~~
    | vswprintf
    Multiple libraries were found for “WiFi.h”
    Used: C:\Users\xx\AppData\Local\Arduino15\packages\esp32\hardware\esp32\3.0.2\libraries\WiFi
    Not used: C:\Program Files (x86)\Arduino\libraries\WiFi
    Using library WiFi at version 2.0.0 in folder: C:\Users\xx\AppData\Local\Arduino15\packages\esp32\hardware\esp32\3.0.2\libraries\WiFi
    Using library Network at version 1.0.0 in folder: C:\Users\xx\AppData\Local\Arduino15\packages\esp32\hardware\esp32\3.0.2\libraries\Network
    Using library AsyncTCP at version 1.1.4 in folder: C:\Users\xx\Documents\Arduino\libraries\AsyncTCP
    Using library ESPAsyncWebServer at version 3.1.0 in folder: C:\Users\xx\Documents\Arduino\libraries\ESPAsyncWebServer
    Using library FS at version 2.0.0 in folder: C:\Users\xx\AppData\Local\Arduino15\packages\esp32\hardware\esp32\3.0.2\libraries\FS
    exit status 1
    Error compiling for board WEMOS D1 R32.

    I am just trying this program for the first time.

    Reply

  32. I am trying to the PWM to two different pin using the ledcAttachChannel function and i am getting the following error message. i have not found anything useful to try and debug.

    M:\Nate\ESP32_webserverCode\esp32_PWM_MOTORcontrol_momentary\esp32_PWM_MOTORcontrol_momentary.ino:20:11: error: expected constructor, destructor, or type conversion before ‘(‘ token
    20 | ledcAttach(enable1Pin, freq, resolution);
    | ^
    M:\Nate\ESP32_webserverCode\esp32_PWM_MOTORcontrol_momentary\esp32_PWM_MOTORcontrol_momentary.ino:21:11: error: expected constructor, destructor, or type conversion before ‘(‘ token
    21 | ledcAttach(enable2Pin, freq, resolution);
    | ^

    exit status 1

    Compilation error: expected constructor, destructor, or type conversion before ‘(‘ token

    Reply

Leave a Comment

Download Our Free eBooks and Resources

Get instant access to our FREE eBooks, Resources, and Exclusive Electronics Projects by entering your email address below.