4 Steps to create WiFi Controlled RGB LED Strip using ESP8266

I have always wanted to have an internet controlled LED light. So after researching a few different combination, I manage to find the one that is suitable. Using the RGB LED strip, and connecting this to the ESP8266 as the IoT device. I happened to have a spare RGB LED strip that is lying around from last Christmas. It is powered by 12 V, but no fear we are doing some serious current sinking using the MOSFET transistor.

We are designing the control using the same layout as the Remote Control. My RGB LED strip comes with remote control that looks like the following picture:

Since the ESP8266 can function as a webserver as well, we are utilising this capabilities to create the Remote layout. So the idea is we are using the ESP8266 to serve the website which function as the remote control, and the output will be used to drive the MOSFET which act as a switch to turn each of the LEDs (RED, GREEN or BLUE). With the different combination we can achieve different variety of colours.

Step 1. Gather all the components required

We will need the following components:

• 1 x ESP8266
• 3 x MOSFET IRF510
• RGB LED Strip
• Prototype board
• Connector wire
• 12V Power supply for LED Strip
• 5V Power supply for the ESP8266

Now that we have gathered all the components, we can start connecting the Circuit. Please note that some of the above link might be my affiliate link.

Step 2. Connected the circuit

Connect the circuit as per the connection diagram shown below:

One thing important to note is to make sure the GND of 12 V power supply is connected to the GND of the 5V power supply if they are sourced from a different power source. You could also use the same 12 V power and down convert to 5V using the Regulator LM7805, but in this writeup, I am assuming we are using 2 different power source.

Step 3. Upload the Code

Now that everything is wired up, it is time to do the smoke test, and turn on the 12 V power supply, and if you don’t see any smoke then hopefully everything is wired correctly. Now the fun part begins. You can upload the following source code.

Step 4. Code Walkthrough

The source code consist of 4 files:

• ESP8266LEDStripWifi.ino: This is the main file where the heavy lifting is done
• Color.cpp and Color.h : is the header files and the Color library to make the code more object oriented so that you can make necessary adjustment to RGB value easily
• mainPage.h: this is the html code which is served by ESP8266 as shown in the first picture above.

The code uses the an OTA library as well to make sure faster upload if there is any adjustment required for the source code. Here are some of the important things to note during initialisation:

/* Network settings */
const char* ssid = "yourWIFISSID"; // SSID - your WiFi's name 
const char* password = "yourwifipassword"; // Password 
const char* device_name = "led"; // you can access controller by http://led.local/
IPAddress ip(192,168,1,111);  // static IP adress of device 
IPAddress gateway(192,168,1,1); // Gateway
IPAddress subnet(255,255,255,0); // Network mask

const int redLED = 0;  // D3 GPIO0
const int greenLED = 2;  // D2 GPIO2
const int blueLED = 4;  // D4 GPIO4

You will need to change the ssid and password to allow the device to connect to your WiFi router. We are also assigning the static ip address of 192.168.1.111 for the ESP8266, if you have a different subnet, please feel free to change this along with the Gateway and the network mask.

Connection to the MOSFET is done from D2, D3 and D4 pin on the ESP8266, if you are connecting this to different pin, please make sure you make the appropriate adjustment.

Setup Section ()

Here are some snippets of the code in the setup () section:

void setup(void) {
 delay(1000);
 /* Begin some (un)important things */
   Serial.begin(115200);
   WiFi.begin(ssid, password);
   WiFi.config(ip, gateway, subnet);
   Serial.println("");
   // OTA code
   ArduinoOTA.setHostname("LEDStrip");
   ArduinoOTA.setPassword((const char *)"ledstripOTApassword");
   ArduinoOTA.begin();
...
/* Show website (in browser), than send RGB code */
   server.on("/", []() {
     server.send(200, "text/html", webPage);
     Serial.println("Loaded main page");
     Serial.print("Pressed: ");
     Serial.println("on");
   });

...
server.on("/red", []() {
     server.send(200, "text/html", webPage);
     createColor.red();
     Serial.print("Pressed: ");
     Serial.println("red");
     delay(1000);
   });

...

}

You will notice that in this section, the OTA password is being defined, this is to make sure we always have security in mind and not allowing unauthorised update. The code is quite repetitive for each section to handle the main website, and when each button press according the the colour.

For example when the RED button on the website is being pressed, we are calling the following code:

server.on("/red", []() {
     server.send(200, "text/html", webPage);
     createColor.red();
     Serial.print("Pressed: ");
     Serial.println("red");
     delay(1000);
   });

This will send back the website refresh and then call the createColor.red() method which will drive the LED colour of the LED, then followed by showing the Pressed: red message in the Serial output window for debugging purposes.

Please note that not all buttons have been program, especially the special effects button.

Loop () section

Loop () section of the code is quite simple as shown below:

void loop(void) {
   server.handleClient();
   ArduinoOTA.handle();
 }

It only serve the webserver and handle the OTA update.

If all goes well, you should have the WiFi controlled LED strip that you can control from anywhere in your home or office. You should see the following results:

Please drop me a comment if you like this project this will keep me motivated to create more content, and let me know if you have any questions, feel free to share it with your friends, and stay tune for more IoT projects.

NB: If you find this useful and you want to support me you can by me a coffee by sending it to my paypal account below. For every dollar you give me I will donate 5% to my local charity that I support.

https://paypal.me/effendyhu?locale.x=en_AU