TIn this project, I’ll show you how you can build your own mood light. You’ll use an ESP8266 to remotely control the color of your light using your smartphone or any other device that has a browser. This project is called $10 DIY WiFi RGB LED Mood Light.
First, watch the step by step video tutorial below
To learn more about the ESP8266 and RGB LEDs use the following tutorials as a reference:
- How do RGB LEDs work?
- ESP8266 RGB Color Picker
- Getting started with the ESP8266
- ESP8266 web server with NodeMCU
- Flashing NodeMCU firmware
- ESP8266 troubleshooting guide
If you like the ESP and you want to do more projects you can download my eBook Home Automation using ESP8266 here.
Let’s get started!
Parts List
Here’s the hardware that you need to complete this project:
- 1x 12V Power Supply
- Device to reduce voltage from 12V to 5V
- Alternative – LM7805 with heat sink
- Recommended – Step down buck converter module
- 3x NPN Transistors 2N2222 or equivalent
- 3x 1k Ohm Resistors
- 1x Breadboard
- Jumper wires
- Table Lamp with Mood Light Look
You can use the preceding links or go directly to MakerAdvisor.com/tools to find all the parts for your projects at the best price!
Flashing Your ESP with NodeMCU
In this tutorial we are going to use the NodeMCU firmware. You have to flash your ESP with NodeMCU firmare.
Downloading ESPlorer IDE
I recommend using the ESPlorer IDE which is a program created by 4refr0nt to send commands to your ESP8266.
Follow these instructions to download and install ESPlorer IDE:
- Click here to download ESPlorer
- Unzip that folder
- Go to the main folder
- Run “ESPlorer.jar” file
- Open the ESPlorer IDE
Uploading Code
You should see a window similar to the preceding Figure, follow these instructions to upload a Lua file:
- Connect your ESP8266-12E that has built-in programmer to your computer
- Select your ESP8266-12E port
- Press Open/Close
- Select NodeMCU+MicroPtyhon tab
- Create a new file called init.lua
- Press Save to ESP
Everything that you need to worry about or change is highlighted in red box.
Code
Upload the following code into your ESP8266 using the preceding software. Your file should be named “init.lua“.
Don’t forget to add your network name (SSID) and password to the script below.
IMPORTANT: the embedded script below was made in 2016 and it works with an older version of the Lua firmware. If you’re running a newer version of the Lua firmware, you’ll need to use this script instead: ESP8266_RGB_Color_Picker_New.lua.
-- Rui Santos
-- Complete project details at https://randomnerdtutorials.com
wifi.setmode(wifi.STATION)
wifi.sta.config("REPLACE_WITH_YOUR_SSID","REPLACE_WITH_YOUR_PASSWORD")
print(wifi.sta.getip())
function led(r, g, b)
pwm.setduty(5, r)
pwm.setduty(6, g)
pwm.setduty(7, b)
end
pwm.setup(5, 1000, 1023)
pwm.setup(6, 1000, 1023)
pwm.setup(7, 1000, 1023)
pwm.start(5)
pwm.start(6)
pwm.start(7)
srv=net.createServer(net.TCP)
srv:listen(80,function(conn)
conn:on("receive", function(client,request)
local buf = "";
buf = buf.."HTTP/1.1 200 OK\n\n"
local _, _, method, path, vars = string.find(request, "([A-Z]+) (.+)?(.+) HTTP");
if(method == nil)then
_, _, method, path = string.find(request, "([A-Z]+) (.+) HTTP");
end
local _GET = {}
if (vars ~= nil)then
for k, v in string.gmatch(vars, "(%w+)=(%w+)&*") do
_GET[k] = v
end
end
buf = buf.."<!DOCTYPE html><html><head>";
buf = buf.."<meta charset=\"utf-8\">";
buf = buf.."<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">";
buf = buf.."<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
buf = buf.."<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css\">";
buf = buf.."<script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js\"></script>";
buf = buf.."<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js\"></script>";
buf = buf.."</head><body><div class=\"container\"><div class=\"row\"><h1>ESP Color Picker</h1>";
buf = buf.."<a type=\"submit\" id=\"change_color\" type=\"button\" class=\"btn btn-primary\">Change Color</a> ";
buf = buf.."<input class=\"jscolor {onFineChange:'update(this)'}\" id=\"rgb\"></div></div>";
buf = buf.."<script>function update(picker) {document.getElementById('rgb').innerHTML = Math.round(picker.rgb[0]) + ', ' + Math.round(picker.rgb[1]) + ', ' + Math.round(picker.rgb[2]);";
buf = buf.."document.getElementById(\"change_color\").href=\"?r=\" + Math.round(picker.rgb[0]*4.0117) + \"&g=\" + Math.round(picker.rgb[1]*4.0117) + \"&b=\" + Math.round(picker.rgb[2]*4.0117);}</script></body></html>";
if(_GET.r or _GET.g or _GET.b) then
led(_GET.r, _GET.g,_GET.b)
end
client:send(buf);
client:close();
collectgarbage();
end)
end)
Schematics
Now follow these schematics to create the final circuit.
Your ESP IP Address
When your ESP8266 restarts, it prints in your serial monitor the ESP IP address. Save that IP address, because you’ll need it later.
In my case, the ESP IP address is 192.168.1.105. If you experience problems seeing your IP read this troubleshooting guide.
You’re all set!
Opening Your Web Server
Go to any browser and enter the IP address of your ESP8266. This is what you should see:
Click the input field and a small window opens with a color picker. Simply drag your mouse or finger and select the color for your RGB LED strip:
Finally, press the “Change Color” button:
Now, your mood light can be placed in your living room:
Go to the top of this page to see a video demonstration of this project.
Wrapping Up
This project shows a real world application for the ESP8266 board. If you don’t have an RGB LED strip, but you still want to try this project you can read this blog post ESP8266 RGB Color Picker that changes the color of an RGB LED with an ESP8266.
Do you have any questions? Leave a comment down below!
Thanks for reading. If you like this post probably you might like my next ones, so please support me by subscribing my blog.
Nice presentation. Thanks.
Thank you for reading Robert!
Looks Easy and clear! Will empty My workarea and listen to your lessons.
Awesome! Looking forward to see the final result!
Nifty little project! Now, and off the wall question: could this project be converted to use Bluetooth instead of wi-fi? Thanks!
I’m glad it was useful Kyle. Yes, this could be controlled with an Arduino that had a bluetooth module attached
Lovely ! Very nicely done! I highly appreciate your tutorials !
Thank you for reading Mike!
You’re welcome Mike!
Hello Rui,
Thank you very much for your great tutorials. I would like to ask you if I could use three MOSFETs instead of BJTs. I would also to ask you about a general “problem” I have. When I reset Esp-01, for example in the case of one led connected at GPIO-02 , blue led remains on and I have to remove this led at GPIO-02 and reset it again to work.
Thank you in advance
Panos
Rui does look good after his followers, true. If you want to reach out to the global NodeMCU community rather then depending on Rui’s personal feedback I suggest you take a look at nodemcu.readthedocs.io/en/latest/en/support.
Nice one 🙂
Please don’t teach your readers bad practice, though!
wifi.sta.config(…)
tmr.delay(5000)
print(wifi.sta.getip())
Is a no-go for two reasons:
– tmr.delay() is bad practice and should only be used as a last resort. Also, IIRC the delay must not be more than 50µs. See http://nodemcu.readthedocs.io/en/latest/en/modules/tmr/#tmrdelay for details.
– wifi.sta.config() is asynchronous and you need to wait until you get an IP address before you can continue, it may very well be more than 5000µs. See http://nodemcu.readthedocs.io/en/latest/en/upload/#initlua for a much better boot sequence.
I’ve removed the delay from the code. Thank you Marcel!
That ain’t good enough, sorry.
Without the delay wifi.sta.getip() will print nil because wifi.sta.config() is asynchronous i.e. it won’t block until an IP was assigned. You really need some sort of timer interval as shown in our docs. Alternatively you could use the more modern approach and register for WiFi events, see nodemcu.readthedocs.io/en/latest/en/modules/wifi/#wifistaeventmonreg.
Hi can you try an example on how to controlle 5v ws2812b leds and matrix over wifi? or even controle glediator easy via esp8266.
Gentlemen Good day
Some time ago I read an article regarding the control of LEDs. A module was recommended in the article, so I rushed off and bought one:
Digital TM1638 8 Bits LED Keyboard Scan And Display Module Digital Tube ST
At the time of reading the article, I thought I had saved the instructions on how to use this module.
Of course, now I come to look for them…can’t find them. Can you help me please?
Many thanks
Michael
Hi Michael,
I don’t recall using or mentioning the TM1638 8 Bits LED and I don’t have any tutorials with that module.
Thanks for asking,
Rui
cool explanation. Thanks for that.
One question for a beginner: Why do I have to use a resistor on the gate of the mosfet and how do I have to calculate the size of 1k?
That value should work!
Nice work. Thanks for sharing this !!!
You’re welcome! Thanks,
Rui
Please be aware that the transistors you use are limited to 600mA, this can be an issue with long or power hungry strips.
He Rui,
I have tryed this now on different nodemcu e12 but the sum is always the same.
It connects to the wifinetwork and I can surf to the page but then …
It never changes a color of the ledstrip!
I can click on the color field in the page, change the hex numbers and push the button but the is no action in the ledstrip.
There is always 0.41 volt on the blue wire. 0.84 on the green and red wire.
I flashed the nodemcu e12 with : nodemcu_float_0.9.6-dev_20150704 and even let a flash fill make by a thirth party but, like I said before, the sum is always the same.
Something is wrong but have no clue any more.
Do you have any idea?
Greetings,
Ray.
Update.
if I change (type it in) :http://192.168.xxx.xxx/?r=000&g=000&b=000 (where the xxx.xxx is my ip) in :http://192.168.xxx.xxx/?r=254&g=254&b=254 the values on the nodemcu e12 change!
Is this browser related?
Hi,
I noticed that this exaple with rgb led only works using Your firmware from August 2016. With new firmware the webserver does not work properly. Of course I have changed ssid and pwd in a table and have the firmware made using the same modules.. The webserver changes colors, but cannot be called anymore by the IP-adress.
I would be very interested in a solution
Regards Derek
Hi.
You’re probably right. We haven’t tested this example for a while.
At the moment we don’t have time to update the code.
The method to create the web server with the new version of the firmware might be slightly different now.
So, try to look for a web server example that works with the most recent firmware version and then, try to modify this example to make it work with the new version.
Regards,
Sara
only my green turns off and red and blue stay on no matter what colour i choose
Hi.
It might be something wrong with your LED strip, or it is not fully compatible with this tutorial.
Regards,
Sara 🙂
Hi
first of all nice project.
What do i need to modify to run the same with 24V?
What are those values and where you get them from?
pwm.setup(5, 1000, 1023)
pwm.setup(6, 1000, 1023)
pwm.setup(7, 1000, 1023)
The same values should work with 24V… The ESP will output only 3.3V regardless, so the PWM signals is always the same.
That step down converter has IN+, IN-, OUT+ and OUT-, but you only need to connect one cable to the esp and one to the power source. Should they be connected to IN+ and OUT- or how does that work?
Hi.
The OUT- should be connected to the ESP8266 GND. And the and IN- should be connected to GND of your power source.
Regards,
Sara
I am always learning from you and I am very thankful for all your posts. I am trying to transform a single 10W rgb led lamp to be controlled via wi-fi. The led board has 3 wires, one for VCC, one for GND, and one for signal. Do you have a graphic on how could I connect it to an ESP8266? As always, thank you in advance.
Hi,
If I want to do more than one meter of led strip would this schematic work?
Regards,
Carlos
Hi Carlos.
Yes, but you have to measure current consumption and see if those transistors are appropriate.
Regards,
Sara
Gave it a try today and after some trial and error, got it working. Unfortunately I had a bad MCU, but once I realized that, it went pretty smoothly.
I am a newbie and was wondering if you have further information on how I can adjust the colors. Not sure my LEDs are the best quality and did find the red connection was swapped with the green, but thought maybe there is a way to play around with the settings.
Thanks much for all you all offer – Bryant
Hi Bryant.
To control the LEDs you use PWM to change their color.
Unfortunately, we don’t have any tutorial explaining how it works using LUA programming language.
We have some tutorials that explain this concepts using arduino IDE:https://randomnerdtutorials.com/esp32-esp8266-rgb-led-strip-web-server/
How RGB LEDs work: https://randomnerdtutorials.com/electronics-basics-how-do-rgb-leds-work/
I hope this helps.
Regards,
Sara