Introduction

Hello, electronics enthusiasts! In the following tutorial, I will show you how you can make a DIY controller for a LED strip using an Arduino Pro Mini and an ESP8266 WiFi module. This module will help us control the light strip using our smartphones.

The idea behind this project

Now we all know that you can buy cheap controllers for such LED Lights, but let’s say you have one laying around or you found a cheap one in a store. Now you would like to make it light up and play with the lights, wouldn’t you? For that, you only need an Arduino and ESP8266. In order for you to understand the content of this article you also need basic electronics and Arduino knowledge. So, without further redo, let’s get into the project.

Getting started

Now to begin this project, I made a component list for you.

Components Required: 

Arduino Pro Mini µController	1
ESP8266 WiFi Module	1
IRF 510 MOSFET	3
100µF Capacitors	3
Screw Terminals for wire	3
1k resistors	3
10k resistors	3
Perfboard	1
LM7805 voltage regulator	1
Click here to	visit our official online store

Function principle

In this paragraph, I will introduce you to the functional principle of this project, which is made by me.The Arduino is the main controlling part. Basically, you use the ESP8266 in combination with the Blynk smartphone App to set the colour you would like to see. You set 3 pins of the ESP for each colour. You want to make sure that you choose PWM pins, since their voltage will change proportional to the value of the colour. This value is then transferred to the Arduino, which makes a voltage out of it. This voltage is then used to control the Gate of the corresponding MOSFET. There are 3 of them, for each colour.

For example, you set the colour to white, which means each colour(red, green and blue) has a value of 1023(10 Bit ADC). Now you’d like to remember that the ESP8266 module only works with 3.3V on its I/O pins. Anyways, the 3 pins you have selected for the colours will output a voltage of 3.3V. These get fed in the analog inputs of the Arduino. Now, the Arduino ADC reads the voltages and gives a value of 675 ( 1024/5*3.3V). Now you cannot simply use this value to control the FETS, because with only 3.3V on their Gate, they will not fully conduct, and you won’t get the maximum brightness. You need to map this value to 5V. I will explain this part in the section Programming.

Schematic Diagram:

On the input screw terminal, we have 12V. This voltage connects to the + terminal of the LED Strip, and to the voltage regulator, because we need 5V for our µControllers. Now you might ask yourself why don’t just connect 12V to the VIN pin of both boards, and the answer is power dissipation. The regulator must dissipate 7V in heat, and for the little Arduino Mini that is too much heat generated, so it’s better to dissipate that heat on an external regulator. Everything else is self-explanatory, and do not forget to connect all Ground connection to one another.  

A connection between Arduino and ESP8266

As you noticed, the ESP8266 pins are not directly connected to the analog pins of the Arduino. Now in order to explain why we need the RC component, I will show you some waveforms. For example, if I set the colour to maximum red, this is what the corresponding pin outputs:

As we see, it’s a constant voltage with 3.3V RMS (my oscilloscope is not very accurate). So yes, nothing exciting.  It gets exciting when I change the value of the colour to for example 50%. This is now what the pin outputs:

Now the voltage is not even close to be constant. As we see, the voltage is PWM with 1kHz frequency and 50% duty cycle, and as we know, we can’t feed a PWM voltage into an Arduino analog pin. We need to get this voltage to a constant one, and for that we need a low-pass made by a resistor and capacitor.  Now, if I probe the output of the filter, this is how the waveform looks like:

As we can observe, the RMS voltage is almost the same as before, but now there is no frequency and no duty cycle anymore. This means, that we have a pure analog voltage, which we can feed into the Arduino analog pins.

Programming

Now I will not go very much in detail with the code. I will explain the most important things you need for the programming of the Arduino. The main condition for you to follow these steps is to already have included the ESP8266 board and library to the Arduino IDE.

As I told you beforehand, you will need to map the voltage of the ESP8266 that you are reading with the analog port to 0…5V, and this is how you do it:

  red_esp= map(value_red_esp, 0, 673, 0, 255);
  green_esp= map(value_green_esp, 0, 673, 0, 255);
  blue_esp= map(value_blue_esp, 0, 673, 0, 255);

Now for the explanation: the map function needs 5 parameters:

First: the variable that you need to map. value_red_esp is the variable defined to read the analog pin. So here we will have the signal for the colour we want to have.

Second: the beginning value of this variable. Logically, it begins with 0

Third: the maximum value of the variable. In this case, the 3.3V maximum mean 673 digital value.

Fourth: the beginning value that you want your variable to be mapped to. In this case it’s 0.

Fifth: the maximum value of the value that you want your variable to be mapped to. 255 means 5V PWM signal.

To clarify something: both ESP8266 and Arduino feature a 10 Bit ADC. The ESP8266 works, as mentioned, with 3.3V. So the maximum value of the ADC(1023) means 3.3V. However, because the Arduino works with 5V, 1023 mean 5V for the Arduino.

Now an example: we set the colour to white. This means, we read the value 673 for each colour. So value_red_esp, value_green_esp and value_blue_esp will all have the value of 673.

In the map function the value gets mapped to 255, and this value is written on the variables red_esp, green_esp and blue_esp.

Because the voltage of the ESP8266 might not be very accurate, upon reaching the maximum brightness, the light might begin to flicker, and this is how I make sure that the value remains at 255 if it fluctuates between 254 and 255.

  if( red_esp >= 254){
    red_esp = 255;
  }
   if( green_esp >= 254){
    green_esp = 255;
  }
 if( blue_esp >= 254){
    blue_esp = 255;

Now, to really control the lights, we need a switch. This switch is the pin 2 of the ESP8266. Whenever this pin is high, the Arduino writes the colour values to the FETs.

  on_signal_esp = digitalRead(flag_esp);
  if( (on_signal_esp == 0)){
  red_color=0;
  blue_color=0;
  green_color=0;
  }
  else if ((on_signal_esp == 1)){
  red_color=red_esp;
  blue_color=blue_esp;
  green_color=green_esp;

Finally, this is how we write the values to the FETs:

  analogWrite(pinRED, red_color);
  analogWrite(pinGREEN, green_color);
  analogWrite(pinBLUE, blue_color);

Complete Source Code For Arduino Pro

#define pinRED 3
#define pinGREEN 5
#define pinBLUE 6

#define flag_esp 11

int value_red_esp;
int value_green_esp;
int value_blue_esp;

int red_esp;
int green_esp;
int blue_esp;

int value_red;
int value_green;
int value_blue;
int on_signal_esp;

int brightness_red;
int brightness_green;
int brightness_blue;

int red_color;
int blue_color;
int green_color;

void setup() {
  // put your setup code here, to run once:
  pinMode(pinRED, OUTPUT);
  pinMode(pinGREEN, OUTPUT);
  pinMode(pinBLUE, OUTPUT);
  pinMode(flag_esp,INPUT);
  
  Serial.begin(9600);
}

void loop() {
  // put your main code here, to run repeatedly:

  value_red_esp= analogRead(A0);
  value_green_esp= analogRead(A1);
  value_blue_esp= analogRead(A2);

  red_esp= map(value_red_esp, 0, 673, 0, 255);
  green_esp= map(value_green_esp, 0, 673, 0, 255);
  blue_esp= map(value_blue_esp, 0, 673, 0, 255);

  if( red_esp >= 254){
    red_esp = 255;
  }
   if( green_esp >= 254){
    green_esp = 255;
  }
 if( blue_esp >= 254){
    blue_esp = 255;
  }
  on_signal_esp = digitalRead(flag_esp);
  if( (on_signal_esp == 0)){
  red_color=0;
  blue_color=0;
  green_color=0;
  }
  else if ((on_signal_esp == 1)){
  red_color=red_esp;
  blue_color=blue_esp;
  green_color=green_esp;
  }

  analogWrite(pinRED, red_color);
  analogWrite(pinGREEN, green_color);
  analogWrite(pinBLUE, blue_color);
  
  Serial.print(on_signal_esp);
  Serial.print(" ");
  Serial.print(red_esp);
  Serial.print(" ");
  Serial.print(green_esp);
  Serial.print(" ");
  Serial.println(blue_esp);

  
  
}

 

Making the Blynk App

Now to keep going, you need to know how you connect the ESP8266 with the Blynk app. Read below articles and learn how to Program ESP8266 Module for Blynkapp.

Learning How to Use Esp8266 in Combination with Blynk App | IoT

IOT Based Home Automation by Using ESP8266 (NodeMcu) with Blynk

The design of the App is very simple. Just use an RGB Zebra and a button for the switch and you are ready to go.

Here you can also see which pins I used.

Finalized PCB

This is how my final product looks like:

Finally I would like to say that this project has some potential for more features. For example, you can use 3 potentiometer to adjust the colours from your work desk for example, without using a smartphone. You can also add buttons in the Blynk App to for example create random colours, like a remote control, or a button to make a colour show. Here you can use your imagination to expand this project and make it more awesome. Thank you for reading this tutorial and I hope you also learned a thing or two.

Demonstration Video: