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.
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 line if you like this project, and let me know if you find any issue, feel free to share it with your friends, and stay tune for more IoT projects.
