In this project we’ll show you how to remotely control an RGB LED strip with an ESP8266 or an ESP32 board using a web server with a color picker.

We’ll control a 5V RGB LED strip and the code will be written in Arduino IDE.

To better understand this project, there are a few tutorials that you may want to take a look first (this step is optional):

• How RGB LEDs work
• ESP32 Web Server with Arduino IDE
• ESP8266 Web Server with Arduino IDE

Watch the Video Tutorial

You can watch the video tutorial or keep reading this page for the written instructions.

Project Overview

Before getting started, let’s see how this project works:

• The ESP32/ESP8266 web server displays a color picker.
• When you chose a color, your browser makes a request on a URL that contains the R, G, and B parameters of the selected color.
• Your ESP32/ESP8266 receives the request and splits the value for each color parameter.
• Then, it sends a PWM signal with the corresponding value to the GPIOs that are controlling the strip.

Parts Required

For this project you need the following parts:

• ESP32(readbest ESP32 development boards) orESP8266 (readbest ESP8266 development boards)
• RGB LED Strip (5V)
• 3x NPN transistors (see how to choose the proper transistor in the project description)
• 3x 1k ohm resistors
  
• Jumper wires
  
• Breadboard

You can use the preceding links or go directly toMakerAdvisor.com/tools to find all the parts for your projects at the best price!

Schematic

For this project, we’ll be using an RGB LED strip that can be powered with 5V.

Note: there are other similar strips that require 12V to operate. You can still use them with the code provided, but you need a suitable power supply.

In this example, we’ll be powering the LED strip and the ESP32 or ESP8266 using the same 5V power supply.

ESP32 – schematic diagram

Follow the next schematic diagram to connect the strip to your ESP32.

ESP8266 – Schematic diagram

Follow the next schematic diagram to connect the strip to your ESP8266.

NPN Transistors

In this circuit, we’re using the S8050 NPN transistor. However, depending on how many LEDs you have in your strip, you might need to use a NPN transistor that can handle more continuous current in the collector pin.

To determine the max current used by your LED strip, you can measure the current consumption when all the LEDs are at maximum brightness (when the color is white).

Since we’re using 12 LEDs, the maximum current is approximately 630mA at full brightness in white color. So, we can use the S8050 NPN transistor that can handle up to 700mA.

Note: your strip consumes the maximum current when you set white color (this is the same as setting all three colors to the maximum brightness). Setting other colors draws less current, so you’ll probably won’t have your strip using the maximum current.

ESP32 Code

We’ll program the ESP32 using Arduino IDE, so make sure you have the ESP32 add-on installed before proceeding:

• Installing ESP32 Board in Arduino IDE 2 (Windows, Mac OS X, Linux)

After assembling the circuit, copy the following code to your Arduino IDE to program the ESP32.

/*********  Rui Santos  Complete project details at https://randomnerdtutorials.com  *********/// Load Wi-Fi library#include <WiFi.h>// Replace with your network credentialsconst char* ssid     = "REPLACE_WITH_YOUR_SSID";const char* password = "REPLACE_WITH_YOUR_PASSWORD";// Set web server port number to 80WiFiServer server(80);// Decode HTTP GET valueString redString = "0";String greenString = "0";String blueString = "0";int pos1 = 0;int pos2 = 0;int pos3 = 0;int pos4 = 0;// Variable to store the HTTP req  uestString header;// Red, green, and blue pins for PWM controlconst int redPin = 13;     // 13 corresponds to GPIO13const int greenPin = 12;   // 12 corresponds to GPIO12const int bluePin = 14;    // 14 corresponds to GPIO14// Setting PWM frequency, channels and bit resolutionconst int freq = 5000;const int redChannel = 0;const int greenChannel = 1;const int blueChannel = 2;// Bit resolution 2^8 = 256const int resolution = 8;// Current timeunsigned long currentTime = millis();// Previous timeunsigned long previousTime = 0; // Define timeout time in milliseconds (example: 2000ms = 2s)const long timeoutTime = 2000;void setup() {  Serial.begin(115200);  // configure LED PWM functionalitites  ledcAttachChannel(redPin, freq, resolution, redChannel);  ledcAttachChannel(greenPin, freq, resolution, greenChannel);  ledcAttachChannel(bluePin, freq, resolution, blueChannel);    // Connect to Wi-Fi network with SSID and password  Serial.print("Connecting to ");  Serial.println(ssid);  WiFi.begin(ssid, password);  while (WiFi.status() != WL_CONNECTED) {    delay(500);    Serial.print(".");  }  // Print local IP address and start web server  Serial.println("");  Serial.println("WiFi connected.");  Serial.println("IP address: ");  Serial.println(WiFi.localIP());  server.begin();}void loop(){  WiFiClient client = server.available();   // Listen for incoming clients  if (client) {                             // If a new client connects,    currentTime = millis();    previousTime = currentTime;    Serial.println("New Client.");          // print a message out in the serial port    String currentLine = "";                // make a String to hold incoming data from the client    while (client.connected() && currentTime - previousTime <= timeoutTime) {            // loop while the client's connected      currentTime = millis();      if (client.available()) {             // if there's bytes to read from the client,        char c = client.read();             // read a byte, then        Serial.write(c);                    // print it out the serial monitor        header += c;        if (c == '\n') {                    // if the byte is a newline character          // if the current line is blank, you got two newline characters in a row.          // that's the end of the client HTTP request, so send a response:          if (currentLine.length() == 0) {            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)            // and a content-type so the client knows what's coming, then a blank line:            client.println("HTTP/1.1 200 OK");            client.println("Content-type:text/html");            client.println("Connection: close");            client.println();                               // Display the HTML web page            client.println("<!DOCTYPE html><html>");            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");            client.println("<link rel=\"icon\" href=\"data:,\">");            client.println("<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\">");            client.println("<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js\"></script>");            client.println("</head><body><div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1></div>");            client.println("<a class=\"btn btn-primary btn-lg\" href=\"#\" id=\"change_color\" role=\"button\">Change Color</a> ");            client.println("<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div>");            client.println("<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' +  Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);");            client.println("document.getElementById(\"change_color\").href=\"?r\" + Math.round(picker.rgb[0]) + \"g\" +  Math.round(picker.rgb[1]) + \"b\" + Math.round(picker.rgb[2]) + \"&\";}</script></body></html>");            // The HTTP response ends with another blank line            client.println();            // Request sample: /?r201g32b255&            // Red = 201 | Green = 32 | Blue = 255            if(header.indexOf("GET /?r") >= 0) {              pos1 = header.indexOf('r');              pos2 = header.indexOf('g');              pos3 = header.indexOf('b');              pos4 = header.indexOf('&');              redString = header.substring(pos1+1, pos2);              greenString = header.substring(pos2+1, pos3);              blueString = header.substring(pos3+1, pos4);              /*Serial.println(redString.toInt());              Serial.println(greenString.toInt());              Serial.println(blueString.toInt());*/              ledcWrite(redPin, redString.toInt());              ledcWrite(greenPin, greenString.toInt());              ledcWrite(bluePin, blueString.toInt());            }            // Break out of the while loop            break;          } else { // if you got a newline, then clear currentLine            currentLine = "";          }        } else if (c != '\r') {  // if you got anything else but a carriage return character,          currentLine += c;      // add it to the end of the currentLine        }      }    }    // Clear the header variable    header = "";    // Close the connection    client.stop();    Serial.println("Client disconnected.");    Serial.println("");  }}

View raw code

Before uploading the code, don’t forget to insert your network credentials so that the ESP can connect to your local network.

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

If you’ve built aweb server with the ESP32 before, this code is not much different. It adds the color picker to the web page and decodes the request to control the strip color. So, we’ll just take a look at the relevant parts for this project.

ESP8266 Code

We’ll program the ESP8266 using the Arduino IDE. In order to upload code to your ESP8266, you need to install the ESP8266 add-on first, if you haven’t already (Install the ESP8266 Board in Arduino IDE).

After assembling the circuit, copy the following code to your Arduino IDE to program the ESP8266.

/*********  Rui Santos  Complete project details at https://randomnerdtutorials.com  *********/// Load Wi-Fi library#include <ESP8266WiFi.h>// Replace with your network credentialsconst char* ssid     = "REPLACE_WITH_YOUR_SSID";const char* password = "REPLACE_WITH_YOUR_PASSWORD";// Set web server port number to 80WiFiServer server(80);// Decode HTTP GET valueString redString = "0";String greenString = "0";String blueString = "0";int pos1 = 0;int pos2 = 0;int pos3 = 0;int pos4 = 0;// Variable to store the HTTP req  uestString header;// Red, green, and blue pins for PWM controlconst int redPin = 13;     // 13 corresponds to GPIO13const int greenPin = 12;   // 12 corresponds to GPIO12const int bluePin = 14;    // 14 corresponds to GPIO14// Setting PWM bit resolutionconst int resolution = 256;// Current timeunsigned long currentTime = millis();// Previous timeunsigned long previousTime = 0; // Define timeout time in milliseconds (example: 2000ms = 2s)const long timeoutTime = 2000;void setup() {  Serial.begin(115200);    // configure LED PWM resolution/range and set pins to LOW  analogWriteRange(resolution);  analogWrite(redPin, 0);  analogWrite(greenPin, 0);  analogWrite(bluePin, 0);    // Connect to Wi-Fi network with SSID and password  Serial.print("Connecting to ");  Serial.println(ssid);  WiFi.begin(ssid, password);  while (WiFi.status() != WL_CONNECTED) {    delay(500);    Serial.print(".");  }  // Print local IP address and start web server  Serial.println("");  Serial.println("WiFi connected.");  Serial.println("IP address: ");  Serial.println(WiFi.localIP());  server.begin();}void loop(){  WiFiClient client = server.available();   // Listen for incoming clients  if (client) {                             // If a new client connects,    currentTime = millis();    previousTime = currentTime;    Serial.println("New Client.");          // print a message out in the serial port    String currentLine = "";                // make a String to hold incoming data from the client    while (client.connected() && currentTime - previousTime <= timeoutTime) {            // loop while the client's connected      currentTime = millis();      if (client.available()) {             // if there's bytes to read from the client,        char c = client.read();             // read a byte, then        Serial.write(c);                    // print it out the serial monitor        header += c;        if (c == '\n') {                    // if the byte is a newline character          // if the current line is blank, you got two newline characters in a row.          // that's the end of the client HTTP request, so send a response:          if (currentLine.length() == 0) {            // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)            // and a content-type so the client knows what's coming, then a blank line:            client.println("HTTP/1.1 200 OK");            client.println("Content-type:text/html");            client.println("Connection: close");            client.println();                               // Display the HTML web page            client.println("<!DOCTYPE html><html>");            client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");            client.println("<link rel=\"icon\" href=\"data:,\">");            client.println("<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\">");            client.println("<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js\"></script>");            client.println("</head><body><div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1></div>");            client.println("<a class=\"btn btn-primary btn-lg\" href=\"#\" id=\"change_color\" role=\"button\">Change Color</a> ");            client.println("<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div>");            client.println("<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' +  Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);");            client.println("document.getElementById(\"change_color\").href=\"?r\" + Math.round(picker.rgb[0]) + \"g\" +  Math.round(picker.rgb[1]) + \"b\" + Math.round(picker.rgb[2]) + \"&\";}</script></body></html>");            // The HTTP response ends with another blank line            client.println();            // Request sample: /?r201g32b255&            // Red = 201 | Green = 32 | Blue = 255            if(header.indexOf("GET /?r") >= 0) {              pos1 = header.indexOf('r');              pos2 = header.indexOf('g');              pos3 = header.indexOf('b');              pos4 = header.indexOf('&');              redString = header.substring(pos1+1, pos2);              greenString = header.substring(pos2+1, pos3);              blueString = header.substring(pos3+1, pos4);              /*Serial.println(redString.toInt());              Serial.println(greenString.toInt());              Serial.println(blueString.toInt());*/              analogWrite(redPin, redString.toInt());              analogWrite(greenPin, greenString.toInt());              analogWrite(bluePin, blueString.toInt());            }            // Break out of the while loop            break;          } else { // if you got a newline, then clear currentLine            currentLine = "";          }        } else if (c != '\r') {  // if you got anything else but a carriage return character,          currentLine += c;      // add it to the end of the currentLine        }      }    }    // Clear the header variable    header = "";    // Close the connection    client.stop();    Serial.println("Client disconnected.");    Serial.println("");  }}

View raw code

Before uploading the code, don’t forget to insert your network credentials so that the ESP can connect to your local network.

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

If you’ve built aweb server with the ESP8266 before, this code is not much different. It adds the color picker to the web page and decodes the request to control the strip color. So, we’ll just take a look at the relevant parts for this project.

How the code works

The sketches for the ESP32 and ESP8266 are very similar with just a few differences when it comes to the Wi-Fi library and the way they generate PWM signals. We’ll explain that in this section.

The ESP32 sketch uses theWiFi.h library.

#include <WiFi.h>

The ESP8266 sketch uses theESP8266WiFi.h library.

#include <ESP8266WiFi.h>

The following lines define string variables to hold the R, G, and B parameters from the request.

String redString = "0";String greenString = "0";String blueString = "0";

The next four variables are used to decode the HTTP request later on.

int pos1 = 0;int pos2 = 0;int pos3 = 0;int pos4 = 0;

Create three variables for the GPIOs that will control the strip R, G, and B parameters. In this case we’re usingGPIO 13,GPIO 12, andGPIO 14.

const int redPin = 13;     const int greenPin = 12;  const int bluePin = 14;

These GPIOs need to output PWM signals, so we need to configure the PWM properties first. Set the PWM signal frequency to 5000 Hz. Then, associate a PWM channel for each color (this is not needed in the ESP8266 sketch).

const int freq = 5000;const int redChannel = 0;const int greenChannel = 1;const int blueChannel = 2;

And finally, set the resolution of the PWM channels to 8-bit (not needed in ESP8266 sketch).

const int resolution = 8;

In the setup(), create LEDC pins with the PWM properties defined earlier (not needed in ESP8266 sketch).

  ledcAttachChannel(redPin, freq, resolution, redChannel);  ledcAttachChannel(greenPin, freq, resolution, greenChannel);  ledcAttachChannel(bluePin, freq, resolution, blueChannel);

Learn more about PWM with the ESP32:ESP32 PWM with Arduino IDE (Analog Output)

The following code section displays the color picker in your web page and makes a request based on the color you’ve picked.

client.println("<!DOCTYPE html><html>");client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");client.println("<link rel=\"icon\" href=\"data:,\">");client.println("<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\">");client.println("<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js\"></script>");client.println("</head><body><div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1></div>");client.println("<a class=\"btn btn-primary btn-lg\" href=\"#\" id=\"change_color\" role=\"button\">Change Color</a> ");client.println("<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div>");client.println("<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' +  Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);");        client.println("document.getElementById(\"change_color\").href=\"?r\" + Math.round(picker.rgb[0]) + \"g\" +  Math.round(picker.rgb[1]) + \"b\" + Math.round(picker.rgb[2]) + \"&\";}</script></body></html>");// The HTTP response ends with another blank lineclient.println();

When you pick a color, you receive a request with the following format.

/?r201g32b255&

So, we need to split this string to get the R, G, and B parameters. The parameters are saved in redString, greenString, and blueString variables and can have values between 0 and 255.

pos1 = header.indexOf('r');pos2 = header.indexOf('g');pos3 = header.indexOf('b');pos4 = header.indexOf('&');redString = header.substring(pos1+1, pos2);greenString = header.substring(pos2+1, pos3);blueString = header.substring(pos3+1, pos4);

To control the strip with the ESP32, use theledcWrite() function to generate PWM signals with the values decoded from the HTTP request.

ledcWrite(redPin, redString.toInt());ledcWrite(greenPin, greenString.toInt());ledcWrite(bluePin, blueString.toInt());

Note: learn more about PWM with ESP32:ESP32 PWM with Arduino IDE.

To control the strip with the ESP8266, we just need to use theanalogWrite() function to generate PWM signals with the values decoded from the HTPP request.

analogWrite(redPin, redString.toInt());analogWrite(greenPin, greenString.toInt());analogWrite(bluePin, blueString.toInt())

Because we get the values in a string variable, we need to convert them to integers using thetoInt() method.

Learn more about PWM with the ESP8266:ESP8266 NodeMCU PWM with Arduino IDE – Dim LED (Analog Output)

Demonstration

After inserting your network credentials, select the right board and COM port and upload the code to your ESP32 or ESP8266.

After uploading, open the Serial Monitor at a baud rate of 115200 and press the ESP Enable/Reset button. You should get the board IP address.

Open your browser and insert the ESP IP address. Now, use the color picker to choose a color for the strip.

Then, you need to press the “Change Color” button for the color to take effect.

To turn off the RGB LED strip, select the black color.

The strongest colors (at the top of the color picker), are the ones that will produce better results.

Now, you use the strip to decorate your house: under the bed, behind a TV, under the kitchen cabinet, and much more.

Wrapping Up

With this article, you’ve learned how to control an RGB LED strip remotely using a web server with your ESP32 or ESP8266 on your local network.

We hope you’ve found this tutorial useful. If you like this project, you may also like:

• MicroPython: WS2812B Addressable RGB LEDs with ESP32 and ESP8266
• How do RGB LEDs work?
• Node-RED with WS2812B Addressable RGB LED Strip
• ESP32 Servo Motor Web Server with Arduino IDE

Learn more about the ESP32 with our resources:

• Learn ESP32 with Arduino IDE (2nd Edition)
• SMART HOME with Raspberry Pi, ESP32, ESP8266
• Build Web Servers with ESP32 and ESP8266
• Firebase Web App with the ESP32 and ESP8266
• Free ESP32 Projects,Tutorials and Guides

This is an excerpt from our course: Learn ESP32 with Arduino IDE. If you like ESP32 and you want to learn more about it, we recommend enrolling in Learn ESP32 with Arduino IDE course.

41 thoughts on “ESP32/ESP8266 RGB LED Strip with Color Picker Web Server”

1. Can I use the 2n2222 that I have from one of my learning kits in place of the 8050, the current rating is 800ma?

   Reply

   • Hi Bruce.
     Yes, you can use it depending on the number of LEDs you’re controlling.
     In our example, we’re using 12 LEDs. You can use that transistor with 12 LEDs. If you want to use more LEDs, you need to check the current the LEDs draw.
     Regards,
     Sara

     Reply

2. Hi, Can you list the pins and their connections, of the transistor ?
   I was hoping to see a circuit diagram of what is the “Base” of the transistor connected to ( in respect to the RGB strip) ? The “Collector” and the “Emitter” connected to ?
   Would appreciate that a lot.
   Would help non-electronic engineers too.
   I am using a 2N2222 transistor

   Reply

   • Hi Shashi.
     The emitter connects to GND.
     The base connects to the ESP32/ESP8266 GPIOs through a 1k resistor.
     The collector connects to one of the strip color pins.
     I hope this helps.
     Regards,
     Sara

     Reply

     • Thanks Sara. Tried your suggestion. Did not work !

       My project involves
       – I have 3 2N2222 Transistors instead of your 8050 transistor.
       – I am powering the ESP32 thru the USB cable connected to my Mac Book Air.
       The 1K resistor looks good. Both the ESP32 and the RGB strip are connected thru the same USB power supply from the power jack of the laptop ( I dont think it’d be a problem )

       My ESP32 device is a “ESP32DEV Kit V1″ – should not be different from your blog.
       I can see that the ESP32 connects to my Network, I also uncommented the
       ” Serial.println(redString.toInt());
       Serial.println(greenString.toInt());
       Serial.println(blueString.toInt());
       ”

       and I see in the serial console the different numbers .

       == Cut and Paste from Serial Monitor ==

       GET /?r254g104b255& HTTP/1.1
       Host: 192.168.1.21
       Connection: keep-alive
       Upgrade-Insecure-Requests: 1
       User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36
       Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
       Referer:http://192.168.1.21/?r255g86b171&
       Accept-Encoding: gzip, deflate
       Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,en-IN;q=0.7

       254
       104
       255
       Client disconnected.
       ”

       See the 254, 104 and 255 above.
       This is the color sequence sent from the web server to the ESP32.
       I have a WS2812 LED strip, 1 meter long and I bought it from Ali express. It works with Arduino – and not with ESP32 ! I dont have to add the Transistor & Resistor when connected to the Arduino Uno ( Using the Fast LED library for the Arduino Uno)

       Reply

       • Hi.
         This tutorial is for a regular RGB LED Strip (not addressable).
         It won’t work if you’re using a WS2812B which is an addressable RGB LED strip.
         We have a tutorial on how to control a WS2812B RGB LED strip with the ESP32 and micropython:https://randomnerdtutorials.com/micropython-ws2812b-addressable-rgb-leds-neopixel-esp32-esp8266/
         Regards,
         Sara

         Reply

3. Hi, The sketch comes back with an error regarding ledcSetup. I looked through several library files and cannot find which .h file to include. Am I missing something?

   Reply

   • Hi Thomas.
     You don’t need to include any library to use ledcSetup.
     Please make sure that you have the ESP32 add-on installed.
     If you’re using an ESP8266, this is the code you should use:https://raw.githubusercontent.com/RuiSantosdotme/Random-Nerd-Tutorials/master/Projects/ESP8266/ESP8266_WiFi_Web_Server_Color_Picker.ino

     Reply

   • Hi Sara, Thomas,

     Error related to “ledcSetup” most probably due to incorrect board selected in Arduino IDE program. I got this error with ESP32 when (due to previous project) a Lolin/WEMOS board was selected… double check selected board at Tools/Board.
     Regards,
     Tamás

     Reply

4. Hi Sara,
   can you incorporate something like WiFiManager in your sketch so i can give this as present to some of my friends?
   So they dont need to use pc every time they start product, they are not hobby makers 🙂
   Tnx

   Reply

   • Hi.
     That’s a great gift idea 🙂
     You can follow this tutorial that shows how to incorporate wifi manager in your sketches.
     https://randomnerdtutorials.com/wifimanager-with-esp8266-autoconnect-custom-parameter-and-manage-your-ssid-and-password/
     I hope it helps.
     Regards,
     Sara

     Reply

5. Hello Sara, is there a wifimanager for ESP32? because as it appears in the previous point, I can not tell a person or friend to access the arduino to change the SSID. Thank you

   Reply

   • Hi Alberto.
     You can use this library: github.com/zhouhan0126/WIFIMANAGER-ESP32
     It should be compatible with the ESP32.
     Regards,
     Sara

     Reply

6. Hi Sara, is it working for regular LED RGB? Not the RGB LED strip one. Thank you!

   Reply

   • Hi.
     Yes, the code should work with a regular RGB LED.
     Regards,
     Sara

     Reply

7. Awesome , how can i change the code to use Ws2812 / Neo Pixels instead of the RGB strip.

   Many thanks

   scouse

   Reply

   • Hi.
     We don’t have this project with the WS2812B.
     These are the projects we have with that strip:
     –https://randomnerdtutorials.com/guide-for-ws2812b-addressable-rgb-led-strip-with-arduino/
     –https://randomnerdtutorials.com/micropython-ws2812b-addressable-rgb-leds-neopixel-esp32-esp8266/
     Controlling the strip with MicroPython is much easier than with Arduino IDE, in my opinion.
     You can try combining the micropython tutorial with the micropython web server:https://randomnerdtutorials.com/esp32-esp8266-micropython-web-server/
     I hope this helps.
     Regards,
     Sara

     Reply

8. Hi
   I am using a 5 meter 12V 5050 RGB LED strip with a 12V 10 Amp power supply and esp8266. The entire strip can draw max current of 8.4Amps, do i need to use resistors? if yes what should be their value and what transistors are needed.

   Reply

9. Hi Sara,
   Ive set it up with my ESP32, however only the red is working, do you have any idea’s why?

   Reply

10. This one is pretty much nice. Never new for those functions. Just a question:
    This project could be done using some MOSFETs. Say IRF510 for a longer strip?

    Reply

11. this html code not working when i set esp8266 as an access point. how to sort it out.

    Reply

    • Hi.
      What do you mean by “not working”?
      Can you provide more details?
      Regards,
      Sara

      Reply

      • I uploaded above sketch as you posted it works well with wifi router but when i use it with access point configuration it is not working.
        // Load Wi-Fi library
        #include <ESP8266WiFi.h>

        // Replace with your network credentials
        const char* ssid = “RGB-led”;
        const char* password = “12345678”;

        // Set web server port number to 80
        WiFiServer server(80);

        // Decode HTTP GET value
        String redString = “0”;
        String greenString = “0”;
        String blueString = “0”;
        int pos1 = 0;
        int pos2 = 0;
        int pos3 = 0;
        int pos4 = 0;

        // Variable to store the HTTP req uest
        String header;

        // Red, green, and blue pins for PWM control
        const int redPin = 13; // 13 corresponds to GPIO13
        const int greenPin = 12; // 12 corresponds to GPIO12
        const int bluePin = 14; // 14 corresponds to GPIO14

        // Setting PWM bit resolution
        const int resolution = 256;

        // Current time
        unsigned long currentTime = millis();
        // Previous time
        unsigned long previousTime = 0;
        // Define timeout time in milliseconds (example: 2000ms = 2s)
        const long timeoutTime = 2000;

        void setup() {
        Serial.begin(115200);

        // configure LED PWM resolution/range and set pins to LOW
        analogWriteRange(resolution);
        analogWrite(redPin, 0);
        analogWrite(greenPin, 0);
        analogWrite(bluePin, 0);

        // Connect to Wi-Fi network with SSID and password
        WiFi.softAP(ssid, password);

        IPAddress IP = WiFi.softAPIP();
        Serial.print(“AP IP address: “);
        Serial.println(IP);
        server.begin();
        }

        void loop(){
        WiFiClient client = server.available(); // Listen for incoming clients

        if (client) { // If a new client connects,
        currentTime = millis();
        previousTime = currentTime;
        Serial.println(“New Client.”); // print a message out in the serial port
        String currentLine = “”; // make a String to hold incoming data from the client
        while (client.connected() && currentTime – previousTime <= timeoutTime) { // loop while the client’s connected
        currentTime = millis();
        if (client.available()) { // if there’s bytes to read from the client,
        char c = client.read(); // read a byte, then
        Serial.write(c); // print it out the serial monitor
        header += c;
        if (c == ‘\n’) { // if the byte is a newline character
        // if the current line is blank, you got two newline characters in a row.
        // that’s the end of the client HTTP request, so send a response:
        if (currentLine.length() == 0) {
        // HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
        // and a content-type so the client knows what’s coming, then a blank line:
        client.println(“HTTP/1.1 200 OK”);
        client.println(“Content-type:text/html”);
        client.println(“Connection: close”);
        client.println();

        // Display the HTML web page
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
client.println("<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\">");
client.println("https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js");
client.println("</head><body><div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1></div>");
client.println("<a class=\"btn btn-primary btn-lg\" href=\"#\" id=\"change_color\" role=\"button\">Change Color</a> ");
client.println("<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div>");
client.println("<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' + Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);");
client.println("document.getElementById(\"change_color\").href=\"?r\" + Math.round(picker.rgb[0]) + \"g\" + Math.round(picker.rgb[1]) + \"b\" + Math.round(picker.rgb[2]) + \"&\";}</script></body></html>");
// The HTTP response ends with another blank line
client.println();

        // Request sample: /?r201g32b255&
// Red = 201 | Green = 32 | Blue = 255
if(header.indexOf("GET /?r") >= 0) {
pos1 = header.indexOf('r');
pos2 = header.indexOf('g');
pos3 = header.indexOf('b');
pos4 = header.indexOf('&');
redString = header.substring(pos1+1, pos2);
greenString = header.substring(pos2+1, pos3);
blueString = header.substring(pos3+1, pos4);
/*Serial.println(redString.toInt());
Serial.println(greenString.toInt());
Serial.println(blueString.toInt());*/
analogWrite(redPin, redString.toInt());
analogWrite(greenPin, greenString.toInt());
analogWrite(bluePin, blueString.toInt());
}
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");


        }
        }

        after uploading this sketch color picker button not showing color bar

        Reply

        • Hi.
          It is because it uses ajax, and it needs a connection to do the internet to access the CDN.
          Regards,
          Sara

          Reply

12. Hi, may I know if I would like to include brightness together with the color, may I know how to go about doing it? For example, I want it to be in red and in 80% of brightness and changing it simultaneously.

    Reply

    • For esp32 specifically. Thank you!

      Reply

      • Hi Amanda,
        You could try making a HSL color picker, then convert the HSL to RGB. The HSL mode works on the basis of Hue, Saturation and Luminance. RGB only works with Red, Green and Blue. You can try building a Luminance slider which allows you to set the intensity of the light.

        Reply

13. After powering off, Esp8266 generate a new IP. How I can generate a fixed or static IP?

    Reply

    • Hi.
      Check this tutorial:https://randomnerdtutorials.com/esp8266-nodemcu-static-fixed-ip-address-arduino/
      Regards,
      Sara

      Reply

14. I made a version with WifiManager, and store last settings in EEPROM 🙂
    Works great.
    If I manage to get an account on instructable, I will post it.

    Reply

15. Thank you for the wonderful tutorial!! Absolutely fascinating.

    I’m super new to the world of ardiuno but was wondering what additions to the url/code to add an ability to simple turn a specific LED on or off?

    Use case is a shelf to light up for a specific LED placed at a particular position – one at at time.

    EX. on a 15 LED strip, to turn on or off LED # 4 to Red, or LED #6 to Green, etc.

    Reply

16. Hi, in this tutorial,https://randomnerdtutorials.com/esp32-esp8266-rgb-led-strip-web-server/, you use:
    #include <WiFi.h>

    In the web server tutorial,https://randomnerdtutorials.com/esp8266-web-server/, and the slider tutorial,https://randomnerdtutorials.com/esp8266-nodemcu-web-server-slider-pwm/, you use
    #include <ESP8266WiFi.h>

    What’s the difference between these wifi libraries and why choose one over the other?

    The slider tutorial, also uses async libraries:
    #include <ESPAsyncTCP.h>
    #include <ESPAsyncWebServer.h>

    Are there any examples with multiple elements, a slider, input buttons, input text box, all on one page? Would they necessarily have to have the async libraries if they include a slider?

    Thanks!

    Reply

    • Hi.
      You can use any of the libraries.
      For a slider using the AsyncWebSever, you can take a look at this tutorial:https://randomnerdtutorials.com/esp32-web-server-slider-pwm/

      If you prefer to use the other library, the following tutorial can be a good starting point:https://randomnerdtutorials.com/esp32-servo-motor-web-server-arduino-ide/

      We have several web server examples with multiple different elements. You can check all our web sever tutorials here:https://randomnerdtutorials.com/?s=web+server

      Regards,
      Sara

      Reply

17. Hello
    I want to follow this tutorial but power a 12v led strip. Would I damage the ESP32 board if I connect the Vin input in with the 12v power supply that came with the led strip? Would I need a step down voltage suppliers?
    Thanks
    I’m enjoying the tutorial on this site so far.

    Reply

18. Hi Sarah/Rui. Once again, great work, thanks. I have loaded this programme into an ESP-32S and all is well when I connect something other than an Android device. I was just wondering if you had received any feedback from anyone else along similar lines? I believe that my Samsung underwent a software upgrade the other day and I am sure that I tried this previously and it worked. Thanks again, Colin.

    Reply

    • Hi.
      What are the web browsers that you’re using?
      Regards,
      Sara

      Reply

19. Hi Sara. Sorry that I miss-spelt your name earlier. I have used Chrome, DuckDuckGo, Edge and Firefox for exactly the same result of Express VPN looking to get me connected.

    Reply

    • I’m sorry but I didn’t understand. Are you using a VPN?
      I don’t think you can use VPN to access the ESP web server.
      Disable the VPN an try again.
      Regards,
      Sara

      Reply

      • Hi Sara. I have a VPN, but I was trying to connect via the service provider modem. The issue may be a caching issue. I will look into that. Thanks.

        Reply

20. Hi Sara, i have a TIP41C,
    It should work the same, right? but at 12v. thank you

    Reply

21. Greetings and congratulations. How can I control from another network, do you have a tutorial?

    Reply